HTML and XML Venkat Subramaniam – svenkat@cs.uh.edu 1 HTML • Hyper Text Markup Language • HTML 4.0 has strict compliance with XML standard • Presentation details presented with information – using markups • Browsers act as interpreters/ parsers in – parsing through HTML documents – displaying the contents of the documents Venkat Subramaniam – svenkat@cs.uh.edu 2
Tags, Elements and Attributes <STRONG>boldface Text</STRONG> <HR> <TABLE BORDER="1">…</TABLE> • Tag starts with < and ends with > • Elements generally have start and end tags – starts with < TagName> – ends with < / TagName> (optional in some cases) – contents of elements included between tags • Attributes – Name= Value specifies information about contents in an element – Provided between tag name and ending > – Multiple attributes separated by space Venkat Subramaniam – svenkat@cs.uh.edu 3 Tags, Case, well-formedness • HTML is relaxed when it comes to case and well-formedness • <HR> is as good as <hr> as are <Hr> and <hR> • <STRONG>This is <I> italics</I> Text</STRONG> • However, – <STRONG>This is <I> italics</STRONG> </I> Text – Is generally accepted, though not well-formed – How does a browser handle this? Try it on different browsers • XML on the other hand is well-formed and case sensitive • XHMTL is HTML following XML restrictions Venkat Subramaniam – svenkat@cs.uh.edu 4
Tags, Line Breaks, Special Characters • Block-level tags affect a block of text/ content – HEAD, BODY, P, H1, BR, UL, TABLE • Inline tags affect only a few letters or words – EM, B, IMG • Line breaks – generally include automatic in block-level tags – Not so with inline tags • Special characters – < , > , & and " are special characters – To display these use names ( < , > , & , " ) or numbers () Venkat Subramaniam – svenkat@cs.uh.edu 5 Common Tags • < HTML> Optional tag indicating content type • < TITLE> Title of a web page • < BODY> Content of a web page • < H n ALIGN= direction > Level 1 to 6 of header (Times New Roman 24, 18, 14, 12, 10 and 8 points) direction = left, right or center • < P ALIGN= direction > Space between paragraphs Venkat Subramaniam – svenkat@cs.uh.edu 6
Text Formatting – Font, Size • Specifying Font (deprecated in HTML 4.0) • <FONT SIZE=" value " FACE=" name1, name2 " COLOR=" value "> – Size value may be 1 to 7 (Times 8, 10, 12, 14, 18, 24, 36) – Size may also be + n or – n to specify a point higher or lower • Also may be altered with < BIG> or < SMALL> tags – If name1 is not available on system, select name2 • More alternatives may be specified – If none of the alternatives available, choose default • You may set default size for entire document using <BASEFONT SIZE=“value”> Venkat Subramaniam – svenkat@cs.uh.edu 7 Text Formatting - Color • Color value can be specified – using either # rrggbb value – Or using “color” for one of 16 predefined colors • < BODY TEXT= “value”> – Sets the default color for text in the document • < FONT COLOR= “value”> – Sets the color for the content of this element Venkat Subramaniam – svenkat@cs.uh.edu 8
Text Formatting - Miscellaneous • < SUB> for subscript • < SUP> for superscript • < STRIKE> for strikeout • < U> for underline • < B> or < STRONG> for boldface • < I> or < EM> for italics • < CODE> , < KBD> , < SAMP> , < TT> for monospace • < BLINK> for blinking text • < !– to start comments and end with --> • All these tags have a start and end tag Venkat Subramaniam – svenkat@cs.uh.edu 9 Links • Links are used to relate documents together – to navigate, to view, to take some action, etc. • Link has three parts destination, label and target <A HREF=“anotherPage.html” >Next</A> – HREF provides target, Next is the label – A special attribute called TARGET may be used to tell browser to display in another frame or new window (_blank) • target names are case sensitive • <BASE TARGET=“…”> in head section sets default target for page • Good practice to use relative URL – use absolute for outside web pages • Links may be of other types: ftp, news, mailto, etc. Venkat Subramaniam – svenkat@cs.uh.edu 10
Links and Anchors • You may define an anchor within a document – <A NAME=“ anchorName ”>…</A> • You may link to that location in document by – <A HREF=“# anchorName ”>label</A> – <A HREF=“ URL # anchorName ”>label</A> Venkat Subramaniam – svenkat@cs.uh.edu 11 Tables <TABLE> <TR> <TD>cell 1 content</TD><TD>cell 2 content</TD> </TR> … </TABLE> • TABLE attribute BORDER= n defines thickness – default is 2 – If you do not specify, the border is drawn with space, not line – to add extra space around table, use HSPACE or VSPACE • TABLE attribute ALIGN=center will center the table • TABLE or TD attribute WIDTH= n sets cell width pixels – size specified ignored if specified space is too small for contents • Attribute of TD, COLSPAN= n specifies number of columns to span – use ROWSPAN to span across rows • Use <TH> for table header, centered and boldfact • Use <CAPTION> for a table caption – attribute ALIGN= direction (top, bottom , left, right) Venkat Subramaniam – svenkat@cs.uh.edu 12
Lists • You may create (un)ordered list and definitions lists – May be plain, numbered, bulleted <OL TYPE=X> <LI> list item 1</LI> <LI> list item 2</LI> </OL> – Type is optional (defaults to 1 for numbers) – A for capital letters, a for small letters, I for capital roman numerals, i for small roman numerals – Use START= n for initial value for list item • always numeric and converted automatically to proper type – In LI, may override TYPE, VALUE for this & following items Venkat Subramaniam – svenkat@cs.uh.edu 13 Unordered List • Use <UL> to create unordered list • Use attribute TYPE= shape for bullet type – disc for solid round bullet (default for 1 st level) – circle for an empty round bullet (default for 2 nd level) – square for square bullets (default for > = 3 rd level) • <LI> may override the type Venkat Subramaniam – svenkat@cs.uh.edu 14
Definition Lists • Great to create lists that describe items – Like glossaries <DL>Text here will appear on own line <DT> Text To Appear On Own Line Aligned Left </DT> <DD> Definition text </DD> … </DL> – You may have multiple of DLs and DTs to allow multiple words or definitions Venkat Subramaniam – svenkat@cs.uh.edu 15 Images • HTML tag IMG allows placement of images • <IMG SRC=“ LocationAndNameOfImageFile ”> • Attributes – BORDER= “ n ” – ALT= “tooltip or alternate text” • specify a text that may appear instead of image • this also serves a tool tip on windows • a required attribute in HTML 4 – WIDTH= “ x ” HEIGHT= “ y ” • allows browser to optimize size for image while displaying text – LOWSRC • specify a fast load low resolution image to be shown first • high resolution image is loaded slowly replacing the low resolution image – ALIGN • align left or right to allow text wrapping around image – HSPACE= “ pixel ” VSPACE= “ pixel ” • Provides padding on sides (horizontal and vertical) around image Venkat Subramaniam – svenkat@cs.uh.edu 16
BR, CLEAR and Text Wrapping • < BR> command provides a line break • CLEAR attribute says do not begin text until the specified margin is clear – < BR CLEAR= “left”> • Do not begin text until left margin is clear of images – < BR CLEAR= “right”> • Do not begin text until right margin is clear of images – < BR CLEAR= “all”> • Do not begin text until both margins are clear of images Venkat Subramaniam – svenkat@cs.uh.edu 17 Forms • Form has three parts – FORM tag with URL of the action script – form elements, text, radio buttons, etc. – Submit button to send data to the script <FORM METHOD=POST ACTION=“ scriptURL ”> … </FORM> • The method may be POST or GET – GET is limiting in the amount of information sent • sent as part of query string Venkat Subramaniam – svenkat@cs.uh.edu 18
Recommend
More recommend
