web information systems html and css
TRANSCRIPT
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