Take 12 Minutes to Learn
the 12 HTML Elements You Will Need First.
Basic Webpage Setup
First you should know the overall, basic structure for a web page. The
structure for the web page can be broken down like this:
Basic HTML document structure.
<HTML> - Indicates the start of your HTML document.
<HEAD> - Contains information about the page such as the
TITLE, META tags for proper Search
Engine indexing, STYLE tags, which determine the page layout, and
JavaScript coding for special effects.
<TITLE> - The TITLE of your page. This will be displayed
in the title bar of the viewer's browser.
</TITLE> - Closes the <TITLE> tag. All text
between the two tags will be the Title that is shown in the Browsers
Title Bar.
<meta name="description" content="replace this text with your
description"
<meta name="keywords" content="replace this text with your
keywords, each separated with a comma ">
</HEAD> - Closes the <HEAD> tag.
<BODY> - This is where you will begin writing your
document and placing your HTML codes.
</BODY> - Closes the <BODY> tag.
</HTML> - Closes the <HTML> tag. This ends
the basic HTML document structure.
=====end basic webpage setup=====
Twelve tags to get you
started.
Reading time: Twelve Minutes
Note: tags are NOT case-sensitive
1- Paragraph – <p></p> puts a blank line
above and below the text marked up by the tags. Alignment of
the paragraph can be set to left, right, center or justified.
Tags are NOT case-sensitive.
2- Break <br /> ends the line and goes to the
next line.
3- Anchor Element <a></a> Creates a
hyperlink. The target to be clicked on to work the hyperlink can
be text or an image. It will be placed between the tags.
The HREF attribute defines the target of the hyperlink (the place you
will be taken) and is placed inside
the beginning tag like this: <A
HREF="http://sfimg.com">place text for the user to click on
here</A>
An anchor tag that includes an image for the user to click on just
inserts the image tag between the
<A> and </A> tags like this:
<A HREF="http://sfimg.com">
<IMG SRC="https://www.sfimg.com/Images/Banners/Banner124.gif"
alt="SFI ratrace banner"></A>
4- Image element <img>
<IMG> inserts an image by giving the exact filename and
the location to it.
Like this
<img src="https://www.sfimg.com/Images/Banners/Banner124.gif "
alt="SFI ratrace banner"
alt="Image Hosted by The Image Hosting" />
The alt="" is the alternate text that will be displayed in a browser if
it is set to NOT display images.
Some say that the search engines use alt data in evaluating the web
page.
Image alignment- The image element can not be aligned on the page
directly. You just place it
inside Paragraph tags and align the paragraph left, right or center.
Test the Image's Location
You can test to see whether an absolute URL works by entering it into
your browser address
window. It should display the image in your browser window if
everything is OK.
5- Font - <font>size="5" color="blue"
face="arial"</font>
6- Bold, Italic and Underline - <b>makes text
bold</b>, <i>italicizes
text</i>,
<u>places underline text</u>
7- Horizontal Rule - <hr> has no closing tag. Size="5"
sets 5 pixels high, width="100%" sets
width as 100% of page, width can be given in pixels. Noshade, turns off
3-d shading.
8- Lists – Ordered <ol></ol> and Unordered
<ul></ul>
Ordered list- has a list of
items each of which will be identified with a number or letter.
The choice of how items are ordered is made by including the type=""
inside the starting element.
There are five choices:
1,A, a, i or I. The numbers are automatically added to the items once
the type is chosen. Items in
the list are preceded by an <li> tag.
Unordered list-
items are listed in the order in which they are placed in the list and
do not
include any identification just a disc, circle or square which is
chosen by including the
type="" within the starting tag.
9- BlockQuote-
<blockquote></blockquote> indents
the block of text that is placed within the tags.
10- Head
– see first of the article items within the head
tags do not
display.
11- Body – see first of the article this is the area that will be
displayed.
12- Title – see first of the article this will be shown in
the Title bar of the browser.
================================
Additional information that you may find helpful:
RELATIVE vs ABSOLUTE URL's
URLs are located relative to a webpage's location.
Example of Relative URL: the image: banner.jpg can be linked from a
page in the same
directory with a link that looks like this: <IMG SRC=
"banner.jpg" >
Example of Absolute URL: The same image can be linked like this:
<IMG SRC="https://www.sfimg.com/Images/Banners/Banner124.gif"
alt="SFI ratrace banner" >
Curly Quotes can cause trouble in html code
When using Microsoft Word to create the code- don't use curly quotes-
Microsoft Word automatically changes straight quotation marks ( ' or "
) to curly (smart or
typographer's) quotes ( or ) as you type.
To turn this feature on or off:
On the Tools menu, click AutoCorrect Options, and then click the
AutoFormat As You Type tab.
Under Replace as you type, select or clear the "Straight quotes" with
"smart quotes" check box.
Case-sEnSiTiViTy
Hosting on a Linux-based webserver makes folder and file names case
sensitive.
Using lower case always is probably the best practice.
==========End of the 12 HTML Elements most needed.============
Find the FIRST number
to Open Master Combination Lock.