TE Computer Web Technology Lab
Assignment No. : 2
Title: HTML, CSS
1. Understand about basic concepts of html
2. Understand the basic concepts of CSS
Implement a web page index.htm 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
Students will be able to,
1. Design static webpage using HTML.
2. Apply CSS to HTML pages.
Software Requirements:
1. Operating System: Windows 7/8/10/Ubuntu
2. Browser: Firefox/Google Chrome/ Microsoft Edge etc.
3. Software: Sublime Text Editor/Notepad/ Notepad ++
Hardware Requirements:
1. Processor: Minimum 1 GHz.
2. Ethernet connection (LAN) OR a wireless adapter (Wi-Fi)
3. Hard Drive: Minimum 32 GB.
4. Memory (RAM): Minimum 1 GB
5. Sound card-speakers/camera/microphone (Depending upon website selection)
HTML: HTML is the standard markup language for creating Web pages.
SNJB’s Late Sau K. B. Jain COE, Chandwad
TE Computer Web Technology Lab
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:
Table.1: HTML Versions
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
CSS:
CSS stands for Cascading Style Sheet. It is nothing, but design language
intended to simplify the process of making web pages presentable.CSS
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
SNJB’s Late Sau K. B. Jain COE, Chandwad
TE Computer Web Technology Lab
Background
Border
Image Values and Replaced Content
Text Effects
Animations
2D/3D Transformations
Multiple Column Layout
User Interface
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: yellow ;}
h1 {color: blue;}
p {color: red;}
</style>
SNJB’s Late Sau K. B. Jain COE, Chandwad
TE Computer Web Technology Lab
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="styles.css">
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
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.
Hence, we have designed static web pages using HTML and CSS.
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?
SNJB’s Late Sau K. B. Jain COE, Chandwad
TE Computer Web Technology Lab
8. What are the components of CSS style?
9. What is browser safe color?
SNJB’s Late Sau K. B. Jain COE, Chandwad
