lecture 4 html slides by l ynn w ard,u niversity of i llinois
Post on 21-Dec-2015
216 views
TRANSCRIPT
Lecture 4Lecture 4
HTMLSlides by LYNN WARD,UNIVERSITY OF ILLINOIS
4.2
What is HTML (HyperText Markup Language)?
• A standard collection of codes or "tags" used for styling and formatting text and defining links in documents prepared for the World Wide Web
• HTML defines how the document will look on the screen and/or printed page
• HTML tags are similar to embedded word-processor codes, but do not allow for as fine control
4.3
Options for Working with HTML
• Plain text editor (vi, pico, DOS edit, Windows NotePad)
• Text-based HTML editor (inserts tags via menus and buttons)
• WYSIWYG Editor (works like word processor; don’t work directly with tags)
• Netscape Gold - free, WYSIWYG editor• Save as HTML from a word processor
4.4
Why Learn HTML Coding?
• Your WYSIWYG editor may not be able to do everything you want
• To update and tweak documents that are already on line
• To learn how others achieve certain effects (view source)
• Because it’s good for the soul!
4.5
About HTML Tags
• All HTML tags are surrounded by angle brackets:<tagname>
• HTML tags are not case sensitive (you can mix upper and lowercase) except when typing out directory and filenames
4.6
Paired versus Empty Tags
• Most HTML tags are paired, consisting of "start" tag and an "end" tag. Paired tags surround a block of text and affect that block only
<B>word</B><A HREF="http:/www.uiuc.edu"> this is a
hypertext link</A>• The end tag is identical to the start tag, but is
preceded by a slash (/)
4.7
More About Paired Tags
• When multiple tags surround a block of text, they should be nested (one pair inside the other) rather than sequential; i.e., first on--last off):
Correct: <PRE><I>word</I></PRE>
Incorrect: <PRE><I>word </PRE></I>
4.8
Empty HTML Tags
• Empty tags have a start tag but no end tag• Most end tags affect overall form rather than
styles for text blocks<p> paragraph marker<hr> horizontal rule<br> line break<li> list item
• Some empty tags can also be paired, but an end tag is not required (<p>...</p>; <li>...</li>; etc.)
4.9
Form of an HTML Document
• Head – With the exception of the title, elements contained in
the head of the document are not displayed; title is displayed in title bar or special field
– contains title of document as well as information about the history of the document and its relationship to other documents
• Body– contains the text and tags to be displayed and/or
printed
4.10
Form of an HTML Document
<html><head><title>Lynn’s Home Page</title></head>
<body>this is my homepage and nobody else's.</body>
</html>
4.11
• Paragraph <p>, line break <br>, horizontal rule <hr>
• Lists (numbered <ol>…</ol>, bulleted <ul>…</ul>, etc.)
• Headings <h1>…</h1> through <h6>...</h6>
• Tables
Tags Defining Form
4.12
Tags Defining Form
This is normal text because it is not surrounded by any tags. This is a second paragraph. It is separated from the first with a paragraph tag. Send comments to: Lynn Ward email: [email protected] </body>
<body> This is normal text because it is not surrounded by any tags. <p>This is a second paragraph. It is separated from the first with a paragraph tag. <p> <hr> <p> Send comments to:<br> Lynn Ward <br> e-mail: [email protected] </body>
4.13
Headings/Subheadings
<body> <h1>first level heading; title of document</h1> <h2>second level heading</h2> <h3>third level heading</h3> <h4>and so fourth [sic]</h4> <h5>fifth</h5> <h6>sixth</h6> </body>
first level heading; title of document second level heading third level heading and so fourth [sic]
fifth sixth
4.14
Ordered and Bulleted Lists
<body> <ol> <li>this is item number one <li>this is number two <li>number three, and so on </ol> <p> <ul> <li>this is the first <li>the second <li>the third <p> <li>the fourth </ul> </body>
1. this is item number one 2. this is number two; the text will wrap to the next line with a hang- ing indent 3. number three, and so on • this is the first • the second • the third • the fourth
<body> <ol> <li>this is item number one <li>this is number two <li>number three, and so on </ol> <p> <ul> <li>this is the first <li>the second <li>the third <p> <li>the fourth </ul> </body>
1. this is item number one 2. this is number two; the text will wrap to the next line with a hang- ing indent 3. number three, and so on • this is the first • the second • the third • the fourth
4.15
Tags for Styling Text
• There are two types of style characteristics that can be applied to text:– Logical Styles - specify meaning or function of the
tagged block; the Web browser determines actual appearance
– Physical Styles - specify the appearance of the tagged block; always rendered in more or less the same way
• Most HTML guides recommend using logical styles instead of physical whenever possible
4.16
Logical Styles
• Emphasis (paired) - <em>…</em> - usually displayed in italics
• Strong emphasis (paired) - <strong>…</strong> - usually displayed in boldface
• Citation (paired) - <cite>…</cite> - for books titles, etc.; usually displayed in italics
• Keyboard entry (paired) - <kbd>…</kbd> - used to instruct the reader what to type on the keyboard (computer input); usually displayed in a fixed width font such as Courier
4.17
Physical Styles
• Boldface (paired) - <b>…</b> - displays text in boldface
• Italics (paired) - <i>…</i> - displays text in italics
• Underline (paired) - <u>…</u>• Typewriter Text (paired) - <tt>…</tt> -
displays text in a fixed width font• Font size, color, etc. <font …>…</font>
4.18
Text Styles
To emphasize text in HTML, you can either use the bold tags or emphasis tags. In NCSA’s A Beginner's Guide to HTML, logical styles are recommended over physical styles. How-ever, if you want to control howthe browser will render the text,you may choose to use physicalstyles
<body>To emphasize text in HTML, you can either use the <b>bold</b>tags or <em>emphasis</em> tags.In NCSA’s <cite> A Beginner's Guide to HTML</cite>, logical styles are recommended over physical styles. However, if youwant to control how the browser will render the text, you maychoose to use physical styles</body>
4.19
HTML Formatting Quirks
• Multiple tabs or spaces are rendered as a single space (exception is preformatted text within <pre>...</pre> tags)
• Hard returns are ignored. HTML paragraphs are separated from one another with the <p> tag (exception within <pre>...</pre> tags)
• Line length is determined by the current Window size of the browser unless you use the <br> tag
4.20
What’s a URL
• Uniform Resource Locator
• Defines the protocol (application/scheme), location, and name of the resource
• Usual format is:
scheme://domain.name[:port]/path/filename
http://www.uiuc.edu/providers/senate/accal.html
4.21
Inline Images
• Graphic images that are displayed within the body of an HTML document.
• Only two formats currently supported by most web browsers
GIFJPEG
• Basic syntax for inline image:<img src="path/filename" alt="description">
<img src="URL" alt="description" >
4.22
Inline Image
<h1>Welcome to UIUC</h1><p><img src=guide.gif alt=“visitor’sguide” align=“left”>We are pleased to provide you this convenient and interactiveway to learn more about our campus, and community. And we are proud to be among the most popular world wide web sites on the Internet.
Welcome to UIUC
We are pleased to provide you this convenient and interactive way to learn more about our campus, and community. And we are proud to be among the most popular world wide web sites on the Internet.
4.23
HyperText Links/Anchors
• Block of text or image is linked to another document or resource
• The text block or image is called an anchor because it anchors the link to a specific location in the document:
Go to the main <a href="http://www.uiuc.edu"> UIUC Web Server</a>
• Two types of anchors:– link anchor– target anchor
4.24
Link Anchor
• Also called HyperText Reference (HREF)
• Link anchor: <a href="url">link anchor text</a>
• Link anchors can link to:– a different document– to an entirely different type of network resource – a specific location in the same document or in a different
document (requires a target anchor)
4.25
Target Anchor
• Also called a NAMEd anchor <a name=…> because it assigns a name to the block of text or image that is the destination of a hypertext link
• The link anchor points to the target anchor; preceded by a #
• The target anchor is the destination of the link anchor
• The target anchor is invisible; does not display or print
4.26
Link and Target Anchor
<h3>Table of Contents</h3><a href=“#I”> I. Getting Started</a><br><a href=“#II”>II. Styling Text</a><br><a href=“#III”>III. Making Links</a><br><p><a name=“I”> <h2>I. Getting Started</h2></a>blah de blahde de blah lahde de blah lah de de blah blah lahde de blahde de blah blah lahde de blah<p><a name=“II”> <h2>II. Styling Text</h2></a>
blah de blahde de blah lahde de blah lah de de blah blah lahde de blahde de blah blah lahde de blah<p><a name=“III”> <h2>III. Making Links</h2></a>blah de blahde de blah lahde de blah lah de de blah blah lahde de blahde de blah blah lahde de blah <em>dfkjsdf</em> blah de blahdede blah lahde de blah lah de de blah blah lahde de blahde de blah blah lahde de blah
4.27
Working With Images
• Copying Images from the Web
• Image Formats for the Web
• Making Images Smaller
• Making an Image Transparent
• Working with Image Maps
• Anti-aliasing
4.28
Copying Images from the Web
• Place mouse over image
• Right-click to display drop-down menu
• Choose “Save Images As…” or equivalent
4.29
Image Formats for the Web
• GIF (Graphics Interchange Format– limited to 256 colors (8-bit)– compression– animation
• JPEG (Joint Photographic Experts Group)– up to 16 million colors (24-bit)– lossy compression
• GIF is normally used for small icon-like images, JPEG for real-live photos
4.30
Making Images Smaller
• Play with image editors and format convertors
• To reduce file size:– Reduce number of colors (color depth)– Save as JPEG and increase compression
ratio
4.31
Transparent Images
• Image background is transparent and takes on background color of page
• Most graphics programs include option of saving transparency information with GIF images
4.32
Image Maps
• Inline image and associated HTML map
• Map identifies geometric shapes in image with pixel coordinates
• Each shape is associated with a URL• Clicking inside the shape moves
browser to URL• Example
4.33
How Image Maps Work
monitor.html
keyboard.htmlcpu.html
4.34
Image Map Syntax
<IMG SRC= "URL/filename" WIDTH=432 HEIGHT=432 BORDER="0" USEMAP="#mapname"><MAP NAME="mapname"><AREA SHAPE=RECT COORDS= "X,Y,X,Y" HREF= "URL/filename" ><AREA SHAPE=POLY COORDS="X,Y1, X,Y2,X,Y3..." HREF= "URL/filename" ><AREA SHAPE=CIRCLE COORDS="XCenter, YCenter, RADIUS" HREF="URL/filename"></MAP>
<IMG SRC= "URL/filename" WIDTH=432 HEIGHT=432 BORDER="0" USEMAP="#mapname"><MAP NAME="mapname"><AREA SHAPE=RECT COORDS= "X,Y,X,Y" HREF= "URL/filename" ><AREA SHAPE=POLY COORDS="X,Y1, X,Y2,X,Y3..." HREF= "URL/filename" ><AREA SHAPE=CIRCLE COORDS="XCenter, YCenter, RADIUS" HREF="URL/filename"></MAP>
4.35
Publishing Web Pages
• Publicly accessible Web pages must reside on a Web (HTTP) server
• Many different methods for moving files from desktop to server
• Most common method is FTP (the Internet File Transfer Protocol)
• Here we can place files of the web page in public_html directory with copy command.
4.36
Publishing with FTP
• Generic FTP client (Fetch for Mac, WS-FTP for Windows)
• Some Web authoring tools have built-in FTP-based publishing
• What you need to know:– server name - username– password - path name for Web– URL for accessing Web
• HTML=text/ASCII GIF=binary
4.37
HTML Tables
• Adds tremendous power to page formatting
• Good for– tabular data (data in neat rows and columns)– controlling page margins– page layout
4.38
How HTML Tables Work
<TABLE>
<TR> <TD>ONE</TD> <TD>TWO</TD> </TR>
<TR> <TD>THREE</TD> <TD>FOUR</TD> </TR>
</TABLE>
ONE TWO
THREE FOUR
4.39
HTML Tables
• Table data can be text or images
• Additional tags allow for:– data spanning row(s) or column(s)– controlling border width– vertical and horizontal alignment of data
4.40
HTML Frames
• A method for breaking up a browser window into multiple “panes”
• Each pane holds a different document
• Often clicking on link in one pane opens a new document in another
• Older browsers do not support frames
4.41
A Simple Example
<FRAMESET COLS="216,*"> <FRAME SRC="menu.html” NAME= "MENU"> <FRAME SRC="main.html" NAME= "MAIN" ></FRAMESET>
MAIN
MENU
4.42
Navigation
• Keep site navigation easy, intuitive, shallow• Link to home on every page• Visual cues
– recurring navigation bar (text or graphical)– color coded site areas– menu system (frames, tables, plain text)– site map
4.43
Mapping Organizational Model to Page Hierarchy
Home
Lec-tures
ChatAssignments
Quiz-zes
Glos-sary
Lect1
Lect2
Lect3
4.44
Aesthetics
• Try for a balance of unity and variety
• Give your pages a consistent look and feel
• Break up the page in interesting ways
• Blend text with graphics
4.45
Aesthetics No-Nos
• Blinking text
• Large or wide graphics
• Small fonts
• Overly-animated pages
• Loud backgrounds
4.46
Good Habits
• Always provide alternative text for inline images
• Test all links after you upload your pages• View your document with multiple
browsers• Keep download time to a minimum• Do not use Java and JavaScript unless
really necessary
4.47
File Organization
• Most sites begin with little or no planning for how files will be organized
• Later changes can require editing all links
• Organizing your files is as important as your site’s logical organization
4.48
File Organization
index.html
home
index.html
lectures
lect1 lect2 lect3
index.html *.gif
assignments
index.html *.gif
readings announce
4.49
Relative vs. Absolute Paths vs. URLs
• When a page links to another file on the same server, there are three ways to define the link– relative path– absolute path from Web root
(/path/filename.html)– URL
• Generally relative paths are preferred because site can be moved with no adjustments
4.50
sect2
stars.html
Relative Path
• Gives the location of the linked file “relative to” the file linking to it
index.html
lectures
lect1 lect2 lect3
index.html
When linking to a file in a directory beneath the current directory, list the one or more directory names that lead to the file without a leading slash:
<a href=“lect3/sect2/stars.html”><a href=“lect3/sect2/stars.html”>
<a href=“lect1/index.html”><a href=“lect1/index.html”>
4.51
Linking Up with Relative Paths
When linking to a file in a directory above the current directory, each directory above the current directory should be represented with double dots followed by a slash (../).
index.html
lectures
lect1 lect2 lect3
index.html sect2
stars.html <a href=“../../index.html”><a href=“../../index.html”>
<a href=“../index.html”><a href=“../index.html”>
4.52
Linking Over with Relative Paths
When linking to a file in a directory on a different branch of the tree, use double-dots to move up to a common parent directory and then progress down the directories to the file on the other branch
index.html
lectures
lect1 lect2 lect3
index.html sect2
stars.html <a href=“../../lect1/index.html”><a href=“../../lect1/index.html”>