1 / 113

CHAPTER 8

CHAPTER 8. HTML. 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

nishan
Download Presentation

CHAPTER 8

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. 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

More Related