HTML Lecture Part 1 of 2

8,934 views

Published on

This is Part 1 of a two-lecture series on implementing HTML. I created this lecture in an effort to keep my design students from "fearing the code" they encounter in an introductory level course to Dreamweaver and Web Site design.

Published in: Education
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
8,934
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
377
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

HTML Lecture Part 1 of 2

  1. 1. (X)HTML: The Basics
  2. 2. What is (X)HTML?
  3. 3. What you need to know• HTML • Hypertext Markup Language • A Computer language used to add objects and other information to a Web page • Not a programming language, it’s a markup language• Markup Language • A set of markup tags• HTML Tags • Surrounded by angle brackets <> • <html> • Come in pairs • <b>Content Here</b> • Start Tag = first tag —also called an opening tag • End Tag = second tag —also called a closing tag• HTML Documents = Web Pages • Describe Web pages • Contain HTML tags and plain text
  4. 4. More stuff to know• XHTML • Extensible Hypertext Markup Language • Very similar to HTML—same concept • Newer and Stricter than HTML, but the two terms are often used interchangeably • A sort of cross between HTML and XML (Extensible Markup Language)• XML • A set of rules used to encode electronic documents • Employed to increase compatibility among electronic documents and satisfy current Web standards • Employed to increase compatibility between electronic documents and the Web• CSS • Cascading Style Sheets • A type of computer language used to specify how a web page should be presented • Font colors, positioning, line spacing, borders, etc…
  5. 5. Two types of HTML and XHTML• Strict • The only one you should use • Do not use outdated tags • Everything in lowercase!• Transitional • Use only when dealing with a page that is in the process of being updated to the new version
  6. 6. HTML strict document type declaration• DOCTYPE• Document type declaration• Always the first thing typed into your HTML document• Appears BEFORE opening tag• Tells the browser which version and what type of (X)HTML you are using• Does not display as visual content on your Web page• More forgiving than XHTML, so we will stick with what’s below<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
  7. 7. What’s the markup?
  8. 8. Anatomy of a tag• An (X)HTML tag is a name/keyword surrounded by angle brackets• The closing tag needs a slash (/) before the tag name• opening tag + closing tag + content = (X)HTML element —Below is an example of the h1 (X)HTML element• Use only lowercase letters! Closing tag Tag name <h1>Content Here</h1> Opening tag Angle Brackets
  9. 9. Most commonly used tags• <html>Content Here</html> • Italics • Text placed between the angled brackets describes the Web page • <b>Content Here</b> • Opening tag is very first displayed in the markup • Bold • after DOCTYPE Closing tag is the very last displayed in the markup • <font>Content Here</font> • Describes the font you’re using• <title>Content Here</title> • <q>Content Here</q> • Text placed between the angled brackets describes • Displays quotation marks around content the title of the Web page• <body>Content Here</body> • &nbsp; • Text placed between the angled brackets describes • Adds a space the visible page content • <br />• <h1>Content Here</h1> • Adds a line break • Text placed between the angled brackets displays as a • Empty/Self-Closing tag heading • <br /> —space before the slash mark makes it • h1 (largest heading), h2, h3, h4, h5, h6 (smallest compatible with older browsers • heading) <hr />• <p>Content Here</p> • Adds a horizontal line • • Text placed between the angled brackets displays as a paragraph <img /> • Adds an image to your page• <i>Content Here</i>
  10. 10. Even more commonly used tags• <a>Content Here</a> • Displays a hyperlink• <ol>Content Here</ol> • Displays an ordered list • Uses numbers for list items• <ul>Content Here</ul> • Displays an unordered list • Uses bullets for list items• <li>Content Here</li> • Used in an unordered or ordered list to separate the items in a list <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>• <center>Content Here</center> • Centers content on a page
  11. 11. Yes, (X)HTML can be nested• (X)HTML elements can be nested inside of each other <p><h1><i>Content Here</i></h1></p>• When nesting elements, the first tag opened, must be the last tag closed •GOOD <p><h1><i>Content Here</i></h1></p> •BAD <p><h1></i>Content Here</p></h1></i>
  12. 12. Putting it to work<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><title>My Great Web Page</title><body><h1>My first heading</h1><h2>My second heading</h2><h3>My third heading</h3><h4>My fourth heading</h4><h5>My fifth heading</h5><h6>My sixth heading</h6>&nbsp;<h1><i>My italic heading</i></h1><h2><b>My bold heading</b></h2><p>This is a paragraphwith no line breaks.</p><p>This<br />is a<br />paragraph<br />with<br />line breaks<br /></p></body></html>
  13. 13. Wait, there’s more
  14. 14. Attributes• Adds extra information to an (X)HTML tag• The value for an attribute can be placed within either single or double quotes• Always go inside the opening tag• Tags can have multiple attributes • Separate each attribute with a space Attribute <font face="verdana">Content Here</font> Value
  15. 15. Commonly used attributes and values• face • width • Describes a typeface • Specifies the width of an image or horizontal line • <font face="garamond">This is Garamond.</font> • Use pixels • <img src="http://www.interestment.co.uk/wp-• color content/uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle width="100" /> • Describes a tag’s color • Or use percentages • <font color="#FFFF00">This is yellow text.</font> • <img src="http://www.interestment.co.uk/wp- • <hr color="#80ff80" /> content/uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle width="50%" />• bgcolor • If you don’t include the height attribute, the image will • Describes a background color for your page be resized proportionately • <body bgcolor="#FFFF00">Content Here</body> • height• src • Specifies the height of an image • Describes your image source • Use pixels or percentages • <img src="http://www.interestment.co.uk/wp-content/ • <img src="http://www.interestment.co.uk/wp-content/ uploads/2009/04/lampard-poodle.jpg" /> uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle width="50%" height="20%" />• alt • If you don’t include the width attribute, the image will be resized proportionately • Specifies an alternate text for an image • <img src="http://www.interestment.co.uk/wp-content/ • size uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle /> • Specifies the height of a typeface [-8(–)+8] • <font face="garamond" size="+5" height="60">This is Garamond.</font>
  16. 16. Hyperlink (Anchor) attributes and values• href • target • Describes your hyperlinked Web source • Describes the browser window you want the • <a href="http://www.google.com">Click here to go hyperlink to open in to Google!</a> • _blank, _self, _parent, _top • Opens hyperlink in a new browser window• name • <a href="http://www.google.com" • Describes a name anchor (bookmark) target="_blank">Click here to go to Google!</ a> • Enables travel within a single html document • Opens hyperlink in the current browser window • First create your bookmarks • <a href="http://www.google.com" • <a name="P1">Paragraph One</a> target="_self">Click here to go to Google!</a> • Next, create your hyperlink that will take you to the bookmark of your choice • <a href="#P1">Click to Return to Paragraph One</a>
  17. 17. Now what?
  18. 18. Using TextEdit• TextEdit is the Plain Text Editor for Mac users • Finder ➞ Applications ➞ TextEdit • PC Users will use Notepad • Google Search for other available plain text editors if necessary• Once in TextEdit ➞ Format ➞ Make Plain Text • File ➞ Save As ➞ index.html • lowercase letters! Use only • No spaces ! • You must include the .html extension!
  19. 19. I need more tags! http://cedesign.net/help2j.htm http://www.w3schools.com/tags/
  20. 20. Web-Safe Fontshttp://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  21. 21. Web-Safe Colors http://ficml.org/jemimap/style/color/wheel.html http://www.webmonkey.com/reference/Color_Charts
  22. 22. More sources http://www.tizag.com/htmlT/http://www.learningnerd.com/series/xhtml-css

×