These lessons are simple, easy to follow, and critically will remain relevant. going forward.
For Addtional Resources, try HTML5: Up and Running
or The Definitive Guide to HTML5
1.1 HTML Conventions
HTML has very basic conventions that are easy to learn and use. Every tag has a corresponding closing tag. The closing tag will always contain a forward slash ( / ) to signify that that is what it is. Your page will not look correct if you leave out the closing tag. Also it is considered to be good style to type all your code in uppercase letters except for filenames which are allways typed in lowercase letters. This makes it easier to see against the text to be displayed on the page. Filenames should also always be in quotes“” as should all atributes. Also in the case of different spellings for words, use the American spelling e.g. use color not colour.
1.2 Basic Page
Every HTML document has several basic elements common to all documents. These tell the browser information on how to display the page. Typically these include the HEAD, BODY, and TITLE tags, as well as those that identify the specific type of document. The basic code for a web page should look like:
<HTML>
<HEAD>
<TITLE>This is the title of the page displayed in the browsers title bar</TITLE>
</HEAD>
<BODY>
The body of the document is inserted between the body tags
</BODY>
</HTML>
1.3 Text FormattingParagraphs
HTML has several methods to format text. First there is the paragraph tag <P></P> used to identify the beginning and end of a paragraph. The <P> goes at the beginning of the paragraph and the </P> signifies the end of the paragraph.
Headings
HTML allows for the use of six different size headings. These headings are of various sizes and usually are bold text . These headings would be coded as
<H1></H1> Largest Heading
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6> Smallest Heading
Heading one is larger then heading two and so on.
Fonts
HTML allows for the use of multiple colors and true type fonts. These are used with the font <FONT></FONT> tag. The attribute size is used and is specified as a number between -4 and +3 including +0. The attribute is entered with the positive or negative sign, so a tag for a +1 font size would look like:
<FONT SIZE="+1">The text to be affected goes here</FONT>
For how to use color please see the color chapter later in the book
Logical Style vs. Physical Style
Logical and Physical Styles are two different ways to set the appearance of text in a HTML document. Logical style tells the browser what is being done and the browser figures out how to display it. Logical tags are
<DFN></DFN> Definition
<EM></EM> Emphasis
<CITE></CITE> Titles of books, videos, media, etc.
<CODE></CODE> Computer code e.g. Visual Basic, C++, C, HTML
<STRONG></STRONG> Strong Emphasis
There are others however they are rarely used. Physical style specifically tells a browser what to do to text, bold and italics. Logical style should not be used with physical style and physical style should not be used with logical style in the same document. Physical style has tags such as
<BLINK></BLINK> Blinking text
<SUP></SUP> Supper Script
<SUB></SUB> Sub Script
<B></B> Bold
<I></I> Italics
<TT></TT> Typewriter Text
Miscellaneous Formatting
There are two other text formating tags used. The <PRE></PRE> tag will display text with spaces and alignment exactly as it is typed. The <BLOCKQUOTE></BLOCKQUOTE> tag is used for lage quotations, the quote going between the starting and closeing tag. The blockquote can also be used to give a margin to a whole page, just place the starting tag under the body tag, and the closeing above the end body tag.
To center text use the <CENTER></CENTER> tag. You place the text inbetween the opening and closeing tags. The line break tag <BR> and the horizontal rule <HR> are the excption to the rule. These tags have no closeing tag. The line brake tag is used to cause the browser to skip a line, and to continue to display the text on the next line. The horizontal rule tag is used for createing a line accross the page as a divider or section break
Lists
One of the best ways to layout data is with a list. Lists have several varieties but 2 out of three are very simalar. The 3 types of lists are
· unordered (bullets)
· numbered (numbers)
· definition
for numbered and unordered lists each element uses the line item tag <LI></LI> the text for the list goes between the two tags. The unoredered list elements are placed between the <UL></UL> tags and the numbered list is placed between the <OL></OL> tags. For example bellow is a small unordered list
<UL>
<LI>First item</LI>
<LI>second item</LI>
</UL>
the ordered list is exactly the same except that you replace the <UL></UL> Tags with the <OL></OL>
A Definition list is a bit different it requires more tags. You put the list elements between the <DL></DL> tags. The term to be defigned has the <DT></DT> Definition term tag and goes between the opening and closeing tags the definition itself goes between the <DD></DD> Definition tags. You can make the term and deffinition be on the same line by adding the compact atribute to to the <DL> tag so it looks like <DL COMPACT>
No comments:
Post a Comment