1 / 45

Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with

Advanced HTML. Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames 4. Creating and Working with Style Sheets. Lists. <UL>: Unordered List <LI>: List Item <OL>: Ordered List

khoi
Download Presentation

Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with

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. Advanced HTML Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames 4. Creating and Working with Style Sheets

  2. Lists • <UL>: Unordered List <LI>: List Item • <OL>: Ordered List <LI>: List Item • List item style (type of bullet or number) can be modified with style sheets.

  3. Example Lists

  4. Example Lists, continued

  5. Definition Lists • <DL>: Definition List • <DT>: Definition Term • <DD>: Definition Description

  6. Example Definition List

  7. Tables • Arrange data into columns and rows of cells • Data types include text, images, links, forms, form fields, and other tables • Tables may also have a caption

  8. Table Tags and Attributes • The tag <TABLE>: start and end tags are required • The tag <CAPTION>: start and end tags are required

  9. Row Elements • The tag <THEAD>: start tag required, end optional • The tag <TFOOT>: start tag required, end optional • The tag <TBODY>: start and end tags optional • The tag <TR>: start tag required, end optional

  10. Column Elements • The tag <COLGROUP>: start tag required, end optional • The tag <COL>: start tag required, end forbidden

  11. Cell Elements • The tag <TH>: start tag required, end optional • The tag <TD>: start tag required, end optional

  12. Borders and Rules • frame • rules • border=pixels • align • valign • charoff

  13. Cell Margins • cellspacing=pixels • cellpadding=pixels • Example: <TABLE cellspacing =“20” cellpadding=“20%”> <TR> <TD>Data1 <TD>Data2 <TD>Data3 </TABLE>

  14. Tables Example 1

  15. Tables Example 2

  16. Tables Example 3

  17. Frames • Divide the screen into multiple screens • Use special HTML file for the frame definitions (no <BODY>) • Display other HTML files or images in each frame • Frames can be user resizable

  18. FRAMESET Tag • Divides the left or top of the screen like attributes • rows= Divides the page or current frame into multiple rows • cols= Divides the page or current frame into multiple columns

  19. FRAMESET Tag, continued • If both rows and cols are set, the page or current frame is divided into a grid • Can be nested, subdividing the current frame

  20. FRAME Tag • Can be named (see Specifying the target frame) • Defines the content of the current frame • Defined as a URL • Can be a web page, picture, or some other valid URL

  21. FRAME Tag Attributes • name • src (URL) • frameborder (1|0) • scrolling (yes|no|auto)

  22. FRAME Tag Attributes, continued • marginwidth (pixels) • marginheight (pixels) • noresize

  23. NOFRAME Tag • Alternate content for browsers that do not support frames • Specified just before the <FRAMESET> tag • Use the Frameset DTD

  24. Specifying the Target Frame • Frame must be named if its URL is to be changed • Used in elements that create links (A,LINK), (AREA), and (FORM) • Syntax: target=NameOfTargetFrame

  25. Example Frames • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" • "http://www.w3.org/TR/html40/frameset.dtd"> • <HTML><HEAD> • <TITLE>Frame Example 1</TITLE></HEAD> • <FRAMESET cols="200, 80%">

  26. Example Frames • <FRAMESET rows="125 ,2*,*”> • <FRAME src="images/apotheke.jpg" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" noresize> • <FRAME src="MyIndex.htm" frameborder="0">

  27. Example Frames • <FRAME src="MyAd.htm" marginwidth="0" marginheight="0"> • </FRAMESET> • <FRAME src="p1.htm" name="Detail"> • </FRAMESET></HTML>

  28. Example Frames • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" • "http://www.w3.org/TR/html40/strict.dtd"> • <HTML><HEAD><TITLE>Index</TITLE></HEAD> • <BODY><H1 ALIGN=center>Product Index</H1>

  29. Example Frames • <P><A HREF="p1.htm" target="Detail">Product 1</A> • <P><A HREF="p2.htm" target="Detail">Product 2</A> • </BODY></HTML>

  30. Example Frames • <H1 ALIGN=center>My Ad</H1> • <H1 ALIGN=center>Product One Details</H1> • <H1 ALIGN=center>Product Two Details</H1>

  31. Example Frames

  32. IFRAME Tag: In-Line Frames • Provides for URL’s (pages, images, etc.) within a web page • Does not divide the page • Borders and scroll bars are optional • Margins around the frames are settable

  33. Example IFrames

  34. Style Sheets • Allow HTML writers to provide more exact specs for page layout and general appearance • The general look of one or more web pages can be changed by changing the current style sheet • Style sheets can be inline, or in separate files

  35. Style Sheets, continued • The combination of style sheets and scripting enables a page to make considerable changes to its appearance without contacting the server • Many HTML 2.0 and 3.2 tags and attributes have been replaced by style sheets

  36. Style Sheet Media Dependencies • Style sheets can be specified by the type of browser being used • Current web pages are only written for large GUI displays • Initial web pages can be quickly rolled out for one type of media, and others added as needed

  37. Cascading Style Sheets (CSS) • Many external style sheets may be used at a time • Order of style sheets is important: if two sheets conflict, the last definition is the one used • Allow for consistency in large web sites, while preserving department uniqueness

  38. Applying Style Sheets • All objects on a page can have individual style tags • Objects can also be classified by class, tag type, and object ID

  39. Applying Style Sheets • Two main uses for CSS: • 1. Positioning Elements • 2. Modifying HTML Tag Definitions

  40. Layers and Styles • Declared inside the <STYLE> tag: <HEAD><TITLE>Example Style Sheet</TITLE> <STYLE type=“text/css”> #companyName { position: absolute; top: 20px; left: 20px } #logo { position: absolute; top: 9px; left: 304px } H1 { border-width: 1; border: solid; text-align: center} I { font-size: 9 pt; font-color: #FF0000; font-family: verdana } </STYLE></HEAD>

  41. Layers and Styles • Used in the Body of the Page <BODY> <DIV ID=“companyName”><IMG SRC=…..></DIV> <DIV ID=“logo”><IMG SRC=…..></DIV> <H1>This is affected by our style</H1> Note the style change in this italicized <I>word</I>. </BODY>

  42. Classes • Not associated with tag <STYLE type=“text/css”> .regular { color: red; } .superBig { font-size: 32pt; font-weight: bold; color: green } </STYLE><BODY> <P CLASS=“regular”>This text is red.</P> <P CLASS=“superBig”>These words are large…really large</P> </BODY>

  43. Classes • Can bind a Class to a Tag <STYLE type=“text/css”> H1 { color: red; } H1.big { font-size: 32pt; font-weight: bold; color: green } </STYLE><BODY> <H1>This text is red.</H1> <H1 CLASS=“big”>These words are large…really large</H1> </BODY>

  44. Applying two classes • Use <SPAN> tag <STYLE type=“text/css”> .cool { color: blue; } P.small { font-size: 9pt; font-weight: bold; } </STYLE><BODY> <P CLASS=“small”>The .cool style is applied to<SPAN CLASS=“cool”> these words </SPAN>but not to the others. </BODY>

  45. Summary Topics Covered:1. Lists 2. Tables 3. Frames 4. Style Sheets

More Related