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

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.

Contributors and Content Editors

PoojaMoolya