Starting a Web Page in HTML
This tutorial will be going over the basic HTML structure including how to create new paragraphs, headers, page breaks, comments, and more. By learning to create a clear and consistent structure you will be able to apply elements easier in the future development of your web page.
[images coming soon]
[recommendation: When creating a web site we recommend a web development software such as "Dreamweaver" which is great for automatically generating tags. If you do not have access to a web development software this tutorial will still work with a simple word processor saved with the .html extension]
Lets Begin.
Before you can begin your HTML page you need to first declare a DOCTYPE at the top of your html page. For the purpose of this tutorial we will be using the following DOCTYPE: (you may copy and paste)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
I will not be going into further details on DOCTYPES buy you may visit http://www.w3.org for more information.
The <html> tag will begin the actual HTML portion of your document. Be sure to close the document with </html>
There are two main sections for a basic HTML page. The head and body section. The head section is generally where you would define the title of your page, meta tags or information about your page for search engines, the location of your page, where to add style sheets, and where you would write other scripts.
To create the head section type <head> directly after the opening html tag. To close the head section simply type </head>
The body section of your page will contain the content of your web page. This is the section that where you will display the text and graphics for your visitor to see.
To create the body section type <body> following the </head> tag. To close the body section simply type </body>
Now, its a good idea to declare the encoding of an html document. This will make it easier for different browsers with different default encoding to view the page properly. To declare the character encoding in the head section of your page type:
<meta http-equiv="content-type" content="text/html; charset=encoding" />
where encoding is the character encoding with which you saved the file. For the purpose of this tutorial we will use the encoding “UTF-8″
Next thing you will want to do is define your page a title. The title is short and descriptive and will be displayed on the title bar of your browser. To create a title type <title> anywhere following the opening <head> tag and type in the title you would like to appear and close it with </title> like so:
<title> Alpha Organic Blog </title>
The title will also appear in the history lists of your browser and will also affect the pages ranking in a search engine.
It is time to begin creating the content of your page. You will most likely want to highlight certain section or body’s of your page with headers. To do this you can type <hn> where n is a number from 1 to 6 depending on the level of header that you want to create followed by the contents of the header and finally close it with </hn>
Next you will want to create a new paragraph following your header. To begin a new paragraph type <p> followed by the contents of the paragraph and finally closing the paragraph with </p> If you would like to create a space within the paragraph you can always start a new paragraph with <p> tag or type   (a non-breaking space) within the same <p> element.
You can also give your HTML elements either a unique name with and “id” or a name that identifies it to a particular “class” . These naming techniques (or attributes) will come in handy when developing your web page further in the future when applying for example styles sheets that require certain elements to be identified. These topics will be touched on in other tutorials but it is important to learn now how and where to apply them. To apply an “id” or “class” type id=”name” or class=”name” within the opening tag of the element.
<h1 id="Alpha Organic News">News</h1>
<h2 class=”date”>June 19, 2009</h2>
To further organize page you will next want to break it up into divisions. Breaking your page up into divisions allows yo uto apply styles to entire chunks of your page at once. This again will be useful in the future when applying style sheets. To do so at the beginning of your division type <div and if desired give it an id or class and complete it with </div>
<div id="music">
*content*
</div>
In your page you will most likely want to stop your text from wrapping. The simple solution to this problem is to but a line break tag where you think a line break should occur. To insert a line break just type <br />
<br />News
<br />Music
<br />Audio/Video
<br />Interactive, Web, and Design
A useful thing to do when making your web page is to include notes or comments as you go along. This is helpful when you want to refer to certain points in your page code to remind yourself or someone else why certain elements and code exist. To do this all you have to do is type <!– followed by the comments and close with –>
To help your viewers understand what they are viewing you may also choose to include a title to certain chunks or elements of your page. To do this type title=”label” within the tag you wish to label. It will look something like this:
<div id="music" title="music samples">
*content*
</div>
For next lesson click Basic HTML Formatting or click HERE for all HTML tutorials.
[...] See the original post here: Starting a Web Page in HTML [...]
Starting a Web Page in HTML | Web 2.0 Designer
June 20, 2009
[...] Basic HTML Formatting: In HTML, Tutorial on June 21, 2009 at 8:17 pm This tutorial will be useful for anyone who does not plan to use CSS to format there web page but is still good practice. But if you are reading this tutorial it is most likely that you are new to web development so I would advice reading through this tutorial which may provide some useful techniques for HTML formatting. For previous lesson click Starting a Web Page in HTML. [...]
Basic HTML Formatting: « AO Tutorial & Review Blog
June 21, 2009