Fundamentals of Web Programming

120-753: Fundamentals of Web Programming

Lecture 4: HTML Basics I

Copyright © 1999, Carnegie Mellon. All Rights Reserved.

Fundamentals ofWeb Programming





Today’s Topics

• Tag Anatomy 101• Specific HTML Tags

– Document Structure– Text-level Formatting




HTML: HyperText Markup Language

• Web pages are written in HTML• HTML is plain text containing:

– HTML tags– user-defined text fields

• Tags = Markup• Hypertext = Tagged Text

– specifically, with anchor <A> tags linking to other documents




Anatomy of a Tag

• Keyword: the tag’s name– e.g., the keyword of the <I> tag is ‘I’

• Type: container or standalone– container: turn an effect on/off

e.g. <I>italic text</I>– standalone: a single element

e.g. <IMG SRC=“pic.gif”>

• Function: describe element / effect




Anatomy [2]

• Syntax: rules which define how the tag is constructed

• Attributes– modify the tag’s effect or element– closed-value vs. user-defined values– required vs. optional

• Sample Use• Related Tags




Attributes

• Define content<IMG SRC=“pic.gif”>

• Modify effect<IMG SRC=“pic.gif” ALIGN=LEFT>

• Closed-valueTOP|MIDDLE|BOTTOM|LEFT|RIGHT

• User-defined values– character strings, integers, etc.




Document Structure Tags

• <HTML>, <HEAD>, <BODY>• <BASE>, <META>, <LINK>,

<SCRIPT>, <STYLE>, <TITLE>




Tag: <HTML>

• Type: container• Function: declares document to be

HTML; all content contained inside• Syntax: <HTML>…</HTML>• Attributes: none• Related Tags: <!DOCTYPE>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>




Tag: <HEAD>

• Type: container• Function: contains tags comprising

the document head• Syntax: <HEAD>…</HEAD>• Attributes: none• Related Tags: <BASE>,

<ISINDEX>, <LINK>, <META>, <SCRIPT>, <STYLE>, <TITLE>




Tag: <BASE>

• Type: standalone• Function: set global HREF, TARGET

– HREF used when computing relative URL references

– TARGET used when computing frame references for linked documents

• Syntax: <BASE HREF=“base_URL”><BASE TARGET=“frame_name”>




Tag: <BASE>

• Attributes– only one attribute per tag instance– two tags to set defaults for both HREF

& TARGET




Tag: <BASE>

• Example<HEAD><BASE HREF=“http://mysite/”><BASE TARGET=“bigframe”></HEAD><BODY><A HREF=“mypage.html”></BODY>




Tag: <BASE>

• Equivalent to:<HEAD></HEAD><BODY><A TARGET=“bigframe” HREF=“http://mysite/mypage.html”></BODY>




Tag: <META>

• Type: standalone• Function:

– declares document meta-information: keywords, expiration date, author, page generator, etc.

– also used to implement client pull (dynamic update after a delay)




Tag: <META>

• Syntax:

<META HTTP-EQUIV=“header” CONTENT=“value”>

<META NAME=“name” CONTENT=“value”>




Tag: <META>

• Attributes:– HTTP-EQUIV - specify type of HTTP

header to send with the document; commonly REFRESH or EXPIRES

– NAME - specifies the document meta-variable you wish to specify: AUTHOR, KEYWORDS, GENERATOR, DESCRIPTION




Tag: <META>

• Attributes (cont.):– SCHEME - information on how to

interpret the meta-variable– CONTENT - specifies either the HTTP

header or the value of the meta-variable




Tag: <META>

• Example<HEAD><META HTTP-EQUIV=“Refresh” CONTENT=“10, URL=http://mysite/next.html”><META NAME=“KEYWORDS” CONTENT=“web programming, Java”></HEAD>




Tag: <LINK>

• Type: standalone• Function: denotes the linking

relationship between two files• Syntax:

<LINK HREF=“linked_file” TITLE=“title” REL=“forward_rel” REV=“reverse_rel”>




Tag: <LINK>

• Attributes:– HREF - URL of the file referred to– TITLE - give the link a description– REL - relation from this to that– REV - relation from that to this




Tag: <LINK>

• Example:<HEAD><LINK HREF=“style.css” REL=“Stylesheet”><LINK HREF=“/index.html” REL=“Home”></HEAD>




Tag: <SCRIPT>

• Type: container• Function: contains script code

referenced in the <BODY>• Syntax:

<SCRIPT LANGUAGE=“name”>… </SCRIPT>




Tag: <SCRIPT>

• Attributes:– DEFER - browser can render first– LANGUAGE - what scripting language

(deprecated)– SRC - URL of (remote) script code– TYPE - MIME type of script code

(required in HTML 4.0)text/javascripttext/vbscript




Tag: <STYLE>

• Type: container• Function: specifies style

information for the document• Syntax:

<STYLE TYPE=“mime_type” MEDIA=“media_type” TITLE=“title”>… </STYLE>




Tag: <STYLE>

• Attributes:– MEDIA - what media types the styles

are to be used for (visual browser, speech-based browser, Braille, etc.)

– TITLE - provide a descriptive label– TYPE - content type for the style

language




Tag: <STYLE>

• Example:<STYLE TYPE=“text/css1”>H1 {font: 16 pt Palatino; color: blue}H2 {font: 14 pt Palatino; color: AA4D60}H3 {font: 12 pt Palatino; color: black; font-weight: bold}</STYLE>




Tag: <TITLE>

• Type: container• Function: give the document a

descriptive title (used in history list, title bar, bookmarks, etc.

• Syntax: <TITLE>… </TITLE>• Attributes: none• Example:

<TITLE>Web Site Tips</TITLE>




Tag: <BODY>

• Type: container• Function: contains all text and tags

inside the document




Tag: <BODY>

• Syntax:<BODY BGCOLOR=“color” BACKGROUND=“image” LINK=“link_color” ALINK=“active_link_color” VLINK=“visited_link_color” TEXT=“text_color”> … </BODY>




Colors

• Color attributes can be:– one of the 16 reserved color names:

BLACK, WHITE, AQUA, SILVER, GRAY, MAROON, RED, PURPLE, FUSCHIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL

– specified by an RBG hexadecimal triplet: e.g., #FFFFFF (white)




Tag: <BODY>

• Attributes:– ALINK - link color when clicked– BACKGROUND - URL of an image to

use (will be tiled to fit)– BGCOLOR - background color– LINK - link color (unvisited)– TEXT - default text color– VLINK - link color (visited)




Text-Level Format Tags

• <B>, <BASEFONT>, <BIG>, <FONT>, <I>, <S>, <SMALL>, <SUB>, <SUP>, <TT>, <U>, <ACRONYM>, <ADDRESS>, <CITE>, <CODE>, <DEL>, <DFN>, <EM>, <INS>, <KBD>, <Q>, <SAMP>, <STRONG>, <VAR>




Appearance Tags

• <B>Bold Text</B>• <BIG>Bigger Text</BIG>• <I>Italic Text</I>• <S>Stricken Text</S>• <SMALL>Smaller Text</SMALL>• <SUB>Subscript</SUB>• <SUP>Superscript</SUB>




Appearance Tags

• <TT>Fixed-width Chars</TT>• <U>Underlined Text</U>




Phrase Formatting

• <ACRONYM>HTML</ACRONYM>• <ADDRESS>email</ADDRESS>• <CITE>citation</CITE>• <CODE>Code Sample</CODE>• <DEL>deleted text</DEL>• <DFN>defining instance</DFN>• <EM>Emphasized Text</EM>




Phrase Formatting

• <INS>new text</INS>• <KBD>keyed input</KBD>• <Q CITE=“url”>quote</Q> • <SAMP>output</SAMP>• <STRONG>emphasis!</STRONG>• <VAR>variable</VAR>




Font Control

• <BASEFONT>, <FONT>




Tag: <BASEFONT>

• Type: standalone• Function: set default size, color,

typeface for <BODY>• Syntax:

<BASEFONT SIZE=“size” COLOR=“color” FACE=“list_typefaces”>




Tag: <BASEFONT>

• Attributes:– COLOR - one of 16 reserved names or

an RGB hexadecimal triplet– FACE - list of typefaces (uses first

available)– SIZE - integer value from 1 to 7

(default is 3); mapped to point size by browser according to user preferences




Tag: <BASEFONT>

• Example<BASEFONT SIZE=5 COLOR=“navy” FACE=“Arial,Helvetica”>




Tag: <FONT>

• Type: container• Function: modify font properties of

the contained text• Syntax:

<FONT SIZE=“size” COLOR=“color” FACE=“list_typefaces”>… </FONT>




Tag: <FONT>

• Attributes: – COLOR - one of 16 reserved names or

an RGB hexadecimal triplet– FACE - list of typefaces (uses first

available)– SIZE - integer value from 1 to 7; or

increment / decrement relative to base font




Tag: <FONT>

• Example<FONT SIZE=“+1” COLOR=“red”>Warning!</FONT>

Fundamentals of Web Programming

Documents