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:

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:

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>

</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:

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,