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

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