Assignment no. 2.
Title: Core concepts of HTML, CSS.
Objectives:
1. Understand about basic concepts of html and different tags of HTML.
2. Understand the basic concepts of CSS
3. Understand the basic concepts of types of CSS : Inline, Internal and External CSS.
Problem Statement:
Implement a web page [Link] for any client website (e.g., a restaurant website project) using
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
Outcomes:
Students will be able to,
1. Design static webpage using HTML.
2. Apply CSS to HTML pages.
SOFTWARE & HARDWARE REQUIREMENTS
Software: Notepad, Browser
THEORY:
HTML: HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language.
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
HTML Versions:
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
Table.1: HTML Versions
CSS:
CSS stands for Cascading Style Sheet. It is nothing, but design language intended to simplify
the process of making web pages [Link] handles the feel and look part of a web
page. By using CSS, one can control the color of text, style of fonts, spacing between
paragraphs, layout designs.
CSS is easy to learn, easy to understand and it provides powerful control on presentation of an
HTML document.
Advantages of CSS:
It saves the time, Pages load faster, Easy maintenance, Superior styles to HTML, Multiple
Device Compatibility, Global web standards, Offline Browsing, Platform Independence.
CSS3 Modules:
CSS3 Modules are having old CSS specifications as well as extension features.
Box Model
Selectors
Background
Border
Image Values and Replaced Content
Text Effects
Animations
2D/3D Transformations
Multiple Column Layout
User Interface
TECHNOLOGY / TOOL
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements. An inline CSS is used to apply a
unique style to a single HTML element
Ex. <h1 style="color:blue;">This is a Blue Heading</h1>
Internal - by using a <style> element in the <head> section. An internal CSS is used to
define a style for a single HTML page. An internal CSS is defined in the <head> section
of an HTML page, within a <style> element.
Example:<style>
body {background-color: red;}
h1 {color: blue;}
p {color: red;}
</style>
External - by using an external CSS file. An external style sheet is used to define the style
for many HTML pages. With an external style sheet, you can change the look of an entire
web site, by changing one file!To use an external style sheet, add a link to it in the
<head> section of the HTML page.
Example: <link rel="stylesheet" href="[Link]">
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
DESIGN / EXECUTION STEPS
Following steps are used to Create and Execute web applications,
1. Write the HTML code in notepad and save with .html extension.
2. Write the CSS code in notepad and save with .css extension.
3. Import CSS file in HTML page.
4. Open HTML page in the browser.
TEST CASES
Manual testing is used to check whether CSS gets applied or not.
CONCLUSION/ANALYSIS
Hence, we have designed static web pages using HTML and CSS.
Program Code & Output:
File: [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Restaurant Website</title>
<!-- External CSS -->
<link rel="stylesheet" href="[Link]">
<style>
/* Internal CSS */
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Our Restaurant</h1>
</header>
<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a family-owned restaurant serving delicious meals
made with fresh, locally sourced ingredients.</p>
<img src="[Link]" alt="About Us" width="400">
</section>
<section id="menu">
<h2>Menu</h2>
<table>
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Spaghetti Bolognese</td>
<td>Classic Italian pasta dish with meat sauce</td>
<td>$12.99</td>
</tr>
<tr>
<td>Grilled Salmon</td>
<td>Fresh salmon fillet grilled to perfection</td>
<td>$15.99</td>
</tr>
<!-- Add more menu items as needed -->
</table>
</section>
<!-- Inline CSS -->
<section id="special-offer">
<h2>Special Offer</h2>
<p class="special-offer" style="color:red"> Get 10% off your
first order! Limited time offer.</p>
</section>
<section id=" contact ">
<h2>Contact Us</h2>
<p>For reservations, please call <a href="[Link]
">123-456-789</a>.</p>
<form action="submit_form.php " method="post ">
<label for="name ">Name:</label>
<input type="text " id="name " name="name " required><br>
<label for="email ">Email:</label>
<input type="email " id="email " name="email "
required><br>
<label for="message ">Message:</label><br>
<textarea id="message " name="message " rows="4 "
required></textarea><br>
<input type="submit " value="Submit ">
</form>
</section>
</main>
<footer>
<p>© 2024 Restaurant Website. All rights reserved.</p>
</footer>
</body>
</html>
File: [Link]
footer p {
color: blue;
font-size: 16px;
text-align: center;
}
Sample Output:
Paste the output here.
ORAL QUESTIONS
1. What is the difference between HTML and HTML5?
2. What is the difference between html elements and tags?
3. What is marquee?
4. What is the use of span tag? Give an example?
5. What is the use of ‘required ’attribute in HTML5?
6. What is External stylesheet? What are the advantages and disadvantages?
7. What is CSS selector?
8. What are the components of CSS style?
9. What are browser safe color?