Scribd
Upload
67 views

Design Tools Workshop - I: Topic

The document summarizes a Design Tools Workshop session on introducing HTML and CSS. The session plan involves summarizing the previous session, a 20-minute topic introduction on HTML and CSS, splitting into sections for a 40-minute experimentation period using tools, a 10-minute assessment and interaction, and a 20-minute results documentation and explanation session. The document then provides background information on the internet, websites, web pages, browsers, servers, and web design. It introduces HTML and CSS, covering basic HTML page structure, tags, applications of HTML, and creating web pages with CSS for styling.

Uploaded by

Nitin Khamitkar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
67 views

Design Tools Workshop - I: Topic

The document summarizes a Design Tools Workshop session on introducing HTML and CSS. The session plan involves summarizing the previous session, a 20-minute topic introduction on HTML and CSS, splitting into sections for a 40-minute experimentation period using tools, a 10-minute assessment and interaction, and a 20-minute results documentation and explanation session. The document then provides background information on the internet, websites, web pages, browsers, servers, and web design. It introduces HTML and CSS, covering basic HTML page structure, tags, applications of HTML, and creating web pages with CSS for styling.

Uploaded by

Nitin Khamitkar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

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

You might also like