COMS 161 Introduction to Computing Title: HTML Date: March 4, 2005 Lecture Number: 22
Announcements Spring break is finally here Be safe
Review Image Compression GIF Text Compression LZW
Outline HTML Network background Clients and servers HTTP WYSIWYG systems Frontpage Document structure Tags Block level Lists
Network Background The Web utilizes a client-server relationship The server contains web pages The client requests pages from the server
Clients and Servers Clients and servers communicate through the internet Necessary that clients and servers speak the same language Protocol Set of rules and conventions
HTTP Hyper Text Transfer Protocol (HTTP) Protocol web clients and servers use to communicate Most conversations between a web client and server sound like: Client: "Please send me the following file/document..." Server: "Here is the file you asked for..."
HTML The files/documents transferred may take many formats HTML Sounds Pictures Videos,... HTML Format specification for documents on the web Describes web page content and appearance
HTML Here is a sample of HTML . . . <UL> <LI> Most conversations between a web client and server sound like: <BLOCKQUOTE> <DL> <DT> Client: <DD>"Please send me the following file ..." <DT>Server: <DD>"Here is the file you asked for..." </DL> </BLOCKQUOTE>
Editing HTML Now a days there are web editors that allow you to make web pages without typing all the HTML format tags Composer (Netscape) Front page (MicroSoft) Many others They are WYSIWYG editors
WYSIWYG What You See Is Get
Front Page Allows you to see the HTML
HTML Basics Tags HTML markup entries are called TAGS HTML separates tags from text by bracketing them with "<" and ">" pairs "<P>" is the tag used at the start of a new paragraph "<HR>" is the tag used to make "horizontal rules" like this:
HTML Basics Opening and Closing Tags In many situations, a pair of matched tags is placed around the text to be modified <EM> this is important </EM> Requests that the enclosed phrase be emphasized this is important Closing tags are always formed by adding a "/" A tag together with any associated closing tag and enclosed text is called an ELEMENT
HTML Basics Attributes Many opening tags allow the author to add attributes that modify their behavior <HR NOSHADE> produces a horizontal rule without the common 3d look
HTML Basics Attribute values Many attributes require the specification of an argument value Set the width of a rule in points <HR WIDTH=300>
HTML Basics Attribute values Many attributes require the specification of an argument value Set the width of a rule in points <HR WIDTH="33%"> Quotes are required around attribute values containing "special characters"
HTML Basics Entities To include special characters like "<" as text, HTML provides a mechanism called entities An entity is specified by surrounding a name for the special character with an ampersand and a semicolon Entities Produces < > & & § §
HTML Basics Entities The complete list of HTML entities is online
HTML Document Structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> The "DOCTYPE" tag identifies the version of HTML that this document uses so that browsers interpret the content appropriately <! … > Is a comment Put notes to yourself about the document in comments
HTML Tags The first and last tags in a document should always be the HTML tags <HTML> </HTML> Tell a Web browser where the HTML in your document begins and ends Loading such a page into a Web browser would give you a blank screen It is technically a valid Web page Obviously, it is pretty boring and you'll want more than that
Head Tags <HEAD> ... </HEAD> Contain the document's header information Like the document’s title The "HEAD" section is used for tags that provide information to browsers & web index robots
Title Tags Container placed within the HEAD container Put the document’s title between the TITLE tags The title appears Browsers title bar History list Bookmark Title should indicate the document’s content Short and sweet
Body Tags <BODY> ... </BODY> The "BODY" section holds the text and tags that actually describe your web page The <BODY> tag itself supports attributes to set the background and text color Place all the stuff to display in your browser window between the BODY tags All text, graphics, links
Document So Far A document with a completely blank browser window The words "Document Title" would appear in the browser's history list <HTML> <HEAD> <TITLE> Document Title </TITLE> </HEAD> <BODY> </BODY> </HTML>
Document So Far Notice the document structure <HTML> <HEAD> <TITLE> Document Title </TITLE> </HEAD> <BODY> </BODY> </HTML>
More on Body Structure The body of a document is composed of block level elements Paragraphs Headings Tables Lists Horizontal rules
More on Body Structure Each block may contain simple text or text level element tags Control text styles (bold, italics, etc.) Create links Include images
Block Level The block level tags can be categorized according to what they can contain <HR> tag is an empty tag TEXT CONTAINERS The tags for headers, paragraphs and preformatted text can only contain "text" CONTAINER CONTAINERS Several tags can directly contain other blocks They are used for centering or indentation
Block Level SPECIALIZED CONTAINERS List and table tags cannot directly contain other blocks, but the tags used to build their elements can contain other blocks
The ALIGN Attribute Many of the block level tags accept an attribute, "ALIGN“ Controls the positioning of all the text or blocks enclosed by the tag ALIGN expects an attribute value of "LEFT", "CENTER" or "RIGHT" <HR WIDTH="50%" ALIGN=CENTER NOSHADE> <HR WIDTH="50%" ALIGN=RIGHT NOSHADE>
Headers and Paragraphs The <P> tag Indicates the start of a paragraph </P> ends the paragraph
Heading Tags Commonly used to set apart different sections of the document Belong in the BODY section Six different levels of headings <H1>Heading 1</H1> most important <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> least important
Heading Tags Browsers show headings with the same font but decreasing font size as the headers decrease in significance
Heading Tags Headings are meant for section titles They are defined as existing on a line by themselves Headings always begin at the margin of a line and always forces a line break at the end Don’t use heading tags to control font sizes
List Elements HTML provides an assortment of tags for organizing information to be displayed as a list < OL > is used to create an ordered list (this list of tags is formatted using < OL >) < UL > is used to create an unordered list Members of such lists are typically formatted with bullets < DL > is used to create a definition list Each member is a pair consisting of the term being defined and the definition
Ordered and Unordered Lists List items are specified with the <LI> tag < H3 > Topics < /H3 > < UL > < LI > HTML < /LI > < LI > TCP/IP < /LI > < /UL > < H3 > Topics < /H3 > < OL > < LI > HTML < /LI > < LI > TCP/IP < /LI > < /OL > The closing tag </LI> is optional
Ordered and Unordered Lists Bullet/numbering is controlled using the "TYPE" attribute in the < UL >, < OL >, or < LI > tags < H3 > Topics < /H3 > < UL TYPE=SQUARE> < LI > HTML < /LI > < LI > TCP/IP < /LI > < /OL > < H3 > Topics < /H3 > < OL TYPE=a > < LI > HTML < /LI > < LI > TCP/IP < /LI > < /OL >
Definition Lists Each member of a definition list requires 2 elements: The term defined is specified as a <DT> element (define term (DT)) The definition is specified as a <DD> element
Definition Lists <H4> Grade List </H4> <DL> <DT>Homework</DT> <DD>Work that should be done outside of the classroom </DD> <DT>Projects</DT> <DD>Significantly more work is require than a homework assignment</DD> </DL>
Links To make a link, include some text (or text-level element) between <A ...> and </A> tags The "A" stands for "Anchor". The target for the link is specified as the "A" tag's "HREF" attribute using an addressing format known as "Uniform Resource Locator" (URL) <A HREF="intro.html"> Start over </A>
URL Linking another HTML document or to include an image, it must be identified with a uniform resource locator (URL) http://www.hsc.edu/academics/math-cs/index.html http:// www.hsc.edu academics/math-cs index.html protocol host name file path file name
URL The protocol tells the browser how to communicate with the remote server when retrieving the target document HTTP Contact the web server FTP Use the file transfer protocol FILE Read a file from your own machine
URL The host name identifies the computer from which the target document should be retrieved Host names in the form found in URLs are also called domain names www.hsc.edu people.hsc.edu www.yahoo.com
URL The file path is a list of the names in the folder/directories containing the named file Slashes ("/") are always used to separate the folder/directory names The outermost directory comes first For simplicity, assume that names containing blanks or punctuation just won't work
URL The file name is just the name of the file containing the HTML description of the document to be displayed This name should end with .html or .htm If no file name is specified a file named index.html is used