SlideShare a Scribd company logo
HTML and CSS
Web Information Systems - 2015
●What is HTML?
oQuick intro to Web server and Web browser
oBasic HTML page structure
oSome common, visible HTML elements
●What is CSS
oCSS Basics
oCSS Selectors
●HTML5 Overview
●CSS3
Agenda
HTML
Markup for the text
Web Server
A program capable of serving Web content.
Web Browser
A program capable of interpreting Web content.
What is a Web server and Web
browser
●HTML - Hyper Text Markup Language
●Can be a simple text file containing Markup (Also referred to
as tags or elements - more on these terms in XML lecture)
●Process of linking objects together so that when one object
is clicked, the linked object can be viewed
What is HTML ?
●HTML was created by Tim Berners Lee in 1990
●Markup text contains a series of markup tags to categorize
the different elements in a web page
●A web browser then interprets these different tags to create
a website
What is HTML ?
●Wrap everything in a <html>, <head> and <body> tag
<!DOCTYPE html>
<html>
<head>
<!-- title, css, scripts, etc. -->
</head>
<body>
<!-- all visible page content -->
</body>
</html>
HTML Basics
●Headers : <h1>, <h2>, ... , <h6>
●Bold and Italic text : <strong>, <em>
●Paragraphs : <p>
●Line breaks : <br />
●Links : <a>
●Tables :
<table>
<tbody>
<tr><td>R1, C1</td><td>R1, C2</td></tr>
<tr><td>R2, C1</td><td>R2, C2</td></tr>
</tbody>
</table>
●Find out others ...
Some HTML Tags
● HTML attributes
o attribute name= “Value”
HTML attributes
HTML Examples
CSS
Styling the HTML content
●Why?
oHow to specify the styling interpretation of specific HTML
tags?
▪ Would <h1> be interpreted the same way across
multiple browsers?
▪ What if I want to redefine the <h1> style?
●CSS to the rescue!
oCascading Style Sheets
oDefine styles separately from the content!
Styling purely with HTML is bad!
●Using a style attribute <style>
oGood only for a very specific tags
oNot reusable
●Using embedded style sheets
oLimited reusability
●Using external style sheets
oReusable and recommended for larger Web sites
Attaching styles
You want to define your CSS, right after the title closing tag:
… <head>…
<title>…
</title>
<style>
h1 {
font-family: georgia, sans-serif;
color: purple;
}
</style>
Example
<style>
body {
color: blue;
}
p {
font-family: georgia, sans-serif;
}
</style>
Example for the Cascading
●Globally for all specified tags
osaw an example in the earlier slide
●Using the id attribute on a tag
oGood for one specific element, must be unique
oSelector is the element's ID, prefixed by the # symbol
▪ HTML: <h2 id="newsFlash">Breaking News!</h2>
▪ CSS: #newsFlash { color: red; font-weight: bold; }
●Order of stylesheet (Increasing priority downward)
oBrowser default
o External style sheet
o Internal style sheet (in the head section)
o Inline style (inside an HTML element)
Defining Styles (for embedded and
external style sheets)
CSS Example
(HTML5)
●Current HTML standard is 4.01 in 1999
oMuch is obsolete and never used (misused, at best)
●HTML5 is the new specification
oAlready supported by most of the modern browsers
oMotivated by need for:
▪ Less need for external plugins (e.g. Flash)
▪ Better error handling
▪ More markup to replace scripting
▪ Device independence
Source: W3Schools
The Web has Changed...
● 5th revision of the HTML standards of the
W3C
● Many features added that could be useful in
low-powered devices like cell phones
● Introduces new semantic elements like
<header>, <footer>, <article>
● New APIs like: HTML Geolocation
● Let’s try
HTML5
●Much focus on multimedia and web applications:
o<audio> and <video> tags, <canvas> for drawing
▪ Many more
oLocal Storage
▪ Much faster and more secure than cookies
▪ Local SQL database
oWebWorkers (background worker threads for JavaScript)
oServer-side events
oDrag & drop API
oGeolocation
oRicher HTML forms
New Features
●Being developed alongside HTML5
●Some of the most important CSS3 modules are:
oSelectors
oBox Model
oBackgrounds and Borders
oText Effects
o2D/3D Transformations
oAnimations
oMultiple Column Layout
oUser Interface
●Like HTML5, much is already supported
oBut most of it requires browser-specific prefixed rules
Source: W3Schools
CSS3
Block statements: blockquote, ul, div, dl, form, h tags,href, table, p
rest inline
●Two useful HTML tags with no default styling
o <div>
o <span>
Some useful information
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p align ="center">My first paragraph.</p>
</body>
</html>
!DOCTYPE html>
<html>
<body>
<h1>About W3Schools</h1>
<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
<p><b><font color="red">
If you move the mouse over the paragraph above,
the title will display as a tooltip.
</font></b></p>
</body>
</html>
Try it yourself

More Related Content

What's hot (16)

Introduction to the DOM
Introduction to the DOMIntroduction to the DOM
Introduction to the DOM
tharaa abu ashour
 
Xml
XmlXml
Xml
Santosh Pandey
 
INTRODUCTION TO DOM AND DOM TREE
INTRODUCTION TO DOM AND DOM TREEINTRODUCTION TO DOM AND DOM TREE
INTRODUCTION TO DOM AND DOM TREE
systematiclab
 
Mongo db
Mongo dbMongo db
Mongo db
Swecha | స్వేచ్ఛ
 
Understanding XML DOM
Understanding XML DOMUnderstanding XML DOM
Understanding XML DOM
Om Vikram Thapa
 
Comparison with storing data using NoSQL(CouchDB) and a relational database.
Comparison with storing data using NoSQL(CouchDB) and a relational database.Comparison with storing data using NoSQL(CouchDB) and a relational database.
Comparison with storing data using NoSQL(CouchDB) and a relational database.
eross77
 
Dhtml
DhtmlDhtml
Dhtml
Soham Sengupta
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
chomas kandar
 
HTML and XML Difference FAQs
HTML and XML Difference FAQsHTML and XML Difference FAQs
HTML and XML Difference FAQs
Umar Ali
 
Processing XML
Processing XMLProcessing XML
Processing XML
Ólafur Andri Ragnarsson
 
Xhtml
XhtmlXhtml
Xhtml
Samir Sabry
 
introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5
FLYMAN TECHNOLOGY LIMITED
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
baabtra.com - No. 1 supplier of quality freshers
 
Dom structure
Dom structureDom structure
Dom structure
baabtra.com - No. 1 supplier of quality freshers
 
Xml 215-presentation
Xml 215-presentationXml 215-presentation
Xml 215-presentation
Manish Chaurasia
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
GOPAL BASAK
 

Viewers also liked (10)

Lecture 8: Class project-planning
Lecture 8: Class project-planningLecture 8: Class project-planning
Lecture 8: Class project-planning
Artificial Intelligence Institute at UofSC
 
From Data Dirt Roads to Infocosm
From Data Dirt Roads to InfocosmFrom Data Dirt Roads to Infocosm
From Data Dirt Roads to Infocosm
Amit Sheth
 
Social and Physical Sensing Enabled Decision Support for Disaster Management ...
Social and Physical Sensing Enabled Decision Support for Disaster Management ...Social and Physical Sensing Enabled Decision Support for Disaster Management ...
Social and Physical Sensing Enabled Decision Support for Disaster Management ...
Artificial Intelligence Institute at UofSC
 
Data Processing and Semantics for Advanced Internet of Things (IoT) Applicati...
Data Processing and Semantics for Advanced Internet of Things (IoT) Applicati...Data Processing and Semantics for Advanced Internet of Things (IoT) Applicati...
Data Processing and Semantics for Advanced Internet of Things (IoT) Applicati...
Artificial Intelligence Institute at UofSC
 
What's up at Kno.e.sis?
What's up at Kno.e.sis? What's up at Kno.e.sis?
What's up at Kno.e.sis?
Amit Sheth
 
Smart Data - How you and I will exploit Big Data for personalized digital hea...
Smart Data - How you and I will exploit Big Data for personalized digital hea...Smart Data - How you and I will exploit Big Data for personalized digital hea...
Smart Data - How you and I will exploit Big Data for personalized digital hea...
Amit Sheth
 
Web and Complex Systems Lab @ Kno.e.sis
Web and Complex Systems Lab @ Kno.e.sisWeb and Complex Systems Lab @ Kno.e.sis
Web and Complex Systems Lab @ Kno.e.sis
Artificial Intelligence Institute at UofSC
 
Trust Management: A Tutorial
Trust Management: A TutorialTrust Management: A Tutorial
Trust Management: A Tutorial
Artificial Intelligence Institute at UofSC
 
2015 Kno.e.sis Center Annual Review
2015 Kno.e.sis Center Annual Review2015 Kno.e.sis Center Annual Review
2015 Kno.e.sis Center Annual Review
Artificial Intelligence Institute at UofSC
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome Economy
Helge Tennø
 
Ad

Similar to Web Information Systems Html and css (20)

Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
Altaf Pinjari
 
html css js bootstrap framework thisis i
html css js bootstrap framework thisis ihtml css js bootstrap framework thisis i
html css js bootstrap framework thisis i
ssusered83521
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
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
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
ssuser568d77
 
xhtml_css.ppt
xhtml_css.pptxhtml_css.ppt
xhtml_css.ppt
fakeaccount225095
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
Paxcel Technologies
 
Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4
UXPA International
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
Heather Rock
 
Ppt of web designing
Ppt of web designingPpt of web designing
Ppt of web designing
prab5
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Java script and html
Java script and htmlJava script and html
Java script and html
Malik M. Ali Shahid
 
Java script and html new
Java script and html newJava script and html new
Java script and html new
Malik M. Ali Shahid
 
Class1slides
Class1slidesClass1slides
Class1slides
Alexis Goldstein
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jquery
valuebound
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
html css js bootstrap framework thisis i
html css js bootstrap framework thisis ihtml css js bootstrap framework thisis i
html css js bootstrap framework thisis i
ssusered83521
 
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
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
ssuser568d77
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
Paxcel Technologies
 
Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4
UXPA International
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
Heather Rock
 
Ppt of web designing
Ppt of web designingPpt of web designing
Ppt of web designing
prab5
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jquery
valuebound
 
Ad

Web Information Systems Html and css

  • 1. HTML and CSS Web Information Systems - 2015
  • 2. ●What is HTML? oQuick intro to Web server and Web browser oBasic HTML page structure oSome common, visible HTML elements ●What is CSS oCSS Basics oCSS Selectors ●HTML5 Overview ●CSS3 Agenda
  • 4. Web Server A program capable of serving Web content. Web Browser A program capable of interpreting Web content. What is a Web server and Web browser
  • 5. ●HTML - Hyper Text Markup Language ●Can be a simple text file containing Markup (Also referred to as tags or elements - more on these terms in XML lecture) ●Process of linking objects together so that when one object is clicked, the linked object can be viewed What is HTML ?
  • 6. ●HTML was created by Tim Berners Lee in 1990 ●Markup text contains a series of markup tags to categorize the different elements in a web page ●A web browser then interprets these different tags to create a website What is HTML ?
  • 7. ●Wrap everything in a <html>, <head> and <body> tag <!DOCTYPE html> <html> <head> <!-- title, css, scripts, etc. --> </head> <body> <!-- all visible page content --> </body> </html> HTML Basics
  • 8. ●Headers : <h1>, <h2>, ... , <h6> ●Bold and Italic text : <strong>, <em> ●Paragraphs : <p> ●Line breaks : <br /> ●Links : <a> ●Tables : <table> <tbody> <tr><td>R1, C1</td><td>R1, C2</td></tr> <tr><td>R2, C1</td><td>R2, C2</td></tr> </tbody> </table> ●Find out others ... Some HTML Tags
  • 9. ● HTML attributes o attribute name= “Value” HTML attributes
  • 12. ●Why? oHow to specify the styling interpretation of specific HTML tags? ▪ Would <h1> be interpreted the same way across multiple browsers? ▪ What if I want to redefine the <h1> style? ●CSS to the rescue! oCascading Style Sheets oDefine styles separately from the content! Styling purely with HTML is bad!
  • 13. ●Using a style attribute <style> oGood only for a very specific tags oNot reusable ●Using embedded style sheets oLimited reusability ●Using external style sheets oReusable and recommended for larger Web sites Attaching styles
  • 14. You want to define your CSS, right after the title closing tag: … <head>… <title>… </title> <style> h1 { font-family: georgia, sans-serif; color: purple; } </style> Example
  • 15. <style> body { color: blue; } p { font-family: georgia, sans-serif; } </style> Example for the Cascading
  • 16. ●Globally for all specified tags osaw an example in the earlier slide ●Using the id attribute on a tag oGood for one specific element, must be unique oSelector is the element's ID, prefixed by the # symbol ▪ HTML: <h2 id="newsFlash">Breaking News!</h2> ▪ CSS: #newsFlash { color: red; font-weight: bold; } ●Order of stylesheet (Increasing priority downward) oBrowser default o External style sheet o Internal style sheet (in the head section) o Inline style (inside an HTML element) Defining Styles (for embedded and external style sheets)
  • 19. ●Current HTML standard is 4.01 in 1999 oMuch is obsolete and never used (misused, at best) ●HTML5 is the new specification oAlready supported by most of the modern browsers oMotivated by need for: ▪ Less need for external plugins (e.g. Flash) ▪ Better error handling ▪ More markup to replace scripting ▪ Device independence Source: W3Schools The Web has Changed...
  • 20. ● 5th revision of the HTML standards of the W3C ● Many features added that could be useful in low-powered devices like cell phones ● Introduces new semantic elements like <header>, <footer>, <article> ● New APIs like: HTML Geolocation ● Let’s try HTML5
  • 21. ●Much focus on multimedia and web applications: o<audio> and <video> tags, <canvas> for drawing ▪ Many more oLocal Storage ▪ Much faster and more secure than cookies ▪ Local SQL database oWebWorkers (background worker threads for JavaScript) oServer-side events oDrag & drop API oGeolocation oRicher HTML forms New Features
  • 22. ●Being developed alongside HTML5 ●Some of the most important CSS3 modules are: oSelectors oBox Model oBackgrounds and Borders oText Effects o2D/3D Transformations oAnimations oMultiple Column Layout oUser Interface ●Like HTML5, much is already supported oBut most of it requires browser-specific prefixed rules Source: W3Schools CSS3
  • 23. Block statements: blockquote, ul, div, dl, form, h tags,href, table, p rest inline ●Two useful HTML tags with no default styling o <div> o <span> Some useful information
  • 24. <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p align ="center">My first paragraph.</p> </body> </html> !DOCTYPE html> <html> <body> <h1>About W3Schools</h1> <p title="About W3Schools"> W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc. </p> <p><b><font color="red"> If you move the mouse over the paragraph above, the title will display as a tooltip. </font></b></p> </body> </html> Try it yourself

Editor's Notes

  • #3: 2nd lecture for spring 2015
  • #4: hypertext markup language
  • #5: https://in.answers.yahoo.com/question/index?qid=20060921103727AAQQoFZ http://www.boutell.com/newfaq/definitions/browserserver.html
  • #6: its not a programming language, just tags to give information about the page
  • #7: its not a programming language, just tags to give information about the page
  • #8: its not a programming language, just tags to give information about the page example of markup tag; in this case to tell the browser that this as an html document
  • #9: you can refer to other web pages, add images, do a lot of things using simple html
  • #16: By defining text color to black, for the body tag, all text will now be blue across the whole website. Then the paragraph tag defines that all inline elements within it will be the selected font. The color for the para will then be blue since it is a subset of the body tags Body element surrounds all the elements in the browser so these are the default values until overwritten
  • #21: article, section ul: unordered list term