Fundamentals of Web Programming Lecture 4: HTML Basics I Lecture 4: HTML Basics I
Today’s Topics Tag Anatomy 101 Specific HTML Tags Document Structure Text-level Formatting Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
Anatomy of a Tag Keyword: the tag’s name Type: container or standalone 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 Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
Attributes Define content <IMG SRC=“pic.gif”> Modify effect <IMG SRC=“pic.gif” ALIGN=LEFT> Closed-value TOP|MIDDLE|BOTTOM|LEFT|RIGHT User-defined values character strings, integers, etc. Lecture 4: HTML Basics I
Document Structure Tags <HTML>, <HEAD>, <BODY> <BASE>, <META>, <LINK>, <SCRIPT>, <STYLE>, <TITLE> Lecture 4: HTML Basics I
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”> Lecture 4: HTML Basics I
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> Lecture 4: HTML Basics I
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”> Lecture 4: HTML Basics I
Tag: <BASE> Attributes only one attribute per tag instance two tags to set defaults for both HREF & TARGET Lecture 4: HTML Basics I
Tag: <BASE> Example <HEAD> <BASE HREF=“http://mysite/”> <BASE TARGET=“bigframe”> </HEAD> <BODY> <A HREF=“mypage.html”> </BODY> Lecture 4: HTML Basics I
Tag: <BASE> Equivalent to: <HEAD> </HEAD> <BODY> <A TARGET=“bigframe” HREF= “http://mysite/mypage.html”> </BODY> Lecture 4: HTML Basics I
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) Lecture 4: HTML Basics I
Tag: <META> Syntax: <META HTTP-EQUIV=“header” CONTENT=“value”> <META NAME=“name” CONTENT=“value”> Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
Tag: <META> Example <HEAD> <META HTTP-EQUIV=“Refresh” CONTENT=“10, URL=http://mysite/next.html”> <META NAME=“KEYWORDS” CONTENT=“web programming, Java”> </HEAD> Lecture 4: HTML Basics I
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”> Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
Tag: <LINK> Example: <HEAD> <LINK HREF=“style.css” REL=“Stylesheet”> <LINK HREF=“/index.html” REL=“Home”> </HEAD> Lecture 4: HTML Basics I
Tag: <SCRIPT> Type: container Function: contains script code referenced in the <BODY> Syntax: <SCRIPT LANGUAGE=“name”>… </SCRIPT> Lecture 4: HTML Basics I
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/javascript text/vbscript Lecture 4: HTML Basics I
Tag: <STYLE> Type: container Function: specifies style information for the document Syntax: <STYLE TYPE=“mime_type” MEDIA=“media_type” TITLE=“title”>… </STYLE> Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
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> Lecture 4: HTML Basics I
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> Lecture 4: HTML Basics I
Tag: <BODY> Type: container Function: contains all text and tags inside the document Lecture 4: HTML Basics I
Tag: <BODY> Syntax: <BODY BGCOLOR=“color” BACKGROUND=“image” LINK=“link_color” ALINK=“active_link_color” VLINK=“visited_link_color” TEXT=“text_color”> … </BODY> Lecture 4: HTML Basics I
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) Lecture 4: HTML Basics I
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) Lecture 4: HTML Basics I
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> Lecture 4: HTML Basics I
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> Lecture 4: HTML Basics I
Appearance Tags <TT>Fixed-width Chars</TT> <U>Underlined Text</U> Lecture 4: HTML Basics I
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> Lecture 4: HTML Basics I
Phrase Formatting <INS>new text</INS> <KBD>keyed input</KBD> <Q CITE=“url”>quote</Q> <SAMP>output</SAMP> <STRONG>emphasis!</STRONG> <VAR>variable</VAR> Lecture 4: HTML Basics I
Font Control <BASEFONT>, <FONT> Lecture 4: HTML Basics I
Tag: <BASEFONT> Type: standalone Function: set default size, color, typeface for <BODY> Syntax: <BASEFONT SIZE=“size” COLOR=“color” FACE=“list_typefaces”> Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
Tag: <BASEFONT> Example <BASEFONT SIZE=5 COLOR=“navy” FACE=“Arial,Helvetica”> Lecture 4: HTML Basics I
Tag: <FONT> Type: container Function: modify font properties of the contained text Syntax: <FONT SIZE=“size” COLOR=“color” FACE=“list_typefaces”>… </FONT> Lecture 4: HTML Basics I
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 Lecture 4: HTML Basics I
Tag: <FONT> Example <FONT SIZE=“+1” COLOR=“red”>Warning!</FONT> Lecture 4: HTML Basics I