Posted September 18th, 2014 by Jason N
So having completed both Part 1 and Part 2 as well as Part 3 of this series of web development tutorials, we can now move on to discuss even more HTML elements. In the next part of this series, we’ll look at CSS, and finally make our webpages pretty.
The ‘Image’ element <img> allows us to embed images into our webpage. The image source is specified in the same way a link ‘href’ is, but the ‘src’ attribute is used instead:
<img src="image.png" alt="Non visual browsers see this">
The ‘alt’ tag specifies what to show if the image fails to load or cannot be shown. Note that the <img> tag is a void tag, and does not need closing. The images must be in a format readable by the browser, for example PNG, GIF or JPG.
The ‘Video’ element <video> allows us to embed videos into our webpage. This element acts similarly to the ‘Image’ element, and also has a ‘src’ attribute:
Your browser does not support <video>.
The ‘alt’ text is simply contained within the element, and will display on browsers that don’t support the element. Embedded videos must encoded in a way that the browser can understand, for example H.264.
The ‘Audio’ element <audio> allows us to embed audio into our webpage. This element acts similarly to the ‘Video’ element, and also has a ‘src’ attribute, with ‘alt’ text appearing inside the tags:
Your browser does not support <audio>.
You should use a well supported format, such as MP3, for your audio files to ensure compatibility.
We can use tables to represent tabular data on our webpage. Do not use tables if the data isn’t tabular! If you wouldn’t put it in Excel, then don’t put it in a table. Don’t be tempted to use tables to get multi-column layouts, etc.
A table consists of the ‘table’ element, <table>, containing a number of ‘table row’ <tr> elements, when themselves contain a number of either ‘table header’ <th> elements or ‘table data’ (cell) <td> elements. I’ll demonstrate below:
<td>This is some table data</td>
<td>I appear under 'Header 2'</td>
<td>And me, under 'Header 3'</td>
<td rowspan="2">I appear across two rows under 'Header 4' because of my 'rowspan'</td>
<td>This is some table data</td>
<td colspan="2">I appear under both 'Header 2' and 'Header 3' because of my 'colspan'</td>
<td>And we have a normal row here</td>
<td>With four columns of data</td>
<td>No special row or column spanning</td>
<td>Just run of the mill data</td>
A form element <form> contains a number of controls, which are inputs for the user to fill out. I’ll give an example of a form containing different input controls. You can experiment with these yourself, and I’ll go into more detail in a later tutorial:
<form action="submit.html" method="GET">
<label for="username">Username: </label>
<input type="text" name="username"><br>
<input type="password" name="password"><br>
<label for="desc">Description: </label>
<textarea name="description">Fill out your description here</textarea><br>
<label for="favorite">Favorite thing: </label>
<option value="cyderize" selected>Cyderize.org</option>
<option value="webdesign">Web design</option>
<input type="submit" value="Submit">
Note that there are many kinds of input elements (the ‘type’ attribute), such as checkboxes, radio buttons, and other ones new to HTML5 such as email, date and number.
Now that you have the basic idea of using HTML elements, you can begin to structure your own pages to contain what you want them to. If you want to learn more about these elements, a good resource is the Mozilla Developer Network, and another good one is W3Schools.
In Part 5, we’ll discuss CSS, and make our webpages beautiful, as well as consolidate our HTML skills.Comments: none yet | Filed under: tutorials | Tagged: audio, elements, form, html, image, table, video