Web Information Systems Html and css

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

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>

</head>
<body>

</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

●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

●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)

●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

Web Information Systems Html and css

More Related Content

What's hot (16)

Viewers also liked (10)

Similar to Web Information Systems Html and css (20)

Web Information Systems Html and css

Editor's Notes