Setting up your first HTML website!

Important Suggestions

Wanting to start a website is quite a daunting task for beginners. It happened to me. Some questions I had were:

Where do I input information to get onto the web?: Answer: Websites pages are hosted on servers. A servers job is to distribute your website to clients requesting the webpage. You have to upload your website page to your server through applications like FTP. Or if you have direct access to your server you can create and edit the webpage right on the server. Services like Google do not upload their webpages to their server through FTP(Port 21).
Does HTML allow me to create a user log in based/content management based website?: Answer: No HTML does not allow you to have user accounts or comment based systems.
Do I have to setup a a website to start designing websites?: Answer: No HTML can be rendered in your browser without a domain name or hosting.

Lesson

Generating HTML for a website can be cumbersome, but custom coding allows for a lot more options. If you are completely adverse to coding HTML there are WYSIWYG(What you see is what you get) editors that generate code based on your design. Dreamweaver is a very well known WYSIWYG editor. I personally use Dreamweaver for coding my website because it allows the programmer to make modifications and see them instantly. Dreamweaver is also a built in FTP client allowing the programmer to upload his/her pages to the internet without having to have a separate client open.

Step 1 - Understanding the structure of an HTML webpage

Every properly formatted website has 3 crucial pieces to its HTML structure.
1. deceleration tags
2. header
3. body
All together a properly formatted website would have this structure:
```
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	 <html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 	</head>
 	<body>
 
 	</body>
 </html>
```
Explanation
The DOCTYPE declares that the page is of type HTML and the reference to its formatting guide is at the address: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
The html tag with an attribute of xmlns references the website documentation to xhtml, an html derivative of the way xml is formatted.
The meta tag with attributes of http-equiv and content and a charset give the page a mime type of text/html and character encoding that can support multiple languages characters, such as Chinese and English.
The body tag contains the page content whereas the head contains the "behind the scenes" page deceleration. The head area also contains script imports for Javascript, CSS, and other media. The head area does not display its content.
Step 2 - Adding your first HTML tags

Formatting text in HTML is done through the use of tags. If I wanted to make a word italicized I would use its corresponding opening and closing tags . If I wanted to make a word bold I would use the opening and closing tags or .
Open any text editor and begin by typing in the basic framework as written above. I'm using Dreamweaver, but notepad will suffice. However when you're saving the .html page in notepad be sure enclose the full name in quotations(e.g. "index.html"). Click inside your body tags and hit carriage return a few times to give yourself some space. Still inside the body add an h1 header tag and add your name. So far your editor should like this:
```
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	 <html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 	</head>
 	<body>
 	 <h1>Bill Bob</h1>
 	</body>
 </html>
 
```
To divide your name from the other content on the page a horizontal rule is an effective solution. Underneath your name add a horizontal rule by typing in the following code <hr />. The default properties of the horizontal rule will span the rule across the entire webpage, if you would like to make the rule smaller in width an HTML attribute will have to be implemented. Inside the hr tag add width="80%", this will span the horizontal rule across 80% of the webpage. The units in the width attribute can also be by pixels. A majority of all HTML tags have unique attributes that can be declared, but most can be rendered through the use of CSS (Cascading Style Sheets). Underneath the horizontal rule add some bio about yourself in paragraph tags, .... Save your work File>Save or Ctrl+S. It's time to view your work on a web browser. Remember HTML can be viewed without hosting it on a server. If your'e using notepad or another editor other than Dreamweaver double click your HTML document, you will see your webpage, if not you saved the file incorrectly(check extension). In Dreamweaver click on the globe icon at the top of the editor and select Preview in Firefox. If done correctly you should see your name a page break and then your bio below. If you are having problems pleaseask for help.

More HTML tags for your experimentation

All tags have their closing tags, just put a slash after the less than symbol. With an exception of a few *

Text Modifiers

HTML Tag	Purpose
<p>	Paragraph(text)
<b>	Bold
<i>	Italics
<h1> - <h6>	Headers h1 through h6

Data formating

HTML parent tag	HTML child tag	Purpose
<ol>	<li> (list item)	Ordered List
<ul>	<li> (list item)	Unordered List
<dl>	<dt> (definition item) <dd> (definition)	Definition List
<table>	<tr> (table row) <th> (table header) <td> (table item)	Table

Page formating

HTML tag	Purpose
*<br />	Line break
<center>	Center element

Conclusion

You Know...
- how to write a properly formatted small webpage
- how to create a basic website using HTML

You need to log into your account to post comments!Sign In

Comments: 2 comments posted

bhavesh123/6/12 9:57 AM

thanks…..............

NESTED2/19/12 2:13 AM

Good tutorial