Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
●...
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 ...
●HTML - Hyper Text Markup Language
●Can be a simple text file containing Markup (Also referred to
as tags or elements - mo...
●HTML was created by Tim Berners Lee in 1990
●Markup text contains a series of markup tags to categorize
the different ele...
●Wrap everything in a <html>, <head> and <body> tag
<!DOCTYPE html>
<html>
<head>
<!-- title, css, scripts, etc. -->
</hea...
●Headers : <h1>, <h2>, ... , <h6>
●Bold and Italic text : <strong>, <em>
●Paragraphs : <p>
●Line breaks : <br />
●Links : ...
● 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
mu...
●Using a style attribute <style>
oGood only for a very specific tags
oNot reusable
●Using embedded style sheets
oLimited r...
You want to define your CSS, right after the title closing tag:
… <head>…
<title>…
</title>
<style>
h1 {
font-family: geor...
<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 speci...
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...
● 5th revision of the HTML standards of the
W3C
● Many features added that could be useful in
low-powered devices like cel...
●Much focus on multimedia and web applications:
o<audio> and <video> tags, <canvas> for drawing
▪ Many more
oLocal Storage...
●Being developed alongside HTML5
●Some of the most important CSS3 modules are:
oSelectors
oBox Model
oBackgrounds and Bord...
Block statements: blockquote, ul, div, dl, form, h tags,href, table, p
rest inline
●Two useful HTML tags with no default s...
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p align ="center">My first paragraph.</p>
</body>
</html>
!DOCTYP...
Upcoming SlideShare
Loading in …5
×

Web Information Systems Html and css

356 views

Published on

  • Be the first to comment

Web Information Systems Html and css

  1. 1. HTML and CSS Web Information Systems - 2015
  2. 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
  3. 3. HTML Markup for the text
  4. 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. 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. 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. 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. 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. 9. ● HTML attributes o attribute name= “Value” HTML attributes
  10. 10. HTML Examples
  11. 11. CSS Styling the HTML content
  12. 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. 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. 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. 15. <style> body { color: blue; } p { font-family: georgia, sans-serif; } </style> Example for the Cascading
  16. 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)
  17. 17. CSS Example
  18. 18. (HTML5)
  19. 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. 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. 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. 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. 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. 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

×