Web Designing

Prepared by : Mr. Amit kumar

 Introduction to Web Designing

Web design refers to the design of websites that are displayed on the internet.

Web design usually involves creating content and appearance;

 Web Technology
• Web Technology refers to the various tools and techniques that are utilized in the process of
communication between different types of devices over the Internet. A web browser is used to
access web pages. Web browsers can be defined as programs that display text, data, pictures,
animation, and video on the Internet.
World Wide Web
• The World Wide Web (WWW), often called the Web, is a system of
interconnected webpages and information that you can access using
the Internet. It was created to help people share and find
information easily, using links that connect different pages together.
The Web allows us to browse websites, watch videos, shop online,
and connect with others around the world through our computers
and phones.
Internet
• The Internet is a global network of billions of computers and other
electronic devices. With the Internet, it's possible to access almost
any information, communicate with anyone else in the world, and
do much more. You can do all of this by connecting a computer to
the Internet, which is also called going online.
 Types of Websites

web site-collection of interlinked web pages

A website can be of two types based on the type of Web Pages:

1. Static Website

2. Dynamic Website

Static website-

Static websites display exactly the same information whenever anyone visits it.

Its Web Pages are coded in HTML.

Static Website: In Static Websites, Web pages are returned by the
server which are prebuilt source code files built using simple
languages such as HTML, CSS, or JavaScript. There is no processing
of content on the server (according to the user) in Static Websites.
Web pages are returned by the server with no change therefore,
static Websites are fast. There is no interaction with databases. Also,
they are less costly as the host does not need to support server-side
processing with different languages.
• Note: Static does not mean that it will not respond to user actions,
These Websites are called static because these cannot be
manipulated on the server or interact with databases (which is the
case in Dynamic Websites).
 Dynamic website
• Dynamic websites generate pages in real-time. The flexibility of the content and
structure makes it possible to customize what a user experiences based on their
request or the browser they use. Creating a dynamic website usually requires
knowledge of a server-side programming language like PHP, C#, or Python.
Dynamic websites process requests and typically pull in content from an external
database or a content management system (CMS).
 Static Website Dynamic Website

Content of Web pages can not be change at runtime. Content of Web pages can be changed.

No interaction with database possible. Interaction with database is possible

It is faster to load as compared to dynamic website. It is slower than static website.

Cheaper Development costs. More Development costs.

No feature of Content Management. Feature of Content Management System.

HTML, CSS, Javascript is used for developing the

Server side languages such as PHP, Node.js are used.
website.

Same content is delivered everytime the page is

Content may change everytime the page is loaded.
loaded.
 HTML
• HTML stands for Hyper Text Markup Language.

• Hypertext refers to the “Text within Text.” Hypertext is text which contains links to other texts.

• Markup refers to how you can structure or format content.

• Mark-up in this tells the Web browser how to display a Web page's words and images for the user. It
determines the look and structure of a text like font type, size and colour .

• HTML is called a Markup language because it allows users to organize the look and presentation of all the
content that needs to go on a web page.

• Html file extension is .html & .htm

• HTML was created by Berners-Lee in 1991 .But release in 1995 as HTML 2.0 officially.
HTML version
The first version of HTML was written by Tim Berners-Lee in 1993.
HTML 1.0-1991
HTML 2.0-1995
HTML 3.2-1997
HTML 4.01-1999
HTML 5.0-2008
The W3C (World Wide Web Consortium), and WHATWG( Web Hypertext Application
Technology Working Group) are involved in its development.
 Tags
• HTML tags are like keywords which defines that how web browser will format and display the content.

Syntax

• <tag> content </tag>

HTML Tag Examples-

• <b> Bold Tag </b>

• <i> Italic Tag </i>

• <u> Underline Tag</u>

• HTML tags contain three main parts: opening tag, content and closing tag.

• Html elements contains opening tag ,closing tag and content between them.
 Types of Tag
1. Paired Tags(container)

An HTML tag is known as a paired tag when the tag consists of an opening tag and a closing tag.

Example: <html>...</html>

<head>...</head>

<b>...</b>

<i>...</i> etc

2. Unpaired tags(Empty)

• An HTML tag is called an unpaired tag when the tag only has an opening tag and does not have a closing tag .
Unpaired HTML tag does not require a closing tag

Example: <br >, <hr >

Steps to create web page
1. Open a simple text editor, such as Notepad, and create a new file.
2. Type HTML code.
3. Save the file on your computer as filename.html.
4. open it in your browser by double-clicking on it.
Structure of HTML
<header> Tag in HTML

• The <header> element define a page or section header.

• Syntax:
• Header tags are used in pairs. Between the opening (header) and
closing (/header) tags is where the content is located.
• <head>
• ?..
• </head>
• <!DOCTYPE html>
• <html>
• <head>
• <title>Hello World</title>
• </head>
• <body>
• </body>
• </html>
HTML <body> tag

• HTML <body> tag defines the main content of an HTML document

which displays on the browser. It can contain text content,
paragraphs, headings, images, tables, links, videos, etc.
• Syntax
• <body> Place your Content here........</body>
• Example
• <!DOCTYPE html>
• <html>
• <head>
• <title>Body Tag</title>
• </head>
• <body>
• <h2>Example of body tag</h2>
• <p>This paragraph is written between the body tag</p>
• </body>

• </html>
HTML Elements
An HTML file is made of elements. These elements are responsible for
creating web pages and define content in that webpage. An element
in HTML usually consist of a start tag <tag name>, close tag </tag
name> and content inserted between them.
Such as:
<b> Engineering</b> Bold Text Engineering
<i>Technology</i> Italic Text Technology
<p>Science</p> Paragraph science
<u> College</u> Underline Text College
<hr> Draw a straight line on page
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value“
Example:
<font size="55" color="green">
HTML Text Formatting
• HTML Formatting Elements
• Formatting elements were designed to display special types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <u>-Underline
• <mark> - Marked text
• <small> - Smaller text
• <big> -Bigger text
• <em>- emphasized text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
 Heading Tags

Heading Tags

Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6>.

While displaying any heading, browser adds one line before and one line after that
heading.

All HTML 5 tag reference-

https://www.tutorialrepublic.com/html-reference/html5-tags.php
 Example of Heading Tag
<html>
<body>
<h1>Heading 1</h1>
This will produce the following result −
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
 Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag as
shown below in the example −
Output-
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
 Line Break Tag
Whenever you use the <br > element, anything following it starts from the next
line. This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.
<html>
<body>

<h1>The br element</h1>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

</body>
</html>
 Horizontal Lines
Horizontal lines are used to visually break-up sections of a document.
The <hr> tag creates a line from the current position in the document to the right
margin and breaks the line accordingly.

<html>
<body>
<h1>HTML</h1>
<hr>
<p>THTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!</p>
<hr>
</body>
</html>
 Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown

below −
Example:
<html>
<body>
<p>This is normal text <b>and this is bold text</b>.</p>
</body>
</html>
 Italic Text

• Anything that appears within <i>...</i> element is displayed in

italicized as shown below −
• Example:
<body>
<p>The following word uses an <i>italicized</i> typeface.
</p>
</body>
 Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as

shown below −
Example
<body>
<p>The following word uses an <u>underlined</u> typeface.
</p>
</body>
<font> tag
HTML <font> tag is used to define the font style for the text contained
within it. It defines the font size, color, and face or the text in an
HTML document.
Example:1
<p>
<font color="blue">Text with normal size and default face</font>
</p>
Anchor Tag
• The <a> tag defines a hyperlink, which is used to link from one page
to another.
href attribute of HTML anchor tag
The href attribute is used to define the address of the file to be linked.
In other words, it points out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Let's see an example of HTML anchor tag.
<a href="second.html">Click for Second Page</a>
Output: Click for Second Page
HTML Image
HTML img tag is used to display image on the web page. HTML img
tag is an empty tag that contains attributes only, closing tags are not
used in HTML image element.
Let's see an example of HTML image.
<h2>HTML Image Example</h2>
<img src="good_morning.jpg" alt="Good Morning Friends"/>
To insert an image in your web, that image must be present in your
same folder where you have put the HTML file. But if in some case
image is available in some other directory then you can access the
image like this:
<img src="E:/images/animal.png" height="180“
width="300" alt="animal image">
In above statement we have put image in local disk E------>images
folder------>animal.png.
HTML Comments
• You can add comments to your HTML source by using the following syntax:
• <!-- Write your comments here -->
Ex: <!– p tag is used to create paragraph -->

Example:
<!DOCTYPE html>
<html>
<body>
<!– p tag is used to create paragraph -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>

</html>
Thank you