Learn HTML

Why learn HTML?
Knowledge in HTML will give you the skills in creating your own Web site. I made this tutorial so my students could learn everything about HTML. HTML is easy to learn. I am sure you will enjoy it. Also, other people will see your website and it could also make you popular. Start with a simple website and little by little it will become a big hit for you! Imagine how many people are connected in the internet. 



What is HTML?

  • HTML means  Hyper Text Markup Language
  • HTML is a language encoded by a web designer to describe web pages.
  • HTML is a markup language
  • Markup language - a set of markup tags
  • HTML uses markup tags to describe web pages
What is HTML Tags?
  • HTML markup tags are commonly called HTML tags
  • HTML tags are keywords enclosed by less than symbol and greater than symbol or angle brackets
    • <html>
  • most HTML tags come in pairs like and , some works alone like <b> </b>








  • The first tag is the start tag, <b> or opening tags
  • The second tag is the end tag </b> or closing tags
 HTML Documents  means  Web Pages
  • HTML documents are also web pages
  • HTML documents is composed of HTML tags and plain text
  • HTML documents are converted to web pages thru the use of web browsers.  
  • Web browser (like Internet Explorer or Firefox)  read HTML documents and converts them as web pages. Browser does not display the HTML tags, but uses the tags to converts the content of the page into more readable and easy to understand
Below is the format of basic HTML document

<html>
<head>

<title>

</title>

</head>

<body>

</body>

</html>

How it works?


  • The tag <html> means that it is the start of the HTML document 
  • The tag </html> describes the end of the HTML document or the web page
  • The tag <head> means that it is the start of the heading in your HTML document 
  • The tag </head> describes the end of the heading in your HTML document or the web page
  • The tag <title> will show the title of your web page on the browser title bar
  • The tag </title> describes the end of the title in your HTML document or the web page
  • The tag <body> and </body> will be your content area or where the the visible page
    content appear
HTML Elements


HTML element means everything from the start tag to the end tag:
Start tag Element content End tag
<h1> this is heading 1 </h1>
<a href="index.htm"> This is a link to index.html </a>
<hr/>

HTML Element Syntax

  • HTML element starts with a start tag / opening tag or an end tag / closing tag
  • Element content means everything between the start and the end tag
  • Not all HTML elements have element content
  • there are empty elements that are closed in the start tag
  • HTML elements can have attributes too. 

Attributes provide additional information about HTML elements.

What is HTML Attributes?

  • Most HTML elements can have attributes
  • HTML Attributes gives additional information about an element
  • HTML Attributes are always specified in the start tag
  • HTML Attributes always come in in this format: name="value"

Attribute Example

changing font color defined with the <font> tag. The color name is specified in the color attribute:


<font color="yellow">This text color is yellow</font>


What you need:
On your computer, you will need the following program
  • Notepad 
  • Internet Browser
Professional Web designer use software like Dreamweaver, MS Frontpage 2003 and other special software that automatically generate HTML codes. We will not use any third party program in creating your own web page because I believe that using only notepad, you could master and understand better web page creation. So let us start creating your own web page!


How to open Notepad: 
  1. Click start button then choose All Programs / Programs 
  2. Choose Accessories then click Notepad
or 
  1. Press Window Logo + R
  2. In Run, type Notepad and press Enter. 
or 
  1. Right click on the whitespace where you want to save the webpage. 
  2. Choose New on the cascading menu and click Notepad. 
The role of your browser is to preview your Web page. Everytime you edit  the web page, you need to preview it thru your browser. 





    <html>
    <head>

    <title>

    </title>

    </head>

    <body>

    </body>

    </html>


    Editing your Web Page!
    Change your web page background into color!

    In  changing your web page background into color, the bgcolor attribute is added to  body tag and defining the value after the = symbol.

    Example:


    <html>
    <head>

    <title>

    </title>

    </head>

    <body bgcolor="pink">

    </body>

    </html>

    Change your web page background into image!

    In this HTML lesson, you need the background attribute to specifies a background image on your HTML document.
     Here is an example:
    Let us use this image as our background: 


    You may use this HTML element:

    <body background="http://sphotos.ak.fbcdn.net/hphotos-ak-snc3/hs089.snc3/15692_1350250912142_1107429825_31062196_4965773_n.jpg">

    Example



    <html>
    <head>

    <title>

    </title>

    </head>

    <body background="http://sphotos.ak.fbcdn.net/hphotos-ak-snc3/hs089.snc3/15692_1350250912142_1107429825_31062196_4965773_n.jpg">

    </body>

    </html>



    Subscribe to: Posts (Atom)