Html Intro2
Transcript of Html Intro2
![Page 1: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/1.jpg)
Learning HTML Basics~Fall 2008~
.:WebDesign:.
![Page 2: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/2.jpg)
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>
![Page 3: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/3.jpg)
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
![Page 4: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/4.jpg)
<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
![Page 5: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/5.jpg)
<html> <head> <title> ……. </title> </head><body>…………………………………………………</body></html>
![Page 6: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/6.jpg)
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
![Page 7: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/7.jpg)
Paragraphs
<p>…..</p>
-html automatically adds a blank line break before and after a paragraph
HTML Basic Tags
![Page 8: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/8.jpg)
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
![Page 9: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/9.jpg)
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
![Page 10: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/10.jpg)
Bold <b>
Italics <i>
Strong <strong>
Emphasized <em>
Small <small>
Subscript <sub>
Superscript <sup>
Center text <center>
HTML Formatting
![Page 11: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/11.jpg)
Advanced:Citations , Quotations, and Definition Tags
Abbreviation <abbr>
Address <address>
Blockquote <blockquote>
Short Quotation <q>
Citation <cite>
Definition <dfn>
HTML Formatting
![Page 12: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/12.jpg)
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
![Page 13: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/13.jpg)
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
![Page 14: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/14.jpg)
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
![Page 15: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/15.jpg)
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
![Page 16: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/16.jpg)
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….
![Page 17: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/17.jpg)
HTML Notes and Miscellaneous Info
White space
Syntax
![Page 18: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/18.jpg)
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>
![Page 19: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/19.jpg)
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
![Page 20: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/20.jpg)
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
![Page 21: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/21.jpg)
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>
![Page 22: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/22.jpg)
Creating Links
Email Link (Mailto)
<a href= “mailto:[email protected]?subject=Hello%20Again”> click here to email me</a>
![Page 23: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/23.jpg)
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”>
![Page 24: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/24.jpg)
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”>
![Page 25: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/25.jpg)
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
![Page 26: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/26.jpg)
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
![Page 27: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/27.jpg)
Background Color
<body bgcolor=“red”>
Background Image
<body background=“picture.jpg”>
Changing Backgrounds
![Page 28: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/28.jpg)
<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
![Page 29: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/29.jpg)
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
![Page 30: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/30.jpg)
<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
![Page 31: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/31.jpg)
<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
![Page 32: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/32.jpg)
<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
![Page 33: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/33.jpg)
colspan & rowspan
<td colspan=“#”>
-sets number of columns a cell should span
<td rowspan=“#”>
-sets number of rows a cell should span
Tables Attributes
![Page 34: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/34.jpg)
Tables Attributes
colspan & rowspan
![Page 35: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/35.jpg)
<th> table heading tag
Used in place of <td>
Usually used in first row
Makes text in this cell bold and larger
Tables Attributes
![Page 36: Html Intro2](https://reader034.fdocuments.us/reader034/viewer/2022042513/55556cd6b4c9055f5f8b4738/html5/thumbnails/36.jpg)
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