1 / 43

Fundamentals of Web Programming

Fundamentals of Web Programming. Lecture 4: HTML Basics I. Today’s Topics. Tag Anatomy 101 Specific HTML Tags Document Structure Text-level Formatting. HTML: H yper T ext M arkup L anguage. Web pages are written in HTML HTML is plain text containing: HTML tags user-defined text fields

sydney
Download Presentation

Fundamentals of Web Programming

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. Fundamentals ofWeb Programming Lecture 4: HTML Basics I Lecture 4: HTML Basics I

  2. Today’s Topics • Tag Anatomy 101 • Specific HTML Tags • Document Structure • Text-level Formatting Lecture 4: HTML Basics I

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

  4. 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/offe.g. <I>italic text</I> • standalone: a single elemente.g. <IMG SRC=“pic.gif”> • Function: describe element / effect Lecture 4: HTML Basics I

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

  6. 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. Lecture 4: HTML Basics I

  7. Document Structure Tags • <HTML>, <HEAD>, <BODY> • <BASE>, <META>, <LINK>, <SCRIPT>, <STYLE>, <TITLE> Lecture 4: HTML Basics I

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

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

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

  11. Tag: <BASE> • Attributes • only one attribute per tag instance • two tags to set defaults for both HREF & TARGET Lecture 4: HTML Basics I

  12. Tag: <BASE> • Example<HEAD><BASE HREF=“http://mysite/”><BASE TARGET=“bigframe”></HEAD><BODY><A HREF=“mypage.html”></BODY> Lecture 4: HTML Basics I

  13. Tag: <BASE> • Equivalent to:<HEAD></HEAD><BODY><A TARGET=“bigframe” HREF=“http://mysite/mypage.html”></BODY> Lecture 4: HTML Basics I

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

  15. Tag: <META> • Syntax:<META HTTP-EQUIV=“header” CONTENT=“value”><META NAME=“name” CONTENT=“value”> Lecture 4: HTML Basics I

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

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

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

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

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

  21. Tag: <LINK> • Example:<HEAD><LINK HREF=“style.css” REL=“Stylesheet”><LINK HREF=“/index.html” REL=“Home”></HEAD> Lecture 4: HTML Basics I

  22. Tag: <SCRIPT> • Type: container • Function: contains script code referenced in the <BODY> • Syntax:<SCRIPT LANGUAGE=“name”>… </SCRIPT> Lecture 4: HTML Basics I

  23. 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 Lecture 4: HTML Basics I

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

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

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

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

  28. Tag: <BODY> • Type: container • Function: contains all text and tags inside the document Lecture 4: HTML Basics I

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

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

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

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

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

  34. Appearance Tags • <TT>Fixed-width Chars</TT> • <U>Underlined Text</U> Lecture 4: HTML Basics I

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

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

  37. Font Control • <BASEFONT>, <FONT> Lecture 4: HTML Basics I

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

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

  40. Tag: <BASEFONT> • Example<BASEFONT SIZE=5 COLOR=“navy” FACE=“Arial,Helvetica”> Lecture 4: HTML Basics I

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

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

  43. Tag: <FONT> • Example<FONT SIZE=“+1” COLOR=“red”>Warning!</FONT> Lecture 4: HTML Basics I

More Related