SlideShare a Scribd company logo
HTML CSS and Web Development
Web Designing Web Development SEO
• HTML
• CSS
• JavaScript
• jQuery
• PHP
• JSP
<HTML>
Hyper Text Markup Language
Hyper Text : A text with a Link
• A Language which is made up of tags.
• Tags: Anything Between <> angular brackets.
• Words which are formed by W3C.
• World Wide Web Consortium.
• A organization which make standard for web.
HTML
CSS
JavaScript
PHP
To Display Information.
To Design Information.
To Provide User Interaction.
To Process Information.
Structure of HTML document
<!DOCTYPE html>
<html><head><title>My Page</title></head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• The <!DOCTYPE> declaration must be the very first thing in your
HTML document, before the <html> tag.
• The <!DOCTYPE> declaration is not an HTML tag; it is an instruction
to the web browser about what version of HTML the page is written
in.
• The <!DOCTYPE> declaration helps the browser to display a web
page correctly.
• There are many different documents on the web, and a browser can
only display an HTML page 100% correctly if it knows the HTML type
and version used.
<Head>
1. Title
6.script
5. meta4. Style
3. Base
2. Link
•The <base> tag specifies the base URL/target for
all relative URLs in a page:
<head>
<base href="http://www.w3schools.com/images/"
target="_blank">
</head>
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
• Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata.
• The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
• <meta> tags always go inside the <head> element.
• Define keywords for search engines:
• Define a description of your web page:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="description" content=“Workshop on Web Development">
• Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Keywords
Description
• <p> : Paragraph
• <h1></h1><h2></h2>: Heading
<H1> Hello HTML </h1>
<h2> Hello HTML </H2>
<h3> Hello HTML </h3>
<H4> Hello HTML </h4>
<h5> Hello HTML </H5>
<h6> Hello HTML </h6>
Hello HTML
Hello HTML
Hello HTML
Hello HTML
Hello HTML
Hello HTML
• <img> Tag
• <img> tag have no closing tag.
<img src=“D:/Workshop/imgname.jpg” alt = “Learn About HTML”>
attribute value
• <a> stands for anchor
• Specifies a link for a particular text.
Attributes Value/work
Href (Hyper reference) Link of page you want to open
Target _blank : open the link in a new tab
_self : default
Framename : opens in specified frame
Download Downloads instead of opening
<a href="/images/myw3schoolsimage.jpg" download> Download ME </a>
<a href=“http://www.google.com” target = “_blank”>Google </a>
<table border=1>
</table>
<caption> This is My Table</caption>
<tr>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
<td> Column 1 </td>
</tr>
</tr>
<td> Column 1 </td>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 1 </td>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 2 </td>
<td> Column 2 </td>
<td> Column 2</td>
<td> Column 3 </td>
<td> Column 3 </td>
<td> Column 3 </td>
<td> Column 3 </td>
<td> Column 3 </td>
<table> Tag
</tr>
<table> Tag
Column 2 Column 3
Column 1 Column 2 Column 3
Column 1 Column 2 Column 3
Column 1 Column 2 Column 3
Column 1 Column 2 Column 3
This is My Table
<tr> <td> Column 1 </td>
Caption
•You can say it DIVISION
•Makes logical division on a page.
•Use <div> instead of <table> to create your
website.
•Syntax: <div> Your Content </div>
•Nothing without proper CSS
Div 1
<div> 2
<div> 3
<div> 4
<div> 5
<div> 6
• Used to submit user data.
•Used to provide user some interaction with the Website.
• Used to take feedback.
•Used to Make user capable of uploading anything.
• Used to collect information and use that information in
another
page.
action
autocomplete
autofocus
method
enctype
Specifies where to send form data
When autocomplete is on, the browser
automatically complete values based on values
that the user has entered before.
specifies that an <input> element should
automatically get focus when the page loads.
defines the HTTP method for sending form-data to the
action URL
specifies how the form-data should be encoded
when submitting it to the server
1. <input>
2. <textarea>
3. <select>
4. <optgroup>
5. <fieldset>
6. <label>
7. <button>
1. Text
<input type=‘text’ name=‘fname’ value=‘My Name’ autocomplete=‘on’>
<input type=‘text’ name=‘fname’ placeholder=‘Enter Your name’>
2. Password
<input type=‘password’ name=‘pass’ placeholder=‘Enter Your Password’>
<form>
<input type="radio" name=“gender" value="male">Male <br>
<input type="radio" name=“gender" value="female">Female
</form>
output
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
output
<form >
Username: <input type="text" name="user">
<input type="submit" value="Submit Me">
<input type=“reset" value=“Clear Form">
</form>
output
<form>
<input type='file' name='image'>
<input type='submit' value='Upload Image'>
</form>
<form>
<input type='file' name='image‘ multiple>
<input type='submit' value='Upload Image'>
</form>
• Color <input type=‘color’>
• Date <input type=‘date’>
• Email <input type=‘email’>
• Number <input type=‘number’>
• Range <input type=‘range’ min=‘0’ max=‘100’ value=‘50’>
Attributes Value Discription
Rows Number Specifies number of rows
Cols Number Specifies number of columns
Maxlength Number Specifies maximum number of
characters to be input.
Name Any name Specifies the name of textarea
Readonly No Value If present the text can only be viewed it
cant be modified
Wrap Hard or soft specifies how the text in a text area is to
be wrapped when submitted in a form.
<form>
<textarea name='feedback' rows='10' cols='40' maxlength='100'>
</textarea>
</form>
<form>
<textarea name='feedback' rows='10' cols='40' readonly'>
You can not edit me. Try if u don’t believe.
</textarea>
</form>
<select name=‘cars’>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<optgroup label="HTML Version">
<option value="4">HTML 4.0</option>
<option value="5">HTML 5</option>
</optgroup>
<optgroup label="CSS Version">
<option value="1">CSS</option>
<option value="3">CSS 3</option>
</optgroup>
</select>
Legend
Fieldset
<form>
<fieldset style='width:20%'>
<legend>Personal Information</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
• The <label> tag defines a label for an <input> element.
• The <label> element does not render as anything special for the
user.
• However, it provides a usability improvement for mouse users,
because if the user clicks on the text within the <label> element,
it toggles the control.
• The for attribute of the <label> tag should be equal to the id
attribute of the related element to bind them together.
<form>
<label for="male">Male</label>
<input type="radio" name=“gender" id="male" value="male“>
<br>
<label for="female">Female</label>
<input type="radio" name=“gender" id="female" value="female">
<br>
<input type="submit" value="Submit">
</form>
HTML CSS and Web Development
Cascading Style Sheets
How to ?
1. Inline CSS
<h1 style=‘color:red;font-size:44px;’>Hey I am Inline CSS </h1>
2. Internal CSS
<Head>
<style>
H1 { color:red ; font-size:44px}
</style>
</head><body>
<h1> Hello I am Internal CSS
</body>
How to ?
3. External CSS
<link href=‘extern.css’ rel=‘stylesheet’ type=‘text/css’>
extern.css
H1{ color:red;
font-size:44px;
}
Order of Precedence
Browser CSS
Inline CSS
Internal CSS
External CSS
First
Second
Third
Fourth
Syntax
h1 { color:red ; font-size:49px;}
Rule 1 Rule 2
Property Value Property Value
Selector

More Related Content

What's hot

Web browser and web servers (WT)
Web browser and web servers (WT)Web browser and web servers (WT)
Web browser and web servers (WT)
kunjan shah
 
Introduction to Web Hosting.
Introduction to Web Hosting.Introduction to Web Hosting.
Introduction to Web Hosting.
Cloudbells.com
 
HTML
HTMLHTML
Web design - Working with Links and Images
Web design - Working with Links and ImagesWeb design - Working with Links and Images
Web design - Working with Links and Images
Mustafa Kamel Mohammadi
 
Web development tool
Web development toolWeb development tool
Web development tool
Deep Bhavsar
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
alyssa_lum11
 
Web development
Web developmentWeb development
Web development
Sunil Moolchandani
 
Internet Cookies
Internet CookiesInternet Cookies
Internet Cookies
anita gouda
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
WordPress Complete Tutorial
WordPress Complete TutorialWordPress Complete Tutorial
WordPress Complete Tutorial
OpenSource Technologies Pvt. Ltd.
 
HTML5
HTML5HTML5
Html phrase tags
Html phrase tagsHtml phrase tags
Html phrase tags
eShikshak
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
WEB HOSTING
WEB HOSTINGWEB HOSTING
WEB HOSTING
webhostingguy
 
Introduction to Wordpress
Introduction to WordpressIntroduction to Wordpress
Introduction to Wordpress
Reuben Rock
 
Html forms
Html formsHtml forms
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designing
sreejagiri
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
 

What's hot (20)

Web browser and web servers (WT)
Web browser and web servers (WT)Web browser and web servers (WT)
Web browser and web servers (WT)
 
Introduction to Web Hosting.
Introduction to Web Hosting.Introduction to Web Hosting.
Introduction to Web Hosting.
 
HTML
HTMLHTML
HTML
 
Web design - Working with Links and Images
Web design - Working with Links and ImagesWeb design - Working with Links and Images
Web design - Working with Links and Images
 
Web development tool
Web development toolWeb development tool
Web development tool
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 
Web development
Web developmentWeb development
Web development
 
Internet Cookies
Internet CookiesInternet Cookies
Internet Cookies
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
WordPress Complete Tutorial
WordPress Complete TutorialWordPress Complete Tutorial
WordPress Complete Tutorial
 
HTML5
HTML5HTML5
HTML5
 
Html phrase tags
Html phrase tagsHtml phrase tags
Html phrase tags
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
WEB HOSTING
WEB HOSTINGWEB HOSTING
WEB HOSTING
 
Introduction to Wordpress
Introduction to WordpressIntroduction to Wordpress
Introduction to Wordpress
 
Html forms
Html formsHtml forms
Html forms
 
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designing
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 

Viewers also liked

Building a Best-in-Class Economic Development Website
Building a Best-in-Class Economic Development WebsiteBuilding a Best-in-Class Economic Development Website
Building a Best-in-Class Economic Development Website
Atlas Integrated
 
Website development-Design solution for any business
Website development-Design solution for any businessWebsite development-Design solution for any business
Website development-Design solution for any business
MT Web Technologies
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
 
Website with HTML CSS
Website with HTML CSSWebsite with HTML CSS
Website with HTML CSS
Things Lab
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
Lukas Oppermann
 
ITT Final Project for Creating Websites Using HTML_ScreenShots
ITT Final Project for Creating Websites Using HTML_ScreenShotsITT Final Project for Creating Websites Using HTML_ScreenShots
ITT Final Project for Creating Websites Using HTML_ScreenShots
Kayla Horn
 
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
dezyneecole
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
BG Java EE Course
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Philipp Bosch
 
Web development overview
Web development overviewWeb development overview
Web development overview
Maxim Mazurok
 
e-Commerce Website Development Proposal
e-Commerce Website Development Proposale-Commerce Website Development Proposal
e-Commerce Website Development Proposal
Indicsoft Technologies
 
Learn HTML & CSS From Scratch in 30 Days
Learn HTML & CSS From Scratch in 30 DaysLearn HTML & CSS From Scratch in 30 Days
Learn HTML & CSS From Scratch in 30 Days
Jonathan Grover
 

Viewers also liked (13)

Building a Best-in-Class Economic Development Website
Building a Best-in-Class Economic Development WebsiteBuilding a Best-in-Class Economic Development Website
Building a Best-in-Class Economic Development Website
 
Website development-Design solution for any business
Website development-Design solution for any businessWebsite development-Design solution for any business
Website development-Design solution for any business
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Website with HTML CSS
Website with HTML CSSWebsite with HTML CSS
Website with HTML CSS
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
 
ITT Final Project for Creating Websites Using HTML_ScreenShots
ITT Final Project for Creating Websites Using HTML_ScreenShotsITT Final Project for Creating Websites Using HTML_ScreenShots
ITT Final Project for Creating Websites Using HTML_ScreenShots
 
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
 
Web development overview
Web development overviewWeb development overview
Web development overview
 
e-Commerce Website Development Proposal
e-Commerce Website Development Proposale-Commerce Website Development Proposal
e-Commerce Website Development Proposal
 
Learn HTML & CSS From Scratch in 30 Days
Learn HTML & CSS From Scratch in 30 DaysLearn HTML & CSS From Scratch in 30 Days
Learn HTML & CSS From Scratch in 30 Days
 

Similar to HTML CSS and Web Development

BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
MattMarino13
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
Colin Loretz
 
HTML - hypertext markup language
HTML - hypertext markup languageHTML - hypertext markup language
HTML - hypertext markup language
Basmaa Mostafa
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
vardanyan99
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero
 
Day1
Day1Day1
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
Diego Scataglini
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
Altaf Pinjari
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company india
Jignesh Aakoliya
 
Web design and Development
Web design and DevelopmentWeb design and Development
Web design and Development
Shagor Ahmed
 
gdsc-html-ppt.pptx
gdsc-html-ppt.pptxgdsc-html-ppt.pptx
gdsc-html-ppt.pptx
yuvakiran15
 
JavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptxJavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptx
VivekBaghel30
 
Lab1_HTML.pptx
Lab1_HTML.pptxLab1_HTML.pptx
Lab1_HTML.pptx
IslamGhonimi1
 
INTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxINTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptx
SarthakrOkr
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
Diego Scataglini
 
Html part 2
Html part 2Html part 2
Html part 2
lokenra
 
Industrial training report
Industrial training report Industrial training report
Industrial training report
Akash Kr Sinha
 
Html and html5 cheat sheets
Html and html5 cheat sheetsHtml and html5 cheat sheets
Html and html5 cheat sheets
Zafer Galip Ozberk
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
Sónia
 
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
brianbyamukama302
 

Similar to HTML CSS and Web Development (20)

BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
HTML - hypertext markup language
HTML - hypertext markup languageHTML - hypertext markup language
HTML - hypertext markup language
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Day1
Day1Day1
Day1
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company india
 
Web design and Development
Web design and DevelopmentWeb design and Development
Web design and Development
 
gdsc-html-ppt.pptx
gdsc-html-ppt.pptxgdsc-html-ppt.pptx
gdsc-html-ppt.pptx
 
JavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptxJavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptx
 
Lab1_HTML.pptx
Lab1_HTML.pptxLab1_HTML.pptx
Lab1_HTML.pptx
 
INTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxINTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptx
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
 
Html part 2
Html part 2Html part 2
Html part 2
 
Industrial training report
Industrial training report Industrial training report
Industrial training report
 
Html and html5 cheat sheets
Html and html5 cheat sheetsHtml and html5 cheat sheets
Html and html5 cheat sheets
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
 
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
 

Recently uploaded

Individual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docxIndividual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docx
monicaaringo1
 
NAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource BookNAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource Book
lakitawilson
 
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at  Pangkabuhayan 1: Personal HygieneEdukasyong Pantahanan at  Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
MJDuyan
 
C Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdfC Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdf
Scholarhat
 
What is Rescue Session in Odoo 17 POS - Odoo 17 Slides
What is Rescue Session in Odoo 17 POS - Odoo 17 SlidesWhat is Rescue Session in Odoo 17 POS - Odoo 17 Slides
What is Rescue Session in Odoo 17 POS - Odoo 17 Slides
Celine George
 
modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025
NurFitriah45
 
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cátedra Banco Santander
 
CTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDFCTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDF
hammadmughal76316
 
How to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POSHow to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POS
Celine George
 
Imagination in Computer Science Research
Imagination in Computer Science ResearchImagination in Computer Science Research
Imagination in Computer Science Research
Abhik Roychoudhury
 
How to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 WebsiteHow to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 Website
Celine George
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Liyana Rozaini
 
How to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POSHow to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POS
Celine George
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
KlettWorldLanguages
 
matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
SarahAlie1
 
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan BapatH. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
Niranjan Bapat
 
1-NLC-MATH7-Consolidation-Lesson1 2024.pptx
1-NLC-MATH7-Consolidation-Lesson1 2024.pptx1-NLC-MATH7-Consolidation-Lesson1 2024.pptx
1-NLC-MATH7-Consolidation-Lesson1 2024.pptx
AnneMarieJacildo
 
NC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline PartnershipNC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline Partnership
Mebane Rash
 
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 SlidesHow to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
Celine George
 
New Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 SlidesNew Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 Slides
Celine George
 

Recently uploaded (20)

Individual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docxIndividual Performance Commitment Review Form-Developmental Plan.docx
Individual Performance Commitment Review Form-Developmental Plan.docx
 
NAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource BookNAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource Book
 
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at  Pangkabuhayan 1: Personal HygieneEdukasyong Pantahanan at  Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
 
C Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdfC Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdf
 
What is Rescue Session in Odoo 17 POS - Odoo 17 Slides
What is Rescue Session in Odoo 17 POS - Odoo 17 SlidesWhat is Rescue Session in Odoo 17 POS - Odoo 17 Slides
What is Rescue Session in Odoo 17 POS - Odoo 17 Slides
 
modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025
 
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
 
CTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDFCTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDF
 
How to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POSHow to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POS
 
Imagination in Computer Science Research
Imagination in Computer Science ResearchImagination in Computer Science Research
Imagination in Computer Science Research
 
How to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 WebsiteHow to Create & Publish a Blog in Odoo 17 Website
How to Create & Publish a Blog in Odoo 17 Website
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
 
How to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POSHow to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POS
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
 
matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
 
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan BapatH. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
 
1-NLC-MATH7-Consolidation-Lesson1 2024.pptx
1-NLC-MATH7-Consolidation-Lesson1 2024.pptx1-NLC-MATH7-Consolidation-Lesson1 2024.pptx
1-NLC-MATH7-Consolidation-Lesson1 2024.pptx
 
NC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline PartnershipNC Public Schools Involved in NCDPI, Zipline Partnership
NC Public Schools Involved in NCDPI, Zipline Partnership
 
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 SlidesHow to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
 
New Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 SlidesNew Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 Slides
 

HTML CSS and Web Development

  • 2. Web Designing Web Development SEO • HTML • CSS • JavaScript • jQuery • PHP • JSP
  • 3. <HTML> Hyper Text Markup Language Hyper Text : A text with a Link
  • 4. • A Language which is made up of tags. • Tags: Anything Between <> angular brackets. • Words which are formed by W3C. • World Wide Web Consortium. • A organization which make standard for web.
  • 5. HTML CSS JavaScript PHP To Display Information. To Design Information. To Provide User Interaction. To Process Information.
  • 6. Structure of HTML document <!DOCTYPE html> <html><head><title>My Page</title></head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 7. • The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. • The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. • The <!DOCTYPE> declaration helps the browser to display a web page correctly. • There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.
  • 8. <Head> 1. Title 6.script 5. meta4. Style 3. Base 2. Link
  • 9. •The <base> tag specifies the base URL/target for all relative URLs in a page: <head> <base href="http://www.w3schools.com/images/" target="_blank"> </head>
  • 10. • Metadata is data (information) about data. • The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. • Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. • The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. • <meta> tags always go inside the <head> element.
  • 11. • Define keywords for search engines: • Define a description of your web page: <meta name="keywords" content="HTML, CSS, XML, JavaScript"> <meta name="description" content=“Workshop on Web Development"> • Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">
  • 13. • <p> : Paragraph • <h1></h1><h2></h2>: Heading <H1> Hello HTML </h1> <h2> Hello HTML </H2> <h3> Hello HTML </h3> <H4> Hello HTML </h4> <h5> Hello HTML </H5> <h6> Hello HTML </h6> Hello HTML Hello HTML Hello HTML Hello HTML Hello HTML Hello HTML
  • 14. • <img> Tag • <img> tag have no closing tag. <img src=“D:/Workshop/imgname.jpg” alt = “Learn About HTML”> attribute value
  • 15. • <a> stands for anchor • Specifies a link for a particular text. Attributes Value/work Href (Hyper reference) Link of page you want to open Target _blank : open the link in a new tab _self : default Framename : opens in specified frame Download Downloads instead of opening <a href="/images/myw3schoolsimage.jpg" download> Download ME </a> <a href=“http://www.google.com” target = “_blank”>Google </a>
  • 16. <table border=1> </table> <caption> This is My Table</caption> <tr> <tr> <tr> <tr> <tr> </tr> </tr> <td> Column 1 </td> </tr> </tr> <td> Column 1 </td> <td> Column 1 </td> <td> Column 2 </td> <td> Column 1 </td> <td> Column 1 </td> <td> Column 2 </td> <td> Column 2 </td> <td> Column 2 </td> <td> Column 2</td> <td> Column 3 </td> <td> Column 3 </td> <td> Column 3 </td> <td> Column 3 </td> <td> Column 3 </td> <table> Tag </tr>
  • 17. <table> Tag Column 2 Column 3 Column 1 Column 2 Column 3 Column 1 Column 2 Column 3 Column 1 Column 2 Column 3 Column 1 Column 2 Column 3 This is My Table <tr> <td> Column 1 </td> Caption
  • 18. •You can say it DIVISION •Makes logical division on a page. •Use <div> instead of <table> to create your website. •Syntax: <div> Your Content </div> •Nothing without proper CSS
  • 19. Div 1 <div> 2 <div> 3 <div> 4 <div> 5 <div> 6
  • 20. • Used to submit user data. •Used to provide user some interaction with the Website. • Used to take feedback. •Used to Make user capable of uploading anything. • Used to collect information and use that information in another page.
  • 21. action autocomplete autofocus method enctype Specifies where to send form data When autocomplete is on, the browser automatically complete values based on values that the user has entered before. specifies that an <input> element should automatically get focus when the page loads. defines the HTTP method for sending form-data to the action URL specifies how the form-data should be encoded when submitting it to the server
  • 22. 1. <input> 2. <textarea> 3. <select> 4. <optgroup> 5. <fieldset> 6. <label> 7. <button>
  • 23. 1. Text <input type=‘text’ name=‘fname’ value=‘My Name’ autocomplete=‘on’> <input type=‘text’ name=‘fname’ placeholder=‘Enter Your name’> 2. Password <input type=‘password’ name=‘pass’ placeholder=‘Enter Your Password’>
  • 24. <form> <input type="radio" name=“gender" value="male">Male <br> <input type="radio" name=“gender" value="female">Female </form> output
  • 25. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> output
  • 26. <form > Username: <input type="text" name="user"> <input type="submit" value="Submit Me"> <input type=“reset" value=“Clear Form"> </form> output
  • 27. <form> <input type='file' name='image'> <input type='submit' value='Upload Image'> </form> <form> <input type='file' name='image‘ multiple> <input type='submit' value='Upload Image'> </form>
  • 28. • Color <input type=‘color’> • Date <input type=‘date’> • Email <input type=‘email’> • Number <input type=‘number’> • Range <input type=‘range’ min=‘0’ max=‘100’ value=‘50’>
  • 29. Attributes Value Discription Rows Number Specifies number of rows Cols Number Specifies number of columns Maxlength Number Specifies maximum number of characters to be input. Name Any name Specifies the name of textarea Readonly No Value If present the text can only be viewed it cant be modified Wrap Hard or soft specifies how the text in a text area is to be wrapped when submitted in a form.
  • 30. <form> <textarea name='feedback' rows='10' cols='40' maxlength='100'> </textarea> </form> <form> <textarea name='feedback' rows='10' cols='40' readonly'> You can not edit me. Try if u don’t believe. </textarea> </form>
  • 31. <select name=‘cars’> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
  • 32. <select> <optgroup label="HTML Version"> <option value="4">HTML 4.0</option> <option value="5">HTML 5</option> </optgroup> <optgroup label="CSS Version"> <option value="1">CSS</option> <option value="3">CSS 3</option> </optgroup> </select>
  • 34. <form> <fieldset style='width:20%'> <legend>Personal Information</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
  • 35. • The <label> tag defines a label for an <input> element. • The <label> element does not render as anything special for the user. • However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. • The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
  • 36. <form> <label for="male">Male</label> <input type="radio" name=“gender" id="male" value="male“> <br> <label for="female">Female</label> <input type="radio" name=“gender" id="female" value="female"> <br> <input type="submit" value="Submit"> </form>
  • 39. How to ? 1. Inline CSS <h1 style=‘color:red;font-size:44px;’>Hey I am Inline CSS </h1> 2. Internal CSS <Head> <style> H1 { color:red ; font-size:44px} </style> </head><body> <h1> Hello I am Internal CSS </body>
  • 40. How to ? 3. External CSS <link href=‘extern.css’ rel=‘stylesheet’ type=‘text/css’> extern.css H1{ color:red; font-size:44px; }
  • 41. Order of Precedence Browser CSS Inline CSS Internal CSS External CSS First Second Third Fourth
  • 42. Syntax h1 { color:red ; font-size:49px;} Rule 1 Rule 2 Property Value Property Value Selector