WEBD 100 & MDCP 102 – Intro to HTML 2
April 2, 2024 12:02 pm Leave your thoughtsINTRO TO HTML 2 – ATTRIBUTES TABLES & FORMS
Attributes
Last week we learned about tags, we should be used to seeing them now <tag> </tags> but we can add to these tags, when we add to them, we give them attributes. Attributes describe more in detail about that specific tag.
Example:
<tag attribute="value"> </tag>So we can add things like class, id, src (image source for example), alt (image description), href (the attribute to link to things) and more.
A working example:
<div class="container">
</div>
<div class="content-1" id="content1">
</div>
<div class="content-2" id="content2">In the above case, the 2 divs have both a class and an ID. This we can use later on. Classes and ID’s work different. A tag can have more than one class, but it can have only 1 id. Later on down the line we can use multiple classes for object oriented CSS and we can use ID’s to link to parts of the page so that if navigation is clicked, instead of loading a new HTML page it can just scroll down to that div tag if we want that functionality.
Another example:
<div id="nav">
<a href="index.html">HOME</a>
</div>In the above example we have a div with an ID of “nav” then in the next line, we have an a tag with an attribute, this case the attribute is a link to a file so that when HOME is clicked the markup knows to go to that file “index.html”. This is how you make links in HTML.
For a more extensive list of attributes, and what tags to use them on, refer to this web page: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
Tables are a good way to keep certain parts of your content organized. They can also be used in certain parts of your layout. In fact, tables used to be how layouts overall were structured. Thanks to the development of HTML and CSS we now use divs, technically you could still use tables for layouts but this is an outdated practice. Tables are still very useful and you will at some point need them. In this lecture we will explore some of these and look at the inner working of tables in HTML.
Tables
When do we use tables? We only ever use them when we have tabular data to display within our content.
There are a few tags we will need to learn to use when deploying tables:
<table>(Starts the table)</table>(Ends the table)<tr>(Starts the table row)</tr>(Ends the table row)<th>(Starts the table heading)</th>(Ends the table heading)<td>(Starts the table data)</td>(Ends the table data)
We can start a table within our content by simply starting with the table tags:
<table>
</table>From here we can keep adding more to build on it, we will need some table rows.
<table>
<tr>
</tr>
</table>Now, we can add some table headings in there with the content.
<table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</table>Now we can add some table data!
<table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
<tr>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
</tr>
<tr>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
</tr>
</table>Now let’s take a look at the result:
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Info 1 | Info 1 | Info 1 | Info 1 | Info 1 |
| info 2 | info 2 | info 2 | info 2 | info 2 |
From here we can set the width, border, cell padding and spacing using attributes.
Table Attributes
We can add attributes to our tables, like any tag, and we can add as many as we need to get the job done. Some we will add to the <table> tag, some we will add to the <tr> tag and some we will add to the <td> tag, depending on what we want to do.
Table Width: Can be set in pixels or percent. If we set it as 100%, the table will span across the screen to be the size of the container it is in. If it is not within a container then it will span across the entirety of the <body> tag. If it is set to a pixel amount it will be the exact pixel width we define for it.
<table width="100%">
</table>Border: Will define if there is a border at all, and if so how thick it is. If it is set to 0 then there will be no border at all. We can set the value to 1 or above to add more border thickness.
<table width="100%" border="0">
</table>Cell Padding: Will define how much padding there will be on the cells.
<table width="100%" border="0" cellpadding="3">
</table>Cell Spacing: Will define how far apart the cells will sit.
<table width="100%" border="0" cellpadding="3" cellspacing="1">
</table>Align: Will define the alignment of content in a table row. We can align left, center or right.
<tr align="left">
</tr>colspan: Will define how many columns a table data cell <td> will span.
<td colspan="5" align="center">Contact us today fam!</td><table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr align="left">
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
<tr>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
</tr>
<tr>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
</tr>
</table>Let’s see what it looks like now.
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Info 1 | Info 1 | Info 1 | Info 1 | Info 1 |
| info 2 | info 2 | info 2 | info 2 | info 2 |
With this screenshot we can see what is what. The 3 blocks of <tr> </tr> represents our 3 rows, in each row there are 5 columns thus we have 5 <td></td> per table row.
We can manipulate this table if we need to, for example we could add a bottom row that would span across all the columns. We just need to add in some more markup. Another <tr> and some more <td> that will go in the table row. Then we can add some attributes to make the table data <td> do what we want it to do.
<table width="100%" border="1" cellpadding="3" cellspacing="1"> <!--
Starts the table-->
<tr align="left"> <!--Starts the table row (TR= Table Row)-->
<th>Table Heading 1</th> <!--Table heading (th=table heading)-->
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
<tr>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
</tr>
<tr>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
<td>info 2</td>
</tr>
<tr>
<td colspan="5" align="center">Contact us today fam!</td>
</tr>
</table> <!-- Ends the table -->And our result is:
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Info 1 | Info 1 | Info 1 | Info 1 | Info 1 |
| info 2 | info 2 | info 2 | info 2 | info 2 |
| Contact us today fam! | ||||
Cell Padding & Cell Spacing
Cellpadding makes space inside the table cell, making more space between the content in the cell and the border of the cell. Whereas cellspacing makes space between the cell and other cells. This illustration sums it up best.
Width & Height
The width or height will specify the overall width or height of the table, we can also define the width & height of columns by adding in that same attribute to its respective tag.
PX = An absolute value which will never change.
% = A fluid value which will change depending on the size of the window, space it is in, screen size and so on. Most of the time you probably won’t need to change the height per-se, as the table will expand down as you enter more content into it.
WORKING WITH FORMS
Adding forms can add higher levels of interactivity. It can allow users to send feedback, fill out email forms, sign up for email lists and more. Let’s cover some basics of adding forms to your pages.
The <form> element is the tag we use to make forms.
<form>
</form>This is a blank form element, we can expand on this (like any other element) to make it do what we need it to do.
Depending on what we need the form to do will define the type of form we use. There are various types:
- Input text
- Text area
- Radio Buttons
- Check boxes
- Select list
Are a few options. Typically these elements work with a database to store the information inputted into them and/or send them in an email (if that is what the intended outcome is).
Input text – Allows a small text input box for example, one that you would use for first and last name:
Code:
<form action="/action_page.php">
First name:
<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:
<br>
<input type="text" name="lastname" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>Text Area – Allows a bigger text box that can allow for free typing.
Code:
<textarea>
Check out this cool text box!
you can type all kinds of stuff in here.
</textarea>Radio Buttons – Allow clickable buttons (remember user can only select 1 option)
Radio Buttons
Code:
<h2>Radio Buttons</h2>
<form action="">
<input type="radio" name="car" value="Lambo"> Lambo
<input type="radio" name="car" value="Bugatti"> Bugatti
<input type="radio" name="car" value="Pagani"> Pagani </form>Check Boxes – Allow the user to use clickable buttons (but they can select multiple options)
Check boxes
Code:
<h2>Check boxes</h2>
<form action="/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<input type="checkbox" name="vehicle2" value="Car">I have a car
</form>Select List – Allows the user to pick a pre defined option from a pull down list
Select List
Code:
<h2>Select List</h2>
<form action="/action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>As you can see in the examples above forms are versatile and this shortlist is not limited to these options, There are more that can narrow information down (for example a form that will only allow the user to input an email address or a phone number). For added functionality we would deploy these along with PHP to work behind the scenes to actually make them work depending on the type of form we are deploying.
Categorised in: Lectures, MDCP 102, Portfolio, WEBD 100
This post was written by amax