ZEAL EDUCATION SOCIETY’S

ZEAL COLLEGE OF ENGINEERING AND RESEARCH

NARHE │PUNE -41 │ INDIA

Record No.: ZCOER-ACAD/R/ Revision: 00 Date:01/04/2021

LAB Manual
Class\Sem: TE – A, B, C Sem – II Course: Web Technology Lab
Faculty: Prof. Shyamsundar Magar A.Y: - 2024-25

EXPERIMENT NO.02

IMPLEMENT A WEB PAGE FOR ANY CLIENT

WEBSITE USING HTML & CSS

Assessment Rubric Mark Assessment Rubric Mark

s s
Attendance (1M) Creativity & Design Aesthetics (1M)
Code Implementation / Execution (1M) Use of Relevant Technologies (1M)

Problem Understanding (1M) Write-Up Code Comments &

Documentation (1M)
Output Accuracy & Functionality (1M) Use of Proper Syntax & Best Practices (1M)
Logic & Algorithm Design (1M) Timely Completion & Submission (1M)
Total
_ _ _ /10
(10M)

Remark

Dated Sign & Name of Subject

Teacher
 EXPERIMENT NO.02
PART (A)
(PART A: TO BE REFERRED BY STUDENTS)
A.1 AIM:

IMPLEMENT A WEB PAGE FOR ANY CLIENT WEBSITE USING HTML & CSS
A.2 PROBLEM STATEMENT:
Implement a web page index.htm for any client website (e.g., a restaurant website project) using the
following:
a. HTML syntax: heading tags, basic tags and attributes, frames, tables, images, lists, links for text and
images, forms etc.
b. Use of Internal CSS, Inline CSS, External CSS
A.2 PREREQUISITE\REQUIREMENTS:
 Text Editor: To write HTML code, you need a text editor such as Notepad, Sublime Text, Visual
Studio Code, or Atom.
 Web Browser: To view the output of your HTML code, you need a web browser like Google Chrome,
Mozilla Firefox, Microsoft Edge, or Safari.
 Computer with Internet Access
 Search Engine: A search engine like Google or Bing for research and troubleshooting.
 Access to Web Servers (if applicable): Required for demonstrating dynamic websites.
 Study Materials: Study guides or handouts explaining key terminologies.
 Basic Knowledge Requirements: Understanding of logic and fundamental programming concepts.
A.3 LAB OUTCOME:
CO1 - Understand the importance of website planning and website design issues
Students will be able to,
1. Design a static webpage using HTML.
2. Apply CSS to HTML pages.
A.4 THEORY:

HTML (HYPERTEXT MARKUP LANGUAGE)

1. HTML Stands for HyperText Markup Language
HTML is the standard language used to create web pages and web applications. It defines the structure of
a web page using a series of elements or tags.
 HyperText: Refers to text that contains links to other text. It allows users to navigate between web
pages.
 Markup Language: A system for annotating a document with tags that describe its structure and
formatting.
2. HTML Describes the Structure of Web Pages Using Markup
HTML provides a way to structure content on a web page using various elements like headings,
paragraphs, tables, lists, images, and links. The document follows a hierarchical structure, ensuring clear
organization.
3. HTML Elements Are the Building Blocks of HTML Pages
HTML pages are built using elements, which define different parts of the content. Each element consists
of:
 An opening tag (e.g., <p> for paragraph)
 The content (e.g., "This is a paragraph.")
 A closing tag (e.g., </p>)
Example:
<p>This is a paragraph.</p>
4. HTML Elements Are Represented by Tags
Tags are enclosed in angle brackets (<>). Some common HTML tags include:
 <h1> to <h6> - Headings
 <p> - Paragraph
 <a> - Hyperlink
 <img> - Image
 <table> - Table
 <div> - Division
 <span> - Inline container
5. HTML Tags Label Pieces of Content
HTML tags define the role of different content types. Examples:
 <h1> defines a heading.
 <p> defines a paragraph.
 <table> creates a table.
Browsers use these tags to understand and display the content properly.
6. Browsers Do Not Display the HTML Tags, But Use Them to Render the Content
Web browsers (Chrome, Firefox, Edge, Safari) interpret HTML tags and render the content accordingly.
Users do not see the tags; they only see the formatted output.
7. HTML Versions
HTML has evolved over time to introduce new features and improvements:
HTML Version Year of Release
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
HTML5 is the latest version and introduces modern features such as:
 Semantic elements (<header>, <footer>, <article>, <section>)
 Audio and video support
 Form enhancements (<input type="email">, <input type="date">)
 Local storage (localStorage, sessionStorage)
 Canvas API for graphics and animations

CSS (CASCADING STYLE SHEETS)

1. What is CSS?
CSS is a stylesheet language used to describe the look and formatting of HTML documents. It enhances the
presentation of web pages by controlling elements like colors, fonts, layouts, and animations.
2. Purpose of CSS
CSS simplifies web design by allowing developers to:
  Style multiple web pages with a single stylesheet
 Improve readability and aesthetics
 Control the layout and responsiveness of web pages
3. Key Features of CSS
 Color control: Define text, background, and border colors
 Typography: Set font size, style, weight, and spacing
 Box model: Manage margins, padding, and borders
 Positioning and layout: Control element placement using properties like flexbox and grid
Example of CSS:
p{
color: blue;
font-size: 16px;
}
Advantages of CSS
1. Saves Time: One stylesheet can control multiple web pages.
2. Faster Page Load Speed: Reduces inline styling and page size.
3. Easy Maintenance: Changes made in one CSS file reflect across all linked HTML files.
4. Superior Styling: Offers more advanced styling options than HTML alone.
5. Multiple Device Compatibility: Ensures responsiveness across desktops, tablets, and mobiles.
6. Global Web Standards: CSS3 follows W3C standards for consistency.
7. Offline Browsing: CSS files can be cached for offline access.
8. Platform Independence: Works on all operating systems and browsers.
CSS3 Modules
CSS3 introduced modular enhancements with better styling and animation features. Some key modules:
1. Box Model: Defines margins, padding, and border properties of elements.
2. Selectors: Allow targeted styling using IDs (#id), classes (.class), and attributes.
3. Background: Advanced background options like gradients and multiple images.
4. Border: Rounded corners (border-radius), shadow effects.
5. Image Values and Replaced Content: Control over how images are displayed.
6. Text Effects: Custom fonts, text shadows, word wrapping.
7. Animations: Keyframe animations for transitions and motion effects.
8. 2D/3D Transformations: Rotating, scaling, and skewing elements using CSS.
9. Multiple Column Layout: Creating newspaper-style layouts.
10. User Interface: Custom UI components like buttons and scrollbars.

A.5 PROCEDURE:
Step 1: Create Project Folder
 Create a folder named RestaurantWebsite or any suitable name on your computer.
 Inside this folder, you’ll save all files related to your project.
Step 2: Create HTML File
 Open your text editor and create a new file.
 Save it as index.htm in the project folder.
 Start with the basic HTML structure:
Step 3: Add HTML Content
Use the following HTML elements:
 Headings (<h1> to <h6>)
 Paragraphs, bold, italic, break, etc.
 Images (<img>)
 Lists (<ul>, <ol>, <li>)
 Tables (<table>, <tr>, <td>)
 Links (<a href>)
 Form Elements (<input>, <textarea>, <select>)
 Frame using <iframe> (for maps or embedded pages)
Step 4: Apply Inline CSS
 Add CSS directly inside HTML tags using the style attribute.
Step 5: Apply Internal CSS
 Write CSS rules inside the <style> tag in the <head> section.
Step 6: Create External CSS File
 Create a new file in the same folder and name it styles.css.
 Write your CSS rules:
 Link it in the <head> of index.htm:
Step 7: Add Form Section
Include a simple form
Step 8: Add an Iframe
Embed a Google Map or YouTube video:
Step 9: Save and Run
 Save all your files.
 Open index.htm in a web browser to view the result.
 Make corrections or enhancements as needed.
Step 10: Document Observations
 Write what you learned:
o Understanding of HTML elements
o Role of each CSS type (Inline, Internal, External)
o Design layout techniques
o Importance of planning a webpage
 PART (B)
(PART B : TO BE COMPLETED BY STUDENTS)
(Students must submit the soft copy as per following segments within two hours of the practical. The soft
copy must be uploaded on the Blackboard or emailed to the concerned lab in charge faculties at the end
of the practical in case the there is no Black board access available)

Roll No. 101 Batch: C1

Name: Shyamsundar. P. Magar Date of Submission 15/01/2025
Class: TE Date of Experiment: 08/01/2025
B.1 DOCUMENT CREATED BY THE STUDENT:

Code and Output

B.4 POST LAB EXPERIMENT (SELF-LEARNING ACTIVITY)

(To be answered by the student based on the practical performed and learning/observations)

ACTIVITY 1: CREATE RESTAURANT WEB PAGE DESIGN USING HTML & CSS
1) Objective:
To evaluate and reinforce the knowledge gained through designing a functional and styled webpage for a
sample client (e.g., restaurant) using HTML and different types of CSS (Inline, Internal, External)..
2) Activity:
Students created a web page (index.htm) for a restaurant website project that includes:
Basic HTML structure and tags (headings, paragraphs, tables, images, forms, links, lists)
Use of an <iframe> for embedding maps or external content
Styling through:
Inline CSS: styling applied within individual HTML tags
Internal CSS: styling added inside <style> tag within the HTML file
External CSS: a separate .css file linked to the HTML file
3) Instructions:
 Create a folder named RestaurantWebsite.
 Inside the folder, create an HTML file named index.htm.
 Design a sample webpage using:
 Heading, paragraph, image, table, list, link, and form tags.
 <iframe> to show embedded location (Google Maps or video).
 Apply Inline CSS to specific HTML tags (e.g., <h1 style="color:red;">).
 Apply Internal CSS inside the <head> tag using <style>.
 Create and link an External CSS file (styles.css) to manage layout and colors.
 Open the HTML file in a web browser and test the page layout and style.
4) Skills Practiced:
✅ Structuring content using tables, lists, and forms
✅ Implementing and differentiating types of CSS
✅ Organizing code using separation of structure (HTML) and style (CSS)
✅ Embedding external content using <iframe>
✅ Designing a simple and user-friendly client webpage

B.2 OBSERVATIONS AND LEARNING:

(Students are expected to understand the selected topic. Write your observations after learning)
Write your observations after performing the experiment, such as the role of each structure tag and how
they contribute to webpage formation

B.3 CONCLUSIONS:

B5. VIVA QUESTIONS

1. What is the purpose of HTML in web development?

2. How does Inline CSS differ from Internal and External CSS?
3. Explain the role of the <form> tag and its common elements.
4. What is the function of the <iframe> tag in a web page?
5. How do you create a hyperlink in HTML?
6. What is the significance of the box-model in CSS?
7. How can you apply styling to a specific element using Inline CSS?
8. What are the benefits of using External CSS in a project?
9. Explain the use of the :hover pseudo-class in CSS.
10. What are some best practices to follow while designing a webpage for better user experience?