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>
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:
This allows it to be placed in fullscreen mode
If set to 1, it sets a border between this frame and other frames, which is the default behaviour. And 0 removes the border.
This attribute, which works in slightly more modern browsers than the rest of the <iframe> features requests heightened security settings
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’
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.
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…
- Border: it is the outlining between each cell
- Cellspacing : it is spacing between each cell of the table
- Cellpadding ; it is the gap between the cell walls and content
- Colspan : See the table header, here heading has occupied more than one column since we have used colspan there
- 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…