html an absurdly brief introduction it 130 robin burke
DESCRIPTION
3 HTML HyperText Markup Language HyperText text containing navigable links to other texts Markup LanguageTRANSCRIPT
HTMLAn Absurdly Brief Introduction
IT 130Robin Burke
2
Outline The HTML standard
Syntax Tags
Document Structure Style Anchors and links Images Tables
3
HTML HyperText Markup Language HyperText
text containing navigable links to other texts Markup Language
4
Markup Adding information to text document Indicating
Logical components of document Instructions for layout
5
HTML Principles Platform, device, modality independence
hard to achieve in reality different browser, different rendering
Human-readable text format independence from an editing application
Standard conformance and evolution
6
HTML Standard What tags exist? How are the tags to be interpreted? How are the tags related to each other? How should the client respond to user interaction
with the page? Standard body is the World Wide Web Consortium
www.w3.org
7
Versions of the standard HTML 1.0
1993 never fully standardized
HTML 2.0 1994
HTML 3.2 1996 3.0 never released added tables, applets, text flow
HTML 4.0 1998
XHTML 1.0 current recommendation makes HTML conformant with XML
8
Browser Versions 27 available browser versions
all support different combinations of HTML features Current leaders
IE 6 IE 5 Firefox Opera
In this class We will concentrate on IE features Talk some about compatibility issues
9
Other rendering issues User’s monitor/device User preferences Browser capabilities
10
Terminology Document content
the parts of the file that the user sees Tag
HTML codes that control document appearance Attributes
properties associated with a tag Entities
specially-coded characters
11
Character Entities(Appendix B)
Code name Code Symbol< < <> > >
& & &© © ©® ® ®
  Non-breaking space@ @
· ●
12
Tag syntax Tags are case-insensitive
but all lower case is recommended required in XHTML
Tags are enclosed in angle brackets <html>
Tags typically come in pairs <title> </title>
Tags typically enclose document content <p>some text... </p>
Tags can only be nested <foo> <bar> </foo> </bar> illegal
13
Attribute syntax Attributes are name / value pairs included in tags
<body bgcolor=“black”> Attributes never include document content
may include formatting information color, size, etc.
HTML attributes should be quoted most browsers will render anyway
14
Tag types Document tags
identify the various parts of the document (Head, Body) Text structure tags
determine the layout of the text (lists, paragraphs) Style tags
tell the browser how to display the text Image tags
to incorporate images Anchor tags
to create hyperlinks
15
Document tags
<html> … </html> Mark the beginning and end of the html file
<head> … </head> Text in this part of the document is not displayed in the browser’s window. It includes other tags like <title> and <meta>
<title> … </title> Displayed in the browser’s title bar. It is used as the default bookmark description.
<body> … </body> The contents displayed in the browser’s window.
16
<html><head>
<title>IT 130: The bare minimum</title>
</head><body>Hello world</body></html>
The bare minimum
17
Actually
<title>Real bare minimum</title>Hello World!
18
HTML Comments
The comment feature provides you with a way to document your HTML files and make notes to yourself
Basic form <!-- + Comments + --> <!-- This is a comment -->
Do not include any embedded HTML code in commented text because the results are unpredictable
19
Text structure tags
Headings: <hx> … </hx> for 1 x 6The smaller x the larger the text
Paragraph: <p> … </p>A blank line is inserted before the paragraph.
Line Break: <br> Ordered lists: <ol> … </ol> Unordered lists: <ul> … </ul>
<html><head>
<title>Spacing example</title></head><body>
<h1>Important! (This is an H1)</h1><p>Notice that we have some text in this paragraph.</p>
<h3>Spacing test (this is an H3)</h3><p>Here I am spacing things widely.
It does not make a difference.
I just left two lines blank, but I am still here!</p>One line<br>Second line<br><p>Another paragraph!</p>
</body> </html>
Spacing example
21
Unordered lists
An unordered (or bullet) list uses the tag pair <ul> … </ul> Each item in the list is preceded by a single list item tag
<li> It produces an indented list with a browser-supplied character in
front of it (a small circle or a square) You can specify the type of symbol used by using the TYPE attribute
<ul type=“disc”> <li>item 1 </li></ul>
Other possible types are:square or circle
<html><head>
<title></title></head><body>
<h1>Here is an example of a list</h1>
<ul><li>First item </li><li>Second item </li>
</ul><ul type=“square”>
<li>Third item </li><li>Fourth item </li>
</ul>
</body></html>
Example
•First item•Second itemThird itemFourth item
23
Ordered lists
An ordered list uses the tag pair <ol>… </ol> Each item in the list is preceded by a single list
item tag <li>1. This also produces an indented list but the items are
ordered.2. The default is to order by numbers (like this)
Example <html><head>
<title> …. </title></head><body> <h1>Here is an example of a ordered list </h1>
<ol><li>First item </li><li>Second item </li>
</ol></body></html>
1. First item2. Second
item
25
Nested lists
Both ordered and unordered lists can be nested
This is done by starting a new list before the current list has ended
There is no limit to the number of levels of nesting
Use indenting in the source code to distinguish between each level of nesting
<html><head><title>ECT270 Lists</title></head><body><h1>To do list</h1>
<ol type =“A” ><li>Pick up dry cleaning<li>Clean the house
<ul> <li>Sweep the floors </li> <li>Take out garbage </li> <li>Clean kitchen </li></ul>
<li>Stop by post office<ul> <li>Get stamps
<ul> <li>Overseas airmail </li> <li>Domestic </li></ul>
<li>Mail package </li></ul>
</ol> </body></html>
List example
27
Style tags Tags that determine how text is to be
rendered undermine the separation between content /
display deprecated but widely used solution: cascading style sheets
more next week
28
Display style tags specify text properties directly italic
<i> bold
<b> font
<font> underlined
<u> bad idea
center <center>
29
Logical style tags describe text content
browser chooses rendering Emphasis
<em> usually italic
Strong <strong> usually bold
Code <code> monospaced font
30
Style example<html><head><title>Style example</title></head><body> <p><center><font color="red">Red text, centered</font></center></p> <p align="center"><font color="red">Red text, centered also</font></p> <p><font color="blue" size="+1" face="Arial, Helvetica, sans-serif">Blue text, larger,
in a sans-serif font</font></p> <p>Preformatted</p><pre>I can use space however I want10 spaces !</pre>Back to normal.<br></body></html>
31
Anchor tag (Hyperlinks)
<a> … </a> Used to create hyperlinks to other documents in the same Web site to different locations in the same document. to external Web sites
The attribute HREF indicates the destination of the link.
<a href= “url" > Clickable text </a>
32
Relative URLs Full URL
http://josquin.cs.depaul.edu/~rburke/foo.html Can be abbreviated in a link
<a href="foo.html"> The rest of the URL is filled in
from the URL of the current page
33
Relative paths What if the destination is not in the same directory
as the source We can use Unix path syntax for navigation
Elements /
go back up to the very top foo/
go down to a child directory named "foo" ..
go up to the parent directory
<a href=“it130/hw3.htm”>
<a href=“../main.htm”>
<a href=“../images/hw/hw2.jpg”>
Relative pathpublic_html
hw3.htm
it130
main.htm
images
hw2.jpg
Link main.htm to hw3.htm:
Link hw3.htm to hw2.jpg:
Link hw3.htm to main.htm:
hw
file1.htm
35
Structure Your local directory structure
where you are writing your web pages Must match the structure on the server
contents of public_html directory Otherwise
links will work when you test locally but not after being uploaded
36
Inserting a Graphic an inline image displays directly on the Web page and is
displayed when the page is accessed by a user an inline image can be placed on a separate line in your HTML
code, or it can be placed directly within a line of text inline images should be in one of several file formats. Most common
GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Net Graphics)
37
Image file formats
GIF (Graphic Interchange Format) To display clip art containing < 256 colors To create animated graphics To use transparency
JPG (Joint Photographic Expert Group) To display photographs To use images containing >256 colors To reduce the size of the image through file compression
PNG (Portable Net Graphics) A replacement for GIF Compressed More color depth α transparency
38
Image tag
Inline image: a picture file that is referenced in the HTML code and is loaded with the HTML file.
<img src ="photo.jpg" /> src attribute
URL is usually relative
If you want to retrieve an image from a different directory, you can add path information to the file name:
<img src=“images/photo.jpg” />
39
More image tag attributes
HEIGHT: specifies the height of the image in pixels WIDTH: specifies the width of the image in pixels
BORDER: determines the size of the border ALT: specifies the text displayed on-screen when the image
cannot be loaded ALIGN: enables text to flow around the image: at the TOP,
MIDDLE, or BOTTOM of the image. Also used to flush the image to the RIGHT or LEFT of the screen
40
Flowing Text
Use the align attribute to make text flow alongside an image:
<img src=“cat.jpg” align=“left” />
positions the image on the left side of the page and allows text to run down its right side
To center an image, use <p align=“center”><img src=“…”></p>
41
Image example<html><head></head><body><h1 align="center"> Martin Luther King, Jr. </h1><p> <img src="mlk.gif" align="right“ width=“336”
height=“400”>I have a dream that one day this nation will rise up and live out the
true meaning of its creed: "We hold these truths to be self-evident: that all men are created equal." …… I have a dream today. </p>
<p> I have a dream that one day the state of Alabama, whose governor's lips are presently dripping with the words of interposition and nullification, will be transformed into a …..</p>
…………</body></html>
42
Bandwidth
Image files are larger than text files Use more network resources (bandwidth)
Users who access the Internet via telephone lines will have to wait for image files estimate 7K / sec or less
Use image files no larger than 30-40KB especially on heavily used pages
Use "alt" text to describe images for users with image loading turned off
Use height and width to specify size
43
Image links
Anchors can be used to hyperlink images instead of text.<a href=“URL”><img src=“photo.jpg” alt=“My photo” /></a>
Whenever the mouse enters the clickable region, it will display the contents of the ALT attribute.
By default, clickable images have blue borders No blue border? Set the BORDER attribute inside the IMG
tag to 0. <a href=“URL”><img src=“photo.jpg” alt=“My photo” border=“0” /> </a>
44
Tables A table is a rectangular region
organized into rows and columns row-based definition
<table> element declares a table
<tr> element declares a row
<td> element declares a division (cell) within a row
45
More elements <caption>
declares a caption for the table <th>
declares a "header" cell usually bold and centered
46
Example<table> <caption>This is a table</caption> <tr>
<th>First Row</th> </tr> <tr>
<td>A1</td> </tr></table>
47
Border control border
attribute of table gives the width of the visible border set to 0 for "invisible" table
frame controls which sides of the table are framed default = "box", many other options
rules controls which directionality of borders default="all"
48
Table spacing cellspacing
space between cells cellpadding
space between cell text and cell border align
(as for images) text flow around table
49
Other table attributes bgcolor
background color for table width
pixels or % of browser window
height pixels or % of browser window
50
TR, TH and TD Share many table attributes
bgcolor width, height
% means % of table size align
horizontal alignment valign
vertical alignment
51
Table contents Must be row-by-row Table row element
with cells inside <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr>
52
Spanning A cell can span multiple rows or columns Attributes of td and th
colspan # of columns included
rowspan # of rows included
53
Span example
Cell spans two cols and two rows: <td rowspan=“2” colspan=“2”>
Cell spans three cols: <td colspan=“3”>
Cell spans ……………. <td …………….> Complete
54
Tables for layout A grid is the most common layout graphic
layout tool Early versions of HTML provided no layout
facilities logical structure only
Tables provided a grid-based mechanism to get layout in spite of HTML controversial but widely-used
55
Table-based layout cons Platform-dependent Difficult for alternative renderings
audio mobile platform
Contrary to HTML spirit There is now an "approved" way to do layout
style sheets
56
Next Week Monday
JavaScript Reed, Chapter 4 Quiz (HTML)
Wednesday Cascading style sheets W3School CSS Basic (on-line)
57
Homework #2 Work through the running example in
Chapter 2 Exercises 2.1-2.9 and 2.11
Homework = study for the quiz!