Web Development phase 2: Advanced HTML

Html-2

In the previous blog, we learned about the basic structure of HTML and saw some basic tags, but that’s not all right? Generally, the websites we visit contain various other things like tables, forms, videos, multimedia, maps and all…

So In this blog, we are going to take a step ahead and will learn to add some things to our web page/website and at the end, we will have an assignment for you, so that you can try your hands and test your skills ….

Also, the prerequisite for this is the previous blog containing the basics of HTML, make sure you have read that beforehand…

Let’s get started now….

1 Audio/Video: <video> and <audio> element allows you to embed any video & audio very easily.For eg:

Here src attribute contains the path of the audio/video which is to be used, just like we used in <img> 

And 

Text written between <audio>..</audio> and <video>…</video> is to be displayed when browser is unable to load video and audio element 

2 embedding: Seen YouTube videos or google maps to any sites and wondered how they are placed here…?

Well that’s simple, they are simply embedding to the site using <iframe> tag, here’s how

Above example include following which are as follows:

allowfullscreen:

This allows it to be placed in fullscreen mode 

frameborder:

If set to 1, it sets a border between this frame and other frames, which is the default behaviour. And 0 removes the border.

sandbox:

This attribute, which works in slightly more modern browsers than the rest of the <iframe> features requests heightened security settings

3 forms

Input fields and forms are very common among websites, now let’s have a look at what actually is a form and what all it consists of.

The HTML <form> element represents a document section containing interactive controls for submitting information.

It further consists of various input types fields like text, checkbox,radio buttons and all,

Let’s look at a form and discuss

<input>: The  <input> element is used to accept data from the user. The <input> element is one of the most powerful and complex in all of HTML due to the number of combinations of input types and attributes as.

    Texts: type =’text’

    E-mail: type=’email’

    Password: type=’password’

    Number: type=’number’

    Checkbox: type=’checkbox’

    Radio button: type=’radio’

<select>: This tag enables user to show a dropdown menu containing options,the options of the dropdown menus are enclosed within <option> </option> tags

<textarea>: This is an extension of text field input, it provides greater space and more text,suitable for messages ,comments and feedbacks.It’s length and width is specified using row and cols attribute 

<button>: This tag shows a button when used. It has a type attribute that specifies the task of the button like reset, submit etc.

And the whole code of the above form looks like this 

Also ,there are some more attributes here like 

Placeholder: it holds the text/message which you want to show when field is unfilled

Required: it makes that field mandatory to be filled, and without that the form won’t be submitted. 

4 tables

The HTML <table> element represents tabular data i.e., information presented in a table composed of rows and columns of cells containing data.

Let’s see a basic table and discuss 

This table has two basic parts : 

    Head and Body

Which further has rows as <tr></tr> which contains the data inside each row …

And that data is wrapped around <td></td> 

Let’s see this with help of a mind map

And the source code of the above table is as follows

So this explains the basic structure of the table in HTML

But there are some more attributes to tables like cell spacing,cell padding, rowspan colspan border etc

Let’s look at each of them with an example too…

Here is the table where all the above discussed attributes are used…

1. Border: it is the outlining between each cell
2. Cellspacing : it is spacing between each cell of the table
3. Cellpadding ; it is the gap between the cell walls and content
4. Colspan : See the table header, here heading has occupied more than one column since we have used colspan there
5. rowspan: In the last row i.e 20, it has occupied two row’s space , since we have used rowspan there.

And the code for the above table is as follows:

And that’s all for now…Till here we have covered Html, from the next blog we will be learning CSS and then a project based on it…

Till then u can try your skills by creating some basic HTML projects…

Get the latest tech news and updates, ethical hacking tutorials and cybersecurity tips and tricks. Check out MeuSec for more.

Sometimes we include links to online retail stores and/or online campaigns. If you click on one and make a purchase we may receive a small commission.