You will find information, suggestions and
recommendations for creating a website, easily and quickly.
Articles about website hosting.
Take 12 Minutes to Learn the 12 HTML Elements You
Will Need First.
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.
</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.
Twelve tags to get you started.
Reading time: Twelve Minutes
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=" http://images5.theimagehosting.com/banner286.jpg "></A>
4- Image element <img>
<IMG> inserts an image by giving the exact filename and the location to it.
Like this
<img src="http://images5.theimagehosting.com/banner286.jpg"
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.
Notice carefully above the two image source locations. The first has spaces between it and the
surrounding quotation marks. It will probably appear as a "hot" link. If so, clicking it should open
your browser and download the image into it.
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="http://images5.theimagehosting.com/banner.jpg" >
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.============
Later: Other elements to learn about a little later but the 12 above will get you off to a fast start.
Frames and Framesets
Tables
Cascading Style Sheets
JavaScript
Questions or comments
ContactUs
This web site uses template #4 from ,
BasicTemplates.com.
Be sure to visit them for 1,350 more.
|
