Introduction

HTML Structure

<!DOCTYPE html>

<head>

<title>

<head>

<body>

Unordered Lists

Ordered Lists

Tables

Image Tag

Thank you!

End

HTML Crash Course

Introduction

  • HTML is the standard markup language for creating web pages.
  • HTML stands for Hyper Text Markup Language.
  • It is the building block for websites. It defines the structure of web pages.
  • It can be associated with CSS for appearance or design, and JS for various functionalities.
  • It's simple and easy to learn.

 

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>HTML Tutorial</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

An HTML file starts with the doctype (document type) tag to tell the browser that we are using HTML5.

What if <!DOCTYPE html> is not mentioned?
If document type is not mentioned, the modern browser will render the website to show at it's best, the older browsers do not support HTML5 tags such as <header><footer>


<head>

The head section consists of meta data, which contains title, styles, scripts, and other (meta) information. Basically the <head> tag acts like a brain for a website, it contains links to styles, meta info to run the web page.


<title>

The title defines the "Title for the webpage" and it is displayed in on the top of the browser tab and also in the search engine results.


As marked in the above image, the top part of the browser contains the title and a favicon. A favicon is a small icon or logo of the webpage that helps in identifying it and it's useful for visitors to locate your page when they have more than one tab open! You'll know how to add favicon to the page in later sections.

URL stands for Uniform Resource Locator generally referred as web address which helps in navigating to any webpage or a resource page.


<head>

The <head> tag contains <link> tag and <meta>tag.

<head>
    <link rel="stylesheet" href="custom.css">
</head>

The above <link> tag is used to link the "custom.css" file with the HTML file, to style the webpage. You can learn more about CSS and Styling in our Basic CSS Course.

<head>
    <meta charset="UTF-8">
</head>

The above <meta> tag provides "meta-data" about the HTML file. The meta-data can be used by search engines and browsers to identify the webpage. Learn more about metadata and HTML <meta> tag, viewport here.


<body>

The body section consists of the main data of the webpage, any content that is to be displayed should be placed here. The below left snap shows the basic tags used, and right snapshot show it's preview.

<body>
    <!-- Container to place content -->
    <div>
        <!-- Heading Tags in HTML -->
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>

        <!-- 'a tag' refers to hyperlink, it is used to link to different pages or websites -->
        <a href="http://google.com">Go to Google</a>

        <!-- Paragraph tag to write descriptive content -->
        <p>This is a paragraph tag</p>

        <!-- Line Break, gives a line gap -->
        <br>

        <!-- Horizontal Line -->
        <hr>
    </div>
</body>

 

Tag Info
<div>  It is a division or block to wrap content
<h1> to <h6>  Heading Tags, to display titles, headings and sub headings
<p>  Paragraph tag to write descriptive content
<a>  A hyperlink tag, which can be used to link to different sections or websites
<br>  Single line break to add a line space between two sections
<hr>

 <hr> stands for Horizontal Rule and is used as a horizontal line to seperate section

 


Unordered Lists

Unordered list items start with "small black circles" which as called as "bullets" or "bullet points".

<ul> element is used to create an Unordered list.<li> element is used to create a list item which contains text, images, links etc.

<!-- This is an Unordered List -->
<ul>
    <li>This is a list item</li>
    <li>This is another list item</li>
</ul>

<!-- Output :

•This is a list item
•This is another list item

-->

Ordered Lists

Ordered lists are numbered , they start from 1 to total number of items.

<ol> element is used to create an Ordered list.<li> element is used to create a list item.

<!-- This is an Ordered List -->
<ol>
    <li>This is a list item</li>
    <li>This is another list item</li>
</ol>

<!-- Output :

1.This is a list item
2.This is another list item

-->

Tables

<table> tag is used to create a table.

<table>
    <!-- Table Head Section -->
    <thead>
        <!-- tr tag is used to create a row in a table -->
        <tr>
            <!-- th is used to create headings in the table -->
            <th>S.No</th>
            <th>Name</th>
            <th>Attendance(%)</th>
            <th>Marks</th>
        </tr>
    </thead>
    <!-- Table body section -->
    <tbody>
        <tr>
            <!-- The table data is written inside a td tag -->
            <td>1</td>
            <td>Nobita</td>
            <td>100%</td>
            <td>10/100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Dekisugi</td>
            <td>100%</td>
            <td>98/100</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suneo</td>
            <td>95%</td>
            <td>60/100</td>
        </tr>
    </tbody>
<table>

Table contains a head section where column headings are written and a body section where tabular data is filled. The <table> tag also has attributes like width, colspan, summary, text-align and padding... We'll know about them in the future articles.The table rows are defined with the <tr> tag which contains basic row data. <td> elements can contain any sort of data such as text, links, images etc.

There  is also  a <tfoot> tag to contain data in the end part of the table. the <thead>,<tbody>,<tfoot> signify each part of the table, i.e header, body, footer. You can also style the table with colors and border by adding CSS to make it look attractive.

Copy the above code and paste it in our editor to get the output, you can also create your own tables.


Image Tag

<img> tag is used to display images on the webpage.

<img src="https://images.pexels.com/photos/4389409/pexels-photo-4389409.jpeg?cs=srgb&dl=brown-brick-building-durving-night-time-4389409.jpg&fm=jpg" alt="image-tag-in-html" width=500px height=500px>

The <img> has two attributes, src and alt, the src attribute is used to specify the location of that image, and alt is used as Alternative Text, incase the image fails to load, the alt text is displayed​, width and height can be specified to adjust the image dimensions


Thank you!

I hope this article was helpful for you, do share it with your friends.

Tags