HTML Lecture Part 1 of 2
22
(X)HTML: The Basics
-
Upload
sharon-wasden -
Category
Education
-
view
5.210 -
download
3
description
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.
Transcript of HTML Lecture Part 1 of 2
(X)HTML: The Basics
What is (X)HTML?
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
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…
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
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">
What’s the markup?
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!
<h1>Content Here</h1>Tag name
Angle Brackets
Opening tag
Closing tag
Most commonly used tags• <html>Content Here</html>
• Text placed between the angled brackets describes the Web page
• Opening tag is very first displayed in the markup after DOCTYPE
• Closing tag is the very last displayed in the markup
• <title>Content Here</title>• Text placed between the angled brackets describes
the title of the Web page
• <body>Content Here</body>• Text placed between the angled brackets describes
the visible page content
• <h1>Content Here</h1>• Text placed between the angled brackets displays as a
heading
• h1 (largest heading), h2, h3, h4, h5, h6 (smallest heading)
• <p>Content Here</p>• Text placed between the angled brackets displays as a
paragraph
• <i>Content Here</i>
• Italics
• <b>Content Here</b>• Bold
• <font>Content Here</font>• Describes the font you’re using
• <q>Content Here</q>• Displays quotation marks around content
• • Adds a space
• <br />• Adds a line break
• Empty/Self-Closing tag
• <br /> —space before the slash mark makes it compatible with older browsers
• <hr />• Adds a horizontal line
• <img />• Adds an image to your page
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
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>
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> <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>
Wait, there’s more
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
<font face="verdana">Content Here</font>
Attribute
Value
Commonly used attributes and values• face
• Describes a typeface
• <font face="garamond">This is Garamond.</font>
• color• Describes a tag’s color
• <font color="#FFFF00">This is yellow text.</font>
• <hr color="#80ff80" />
• bgcolor• Describes a background color for your page
• <body bgcolor="#FFFF00">Content Here</body>
• src• Describes your image source
• <img src="http://www.interestment.co.uk/wp-content/uploads/2009/04/lampard-poodle.jpg" />
• alt• Specifies an alternate text for an image
• <img src="http://www.interestment.co.uk/wp-content/uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle />
• width• Specifies the width of an image or horizontal line
• Use pixels
• <img src="http://www.interestment.co.uk/wp-content/uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle width="100" />
• Or use percentages
• <img src="http://www.interestment.co.uk/wp-content/uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle width="50%" />
• If you don’t include the height attribute, the image will be resized proportionately
• height• Specifies the height of an image
• Use pixels or percentages
• <img src="http://www.interestment.co.uk/wp-content/uploads/2009/04/lampard-poodle.jpg" alt=Crazy Poodle width="50%" height="20%" />
• If you don’t include the width attribute, the image will be resized proportionately
• size• Specifies the height of a typeface [-8(–)+8]
• <font face="garamond" size="+5" height="60">This is Garamond.</font>
Hyperlink (Anchor) attributes and values
• href• Describes your hyperlinked Web source
• <a href="http://www.google.com">Click here to go to Google!</a>
• name• Describes a name anchor (bookmark)
• Enables travel within a single html document
• First create your bookmarks
• <a name="P1">Paragraph One</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>
• target• Describes the browser window you want the
hyperlink to open in
• _blank, _self, _parent, _top
• Opens hyperlink in a new browser window
• <a href="http://www.google.com" target="_blank">Click here to go to Google!</a>
• Opens hyperlink in the current browser window
• <a href="http://www.google.com" target="_self">Click here to go to Google!</a>
Now what?
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
• Use only lowercase letters!
• No spaces !
• You must include the .html extension!
I need more tags!http://cedesign.net/help2j.htm
http://www.w3schools.com/tags/
Web-Safe Fontshttp://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Web-Safe Colorshttp://ficml.org/jemimap/style/color/wheel.html
http://www.webmonkey.com/reference/Color_Charts
More sourceshttp://www.tizag.com/htmlT/
http://www.learningnerd.com/series/xhtml-css
