PoojaMoolya: Created page with " {| border = "1" |- || Time || Narration |- || 00:01 || Welcome to the spoken tutorial on '''Block Elements '''and''' Layouts''' in '''HTML'''. |- || 00:08 || In this tuto..."

2020-03-24T07:16:06Z

Created page with " {| border = "1" |- || Time || Narration |- || 00:01 || Welcome to the spoken tutorial on '''Block Elements '''and''' Layouts''' in '''HTML'''. |- || 00:08 || In this tuto..."

New page

{| 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.
|-
|}

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

PoojaMoolya: Created page with " {| border = "1" |- || Time || Narration |- || 00:01 || Welcome to the spoken tutorial on '''Block Elements '''and''' Layouts''' in '''HTML'''. |- || 00:08 || In this tuto..."