1 intro to html

7/31/2019 1 Intro to HTML

http://slidepdf.com/reader/full/1-intro-to-html 1/30

Intro to HTML

The Basics



HTML

HTML means Hyper Text Markup Language.HTML is a language that helps us to create web sites

in the Internet. HTML helps to coordinate humanand the computer. So we have to use some codes toexplain to computer what are we going to do.Therefore we use HTML to give instructions to create

web sites.



Why We Learn HTML?



Tim Berners-Lee

(CERN physicist)

Creator of HTML &

WWW

CERN is an European

Organization for NuclearResearch at Geneva

http://en.wikipedia.org/wiki/Geneva

http://en.wikipedia.org/wiki/Geneva



• HTML is an evolving standard (as new

technology/tools are added) HTML 1 (Sir Tim Berners-Lee, 1989): very basic,

limited integration of multimediain 1993, Mosaic added many new features (e.g., integrated

images)

HTML 2.0 (IETF, 1994): tried to standardize these &

other features, but latein 1994-96, Netscape & IE added many new, divergent

features

HTML 3.2 (W3C, 1996): attempted to unify into a

single standardbut didn't address newer technologies like Java applets &

streaming video

Beginning of HTML



Beginning of HTML (cont.)

HTML 4.0 (W3C, 1997): current standard (but moving

towards XHTML)

attempted to map out future directions for HTML, not just

react to vendors

HTML 4.01(W3C, 1999):

XHTML 1.0 (W3C, 2000): HTML 4.01 modified to

conform to XML standards

XHTML 1.1 (W3C, 2001): “Modularization” of XHTML

1.0

HTML 5 (Web Hypertext Application TechnologyWorking Group, W3C, 2006): New



HTML Tags

We use some codes to explain to computer

what are we going to do. These codes called

as “Tags”.

HTML tags must type in the angle

brackets(<>) ,it wants to type in a text editor

and save with .htm or .html extension. If we

use a tag we should close the tag. To closethe tag we use closing tags(</>).



Software & Text Editors

• What You See is What You Get(Software):Dreamweaver, Microsoft FrontPage, Netscape Composer,

Adobe Page Mill, ,Hotdog

• Word (Save As Webpage)

• Text Editors• Notepad

• Word pad

• Code View

• GEdit

• Nano Editor



• In HTML we use some essential tags. They are

• <html>

• <head> Heading Section

• <title></title>• </head>

• <body></body>

• </html> Body Section



HTML Tags

• Tag – an HTML code that tells the browserHOW to display something

• Opening Tag <h3>

• Closing Tag </h3>

• Example : <b>This will be bold</b>

• Tags will not appear in browsers

• All open tags must have corresponding

closing tag.



Attributes

Attributes provide additional displayinformation about a tag

Attributes appear within the opening tagbrackets

Attribute values must be contained in quotes

You can have more than one attribute in atag

<font size=“1” color=“green">This text wouldbe green and smaller</font>



HTML Tags



Basic Tags

<html></html> Creates an HTML document

<head></head> Sets off the title and otherinformation that isn't displayed onthe Web page itself

<body></body> Sets off the visible portion of thedocument



Header Tags

<title></title> Puts the name of the document inthe title bar

Things in the header section do not appear

in the browser



Body Attributes

<body bgcolor=?> Sets the background color, using name orhex value

<body text=?>

Sets the text color, using name or hex value

<body background=url> Specifies an image file to be used as

background

<body vlink=?> Sets the color of followed links, using nameor hex value

<body alink=?> Sets the color of links on click



Text Formatting Tags 1

<hl></hl> Creates the largest header

<h6></h6> Creates the smallest header

<b></b> Creates bold text

<i></i> Creates italic text



Text Formatting Tags 2

<strong></strong> Emphasizes a word (with italic or bold)

<font size=“?”></font> Sets size of font

<font color=“?”></font> Sets font color, using name or hex value

<font face=“?”></font>

Set font style like Comic Sans MS



Paragraph Formatting Tags

<p></p> Creates a new paragraph

<p align=?> Aligns a paragraph to the left, right, orcenter

<br>

Inserts a line break<blockquote></blockquote>

Indents text from both sides



Ordered Lists –

this is a numberedlist, starts with <ol> and ends with

</ol>, each new item in list requires

the <li> tag

HTML Formatting

Sample code….

<ol> List Name

<li> list item 1<li> list item 2

<li> list item 3

<li> list item 4

</ol>

Browser view…

Yankees Starting Lineup

1. Johnny Damon2. Derek Jeter

3. Bobby Abreu

4. Robbie McGarry



Un-ordered Lists –

bulleted list of items, starts with <ul> tag and ends

with </ul> tag, and each list item

begins with <li>

HTML Formatting

Sample code….

<ul> List Name

<li> list item 1<li> list item 2

<li> list item 3

<li> list item 4

</ul>

Browser view…

Yankees Starting Lineup

•Johnny Damon•Derek Jeter

•Bobby Abreu

•Robbie McGarry



Definition Lists –

not a list of itemsbut a list of terms and explanations

or definitionsNote: inside a definition list (the <dd> tag) you can

put paragraphs, line breaks, images, links and

other lists

HTML Formatting

Sample code….

<dl><dt>Vocab Word 1

<dd>Definition 1

<dt>Vocab Word 2

<dd>Definition 2

</dl>

Browser view…

Rock

hard object, made..

Ball

round object….



Table Formatting Tags

<table></table> Creates a table

<tr></tr> Sets off each row in a table

<td></td> Sets off each cell in a row

<table border=#> Sets width of border around table cells

<table width=“ ? %” or height=“ ? %”> Sets width and height of table - in pixels or as apercentage of document width



How Tables Work

<tr> </tr>

<table>

</table>

<td> </td><td> </td> </td><td>

<tr> </tr><td> </td><td> </td> </td><td>

<tr> </tr><td> </td><td> </td> </td><td>



Images

Img = image

src = source of the image

alt = stands for alternate and is used to name

the image, important for visually impairedusers (text to speech)

<img src =“nameoftheimage.jpg”

alt=“description”>

<img src =“nameoftheimage.gif”

alt=“description”>



Images

Aligning Images can be done with the

“align=“ tag. Place this inside of your image

source code. You can only align to the right

or to the left with this tag.

<img src=“name.jpg” alt=“description”

align=“right”>

*Note <img….> tag is an empty tag with no

</img> tag necessary



Image as a Link

<a href=“url or file name”><img src =

“imagefile.jpg” alt=“description”></a>

Insert the img srctag in place of the

clickable text on a

normal link



Creating Links

Two types of links

1. absolute: link to an outside website

2. relative: link to another page within your

website

HTML uses the <a> (anchor) tag to create a link to

another document

An anchor can point to any resource on the Web: an HTMLpage, an image, a sound file, a movie, etc.

The correct Syntax of creating an anchor:

<a href="url">Text to be displayed</a>



Creating Absolute Links

<a href="url">Text to be displayed</a>

Anchor

Tag

Href

attribute

used to

address the

document to

link to

Where this

link will take

you

Text

hyperlink

that

appears in

browser

Closing

Anchor

Tag



Creating Relative Links

<a href=“nameofpage.html">Text to be

displayed</a>

AnchorTag

href attribute

used to

address the

document

to link to

Where this link will

take you (page

within website name

Text

hyperlink

that

appears in

browser

Closing

AnchorTag



Link Tag Html Links :

Html links are defined with the <a> tag

Syntax : <a href="http://www.gmil.com">Gmail</a>

Example :<html><body>

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

</body></html>

GmailO/P :If we click this link it goes to gmail

account

1 intro to html

Documents