<HTML>
Note: from this point, you should open a notepad (txt) document on your computer (windows key + r, notepad). Save the document to your desktop as whatever.htm so that you may view your coding progress through your web browser.
HTML (HyperText Markup Language) is the first computing language that you will be required to learn before designing anything. If your website were a building, then HTML would be the stones, the wood and the mortar.
Although there are many glorious things that you can do with HTML, such as changing the color of a font, creating tables or even making text scrollable:
all of those glorious options are a thing of the past - keep that in mind.
Being the stone, wood and mortar of your website, you need HTML to hold your project together. This means that you should not always try to design your website with HTML. Instead, simply use it to build your site, and use it for touch ups if needed.
The Basics of HTML
To an English speaking individual, the words on this tutorial would seem pretty easy to understand, since they too are in English. Keeping this in mind, HTML (like all languages) was designed to be read and spoken in a certain way: the HTML way. Certain words were designed to do certain things. You cannot write jibberish and hope for the best, it just does not work this way - for any language!
The Language of HTML
There are elements (otherwise known as tags) which represent certain tasks. A few of these elements are <p>, <b>, <u>, <font>, <div>, <a>, <br>, <table>, <marquee>, among others.
These are examples of terms that cannot be changed. Just as an English word has an English meaning, these HTML terms have HTML meanings, which will be further explained later.
Every element (tag) is contained within "less than (<)" and "greater than (>)" brackets, as shown in the examples above.
Nearly every element (tag) has a closing tag, which is closed with a forward slash. For example:
<p>This is a paragraph tag.</p>
<b>This is how you make text bold.</b>
<u>This is how you underline text.</u>
One element which does not require a closing tag is <br>, which represents a line-break (similar to pressing enter on your keyboard).
Elements can have descriptive attributes. For example:
<font color='red'>This text is red.</font>
But remember: this would be styling with HTML
Also notice how the element is </closed> with the title element and not with the descriptive attribute. The same would be used for a tags, which represent links:
<a href='http://www.makingtoday.com/how-to-web-design'>title of link here</a>
<font color='red'>This text is red.</font>
HTML That Matters
<a href="http://www.site.com">A Tags</a>
<div id="whatever">Div Tags</div>
Div Tags (explained later)
<img src="/images/image.jpg">
HTML That Matters Less
HTML that you might use less often: <font>, <br>, <table>, <marquee>, <hr>
HTML Layout
It is not necessary, but it is proper to open and close your entire website with <html> and </html>.
Within your opening and closing HTML elements, you must open and close your <head> element, which is used for storing important information about your website and you must also open and close your <body> element, which is used to contain your website content (text, images, anything that visitors will see).
Following is the standard layout for any website. Keep in mind how everything is set up.