Html Basic Codes
Week Two
Start Your Text Editor
• Windows use 'Notepad’
• Macintosh use 'Simple Text'
First HTML tags
• <html><html>
• The first tag you type in an HTML document is a tag which identifies the language you are using. This tag consists of the letters HTML surrounded by angle brackets.
Document Header
• <head><head>
• Below and nested inside the <html><html> tag.
• The <head><head> is a crucial section of your document since it contains the document title and information that will help Internet search engines catalog your document correctly.
Title Tag
• <title><title>• On the line below and Nested in your
<head><head> tag.• This is the tag we use to mark the beginning
of your page title, and search engines use it to catalog your site.
• Where do you see the Title on The Browser?
Closing the Tag
• “/” or </ >
• <html><head><title>First Tag Page </title> </head>
• </html>
Meta Tag Description
• <meta>• <meta name="description" content="Write a
description of your page between the quotes here. Try to use less than 250 characters, if you can. Make sure and finish up with a quote mark and an angle bracket. / ">
Body Tag
• <body>
• On the line below the closing <</head>head> tag.
• The actual contents of your web page is nested between the Body tag.
What it Looks like
• <html><head><title>First Code Page </title> <meta name="description" content=”? /></head><body>This is my Content
• </body></html>
Save your Work
• All HTML documents must have an ".html" extension and MUST be saved in "text" format.
• There are other extensions
• Click the FILE menu > SAVE AS > in the FILENAME box, you type index.html
View Your Web Page
• Launch your Web Browser and select FILE > OPEN.
• Each browser and platform may have a different menu selection.
• Locate your index.html file and open it.
Line breaks
• <br /> Line Break
• This starts a new line.
• NO closing tag is needed, just include the ending slash to conform to XML standards.
• <p> Paragraph
• This skips one line and starts a new line.
• A closing tag is needed. </p>
Horizontal Lines
• <hr /> This tag makes a very fine shaded horizontal line.
Horizontal Line Attributes
• Width <hr width=“50%” />• Size (thickness) <hr width=50% size=“10” />• Align can be left or right. default is center.
<hr width=“50%” size=“10” align=“right” />• Color <hr align="left" color="#000080" />• Noshade makes the line dark For
example,<hr align=“right” noshade />
Blank Space
• (ampersan)
• This is a non-breaking space tag.
Heading tags
• <h1> ... </h1> through <h6> ... </h6>
• This tag controls the size of text.
Font tag
• <font>
• The <font> tag can control the size, color, and face of your text.
FONT SIZE
• <font size=”?">
• Font sizes range from 1-7 with 1 being the smallest and 7 being the largest.
• The default size for text is 3.
Font Color
• <font color=”?">
• You can use Color names or Hex Numbers
Font Face
• <font face=”?">• < font face ="Arial, Helvetica, sans-serif">• Be very careful using this attribute.
Aligning text
• <p align=“right”> the text that follows aligns along the right hand side of the page.
• <hr /> <hr align=“right” width=“60%” />
• <center> This tag will cause whatever follows to be centered in the next line in the page. Must have a closing tag </center> .
Creating an Indented Paragraph
• <blockquote> ... </blockquote>
• These tags mark the beginning and end of a paragraph that will be indented about one-half inch on both the left and right sides.
• <blockquote><blockquote> This paragraph is going to be indented quite a bit more.</blockquote></blockquote>
Adding Bold, Italic and Underlines
• <b> ... </b> used to make your text bold.
• <i> ... </i> used to italicize your text.
• <u> ... </u> used to underline your text.
Homework
• First Code: On one page, turn in the code for a web page which contains the following elements:basic tags [5 points], headings [5 points], font size, color, face, [10 points], break tags [5 points], formatting tags [5 points]
Quiz & Questions
• 10 question multiple choice
• Questions?
Recommended
