HTML Basic Essentials for Web Optimization
By Alex Skorohodov
KosmosCentral.com
HTML involves using distinct language commands, known as HTML tags. These HTML tags specify the format and appearance of page elements, such as text, coloring & images. When an individual opens an HTML document in a web browser it will display according to the specs of the various HTML tags. One way to become familiar with HTML is to just view existing code on web pages. The HTML code for every website on the internet is available for view on line by viewing the source code. View simple websites first then graduate to the more complex sites. Here's how to view the HTML source code:
1. On the page you wish to read, select the view tab in the
upper-left corner of your browser screen.
2. Under the view menu, select Source.
3. Then the HTML source code will automatically open up in a
new window.
As you learn more about source code, keep referring back on how to view different pages.
TagsHTML uses commands also known as "tags," which surround the words and phrases in your document. These tags will serve a variety of functions including appearance of pages and text. Tags are placed before and after blocks of text and are signified as a beginning tag (<>), placed before a block of text and the end tag (</>), which is enclosed in angle brackets with a forward slash at the end of the block of text. Most tags are used in pairs, referring to the quote-like format they resemble before and after text. The first tag will serve as a marker telling your browser to begin the attribute you indicated (text color, bold, italics, etc.). The second tag signifies the end of the attribute. HTML tags are not case sensitive and will work with all mixtures of lower and uppercase letters.
HTML TagAll HTML pages must start with the <HTML> tag at the top of the page to allow the internet browser to recognize what type of document it is viewing and a closing tag </HTML> for the browser to recognize the end of the page.
Head TagHTML pages are divided into two sections; a head and body. The head area will refer to the non visible page header and will contain tags that describe the page, such as Title TAG and Meta Tags. The body area will contain the actual visible text and graphics that appear in the web browser window. The opening head tag is written as <Head> and the closing head tag is written as </Head>. Body tags will be discussed later.
Title TagThe Title Tag represents the title of the page. When viewing an HTML page in a browser, the content of the Title tag will be visible at the very top of the window, above the File, Edit, And View menus. In the Explorer browser, this is the blue bar at the top of your screen. For Example <title>Google</title> will show up as "Google" in the upper left hand corner of the web browser.
Meta TagsMeta tags usually appear after the Title tag, but Meta Tags are not visible anywhere in the browser. The two most common Meta Tags are the "Meta Keyword Tags" and "Meta Description Tags." The Meta keyword tags contain a list of keywords and descriptions web page builders would like search engines to index. The Meta description tag contains a description of your site or page as you would like the engines to index.
Some search engines will list your site's Meta Tag Description and some search engines will ignore your Meta Description Tag and instead use the first 25 or so words on that page as the description.
Contrary to popular belief, Meta Tags are counted as a small fraction among the many factors used in a search engine algorithm when spidering your site, if even factored at all.
Body TagThe Body tag marks the beginning of the body area of an HTML document. The body area will contain all the text and graphics visible in a browser window. For example; if we wanted to show "KosmosCentral" in the body area only we would use the following syntax:
<Body> KosmosCentral </Body>
Paragraph TagThe paragraph tag <p> specifies the beginning of a paragraph. This tag causes a line break and allows for formatting options for the new paragraph. The end of the paragraph is specified with a closing paragraph tag, </p>.
Break TagBreak tags <br> are an example of a single tag and is used to break text whenever you wish your writings to begin on the next line. If you don't use the break tag then your writings will automatically wrap when it reaches the right margin of the browser window. The break tag allows you to force a line break between specific texts without the optional attributes of a paragraph tag.
Italic & Bold<b> is the beginning bold tag and </b> is the ending
bold tag. It you wished to italicize a phrase you would use <i> in
the beginning of the phrase and </i> at the end of the
phrase. So if you wished to use both for "KosmosCentral" it
would look like;
<b><i>KosmosCentral</i></b> which gives you: KosmosCentral
Heading tags are used to make your page headings stand out. There are six heading commands to choose from, <H1> through <H6>. <H1> is the larges heading and <H6> being the smallest heading and must be used in pairs.
Font Size TagsFont size tags work similarly to Header tags and have 12 sizes
in all, which are sizes +6 through -6. The syntax is slightly
different than header tags and is used as follows;
<Font size = "+2"> KosmosCentral </Font>
A hyperlink is a link from one web page to another. An example of a hyperlink to KosmosCentral's home page looks like this:
<A HREF = "http://www.KosmosCentral.com"> Click to go to KosmosCentral for more info </A>
The "A" stands for Anchor, specifying that a link will be anchored to the destination url specified by the HREF attribute.
HREF stands for "hypertext reference." This is an attribute of the Anchor tag that indicates the destination URL of the link.
http://www.KosmosCentral.com is the destination url of the link and "Click to go to KosmosCentral for more info." is the text that will appear on the web page.
Image TagThe image tag is a single tag inserting an image or graphic,
which looks like:
<img Src = "Filename" Alt = "Alternate text">
Img specifies that this is an image tag, Src = "Filename" specifies the file source of the image you want to display and ALT = "Alternate text" specifies the alternate text or ALT text. The alternative or alt text is the text that will display if the web surfer has images turned off on their browser. The alt text will also display if the surfer places his mouse over the image long enough. Some search engines will consider alt text as one of the criteria for their algorithm ranking system.
Comment TagComment tags are not seen by the web surfer, but are used for
code writers to insert comments to make their code more readable
by explaining the purpose of that section of code writing. The
comment tag is paired and looks like:
Open comment <!--
Close comment -->
Everything that is displayed by the open and closed comments
will not be displayed on a web browser.
Some Search engines consider text within comment tags as one
of the criteria for their algorithm ranking system.
Save HTML documents as ".htm" or ".html" and make sure you always save your documents with one of these two extensions file names.
Default or Home PageThe home page or Default page is usually named either index.html or index.htm. Some web servers will use default.htm or default.html instead. If you type just the domain name of the site into the address bar or a browser without specifying a specific page then the server will display the default or home page for that site.