Nehasolanki: Created page with "'''Title of the script: '''Web Layout in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."

2021-01-06T02:45:17Z

Created page with "'''Title of the script: '''Web Layout in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."

New page

'''Title of the script: '''Web Layout in CSS

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske, Om Prakash Soni

'''Novice Reviewer:''' Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Web Layouts,''' '''CSS Header, CSS Menu Bar, CSS Content, CSS Footer

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on “'''Web Layout in CSS'''”.
|-
| | Slide: Learning Objectives
| | In this tutorial we will learn to:

* Structure the '''layout '''of a '''web page '''using''' CSS'''

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

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

https://spoken-tutorial.org
| | To practise this tutorial, you should know to use '''HTML''' and '''CSS'''.

If not, please go through the '''HTML''' and '''CSS '''tutorials on this website.
|-
| | 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.

Make a copy and then use them while practising.
|-
| | Slide: Web Layout
| |
* For clarity and easy accessibility the content has to be organised on a '''web page'''.
* Using '''CSS '''we can structure the '''web layouts '''as per our requirements.

|-
| | Slide: Web Layout
| | A '''web page''' is divided into various parts:

* '''Header'''
* '''Menu Bar'''
* '''Content'''
* '''Footer'''

|-
| | Slide: Web Layout

[Image = 3image.png]
| | There are many different ways to structure our '''web page'''.

This is the most common structure.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Myweb.html in my-css folder
| | For this demonstration, I’m using the file '''Myweb.html'''.

The same is available in the '''Code files''' link for practice.
|-
| | Open Myweb.html in gedit
| | Open the file '''Myweb.html''' in a '''text editor.'''
|-
| | [gedit - Myweb.html]

Highlight:

All code
| | In this '''HTML''' file, I have already created some '''elements.'''

Like, a title for the '''page '''followed by three '''links'''.

Then some '''paragraphs '''with''' headings'''.

I have linked this '''HTML '''file to''' webstyle.css stylesheet'''.
|-
| | Open Myweb.html in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''Myweb.html''' in a '''web browser'''.
|-
| | [browser]
| | Observe the '''page'''.

This '''page''' is not structured properly.

Using '''CSS '''properties, I will make a proper '''layout''' for this '''web page'''.

Let's start with the '''header'''.
|-
| | Slide: Header
| |
* '''Header''' is placed at the top of the '''web''' '''page'''.
* It contains the title,''' logo, search bar''' etc.

Let us understand this through example.
|-
| | Switch to my-css folder
| | Switch to the '''my-css''' folder.
|-
| | Open webstyle.css in gedit
| | Now open the file '''webstyle.css''', in any''' text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - webstyle.css]

Type:

.header {

background-color: #4d4d4d;

color: #ffffff;

padding: 22px;

text-align: center;}
| | Type the code as shown.

I have created a '''class '''named '''“header”'''.

You can give any name of your choice.

I have set some properties for this '''class.'''

These are '''background-color, color, padding''' and '''text-align '''properties.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''header class''' to the '''h1 heading '''in the''' web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Update:

<nowiki><div class ="header"></nowiki>

<nowiki><h1> Welcome to Spoken Tutorial </h1></nowiki>

<nowiki></div></nowiki>

| | Using the '''div tag''', I''' '''will assign the '''class''' '''header''' to the '''h1 heading'''.

Inside the '''body''', update the '''heading''' as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the heading
| | Observe the modified '''heading'''.

Next we will see how to structure the '''menu bar'''.
|-
| | Slide: Menu Bar
| |
* '''Menu bar''' consists of '''links''', which are used to navigate through the '''website'''.

Let us try this.
|-
| | Switch to webstyle.css
| | Switch to the '''webstyle.css''' file.
|-
| | [gedit - webstyle.css]

Type:

.menubar {

background-color: <nowiki>#d1e0e0;</nowiki>

padding: 4px 16px;}

a {

color: #000000;

text-align: center;

padding: 4px 16px;

text-decoration: none;}

a:hover {

background-color: #ffffff;

color: #ee7811;}
| | Next to '''header class''', type the code as shown.

I have created a '''class “menubar”''' and set '''background-color''' and '''padding '''property for this '''class'''.

Then I have set some properties for '''links'''.

I have also set some properties when the '''user''' moves the '''mouse '''over the '''links'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''menu class''' to the '''links '''of the '''web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Update:

<nowiki><div class="menubar"></nowiki>

<a href="#">Tutorial</a>

<a href="#">Assignment</a>

<a href="#">Test</a>

<nowiki></div></nowiki>

| |

Inside the '''body''', next to the '''heading''', update the '''links''' as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the output
| | Observe the output.

Our new''' Menu bar''' is added to the '''web page.'''
|-
| | Slide: Content
| |
* '''Content '''is the main section of the '''web''' '''page'''.
* It can be divided into many '''columns '''for better readability.

|-
| | Slide: Content

[Image = 3image.png]
| | '''1-column layout '''is mostly used for mobile devices.
|-
| | Slide: Content

[Image = 2image.png]
| | '''2-column layout '''is''' '''mostly used for tablets and laptops.
|-
| | Slide: Content

[Image = 1image.png]
| | '''3-column layout '''is''' '''mostly used for desktops.
|-
| | Switch to webstyle.css
| | Switch to the '''webstyle.css''' file.
|-
| | [gedit - webstyle.css]

Type:

.col {float: left;

width: 30%;

padding: 7px;

text-align: justify;}

@media screen and (max-width:600px) {

.col{ width: 100%; } }
| | Now I will create a '''3-column layout''' for our content.

Next to the''' a:hover tag,''' type the''' '''code''' '''as shown.

|-
| | [gedit - webstyle.css]

Highlight:

.col {float: left;

width: 30%;

padding: 7px;

text-align: justify;}

@media screen and (max-width:600px) {

.col{ width: 100%; } }
| | I have created a''' class “col”''' and set the''' float''' to '''left '''and '''width '''to '''30%'''.

This will split my content into a '''3-column layout'''.

I have also set '''padding''' and '''text-align''' properties.

Here I have used the '''media rule'''.

When the '''browser window''' is '''600px '''or smaller, then the '''width '''of the '''column''' becomes '''100%'''.

This will display the content in '''1-column layout'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''col class''' to the''' '''first three''' paragraphs '''on the '''web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Type:

<nowiki><div class = "col"></nowiki>

...

<nowiki></div></nowiki>

| | Inside the '''body''', add the '''div tag''' with the''' class col''' before the '''heading''' of all the '''paragraphs.'''

Then close the''' div tag''' at the end of each paragraph as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the output
| | Observe the output.

Our content is displayed in '''3-column layout'''.

Now resize the '''browser''' to '''600px '''or smaller.

On doing so, the content '''layout''' has changed to '''1-column layout.'''

And the '''columns '''get stacked on the top of other '''columns '''instead of next to each other.
|-
| | Slide: Footer
| |
* '''Footer''' is placed at the bottom of the '''web''' '''page'''.
* It contains details like '''copyrights, address,''' etc.

Let us understand this through example.
|-
| | Switch to webstyle.css
| | Switch to the '''webstyle.css''' file.
|-
| | [gedit - webstyle.css]

Type:

.footer {

clear:both;

background-color: #4d4d4d;

padding: 2px;

text-align: center;

color: #ffffff;}
| | Next to the '''media rule''', type the code as shown.

I have created a '''class “footer”''' and set some properties for this '''class'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''footer class''' to the last '''paragraph '''of the '''web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Update:

<nowiki><div class="footer"></nowiki>

<nowiki><p>Copyright-2020</p></nowiki>

<nowiki></div></nowiki>

| | Inside the '''body''', update the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the output
| | Observe the modified '''footer '''now.

|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us summarize.
|-
| | Slide: Summary
| | In this tutorial, we have learnt to:

* Structure the '''layout '''of a '''web page '''using''' CSS'''

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

* Create a file '''layoutpage.html'''.
* Create the following parts:
** '''Header'''
** '''Menu bar'''
** '''Content : 2-columns'''
** '''Footer'''

|-
| | Slide: Assignment
| |
* Create a file '''layoutstyle.css.'''
* Style all the parts.

|-
| | Slide: Assignment
| |
* Link the '''layoutstyle.css''' file to '''layoutpage.html''' file
* Observe the output

|-
| | Slide:

About Spoken Tutorial project
| | The video at the following link summarises 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 on this forum.
|-
| | Slide: Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C4/Web-Layout-in-CSS/English - Revision history

Nehasolanki: Created page with "'''Title of the script: '''Web Layout in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."