1 / 52

Lecture 4

Lecture 4. HTML. Slides by L YNN W ARD , U NIVERSITY OF I LLINOIS. 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

cain
Download Presentation

Lecture 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 4 HTML Slides by LYNN WARD,UNIVERSITYOF ILLINOIS

  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

  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. 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!

  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

  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><AHREF="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 (/)

  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>

  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.)

  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

  10. <html> <head> <title>Lynn’s Home Page</title> </head> <body> this is my homepage and nobody else's. </body> </html> Form of an HTML Document

  11. Tags Defining Form • Paragraph <p>, line break <br>, horizontal rule <hr> • Lists (numbered <ol>…</ol>, bulleted <ul>…</ul>, etc.) • Headings<h1>…</h1> through <h6>...</h6> • Tables

  12. Tags Defining Form <body> This is normal text because it is This is normal text because it not surrounded by any tags. is not surrounded by any tags. This is a second paragraph. It <p> This is a second is separated from the first with a paragraph. It is separated paragraph tag. from the first with a paragraph tag. <p> Send comments to: <hr> L ynn W ard <p> email: lynnward@uiuc.edu Send comments to: <br> </body> L ynn W ard <br> e-mail: lynnward@uiuc.edu </body>

  13. Headings/Subheadings <body> first level heading; <h1> first level heading; title of document </h1> title of document <h2> second level heading </h2> second level heading <h3> third level heading </h3> third level heading <h4> and so fourth [sic] </h4> and so fourth [sic] <h5> fifth </h5> fifth <h6> sixth </h6> sixth </body>

  14. Ordered and Bulleted Lists

  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

  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

  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>

  18. <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 you want to control how the browser will render the text, you may chooseto use physical styles </body> 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 how the browser will render the text, you may choose to use physical styles Text Styles

  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

  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/filenamehttp://www.uiuc.edu/providers/senate/accal.html

  21. Inline Images • Graphic images that are displayed within the body of an HTML document. • Only two formats currently supported by most web browsers GIF JPEG • Basic syntax for inline image:<img src="path/filename" alt="description"><img src="URL" alt="description" >

  22. Inline Image <h1>Welcome to UIUC</h1> <p> <img src=guide.gif alt=“visitor’s guide” align=“left”> 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. 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.

  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

  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)

  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

  26. blah de blahde de blah lahde de blah lah de de blah blah lahde de blah de 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 blah de de blah blah lahde de blah <em>dfkjsdf</em> blah de blahde de blah lahde de blah lah de de blah blah lahde de blah de de blah blah lahde de blah <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 blah de de blah blah lahde de blah <p> <a name=“II”> <h2>II. Styling Text</h2> </a> Link and Target Anchor

  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

  28. Copying Images from the Web • Place mouse over image • Right-click to display drop-down menu • Choose “Save Images As…” or equivalent

  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

  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

  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

  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

  33. How Image Maps Work monitor.html cpu.html keyboard.html

  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>

  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.

  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

  37. HTML Tables • Adds tremendous power to page formatting • Good for • tabular data (data in neat rows and columns) • controlling page margins • page layout

  38. ONE TWO THREE FOUR How HTML Tables Work <TABLE> <TR><TD>ONE</TD> <TD>TWO</TD></TR> <TR><TD>THREE</TD><TD>FOUR</TD></TR> </TABLE>

  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

  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

  41. <FRAMESET COLS="216,*"> <FRAME SRC="menu.html” NAME= "MENU"> <FRAME SRC="main.html" NAME= "MAIN" > </FRAMESET> A Simple Example M E N U MAIN

  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

  43. Lect 1 Lect 2 Lect 3 Mapping Organizational Model to Page Hierarchy Home Lec- tures Chat Assign ments Quiz- zes Glos- sary

  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

  45. Aesthetics No-Nos • Blinking text • Large or wide graphics • Small fonts • Overly-animated pages • Loud backgrounds

  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

  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

  48. index.html index.html lectures lect1 lect2 lect3 index.html *.gif File Organization home readings announce assignments index.html *.gif

  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

  50. index.html lectures lect1 lect2 lect3 index.html sect2 stars.html Relative Path • Gives the location of the linked file “relative to” the file linking to it 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=“lect1/index.html”> <a href=“lect3/sect2/stars.html”>

More Related