15348_lecture 25-29
TRANSCRIPT
-
8/6/2019 15348_Lecture 25-29
1/33
HTML
Lecture 25- 29
-
8/6/2019 15348_Lecture 25-29
2/33
2
Introduction to HTMLIntroduction to HTML
-
8/6/2019 15348_Lecture 25-29
3/33
3
Contents
Getting Started..
What is HTML?
How to create and View an HTML document?
Basic HTML Document Format
The HTML Basic tags
-
8/6/2019 15348_Lecture 25-29
4/33
What the following term mean:
4 Web server: a system on the internet containg one
or more web site4 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
yourWeb 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.
-
8/6/2019 15348_Lecture 25-29
5/33
5
What is HTML?
4Telling 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
* or .
4 Most tags come in pairs
* exceptions:
,
, tags 4 The first tag turns the action on, and the second turns itoff.
-
8/6/2019 15348_Lecture 25-29
6/33
6
4 The second tag(off switch) starts with a forward slash.
* For example , text
4 can embedded, for instance, to do this:
* Your text it won't work.
* The correct order is Your text
4 not case sensitivity.
4 Many tags have attributes.* For example,
centers the paragraph following it.
4 Some browsers don't support the some tags and some
attributes.
-
8/6/2019 15348_Lecture 25-29
7/33
7
Basic HTML Document Format
WENT'99
Went'99
See what it
looks like:
-
8/6/2019 15348_Lecture 25-29
8/33
8
How to Createand 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.
-
8/6/2019 15348_Lecture 25-29
9/33
9
7.You may now switch back and forth between theSource and the HTML Document
switch to Notepad with the Document Source
make changes
save the document againswitch back to Netscape
click on RELOAD and view the new HTML
Document
switch to Notepad with the DocumentSource......
-
8/6/2019 15348_Lecture 25-29
10/33
10
Tags in head ...-- contains information about the
document
...-- puts text on the browser's title
bar.
-
8/6/2019 15348_Lecture 25-29
11/33
11
Tags in Body
Let's talk Text
Heading:
Center:
Line Break
,
Phrase Markups: ,
Createa List
Unordered list :
Ordered list:
Nested
-
8/6/2019 15348_Lecture 25-29
12/33
12
Add Images
Use tags
How to specify Relative pathnames
Attributes of IMG tag
-width,height-Alt
-Align
-
-
8/6/2019 15348_Lecture 25-29
13/33
13
Add some Link
Use 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:[email protected]
-
8/6/2019 15348_Lecture 25-29
14/33
14
How to make colors changes?
Hexadecimal number :
Color names :
Changing the Background color
Changing Text color
Spot colorWENT'99
Image Background
-
8/6/2019 15348_Lecture 25-29
15/33
XHTML (formerly HTML)
Markup Language, not programminglanguage
WebDocuments 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
-
8/6/2019 15348_Lecture 25-29
16/33
XHTML Elements (tags) More than 90 types
Some ofthem 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
-
8/6/2019 15348_Lecture 25-29
17/33
Headings & Paragraphs
largest, through smallest Use for document headings
Use other headings for section headings
for paragraphs, can contain inlineelements, but noblock-level elements
line wrappingis done automatically
white space (tabs, spaces, returns) is normallyignored
must be specified using specific tags
for line breaksfor single space between twowords that must be kept
together on the same line
-
8/6/2019 15348_Lecture 25-29
18/33
Lists
Block-level elements: Unordered list (bulleted):
Ordered list (numbered): Both & have list items, , for each element
in a list Definition list:
Each definition is specified by a definition descriptionelement,
Lists are formed according to hierarchicalnesting
All list tags require opening & closing tags withpropernesting
-
8/6/2019 15348_Lecture 25-29
19/33
Howwould you get the following list?
East
Central
West
East
Central
West
-
8/6/2019 15348_Lecture 25-29
20/33
Howwould you get the following list?
1. Yankees2. Red Sox
3. Orioles
YankeesRed Sox
Orioles
-
8/6/2019 15348_Lecture 25-29
21/33
Howwould you get the following list?
East
1. Yankees
2. Red Sox
3. Orioles
Central
West
East
YankeesRed Sox
Orioles
Central
West
-
8/6/2019 15348_Lecture 25-29
22/33
Howwould you get the following list?Monday
Read
pgs 50 -100
pgs 170 200
Review
Pgs 600-640Pgs 680-700
Tuesday
Monday
Read
pgs 50 -100
pgs 170 200
Review
pgs 600-650
pgs 680-700
Tuesday
-
8/6/2019 15348_Lecture 25-29
23/33
Quick review ofHTML block structures: lists and tables
Ordered Lists
-
8/6/2019 15348_Lecture 25-29
24/33
Unordered Lists
The type attribute can control bullet types (disc, circle,square)
-
8/6/2019 15348_Lecture 25-29
25/33
Hyperlinks
Inline element, musthave 2 tags
-
8/6/2019 15348_Lecture 25-29
26/33
Local Hyperlinks Use relative reference rather than absolute reference
Relative towhere the document with the link is
../means in the directory above the current file
./means in the same directory as the current file
XHTML.ppt
-
8/6/2019 15348_Lecture 25-29
27/33
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 followingfile to an images directory andcorrect the URLs accordingly
http://www.du.edu/~jcalvert/hist/wh9j.jpg
-
8/6/2019 15348_Lecture 25-29
28/33
Images To display an image alone in a browser you may use the a tag.:
William Henry Harrison
To display an inline image within a page, use img:
URL points to a GIF, JPEG, or PNG
imgmay be placed in any block-level or inline element exceptpre
You should always include alt
-
8/6/2019 15348_Lecture 25-29
29/33
Tables
Basic structure
By default, table cells are drawn ofminimum height and width to accommodate the contents
ofthe cells.
-
8/6/2019 15348_Lecture 25-29
30/33
Properties ofthe whole table can be formatted using attributes ofthe table element.
(table definition) Block ElementATTRIBUTE POSSIBLE VALUES DEFAULTalign left, center, right
(make text flow around table)
left with text not flowing around table
background(background image)
URL (relative or absolute)
bgcolor(background color)
#hexcolor, named color inherited fr om bgcolorofunderlying
Web pageborder pixels 0cellpadding pixels browser dependent (about 1)cellspacing pixels browser dependent (about 2)height pixels, % minimum to accommodate table
contents
width pixels, % minimum to accommodate table
contents
-
8/6/2019 15348_Lecture 25-29
31/33
Properties ofsingle cells can be formatted using attributes ofthe tdelement.
(t d t c ) Us d on insid tr m ntATTRI TE POSSI E ALUES DEFAULTalig(horizontal alignment of
cell contents)
left, center, right left
valign (verticalalignment ofcell
contents)
top, middle, bottom middle
backgro(background image)
URL (relative or absolute)
bgcolor(background color)
#hexcolor, named color inherited from bgcoloroftable
containing the cell
cols a pixels 0ro s a pixels 0
eig t pixels, minimum to accommodate cell contentsi t pixels, minimum to accommodate cell contents
*< h > (table heading cell) Takes exact same attributes as td . In heading cells, text is
-
8/6/2019 15348_Lecture 25-29
32/33
Here is an example using several ofthese attributes.
-
8/6/2019 15348_Lecture 25-29
33/33
To create "irregular" tables, use the rowspa and olspa attributes ofthe tdelement.
The spanningis always to the right and down. Notice which td
elements are eliminated.