HTML/C3/Block-Elements-and-Layouts/English-timed

From Script | Spoken-Tutorial
Jump to: navigation, search


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.

Contributors and Content Editors

PoojaMoolya