HTML-1.pdf

core Web programming HyperText Markup Language (HTML) Designing Documents for the World Wide Web 1 © 2001-2003 Marty Hall, Larry Brown http://www.core...

core Web programming HyperText Markup Language (HTML) Designing Documents for the World Wide Web 1 © 2001-2003 Marty Hall, Larry Brown http://www.corewebprogramming.com Agenda Introduction to HTML Creating and publishing a Web page Validating a document Main HMTL elements Block-level HTML elements Text-level HTML element Creating hypertext links Adding images to documents Building tables 2 HTML www.corewebprogramming.com 1  The World Wide Web Definitions – The World Wide Web The set of computers on the Internet that support HTTP Not a separate network – HTTP The HyperText Transfer Protocol The language used by a WWW client (e.g. Netscape, Internet Explorer) to request documents from a WWW server (i.e. the program running at Web sites like amazon.com or yahoo.com) – HTML The HyperText Markup Language The language used to design web pages 3 HTML www.corewebprogramming.com HyperText Markup Language Text Mixed with Markup Tags – Tags Enclosed in Angle Brackets (Introduction) What Does Markup Describe? – Appearance – Layout – Content (Can’t Enforce an Exact Look) Changes in HTML 3.2 to HTML 4.0 – Standardization of frames – Deprecation of formatting elements (vs. style sheets) – Improved cell alignment and grouping in tables – Mouse and keyboard events for nearly all elements – Internationalization features 4 HTML www.corewebprogramming.com 2  HTML Example Home Page for Lawrence M. Brown Home Page for Lawrence M. Brown Senior Network Engineer Naval Surface Warfare Center 9500 MacArthur Boulevard West Bethesda, Maryland, MD 20817-5700 email: [email protected] Phone: (301) 277-4648 This is my personal home page. For more specific programming-related resources pages, please see: 5 HTML www.corewebprogramming.com Creating and Publishing a Web Page 1. Create an HTML document 2. Place the document in a world-accessible directory (often public_html or www) on a system running an HTTP server Unix> cd Unix> chmod a+x. (Note the ".") Unix> mkdir public_html Unix> chmod a+x public_html 3. Access the web page through http://hostname/~username/filename E.g. http://www.apl.jhu.edu/~lmb/test.html – If the filename is omitted, a system default filename is assumed (often index.html) E.g. http://www.apl.jhu.edu/~hall/ refers to the file index.html in hall’s public_html directory 6 HTML www.corewebprogramming.com 3  Creating and Publishing a Web Page, cont. 4.Validate the Document – Check the syntax using a formal HTML validator http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/ – The version of HTML against which the document is validated is based on the DOCTYPE – The WWW Consortium recently added advice that Web pages include information on the character set, even though ASCII or Latin-1 is the default. The validator at http://validator.w3.org/ gives warnings if you omit this. You can ignore such warnings if you wish. 7 HTML www.corewebprogramming.com HTML Document Template 8 HTML www.corewebprogramming.com 4  Main HTML Elements 1.DOCTYPE 2.HTML 3.HEAD – TITLE element required – Optional elements: BASE META BGSOUND SCRIPT, NOSCRIPT STYLE LINK 9 HTML www.corewebprogramming.com Main HTML Elements (Continued) 4.BODY Element – – HTML Attributes and Attribute Values BACKGROUND BGCOLOR TEXT LINK, VLINK, ALINK OnLoad, OnUnload, OnFocus, OnBlur 5.Elements inside BODY element – Remaining HTML elements 10 HTML www.corewebprogramming.com 5  META Element Records document information, forwards and refreshes pages – NAME="author" – NAME="keywords" – NAME="description" – HTTP-EQUIV="refresh" 11 HTML www.corewebprogramming.com META Element, Example News Headlines News Headlines National News Blah, blah, blah. International News Yadda, yadda, yadda. 12 HTML www.corewebprogramming.com 6  Block-Level Elements Headings – H1... H6 – ALIGN Basic Text Sections – P – ALIGN – PRE – WIDTH – ADDRESS – BLOCKQUOTE 13 HTML www.corewebprogramming.com Block-Level Elements, cont. Lists – OL – LI – UL – LI – DL – DT – DD Tables and Forms (Postponed) Misc. – HR – DIV – CENTER – MULTICOL (Netscape only) www.corewebprogramming.com 14 HTML 7  Headings Heading Types –... –... –... –... –... –... Attributes: ALIGN – Values: LEFT (default), RIGHT, CENTER Nesting tags – Headings and other block-level elements can contain text-level elements, but not vice versa 15 HTML www.corewebprogramming.com Headings, Example Document Headings Samples of the six heading types: Level-1 (H1) Level-2 (H2) Level-3 (H3) Level-4 (H4) Level-5 (H5) Level-6 (H6) 16 HTML www.corewebprogramming.com 8  Headings, Result 17 HTML www.corewebprogramming.com P – The Basic Paragraph Attributes: ALIGN – LEFT (default), RIGHT, CENTER. Same as headings. – Whitespace ignored (use for line break) Consecutive ’s do not yield multiple blank lines – End Tag is Optional: Paragraph 1 Paragraph 1 Paragraph 2 Paragraph 2 Paragraph 3 Equivalent with Implied Tags Paragraph 3 18 HTML Fully-Specified www.corewebprogramming.com 9  Preformatted Paragraphs The PRE Element –... Attributes: WIDTH – Expected width in characters. Not widely supported. Problem: Special Characters if (a > & & doThat(); " " } Non-breaking space   19 HTML www.corewebprogramming.com OL: Ordered (Numbered) Lists OL Element – … …... – Attributes: TYPE, START, COMPACT List entries: LI –... (End Tag Optional) – Attributes: (When inside OL) VALUE, TYPE A sample list: List Item One List Item Two List Item Three 20 HTML www.corewebprogramming.com 10  Nested Ordered Lists Headings Basic Text Sections Lists Ordered The OL tag TYPE START COMPACT The LI tag Unordered The UL tag The LI tag Definition The DL tag The DT tag The DD tag Miscellaneous www.corewebprogramming.com 21 HTML UL: Unordered (Bulleted) Lists UL Element – … …... Attributes: TYPE, COMPACT – TYPE is DISC, CIRCLE, or SQUARE List entries: LI (TYPE) – TYPE is DISC, CIRCLE, or SQUARE A sample list: List Item One List Item Two List Item Three 22 HTML www.corewebprogramming.com 11  UL: Custom Bullets The UL tag TYPE DISC CIRCLE SQUARE COMPACT The LI tag TYPE DISC CIRCLE SQUARE VALUE 23 HTML www.corewebprogramming.com Text-Level Elements Physical Character Styles – B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINK – FONT SIZE COLOR FACE – BASEFONT – SIZE Logical Character Styles – EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE 24 HTML www.corewebprogramming.com 12  Text-Level Elements (Continued) Hypertext Links –A HREF, NAME, TARGET,... Images – IMG SRC (required), ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAP Misc. Text-Level Elements – BR (Explicit line break) – AREA (Client-side image maps) – APPLET (Java) –... 25 HTML www.corewebprogramming.com Physical Character Styles, Example... Physical Character Styles Bold Italic Teletype (Monospaced) Underlined Subscripts: f0 + f1 Superscripts: x2 + y2 Smaller Bigger Strike Through Bold Italic Big Monospaced Small Italic Gray Delete Insert... 26 HTML www.corewebprogramming.com 13  Physical Character Styles, Result 27 HTML www.corewebprogramming.com Logical Character Styles, Example... Logical Character Styles Emphasized Strongly Emphasized Code Sample Output Keyboard Text Definition Variable Citation Emphasized Code Gray Citation JDK Acronym... 28 HTML www.corewebprogramming.com 14  Logical Character Styles, Result 29 HTML www.corewebprogramming.com Hypertext Links Links can contain images and other text- level elements (i.e.,... ) Link to Absolute URL – Use a complete URL beginning with http:// Java is discussed in Chapter 2. Link to Relative URL – Use a filename or relative path to filename Interpreted wrt location of current file Java is discussed in Chapter 2. 30 HTML www.corewebprogramming.com 15  Hypertext Links (Continued) Link to Section – Use a section name (see below) preceded by # Images are discussed in Section 2. Link to Section in URL – Use absolute or relative URL, then #, then section name Images are discussed in Sec. 2 of Chap. 1. Naming a Section – Use and do not include the pound sign Images 31 HTML www.corewebprogramming.com IMG: Embedding Images Example Attributes: – SRC (required) – ALT (technically required) – ALIGN (see ) – WIDTH, HEIGHT – HSPACE, VSPACE – BORDER – USEMAP, ISMAP 32 HTML www.corewebprogramming.com 16  Image Alignment, Example Image Alignment Image Alignment Alignment Result LEFT This positions the image at the left side, with text flowing around it on the right. RIGHT This positions the image at the right side, with text flowing around it on the left.... 33 HTML www.corewebprogramming.com Image Alignment, Result 34 HTML www.corewebprogramming.com 17  Tables Template Table Caption Heading1 Heading2 Row1 Col1 DataRow1 Col2 Data Row2 Col1 DataRow2 Col2 Data Row3 Col1 DataRow3 Col2 Data 35 HTML www.corewebprogramming.com TABLE Element Attributes ALIGN – The ALIGN attribute gives the horizontal alignment of the table as a whole – Legal values are LEFT, RIGHT, and CENTER, with LEFT being the default BORDER – This specifies the width in pixels of the border around the table – This is in addition to the border around each cell (the CELLSPACING). – The default is zero, which also results in the visible 3D divider between cells being turned off CELLSPACING – This gives the space in pixels between adjacent cells. Drawn as a 3D line if BORDER is nonzero, otherwise empty space in the background color is used – The default is usually about 3 36 HTML www.corewebprogramming.com 18  TABLE Element Attributes (Continued) CELLPADDING – CELLPADDING determines the empty space, in pixels, between the cell’s border and the table element – The default is usually about 1 WIDTH – This specifies the width of the table, either in pixels () or as a percentage of the current browser window width () BGCOLOR – Specify the background color of the table TABLE (also legal for TR, TD, and TH) BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT – Non standard attributes supported by IE to specify the colors to user for the borders 37 HTML www.corewebprogramming.com TABLE Element Attributes (Continued) BACKGROUND – This nonstandard attribute supported by IE gives an image file that will be tiled as the background of the table – You might want to use style sheets instead. RULES – HTML 4.0 attribute that specifies which inner dividing lines are drawn – All are drawn if this attribute is omitted – Legal values are NONE, ROWS, COLS, and ALL FRAME – Specifies which outer borders are drawn – All four are drawn if this attribute is omitted – Legal values are BORDER or BOX (all), VOID (none), ABOVE (top), BELOW (bottom), HSIDES (top and bottom, despite the somewhat confusing name), VSIDES (left and right), LHS (left), and RHS (right) www.corewebprogramming.com 38 HTML 19  Table CAPTION Attribute – ALIGN (Values: TOP, BOTTOM) Usage – An enclosing borderless table may give more flexibility than the built-in CAPTION. 39 HTML www.corewebprogramming.com TR: Table Row TR is used to define each row in the table Each row will then contain TH and/or TD entries ALIGN – ALIGN (legal values LEFT, RIGHT, or CENTER) is used to set the default horizontal alignment for table cells VALIGN – VALIGN (legal values TOP, MIDDLE, or BOTTOM) is used to set the default vertical alignment for table cells BGCOLOR – Sets the color for the table row, overriding any values set for the table as a whole via the BGCOLOR attribute of TABLE BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT – Supported only by Internet Explorer, these specify the colors to use for the row borders www.corewebprogramming.com 40 HTML 20  Table Cells: TH and TD COLSPAN – COLSPAN defines a heading or cell data entry that spans multiple columns Col 1&2 Heading Col3 Heading Col1 Data Col2 Data Col3 Data 41 HTML www.corewebprogramming.com Table Cells: TH and TD (Continued) ROWSPAN – ROWSPAN defines a heading or cell data entry that spans multiple rows; similar to COLSPAN ALIGN – LEFT, RIGHT, CENTER, JUSTIFY and CHAR. – E.g., the following aligns entries on a decimal point VALIGN – TOP, BOTTOM, MIDDLE WIDTH, HEIGHT – Values in pixels only (no percentages officially allowed) NOWRAP – Use with caution BGCOLOR, BACKGROUND – Same as for TABLE and TR 42 HTML www.corewebprogramming.com 21  Summary A DOCTYPE is required to validate the document HTML document should have an enclosing HTML element, a HEAD (TITLE is required) and a BODY Documents are composed of block-level and text-level elements – Text-level elements must be inside block-level elements, not vice versa Hypertext links, , can be absolute or relative – A link to a named section is denoted by #section Tables are composed of main table element, ; rows, ; table headers, ; and table data, – Use BGCOLOR to give background colors to tables, rows, or cells – Use ROWSPAN or COLSPAN to join cells 43 HTML www.corewebprogramming.com core Web programming Questions? 44 © 2001-2003 Marty Hall, Larry Brown http://www.corewebprogramming.com 22