BASIC HTML
Learning HTML
In this tutorial, you will learn the basics of creating a web page. HTML is a language that is used by Web browsers to show text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML pages are more commonly known as web sites. Web sites are stored on web servers where you can view them any time.
I suggest that you open notepad or your favorite text edit and follow along to learn to create a web page. When you save the document in your text editor, remember to save it as a .html file so your browser will recognize it as a web page.
In the basic tutorial, You'll learn how to create a web page, add formatted text, images, and links. These basic things will give you the tools you need to create good web pages.
HTML Structure
The document usually starts with an <html> tag followed by <head> and at the very end by </html>. The <html> ... </html> acts like a container for the document. The <head> ... </head> contains the title, and information on style sheets and scripts, while the <body> ... </body> contains the markup with the visible content. Here is a template you can copy and paste into your text editor for creating your own pages:
<html> <head><title> My Web Page Title </title><head><body></body> </html>
Titling your Pages
All of your web pages will need titles. Below is the code you need to make a title on a web page.
<title>The title of my web page</title>
You can make the title anything you want it to be by editing the text between the <title> tags. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your page in the <head> tags.
Adding Plain and Formatted Text
In HTML, there are six levels of headings. H1 is the largest text size, while H2 is slightly smaller, and so on down to H6, the smallest size.
Here is how to add a large heading:
<h1>A Large Heading </h1>
and here is a slightly smaller heading:
<h2>A slightly smaller heading</h2>
Another way to display text on a web page is to use the paragraph tag. Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:
<p>This is the first paragraph.</p> <p>This is the second paragraph.</p>
Sometimes, you will want to force a line break. You do this using the <br> element. This is useful when you want to start a new line or make some space between elements.
<p> Section 1<br> Section 2<br> Section 3<br></p>
The br element never needs an end-tag. In general, elements that don't take end-tags are known as empty elements.
Bold and Italics
You can emphasize one or more words with the <b> tag or the <em> tag. The <b> tag makes bold text while the <em> tag makes italics.
<b>This</b> is a really <em>interesting</em> topic!
Ways of Listing Text
Lists are a great way of showing text in web pages. There are two main types of lists in html. The first kind is a bulleted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:
<ul><li>First Point</li><li>Second Point</li><li>Third Point</li></ul>
Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off.
The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:
<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol>
Like bulleted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.
Lists are a great way to show text and organize ideas on web pages.
Adding Images
Images can be used to make your pages look a lot better and stand out to your viewers. They can also help reinforce points made by your site. The simple way to add an image is using the <img> tag. Let's say you have an image file called "smallspinner.gif" that you want to display on your web page. I always create an images folder on my web server you to keep my images organized. No matter where you choose to store your images, just make sure the path is direct so your web page knows where the image you want is.
<img src="images/smallspinner.gif" hieght="100" width="75" >
The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:
<img src="images/smallspinner.gif" width="100" height="75" alt="My small site logo">
The alt attribute is used to give a short description, in this case "My small site logo ".
You can use images from digital cameras, scanners, and creations from image making programs. The most common image formats are GIF and JPEG. I suggest you use JPEG when possible because it is the most common and makes for a good image, while GIF's are usually used for animated logos and images.
Adding links to other pages
Links are needed to get from one page to another. Web Sites are a collection of web pages. You need to link all of your pages together so people can find and view them.
Links are defined with the <a> tag. Lets define a link to the page defined in the file "home.html":
<a href="home.html">Home Link </a>.
The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.
To link to a page that is not on your web server, you need to give the full url.
<a href="http://www.jpmk12.net/">JPMK12.net</a>.
You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:
<a href="index.html"><img src="sitespinner.gif" alt="Home Page"></a>
You now know enough to make basic html documents. You can download the document HERE that this tutorial teaches you to make for your future reference. After you feel comfortable with these basic items, you should move on to the next html tutorial.