View source for HTML/C3/Block-Elements-and-Layouts/English-timed



{| border = "1"
|- 
|| 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.
|-
|}