Download
chapter 8 n.
Skip this Video
Loading SlideShow in 5 Seconds..
CHAPTER 8 PowerPoint Presentation

CHAPTER 8

169 Vues Download Presentation
Télécharger la présentation

CHAPTER 8

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. CHAPTER 8 HTML

  2. HTML • Hypertext Markup Language • Most commonly used of several Internet Markup Languages • HTML is effected by “marking up” a document (“tags”), similar to the way you would mark up a memo for a secretary to type it in a polished form • Some Browsers are capable of interpreting additional tags, and new tags are being added

  3. HTML Versions[http://www.w3.org/hypertext/WWW/MarkUp] : • 0.0 - Original version developed by Timothy Berners-Lee • 1.0 - First public version • 2.0 - Version supported by first versions of Netscape and Internet Explorer • 3.2 - Version supported by latest versions of Netscape and Internet Explorer (1997) • 4.0 - Not fully implemented yet (“Dynamic HTML”, Cascading Style Sheets, etc.) • HTML 4.01, released in December 1999

  4. Looking at HTML in Documents • Open HTML Document • View • Source • Example: • Open Netscape Communicator • Select Composer from Communicator menu. • From View menu select page source

  5. Building HTML Documents • Text editor • Word Processor (text mode only) • HTML editor built into some browsers • HTML “converters” built into some products (ie M/S word, etc.) • Special “Web Authoring Software” • FrontPage • Hot Metal • WebAuthor

  6. Procedure to Build HTML Document • Use a Windows editor (ie “Wordpad”) • Save file as text filewith “.htm” extension • “Open File” in Browser to look at your work • Keep both editor & browser windows open as you refine your home page

  7. HTML Documents • HTML documents consists of two parts • Head - heading information (prologue) • Body - body of document • Both the head and the body use pieces of code called tags

  8. Tags • Tags : • style text • link files • embed graphics • insert tables • run Java Applets, etc.

  9. Tags (continued) • Tags are normally typed as all capitals for clarification, although they are not case sensitive • Syntax is: • <Tag_Name Property_List>...content...</Tag_name> • The property (or argument) list is optional • Example: • <H1 ALIGN=CENTER>Garage Sale</H1>

  10. Tags (continued) • Some tags can be used by themselves: • <P> (tag to end a paragraph) • Best to use in pairs for new HTML 4 capabilities. • Other tags must be used together: • <H1> and </H1> which styles a first level (1) heading

  11. <HTML> and </HTML> • Start each document with the <HTML> tag and end with </HTML> • Example: • <HTML> • ...document text & tags... • </HTML>

  12. <HEAD> and </HEAD> • The <HEAD> tag should be at the top of your document, and denotes the start of your heading area • The </HEAD> denotes the end of your heading • Example: • <HTML> • <HEAD>...heading... </HEAD> • ..document text & tags... • </HTML>

  13. <TITLE> and </TITLE> • <TITLE> and </TITLE> denote the start and end of the text that will show in the title barof the browser window • Example: • <HTML> • <HEAD><TITLE>ITM Home Page</TITLE></HEAD> • ...document text & tags... • </HTML>

  14. <BODY> and </BODY> • The main part of your document is delimited by the two body tags: • Example: • <HTML> • <HEAD><TITLE>ITM Page</TITLE> </HEAD> • <BODY> • ...body of document... • </BODY> • </HTML>

  15. These tags surround text (usually headings) and indicate level (i) The level will determine the relative size of the text when the browser displays it (1 thru 6) <HTML> <HEAD><TITLE>ITM Home Page</TITLE> </HEAD> <BODY> <H1>ITM</H1> ...body of document... </BODY> </HTML> <Hi> and </Hi>

  16. This tag indicates the start/end of a paragraph The browser will typically place a blank line at this point You can also use this tag in pairs (<P> & </P>) to delimit paragraphs <HTML> <HEAD><TITLE>ITM Home Page</TITLE> </HEAD> <BODY> <H1>ITM</H1> <P> ...body of document... </BODY> </HTML> <P>

  17. Images use the <IMG> tag It requires additional information called arguments such as: filename/path alignment Images

  18. <HTML> <HEAD><TITLE>ITM Home Page</TITLE> </HEAD> <BODY> <H1>ITM</H1> <IMG ALIGN=top SRC=“ITM.gif”> <P> ...body of document... </BODY> </HTML> Images

  19. Copying Images From WWW Documents • Place mouse on image • Right Click • Pick “save image” (save to your diskette) • Cannot do this for images displayed from within Java applets • Download from image sites

  20. Lab1 • Create an initial home page document with: • heading & body • title • your name (H1) • An image • some text

  21. Lab 1 • <HTML> • <HEAD><TITLE>ITM Home Page</TITLE> </HEAD> • <BODY> • <H1 Align=Center>ITM</H1> • <IMG ALIGN=left SRC=“ITM.gif” > • ...body of document... • </BODY> • </HTML>

  22. Making Your Own Images • Use drawing programs: • Paintbrush (.BMP files), or other drawing programs • Scanning • University & Department resources • Digital Cameras • Mail in Photography (get back diskette) • Video Capture & “frame grabber”

  23. Image Processing • Browsers support different file formats: • gif: (Graphics Interchange Format) • jpeg: (Joint Photographic Experts Group) formats • pcx Graphics file format for programs running on PC • etc. • Try to convert all your images to these formats

  24. Image Dimensions(Width, Height) • The ‘Width’ and ‘Height’ arguments can be used to scale images • Browsers will stretch or squeeze the image to fit in the space indicated (not retaining proportions) • These arguments also speed loading by telling the browsers how big a space (in pixels) to reserve so they can add the text immediately instead of waiting to see how big the image is going to be: • <IMG SRC=‘me.gif’ Width=“100” Height=“150”>

  25. The SRC image indicates the location of your image file • If you do not specify a path, it is assumed to be in the same directory as your home page • Images are horizontally aligned like text

  26. Alignment • You can control the horizontal alignment of text and graphics • Default is alignment, all elements will align left (and have a “ragged” right edge) • Some browsers support the tags: • <Center> ... </Center> • <Left> ... </Left> • <Right> ... </Right> • Example • <Center> • ...centered text... • </Center>

  27. However, more recent releases of browsers use ‘Align=‘ instead of the <Left> and <Right> tags • Use ‘Align=‘ inside of <P> and <Hi> type tags: • <P Align=Right> ...paragraph text ... </P> • <H1 Align=Center>A Centered Heading </H1>

  28. Adding Space Around Graphics • You can add space around images with the ‘VSpace’ and ‘HSpace’ arguments • Use ‘VSpace for space on top and bottom • Use ‘HSpace’ for space along the sides • Example: • <IMG Src=“me.gif” Align=left HSpace=50 VSpace=10>

  29. Centering Images • The ALIGN property of the IMG tag aligns an image relative to neighboring text • To center an image on the page: • Put it inside of a table (discussed later) • Or put it inside of a centered paragraph: • <P ALIGN=CENTER><IMG SRC=“me.gif”></P>

  30. Alternatives to Images • People using non graphic browsers, or people who turn off image loading, do not see in-line graphics • The ‘ALT’ argument specifies alternative text: • <IMG SRC=“me.gig” Alt=“[Picture of me]”>

  31. Lab 2 • Align your image • Add some text next to your image • Provide alternative text for image

  32. Lab 2 • <HTML> • <HEAD><TITLE>ITM Home Page</TITLE> </HEAD> • <BODY> • <H1 Align=Center>ITM</H1> • <IMG ALIGN=left SRC=“ITM.gif” Alt=“[My Picture]”> • ...text next to image... • <P> • ...body of document... • </BODY> • </HTML>

  33. Comments • To insert comments in your HTML code use • <!This is a comment>

  34. Line Breaks • <BR> can be used to break a line (start a new line) • Carriage returns, tabs, and line feeds in your editor have no effect • Text will automatically flow to the extent of the browser window size and will not break otherwise unless you tell it to do so

  35. Line Breaks(continued) • You can use the no break tags (<NoBR> and </NoBR>) to keep text from breaking at the end of the browser window. If you want text to break within this non breaking section, use <WBR> at that point.

  36. Horizontal Rules • To put a horizontal dividing line in a document use <HR> • Arguments can be used to change the look of the default rule: • Size= changes the thickness of the rule • Width= changes the length of the rule • Align= changes the justification of the rule • NoShade creates a solid rule

  37. Text Styles • Relative tags can be used to select text style: • <Hi> where i goes from 1 to 6 with decreasing size and strength (boldness) • <ADDRESS> typically used for e-mail and other addresses; shown in italics • <CITE> similar to address, normally used for citations • <EM> emphasis • <STRONG> bold • <VAR> indicates a variable (typically italics)

  38. <CODE> or <SAMP> or <KBD> - monospaced text • <BIG> • <SMALL> • <SUB> subscripts • <SUP> superscripts • <TT> Do not use proportional font (ie use a font like Courier) • End all of these style tags with the same tag using the slash (“/”)

  39. Instead of relative style tags which vary form browser to browser, you can use fixed tags: • Bold <B> and </B> • Italic <I> and </I> • Underscore <U> and </U> • Strikeout <S> and </S> • Blink <Blink> and </Blink>

  40. Font Sizes (Points) • You can change the default fonts size using the <Basefont> tag with the ‘Size’ argument: • <Basefont Size=5> • The default size is 3, and the range is from 1 to 7 • Using the tag <Font> changes the size for regular text but not headings (typically H1 = 6, H6 = 1) • <Font Size=7> • You can also change font size in a relative manner with + or -. • <Font Size=+1>

  41. LAB 3 • Use the following to enhance your home page: • styles • rules • breaks • fonts • Include in your document sections for your address and hobbies

  42. <HTML> • <HEAD><TITLE>ITM’s Home Page</TITLE> </HEAD> • <BODY> • <H1 Align=Center>ITM</H1> • <IMG ALIGN=center SRC="sun.gif" Alt="[My Picture]"> • ...text next to image... • <BR Clear=left> • <P><HR> • <H2>My address is:</H2> • <ADDRESS>111 Peach Street<BR> • Memphis, TN 38108</ADDRESS><P> • </BODY> • </HTML>

  43. Special Characters • Special Characters can be entered into document content by using the ISO 8859-1 standard (Latin-1) • In the content, use an ampersign followed by either the “code name” or by a # then the “code number”; to insert the trademark symbol : • &reg • &#174

  44. Spaces & Alignment • Browsers will ignore additional spaces in content. • To have extra spaces, you can use the special character &nbsp (“non-breaking space”) or use the <PRE> tag which tells newer browsers not to remove extra space (note the PRE tag also forces mono spacing) • However for much precise alignment use tables (discussed later) - HTML version 4 (or the CSS style sheet extensions have new spacing, formatting, justification, and alignment features)

  45. Block Quotes • To indent a section of text you can use the block quotes tags: • <BLOCKQUOTE> • ...some text to be indented... • </BLOCKQUOTE> • Within the block quote you still have to use the paragraph and line break tags, and all other formatting tags

  46. Hypertext Links • Links are the key to “non-linear” navigation of Internet information • You can set up links from one point in a document to another • You can set up links to other documents of yours • You can set up links to another document anywhere • Links can be set up from text (words) or images

  47. Text Links • By clicking on a text link a person follows a pointer to another place • The text link shows up in another color, and most browsers change the color of the text link after you click on it once • Links use the <A> tag set • To link to another document use the HREF argument: • <A HREF=“MyDoc2.html”>Click here for Doc 2</A>

  48. URL’s • The Universal Resource Locator indicates the location of a document (file); URL’s are case sensitive • A complete URL includes the service, server DNS name, disk, and directory path • There are two types of paths: • Absolute - a complete path description • Relative - specifies location relative to where the current document is

  49. Absolute paths: • http://www.cbu.edu/~jdoe • http://www.cbu.edu/user/jodie/welcome.html • Relative paths: • filename.html [file is in same directory] • otherdir/filename.html [file is in otherdir] • ../otherdir/filename.html [go up a directory, then got to otherdir]

  50. Good Night