Html tutorial
1 / 26

HTML tutorial - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'HTML tutorial' - yuri-santana

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 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

  • 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.

Tag attributes

  • 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

  • Mandatory Tags

    • <HTML></HTML>

    • <HEAD></HEAD>

    • <TITLE></TITLE>

    • <BODY></BODY>

      • TEXT {COLOR}


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

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


Paragraph formatting
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 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
Text Formatting

  • Bold <b></b>

  • Italics <i></i>

  • Subscript <sub></sub>

  • Superscript <sup></sup>

  • Underlined <u></u>

  • Strike-through <strike></strike>

Advanced text formatting
Advanced Text Formatting


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

<font> </font>

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

{face: list_of_fontnames}

{size: 1-7}

Font example
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
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
<a> Continued..

<a> </a>

{href: URL}

{name: section_name}

{target: _blank,_parent,_self,_top}

_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> 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> 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
Adding Images <img>

  • The img element defines an image.

    <img />

    {alt: text }

    {src: URL }

    {align: top,bottom,middle,left,right}

    {border: pixels}

    {height: pixels,%}

    {width: pixels,%}

    {usemap: URL}

Img example adding images
<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
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
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>.

{name: unique_name}

{id: unique_name}

<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”}

{href: URL}

{shape: rect,rectangle,circ,circle,poly,polygon}

{target: _blank,_top,_self,_parent}

Image map example
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
Lists Examples














<dd>Black hot drink</dd>


<dd>White cold drink</dd>


Basic tables
Basic Tables

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

{align: left,center,right}

{bgcolor: COLOR}

{background: URL}

{border: pixel}

{cellpadding: pixel,%}

{cellspacing: pixel,%}

{width: pixel,%}

Table row tr table data td
Table Row <tr> Table data<td>

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

{align: }

{bgcolor: }

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

{align: left,right,center}

{bgcolor: COLOR}

{height: pixel,%}

{width: pixel,%}

{valign: top,middle,bottom,baseline}

{nowarp: }

Non breaking SPACE: "&nbsp;"

Table example
Table Example

<table border="1">