Lecture 25-29

HTML
Lecture 25- 29
Introduction to HTML
Contents Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags
What the following term mean:

4 Web server: a system on the internet containg one or more web site 4 Web site: a collection of one or more web pages 4 Web pages: single disk file with a single file name 4 Home pages: first page in website
Think about the followings before working your Web pages.

4 Think about the sort of information(content) you want to put on the Web. 4 Set the goals for the Web site. 4 Organize your content into main topics. 4 Come up with a general structure for pages and topics.
What is HTML?
4 Telling the browser what to do, and what props to use. 4 A serises of tags that are integrated into a text document. Tags are ; 4 surrounded with angle brackets like this
* <B> or <I>.
4 Most tags come in pairs

* exceptions: <P>, <br>, <li> tags
4 The first tag turns the action on, and the second turns it off.
4 The second tag(off switch) starts with a forward slash.

* For example ,<B> text </B>
4 can embedded, for instance, to do this:

* <HEAD><TITLE> Your text </HEAD></TITLE> it won't work. * The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>
4 not case sensitivity. 4 Many tags have attributes.

* For example, <P ALIGN=CENTER> centers the paragraph following it.
4 Some browsers don't support the some tags and some attributes.
Basic HTML Document Format
<HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML>
See what it looks like:
How to Create and View an HTML document?

1.Use an text editor such as Editpad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Netscape (or any browser) Off-Line 4.Switch to Netscape 5.Click on File, Open File and select the filename.html document that you just created. 6.Your HTML page should now appear just like any other Web page in Netscape.
7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to Netscape click on RELOAD and view the new HTML Document switch to Notepad with the Document Source......
Tags in head
<HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar.
10
Tags in Body Let's talk Text Heading: <H1> </H1> Center:<Center> </Center> Line Break <P> ,<Br> Phrase Markups: <I></I> ,<B></B> Create a List Unordered list : <UL><li> Ordered list: <OL><li> Nested
11
Add Images Use <IMG SRC=imagefilename> tags How to specify Relative pathnames Attributes of IMG tag
-width,height -Alt -Align -<Img src=my.gif width=50 height=50 align=right alt=My image>
12
Add some Link Use <A href=filename|URL></a>tags How to specify Relative pathnames Kinds of URLs
-http://www.women.or.kr - ftp://ftp.foo.com/home/foo - gopher://gopher.myhost.com/ - news://news.nuri.net - mailto:skrhee@women.or.kr
13
How to make colors changes? Hexadecimal number : Color names : <Font color=white> Changing the Background color
<BODY BGCOLOR=#19378a>
Changing Text color

<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff>
Spot color
<FONT COLOR=#66ffcc>WENT'99</FONT>
Image Background
<BODY BACKGROUND=bgimg.gif >

14
XHTML (formerly HTML)

Markup Language, not programming language Web Documents use HTML format to:
structure and organize text, images, etc. supports headings, paragraphs lists, tables, links, images, forms, frames, etc HTML versions from 2.01 4.01 (most recent)
Replaced by XHTML 1.0
An HTML document has 2 components

Markup tags (for page organization/formatting) Content
XHTML Elements (tags)

More than 90 types Some of them are as follows : Top-level elements html, head, body Head elements title, link, meta, base, script Block-level elements h1-h6, p, ul, ol, li, table, etc Inline elements a, br, em, hr, img, strong, etc
Headings & Paragraphs <h1> largest, through <h6> smallest

Use <h1> for document headings Use other headings for section headings
<p> for paragraphs, can contain inline elements, but no block-level elements
line wrapping is done automatically white space (tabs, spaces, returns) is normally ignored
must be specified using specific tags
<br /> for line breaks for single space between two words that must be kept together on the same line
Lists
Block-level elements:
Unordered list (bulleted): <ul> Ordered list (numbered): <ol>
Both <ul> & <ol> have list items, <li>, for each element in a list
Definition list: <dl>

Each definition is specified by a definition description element, <dd>
Lists are formed according to hierarchical nesting All list tags require opening & closing tags with proper nesting
How would you get the following list?
East Central West
<ul> <li>East</li> <li>Central</li> <li>West</li> </ul>
1. Yankees 2. Red Sox 3. Orioles
<ol> <li>Yankees</li> <li>Red Sox</li> <li>Orioles</li> </ol>
How would you get the following list? <ul> <li>East <ol> <li>Yankees</li> <li>Red Sox</li> <li>Orioles</li> </ol> <li>Central</li> <li>West</li> </ul>
East 1. Yankees 2. Red Sox 3. Orioles Central West

Monday Read pgs 50 -100 pgs 170 200 Review Pgs 600-640 Pgs 680-700 Tuesday <ul> <li>Monday <ul> <li>Read <ul> <li>pgs 50 -100</li> <li>pgs 170 200</li> </ul></li> <li>Review <ul> <li>pgs 600-650</li> <li>pgs 680-700</li> </ul></li> </ul></li> <li>Tuesday</li> </ul>
Quick review of HTML block structures: lists and tables Ordered Lists
Unordered Lists
The type attribute can control bullet types (disc, circle,square)
Hyperlinks
Inline element, must have 2 tags
<a href= specify clickable links to other Web or local documents
Can be attached to text or images Can also be attached to a portion of an image

Image map
Can be tied to any portion of text: <p> Hello, my name is

<a href="http://www.cs.sunysb.edu/~richard">Richard McKenna</a>. Won't you be my friend?</p>
Hello, my name is Richard McKenna. Won't you be my friend?
URLs can be to local or remote resources
Local Hyperlinks
Use relative reference rather than absolute reference
Relative to where the document with the link is ../ means in the directory above the current file ./ means in the same directory as the current file Relative Reference <p><a href="./lectures/XHTML.ppt">
XHTML.ppt </a></p>
Absolute Reference
<p><a href= http://www.cs.sunysb.edu/~cse101/lectures/XHTML.ppt"> XHTML.ppt </a></p>
Relative reference is preferred. You should use it when possible.
Organizing your own site images Place all images inside an images directory
Be sure to do this for all assignments
Inside your Web pages, you may then reference the images using src="./images/ " When you upload your Web pages, upload your entire images directory
Save the following file to an images directory and correct the URLs accordingly
http://www.du.edu/~jcalvert/hist/wh9j.jpg
Images
To display an image alone in a browser you may use the a tag.: <p><a href="http://www.du.edu/~jcalvert/hist/wh9j.jpg"> William Henry Harrison</a></p> To display an inline image within a page, use img: <img src="URL" width=" " height=" " alt=" " longdesc= " "> URL points to a GIF, JPEG, or PNG img may be placed in any block-level or inline element except pre You should always include alt <img src="http://www.du.edu/~jcalvert/hist/wh9j.jpg" width="500" height="200" alt="An elongated William Henry Harrison" >
Tables Basic structure
By default, table cells are drawn of minimum height and width to accommodate the contents of the cells.
Properties of the whole table can be formatted using attributes of the table element.
<table > </table> (table definition) Block Element

ATTRIBUTE align background
(background image)
POSSIBLE VALUES left, center, right

(make text flow around table)
DEFAULT left with text not flowing around table
URL (relative or absolute)
bgcolor
(background color)
#hexcolor, named color pixels pixels pixels pixels, % pixels, %
border cellpadding cellspacing height width
inherited from bgcolor of underlying Web page 0 browser dependent (about 1) browser dependent (about 2) minimum to accommodate table contents minimum to accommodate table contents
Properties of single cells can be formatted using attributes of the td element.
<td ></td> (t
ATTRI alig TE
d t
Us d on
insid
tr
m nt
POSSI E ALUES left, center, right top, middle, bottom

URL (relative or absolute)
DEFAULT left middle
(horizontal alignment of cell contents) valign (vertical alignment of cell contents)
backgro
(background image)
bgcolor
(background color)
#hexcolor, named color pixels pixels pixels, pixels,
cols a ro s a eig t i t
inherited from bgcolor of table containing the cell 0 0 minimum to accommodate cell contents minimum to accommodate cell contents
* < h ></ h> (table heading cell)
Takes exact same attributes as td . In heading cells, text is
Here is an example using several of these attributes.
To create "irregular" tables, use the rowspa and olspa attributes of the td element.
The spanning is always to the right and down. Notice which td elements are eliminated.

Lecture 25-29

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 25-29

Uploaded by

Copyright:

Available Formats

HTML

What the following term mean:

Think about the followings before working your Web pages.

4 Most tags come in pairs

4 The second tag(off switch) starts with a forward slash.

4 can embedded, for instance, to do this:

4 not case sensitivity. 4 Many tags have attributes.

Basic HTML Document Format

<HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML>

See what it looks like:

How to Create and View an HTML document?

Changing Text color

<BODY BACKGROUND=bgimg.gif >

XHTML (formerly HTML)

An HTML document has 2 components

XHTML Elements (tags)

Headings & Paragraphs <h1> largest, through <h6> smallest

Definition list: <dl>

How would you get the following list?

East Central West

<ul> <li>East</li> <li>Central</li> <li>West</li> </ul>

How would you get the following list?

1. Yankees 2. Red Sox 3. Orioles

<ol> <li>Yankees</li> <li>Red Sox</li> <li>Orioles</li> </ol>

East 1. Yankees 2. Red Sox 3. Orioles Central West

How would you get the following list?

The type attribute can control bullet types (disc, circle,square)

Can be attached to text or images Can also be attached to a portion of an image

Can be tied to any portion of text: <p> Hello, my name is

Hello, my name is Richard McKenna. Won't you be my friend?

URLs can be to local or remote resources

<p><a href= http://www.cs.sunysb.edu/~cse101/lectures/XHTML.ppt"> XHTML.ppt </a></p>

Relative reference is preferred. You should use it when possible.

Tables Basic structure

<table > </table> (table definition) Block Element

POSSIBLE VALUES left, center, right

DEFAULT left with text not flowing around table

URL (relative or absolute)

#hexcolor, named color pixels pixels pixels pixels, % pixels, %

border cellpadding cellspacing height width

Properties of single cells can be formatted using attributes of the td element.

POSSI E ALUES left, center, right top, middle, bottom

DEFAULT left middle

(horizontal alignment of cell contents) valign (vertical alignment of cell contents)

#hexcolor, named color pixels pixels pixels, pixels,

* < h ></ h> (table heading cell)

Takes exact same attributes as td . In heading cells, text is

Here is an example using several of these attributes.

You might also like