HTML basics

Two years ago when I started to learn coding i.e. how to learn code. That was how to make a website using HTML and CSS. But after a few days, I was failed because honestly then I did not know the basics of HTML and CSS. Then I realized at first I have to know the basic and it's important. If your hair root is strong, you will not face the hair fall problem. Today I will share with you my real-life experience of HTML basics that will make you a HTML basics webmaster in just a few hours.

Learn HTML basics and CSS step-by-step Guide today

HTML basics

Why we are waiting? Let's ya! First, you have to know what is HTML and how does it work.

What is HTML?

HTML is a markup language. The full form of HTML is hypertext markup language. HTML used for structure a webpage and it's content and it's not a programming language. HTML has consists of a series of elements that are used to enclose or warp different parts of the content to make it appear a certain way. For example: take the line...

1. Html is a markup language.

If you want this line will be stand by itself, you can specify that it's a paragraph by using the paragraph tags.

1. <p>HTML is a markup language.</p>

The History of HTML.

HTML was created by physicist Tim Berners, The European Organization for Nuclear Research (CERN), data system engineer Robert Cailliau in 1989. It's known as a hypertext markup language.

Html is a document that contains more links that are interconnected with the document. HTML allows the reader to jump to the other places in the document or to another document altogether.

By a markup language, computer and other electronics devices speak to each other to control how text is processed and presented. HTML does this work by the two important things that are tags and attributes.

How does HTML work?

 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Inter your page title</title>

    </head>

    <body>

        <p>This is your page</p>

    </body>

</html>

HTML head

The head element is not displayed in the browser page because the head job is to contain metadata about the document. Metadata will not be displayed but it contains page description, keywords, author of the document, last modified and other metadata.

HTML head tags (I will tell you later what is tag and attributes) used for a link with CSS, javascript, and another language and also used for an image link. In head tag, Anything written between the <title> tags will appear in the title bar (or tags) at the top of the browser window.

In body tags, Anything written between the <body> tags will appear in the main browser window.

What are tags and attributes?

HTML Tags

The tags task is to contain information. Tags will tell you about the information that was lies or entered between there opening and closing tags.

HTML basics

Attributes

Attributes take the step for extra information about the contents of an element. They appear after opening tag element and divided by a space and are made up of two parts: a name and a value, separated by an equal sign.

Content: The content is lies between the opening and closing tags that are just text.

Element: The element is lies between the opening and closing angle brackets.

HTML basics

Let's Create a Web page by our Basic HTML knowledge

HTML heading

If you are new, my suggestion is to create your web page on the notepad. It will help you to better understand but if you know the HTML basics then redirect on HTML editor.

There are 6 types of heading. <h1> is used for main headings
<h2> is used for subheadings
If you want to enter further sections under the subheadings then the <h3> element is used, and so on...

 
<h1> THIS IS HEADING 1</h1>

<h2> THIS IS HEADING 2</h2>

<h3> THIS IS HEADING 3</h3>

<h4> THIS IS HEADING 4</h4>

<h5> THIS IS HEADING 5</h5>

<h6> THIS IS HEADING 6</h6>

HTML basics

If you want this output just write what I am written and save this by.HTML extension for example index.html
After finish save then open the file with a browser (Chrome, Mozilla, Microsoft edge opera mini, etc.)

HTML paragraph (p tag)

To create a paragraph use paragraph tag <p> and write what are you want. Paragraph tag helps us to add text in HTML.

Input

<p> P tags purpose is to add text or a line in html.</p>

Output

P tags purpose is to add text or a line in html.

If you add text in HTML and your wish is to shown the text or a line a certain way then take a look ya.

Element	Meaning	Purpose
<b>	Bold	This tag makes the selected text bold
<i>	Italic	This is how the text makes appear in italic
<sub>	Subscript	It used for footnotes or chemical formulas.
<sup>	Superscript	Used for Suffixes of dates or mathematical concepts like raising a number to a power.
<br />	Line Breaks	Used for line break
<hr />	Horizontal rule	Used for creating a break between theme
<strong>	Strong important	The use of the element says the content is strong important
<em>	Emphasis	This will subtly change the meaning of the sentence and you will the work of the element is as like as italic tag (<i>)
<mark>	Marked text	Highlight the background color with text
<small>	Small text	Used to shrink the text
<strike>	Striked text	Used to place a horizontal line across the text
<u>	Underlined text	Used for links or text highlights
<del>	Deleted text	To delete a specific text
<ins>	Insert text	Displayed with an underline to show an inserted text
<blockquote>	Quotation	Used for a long quote
<q>	Quotation	Used for a short quote
<abbreviation and acronyms>	Abbreviation	Used for abbreviation
<address>	Contact details	Used to make a contact detail for the page author
<s>	Delete a line	No longer accurate but should not be deleted
<cite>	Citation	To reference a piece of work

Now Let's go for notepad to see how this tag work...

<!DOCTYPE html>
<html>
<head>
 <title>HTML Tags</title>
<head>
<body>
<h1>Take a look of P tag and how to use another element with paragraph tags </h1>
<p> HTML is being <b>updated</b> and you will see the next <i>feature</i> very soon. We can't live without H<sub>2</sub>O. Do you know the law of (a+b)<sup>2</sup>. Are you a <strong>good</strong> man? I <del>know</del> <ins>don't know</ins>. What time is it by your watch? The time <s>is 2.30pm</s> 2.40pm. Let's take a break. <br /> Now we will start with a horizontal line.</p> <hr />
<p><em>Swami Vivekananda said</em> <blockquote> You have to grow from the inside out. None can teach you, none can make you spiritual. There is no other teacher but your own soul.</blockquote></p>
<p>And also said <q>Arise! Awake! and stop not until the goal is reached.</q></p>
<p> This is the big <mark>paragraph</mark> and this is <small>small paragraph</small>. This is my paragraph and this is <strike>your paragraph</strike>. <u>This is <u> tag.</u></p>
<p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some carzy stuff.</p>
<p><cite> A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p>
<address>
<p><a href="mailto:pcknowledge55@gmail.com">
pcknowledge55@gmail.com</a></p>
<p> Krishnanagar, Nadia, West-Bengal</p>
</address>
</body>
</html>

HTML basics

The image that is updated by me is not clear if you want to see the clear image then clack on image and get a clear look.

HTML anchor tag

The anchor tag is used for the link to a web page. You can specify anything that you are want to link by using attributes. User click on that you are intered between the opening and closing tag.

HTML basics

For example: to Link google homepage

<a href="http://www.google.com">Google Home</a>

For example: to Link Other Website


<p>Interesting websites
<ul>
<li><a href="http://www.geoguessr.com">
Geo Guessr</a></li>
<li><a href="http://asoftmurmur.com">
A SOFT MURMUR</a></li>
<li><a href="http://uk.camelcamelcamel.com">
Camel Camel Camel</a></li>

</ul>

</p>

Opening links in a new window

If you hope a link will be open in a new window then use target attribute and give the value of the attribute _blank
Something like this...

<a href="http://www.pcknowledge0.blogspot.com" target="_blank">
pcknowledge</a> (open in new window)

Add image in HTML

If you want to insert an image then use <img> tag to insert image in HTML document. Image tag is empty element like <br> tag. Use at least two attributes src and alt attributes. Src attribute tells the browser where the image is. The alt attribute provides alternative text for the image and you have to give a meaningful substitute for the image.
Something like this...

If the image is in same folder
<img src="kite.png" alt="flying kite">
You can also add height and width
<img src="kite.png" alt="flying kite" height="450" width="600">
If the image is another folder
<img src="foldername/kite.png" alt="flying kite" height="450" width="600"/>
If your image have url then src value is the image url. Something like
<img src="https://www.pexels.com/photo/white-and-green-cactus-pattern-apron-near-round-gray-analog-wall-clock-1274640" alt="white watch" height="600" wodth="450"/>

How to create HTML Ordered, Unordered and Definition list

Ordered list

HTML has three types of list 1. Ordered list 2.Undered list 3.Definition list. Let's see how to make list in HTML. The ordered list has the number and they are used to create a number list. Ordered list is created by <ol> element and in <ol> element <li> element stands for list item. Let's a look in code

Input

<ol>
 <li>Chili tenderloin with oyster sauce</li>
 <li>Stir fried chicken with bell pepper</li>
 <li>Fish in Thai Spicy sauce</li>
 <li>Lamb meat balls with Korean barbeque sauce</li>
 <li>Spicy celery prawns</li>
 <li>Cilantro chicken</li>
</ol>

Output


1.Chili tenderloin with oyster sauce
2.Stir fried chicken with bell pepper
3.Fish in Thai Spicy sauce
4.Lamb meat balls with Korean barbeque sauce
5.Spicy celery prawns
6.Cilantro chicken

Unordered list

The unordered list has bullet point and they are used for a set of items can be placed in any order. Unordered list is created by <ul> element and in <ul> element <li> element stands for list item. Let's a look in code

Input


<ul>
 <li>Chili tenderloin with oyster sauce</li>
 <li>Stir fried chicken with bell pepper</li>
 <li>Fish in Thai Spicy sauce</li>
 <li>Lamb meat balls with Korean barbeque sauce</li>
 <li>Spicy celery prawns</li>
 <li>Cilantro chicken</li>
</ul>

Output

HTML basics

Definition list

The definition list is created by the <dl> element and usually consists of a series of terms and their definitions.The <dt> element is inside of <dl> and <dd> element is inside of <dt> element.<dt> is used to contain the term being defined. <dd> is used to contain the definition. Let's a look in code

Input


<dl>
 <dt>OSK</dt>
 <dd>The full form of osk is on screen keyboard. When your external keyboard is bad then you can use on screen keyboard. If you don't know how to open osk then simply type osk with winlogokey. You will see the osk on your screen.</dd>
 <dt>HTML</dt>
 <dd>HTML is a hypertext markup language. HTML not a programming language. HTML used for create a structer of a webpage. If you want design then you have to use css, javascript and other programming language.</dd>
 <dt>CSS</dt>
 <dd>The full form of CSS is cascading style sheets. CSS is used for design. When you use css with HTML then the web page look like awesome. Give a color, border, left, right, font-size I mean there are huge collection of style. And it's CSS.</dd>
</dl>

Output

HTML basics

Nested lists

When you need to create the second list then put a second list inside the <li> element to create a sub-list or nested list. Let's take a look in code

Input


<ul>
<li>Family</li>
<li>Grandfather
<ul>
<li>Father</li>
<li>Uncle</li>
<li>Aunty</li>
<li>Other family members</li>
</ul>
</li>
<li>Family Tree>/li>
</ul>

Output

HTML basics

How to make a table in HTML

Basic table structure

The <table> element use to create table. Inside the table element you will see <tr> element. <tr> element stands for table row. At the end of the each row use </tr> tag. Inside the <tr> element you will see <td> element. The <td> element stands for table data. At the end of the each data use </td> tag. At the end of the table use </table> tag. Let's a look in code

Input


<table>
 <tr>
  <td>10</td>
  <td>20</td>
  <td>30</td>
 </tr>
 <tr>
  <td>40</td>
  <td>50</td>
  <td>60</td>
 </tr>
 <tr>
  <td>70</td>
  <td>80</td>
  <td>90</td>
 </tr>
</table>

Output

HTML basics

Table Headings

The <th> element is as like as <td> element but the purpose of <th> element is to represent the heading for either a column or a row. So, <th> stands for table heading. You can use the scope attribute to indicate whether it is a heading for a column or a row. Let's a look in code

Input


<table>
 <tr>
  <th scope="col"> Tickets</th>
  <th scope="col"> Saturday</th>
  <th scope="col"> Sunday</th>
 </tr>
 <tr>
  <th scope="row">Tickets sold:</th>
  <td>150</td>
  <td>140</td>
 </tr>
 <tr>
  <th scope="row">Total sales:</th>
  <td>$700</td>
  <td>$750</td>
 </tr>
</table>

Output

HTML basics

Spanning columns and rows

Sometimes or when you need to entries table to run across more than one columns then use colspan attribute. colspan attribute can be used on a <th> or <td> element and indicates how many columns that cell run across. If you look at the code that contains the number '9999' you will see that the value of the colspan attribute is '2' which indicates that the cell should run across two columns. In the third row, '0000' runs across three columns. You will see that the second and third rows have fewer <td> element than there are columns. The reason is when a cell extends across more than one column, <td> or <th> cells that would have been in the place of the wider cells are not included in the code. If you also need entries in a table to across more than one row then use rowspan attribute. The rowspan attribute can be used on the same element to indicate how many rows a cell should span down the table. Let's a look in code

Input


Spanning Columns
<table>
 <tr>
  <th></th>
  <th>9am</th>
  <th>10am</th>
  <th>11am</th>
  <th>12am</th>
 </tr>
 <tr>
  <th>Monday</th>
  <td colspan="2">9999</td>
  <td>1111</td>
  <td>2222</td>
 </tr>
 <tr>
  <th>Tuesday</th>
  <td colspan="3">0000</td>
  <td>5555</td> 
 </tr>
</table>
Spanning Rows
<table>
 <tr>
  <th></th>
  <th>Monday</th>
  <th>Tuesday</th>
  <th>Wednessday</th>
 </tr>
 <tr>
  <th>8am - 9am</th>
  <td rowspan="2">9999</td>
  <td>1111</td>
  <td>2222</td>
 </tr>
 <tr>
  <th>10am-11am</th>
  <td>5555</td>
  <td>6666</td>
 </tr>
</table>

Output

HTML basics

Long tables

If you want to create a long table then there are three elements that help distinguish between the main content of the table and the first and last rows. And the three-element is <thead> <tbody> and <tfoot>. Long table heading stands for inside <thead>. Body sit inside the <tbody> element. The footer is inside the <tfoot> element. Look at the code ya!

Input

  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1st January</th>
   <td>250</td>
   <td>36</td>
  </tr>
  <tr>
   <th>2nd January</th>
   <td>285</td>
   <td>48</td>
   </tr>
  <tr>
   <th>3rd January</th>
   <td>320</td>
   <td>60</td>
   </tr>
  <tr>
   <th>4th January</th>
   <td>355</td>
   <td>72</td>
  </tr>
<!-- additional rows as above -->
  <tr>
   <th>31st January</th>
   <td>129</td>
   <td>64</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td></td>
   <td>7824</td>
   <td>1241</td>
  </tr>
 </tfoot>
</table>

Output

HTML basics

Border and background

For border and background use border attribute and bgcolor attribute to make it different. Border attribute used to on both the <table> and <td> to indicate the width of the border in pixels and bgcolor attribute stands for background colors of either the entire table or individual table cells. Look at the code ya!

Input

<table border="2" bgcolor="#efefef">
 <tr>
  <th width="150"></th>
  <th>Total</th>
  <th>Income</th>
  <th width="150" bgcolor="#cccccc">Expenditure</th>
 </tr>
 <tr>
  <th>January</th>
  <td>150</td>
  <td>350</td>
  <td bgcolor="#cccccc">390</td>
 </tr>
 <tr>
  <th>February</th>
  <td>125</td>
  <td>699</td>
  <td bgcolor="#cccccc">1050</td>
 </tr>
</table>

Output

HTML basics

How to make a Forms in HTML

If you want, How to make a Forms in HTML, HTML reference guide, HTML cheat sheet, More information about attributes then comment.

Connect with FB. Don't forget to like and comment. Your comment and like is my motivation.

1 Comments

AnonymousApril 7, 2022 at 7:56 PM
Html Basics (Html For Absulate Beginners) >>>>> Download Now

>>>>> Download Full

Html Basics (Html For Absulate Beginners) >>>>> Download LINK

>>>>> Download Now

Html Basics (Html For Absulate Beginners) >>>>> Download Full

>>>>> Download LINK g9

Thank You for Visiting our Website...

Header Ads Widget

Ticker

HTML basics (HTML for absulate beginners)

HTML basics

Learn HTML basics and CSS step-by-step Guide today

What is HTML?

The History of HTML.

How does HTML work?

HTML head

What are tags and attributes?

HTML Tags

Attributes

Let's Create a Web page by our Basic HTML knowledge

HTML heading

HTML paragraph (p tag)

HTML anchor tag

Opening links in a new window

Add image in HTML

How to create HTML Ordered, Unordered and Definition list

Ordered list

Unordered list

Definition list

Nested lists

How to make a table in HTML

Basic table structure

Table Headings

Spanning columns and rows

Long tables

Border and background

How to make a Forms in HTML

You may like these posts

Post a Comment

1 Comments

Social Plugin

Subscribe Us

Ad Space

Popular Posts

Floating app (convert your android mobile into pc)

How much safe Free WiFi❓❓❓❓❓

How to fix Samsung Screen Overlay Detected problem ?

Labels

Random Posts

Recent in Sports

Popular Posts

How to fix Samsung Screen Overlay Detected problem ?

How much safe Free WiFi❓❓❓❓❓

Is online safe? # Hidden Information

Menu Footer Widget