Html Intro2

Learning HTML Basics ~Fall 2008~ .:WebDesign:.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML Basic Tags

[object Object],[object Object],[object Object],HTML Basic Tags

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML Basic Tags

[object Object],[object Object],[object Object],[object Object],[object Object],HTML Basic Tags

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML Formatting

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML Formatting

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML Attributes

[object Object],[object Object],[object Object],[object Object],HTML Colors

[object Object],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 Damon 2. Derek Jeter 3. Bobby Abreu 4. Robbie McGarry

[object Object],HTML Formatting Sample code…. <ul> List Name <li> list item 1 <li> list item 2 <li> list item 3 <li> list item 4 </ul> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],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….

HTML Notes and Miscellaneous Info White space Syntax

Creating Links ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 (website, page, open file etc.) Text hyperlink that appears in browser Closing Anchor Tag

Creating Relative Links <a href=“nameofpage.html">Text to be displayed</a> Anchor Tag 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 Anchor Tag

Creating Links Target attribute With the target attribute, you can define where the linked document will be opened. Target=“_blank” ….opens link in new browser window Enrichment….additional targets (4 of them), and Name attribute of Anchor tag <a href="url“ target=“_blank” >Text to be displayed</a>

Creating Links Email Link (Mailto) <a href= “ mailto:mlackner@loyolablakefield.org?subject=Hello%20Again ”> click here to email me</a>

Link Colors You can change all of the link colors by adding the following attributes to the body tag. link –any hyperlink on page vlink –any visited (or link once clicked on) link on the page <body link=“red” vlink=“blue”>

Images Img = image src = source of the image alt = stands for alternate and is used to name the image, important for visually impaired users (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 src tag in place of the clickable text on a normal link

[object Object],[object Object],[object Object],[object Object],Changing Backgrounds

[object Object],[object Object],[object Object],[object Object],Horizontal Rule

[object Object],[object Object],[object Object],[object Object],Tables

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Tables Turn on table Turn on row 1 Turn on Cell #1 & Cell #2 Turn off row 1 Turn off table

[object Object],[object Object],[object Object],[object Object],Tables Attributes

[object Object],[object Object],[object Object],[object Object],[object Object],Tables Attributes

Tables Attributes ,[object Object]

Process for creating table… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Html Intro2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Html Intro2

Similaire à Html Intro2 (20)

Dernier

Dernier (20)

Html Intro2