Html tutorial
Sponsored Links
This presentation is the property of its rightful owner.
1 / 26

HTML tutorial PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

HTML tutorial. HTML DOCUMENT. HTML documents are text files made up of HTML elements . (remember “index.htm”?) We edited these files in notepad and saved them as .htm or .html HTML elements are defined using HTML tags. HTML TAGS. HTML tags are used to mark-up HTML elements

Download Presentation

HTML tutorial

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

HTML tutorial


  • HTML documents are text files made up of HTML elements. (remember “index.htm”?) We edited these files in notepad and saved them as .htm or .html

  • HTML elements are defined using HTML tags.


  • HTML tags are used to mark-up HTML elements

  • HTML tags are surrounded by the two characters < and >

  • The surrounding characters are called angle brackets

  • 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

  • The text between the start and end tags is the element content

  • HTML tags are not case sensitive, <b> means the same as <B>




<title>Title of page</title>



This is my first homepage. <b>This text is bold</b>



Lower case tags are recommended and standard now.


  • Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.

  • This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">.

  • This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">

  • Attributes always come in name/value pairs like this: name="value".

  • Attributes are always added to the start tag of an HTML element.

  • Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

Mandatory tags

  • Mandatory Tags

    • <HTML></HTML>

    • <HEAD></HEAD>

    • <TITLE></TITLE>

    • <BODY></BODY>

      • TEXT{COLOR}


      • BGSOUND{*.MIDI, *.WAV, *.MP3}

      • BACKGROUND{*.BMP, *.GIF, *.JPG, *.PNG}


Paragraph Formatting

  • Paragraphs, Line Breaks, Horizontal Rules, and Basic Formatting

    • <P></P>

    • <BR>

    • <HR>

      • SIZE{1-N, %}

      • WIDTH{1-N, %}

      • COLOR{COLOR}


    • <B></B>

    • <U></U>

    • <I></I>

Headings and alignment

  • Headings & Alignment

    • <H1></H1>

    • <H2></H2>

    • <H3></H3>

    • <H4></H4>

    • <H5></H5>

    • <H6></H6>




  • The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

  • <!-- This is a comment -->

Text Formatting

  • Bold<b></b>

  • Italics<i></i>

  • Subscript <sub></sub>

  • Superscript<sup></sup>

  • Underlined<u></u>

  • Strike-through<strike></strike>

Advanced Text Formatting


The <font> tag specifies the font face, font size, and font color of text.


{color:rgb(x,x,x), #xxxxxx, colorname}



Font Example

  • <font size="3" color="red">This is some text!</font><font size="1" color="blue">This is some text!</font><font face="arial" color="red">This is some text!</font>

This is some text!This is some text!This is some text!

Links (Anchors)

The <a> tag defines an anchor. An anchor can be used in two ways:

  • To create a link to another document by using the href attribute

  • To create a bookmark inside a document, by using the name or id attribute

<a> Continued..





_blank:the target URL will open in a new window

_parent:the target URL will open in the parent frameset

_self:the target URL will open in the same frame as it was clicked

_top:the target URL will open in the full body of the window

<a> Examples: Linking to another page




<a href="lastpage.htm">This text</a>

is a link to a page on this Web site.



<a href="">

This text</a> is a link to a page on

the World Wide Web.




<a> Examples: Linking to Section on same page



<a href="#C4">See also Chapter 4</a>

<h2>Chapter 1</h2>

This chapter explains ba bla bla

<h2>Chapter 2</h2>

This chapter explains ba bla bla

<h2>Chapter 3</h2>

This chapter explains ba bla bla

<h2><a name="C4">Chapter 4</a></h2>

This chapter explains ba bla bla



Adding Images <img>

  • The img element defines an image.

    <img />








<img> example: adding images



An image from another folder:

<img src="/images/netscape.gif" alt="Netscape" width="33" height="32" />

An image from W3Schools:

<img src="" alt="IE" width="73" height="68" />



Aligning Images


<img src="angry.gif" alt="Angry" align="left" width="32" height="32" />

A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.


Image Maps <map> and <area>

<map> defines an Image map. An image-map is an image with clickable regions.

Note: The area element is always nested inside the map element. The area element defines the regions in the image map. The usemap attribute in <image> refers to the id or name (browser dependant) attribute in <map>.



<area> Defines a region in the image map. This element is always nested in the <map> tag.

{coords:For shape=“rectangle” coords=“left,top,right,bottom”

For shape=“circ” coords=“centerx,centery,radius”

For shape=“poly”coords=“x1,y1,x2,y2,x3,y3……xn,yn”}




Image Map Example

<p>Click on one of the planets:</p> <img src ="planets.gif“ width="145" height="126“ alt="Planets“ usemap ="#planetmap" /><map id ="planetmap“ name="planetmap">

  <area shape ="rect" coords ="0,0,82,126"  href ="sun.htm" target ="_blank"  alt="Sun" />

  <area shape ="circle" coords ="90,58,3"  href ="mercur.htm" target ="_blank"  alt="Mercury" />

  <area shape ="circle" coords ="124,58,8"  href ="venus.htm" target ="_blank"  alt="Venus" /></map>


  • Unordered Lists <ul> </ul>

    {type: disc,square,curcle}

  • Ordered Lists <ol> </ol>

    {type: A,a,1,i}

  • List Element <li> </li>

  • Definition Lists <dl> </dl>

  • Definition Term <dt> </dt>

  • Definition <dd> </dd>

Lists Examples














<dd>Black hot drink</dd>


<dd>White cold drink</dd>


Basic Tables

The <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells, and other tables.








Table Row <tr> Table data<td>

<tr></tr> defines a row in a table;



<td> </td> defines a CELL in a table;







Non breaking SPACE:"&nbsp;"

Table Example

<table border="1">












  • Login