HTML INTRODUCTION AND ITS ATTRIBUTES



HTML | Introduction

HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most of markup (e.g. HTML) languages are human readable. Language uses tags to define what manipulation has to be done on the text.
HTML is a markup language which is used by the browser to manipulate text, images and other content to display it in required format. HTML was created by Tim Berners-Lee in 1991. The first ever version of HTML was HTML 1.0 but the first standard version was HTML 2.0 which was published in 1999.

Elements and Tag: HTML uses predefined tags and elements which tells the browser about content display property. If a tag is not closed then browser applies that effect till end of page.
 
HTML page structure: The Basic structure of HTML page is given below. It contain some elements like head, title, body, … etc. These elements are used to build the blocks of web pages.

<DOCTYPE! html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the <head> element are:
  • <style>
  • <title>
  • <base>
  • <noscript>
  • <script>
  • <meta>
  • <title>
<body>: Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.
Example: HTML page can be created using any text editor (notepad). Then save that file using .htm or .html extension and open that file in browser. It will get the HTML page response.

Features of HTML:
  • It is easy to learn and easy to use.
  • It is platform independent.
  • Images, video and audio can be added to a web page.
  • Hypertext can be added to text.
  • It is a markup language.
Why learn HTML?
  • It is a simple markup language. Its implementation is easy.
  • It is used to create a website.
  • Helps in developing fundamentals about web programming.
  • Boost professional career.
Advantages:
  • HTML is used to build a websites.
  • It is supported by all browsers.
  • It can be integrated with other languages like CSS, JavaScript etc.
Disadvantages:
  • HTML can create only static webpages so for dynamic web page other languages have to be used.
  • Large amount of code has to be written to create a simple web page.
  • Security feature is not good.




HTML | Basics

In this article, we will go through all the basic stuff of HTML coding. There are various tags that we must consider and include while starting to code in HTML. These tags help in organization and basic formatting of elements in our script or web pages. These step by step procedures will guide you through the process of writing HTML.
Basic HTML Document

Below mentioned are the basic HTML tags which divides the whole document into various parts like head, body etc.
  • Every HTML document begins with a HTML document tag. Although this is not mandatory but it is a good convention to start the document with this below mentioned tag: 
    <!DOCTYPE html>
  • <html> : Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends with </html> tag.
  • <head> : The head tag comes next which contains all the header information of the web page or document like the title of the page and other miscellaneous information. These informations are enclosed within head tag which opens with <head> and ends with </head>. The contents will of this tag will be explained in the later sections of course.
  • <title> : We can mention the title of a web page using the <title> tag. This is a header information and hence mentioned within the header tags. The tag begins with <title> and ends with </title>
  • <body> : Next step is the most important of all the tags we have learned so far. The body tag contains the actual body of the page which will be visible to all the users. This opens with <body> and ends with </body>. Every content enclosed within this tag will be shown on the web page be it writings or images or audios or videos or even links. We will see later in the section how using various tags we may insert mentioned contents into our web pages.
This code won’t display anything. It just shows the basic pattern of how to write the HTML code and will name the title of the page as GeeksforGeeks. <! – – comment here – – > is the comment tag in HTML and it doesn’t reads the line present inside this tag.
HTML Headings

These tags help us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>. Every tag displays the heading in a different style and font size. Example:
filter_none edit
play_arrow
brightness_4
<html>
<head>
    <title>GeeksforGeeks</title>
</head>
<body>
    <h1>Hello GeeksforGeeks</h1>
    <h2>Hello GeeksforGeeks</h2>
    <h3>Hello GeeksforGeeks</h3>
    <h4>Hello GeeksforGeeks</h4>
    <h5>Hello GeeksforGeeks</h5>
    <h6>Hello GeeksforGeeks</h6>
</body>
</html>




HTML | Attributes

An attribute is used to provide extra or additional information about an element.
  • All HTML elements can have attributes. Attributes provide additional information about an element.
  • It takes two parameters : a name and a value. These define the properties of the element and is placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element.
  • Every name has some value that must be written within quotes.

Below are some of the most commonly used Attributes in HTML:


src Attribute :If we want to insert an image into a webpage, then we need to use the <img> tag and the src attribute. We will need to specify the address of the image as the attribute’s value inside the double quote.

alt Attribute : As the name goes this is an alternate tag that is used to show or display something if the primary attribute i.e., the <img> tag, fails to display the value assigned to it. This can also be used to describe the image to a developer who is actually sitting at the coding end.


  1. The width and height Attribute : This attribute is used to adjust the width and height of an image.


  2. The id Attribute : This attribute is used to provide a unique identification to an element. Situations may arise when we will need to access a particular element which may have a similar name as the others. In that case, we provide different ids to various elements so that they can be uniquely accessed. The properties extending the use of id is generally used in CSS, which we will be learning later.


  3. The title Attribute : The title attribute is used to explain an element on hovering the mouse over it. The behavior differs with various elements but generally the value is displayed while loading or hovering mouse pointer over it.

  5. The href Attribute : This attribute is used to specify a link to any address. This attribute is used along with <a> tag. The link put inside the href attribute gets linked to the text displayed inside the<a> tag.
    On clicking on the text we will be redirected to the link. By default, the link gets opened in the same tag but by using the target attribute and setting its value to “_blank”, we will be redirected to another tab or another window based on the browsers configuration.
  6. The style Attribute : This attribute is used to provide various CSS(Cascading Style Sheets) effects to the HTML elements such as increasing font-size, changing font-family, coloring etc. For a detailed explanation refer HTML | Style Tag. The program below shows few name and values that go along the style attribute

  7. The lang attribute : The language is declared with the lang attribute. Declaring a language is can be important for accessibility applications and search engines. 



HTML | Paragraph

<p> tag:
The <p> tag in HTML defines a paragraph. These have both opening and closing tag. So anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results. So, it is both a good convention and we must use the closing tag.

When we look at the webpage, we see that there are few spaces added before and after a paragraph. HTML does this by default. Let’s look at few properties of paragraph tag:
  • As already mentioned, the<p>tag automatically adds space before and after any paragraph, which is basically margins added by the browser.
  • If a user adds multiple spaces, the browser reduces them it to a single space.
  • If a user adds multiple lines, the browser reduces them to a single line

<br> tag:
There is a way to let the HTML know where does the browser need to change the lines by the use of <br> tag. These tags do not have any closing tag. So, just a single opening tag will change the line.

The <pre> element:
We have seen how the paragraph tag ignores all the change of lines and extra spaces within a paragraph, but there is a way to preserve this by the use of <pre> tag. It also contains an opening and a closing tag. It displays a text within a fixed height and width and preserves the extra lines and spaces we use.
Syntax:
 <pre> Content </pre>


Output:

Supported Browsers: Supported browsers are listed below
  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



HTML | Text Formatting

HTML provides us with the ability for formatting text just like we do it in MS Word or any text editing software. In this article, we would go through few such options.
  1. Making text Bold or Strong: We can make the text bold using the <b> tag. The tag uses both opening and closing tag. The text that needs to be made bold must be within <b> and </b> tag.
    We can also use the <strong> tag to make the text strong, with added semantic importance. It also opens with <strong> and ends with </strong> tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Bold</title>
    </head>
    <body>
        <!--Normal text-->
        <p>Hello GeeksforGeeks</p>
        <!--Text in Bold-->
        <p><b>Hello GeeksforGeeks</b></p>
        <!--Text in Strong-->    
        <p><strong>Hello GeeksforGeeks</strong></p>
    </body>
    </html>
    Output:



  2. Making text Italic or emphasize: The <i> tag is used to italicise the text. It opens with <i> and ends with </i> tag.
    The <em> tag is used to emphasize the text, with added semantic importance. It opens with <em> and ends with </em> tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Italic</title>
    </head>
    <body>
        <!--Normal text-->
        <p>Hello GeeksforGeeks</p>
        <!--Text in Italics-->
        <p><i>Hello GeeksforGeeks</i></p>
        <!--Text in Emphasize-->    
        <p><em>Hello GeeksforGeeks</em></p>
    </body>
    </html>
    Output:
  3. Highlighting a text: It is also possible to highlight a text in HTML using the <mark> tag. It has a opening tag <mark> and a closing tag </mark>.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Highlight</title>
    </head>
    <body>
        <!--Text in Normal-->
        <p>Hello GeeksforGeeks</p>
        <!--Text in Highlight-->    
        <p><mark>Hello GeeksforGeeks</mark></p>
    </body>
    </html>
    Output:
  4. Making a text Subscript or Superscript: The <sup> element is used to superscript a text and <sub> element is used to subscript a text. They both have opening and a closing tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Superscript and Subscript</title>
    </head>
    <body>
        <!--Text in Normal-->
        <p>Hello GeeksforGeeks</p>
        <!--Text in Superscript-->    
        <p>Hello <sup>GeeksforGeeks</sup></p>
        <!--Text in Subcript-->    
        <p>Hello <sub>GeeksforGeeks</sub></p>
    </body>
    </html>
    Output:
  5. Making text smaller: The <small> element is used to make the text smaller. The text that needs to be displayed smaller should be written inside <small> and </small> tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Small</title>
    </head>
    <body>
        <!--Text in Normal-->
        <p>Hello GeeksforGeeks</p>
        <!--Text in small-->    
        <p><small>Hello GeeksforGeeks</small></p>
    </body>
    </html>
    Output:
  6. Striking through the text: The <del> element is used to strike through the text marking the part as deleted. It also has an opening and a closing tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Delete</title>
    </head>
    <body>
        <!--Text in Normal-->
        <p>Hello GeeksforGeeks</p>
        <!--Text in Delete-->    
        <p><del>Hello GeeksforGeeks</del></p>
    </body>
    </html>
    Output:
  7. Adding a text: The <ins> element is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Inserting</title>
    </head>
    <body>
        <!--Text in Normal-->
        <p>Hello GeeksforGeeks</p>
        <!--Text in Insert-->    
        <p><ins>Hello GeeksforGeeks</ins></p>
    </body>
    </html>
    Output:






    HTML | Quotations

    The Quotation elements in HTML are used to insert quoted texts in a web page, that is, portion of texts different from the normal texts in the web page.
    Below are some of the most used quotation elements of HTML:
  8. <q> element:
    The <q> element is used to set a set of text inside the quotation marks. It has both opening and closing tags.
    Example:

    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Quotations</title>
    </head>
    <body>
        <h3>GeeksforGeeks</h3>
        <p>The quick brown fox jumps over the lazy dog<br></p>
        <!--Inside quotes-->
        <p><q>The quick brown fox jumps over the lazy dog</q></p>
    </body>
    </html>
    Output:
  9. <blockquote> element:
    The <blockquote> element is also used for quotations in a different way. Instead of putting the text in quotes, it changes the alignment to make it unique from others. It has both opening and closing tags.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Blockquote</title>
    </head>
    <body>
        <h3>GeeksforGeeks</h3>
        <p>The quick brown fox jumps over the lazy dog<br></p>
        <!--Inside blockquotes-->
        <p><blockquote>The quick brown fox jumps 
    over the lazy dog</blockquote></p>
    </body>
    </html>
    Output:
  10. <address> element:
    Using the <address> element, we can define an address in a webpage and the text put inside the address tag will be emphasized. It has both opening and closing tags.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Address</title>
    </head>
    <body>
        <h3>GeeksforGeeks</h3>
        <address>
        <p>Address:<br>
        710-B, Advant Navis Business Park,<br>
        Sector-142, Noida Uttar Pradesh – 201305</p>
        </address>
    </body>
    </html>
    Output:
  11. <abbr> element:
    The <abbr> element is used to define a text as an acronym or abbreviations. The title attribute can be used to show the full version of the abbreviation/acronym when you mouse over the <abbr> element. It has both opening and closing tags. This is useful for browsers and search engines.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Abbreviations</title>
    </head>
    <body>
        <h3>GeeksforGeeks</h3>
        <!--Here the marked text is the acronym-->
        <p>Welcome to <abbr title="GeeksforGeeks">GfG</abbr></p>
    </body>
    </html>
    Output:
  12. <bdo> element:
    The <bdo> element is used to define a bidirectional override which means that the text written from right to left or left to right. It has both opening and closing tags. It is used to over-ride the current text direction.It takes an attribute “rtl” to display the text from right to left.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Bidirectional</title>
    </head>
    <body>
        <h3>GeeksforGeeks</h3>
        <!--Normal text-->    
        <p>The quick brown fox jumps over the lazy dog<br></p>
        <!--Inside <bdo> tag-->
        <p><bdo dir="rtl">The quick brown fox jumps 
    over the lazy dog</bdo></p>
    </body>
    </html>
    Output:
  13. <cite> element:
    This element is used define a title of a work and emphasizes a text.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <head>
        <title>Cite</title>
    </head>
    <body>
        <h3>GeeksforGeeks</h3>
        <!--The title is kept in cite tag-->
        <p>The <cite>GeeksforGeeks</cite> is the best site to<br>
        to search for articles and practice problems.</p>
    </body>
    </html>
    Output:


HTML | Tables

A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.
  • Tables are useful for various tasks such as presenting text information and numerical data.
  • Tables can be used to compare two or more items in tabular form layout.
  • Tables are used to create databases.
Defining Tables in HTML
An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.
Example:


filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<body>
  
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
  
</body>
  
</html>
Output:

Important Table options in HTML:
  1. Adding a border to a HTML Table: A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
            }
        </style>
    </head>
      
    <body>
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output :
  2. Adding Collapsed Borders in a HTML Table: For borders to collapse into one border, add the CSS border-collapse property.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:
  3. Adding Cell Padding in a HTML Table: Cell padding specifies the space between the cell content and its borders.If we do not specify a padding, the table cells will be displayed without padding.

    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 20px;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:

  4. Adding Left Align Headings in a HTML Table : By default the table headings are bold and centered. To left-align the table headings,we must use the CSS text-align property.
    Example:

    filter_none edit
    play_arrow
    brightness_4
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 20px;
            }
              
            th {
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:
  5. Adding Border Spacing in a HTML Table: Border spacing specifies the space between the cells. To set the border spacing for a table,we must use the CSS border-spacing property.

    Example:
    filter_none edit
    play_arrow
    brightness_4
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
            }
              
            table {
                border-spacing: 5px;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:
  6. Adding Cells that Span Many Columns in HTMl Tables : To make a cell span more than one column, we must use the colspan attribute.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 5px;
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <h2>Cell that spans two columns:</h2>
        <table style="width:100%">
            <tr>
                <th>Name</th>
                <th colspan="2">Telephone</th>
            </tr>
            <tr>
                <td>Vikas Rawat</td>
                <td>9125577854</td>
                <td>8565557785</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:
  7. Adding Cells that Span Many Rows in HTML Tables: To make a cell span more than one row,we must use the rowspan attribute:
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 5px;
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <h2>Cell that spans two rows:</h2>
        <table style="width:100%">
            <tr>
                <th>Name:</th>
                <td>Vikas Rawat</td>
            </tr>
            <tr>
                <th rowspan="2">Telephone:</th>
                <td>9125577854</td>
            </tr>
            <tr>
                <td>8565557785</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:
  8. Adding a Caption in a HTML Table: To add a caption to a table, we must use the “caption” tag.

    Example:
    filter_none edit
    play_arrow
    brightness_4
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 20px;
            }
              
            th {
                text-align: left;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <caption>DETAILS</caption>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:
  9. Adding a Background Colour To a Table in HTML: A color can be added as a background in HTML table using the “background-color” option.

    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
              
            th, td {
                padding: 5px;
                text-align: left;
            }
              
            table#t01 {
                width: 100%;
                background-color: #f2f2d1;
            }
        </style>
    </head>
      
    <body>
      
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
            </tr>
        </table>
      
        <br />
        <br />
      
        <table id="t01">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Priya</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Arun</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Watson</td>
                <td>41</td>
      
            </tr>
        </table>
    </body>
      
    </html>
    Output:
  10. Creating Nested Tables in HTML: Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables layouts, which are visually interesting and have the potential of introducing errors.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
      
    <body>
        <table border=5 bordercolor=black>
            <tr>
                <td>
                    Fisrt Column of Outer Table
                </td>
                  
                <td>
                    <table border=5 bordercolor=grey>
                        <tr>
                            <td>
                                First row of Inner Table
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Second row of Inner Table
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
      
    </html>
    Output:


    HTML | Lists

    What is a list?
    A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.
    For example:
  11. A shopping list
  12. To-do list
Lists in HTML

HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.

The types of lists that can be used in HTML are :
  • ul : An unordered list. This will list items using plain bullets.
  • ol : An ordered list. This will use different schemes of numbers to list your items.
  • dl : A definition list. This arranges your items in the same way as they are arranged in a dictionary.
The Unordered HTML List

An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list items are marked with bullets i.e small black circles by default. Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
<body>
  
<h2>Grocery list</h2>
  
<ul>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Coffee</li>
</ul>  
  
</body>
</html>
Output :


The HTML Unordered List has various List Item Markers:-
  1. Disc : Sets the list item marker to a bullet i.e default.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Unordered List with Disc Bullets</h2>
    <h2>Grocery List</h2>
      
    <ul style="list-style-type:disc">
      <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ul>  
      
    </body>
    </html>
    Output :

  2. Circle : Sets the list item marker to a circle.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Unordered List with Circle Bullets</h2>
      
    <h2>Grocery list</h2>
      
    <ul style="list-style-type:circle">
      <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ul>  
    </body>
    </html>
    Output :

  3. Square : Sets the list item marker to a square.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Unordered List with Square Bullets</h2>
      
    <h2>Grocery list</h2>
      
    <ul style="list-style-type:square">
     <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ul>
      
    </body>
    </html>
    Output :

The HTML Ordered List

An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.
Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
<body>
  
<h2>Grocery List</h2>
  
<ol>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Coffee</li>
</ol>  
  
</body>
</html>
Output :


The HTML Ordered List has various List Item Markers:
The type attribute of the <ol> tag, defines the type of the list item marker.
  1. Type=”1″ : The list items will be numbered with numbers i.e default.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Ordered List with Numbers</h2>
      
    <ol type="1">
      <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ol>  
      
    </body>
    </html>
    Output :

  2. Type=”A” : The list items will be numbered with uppercase letters.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Ordered List with Letters</h2>
      
    <ol type="A">
      <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ol>  
      
    </body>
    </html>
    Output :

  3. Type=”a” : The list items will be numbered with lowercase letters.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Ordered List with Lowercase Letters</h2>
      
    <ol type="a">
      <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ol>   
      
    </body>
    </html>
    Output :

  4. Type=”I” : The list items will be numbered with uppercase roman numbers.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Ordered List with Roman Numbers</h2>
      
    <ol type="I">
      <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ol>  
      
    </body>
    </html>
    Output :

  5. Type=”i” : The list items will be numbered with lowercase roman numbers.
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
      
    <h2>Ordered List with Lowercase Roman Numbers</h2>
      
    <ol type="i">
      <li>Bread</li>
      <li>Eggs</li>
      <li>Milk</li>
      <li>Coffee</li>
    </ol>  
      
    </body>
    </html>
    Output :

The HTML Description List

A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
<body>
  
<h2>A Description List</h2>
  
<dl>
  <dt>Coffee</dt>
  <dd>- 500 gms</dd>
  <dt>Milk</dt>
  <dd>- 1 ltr Tetra Pack</dd>
</dl>
  
</body>
</html>
Output :


Nested List in HTML:

A nested list is a list which has a list inside a list.
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
<body>
  
<h2>A Nested List</h2>
  
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
  
</body>
</html>
Output :


HTML | Spell Check

The Spell Check feature in HTML is used to detect grammatical or spelling mistakes in the text fields.
The Spell Check feature can be applied to HTML forms using the spellcheck attribute. The spellcheck attribute is an enumerated attribute which defines whether the HTML element will be checked for errors or not. It can be used with “input” and “textarea” fields in HTML.
Syntax :
Syntax for spellcheck attribute in an input field in html:


<input type="text" spellcheck="value">
Syntax for spellcheck in a textarea field in html:
<textarea type="text" spellcheck="value"></textarea>
In the above syntax the value assigned to spellcheck will define whether spellcheck will be enabled or not on the element. The spellcheck attribute has two valid values, which are:
  • True :It defines that the HTML element should be checked for errors.
  • False :It defines that the HTML element should not be checked for errors.
When the attribute is not set, it takes the default value which is generally element type and browser defined. The value can be also be inherited from the ancestral element.
Enabling Spell Check in an HTML Form: To enable spellcheck in an HTML form the spellcheck attribute is set to “true”. Below is the sample HTML program with enabled spellcheck.
  • Eaxmple:1
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
    <h3>Example of Enabling SpellCheck</h3>
        <form>
            <p>
                <input type="text" spellcheck="true">
            </p>
            <p>
                <textarea spellcheck="true"></textarea>
            </p>
            <button type="reset">Reset</button>
        </form>
    </body>
    </html>                            
  • Output:
Disabling Spell Check in a HTML Form: To disable spellcheck in a HTML form the spellcheck attribute is set to “false”. Below is the sample HTML program with disabled spellcheck.
  • Eaxmple:2
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html>
    <body>
    <h3>Example of Disabling SpellCheck</h3>
        <form>
            <p>
                <input type="text" spellcheck="false">
            </p>
            <p>
                <textarea spellcheck="false"></textarea>
            </p>
            <button type="reset">Reset</button>
        </form>
    </body>
    </html>         
  • Output:




HTML | Images


Earlier, the webpages used to comprise of only texts, which made them appear quite boring and uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. Let’s see how to add images on a webpage.
Adding images on a webpage :
The “img” tag is used to add images on a webpage. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag.
Syntax :


<img src="url" alt="some_text">
Attribute:
  • src:
    src stands for source. Every image has a src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored.
  • alt:If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is an user-defined text.
Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo">
  
</body>
  
</html>
Output :


Setting width and height of Image :The width and height attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default.
Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo" width="300" height="300">
  
</body>
  
</html>
Output :


Adding animated Image: Animated images in .gif format can also be added using the “img” tag.
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<h3>Adding a gif file on a webpage</h3>
  
<body>
  
<img src = "smiley.gif" alt = "smiley" 
            style = "width:200px; height:200px;">
  
</body>
</html>
Output :
Video Player
00:00
00:07

Adding titles to Image: Along with the images, titles can also be added to images to provide further information related to the inserted image. For inserting a title, the title attribute is used.
Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
     alt="GeeksforGeeks logo" width="200" height="200" title="Logo of GeeksforGeeks">
  
</body>
  
</html>
Output :



Setting a border to Image :By default, every picture has a border around it. By using the border attribute, the thickness of the border can be changed. A thickness of “0” means that there will be no border around the picture.
Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
     alt="GeeksforGeeks logo" width="200" height="200" border="5">
  
</body>
  
</html>
Output :


Aligning a Picture: By default, an image is aligned at the left side of the page, but it can be aligned to center or right using the align attribute.
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
     alt="GeeksforGeeks logo" align="right">
  
</body>
  
</html>
Output :


Adding Image as a Link: An image can work as a link with a URL embedded in it. It can be done by using the “img” tag inside an “a” tag.
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <a href="https://ide.geeksforgeeks.org/tryit.php">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
             alt="GeeksforGeeks logo">
    </a>
</body>
  
</html>
Output :
Before clicking the picture:
GeeksforGeeks logo
After clicking the picture:
GeeksforGeeks IDE

Using Image as a background: An image can be used a background for a webpage.
Example:
filter_none edit
play_arrow
brightness_4
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  
<body style="background-image:url
('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png')">
  
    <h2>Image As a Background</h2>
  
    <p>In this example we have specified a 
      background for a webpage using an image. </p>
  
</body>
  
</html>
Output :
 




Comments

Post a Comment