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

HTML tutorial PowerPoint PPT Presentation


  • 97 Views
  • 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 tutorial


Html document

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

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


Example

Example

<html>

<head>

<title>Title of page</title>

</head>

<body>

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

</body>

</html>

Lower case tags are recommended and standard now.


Tag attributes

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}

      • BGCOLOR{COLOR}

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

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

      • LINK, ALINK, VLINK{COLOR}


Paragraph formatting

Paragraph Formatting

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

    • <P></P>

    • <BR>

    • <HR>

      • SIZE{1-N, %}

      • WIDTH{1-N, %}

      • COLOR{COLOR}

      • ALIGN{LEFT, CENTER, RIGHT}

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

      • ALIGN{LEFT, CENTER, RIGHT}

    • <CENTER></CENTER>


Comments

Comments

  • 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

Font

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

<html>

<body>

<p>

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

is a link to a page on this Web site.

</p>

<p>

<a href="http://www.microsoft.com/">

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

the World Wide Web.

</p>

</body>

</html>


A examples linking to section on same page

<a> Examples: Linking to Section on same page

<html>

<body>

<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

</body>

</html>


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

<html>

<body>

An image from another folder:

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

An image from W3Schools:

<img src="http://www.w3schools.com/images/ie.gif" alt="IE" width="73" height="68" />

</body>

</html>


Aligning images

Aligning Images

<p>

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

</p>


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>


Lists

Lists

  • 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

UNORDERED LIST

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

ORDERED LIST

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

DEFINITION LIST

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>


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

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>


  • Login