Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
19 views

Intro To HTML & Css - Session 1

Uploaded by

Lisa Arbogast
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

Intro To HTML & Css - Session 1

Uploaded by

Lisa Arbogast
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