Difference between revisions of "HTML/C3/Block-Elements-and-Layouts/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with ".")
 
Line 1: Line 1:
−
.
+
'''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 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.
 +
|-
 +
|}

Revision as of 16:57, 16 May 2019

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

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.
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.
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.
  • 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.

<ul>

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

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

</ul>

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 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.
<ul>

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

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

</ul>

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.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C3/Block-Elements-and-Layouts/English&oldid=47495"