Learn Basic HTML
HTML, also known as Hyper-Text-Markup-Language, which is the basic coding that a browser generates in order for you to view a website, is like learning a new foreign language, but instead of getting the accent just right, you need to get the characters right for it to work. Below I will give the basic of the basics to help you understand that little bit of the language that when in times of need, will help you in the long run.
A basic page setup will look like thi
| <html> <head> <title> Website or Page Title goes here </title> </head> <body> Website Content goes here </body> </html> |
Now if you are looking at this and thinking: what in the world? Well, I know how you must feel. HTML files will ALWAYS begin and end with the tag “HTML”. Now think about a letter. You have the head, where the title and or address would go and then you have the body of the letter where your written content will go. It’s pretty much the same structure of a letter. This is a good example to keep in mind when starting an HTML page.
Here is a list of commonly used HTML tags for reference when you start coding any HTML-written documents.
| Tag(s) | Attribute(s) | Description |
| <a>…</a> | name, href, shape, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, target, title | this tag is used for anchors, but most commonly used to link text and images to other pages or websites with the href=”URL” attribute. |
| <b>…</b> | (commonly none used) class, dir, id, style, title | makes text appear larger than normal. this tag still works, however it is uncommonly used. stylesheets are a better alternative. |
| <blockquote>…</blockquote> | cite, class, dir, id, style, title | encloses the content of a webpage |
| <body>…</body> | background, bgcolor, class, dir, id, onlcik, ondblclick, onmouseout, onmouseover, onload,style, title | encloses the content of a webpage |
| <br>…</br> | (commonly none used) class, id, style, title | inserts line break, causing the following text, images, elements …etc to display on a new line. usually |
| <button>…</button> | name, value, type, class, dir, disable, id, onclick, ondblclick, onload, onmouseout, onmouseover, style, title | adds a button control to a form |
| <center>…</center> | not specified | centers content found in between this code. |
| <div>…</div> | name, href, shape, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, target, title | this tag is used for anchors, but most commonly used to link text and images to other pages or websites with the href=”URL” attribute. |
| <em>…</em> | (commonly none used) class, dir, id, style, title | for a special emphasis on text, most browsers will display this tag in italics. |
| <font>…</font> | size, color, face, style, class, dir, id, title | sets the style for font on a page. stylesheets are more effective for setting the style of fonts, however this tag is still used for a specific font change. |
| <head>…</head> | not specified | header information that describes the document, such as title. content found here will not be displayed when page is shown in a browser. |
| <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> |
class, dir, id, style, title | Called headline tags that are used to encase different heading types. there are 6 types with <h1> being most prominent to <h6> being less prominent |
| <hr>…</hr> | class, dir, id, style, title | creates a horizontal line, also referred to as a horizontal rule, commonly used as a divider for content |
| <html>…</html> | Not Specified | encloses and executes all HTML tags in a document. |
| <i>…</i> | class, dir, id, style, title | changes text to appear italicized. |
| <img>…</img> | height, hspace, name, src, vspace, width, alt, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, title, usemap | displays an image on a page. |
| <li>…</li> | (commonly none used) class, dir, id, style, title | changes text to appear italicized. |
| <meta> | name, content, http-equiv, scheme, lang, dir | defines metadata property for a document. you may use this tag more than once, but only within the <head> and </head> tags. |
| <object>…</object> | coebase, codetype, data, height, width, type, archive, standby, vspace, hspace, class, dir, id, onclick, ondblclick, onload, onselect, onmouseout, onmouseover, style, title, usemap | place objects of a document in between these tags, like files, interactive programs, and other HTML documents. |
| <ol>…</ol> | class, dir, id, style, title | used for ordered lists that will appear in numerical order. each item is defined using <li> and </li> tags within the <ol> tags. |
| <p>…</p> | align, class, dir, id, style, title | creates a paragraph of text. instead of using breaks, this paragraph tag automativally sets space above and below. |
| <s>…</s> | Not Specified | adds a strike(line) through text found in between this tag. |
| <strong>…</strong> | class, dir, disable, id, style, title | adds emphasis to text. Like the <em> tag, this will often display bold text. |
| <style>…</style> | type, media, dir, title | determines stylesheet codes in the head <head> of a document. |
| <sub>…</sub> | class, dir, id, style, title | text is subscripted. example: example text |
| <sup>…</sup> | class, dir, id, style, title | text is superscripted. example: example text |
| <table>…</table> | border, cellpadding, cellspacing, frame, summary, rules, width, align, bgcolor, class, dir, id, style, title | organizes information into a table of rows and columns. |
| <td>…</td> | headers, scope, abbr, axis, rowspan, colspan, bgclor, height, width, align, class, dir, style, title, valign | information inside a table cell - rows, text, and/or other content. |
| <textarea>…</textarea> | name, rows, cols, class, dir, disabled, id, readonly, style, title | |
| <title>…</title> | dir | type a title in between this tag to appear on a browser window’s title bar. |
| <tr>…</tr> | align, class, dir, id, style, title, valign | adds a row to a cell in a table. |
| <u>…</u> | Not Specified | adds an underline to text. |
| <ul>…</ul> | class, dir, id, style, title | creates a list of unordered bullets, meaning the list will not be numbered or lettered in an orderly manner - instead, symbols such as a dot, circle or square will appear. |
Long list huh? Hopefully this will help you with making the basic website!
