Monday 31 December 2012

HTML

What is HTML?

     HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language.
  • HTML is not a programming language, it is a markup language.
  • A markup language is a set of markup tags.
  • HTML uses markup tags to describe web pages.

HTML Tags?

     HTML markup tags are usually called HTML tags
  • HTML tags are keywords surrounded by angle brackets like <html>.
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag.
  •  Start and end tags are also called opening tags and closing tags.

HTML Documents = Web Pages

   HTML documents describe web pages
  • HTML documents contain HTML tags and plain text. 
  • HTML documents are also called web pages. 
  • The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
    documents and display them as web pages. The browser does not display the HTML tags,but uses the tags to interpret the content of the page:
    <html>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    </body>
    </html>
    Example Explained
    • The text between <html> and </html> describes the web page
    • The text between <body> and </body> is the visible page content
    • The text between <h1> and </h1> is displayed as a heading
    • The text between <p> and </p> is displayed as a paragraph
     
     

HTML Headings

      HTML headings are defined with the <h1> to <h6> tags.

          <html>
          <body>
          <h1>This is heading 1</h1>
          <h2>This is heading 2</h2>
          <h3>This is heading 3</h3>
          </body>
          </html>
          Your Result:

            This is heading 1

            This is heading 2

            This is heading 3

HTML Paragraphs

    HTML paragraphs are defined with the <p> tag.
              <html>
              <body>
              <p>This is a paragraph.</p>
              <p>This is a paragraph.</p> 

              <p>This is a paragraph.</p>
              </body>
              </html>
             

               Your Result:
               This is a paragraph.
               This is a paragraph.
               This is a paragraph.

HTML Links

     HTML links are defined with the <a> tag.
                <html>
                <body>
                <a href="http://www.w3schools.com">This is a link</a>
                </body>
                </html>

HTML Images

        HTML images are defined with the <img> tag.
               <html>
               <body>
               <img src="w3schools.jpg" width="104" height="142" />
               </body>
               </html>

HTML Lines

        The <hr /> tag creates a horizontal line in an HTML page.
        The hr element can be used to separate content:
               <html>
               <body>
               <p>The hr tag defines a horizontal rule:</p>
               <hr />
               <p>This is a paragraph</p>
               </body>
               </html>
               Output:

                The hr tag defines a horizontal rule:

HTML Editors

HTML Editors

Writing HTML Using Notepad or TextEdit
       HTML can be edited by using a professional HTML editor like:
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
          However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit     Mac). We believe using a simple text editor is a good way to learn HTML.Follow the 4 steps below to create your first web page with Notepad. 

Step 1: Start Notepad

     To start Notepad go to:      Start
               All Programs
                      Accessories
                             Notepad


Step 2: Edit Your HTML with Notepad

         Type your HTML code into your Notepad:



 

Step 3: Save Your HTML

    Select Save as.. in Notepad's file menu.
       When you save an HTML file, you can use either the .htm or the .html file extension. There is    no difference, it is entirely up to you.
      Save the file in a folder that is easy to remember

 

Step 4: Run the HTML in Your Browser

    Start your web browser and open your html file from the File, Open menu, or just browse     the folder and double-click your HTML file. The result should look much like this: