Post by Squirtle on Jul 17, 2010 23:16:08 GMT -5
Welcome to my HTML tutorial. (phase 1) Now, these are the very basics of HTML.
To start off, HTML always starts with these statements. <html><head> and <body>.
Pretty easy, right? Okay, so here is an explanation. All HTML documents start out like that. In that order, exactly. You may drop the <head> tags, but you must have the <body> tags. Next, is the <head> tags. The content encased in these tags usually change the style, change the title of the page, and hold Javascript. We'll see more of this a little later. And the last tags are the <body> tags. These are where any content will be shown. If you have any text outside the body tags, they won't be shown. Or outside the <html> tags. It will show, but then that file is just a text file.
Now, onto common tags that can be used in HTML.
Now, most of these can be assigned a few variables. Check the table below:
Go ahead and play around with your new HTML knowledge! make a document in notepad, save it as newfile.html, open it in a web browser to see what it looks like!
To start off, HTML always starts with these statements. <html><head> and <body>.
<html>
<head>
Header Stuff
</head>
<body>
Content to be shown on the page.
</body>
</html>
Pretty easy, right? Okay, so here is an explanation. All HTML documents start out like that. In that order, exactly. You may drop the <head> tags, but you must have the <body> tags. Next, is the <head> tags. The content encased in these tags usually change the style, change the title of the page, and hold Javascript. We'll see more of this a little later. And the last tags are the <body> tags. These are where any content will be shown. If you have any text outside the body tags, they won't be shown. Or outside the <html> tags. It will show, but then that file is just a text file.
Now, onto common tags that can be used in HTML.
| <a> | <a> tags are used as hyperlinks, going to another page. Or triggering an event when clicked. More after this table. |
| <b> | <b> tags are used as a bolding property. <b>hi</b> would be hi in HTML. This can also be done with <strong></strong> tags. |
| <br /> | <br /> is a line break. It puts a gap after where this is inserted. ALWAYS USE <br />, NOT <br>! |
| <center> | <center> tags align the content encased to the center. Can also be <right>, and <left>. |
| <div> | <div> tags can be used to encase certain text, and style it. |
| <font> | <font> tags are used to style certain text. <font class="someclass">Cool text</font> could look something like Cool text |
| <h1>/<h#> | <h1>-<h6> are used for titles/headings. They are larger then regular text. |
| <iframe> | <iframe>s are used for showing content, which is on a different site, in a frame. Pretty straightforward. |
| <img> | <img> tags are used to input an image into the document. <img src="http://google.com/someimage.png" /> would display someimage.png, which isn't actually on google by the way. |
| <input> | <input> tags are used when making forms, which is coming up next. Can be a button, text field, password, file, hidden.. |
| <p> | <p> tags indicate a paragraph. You need to end the tag with </p>, otherwise some old browsers will hiccup and not display correctly. |
| <span> | <span> tags are used much like divs, but aren't displayed as a block. |
| <select> | <select> tags go hand-in-hand with <option> tags. This creates a dropdown. <select name="name"><option value="1">1st Selection</option></select> |
| <table>/<tr>/<td> | <table>, <tr>, and <td> tags are used to make tables. This will be coming up soon also. |
| <u> | <u> tags are used to underline the encased text. <u>Some text</u> would look like Some text. |
| <ul> & <ol> (<li>) | <ul> and <ol> are used for making lists. once the <ul> or <ol> is declared, use <li>Item</li> to insert a bullet point. Make sure you end your <ul> or <ol> tag, like </ul> or </ol> |
| <textarea> | <textarea> tags are areas for you to insert text into. Benefits of a textarea is they are bigger then text inputs. |
| <!-- --> | A comment within HTML code, or outside. what is in the middle will not be executed on the webpage |
Now, most of these can be assigned a few variables. Check the table below:
| id | Everything can be assigned an id. <a id="id"> <div id="id"> <span id="id"> <textarea id="id"> <b id="id"> |
| href | The only tags that allow href is: <a>, <iframe>, and <link> tags. Hrefs are where the browser will go when clicked |
| events | There are a whole bunch, most of the tags can be used with these. [onclick, onmouseover, onmouseout, ondblclick, onkeyup, onkeydown, onblur, onchange, onfocus, onload] These only execute when a function(javascript mainly) is there. |
| value | When adding this to an input tag, it adds default content. Value is what is in a certain field. |
| class | class is the styling of the element. A class is defined in a CSS statement (<style> tags) |
Go ahead and play around with your new HTML knowledge! make a document in notepad, save it as newfile.html, open it in a web browser to see what it looks like!