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

'''Title of the script: '''Block Elements and Layouts

'''Author:''' Praveen S

'''Domain Reviewer: '''M.Deivamani

'''Novice Reviewer:''' Madhulika G

'''Keywords: '''HTML, block elements, inline elements, web layout, div tag, span tag, HTML5 Layout, header, footer, navigation, article, aside, Spoken Tutorial, Video Tutorial

{| border = "1"
|- 
|| Visual Cue
|| Narration
|- 
|| Slide: Introduction
|| Hello and welcome to the spoken tutorial on '''Block Elements '''and''' Layouts''' in '''HTML'''.
|- 
|| Slide: Learning Objectives
|| In this tutorial we will learn about:

* '''Block level elements''' like '''div''' and '''span'''
* And '''HTML5 layouts'''
|-
|| Slide: Prerequisite 
|| 

* To practise this tutorial, you should have basic knowledge of '''HTML'''.
* If not, then go through the corresponding''' '''tutorials on this website.

|-
|| Slide: System Requirements
|| To record this tutorial, I’m using 

* '''Ubuntu Linux''' 16.04 OS
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
|| Slide: Code Files
|| 

* The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.
* Please download and extract them.

|- 
|| Slide: HTML Elements
|| '''Elements''' in '''HTML''' are classified into two types.

* '''Block level elements'''
* '''Inline elements'''

|- 
|| Slide: Block Level Elements
|| 

* '''Block level elements''' are used to create individual '''blocks''' in the '''HTML''' document
* Each '''block level element''' starts on a new line.
* It also creates a '''line break '''at the start and end on its own.
* We can create a '''block element''' inside another '''block element'''. 

|- 
|| Slide: Inline Elements
|| Whereas 

* '''Inline elements''' can be added anywhere in the line.
* It won’t create any''' line break'''.
* They are individual tags.

|- 
|| Slide: BlocK Level Elements

* '''Paragraph Tag'''
* '''Heading Tags'''
* '''List Tags'''
* '''Div Tag '''
* '''Form Tag'''
* '''Table Tag'''

|| These are some of the '''block level elements'''.
|- 
|| Slide: Inline Elements

* '''Bold, Italic, Underline'''
* '''Superscript and Subscript'''
* '''Emphasize, Big, Small, Strong'''
* '''Insert, Delete, Code, Cite'''
* '''Span'''

|| These are some of the '''inline elements'''.
|- 
|| Only narration
|| In this tutorial we will learn about '''div''' and '''span tags.'''
|- 
|| Slide: div tag
|| 

* '''Division''' or '''div''' '''tag''' is a '''block level tag'''.
* With the help of '''div''' '''tag''' and '''CSS''', we can create:
** Groups for a set of data presentation and
** '''Web layouts'''

|- 
|| 
|| Let us see an example of this.
|- 
|| Open layout.html in gedit

|| For this demonstration, I have written some code and saved it as '''layout.html'''

I have already opened this file in a''' text editor'''.
|- 
|| Highlight 2nd div block
|| I have created a '''section''' for '''News''' and added some content in it using the '''div''' '''tag'''.
|- 
|| Highlight 3rd div block
|| Next I have created a '''section''' for an article about '''Spoken Tutorials on Web Technology'''.
|- 
|| Highlight 1st div block
|| I have written both these '''div blocks''' in an outer '''div block'''.
|- 
|| Open layout.html in firefox
|| Open this file in a web browser to see the output.
|- 
|| Highlight the output
|| Observe the output.

It’s just a simple text without any '''styles''' or '''formatting'''.
|- 
|| Only narration.
|| Switch back to the '''text editor'''.
|- 
|| <div style="float: left; width:20%; height:50%;background-color:#ff90ff;">
|| Inside the second '''div''' '''tag''' let us add some '''styles'''.

Update the code as shown here.
|- 
|| Highlight float: left;
|| Inside the '''style attribute''', I have set the '''float property value''' as '''left'''.

This will align the '''elements''' to the '''left''' of the container.
|- 
|| Highlight 

width:20%; height:50%;background-color:#ff90ff;"
|| I have set some more '''attributes''' like '''width, height '''and''' background color.'''
|- 
|| <div style="float: left; width:80%; height:50%; background-color:#ff00ff;">
|| Likewise, let me add the '''styles''' for the 3rd '''div tag''' as shown here.
|- 
|| Highlight width:20%; in 2nd div tag
|| In the 2nd '''div tag,''' I have set the '''width''' as 20%.
|- 
|| Highlight width:80%; in 3rd div tag
|| In the 3rd '''div tag,''' I have set the '''width''' as 80%.
|- 
|| Only narration
|| So this setting will split the '''display area''' as 20% for the 1st '''section''' and 80% for the 2nd '''section'''.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' once again and refresh the page.
|- 
|| Highlight the output
|| Observe the change.

Our simple text page has now changed into a two column '''layout'''.

Likewise, we can create many other '''layouts''' on our own, using the '''div tags '''and '''styles'''.
|- 
|| Note
|| 

* We can create the same look using '''Table tag '''also.</div>
* But that is not a good practice for creating '''blocks '''or '''layouts.'''

|- 
|| Note (contd.)
||

* Creating a '''block''' or '''layout''' using '''div tag''' is more easy and flexible.
* But it requires lot of practice to become an expert in '''div tag''' for creating good '''layouts'''.

|- 
|| Slide: span tag
|| Now let us learn about the '''span tag.'''

'''Span tag''' can be-

* Used to group the '''inline elements'''
* Used to set different '''styles''' for a particular '''section'''
* Inserted anywhere inside any '''tag'''

|- 
|| Switch to layout.html in gedit
|| Switch to the''' text editor.'''

Here let me set different colours for each '''list item''' using the '''span tag'''.
|- 
|| <nowiki> <ul> </nowiki>

<nowiki> <li> <span style = "background-color:green"> PHP & MySQL </span> </li> </nowiki>

<nowiki> <li> <span style = "background-color:yellow"> Joomla </span> </li> </nowiki>

<nowiki></ul> </nowiki>

|| Update the code as shown here.

|- 
|| Highlight the list items
|| For each '''list item''', I have set a different background colour using the '''span tag'''.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch back to the '''browser''' and refresh the page.
|- 
|| Highlight the output
|| Observe the output now.

Each '''list item '''appears in a different background colour.
|- 
|| 
|| Come back to the''' text editor.'''
|- 
|| <nowiki> <ul> </nowiki>

<nowiki> <li> <span style = "background-color:green; color:yellow;"> PHP & MySQL </span> </li> </nowiki>

<nowiki> <li> <span style = "background-color:yellow; color:blue;"> Joomla </span> </li> </nowiki>

<nowiki> </ul> </nowiki>
|| Let us change the colour of the text as well.

Update the code as shown here.
|- 
|| Press Ctrl + S
|| Save the file
|- 
|| Refresh the browser
|| Switch back to the browser and refresh the page.
|- 
|| Highlight the output
|| Observe the output now.

Each '''list item '''appears in a different text colour and background colour.
|- 
|| Slide: HTML5 Layout
|| 

* In '''HTML5''' we can also create '''layouts''' without the '''div tag'''.
* For each part of the '''webpage''', we have the '''layout elements'''.

|- 
|| Slide: HTML5 Layout
||

* '''<header> - Page headers '''
* '''<nav> - Navigations or Links '''
* '''<section> - Document sections'''
* '''<article> - Articles'''
* '''<aside> - Sidebar contents'''
* '''<footer> - Page footer'''

These '''tags '''have a start and an end.

With the help of '''layout elements''' and '''CSS''' we can create attractive '''web layouts'''.

We will discuss this in detail in a later tutorial.
|- 
|| Only narration
|| With this we come to the end of the tutorial.

Let us summarise.
|-
|| Slide: Summary 
|| In this tutorial, we have learnt about:

* '''Block level elements'''
* '''Inline elements'''
* '''div tag'''
* '''span tag'''
* '''HTML5 layouts'''

|-
|| Slide: Assignment
|| As an assignment- 

* Create a file named '''MyWebLayout.html'''
* Create a 3 column '''layout''' using '''div tag'''

|-
|| Slide: About Spoken Tutorial project
|| The video at the following link summarizes the Spoken Tutorial project. 

Please download and watch it.
|-
|| Slide: About Workshop
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum questions
|| Please post your timed queries in this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.
|-
|| Slide: Thanks
|| This is Praveen from IIT Bombay signing off.

Thank you for joining.
|-
|}