22
(X)HTML: The Basics

Html Tags

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Html  Tags

(X)HTML: The Basics

Page 2: Html  Tags

What is (X)HTML?

Page 3: Html  Tags

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

Page 4: Html  Tags

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…

Page 5: Html  Tags

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

Page 6: Html  Tags

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">

Page 7: Html  Tags

What’s the markup?

Page 8: Html  Tags

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

Page 9: Html  Tags

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

• &nbsp;• 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

Page 10: Html  Tags

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

Page 11: Html  Tags

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>

Page 12: Html  Tags

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>

Page 13: Html  Tags

Wait, there’s more

Page 14: Html  Tags

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

Page 15: Html  Tags

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>

Page 16: Html  Tags

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>

Page 17: Html  Tags

Now what?

Page 18: Html  Tags

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!

Page 19: Html  Tags

I need more tags!http://cedesign.net/help2j.htm

http://www.w3schools.com/tags/

Page 20: Html  Tags

Web-Safe Fontshttp://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Page 22: Html  Tags

More sourceshttp://www.tizag.com/htmlT/

http://www.learningnerd.com/series/xhtml-css