HTML/C3/Block-Elements-and-Layouts/English-timed
From Script | Spoken-Tutorial
| Time | Narration |
| 00:01 | Welcome to the spoken tutorial on Block Elements and Layouts in HTML. |
| 00:08 | In this tutorial we will learn about:
Block level elements like div and span |
| 00:17 | And HTML5 layouts |
| 00:21 | To practise this tutorial, you should have basic knowledge of HTML., |
| 00:27 | If not, then go through the corresponding tutorials on this website. |
| 00:32 | To record this tutorial, I’m using
Ubuntu Linux 16.04 Operating System |
| 00:40 | HTML5 |
| 00:42 | gedit Text Editor
and Firefox web browser |
| 00:47 | However you may use any other editor or browser of your choice. |
| 00:54 | The files used in this tutorial are available in the Code Files link on this tutorial page.
Please download and extract them. |
| 01:04 | Elements in HTML are classified into two types. |
| 01:08 | Block level elements
Inline elements |
| 01:14 | Block level elements are used to create individual blocks in the HTML document |
| 01:20 | Each block level element starts on a new line. |
| 01:25 | It also creates a line break at the start and end on its own. |
| 01:32 | We can create a block element inside another block element. |
| 01:37 | Whereas Inline elements can be added anywhere in the line. |
| 01:42 | It won’t create any line break.
They are individual tags. |
| 01:49 | These are some of the block level elements. |
| 01:54 | These are some of the inline elements. |
| 01:59 | In this tutorial we will learn about div and span tags. |
| 02:04 | Division or div tag is a block level tag. |
| 02:10 | With the help of div tag and CSS, we can create:
Groups for a set of data presentation and Web layouts |
| 02:21 | Let us see an example for this. |
| 02:24 | For this demonstration, I have written some code and saved it as layout.html |
| 02:30 | I have already opened this file in a text editor. |
| 02:34 | I have created a section for News and added some content in it using the div tag. |
| 02:42 | Next I have created a section for an article about Spoken Tutorials on Web Technology. |
| 02:49 | I have written both these div blocks in an outer div block. |
| 02:55 | Open this file in a web browser to see the output. |
| 03:00 | Observe the output.
It’s just a simple text without any styles or formatting. |
| 03:07 | Switch back to the text editor. |
| 03:10 | Inside the second div tag let us add some styles.
Update the code as shown here. |
| 03:19 | Inside the style attribute, I have set the float property value as left. |
| 03:24 | This will align the elements to the left of the container. |
| 03:30 | I have set some more attributes like width, height and background color. |
| 03:37 | Likewise, let me add the styles for the 3rd div tag as shown here. |
| 03:44 | In the 2nd div tag, I have set the width as 20%. |
| 03:50 | In the 3rd div tag, I have set the width as 80%. |
| 03:56 | So this setting will split the display area as 20% for the 1st section and 80% for the 2nd section. |
| 04:07 | Save the file. |
| 04:09 | Switch to the browser and refresh the page. |
| 04:12 | Observe the change.
Our simple text page has now changed into a two column layout. |
| 04:21 | Likewise, you can create many other layouts on our own, using the div tags and styles. |
| 04:29 | We can create the same look using Table tag also. |
| 04:34 | But that is not a good practice for creating blocks or layouts. |
| 04:40 | Creating a block or layout using div tag is more easy and flexible. |
| 04:46 | But it requires lot of practice to become an expert in div tag for creating good layouts. |
| 04:54 | Now let us learn about the span tag. |
| 04:58 | Span tag can be Used to group the inline elements |
| 05:03 | Used to set different styles for a particular section |
| 05:07 | Inserted anywhere inside any tag |
| 05:11 | Switch to the text editor. |
| 05:15 | Here let me set different colours for each list item using the span tag. |
| 05:22 | Update the code as shown here. |
| 05:26 | For each list item, I have set a different background colour using the span tag. |
| 05:32 | Save the file. |
| 05:34 | Switch to the browser and refresh the page. |
| 05:38 | Observe the output now.
Each list item appears in a different background colour. |
| 05:44 | Come back to the text editor. |
| 05:47 | Let us change the colour of the text as well.
Update the code as shown here. |
| 05:55 | Save the file |
| 05:57 | Switch back to the browser and refresh the page. |
| 06:01 | Observe the change.
Each list item appears in a different text colour and background colour. |
| 06:10 | In HTML5 we can also create layouts without the div tag. |
| 06:16 | For each part of the webpage, we have the layout elements. |
| 06:21 | <header> for Page headers |
| 06:24 | <nav> for Navigations or Links |
| 06:27 | <section> for Document sections |
| 06:31 | <article> for Articles |
| 06:35 | <aside> for Sidebar contents |
| 06:38 | <footer> for Page footer |
| 06:42 | These tags have a start and an end. |
| 06:46 | With the help of layout elements and CSS we can create attractive web layouts. |
| 06:53 | We will discuss this in detail in a later tutorial. |
| 06:57 | With this we come to the end of the tutorial.
Let us summarise. |
| 07:03 | In this tutorial, we have learnt about:
Block level elements, Inline elements, div tag, span tag and HTML5 layouts |
| 07:17 | As an assignment-
Create a file named MyWebLayout.html |
| 07:23 | Create a 3 column layout using div tag |
| 07:27 | The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it. |
| 07:37 | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
| 07:47 | Please post your timed queries in this forum. |
| 07:51 | Spoken Tutorial Project is funded by MHRD, Government of India. |
| 07:57 | This is Praveen from IIT Bombay signing off.
Thank you for joining. |
