California State University Dominguez Hills Beginning Hypertext Markup          Language          (HTML)
Beginning HTML HTML - HyperText Markup Language Text Editor: NotePad, SimpleText Common HTML Editors: Netscape  Compose...
Beginning HTML A system of coding which special online  browsers receive and translate. HTML file is a text file. HTML ...
HTML Tag <HTML> - To begin the HTML file </HTML> - End of HTML file
Major Sections Head Section      <head> </head> Body Section      <body> </body>
Title Tag <Title> </Title> An element of Head  section Determines title bar  display on browser
Body Tag <Body> </Body> Body Attributes   Background Background image file address =”URL”   BGcolor        Background co...
Exercise 1• Open a new file under NotePad.• Create a basic HTML file with tags:          <Html>          <Head>          <...
Exercise 1 – HTML Source <HTML> <HEAD>   <Title>My Web Page</title> </HEAD>                     Black       White <BODY bg...
Exercise 1 – On Browser           <Title>My Web Page</title>text=”#ffffff”         bgcolor=”#000000”
Text Styling<b> </b>        Boldfaces<i> </i>        Italicizes<u> </u>        Underline text<sub> </sub>    Subscript    ...
Character Entities•   <STRONG> Strong: I am strong•   <EM> Emphasis: I am emphasized•   <ABBR> Abbreviation: I am abbrevia...
• <DFN> Definition: Definition• <KBD> Keyboard: Quite like keyboard  strokes• <SAMP> Sample: Sample• <VAR> Programming Var...
Heading Fonts<H1></H1> - Largest heading font<H2></H2> - Bigger than H3<H3></H3> - Bigger than H4<H4></H4> - Bigger than H...
Exercise 2• Open the same file created in Exercise 1 on  NotePad.• Change the current text to heading font.• Add text para...
Exercise 2 – HTML Source<HTML><HEAD><Title>My Web Page</title></HEAD><BODY bgcolor="#000000" text="#ffffff" link="red" vli...
Exercise 2 – Browser View   <h1>This is a basic HTML file. </h1>You can use the text style to emphasize a word or a phrase...
Image Tag <img> - Insert an image on the page No End Tag IMG Attributes:  Src        Location of image file  Alt       ...
Horizontal Line <HR> - Start a new line and draw a horizontal line. No End Tag HR Attributes:  Width        The length ...
Exercise 3• Open the same file from Exercise 2 on NotePad.• Add an image on the page.• Add a horizontal line.• Save the fi...
Exercise 3 – HTML Source<HTML><HEAD><Title>My Web Page</title></HEAD><BODY bgcolor="#000000" text="#ffffff" link="red“ lin...
Exercise 3 – Browser View              <hr width="80%" align="center" size="3"><img src="http://www.csudh.edu/Graphics/Dhb...
Link Tag<A Href> </a> - Insert a link on the page.e.g. <a href=“ http://www.csudh.edu ”>CSUDH Home Page </a>If the place w...
Font Tag <Font> </Font> Font Attributes:  Size     From 1 to 7, 7 is the largest  Color    Color reference  Face     Fon...
+/- Font Size BaseFont Size = 3 (default size) Specify a font size with a signed integer value Format: <Font size=“+n”>...
Paragraph Tag <p> </p> Start a new paragraph with a blank line in  between the previous line. Paragraph attribute:    A...
Line Break <Br> Start a new line without inserting a blank  line between the previous line. No End Tag, but in XHTML it...
Center Tag <Center> </Center> Start a new line and center the text within  the center tag. e.g. <center>Page Heading</c...
List Tags Unordered List   Apple                  • Apple   Orange          (OR)   • Orange   Grapefruit             •...
Unordered List <UL> </UL> Start an unordered (bulleted) list. The  items are tagged using the <Li> tag. Attribute: Type...
Ordered List <OL> </OL> A numbered list structure is identical to an  unnumbered list structure, except it uses <OL>  in...
List Item Tag <Li> No End Tag List item under <UL> or <OL> tag. <UL type=”square”>       Item One <Li>Item One        ...
Indent Tag• <Blockquote> </Blockquote>• Start a new line before and after the indented  paragraph.e.g.  This is a blockquo...
Comment Tag• <!-- -->• Any Text within the comment tag  will be ignored by the browser as  remarks.  e.g.   <!-- Comment g...
Exercise 4• Open the same file from exercise 3 on NotePad.• Add a paragraph tag. <p> </p>• Add a font tag.        <font> <...
Exercise 4 – HTML Source<HTML><HEAD><Title>My Web Page</title></HEAD><BODY bgcolor="#000000" text="#ffffff" link="red" vli...
Exercise 4 – Browser View                                           <font color="yellow"  <p align=justify>               ...
Common Special Characters       Symbol           Entity    Example   Copyright Sign      &copy;    Copyright ©Registered T...
RGB Color    White        #FFFFFF     Red         #FF0000    Green        #00FF00     Blue        #0000FF     Cyan        ...
RGB Color Related Siteshttp://www.hitbox.com/cgi-bin/page.cgi?reference/websafehttp://www.webreference.com/html/tools/colo...
Related Links                                    Page 1HTML Quick Referencehttp://www.cc.ukans.edu/~acs/docs/other/HTML_qu...
Related Links                                  Page 2Symbol Table for HTMLhttp://www.bbsinc.com/symbol.htmlHTML Character ...
Related Links                       Page 3Free Backgroundshttp://www.free-backgrounds.com/Background – FAQhttp://www.two4u...
Beginning HTML  The End
Beginning  html
Upcoming SlideShare
Loading in …5
×

Beginning html

1,118 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,118
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beginning html

  1. 1. California State University Dominguez Hills Beginning Hypertext Markup Language (HTML)
  2. 2. Beginning HTML HTML - HyperText Markup Language Text Editor: NotePad, SimpleText Common HTML Editors: Netscape Composer, MS Word, MS FrontPageThis workshop will enable you to understand enough to make better use of such tools.
  3. 3. Beginning HTML A system of coding which special online browsers receive and translate. HTML file is a text file. HTML is full of < > tags. Start Tag: < > End Tag: </ >
  4. 4. HTML Tag <HTML> - To begin the HTML file </HTML> - End of HTML file
  5. 5. Major Sections Head Section <head> </head> Body Section <body> </body>
  6. 6. Title Tag <Title> </Title> An element of Head section Determines title bar display on browser
  7. 7. Body Tag <Body> </Body> Body Attributes Background Background image file address =”URL” BGcolor Background color =”color reference” Text Default text color =”color reference” Link Hyperlink color =”color reference” VLink Visited link color =”color reference” Note: Color Reference is RGB Color. Please refer to handout on page 7.
  8. 8. Exercise 1• Open a new file under NotePad.• Create a basic HTML file with tags: <Html> <Head> <Body> <Title>• Save the file and view it on the browser.
  9. 9. Exercise 1 – HTML Source <HTML> <HEAD> <Title>My Web Page</title> </HEAD> Black White <BODY bgcolor=”#000000” text=”#ffffff” link=”red” vlink=”blue”> This is a basic HTML file. RGB Color # </BODY> </HTML>
  10. 10. Exercise 1 – On Browser <Title>My Web Page</title>text=”#ffffff” bgcolor=”#000000”
  11. 11. Text Styling<b> </b> Boldfaces<i> </i> Italicizes<u> </u> Underline text<sub> </sub> Subscript text<sup> </sup> Superscript text<big> </big> Text is made larger than current size<small> Text is made smaller than current size</small><strong> Logical form for strong emphasis</strong>
  12. 12. Character Entities• <STRONG> Strong: I am strong• <EM> Emphasis: I am emphasized• <ABBR> Abbreviation: I am abbreviated• <CITE> Citation: Citation• <CODE> Code: I am programming code
  13. 13. • <DFN> Definition: Definition• <KBD> Keyboard: Quite like keyboard strokes• <SAMP> Sample: Sample• <VAR> Programming Variable: Programming Variable
  14. 14. Heading Fonts<H1></H1> - Largest heading font<H2></H2> - Bigger than H3<H3></H3> - Bigger than H4<H4></H4> - Bigger than H5<H5></H5> - Bigger than H6<H6></H6> - Smallest heading font
  15. 15. Exercise 2• Open the same file created in Exercise 1 on NotePad.• Change the current text to heading font.• Add text paragraph using different text styling tags.• Save the text file.• Refresh browser to see the updated page.
  16. 16. Exercise 2 – HTML Source<HTML><HEAD><Title>My Web Page</title></HEAD><BODY bgcolor="#000000" text="#ffffff" link="red" vlink="blue"><h1>This is a basic HTML file. </h1>You can use the text style to emphasize a word or a phrase in aparagraph, such as <b>bold</b>, <I>italic</I>, <u>underline</u>,<sup>superscript</sup>, <sub>subscript</sub>.</BODY></HTML>
  17. 17. Exercise 2 – Browser View <h1>This is a basic HTML file. </h1>You can use the text style to emphasize a word or a phrase in a paragraph,such as <b>bold</b>, <I>italic</I>, <u>underline</u>,<sup>superscript</sup>, <sub>subscript</sub>.
  18. 18. Image Tag <img> - Insert an image on the page No End Tag IMG Attributes: Src Location of image file Alt Substitute text for display Align Text alignment: bottom, middle, top Height Number of pixels of the height Width Number of pixels of the width Border Size of border, 0 for no border e.g. <img src=”image.jpg” alt=”example image” align = ”middle” border=”0”>
  19. 19. Horizontal Line <HR> - Start a new line and draw a horizontal line. No End Tag HR Attributes: Width The length of the horizonal line from left to right. (in pixel or % of screen size) Align Alignment: left, center, right Size Height size of the horizontal line. NoShade Delete the shading below a regular horizontal line. e.g. <hr width=”500” align=”center” size=”2” noshade>
  20. 20. Exercise 3• Open the same file from Exercise 2 on NotePad.• Add an image on the page.• Add a horizontal line.• Save the file.• Click the refresh button on browser to see the updated page.
  21. 21. Exercise 3 – HTML Source<HTML><HEAD><Title>My Web Page</title></HEAD><BODY bgcolor="#000000" text="#ffffff" link="red“ link="blue"><h1>This is a basic HTML file.</h1><hr width="80%" align="center" size="3">You can use the text style to emphasize a word or a phrase in a paragraph, such as <b>bold</b>, <i>italic</i>, <u>underline</u>, <sup>superscript</sup>, <sub>subscript</sub>.<img src="http://www.csudh.edu/Graphics/Dhbanner.gif"Alt="CSUDH Banner" height="65" width="330" border="0"></BODY></HTML>
  22. 22. Exercise 3 – Browser View <hr width="80%" align="center" size="3"><img src="http://www.csudh.edu/Graphics/Dhbanner.gif"Alt="CSUDH Banner" height="65" width="330" border="0">
  23. 23. Link Tag<A Href> </a> - Insert a link on the page.e.g. <a href=“ http://www.csudh.edu ”>CSUDH Home Page </a>If the place where you desire to link to is on the sameserver, all you need to put in is<a href=“ /visitors/visitors.html”>CSUDH Visitors Page </a>If the place where you desire to link to is within the samefolder, you can put in<a href=” index.html ”> CSUDH Index Page </a>
  24. 24. Font Tag <Font> </Font> Font Attributes: Size From 1 to 7, 7 is the largest Color Color reference Face Font type e.g. Arial, Courier, Helvetics, etc.e.g. <font size=”4” color=”#ff0000” face=”arial”>Font color is red</font>
  25. 25. +/- Font Size BaseFont Size = 3 (default size) Specify a font size with a signed integer value Format: <Font size=“+n”> </font> <Font size=“-n”> </font> +n for bigger font size -n for smaller font size where n is a positive integer Font size +n/-n = BaseFont Size +n/-n e.g. <font size=“+2”> <font size=“5”>
  26. 26. Paragraph Tag <p> </p> Start a new paragraph with a blank line in between the previous line. Paragraph attribute: Align Alignment: left, center, right, justify e.g. <p align=”justify”>
  27. 27. Line Break <Br> Start a new line without inserting a blank line between the previous line. No End Tag, but in XHTML it has an ending tags
  28. 28. Center Tag <Center> </Center> Start a new line and center the text within the center tag. e.g. <center>Page Heading</center>
  29. 29. List Tags Unordered List  Apple • Apple  Orange (OR) • Orange  Grapefruit • Grapefruit Ordered List 1. Apple i. Apple 2. Orange (OR) ii. Orange 3. Grapefruit iii. Grapefruit List Item
  30. 30. Unordered List <UL> </UL> Start an unordered (bulleted) list. The items are tagged using the <Li> tag. Attribute: Type – disk, circle, square• Apple o Apple  Apple• Orange o Orange  Orange• Grapefruit o Grapefruit  Grapefruit
  31. 31. Ordered List <OL> </OL> A numbered list structure is identical to an unnumbered list structure, except it uses <OL> instead of <UL>. Attribute: Type – 1, A, a, I, i 1. Apple a. Apple i. Apple 2. Orange b. Orange ii. Orange 3. Grapefruit c. Grapefruit iii. Grapefruit I. Apple A. Apple II. Orange B. Orange III. Grapefruit C. Grapefruit
  32. 32. List Item Tag <Li> No End Tag List item under <UL> or <OL> tag. <UL type=”square”>  Item One <Li>Item One  Item Two <Li>Item Two </UL>
  33. 33. Indent Tag• <Blockquote> </Blockquote>• Start a new line before and after the indented paragraph.e.g. This is a blockquoteexample. <Blockquote> Increased indent line </blockquote> Decreased indent line This is a blockquote example. Increased indent line Decreased indent line
  34. 34. Comment Tag• <!-- -->• Any Text within the comment tag will be ignored by the browser as remarks. e.g. <!-- Comment goes here -->
  35. 35. Exercise 4• Open the same file from exercise 3 on NotePad.• Add a paragraph tag. <p> </p>• Add a font tag. <font> </font>• Add a link tag. <a href> </a>• Add a line break tag. <br>• Add a center tag. <center> </center>• Add an ordered list. <ol> <li> </ol>
  36. 36. Exercise 4 – HTML Source<HTML><HEAD><Title>My Web Page</title></HEAD><BODY bgcolor="#000000" text="#ffffff" link="red" vlink="blue"><h1>This is a basic HTML file.</h1><hr width="80%" align="center" size="3"><p align=justify>You can use the text style to <font color="yellow"face="courier">emphasize</font> a word or a phrase in a paragraph,such as <b>bold</b>, <I>italic</I>, <u>underline</u>, <sup>superscript</sup>, <sub>subscript</sub>. </p><a href="http://www.csudh.edu"><img src="http://www.csudh.edu/Graphics/Dhbanner.gif" Alt="CSUDH Banner" height="65" width="330" border="0"> </a><br><a href="http://www.csudh.edu/index.html">CSUDH Index Page</ a><center>Here is the list</center><ol type="i"> <li>Orange <li>Yellow <li>Blue </ol></BODY></HTML>
  37. 37. Exercise 4 – Browser View <font color="yellow" <p align=justify> face="courier"><ol type="i"><li>Orange<li>Yellow<li>Blue </ol> <center>Here is the list</center> <a href="http://www.csudh.edu/index.html">CSUDH Index Page</a>
  38. 38. Common Special Characters Symbol Entity Example Copyright Sign &copy; Copyright ©Registered Trademark &reg; MagiCo ® Trademark ™ Webfarer™ Less Than &Lt; < Greater Than &gt; > Ampersand &amp; & Nonbreaking Space &nbsp; Em Dash — — Quotation Mark &quot; “
  39. 39. RGB Color White #FFFFFF Red #FF0000 Green #00FF00 Blue #0000FF Cyan #00FFFF Yellow #FFFF00 Black #000000 Dim Grev #545454 Forest Green #238E23 Grey #C0C0C0 Midnight Blue #2F2F4F Orange #FF7F00 Spring Green #00FF7F Turquoise #ADEAEA
  40. 40. RGB Color Related Siteshttp://www.hitbox.com/cgi-bin/page.cgi?reference/websafehttp://www.webreference.com/html/tools/colorizer/http://www.webreference.com/dev/graphics/palette.htmlhttp://www.hypersolutions.org/pages/rgbhex.htmlhttp://www.htmlhelp.com/cgi-bin/color.cgi
  41. 41. Related Links Page 1HTML Quick Referencehttp://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtmlW3C HTML Guidehttp://www.w3.org/MarkUp/HTML Guidehttp://html.about.com/compute/html/cs/htmltags/index.htmHTML Tags Guidehttp://www.willcam.com/cmat/html/crossref.htmlThe HTML Writers Guildhttp://www.hwg.org/
  42. 42. Related Links Page 2Symbol Table for HTMLhttp://www.bbsinc.com/symbol.htmlHTML Character Sethttp://www.natural-innovations.com/boo/doc-charset.htmlHTML Guidehttp://html.about.com/compute/html/cs/htmltags/index.htm
  43. 43. Related Links Page 3Free Backgroundshttp://www.free-backgrounds.com/Background – FAQhttp://www.two4u.com/bg-faq/Buttons, Bullets, and Backgroundshttp://www.rewnet.com/bbb/http://www.graphics-4free.com/http://coolgraphics.com/gallery/
  44. 44. Beginning HTML The End

×