PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
Experiment No:
Roll No. Date of Performance Date of Submission
Title: Design a WEB page
Objective:
1. The design of a web page using Hyper Text Markup Language
[HTML] and Cascading Style Sheets [CSS].
Theory:
Hypertext Markup Language:
Hypertext Markup Language, or as it is more commonly known, HTML, is the
computer language at the heart of the World Wide Web. When you create a Web
site, you use HTML to put the text, pictures, animations, and perhaps video and
sound onto the individual Web pages that make up the site. In addition, HTML
lets you insert hypertext links and interactive buttons that connect your Web
pages to other pages on your Web site and on other Web sites around the world.
Web design is a creative process, and HTML is simply one of the tools (the page
description language) you use to produce Web pages.
A graphical overview of the HTML markup syntax:
HTML Container Tags:
Essentially, a Web page is a text file that contains instructions in the form of
HTML codes (called tags) and attributes. The tags are the commands the Web
browser later follows to format the text and insert the graphics images you want
on the Web page. Some, but not all, HTML commands require both a start and
an end tag. Those that do are called container tags, because the instruction in the
SD Page 1
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
start tag applies to everything the Web page contains between the start tag and
the end tag.
Each HTML command (that is, each HTML tag) starts with a less-than sign (<)
followed by the tag’s name and any attributes, and ends with a greater-than sign
(>). To create an end tag for a start tag, you insert a forward slash (/) in front of
the tag’s name. Thus, a start tag has the form <tagname[attributes]> and an end
tag has the form </tagname>. The tag’s name tells the Web browser the tag’s
purpose; the attributes (if any) that follow the tagname give the Web browser
additional information the browser needs to carry out the tag’s instructions.
Example:
Tag:
There are several different elements. Each element has an opening tag and a
closing tag.
Attribute:
Attributes provide additional information about the contents of an element. They
appear on the opening tag of the element and are made up of two parts: a name
and a value, separated by an equal’s sign.
SD Page 2
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
HTML Elements:
1.The title Element
A single title element is required in the head element and is used to set the text
that most browsers display in their title bar.
e.g. <title>Welcome to PICT</title>
2.<meta>: Specifying Content Type, Character Set, and More
A <meta> tag has several uses. For example, it can be used to specify values that
are equivalent to HTTP response headers. Most people would agree that using the
UTF-8-character set.
3. <base> A tag specifies an absolute URL address that is used to provide server
and directory information for partially specified URL addresses, called relative
links, used within the document:
e.g:<base href=”http://pict.edu/basexeample”>
4.<link> :A <link> tag specifies a special relationship between the current
document and another document. Most commonly, it is used to specify a style
sheet used by the document.
5.<object> an <object> tag allow programs and other binary objects to be
directly embedded in a Web page.
6.<script> A <script> tag allows scripting language code to be either directly
embedded within,or,more appropriately,linked to from a Web Page.
7.<style> A <style> tag is used to enclose document-wide style
specifications,typically in Cascading Style Sheet (CSS) format,relating to
fontd,colors,positioning,and other aspects of content presentation.
SD Page 3
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
8. Comments: comments are often found in the head of a document. Following
SGML syntax, a comment starts with <! --- and ends with - -> and may
encompass many lines.
The complete syntax of the markup allowed in the head element:
The Document Body:
After the head section, the body of a document is delimited by <body> and
</body>. Within the body of a Web document is a variety of types of elements.
For example, block level elements define structural content blocks such as
paragraphs (p) or headings (h1-h6). Block-level elements generally introduce
line breaks visually. Special forms of blocks, such as unordered lists (ul), can be
used to create lists of information. Within nonempty blocks, inline elements are
found. There are numerous inline elements, such as bold (b), italic (i), strong
(strong), emphasis (em), and numerous others. These types of elements do not
introduce any returns. Other miscellaneous types of elements, including those that
reference other objects such as images (img) or interactive elements (object), are
also generally found within blocks.
The full syntax of the elements allowed in the body element is a bit more involved
than the full syntax of the head.
SD Page 4
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
Diagram shows what is directly included in the body:
Cascading Style Sheets (CSS) syntax:
CSS rules are defined as a property name followed by a colon and then a property
value. Individual rules are terminated by semicolons, with the final rule having
an optional semicolon:
e.g. property-name1 : value1; ... property-nameN : valueN;
CSS rules can be placed directly within most HTML tags by setting the core
attribute style to the rule. Such direct use of CSS is called inline style and is the
least favorable form of CSS because of its tight coupling to the actual HTML
tags.
SD Page 5
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
CSS rules not found within a particular tag consist of a selector followed by its
associated style declarations within curly braces. Similar to being used inline, a
style rule is composed of property names and property values separated by colons,
with each style declaration (property/value pair) in turn being separated by a
semicolon.
CSS syntax broken out into its individual components is shown here:
Creating a Style Sheet
To create a style sheet, simply write one or more CSS rules between start and
end style tags (<style></style>) within the header section of the Web page
HTML.
SD Page 6
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
Design of webpage:
SD Page 7
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
HTML File –
SD Page 8
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
CSS File –
SD Page 9
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
Description of constructed Webpage/ Remark’s –
SD Page 10
PUNE INSTITUTE OF COMPUTER TECHNOLOGY, PUNE - 411043
Department of Electronics & Telecommunication engineering
Conclusion:
SD Page 11
