HTML Basics
Before I get started, you should know that HTML code almost always uses beginning and ending tags. These tags surround the text that will be affected by the code.A beginning tag is generally a word surrounded by brackets. The closure tag is surrounded by the same brackets but with a forward slash right after the opening bracket.
For example, if you want to bold a portion of a sentence, then you would use for the opening tag and for the closing.
Let’s say you want to bold the word "Hello!" in the sentence below. Then your HTML code would look like this:
< b > Hello < /b > My name is Sajan
The output would be:
Hello My name is Sajan
Only the word "Hello!" is bolded because the tags surround that word. If you wanted to bold the entire sentence, then you would have put the closure tag, < /b >, after the word "Sajan". Be sure to always include your closing tag because if you forget, your entire page will be affected by the tag. You can apply this same concept to many other HTML codes. Here are several of the basics...
Basic Text & Font Tags
New Paragraph:Starts a new paragraph and creates a blank line between your new paragraph and the one above it.
The closing tag is < /p >, but is not mandatory.
Line Break: < br > This will break your text to the next line. Two
tags is equivalent to one
tag. There's no closing tag needed for this one.
Bold: < b > Closing tag is < /b >
Underline: < u > Closing tag is
Italics: < i > Closing tag is < / i >
Centering text: < center > Closing tag is < /center >
Left aligning text: < p align="left" > Just use for the closing tag
Right aligning text: < p align="right" > Just use for the closing tag
Change text color: < font color="red" > The ending for any font tag is < /font >
If you want more colors, you can also use hex codes .
Changing font face: < font face=" Arial" >
Change font size: < font size="3 "> (choose between 1 and 7)
Blinking Text: < blink > < / blink > (only works in Netscape)
Scrolling Text: < marquee > < / marquee > (only works in Internet Explorer)
Basic Structure of an HTML Page
Here you will see a sample HTML page with the basic structure.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
< html >< head >
< title >Title that is displayed at the top of your web browser and also used as the title by many search engines< / title >
< meta name="description" content="10-15 word description of your site read by some search engines" >
< meta name="keywords" content="main keywords of your site separated by commas. Read by some search engines" >
< /head >
< body >
< p align ="left" >
This is my new web page. I hope you like it. Please come back and visit again. If you need help creating your web site visit < a href= "http://sajansp.blogspot.com"> 2 Create a Website.com.
< html >
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The < html > tag just tells the browser where the HTML starts. It is not necessary to include this tag to get your page to show.
The < title> tells your browser the title of the page and you’ll see this text at the very top of your web browser. This is also used by most search engines when indexing your page. Whatever text you have here will be title of your site when displayed in the search engines.
The < meta name > information is also somewhat useful for some search engines. They may use whatever is in your "description" tag to describe your site. Others may randomly take an excerpt of the < body > of your page for a description of your site. The keyword tag may also be helpful with your ranking in some engines. Insert 3 or 4 of your main keywords or keyword phrases separated by commas here.
A few years ago, the < meta name > information was quite crucial in getting a top listing with the search engines. However, things have changed drastically with the explosion of so many new sites and the fact that many people abused it. I would still recommend using these tags but don’t expect to get a top ranking because of them.
The body of your site should be included inside the < body > tags
Inserting Hyperlinks
Hyperlinks are links that take you to another page or web site. You create them by using the code below:< a href=" http://www.thepage.com" >Name of link< /a >
The link would appear as, Name of link
Open Links in a New Browser Window
If you don’t want people to leave your site completely when they click on links to other sites, you can set the link to open up a new window. The "target" attribute allows you to do this:< a href="http://www…… "target="_blank" >
Absolute vs Relative URLs
There are two different types of URLs you can use to link to various pages, absolute and relative.
Absolute URLs
Absolute URLs include the complete path to the file’s location, including the names of all the directories and subdirectories.
Let’s say you have a folder inside your web site's root directory called "music" and you want to link to a page inside the "music" folder called brahms.html.
The absolute URL is:
< a href="http://www.yoursite.com/music/brahms.html" >Brahms< /a >
Relative URLs
If you don’t want to ever have to worry about going back and editing your hyperlinks if your site structure changes then relative URLs are the way to go.
Relative URLs are more or less like shorthand that tells the browser to go backward one or more directories to find the file.
Let's say you're on the page we referenced above, brahms.html (located in the "music" folder) and you want to link back to the home page: (http://www.yoursite.com/index.html)
Using a relative URL, you would tell the browser to go back 1 directory by using the dot-slash method.
< a href="../index.html">Home< /a >
The two dots followed by a slash instructs the browser to go up 1 more level to get to the main (root) directory.
Changing the Hyperlink Colors
The default color for hyperlinks on an HTML page is blue, but you can change it to whatever color you'd like by using the link code inside the tag. Here's an example:
< body link="green" vlink="yellow" alink="purple" >
In the above example, hyperlinks will be green, links that have already been visited will be yellow and active links will be purple. (An active link is one that has just been clicked, so for a split second the link will change colors as the mouse activates it).
Creating Email Links
Creating email links are just as simple. All you need is the "mailto" function to get this to work properly:
< a href="mailto:youraddress@email.com">Email Me< a >
Anchor Links
If you want to create a link that will take the visitor to another section of the same page (rather than a new page or site), then you can create an anchor link. There are two steps to this process:
1) First, go to the place in your HTML code where you want the anchor to go. This is the spot on the page that the browser will move to when a person clicks on the link.
Insert the code < a name="name1" >This is the Text Where the Anchor Will Land< /a > "name1" is just the name of the anchor I chose. You can all it anything you want.
2) Now to link to that section of the page, use the hyperlink code:
< a href="#name1">click here< /a >
Now when your visitors click on that link, they will be taken to that section of the page
