(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
Top Related