html intro2
TRANSCRIPT
Learning HTML Basics~Fall 2008~
.:WebDesign:.
Basic page has 2 components
-page content and html tags
HTML (hyper text mark-up language)
-code called “tags”
-angled brackets/ enclose “tags”
-every opening bracket has a closing bracket
-tags should be all lower case (recommended by W3C)
-to close tag </title>
HTML (hyper text mark-up language)
-The markup tags tell the Web browser how to display the page
-An HTML file must have an htm or html file extension
-An HTML file can be created using a simple text editor
<html> tells browser that file contains html coded info
<head> contains title that appears in browser window
<title> displays words that are shown @ top of browser window, in title bar
<body> contains contents of page
<html> <head> <title> ……. </title> </head><body>…………………………………………………</body></html>
Headings
<h1>...</h1> largest
<h2>...</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6> smallest-html automatically adds a blank line
break before and after a heading
HTML Basic Tags
Paragraphs
<p>…..</p>
-html automatically adds a blank line break before and after a paragraph
HTML Basic Tags
Line Breaks
<br>
-is used to break a line but don’t want to start a new paragraph
-forces a line break wherever you place it
-<br> is an empty tag, it has no end tag (i.e. </br>)
-<br> or <br/>
HTML Basic Tags
Comments in HTML<!--This is a comment -- >-comments will be ignored by the
browser-use them to explain your code, which
helps when others are looking at your code or you come back later to make changes (reusability)
-to comment out code "<!--", ends with "-->"
HTML Basic Tags
Bold <b>
Italics <i>
Strong <strong>
Emphasized <em>
Small <small>
Subscript <sub>
Superscript <sup>
Center text <center>
HTML Formatting
Advanced:Citations , Quotations, and Definition Tags
Abbreviation <abbr>
Address <address>
Blockquote <blockquote>
Short Quotation <q>
Citation <cite>
Definition <dfn>
HTML Formatting
Attributes –provide additional info to a HTML element
<h1 align=“center”> </h1>
<body bgcolor=“red”> </body>
<table border=“1”>
*One Tag can have multiple attributes
<font size=“5” color=“navy” face=“courier”>
HTML Attributes
Colors: there are 16 standards colors recognized by HTMLaqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
Can also use hexadecimal color codes (i.e. <font color=“#FF0000”>)
*See W3Schools site for large listing
HTML Colors
Ordered Lists –this is a numbered list, 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 Jeter3. Bobby Abreu4. 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 items but a list of terms and explanations or definitions
Note: 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…
Rockhard object, made..
Ballround object….
HTML Notes and Miscellaneous Info
White space
Syntax
Creating LinksTwo 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 HTML page, 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
(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:[email protected]?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
Background Color
<body bgcolor=“red”>
Background Image
<body background=“picture.jpg”>
Changing Backgrounds
<hr><hr noshade width=“50”> length
of line (50 = 50 pixels)
<hr noshade size=“20”> thickness of line
<hr noshade size=“10” color=“red”> color of line
Horizontal Rule
Tables are defined with the <table> tag
Tables are divided into rows with the <tr> tag
Each row is divided into data cells with the <td> tag
A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, nested tables, etc….
Tables
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Tables Turn on
tableTurn on row 1
Turn on Cell #1 & Cell #2
Turn off row 1
Turn off table
<table border=“#”>
-sets width of border around table cells, # refers to pixels
<table cellspacing=“#”>
-sets amount of space between table cells, # refers to pixels
Tables Attributes
<table width=“#” or “%”>
-sets width of table in pixels or percentage of document width
<td bgcolor=“red”>
-sets the background color of cell
Tables Attributes
colspan & rowspan
<td colspan=“#”>
-sets number of columns a cell should span
<td rowspan=“#”>
-sets number of rows a cell should span
Tables Attributes
Tables Attributes
colspan & rowspan
<th> table heading tag
Used in place of <td>
Usually used in first row
Makes text in this cell bold and larger
Tables Attributes
Process for creating table…1. Visualize the table you want (draw sketch if need be)2. Enter html tags<table><tr><td> cell1 row 1</td><td>cell2 row1</td><td>cell3 row1</td></tr></table>
3. Add attributes-table border, cell spacing, cell padding, table width,
table, background color or background images, table alignment, table headers