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

• Block level elements like div and span
• And HTML5 layouts

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

• Ubuntu Linux 16.04 OS
• HTML5
• gedit Text Editor
• Firefox web browser

However you may use any other editor or browser of your choice.

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

• Block level elements
• Inline 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.

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

• Paragraph Tag
• Heading Tags
• List Tags
• Div Tag
• Form Tag
• Table Tag

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

• 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

I have already opened this file in a text editor.

It’s just a simple text without any styles or formatting.

Update the code as shown here.

This will align the elements to the left of the container.

width:20%; height:50%;background-color:#ff90ff;"

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.

• We can create the same look using Table tag also.
• But that is not a good practice for creating blocks or layouts.

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

Span tag can be-

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

Here let me set different colours for each list item using the span tag.

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

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

</ul>

Each list item appears in a different background colour.

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

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

</ul>

Update the code as shown here.

Each list item appears in a different text colour and background colour.

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

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

Let us summarise.

• Block level elements
• Inline elements
• div tag
• span tag
• HTML5 layouts

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

Please download and watch it.

For more details, please write to us.

More information on this mission is available at this link.

Thank you for joining.