Design Tools Workshop – I
Course Code : 20ME1103
L-T-P-S- structure : 0-0-4-0
Credits : 2
Topic:CO2_ Introduction HTML to CSS
Course Instructor: A. Indra Reddy,
Assistant Professor,
Mechanical Engineering,
K L E F, Vaddeswaram.
Session Plan: 1
Summary of Last Session- 5 min
Topic of Introduction to HTML & CSS -20 min
Split to sections- 5min
Experimentation using tool -40 min
Assessment and Interaction (Active Learning
Method) – 10 min
Documenting Results Summary and result
Explanation- 20 min
Submitting as Assignment in LMS
Internet and WWW
• Global Interconnected networks of computers.
• Information resources over the internet inter-linked
documents are WWW.
• Network of Pages of text, image, sound, videos etc.
Web Site
• Web site is a collection of related web
pages from the similar matter or domain.
Types of Web Pages
• Static
• Dynamic
• Server page
Web Browser
• Web Browser is a software to see web
pages.
Web Server
• Web Server is a computer where web
pages are kept. It provides requested
resources as service so called Server.
Web Design
• The design of websites that are displayed on the
internet. It usually refers to the user experience aspects
of website development rather than software
development.
• What is HTML?
• HTML stands for Hyper Text Mark-up Language
• HTML is the standard mark-up language for creating Web pages
History of HTML:
• Created in 1991
• Berners lee
• Published in 1995
• Actually we have two languages
1.Progamming language
2.scripting languages
Programming languages
• C
• C++
• Java
• .Net etc.
Scripting languages
• HTML
• CSS
• JAVA Script
• .VB Script etc.
web pages
Why we need to learn HMTL
• Create Websites
• Start a Web Career
• Learn Another Languages with Greater Ease
• Earn Money
Tags
• What is TAG
<html>
• Types of Tag
1.Container Tags(pair tags)
<html>
</html>
2.empty tags(single tag)
<br>,<img>
Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Applications OF HTML
• Web pages development
• Web document Creation
• Internet navigation
• Responsive images on web pages
• Game development usage
Basic HTML Web Page Design Layout
No Style - Basic HTML web page
Style 1
Style 2
Style 3
Style 4
Different Styles of web pages
Creating Web Page by CSS
What is CSS ?
• CSS stands for Cascading Style Sheets
• It is used to control style of web documents
• Handles look and feel of web pages
• CSS can control the layout of multiple web pages
all at once
• External style sheets are stored in CSS files
Why CSS ?
saves time
Page loads faster
Easy maintenance
Superior styles of
HTML
Multiple device
compatibility
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block:
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated
by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
CSS styling (Background, text,
format, controlling fonts)
Basic HTML Structure:
<!DOCTYPE html>
<html> CSS Code:
<head>
…………………………………………… <style>
…………………………………………… body{background-color: blueviolet}
.
…………………………………………… h1{color: white;text-align:center}
…………………………………………… p{font-family: verdana;font-size: 20px}
…………………………………………....
……………………………………………
</body>
.. </style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph</p>
</body>
</html>
QUIZZ
https://forms.office.com/Pages/ResponsePage.aspx?id=PsiMgEal50egP3Oh67ok848--
1VtGZ5ChTdWj0oBEWtURUxHNThYQ1VFMElTTzJER0kyN1VYR0tLQy4u
ASSIGNMENT 1
• Create web page by using HTML Add the
paragraphs, Tittles in webpage by using HTML
programming
ASSIGNMENT 2
Create your web page with CSS styling
