For any web designer, a basic knowledge of HTML is needed, even if you are using a content management system like WordPress. Here is a list of basic HTML markup tags, which should allow you to design a good website. Remember, all of your HTML pages should have a .HTM extension on them. For more information on HTML, please visit W3Schools.com. To test your HTML code against the web standards, use this link; http://validator.w3.org/
Important Tags:
<html> </html>: You MUST start every page that will have HTML code on it with a <html> tag and end the page (after all your content is inserted) with a </html>.
<body> </body>: All of your other HTML goes inside the <body> tag. Right before the </html> tag, insert your </body> tag.
<head> </head>: This is where you put your meta data, <title> tag, JavaScripts and some CSS code if needed. This usually goes before the <body> tag.
<title> </title>: This is where you put what text you want to be displayed on the window name. For example, it might a page name or post name. Or, it could be a description of your website. This usually goes inside the <head> tag.
Simple style tags (all in <body>):
<h1>…<h6>: These are your headings. <h1> is the largest heading (in size) and <h6> is the smallest heading (in size). Be sure to close your heading tags as well. The heading tags are as follows: <h1> <h2> <h3> <h4> <h5> <h6>.
<b> <i> <u>: <b> is the tag to make a line or word bold <i> is the tag to make a line or word italicized. <u> is the tag to make a line or word underlined. Be sure to close all of these tags with a </b>, </i> or </u>
<p>: This is a paragraph tag. To combine lines of text into a paragraph, use this tag. Be sure to close this tag with a </p>.
<br>: If you would like to skip a line, use this tag. Remember, in HTML, just hitting the enter button and skipping a line in the code will NOT skip a line in the view of the HTML. There is no closing tag for this element.
<s>: This is used to strike text out. Be sure to use the </s> as the closing tag for this element.
Links:
<a href=”FULL URL HERE”>WHAT YOU WANT LINK TEXT TO BE</a>: This tag is used to create a hyperlink. Be sure to substitue in the capitalized parts with the needed information.
Embed an image:
<img src=”IMAGE URL” alt=”TEXT TO SHOW WHEN HOVERING OVER IMAGE” />: This tag is used to embed an image onto a HTML page. Be sure to substitue the capitalized parts with the needed information. Also note that if you are hosting the image locally, the image must be in the same folder as the HTML document.
Tables:
<table border=”1″>: This is the base of a table tag. You can customize the border to any value you want. After the contents of the table, be sure to close the table with a </table> tag.
<tr>: This is a table row tag. Use it inside the <table> tag. After you put in all of the column tags, use </tr> to close the row.
<td>: This is a table column tag. Use it inside the <table> tag. After you put in all the columns (and after every column), use the </td> to close the column.
<th>: This is a table header tag. Use this to make the text a header inside a table. Be sure to close it with a </th> tag.
Lists:
<ul>: This is an unordered list. This makes all of the elements show up as bullets. For every line that you want to show up a a separate bullet, use the <li> and </li> tag.
<ol>: This is an ordered list. This makes all of the elements show up numbered. For every line that you want to show up a a separate number, use the <li> and </li> tag.
Forms and Inputs:
<form>: This is used to open a form. Put this at the very beginning of every form you use. Use the </form> tag at the very end of every form you open to close the form.
<input type=”text” name=”NAME OF TEXT INPUT” />: This is a text input field. Use it in a login form. Be sure to fill in the capitalized parts with needed information. Use this in a <form> tag.
<input type=”radio” name=”NAME OF RADIO BUTTON” value=”WHAT RADIO BUTTONS REPRESENTS” /> WHAT RADIO BUTTON SAYS: This tag is for a radio button. Be sure to fill in the capitalized parts with needed information. Use this in a <form> tag.
<input type=”checkbox” name=”NAME OF CHECKBOX” value=”WHAT CHECKBOX REPRESENTS” />: This is a tag for a checkbox. Be sure to fill in the capitalized parts with needed information. Use this in a <form> tag.
<form action=”"><input type=”button” value=”WHAT SUBMIT BUTTON REPRESENTS”>: This is a tag for a submit button. Be sure to fill in the capitalized parts with needed information. Also, fill in the <form action=”"> with either a link to bring users to a page when the button is clicked or something else. Use this in a <form> tag.
<select name=”WHAT IS THE DROP DOWN BOX”>
<option value=”VALUE”>Volvo</option>
</select>: This is the code for a drop down box. Be sure to fill in the capitalized parts with needed information. Use this in a <form> tag.
HTML Colors:
http://w3schools.com/html/html_colors.asp
See the above link for a list of HTML color codes
