1 / 47

TECHNOLOGY PLUG-IN T10

TECHNOLOGY PLUG-IN T10. Creating Web pages Using HTML. What is HTML?. HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content

hea
Télécharger la présentation

TECHNOLOGY PLUG-IN T10

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. TECHNOLOGY PLUG-IN T10 Creating Web pages Using HTML

  2. What is HTML? • HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is a markup language • A markup language is a set of markup tags • The tags describe document content • HTML documents contain HTML tags and plain text • HTML documents are also called web pages

  3. HTML Tags • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags

  4. Anatomy of an HTML Tag

  5. The <HTML> Tags • The <HTML> tags identify the document as an HTML document • To use the <HTML> tags, enter them in your document like this: <HTML> </HTML>

  6. The <HEAD> Tags • The <HEAD> tags contain information about the document, including its title, scripts used, style definitions, and document descriptions • To use the <HEAD> tags, enter them between the <HTML> tags, for example: <HTML> <HEAD> </HEAD> </HTML>

  7. HTML tags are case- insensitive. • For example <HEAD> is the same as <head>

  8. The <TITLE> Tags • The <TITLE> tags are contained in the document title • The title does not appear within the browser window, although it is usually visible in the browser's title bar <HTML> <HEAD> <TITLE> A HTML Tutorial </TITLE> </HEAD> </HTML>

  9. The <BODY> Tags • The <BODY> tags enclose all the tags, attributes, and information that you want a visitor's browser to display • To use the <BODY> tags, enter them below the closing </HEAD> tag and above the closing </HTML> tag: <HTML> <HEAD> <TITLE> A HTML Tutorial </TITLE> </HEAD> <BODY> All the tags, attributes, and information in the document body go here. This is what the browser displays on the screen. </BODY> </HTML>

  10. Applying Style Tags And Attributes • Style tags tell the browser exactly how to present the labeled text • These elements constitute the basic HTML document components and, unlike the structure tags, do appear in the browser window

  11. Paragraphs • One of the most common tags you will use is the paragraph tag, <P>, which is appropriate for regular body text • HTML automatically adds an extra blank line before and after a paragraph • To use the paragraph tags, put them around the text you want to format as a paragraph, for example: <P> A whole paragraph goes right here. </P>

  12. Paragraphs • HTML does not respect more then one blank space character or blank line, unless <p> is used.

  13. Creating Headings • Headings break up large areas of text, announce topics to follow, and arrange information according to a logical hierarchy • HTML provides six levels of headings: <H1>…</H1> The largest <H2>…</H2> <H3>…</H3> <H4>…</H4> <H5>…</H5> <H6>…</H6> The smallest

  14. Creating Headings

  15. Creating Headings • By default, all browsers align headings on the left • To use the alignment attributes, include them in the initial heading tag, such as: <H1 ALIGN=“LEFT”>Left-aligned Heading</H1> <H2 ALIGN=“CENTER”>Centered Heading</H2> <H4 ALIGN=“RIGHT”>Right-aligned Heading</H4>

  16. CREATING HYPERLINKS • A hyperlink is a bit of text or a graphic that you can click to… • Move to a different location on the page • Open a different Web page • Start an e-mail message • Download a file • View a movie • Listen to a sound clip • Activate a Web-based program

  17. Hyperlinking to a Web Page No matter what type of hyperlink you want to create, the basic syntax is the same • It starts with the <A> tag, and then uses an HREF= attribute that provides the URL (the path to the destination) • This is followed with the text to display in the browser • Example: <A HREF="http://www.stfx.ca"> St. F.X. University</A>

  18. Hyperlinking to an E-Mail Address To create a hyperlink to an e-mail address, use the same HREF= argument as before, but instead of a Web address, attribute is MAILTO: followed by the e-mail address. <A HREF="MAILTO:jdoe@abc.com>Contact Me</A> Or… <A HREF="MAILTO:jdoe@abc.com? SUBJECT=WebCOMMENT"> Contact Me</a> (which adds a subject line to the email)

  19. Hyperlinking

  20. Hyperlinking to Other Content • A hyperlink can reference any file, not just a Web document • You can take advantage of this to link to other content such as… • Microsoft Office documents • Compressed archive files such as .zip files • Executable program files such as setup utilities

  21. Applying Bold, Italic, and Other Emphases • You can apply formatting to individual letters and words • For example, you can make a word appear italic, bold, underlined, or superscript (as in e2) • Example: <P><B>This is the end of a paragraph that also uses boldface.</B></P> <P>This is the <U>beginning</U> of the following paragraph. </P>

  22. Applying Bold, Italic, and Other Emphases

  23. Common Character Formatting Tags

  24. Using Horizontal Rules • Horizontal rules are lines that break up long sections of text, indicate a shift in information, or help improve the overall document design • The <HR> tag is a nonpaired tag; it has no ending tag • To use a horizontal rule, put the <HR> tag where you want the rule to appear: <P>Long passages of text should often be broken into sections with headings and, optionally, horizontal rules.</P> <HR> <H3>A Heading Also Breaks Up Text</H3> <P>A new long passage can continue here.</P>

  25. Using Horizontal Rules <hr align="left" width="50%">

  26. Horizontal Rule Attributes

  27. Inserting Line Breaks • You can easily break paragraph lines by inserting the <BR> tag where you want the lines to break: <P> There once was an HTML writer,<BR> Who tried to make paragraphs wider.<BR> She found with a shock<BR> All the tags did mock<BR> The attempt to move that text outside.<BR>

  28. Creating Lists • Lists are a great way to provide information in a structured, easy-to-read format • Lists come in several varieties: • Numbered (ordered) • Bulleted (unordered) • Alphabetical

  29. Creating Lists • Start with text you want to format as a list: Lions Tigers Bears Oh, My! • Insert the <UL>tags around the list text: <UL> Lions Tigers Bears Oh, My! </UL> • Type the <LI> tag for each list item: <UL> <LI>Lions <LI>Tigers <LI>Bears <LI>Oh, My! </UL>

  30. Creating Lists

  31. Creating Lists For ordered list use the tag <OL> <OL> <LI>Lions <LI>Tigers <LI>Bears <LI>Oh, My! </OL> So it displays as • Lions • Tigers • Bears • Oh, My!

  32. List Attributes <OL TYPE="A"> <LI> Outlines use sequential lists with letters. <LI> And numbering schemes for documentation. </OL> <UL TYPE ="SQUARE”> <LI >Use bullets for non-sequential items. <LI > Use different bullets for visual interest. </UL>

  33. Sample List

  34. DISPLAYING GRAPHICS • Web pages are more interesting and attractive when they include graphics • In a word-processing program such as Microsoft Word, graphics are embedded in the document • In HTML each graphic displayed on a Web page is stored in a separate file, which must be stored on a Web server

  35. Inserting Graphics • Inserting a graphic on a Web page is as simple as placing an <IMG> tag where you want the graphic to appear, like this: <IMG SRC="logo.gif"> • When a file is stored in the same folder as the HTML document in which it is referenced, you can refer to the file name only, without any location information

  36. Inserting Graphics • If you want to store your graphics in a subfolder of the folder containing the text files (to organize your files more tidily), you must refer to the graphic with the subfolder name, such as: <IMG SRC="images/logo.gif">

  37. Inserting Graphics • By default, unless you place the image within a block-level tag such as a paragraph or heading, the image blocks off all the space horizontally. • <img src="banana.jpg" align=“right">

  38. Using an Image as a link • <A HREF = "http://www.stfx.ca"><img src=“pics/XRing.gif“ align=‘right’></a>

  39. Creating Tables • <tableBORDER='2'> • <tr> • <td> 1 </td> • <td> 2 </td> • <td><imgsrc=‘xring.gif'/></td> • </tr> • <tr> • <td> apple </td> • <td> orange</td> • <td> pear </td> • </tr> • </table>

  40. Using Tables anywhere • Make of use of tables anywhere in the webpage to organize your text, images, etc. • Use border=‘0’ for borders not showing.

  41. Adding Comments • Comments are sections of your HTML document that you may add to improve readability, but the Web browser ignores comments when interpreting HTML documents. • Comments are enclosed as follows; <!-- This is a comment -->

  42. Adding Comments Comments can span multiple lines as follows; <!-- This is a multiline comment. Everything between opening and closing tags is considered a comment and is ignored by the Browser -->

  43. ADDING COLORS • SETTING BACKGROUND COLORS • <body bgcolor=“blue"> • SETTING FONT COLOR AND FONT SIZES • <font size="4" color="red">

  44. Summary: Structural and Style Tags

  45. HTML TOOLS • In general, HTML editors fall into two categories: • Text- or code-based, which allows you to see the HTML code as you are creating documents. • WYSIWYG (What You See Is What You Get), which shows the results of code, similar to the way it will appear in a browser, as you are formatting your document.

  46. KompoZer-Easy Web Authoring! • KompoZer is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding. • KampoZer is located at: • S:\Lab Menu\Kompozer • KompoZer is also a FREE download at http://kompozer.net/

  47. HTML Reference • Best HTML tutorial website: http://www.w3schools.com/html/

More Related