Introduction
Open up your text editor because it is time to learn HTML in one night. If you are unfamiliar with HTML you should know that it is first and foremost a scripting language. Your server is going to send this file to the person’s computer. This person’s web browser; be it “Chrome”, ”Safari”, ”Opera”, ”Firefox” or “Internet Explorer” is then going to read the information and display it on screen.
This is an in depth look at HTML and how it is structured. In a future article I will include CSS with some CSS3.
HTML stands for hyper text markup language and is written in a standard text editor. (notepad for Windows, text edit for Macintosh) We are going to go ahead and start the tutorial now.
Please make sure that you have a folder, web browser and text editor open on your screen.
Building our first page
Open up your text editor; type in the following code and then save the file as “index.html” Be sure to write the extension. If it saves as “index.html.txt” then open up the folder that the file resides in, write click it go to “properties” on Window or “get info” on a Mac and remove the “.txt” extension.
1
2
3
4
5
6
7
| <html>
<head>
</head>
<body>
</body>
</html> |
The code above doesn’t contain anything special which is why you don’t see anything. In order to add content we are going to add a little more code to demonstrate some content on the screen but first we need to understand what was just added.
The first part of the above code tells the browser that inside is the HTML, in fact everything is until it reaches the closing statement or the bottom of the page. The head tags as you can see “<head></head>” tell the browser where the head information is. This information usually contains the title of the page, some meta data, style tags or links to css files and a little javascrip.
The tags below this are the body tags. Inside of here is where we will be putting all of the page contents which you will see shortly.
The next step is to add a line of code to your website. It is going to be at the very top and will have the type of charset, some meta data and the doctype. For now you do not need to know what it means but know that it is good practice and allows your code to be read properly.
1
2
3
4
5
6
7
8
9
10
| <!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>
</head>
<body>
</body>
</html> |
Now that we have the basic structure of the page setup we can go ahead and add a title. Like everything else it is set in tags and requires no formatting.
1
2
3
| <head>
<title>Code With Design</title>
</head> |
Note: The naming of the title is important. It will allow search engines and bots to easily find your content and increase your page rank. Make sure it covers what the page is about but don’t make it to long. Search engines don’t like that.
Testing your page
In order to test your page you just need to find the index.html file’s location on your hard disk and double click it. The page will open up in your default browser. If it does not you are going to need to associate a browser with that type of file. You can also open up your web browser and set the URL to the location of the file on your hard disk.
When it comes to testing to see if you have valid code it is as simple as using the W3C validation service offered here. You can test a page by using the URL, copying and pasting or uploading the file directly.
The body of the page
The next step in our quest for knowledge is getting text onto the screen. In order to accomplish this there are some ways to go about doing so. First there is just plain text which I would advise not doing do to styling complications later on. The next type of text is “paragraph” text. This text is displayed in <p></p> tags and is formatted to have spaces on the top of the first line and the bottom of the bottom line. The third main kind of text is heading tags, once again name these accordingly because it will help your pages chances of getting higher in the search engine.
1
2
3
4
5
6
| <body>
<h1>This will be shown at an h1 level</h1>
<p>Here is som basic fill text that is only used to display what is needed.</p>
<h2>Difference in size</h2>
<p>As you can tell there is a difference in size between the heading 1 and heading 2 tags. This difference can be changed later on using page styles.</p>
</body> |
The bit of code we are going to use is called a div. Div tags can be found throughout websites and are the main structure of formatting. Div tags can be of type class or id and are used with css to change how a website appears on screen. The following is the basic structure of how a div tag works.
1
2
3
4
| <div class=”this_is_where_css_is_associated”>
<h1>Article title</h1>
<p>Content goes here.</p>
</div> |
Note: The div tag can be formatted with CSS to change the location of this content on the screen along with colors, and size. Also, div tags are often associated with classes over id.
Menus and links
Menus in HTML are commonly created using unordered lists and list items. These tags like as follows <ul>unordered list</ul> and <li>List item</li>. When written these tags are nested meaning that the list item tags inside of the unordered list.
1
2
3
4
| <ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul> |
It isn’t going to be much of a menu if we cannot click the item and find ourselves on another page. In order to do this we are going to need to add the following code.
1
2
| <a href=”http://codewithdesign.com/”>Code With Design</a>
<a href=”some-random-page.php”>Linking internally</a> |
1
2
3
4
| <ul>
<li><href=”http://codewithdesign.com”>codewithdesign.com</a></li>
<li><href=”http://lirkr.com”>Search engine</a></li>
</ul> |
Initially the menu is going to look very bad but there is hope for it yet. The menu is styled this way as a default. Once you add css to the web page it will begin to look better.
Header rules are not as common as they once were do to the increase in proper CSS they were quickly replaced with borders on div tags. If you are looking for a heading rule then you can add the simple code below.
Note: There is not content inside of this header ruling for a reason. All that is required are the two tags and a line will be created.
Tables
Note: It is best practice to not use tables at all unless you are puling the information form a database. If you choose to make your website layout using tables note that it isn’t considered common practice, it will increase load times, they are messier to work with and all around a bad idea.
Tables are created using the <table></table> tags and consist of nested tags inside. The basic table will look something like this.
1
2
3
4
5
6
7
8
9
10
| <table cellspacing=”5px” border=”1px”>
<tr>
<td>Row 1 col 1</td>
<td>Row 1 col 2</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td>Row 2 col 2</td>
</tr>
</table> |
This table was made using cell spacing and a border just to let you see how it is all aligned. Like I have previously stated these are not a good idea unless displaying data and even then there are better ways then tables.
Forms
These are html components that can be used to send information to other pages on the site. These components range in abilities and are often used to pass a username and password to a site. The general way that it is written is as follows:
1
2
3
| <form action=”" method=”" enctype=”multipart/form-data” name=”form-name” id=”form-id”>
</form> |
Going through the top line it is obvious that we are going to need to add components within the form tags. The forms id and name should be changed to your choosing are commonly named the same. (ie: name=”form1″ id=”form1″) The action of the form is where you want the information to be posted. This usually means that it will be sent to PHP page.
Components for forms
Components are usually enclosed in label tags which means that you can add generic text that will be grouped with the item itself.
text area
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <label>
<input type=”text” name=”text” id=”text”>
<label>
<label>
<input type=”textarea” name=”textarea” id=”textarea”>
<label>
<label>
<input type=”checkbox” name=”chkbox” id=”chkbox”>
<label>
<label>
<input type=”radio” name=”radio” id=”radio”>
<label> |
Using the above format you can create items such as:
file input field “file”
hidden field to pass data without a field appearing on screen “hidden”
A submit button used to post the form “submit”
