CA224
Introduction to Web
Designing
Subject Credit: 2
World Wide Web
◦ The World Wide Web (WWW) is an information space
where documents and other web resources are
identified by URLs, interlinked by hypertext links, and
can be accessed via the Internet.
◦ Web browser
◦ Web server
◦ Protocol
◦ URL
◦ Language
Client – Server Communication
Web Components
◦ Web browser
◦ It is used for viewing the information.
◦ The browser does not display the HTML tags, but uses them to determine how to display
the document.
◦ Web server
◦ It holds the information.
◦ Protocol (HTTP: Hypertext Transfer Protocol )
◦ It is used to communicate between the client and the server.
◦ It connects the two ( client and server ).
◦ URL (Uniform Resource Locator)
◦ It is used to locate the information.
◦ It is the address of a file and usually consists of four parts: the protocol, server (or
domain) , path , and file name.
◦ Example : https://www.charusat.ac.in/CMPICA/wp-content/uploads/2016/Syllabus.pdf
◦ Language (HTML: Hypertext Markup Language)
◦ HTML is the language used to build Web pages.
◦ HTML uses standard codes, or tags, to determine how a Web page looks when your
browser displays it.
HTML
Hyper Text Markup
Language
What is HTML?
◦ The definition of HTML is HyperText Markup Language.
◦ HyperText is the method by which you move around on the
web — by clicking on special text called hyperlinks which
bring you to the next page. The fact that it is hyper just means it
is not linear — i.e. you can go to any place on the Internet
whenever you want by clicking on links — there is no set order
to do things in.
◦ Markup is what HTML tags do to the text inside them. They mark
it as a certain type of text.
◦ HTML is a Language, as it has code-words and syntax like any
other language.
A Small HTML Document
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A Small HTML Document
◦ <html> and </html>
◦ The text between the tags describes an HTML document.
◦ <head> and </head>
◦ The text between the tags provides information about the document.
◦ <title> and </title>
◦ The text between the tags provides a title for the document.
◦ <body> and </body>
◦ The text between the tags describes the visible page content.
◦ <h1> and </h1>
◦ The text between the tags describes a heading.
◦ <p> and </p>
◦ The text between the tags describes a paragraph.
HTML Tags
◦ HTML tags are keywords (tag names)
surrounded by angle brackets:
<tagname> content </tagname>
◦ Mostly they are in pairs like <p> and </p>.
◦ The first tag in a pair is the start tag, the second
tag is the end tag.
◦ The end tag is written like the start tag, but with Start tag Element content End tag
a forward slash inserted before the tag name. <h1> My First Heading </h1>
<p> My first paragraph. </p>
◦ HTML tags with no content are called empty <br/>
tags. Empty tags can be "closed" in the
opening tag like this: <br/>.
HTML Page Structure
<html>
<head>
<title> Page title </title>
</head>
<body>
<h1>
This is a heading
</h1>
<p>
This is a paragraph.
</p>
<p>
This is another paragraph.
</p>
</body>
</html>
Only the <body> area (the white area) is displayed by the browser.
HTML Documents
◦ The HTML document itself begins with <html> and ends with
</html>
◦ <head> and </head> is the place where most of the
instructions for the browser are located and where you store
extra information — so called meta information — about the
document. Only the text in <title> tag is displayed in the
browser.
◦ The visible part of the HTML document is between <body>
and </body>.
Write HTML using editor
◦ Web pages can be created and modified by using professional
HTML editors (for example, Dreamweaver).
◦ However, for learning HTML we should use simple text editor like
Notepad (PC) or TextEdit (Mac).
◦ Follow the four steps below to create your first web page with
Notepad.
◦ Step 1: Open Notepad (Windows)
◦ Step 2: Write Some HTML
◦ Step 3: Save the HTML Page (.html extension)
◦ Step 4: View HTML Page in Your Browser
HTML Elements
◦HTML elements consist of the following
characteristics,
◦ Non empty tags have start tag and end tag.
◦ Some tags are empty.
◦ Nested.
◦ Not case sensitive. ( but good practice to write in lowercase )
HTML Attributes
◦ Attributes provide additional information about HTML elements.
◦ All HTML elements can have attributes
◦ Attributes are always specified in the start tag
◦ Attributes come in name/value pairs like: name="value"
◦ Note:
◦ Always Use Lowercase Attributes
◦ Always Quote Attribute Values ( Double quotes are the most common in HTML, but
single quotes can also be used. )
◦ In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes or vice versa.
◦ For example <p title=' Ahmedabad "Surat" Baroda'> or <p title= " Ahmedabad 'Surat'
Baroda" >
