HTML Introduction

What is HTML?
  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example

<!DOCTYPE html>  
<html>
          
    <head>
    <title>I am title</title>
    </head>
          
    <h2>I am heading</h2>
    <p>This is parragraph</p> 
           
</html>
HTML Basic Example

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html> The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

Example


<!DOCTYPE html>     
<html>
                  
<h2>I am heading</h2>
<p>This is parragraph</p> 
                   
</html>

HTML Documents

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading:

Example

    <h1>I am heading</h1>
    <h2>I am heading</h2>
    <h3>I am heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

    <p>I am paragraph</p>
    <p>I am another paragraph</p>

HTML Links

HTML links are defined with the <a> tag:

The link's destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements.

Example

<a href="https://google.com/">link</a>

HTML Images

HTML images are defined with the <img> tag. The source file src, alternative text alt, width, and height are provided as attributes:

Example

<img src="img-url.jpg" 
alt="img1" width="50%" height="30%">
HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.The HTML element is everything from the start tag to the end tag:

<tagname> Content goes here...</tagname>

Examples of some HTML elements:

        <h2>I am heading</h2>
        <p>This is parragraph</p>
HTML Attributes
HTML Attributes
  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

        <a href="https://google.com/">link</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

            <img src="img-url.jpg">

There are two ways to specify the URL in the src attribute:

Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg"

Tip:It is almost always best to use relative URLs. They will not break if you change domain.

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

    <img src="logo.jpg"alt="logo">

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

Example

        <img src="flower.jpg" 
         width="400px" height="200px">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example

        <p style="color:red;">Styling text</p>
Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading

Example

    <h1>I am heading 1</h1>
    <h2>I am heading 2</h2>
    <h3>I am heading 3</h3>
    <h4>I am heading 2</h4>
    <h5>I am heading 1</h5>
    <h6>I am heading 2</h6>
Paragraphs

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example

    <p>I am paragraph</p>
    <p>I am another paragraph</p>
    <p>Lorem Ipsum is simply dummy text of
 the printing and typesetting industry.</p>
Formatting Elements

Formatting elements were designed to display special types of text:

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Supscript text

Example

<b>This text is bold</b>
<strong>This text is important!</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<small>This is some smaller text</small>
<p>Do not forget to buy <mark>milk</mark></p> <p>My favorite color is<del>blue</del> red</p> <p> My favorite color is<del>blue</del> <ins>red</ins> </p> <p>This is <sub>subscripted</sub> text</p> <p>This is <sup>supscripted</sup> text</p>
List

HTML lists allow web developers to group a set of related items in lists

An unordered HTML list:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

An ordered HTML list:

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:

Example

            <ul>

            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            
            </ul>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

Example

            <ol>

            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            
            </ol>
Tables

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns

Example

    <table border="1">

        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
            
        <tr>
            <td>India</td>
            <td>England</td>
            <td>Australia</td>
        </tr>
            
        <tr>
            <td>New Zealand</td>
            <td>Canada</td>
            <td>Japan</td>
        </tr>
            
    </table>

Table Cells

Each table cell is defined by a <td> and a </td> tag , td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example

    <table>

        <tr>              
            <td>New Zealand</td>
            <td>Canada</td>
            <td>Japan</td>
        </tr>

    
    </table>

Note - table data elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

Table rows

Each table row starts with a <tr> and end with a </tr> tag. , tr stands for table row.

Everything between <td> and </td> are the content of the table cell.

Example

    <table>

        <tr>              
            <td>Apple</td>
            <td>Banana</td>
            <td>Grape</td>
        </tr>

        <tr>              
            <td>Cherry</td>
            <td>Kiwi</td>
            <td>Orange</td>
    </tr>

    
    </table>

Note - You can have as many rows as you like in a table, just make sure that the number of cells are the same in each row. There are times where a row can have less or more cells than another.

Table Headers

Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag:

Example

    <table>

        <tr>              
            <th>Person 1</td>
            <th>Person 2</td>
            <th>Person 3</td>
        </tr>


        <tr>              
            <td>Jimmy</td>
            <td>Miller</td>
            <td>David</td>
        </tr>

        <tr>              
            <td>16</td>
            <td>10</td>
            <td>14</td>
        </tr>
    
    </table>

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

Designed & Coded by Rankush