Cyderize.org

Cyderize.org is my personal website, started in 2011 which I use to write about computers, the Internet, electronics, music, and whatever else I feel like. I'm a computer nerd and musician, residing in Melbourne, Australia.

Read the About page to find out more.

Web Development Tutorial Part 4 – Even More HTML

Posted September 18th, 2014 by

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.

Embedding Content

Images

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.

Videos

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:

<video src="video.mp4">
    Your browser does not support &lt;video&gt;.
</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.

Audio

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:

<audio src="audio.mp3">
    Your browser does not support &lt;audio&gt;.
</audio>

You should use a well supported format, such as MP3, for your audio files to ensure compatibility.

Tables

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:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <td>This is some table data</td>
        <td colspan="2">I appear under both 'Header 2' and 'Header 3' because of my 'colspan'</td>
    </tr>
    <tr>
        <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>
    </tr>
</table>

Forms

The last kind of element we’ll look at is the form element. We can use forms for getting data input from the user, however we won’t learn how to do this until later on when we investigate JavaScript.

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>
    <label for="password">Password</label>
    <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>
    <select name="favorite">
        <option value="programming">Programming</option>
        <option value="cyderize" selected>Cyderize.org</option>
        <option value="webdesign">Web design</option>
    </select><br>
    <input type="submit" value="Submit">
</form>

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: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *