Ch 1- Web Disigning With HTML & CSS
CHAPTER NO.1 WEB DESIGNING WITH HTML
& CSS
INTRODUCTION
Web design is the process of creating websites, It
includes several different aspects, such as webpage layout, content production,
and graphic design etc. Websites are created using a markup language called
HTML. Web designers build webpages using HTML tags that define the content and
metadata of each page. The layout and appearance of the elements within a
webpage are typically defined using CSS. Therefore,
most websites include a combination of HTML and CSS that defines how each page
will appear in a browser.
Some web designers prefer to hand code pages (typing
HTML and CSS from scratch),
while others use a WYSIWYG (What You See Is What You
Get) editor like Adobe Dreamweaver.
This type of editor provides a visual interface for
designing the webpage layout and the software automatically generates the
corresponding HTML and CSS code.
We have studied about basics of HTML and CSS in the
previous class, i.e. in 10th class.
In this chapter, we are going to discuss about the
basics of web designing, some advanced topics of HTML and CSS along with the
Open Source Editor - Notepad++.
1.1 WHAT IS A GOOD WEE DESIGN?
A website is created for the purpose of sharing
information with the general public.
Therefore, the success of a website depends on its
design, content and speed. Webpage design is a very important element. The
website is used in different parts of the world and in different parts
different language is written, spoken and understood around the world. So the
wording
and the language used on the website are very
important for ordinary people to understand. In order to create a good website
design, we need professionals from different fields. There are 8 important
principles for a good website design.
Simplicity : The clean and fresh design for a
website should be preferred. This
reduces the loading time of the website and makes it
easier to update, edit website
in future. The design of the webpage should be
simple and its navigation should be
easy.
Consistency : The design of every webpage in the
website should be consistent. All
webpages should have the same buttons, colors, and
navigation design so that they
are easy to use and understand.
Typography & Usage Text : The text on the
website should be clean and readable so
that the search engine will be able to index the
webpages. In webpages the headings
etc. should be alike. Language should also be used
in such a way that online webpage
translators can easily translate the webpage into
another language.
Multidivisional Design : Now a days due to the
increasing use of different size of
display screens in smartphones and tablets, web
design should be in such a way that
content of web page will get properly displayed and
easily used on screens of
different sizes.
Pictures, Videos and Audio : When designing a
website, proper images, video and
audio should be used at the appropriate place.
Generally, people prefer to read text
less and prefer to listen and watch audio or video
but it should also be noted that the
size of the webpage is not heavy and loading time is
not excessive.
Communication and Address : The website should be
designed in such a way that
the right place (such as a new webpage or block)
should be set for different information.The URL of the webpages containing
special information should be easy so that it can be remembered. There should
be features to convey updated information to the website-visitors so that for
new information they will be able to visit the website again.
Social Sharing Feature : Today is the time for
social networking and the information
that users find interesting, they like to share
using social media, Therefore, every
section of the website should be so designed that
the information available on the
website can be easily shared.
Design : It has been learned from deep research that
ordinary users scan webpages
(computer screens) in an "F" pattern. At
the first glance is rarely seen on the right side of the screen. This kind of
design means looking at the webpage from left to right and top to bottom, which
is what most users prefer. It is same as English alphabet "F".
1.2 THE PHASES OF WEBSITE DEVELOPMENT
There are 6 major steps (important steps) in website
design and development process.
These steps go from collecting initial information,
to building a fully functional website and finally to do maintenance to keeping
the web site up to date.
1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance
1.3 HTML CONCEPT
As we know that HTML (HyperText Markup Language) is
the main markup language for
web pages. It provides a means to create webpages
with text, lists, pictures, videos, audio,tables, frames, headings and more. It
also provides the convenience of collecting information by creating forms. All
of this is done through special commands called tags. HTML provides the ability
to add or load scripts in other languages like Java Script. The design of
websites and
webpages can be created very effectively using Cascading
Style Sheet (CSS). So html is capable of creating basic and advanced
webpages.There are usually two types of tags in HTML:
Paired Tags : These tags contain the opening tag
< > and closing tag < / >.
Singular Tags : These tags do not need to be closed.
1.4 HTML'S ROLE IN THE WEB
HTML is the default language for designing websites.
HTML code is used to design static
webpages. This code is understood by the web browser
and displayed by making it viewable.
HTML is used to organize text, images and other
webpage elements into a webpage. If you use the view source code option in the
web browser, you will see the html code. Using this code the webpage is
created, So html has a very important role in the web and without it the web
would not be possible.
1.5 STRUCTURE OF HTML DOCUMENTS
Following is a simple example of HTML program. Every
HTML webpage has such code.
Every HTML document begins with the <html> tag
and ends with </html> tag. HTML
documents are mainly divided into two parts: head
part and body part. Let's learn about the code given below in the figure 1.1:
<! DOCTYPE html> : This tag describes the
version of html. It shows that the HTML
document is going to use version 5 of html.
Head Part : This part begins with the <head>
tag and ends with </head> tag. This part
includes information about header details of the
HTML document, for example: page title,
information about meta-data etc, Meta-data refers to
other information related to the data available in the html page.
Body Part : This part begins with the <body>
tag and ends with </body> tag. This tag
contains all the information that will be displayed
on the webpage, i.c. visible to the web user.
1.6 HTML EDITOR
As we studied in the previous class, for making web
pages using HTML, we require any
simple text Editor, such as Notepad (a built-in text
editor of windows) etc. Although, there are many advanced text editors that are
available in the market for programming in HTML.Notepad ++ is one of such free
and powerful code editor. It provides support for writing source
code using many programming languages. Using this
editor, we can write the coding of the
HTML and CSS easily. It can be downloaded for free
from the Internet (website: https://notepad-plus-plus.org/). It has the
convenience of Tabs and we can edit & work with multiple files at the same
time. Following figure shows the interface of Notepad++ Editor.
To view the output of HTML program, we have to open
it in the Web Browser. If we
prepare HTML web page in the simple text editors,
then we have to open that web page
manually to view it in the web browsers. But in the
case of Notepad++, we can do it within the Notepad++ interface. To preview the
html code in the web browser, we can follow the steps given below:
Click on the View Menu.
Click on the "View Current file in" to
open the submemn.
Now, click on the desired web browser that is listed
in the submenu, to view the
output of HTML program.
We can also view the output of HTML program by right
clicking on the tab and select
Open in Default Viewer.
Now, let's begin by making a simple example of time
table using Notepad++. Follow the
steps given below for the example:
Open Text Editor Notepad---.
Create a new file by clicking on File — New or by
using the shortcut key Ctrl+N.
Now start typing HTML code as shown the example
below:
After completion of above code, now save it using
File — Save or using shortcut key
Ctrl+S. Make it sure to type the extension (.html)
of HTML web page after typing the file name, i.e. filename.bhtml (for example:
p1 html).
To view the output of above web page, right click on
the file tab and click on the option
“Open in default Viewer". It will open the web
page in the default web browser as shown
below:
1.7 WORKING WITH LINES AND IMAGES
Links and images play an important role in the world
of web. The links in the HTML are
called hyperlinks. The text with hyperlinks is
called Hypertext. By default the link color is blue and they are underlined. We
can navigate to another webpage by clicking on the link. Usually when the mouse
pointer is moved over the link it will change to a hand pointer. It can be
inferred that this is the link and a click can be made to use it, Links can be
created not only on text but also on an image or other object. Images are used
to make the web pages beautiful and more descriptive. Following discussion
shows how te work with links and images using the
HTML in web pages:
1.7.1 Working with Links
Hyperlinks are created with the <a> tag in
HTML. The tag <a> is called anchor tag. We
use anchor tag with bref attribute. The attribute
bref is the hypertext reference. It's URL value represents the address of the
linked file/page. Basic Link tag is:
<a href="url">link text</a>
There are two main parts of a link tag: the
"link text" that a user clicks to open the linked page, and the
"Url Address" part which represent the address of page to be linked.
In the above code, the href="url” part is the address part of the anchor
tag. The different attributes that can be used with the anchor tag are given
below:
Following program shows how to use
anchor tag in the web pages:
1.7.2 Working with Images
Images can be used as a background of web pages or
they can be used as an object in the
web pages. Proper usage of images make the websites
more attractive. The <img> tag is used to insert the image as an element
into an HTML webpages. It is a singular tag. It does not include a closing tag.
Following attributes can be used in this tag:
Following code shows how to insert image in the web
page:
Images can also be used as link buttons. If we want
to create a link using the image then
the <img> tag can be used. It's written
between the opening <a> tag and closing </a> tag. As shown in the
example below:
<a href= "http://pseb,ac.in"><img
src= "pseb,jpg" width= "40" height=
"20"></a>
1.8 STYLE SHEETS
Cascading Style Sheet, also known as CSS, is a
simple design language used to make
web pages-design simple and effective. Where CSS is
easy to learn and understand. It is
commonly used to build websites with html. CSS
determines how HTML elements should be
displayed.
CSS is used to improve the look & feel of a web
page. Using CSS we can make changes
to the text colors, font categories, paradigms,
columns, images, layout design, display size for different devices and screens,
and many more design and design elements.
1.8.1 Benefits of CSS
Time saving - CSS code can be used repeatedly as
needed and then the same sheet
can be reused in multiple HTML pages.
Speed (fast webpage loading) - CSS requires less code
for formatting in html,which increases the speed of webpage creation and
loading code in webpages browser with less code typing. Also decreases the size
so the webpage has a light weight design.
Easy Maintenance - Changes to CSS coding in one
place automatically apply changes everywhere, means that the entire web page's
contents can be changed on the page and that it doesn't have to change the main
web coding which also reduces the chance of errors,
More Powerful - Webpages can be designed in a much
better and simpler way using
CSS. It has more features than html.
Multiple Device Support - Using CSS, webpages can be
easily made to display
correctly on different screen size devices and using
CSS, one can create different
versions of the website for different devices.
1.9 TYPES OF STYLE SHEETS (CSS)
There are 3 common ways to use CSS:
a. Inline style : It is used in the html tag.
Example:
<p style = "color: red; border: 2px
solid;"> This is an inline css example. </p>
b. Internal style sheet : It is used for a webpage
whose coding is written in the <head>
tag. Example:
<head>
<style> p {color: red; border: 2px solid; }
</style>
</head>
c. External style sheet : This is used by creating a
separate file. All coding is done in this separate file and its extension is
.css. This file can be used to style webpages by linking to multiple webpages
as needed. When a formatting change is made to this file, the change will be
reflected across all linked webpages. We use the <link> tag in the
<head> section of the
webpage to link to this file. Ex:
<head><link rel = "stylesheet"
type = “text / css" href = "mystyle.css"></head>
Extemal style sheets can be written in any text
editor. The css file must not contain any html tags. Below is the style sheet
file:CSS Filename: "myStyle.css”:
pt color: red; border:2px solid;
1.10 CSS SYNTAX
The CSS rule-set consists of a selector and a
declaration block;
CSS Selector : This is used for the element whose
style we want to format.
CSS Declaration : This is used to set the element's
properties and each property is
terminated with a semicolon (;). There are several
properties that can be used in the
declaration block. This can be interpreted as an
html tag attribute.
1.11 CSS SELECTORS
Selectors help us to select and format html
elements. Id, classes, types, attributes etc, can be used for selectors.
1.11.1 The Element Selector
Element selector is used to select or format html
elements such as paragraphs. Consider the following example in html web page
for a paragraph:
<p> This is an example of paragraph in web
page</p>
If we want to format it using CSS with the help of
Element selector, then we have to write it as given following (either using
internal style sheet or using external style sheet):
p{text-align: center;color: red;
1.11.2 The ID Selector
It is used to format the id attribute of the html.
We use this selector to format a particular element. It starts with the #
(hash) symbol and the name of the element. Consider the following example in
html web page for a paragraph:
<p id="#paral"> This is an example
of paragraph in web page</p>If we want to format it using CSS with the
help of ID selector, then we have to write it as
given following (cither using internal style sheet
or using extemal style sheet):
paral {text-align: center;color: red;}
1.11.3 The CLASS Selector
It is used to format the class attribute of the html
elements. It starts with dot (.) and the name of the class. Consider the
following example in html web page:
<p class= "center"> This is an example
of paragraph in web page</p>
<hiclass= “center"> This is an example of
Heading Level 1</h1>
<p class= “center"> This is another
example of paragraph in web page</p>
If we want to have similar formatting of both of
these elements using CLASS selector,then we have to write it as given below
(either using internal style sheet or using external style sheet):center
{text-align: center;color: red;
1.11.4 Grouping Selectors
These are used to reduce coding and save time.
Several elements can be grouped together into a single group whose formatting
is same. Consider the following example in html web page:
<p> This is an example of paragraph in web
page</p>
<h1> This is an example of Heading Level
1</h1>
<h2> This is an example of Heading Level
2</h2>
If we want to have similar formatting of all of
these elements using Grouping selector,then we have to write it as given below
(either using internal style sheet or using external style sheet):
hl, h2, p {text-align: center;color: red;}
1.12 DIFFERENT STYLE SHEET (CSS)
PROPERTIES
Now we have come to know how to use CSS in our web
pages. Now it is the time to have
knowledge about the different properties of CSS.
These properties are used to format the different elements of webpages. There
are numerous CSS properties to use them in web pages.We are going to discuss
them by classifying them into various categories. Following discussion shows
these properties with suitable examples:
1.12.1 CSS Background
Background Properties are used to format the
background of the webpages or various html elements. Following table shows the
common properties of background:
Examples:pt background-color: #b0c4de;}
body {background-image: url("paper. gif"),
background-repeat: repeat-x;
background-position: right top;}
Separate Background properties can also be written
together:
body {background: (plant.png") no-repeat right
top;}
1.12.2 CSS Text
Text properties are used to format text on a webpage. Following table shows the common properties of text:
We can write color value in several ways For
Example:
Using HEX values: Example: #£f0000
Using RGB value: Example: rgb(255,0,0)
Using color name =: Example: red
Text in web pages is aligned left by default. We can
also align the text as per our requirement. There are four options for aligning
text horizontally: center, left, right, and justified. Following example shows
how to use text properties in web pages:Example:hl {color: red;text-align:
center;text-decoration: underline;}
1.12.3 CSS Fonts
Using these properties, we can set, the font size,
style and so on.
For Example:
p{font-style: italic;font-weight: bold;
font-size: 12px;}
Following example shows how to use shorthand
declaration for font property on heading h1. Here, font is set to italic and
bold, the font size is set to 12 pixels, the line is set to 30 pixels,and the
font family is set to Georgia.
hl {font: italic bold 12px/30px Georgia, serif;}
1.12,4 CSS Links
These CSS properties are used to format the
hyperlinks (links). There are four types of
links in the webpage:
a: link - It is a normal, unvisited link
a: visited - It is a link the user has visited
a: hover - It is a link when the user hover the
mouse at the link
a: active - It is a link the moment it is clicked
Examples:
a: link {color: # FFOOOQO; text-decoration: none; }
a: visited {color: # OOFFOO; text-decoration: none;
}
a: hover {color: # FFOOFF; text-decoration:
underline}
a: active {color: # OOOOFF; text-decoration:
underline}
1.12.5 CSS Lists
This property is used to format Lists. The symbol or
number or character of the item in the list is referred to as item marker.
Examples of Item Marker are circle, square, disc, upper-roman, lower-roman,
lower-alpha, upper-alpha.Example:ul {list-style-type: circle;}
The List-Style-Image property can be used if the
image is to be used as an item marker.Example:ul {list-style-image: url
(‘arrow.gif');}
1.12.6 C88 Border
This property is used to set and format the border around the elements. We can set border's style, width and color for the html elements using this property. These three properties are used to format the border:
Example:P{border-style: solid;
border-width; 5px;border-color: blue;}
Following example shows the usage of all border
properties in a single declaration. In this example, Spx is the border width,
solid is the border style and red is the border color:hl {border: Spx solid
red;}
The four sides of the Border can also be formatted
differently in CSS. For Example:
p{border-top-style: dotted;border-right-style:
solid;border-bottom-style: dashed;
border-left-style: dotted;}
1.12.7 C88 Margin
This CSS property is used to set the space around
the elements. This space is called
margin. Margins have no color but are transparent.
They are set on the outside of the border.There are four directions for setting
margins: left, top, right, bottom:
Example:
p{margin-left: 40px; margin-right: 60px;
margin-bottom: 50px; margin-top: 70px;}
Examples of Margin - Shorthand property:
margin: 50px 60px 70px 80px; (margins for top,
right, bottom, and left side)
margin: 50px 60px 70px; (margin for top, left and
right, bottom side)margin: 5Opx 60px; (margin for top and bottom, left and
right side)margin: SOpx; (margin for all four sides)
1.12.8 CSS Padding
This property is used to set the space between the content
and the border of the element.There are four directions for setting padding:
left, top, right, bottom:
Example:
p{padding-top: 25px; padding-bottom: 2Spx;
padding-right: SOpx; padding-left: SOpx;}
Examples of Padding- Shorthand
propesty:
p{ padding: 50px 60px 70px 80px;} (Padding for top,
right, bottom, and left side)
p {padding: 50px 60px 70px;} (Padding for top, left
and right, bottom side)
p {padding: 50px 60px;} (Padding for top &
bottom, left & right side)
p (padding: SOpx;} (Padding for all four sides)
1.12.9 CSS Box Model
The term box model is used in connection with design
and layout of web pages. Each
element of an html is a box in a way. The web browser renders every element as a rectangular box according to the CSS box model.Box-Model consists of multiple properties.It includes:margins, borders, padding, and the actual content. The image below illustrates the box model:
These components of box model are explained below:
For designing the layout of the web pages using box
model of CSS, two elements <div>
and <span> are commonly used in HTML. These
elements are explained below:
Both <div> and <span> is used to define
parts of a web page. A div is a block-level
element and a span is an inline element. The div
should be used to wrap sections of a document,while spans are used to wrap
small portions of text, images, etc.
Here's an example:
<div>Demo Text, with <span>some
other</span> text.</div>
The <div> element is used while creating CSS
based layouts in html, whereas <span>
element is used to stylize texts. The <div>and
<span>elements has no required attributes, but style, class and id are
common attributes which are used with these both elements, Following example
shows how to define and use box model in web pages:
1.13 EXAMPLE PROGRAM FOR CSS PROPERTIES
So far now what we have studied will now be shown
using a simple program. We are going
to create a demo program which shows how to use css
properties using internal style sheets.Following program has been created using
the Notepad++ Editor which will be open in the chrome browser to view it,
DointssholRemember
1. The design of the website should be simple and
uniform.
2. The combination of text, images, video and audio
on the webpage should be used in such a way that the loading time of the
webpage is not more and the webpage should be of Light Weight.
3. HTML (Hyper Text Markup Language) is the main
markup language for web pages.
4. HTML provides a means of generating webpages with
HTML text, lists, pictures, videos,audio, tables, frames, headings, forms, and
more.
5. The HTML provides us features to include or load
scripts written in languages like Java.Script.
6. The link in the HTML is called hyperlink and it
is used to navigate to another webpage or any type of file by clicking on it. It
is created with the <a> (anchor) tag.
7. Using cascading style sheets (CSS) we can make
the design of websites and webpages very easy and effective.
8. There are three types of CSS: inline, intemal and
extemal.
9. CSS PADDING Properties set the distance between
the content and border of the element.
10. CSS BOX MODEL is used in relation to design and
layout for web pages. Each element of an html is a box in a way.
EXERCISER
Part-A
1. Fill in the Blanks :
I. For creating Website Clean and fresh should be prioritized.
Il. It has been learned from a research that
ordinary users scan webpages (computer screens) in__spatttionrn,
III. HTML is used to organize text, images and other
webpage's into webpages.
IV. By using the design of websites and webpages can
be designed in a very simple and effective way.
V. helps to select and set html elements,
2. Very Short Answer Type Questions :
I, Write the full name of W3C.
Il. Write the full name of CSS.
III. What is the extension of the external CSS file?
IV. In which tag INTERNAL CSS is defined in the HTML
webpage.
V. Write the full name of WYSIWYG.
Part-B
3. Short Answer Type Questions. (Write
the answers in 4-5 lines)
I, Write the basic structure of HTML.
Il. Write various WEBSITE DEVELOPMENT PHASES.
Il. Write the role of HTML in the WEB.
IV. What CSS is used for?
Part-C
4. Long Answer Type Questions. (Write
the answers in 10-15 lines)
I. Explain the principles of good web design.
I. How CSS can be used for web design.
I. What are the benefits of CSS?
IV. Explain CSS BOX MODEL.
V. Explain the BORDER property in CSS with coding.
LAD AGU NR?
Develop a web page having information about your
school and format it with the CSS
properties mentioned in this chapter.