1 / 36

Business Information Systems Analysis and Development [SYST430] Spring 2003 Mrs Nahed Amin

Business Information Systems Analysis and Development [SYST430] Spring 2003 Mrs Nahed Amin HTML (Basics - Tables). Introduction. HTML (Hyper Text Markup Language) is not a programming language; it is used to format a document on the World Wide Web HTML readers are called Web browsers

kipling
Télécharger la présentation

Business Information Systems Analysis and Development [SYST430] Spring 2003 Mrs Nahed Amin

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. Business Information Systems Analysis and Development [SYST430] Spring 2003 Mrs Nahed Amin HTML (Basics - Tables) SYST430 – Spring 2003

  2. Introduction • HTML (Hyper Text Markup Language) is not a programming language; it is used to format a document on the World Wide Web • HTML readers are called Web browsers • The browser reads the HTML commands (tags) in the document and format it SYST430 – Spring 2003

  3. HTML Basics • HTML Marking Up • Tags appear inside the angle brackets < and > • The tag <B> is for bold marking the beginning of the text to be emboldened. The tag </B> marks the end of the emboldening • Example:<B>Hello</B> • The tag <I> is for italics, and <U> is for underline. Both tags need to be closed by </I> and </U> SYST430 – Spring 2003

  4. HTML Basics • Nesting HTML Tags • To make a text bold, italic and underlined, the tags <B> <I> and <U> should be used, but HTML tags can’t be overlapped • Example:<B> <I> <U> Hello </U> </I> </B> • is CORRECT • <B> <U><I> Hello </U> </I> </B> • is WRONG SYST430 – Spring 2003

  5. HTML Basics • Standard HTML Format • A correct HTML document must include the following tags: • <HTML> <HEAD> <TITLE> <BODY> • <HTML> embodies the whole contents of the document • <HEAD> holds information about the document • <TITLE> part of the tag <HEAD> • holds information that appears in the title bar • <BODY> holds information that appears in main window SYST430 – Spring 2003

  6. HTML Basics Standard HTML Format The standard structure of an HTML document is: <HTML> <HEAD> <TITLE>Text to appear in title bar</TITLE> </HEAD> <BODY> Text to appear in the main browser window </BODY> </HTML> SYST430 – Spring 2003

  7. HTML Formatting • The Browser as Formatter • The browser formats the HTML document • The browser ignores extra spaces, blank lines, and line breaks in the HTML document • The browser tries to correct errors when writing incorrect HTML SYST430 – Spring 2003

  8. HTML Formatting • Fonts • <FONT> used to affect the text style (color, • typeface, and size). • <FONT COLOR=“color” FACE=“typeface” • SIZE=value> • Example: • <FONT COLOR=“yellow” FACE=“Arial” • SIZE=20> SYST430 – Spring 2003

  9. HTML Formatting • Paragraphs and Line Breaks • <BR> used to start a new line • it’s a standalone tag; i.e. there is no </BR> • doesn’t place an empty line between 2 lines • <P> paragraph tag • puts a line space between 2 lines • It’s not a must to put </P> SYST430 – Spring 2003

  10. HTML Formatting • Headings • The headings tags are: • <H1> <H2> <H3> <H4> <H5> <H6> • Text surrounded by each heading tag take a certain font size depending on the browser • The biggest font size is for <H1> tag, and the smallest font size is for <H6> tag SYST430 – Spring 2003

  11. HTML Formatting • Lists • Ordered list: • - Output: 1. Red • 2. Green • 3. Yellow • - HTML code:<OL> • <LI>Red</LI> • <LI>Green</LI> • <LI>Yellow</LI> • </OL> SYST430 – Spring 2003

  12. HTML Formatting • Lists • II. Unordered list: • - Output: • Red • Green • Yellow • - HTML code: • <UL> • <LI>Red</LI> • <LI>Green</LI> • <LI>Yellow</LI> • </UL> SYST430 – Spring 2003

  13. HTML Formatting Lists III. Definition list: - Output: Baking Cooking food in the indirect, dry heat of an oven Broiling Cooking food a measured distance from heat source - HTML code: <DL> <DT>Baking <DD>Cooking food in the indirect, dry heat of an oven <DT>Broiling <DD> Cooking food a measured distance from heat source </DL> SYST430 – Spring 2003

  14. HTML Formatting • Preformatted Text • Unlike standard HTML body text, preformatted text (delimited by <PRE> </PRE>) is displayed exactly as it is typed in. • HTML Comments • Writing comments is a sign of well written Web sites. Comments are used all the time by developers. • Example: • An HTML comment will look like the following: • <!-- This is a comment --> SYST430 – Spring 2003

  15. Anchors • The heart of HTML is the hyperlink • To create links, we use the anchor tag: <A>. The parameters added to the <A> tag direct the browser software to display new content when the link is clicked SYST430 – Spring 2003

  16. Anchors Simple hypertext links To link to another file: <A HREF=“URL”>link</A> URL: location of the file to be linked to link: the hot spot when clicking on links to another document SYST430 – Spring 2003

  17. Anchors Linking to email addresses To link to an email address: <A HREF=“mailto:username@domainname”>link</A> link: the hot spot when clicking on links to the email address “username@domainname Example: <A HREF=“mailto:nahed@tedata.eg?subject=Coursework”>email nahed</A> SYST430 – Spring 2003

  18. Anchors • Linking to sections within documents • To create a hyperlink to a specific location within the same or another document: • - 1st Define the location using the tag: • <A NAME=“xxxx”>text</A> • xxxx: name given to the specified location • text: starting text of the specified location • - 2nd Create the link to the location using the tag: • <A HREF=“#xxxx”>link</A> • if location is in the same document • <A HREF=“URL#xxxx”>link</A> • if location is in another document SYST430 – Spring 2003

  19. Anchors Linking to sections within documents Example: let’s set up a named fragment within a document displaying daily news, so that users can link directly to the “Stock Quotes” section of the page. <HTML> ------------------------------------ ------------------------------------ <A HREF=“#stocks”>Check out the stock Quotes</A> ------------------------------------ ------------------------------------ <A NAME=“stocks”>Daily Stock Quotes</A> ------------------------------------ </HTML> SYST430 – Spring 2003

  20. Anchors • Targeting windows • To specify where to display the contents of a hyperlink: • <A HREF=“URL” TARGET=“New_Window”>link</A> • New_Window could be: • _blank: newly opened, unnamed window • _self: target document displayed in same window • _parent: target document displayed in parent window • _top: force link to take over all the browser window • _self is the default • Targeting windows is commonly used with frames SYST430 – Spring 2003

  21. Anchors • Link appearance • Links by default are underlined and have default colors, but they can be easily changed • Caution should be taken when changing link appearance, so users won’t be • confused • Link color specifications in the body tag are applied to the whole document: • Links <BODY LINK=“color”> sets color for hyperlinks • (default=blue) • Visited links <BODY VLINK=“color”> sets color for visited links • (default=purple) • Active links <BODY ALINK=“color”> sets color for visited links • (default=red) SYST430 – Spring 2003

  22. Images • Horizontal Rules • A horizontal rule is a line that extends across the page. • It is created by the tag <HR> • The attributes that change the appearance of horizontal rules are: • Thickness <HR SIZE=x> (x= number of pixels) • Width <HR WIDTH=x> (x= number of pixels) • Width percentage <HR WIDTH=x%> (x=percentage of page width) • Alignment <HR ALIGN=left|right|center> • Solid line <HR NOSHADE> • Horizontal rules are not used as dividers as before, so it’s not recommended to make heavy use of them SYST430 – Spring 2003

  23. Images • Graphics • Try to avoid large in-line images or offer smaller versions or alternate pages for those who prefer to avoid them • To imbed a graphic image in a document we use the tag <IMG>: • <IMG SRC=“URL” ALT=“Alternate text”> • URL location of the image file • ALT specify some text to be displayed in case the browser doesn’t • display the image • In-line images are often placed inside anchors. The HTML code to create an image as a hyperlink is: • <A HREF=“URL”><IMG SRC=“URL” ALT=“text”></A> SYST430 – Spring 2003

  24. Images • Graphics • When an in-line image is a hyperlink, a border will be, by default, placed around the image. This can be removed using BORDER=0 in the <IMG> tag • Use HEIGHT and WIDTH attributes in the <IMG> tag, so that the browser layouts the page before downloading all the graphics: • <IMG SRC=“URL” WIDTH=x HEIGHT=x> (x in pixels) • <IMG SRC=“URL” WIDTH=x% HEIGHT=x%> (x as percentage) • To specify how the graphic is to be placed on the page in relation to the text, use the ALIGN attribute in the <IMG> tag: • <IMG SRC=“URL” ALIGN=left|right|top|middle|bottom> • When loading large graphics, load another (smaller) image first whilst the second larger one loads. Use the attribute LOWSRC=“URL” in the <IMG> tag to specify the location of the smaller image SYST430 – Spring 2003

  25. Images • Objects • Embedding audios: • To embed background sound, use the <EMBED> tag: • <EMBED SRC=“URL” CONTROLS=“console” HEIGHT=60 WIDTH=145 • AUTOSTART=“true” LOOP=3></EMBED> • SRC=“URL” location of the audio file • CONTROLS=“console” places a control panel with play, stop, pause, and • volume controls • HEIGHT, WIDTH size of console in pixels (mandatory) • AUTOSTART=“true” the audio clip starts playing as soon as it loads • LOOP=3 the audio clip will play 3 times in a row SYST430 – Spring 2003

  26. Images Objects II. Embedding videos: To add a video file to a Web page, use the <EMBED> tag: <EMBED SRC=“URL” AUTOPLAY=“false” WIDTH=160 HEIGHT=120> </EMBED> SRC=“URL” location of the audio file AUTOPLAY=“false” the user will have to start the video with the play button HEIGHT, WIDTH size of the video frame in pixels (mandatory) SYST430 – Spring 2003

  27. Why Using Tables? • Tables were initially developed as a tool to organize and display data in columns and rows • Tables are now a tool for organizing Web pages and hence provide solutions to structured navigation SYST430 – Spring 2003

  28. Create a Table • Output: • HTML code: <TABLE BORDER=1 WIDTH=40%> <TR> <TD HEIGHT=10 WIDTH=50%>1</TD> <TD WIDTH=50%>2</TD> </TR> <TR> <TD HEIGHT=10 WIDTH=50%>3</TD> <TD WIDTH=50%>4</TD> </TR> </TABLE> SYST430 – Spring 2003

  29. Steps for Creating a Table • Insert the table with the tag <TABLE> and decide on its dimensions (if required) • Add a row with the tag <TR> • Insert a cell with the tag <TD> in the newly created row, with dimensions and other characteristics • Add the data to be displayed • Terminate the data cell with the tag </TD> • Repeat steps 3-5 as necessary • Terminate the row with the tag </TR> • Repeat steps 2-7 until necessary rows are added • Terminate the table with the tag </TABLE> SYST430 – Spring 2003

  30. Coloring Tables • You can specify a background color for the entire table (<TABLE>), selected rows (<TR>), or individual cells (<TD>) by placing the BGCOLOR attribute in the appropriate tag • Color settings in a cell will override settings made at the row level, which override settings made at the table level • Example: <TABLE BORDER=1 BGCOLOR=“red”> SYST430 – Spring 2003

  31. Example: • Output:Books About Computing • - HTML code: • <CENTER> • <TABLE WIDTH=70% BORDER=1 CELLSPACING=3 • CELLPADDING=2> • <CAPTION><B>Books About Computing</B></CAPTION> • <TR> • <TH WIDTH=80%><B>Book</B></TH> SYST430 – Spring 2003

  32. <TH WIDTH=20%><B>Author</B></TH> </TR> <TR> <TD>IBM PC Assembly Language</TD> <TD>Abel, P</TD> </TR> <TR> <TD>Object-Oriented Analysis</TD> <TD>Booch, G</TD> </TR> <TR> <TD COLSPAN=2><CENTER>All books are available at the library</CENTER></TD> </TR> </TABLE> </CENTER> SYST430 – Spring 2003

  33. Tables' Characteristics • Attributes of <TABLE> • BACKGROUND=“URL” specifies a graphic image to be tiled in the • background of the table • BGCOLOR=“color” specifies a background color for the entire table • BORDER=number specifies the width (in pixels) of the border • around the table and its cells (default=1) • CELLPADDING=number sets the amount of space (in pixels) between • the cellborder and its contents (default=1) • CELLSPACING=number sets the amount of space (in pixels) between • table cells (default=2) • HEIGHT=number, percentage specifies the height of the entire table • WIDTH=number, percentage specifies the width of the entire table SYST430 – Spring 2003

  34. Tables' Characteristics II. Attributes of <TR> BGCOLOR=“color” specifies a background color to be used in the row. A row’s background color overrides the color specified at the table level VALIGN=top|middle|bottom specifies the vertical alignment of the text (or other elements) within cells of the current row SYST430 – Spring 2003

  35. Tables' Characteristics III. Attributes of <TD> or <TH> ALIGN=left|center|right aligns the text (or other elements) within a table cell (default=left) BACKGROUND=“URL” specifies a graphic image to be tiled within the cell BGCOLOR=“color” specifies a background color to be used in the table cell. A cell’s background color overrides background colors specified at the row or table level COLSPAN=number specifies the number of columns the current cell should span (default=1) SYST430 – Spring 2003

  36. Tables' Characteristics III. Attributes of <TD> or <TH> HEIGHT=number, percentage specifies the height of the cell. The height specified in the first column will apply to the rest of the cells in the row NOWRAP disables automatic text wrapping for the current cell. Line breaks must be added with a <P> or <BR> ROWSPAN=number specifies the number of rows the current cell should span (default=1) VALIGN=top|middle|bottom specifies the vertical alignment of the text (or other elements) within the table cell (default=middle) WIDTH=number, percentage specifies the width of the cell. The width applied in the first row will apply to the rest of the cells within the same column SYST430 – Spring 2003

More Related