HTML Step-by-Step Guide: Part 2
In the first part of our express course you’ve touched the basics of HTML: you’ve found out what are tags and what are they for. We are sure that you coped with that job! Now we proceed to the second stage of training. You’ll learn how to create simple tables and forms.
Creating a table
The HTML tables usually cause a lot of problems, especially for beginners. But half an hour of your time, a little practice and diligence and you’re able to create both unpretentious and sophisticated tables.
To create a table, we need these tags:
- <table> – is a tag, which tells the browser that the next item is a table;
- <tr> – is a tag, which stands for table row and is essential for the rows;
- <td> – defines table data, i.e. all the data that are placed within the table.
Note that the tags <td> should always be within the tag <tr>.
Let’s get some practice and make our own table. You can try to do it in the document that you created in the previous lesson, or start a new doc. Start with the table tag <table> (it should be inside the <body> tag ). Now think of a name for your table and enclose it between the tags <h1> … <h6>.
Write tag <tr>, to create the first line. Don’t write anything between this tag. The full table should contain columns, which are introduced by means of <td> tag. Add <td> cell in each <tr> to create the columns.
The principle on which the columns and cells are located, as follows:
<table> <tr> <td>Line 1, row 1</td> <td>Line 1, row 2</td> <td>Line 1, row 3</td> </tr> <tr> <td>Line 2, row 1</td> <td>Line 2, row 2</td> <td>Line 2, row 3</td> </tr> <tr> <td>Line 3, row 1</td> <td>Line 3, row 2</td> <td>Line 3, row 3</td> </tr> </table>
Now fill the table as shown below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Add the lines</title> </head> <body> <h1>What I've learnt</h1> <table border="1"> <tr> <td>Subject</td> <td>Mark</td> </tr> <tr> <td>The most important tags</td> <td>5</td> </tr> <tr> <td>Links and images</td> <td>5</td> </tr> <tr> <td>Tables and forms</td> <td>5</td> </tr> </table> </body> </html>
Note: Use <table border = 2=”1″> attribute to specify a border of your table. Apply “0” to border attribute if you need an invisible border. Don’t forget to define borders for both the table and the cells.
We are moving to such an important topic as the form. Forms are used to collect data inputted by a user. These data are sent to a web server for processing. Form elements make your website more functional and allow to create registration forms, text field, submit buttons etc. Thus, the form importance is evident. It is worth mentioning that these forms are purely visual, as the data are processed by a server, not a browser.
Form and input
To create a form (for example, to sign up for your website), we need the <form> tag. It contains the following attributes:
- <action> – is an attribute that tells the browser where information should be sent, i.e. specifies the address.
- <method> – is an attribute that defines HOW a particular form will be sent.
The <method> attribute has two values: get and post. The GET method sends the data as part of the URL. That is the data visible in the address bar of your browser after the “?” character. The address bar looks like this:
The POST method doesn’t display any data in the address bar. That’s why it is used for sensitive or personal information transmission.
For starters, the difference between these two methods is not obvious, since both of them result in the same effect. But the difference between them is still there. The GET method is used in the search form, since it allows you to get a link on the search results. The POST method is used when you want to send a lot of data and a reference to the result of this data processing is not necessary. For example, when you edit your personal profile.
Most form fields are created by using a single <input> tag. This tag has two obligatory attributes:
- type specifies the type of the field;
- name specifies the name of the field.
Field type is responsible for the way this field will be displayed. Text is the most common type of field as it refers to the text box.
Creating a signup form
Let’s try to make a simple signup form. First we need to create the form:
Then you have to create fields for user’s name. Select the text field type and set name for the field name. Set the value to display user’s first or last name in the field. Register button can be created by submit field type. This is how the signup form looks like:
<form action=”action_page.php”> Name: <br> <input type=”text” name=”firstname” value=”Super”><br> Lastname:<br> <input type=”text” name=”lastname” value=”Man”><br><br> <input type=”submit” value=”Submit”> </form>
Note: Tags <br> create a line break to separate one input field from another.
We have covered the basic elements of a web page and now have a sense of what is a web programming. It’s clear that the web page that you have created with the help of this course, is far from a fully functional website. But nevertheless, it’s a significant step that can push you to further development. Find out more and learn with the help of free educational resources for beginners.
In order not to miss the article that could change your life, subscribe to our blog!
You might also like
Could not wait to get started with your own website? Perfect! It’s time to get a domain. What is it? Domain is the name of your website, which replaces long
If an Egyptian salesman hit the top, then I am sure you can do it either! Who wants to be the first one in Google ranking? I want! I do
Last time you chose a name for your website. We suggest you to go through a small checklist to make sure that you have chosen a perfect domain name. Do