HTML & CSS

HTML is a markup language for describing web documents (web pages).
  • HTML stands for Hyper Text Markup Language. HTML adds "markup" to Standard English text. "Hyper Text" refers to links — hyperlinks — that connect Web pages to one another.
  • A markup language is a set of markup tags.
  • HTML documents are described by HTML tags.
  • Each HTML tag describes different document content.
  • HTML is not case sensitive.


History Of HTML

HTML is an evolving language. It doesn’t stay the same for long before a revised set of standards and specifications are brought in to allow easier creation of prettier and more efficient sites.
Let’s start at the beginning...
HTML 1.0
The Hyper Text Markup Language was the brainchild of Sir Tim Berners-Lee. In 1991 he wrote a document called “HTML Tags” in which he proposed fewer than two dozen elements that could be used for writing web pages.
HTML 2.0
HTML 2.0 included everything from the original 1.0 specification but added a few new features to the mix. HTML 2.0 was the standard for website design until January 1997 and defined many core HTML features for the first time.
HTML 3.2
HTML 4.0 was recommended by the W3C in December ’97 and became the official standard in April 1998. Browser support was undertaken surprisingly earnestly by Microsoft in their Internet Explorer browser. HTML 4.0 was a large evolution of the HTML standards, and the last iteration of classic HTML.
XHTML 1.0
This is the successor to HTML. The "X" stands for Extensible. This
is a reformulation of HTML 4.01 within XML (Extensible Markup Language), which
 is far more rigorous, and is intended to start moving the creation of Web pages
away from HTML.
HTML5
HTML5 was finalized, and published, on 28 October 2014 by the World Wide Web Consortium (W3C). This is the fifth revision of the HTML standard since the inception of the World Wide Web.


Advantage & Disadvantage Of HTML

  • Easy to use
  • Loose syntax (although, being too flexible will not comply with standards)
  • Supported on almost every browser.
  • Widely used; established on almost every website.
  • Very similar to XML syntax, which is increasingly used for data storage
  • Free - You need not buy any software
  • Easy to learn & code even for novice programmers.
  • It cannot produce dynamic output alone, since it is a static language.
  • Security features offered by HTML are limited.
  • Sometimes, the structuring of HTML documents is hard to grasp.

HTML Tags Attributes And Elements

Tags:
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag; the second tag is the end tag.
  • The end tag is written like the start tag, but with a slash before the tag name.

Attributes:
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like:
<tag attribute="value">Margarine</tag>

Elements:
Elements are the bits that make up web pages.
Example 1:
<body> The quick brown fox jumps over the lazy dog. </body> 
everything that is in between (and includes) <body> and </body> tags is the body element.
Example 2:
<title>Rumple Stiltskin</title>
“<title>” and “</title>” are tags, “<title>Rumple Stiltskin</title>” is a title element

Below are the few essential HTML tags:
TagsDescription
<!DOCTYPE>This tag defines the document type and HTML version
<html>This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented By <body>...</body> tags.
<head>This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
<title>The <title> tag is used inside the <head> tag to mention the Document title.
<body>This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
<!-- … -->Defines a comment

A typical HTML document will have following structure:

<!--Document declaration tag-->
<html>
    <head>
        Document header related tags
    </head>
    <body>
        Document body related tags
    </body>
</html>

Write Html Hello Word Program Using Notpad

1. Open Notepad.
2. Write HTML Code.
Copy and paste the following HTML code into your newly open text file.

<html>
    <head></head>
    <body>
        Hello world
    </body>
</html>


3. Save It.
Click File, save it with a HTML file extension, e.g. “helloworld.html”.

4. Demo.
Double click to view it. (Or open the newly saved HTML file with your favor Internet browser).

Explanation of code
  • <html></html> tag is tell internet browser this file is a start and end of the HTML file document.
  • Text between <head></head> tag is for HTML header information, which is not display in internet browser.
  • Text between <title></title> will display in left-up corner in internet browser, its web page title.
  • Text between <body></body> will display as content in internet browser.

HTML Comments

  • Comment is a piece of code which is ignored by any web browser.
  • It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code.
  • Comments help you and others understand your code and increases code readability.
  • HTML comments are placed in between <!-- ... --> tags. So any content placed with-in <!-- ... --> tags will be treated as comment and will be completely ignored by the browser.
Example of comment:

<!DOCTYPE html>
<html>
    <head>
        <title>This is document title</title>
    </head>
    <body>
        <!-- I am single line comment -->
        <!--
        This is a multiline comment and it can
        span through as many as lines you like.
        -->
        <p>Document content goes here.....</p>
    </body>
</html>

This will produce following result without displaying the content given as a part of comments:
Output:
Document content goes here.....

Multi-line comment:
You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed before the first line and end of the last line as shown in the given example below.

<!DOCTYPE html>
<html>
<head>
    <title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....
</body> </html>
Output:
Document content goes here.....


Important Notes:
  • Comments do not nest which means a comment cannot be put inside another comment.
  • The double-dash sequence "--" may not appear inside a comment except as part of the Closing --> tag.
  • You must also make sure that there are no spaces in the start-of-comment string.

HTML List Example

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:
  • <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.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. Following are the possible options:

Syntax:

<ul type="square">
<ul type="disc">
<ul type = “circle”>


Example 1:
Default value of type attribute in unordered list is “disc”.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Unordered List</title>
</head>
<body>
    <ul>
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>HTML</li>
   </ul>
</body>
</html>

Output:
  • C
  • C++
  • Java
  • HTML

  • Example 2:
    Following is an example where we used
    <ul type="square">
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Unordered List</title>
        </head>
        <body>
            <ul type=”square”>
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
            <li>HTML</li>
            </ul>
        </body>
    </html>
    
     
    Output:
  • C
  • C++
  • Java
  • HTML

  • Example 3:
    Following is an example where we used
    <ul type="circle">
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Unordered List</title>
        </head>
    <body>
       <ul type="circle">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>HTML</li>
        </ul>
    </body>
    </html>
    
    
    Output :
  • C
  • C++
  • Java
  • HTML

  • If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.
    The "type" Attribute:
    You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number.
    Following are the possible options:
    Example 1:
    default value of type attribute in ordered list is “1”.
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Ordered List</title>
        </head>
        <body>
            <ol>
                <li>C</li>
                <li>C++</li>
                <li>Java</li>
                <li>HTML</li>
            </ol>
        </body>
    </html>
    
    
    
    Output :
  • C
  • C++
  • Java
  • HTML

  • Example 2:
    Following is an example where we used
    <ol type="I">
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Ordered List</title>
        </head>
    <body>
       <ol type="I">
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
            <li>HTML</li>
       </ol>
    </body>
    </html>
    
     
    Output :
  • C
  • C++
  • Java
  • HTML

  • Example 3:
    Following is an example where we used
    <ol type="i">
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Ordered List</title>
        </head>
    <body>
       <ol type="i">
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
            <li>HTML</li>
       </ol>
    </body>
    </html>
    
    
     
    Output :
  • C
  • C++
  • Java
  • HTML

  • Example 4:
    Following is an example where we used
    <ol type="A">
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Ordered List</title>
        </head>
    <body>
       <ol type="A">
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
            <li>HTML</li>
       </ol>
    </body>
    </html>
    
    
     
    Output :
  • C
  • C++
  • Java
  • HTML

  • Example 5:
    Following is an example where we used
    <ol type="a">
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Ordered List</title>
        </head>
    <body>
       <ol type="a">
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
            <li>HTML</li>
       </ol>
    </body>
    </html>
    
    
     
    Output :
  • C
  • C++
  • Java
  • HTML

  • The start Attribute
    You can use start attribute for <ol> tag to specify the starting point of numbering you need.
    Following are the possible options:
    
    <ol type="1" start="4">    - Numerals starts with 4.
    
    <ol type="I" start="4">    - Numerals starts with IV.
    
    <ol type="i" start="4">    - Numerals starts with iv.
    
    <ol type="a" start="4">    - Letters starts with d.
    
    <ol type=”A” start=”4”>    -Letters starts with D.
    
    
    Example :
    Following is an example where we used <ol type="i" start="4" >
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Ordered List</title>
        </head>
    <body>
       <ol type="i" start="4">
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
            <li>HTML</li>
       </ol>
    </body>
    </html>
    
     
    Output :
    1. C
    2. C++
    3. Java
    4. HTML


    HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossarylist of terms, or other name/value list.
    Definition List makes use of following three tags:
      
      
    • <dl> - Defines the start of the list
    • <dt> - A term
    • <dd> - Term definition
    • </dl> - Defines the end of the list

    Example :
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>HTML Definition List</title>
        </head>
    <body>
    <dl>
        <dt><b>HTML</b></dt>
        <dd>This stands for Hyper Text Markup Langu
            age</dd>
        <dt><b>HTTP</b></dt>
        <dd>This stands for Hyper Text Transfer Pro
            tocol</dd>
    </dl>
    </body>
    </html>
    
    
    Output :
    HTML
    This stands for Hyper Text Markup Langu age
    HTTP
    This stands for Hyper Text Transfer Protocol







    Post a Comment

    0 Comments