HTML and CSS JORGE ZAPICO KTH / Media Technology [email_address] MEDIA PRODUCTION 2009/Nov/19
HTML   HyperText Markup Language
hypertext A multi media text with branching references (links) to other documents, that can be read in a non-linear way
A  markup language*  to create structured documents with  structured semantics . * A system for annotating a text in a way...
 
<html> <head> <title>UC Berkeley Campus Information</title> </head> <body> <img align=top src=&quot;/icons/access.gif&quot...
HTML is based on SGML XHTML extends HTML and is based on XML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN”> <!DOC...
<html> </html>
<head> <body>
<title>
Text elements <h1> <h2> <h3> <p>
Formatting elements <b> <i> <sub> <big>
Links <a> href target
Images <img> src  alt height / width
Special characters &quot; “ &amp; & &ntilde;  ñ &ouml; ö
Tables <table border=&quot;1&quot;> <tr> <td></td> <td>/td> </tr> </table>
Lists <ul> <ol> <li>
Divisions <div> id  class
Spaces <br/> &nbsp;
http://www.w3schools.com/html/ http://validator.w3.org http://www.w3.org/
 
We need style!   CSS Cascading Style Sheets
 
Separation of content from presentation!
Structure element{ attribute:value; attribute:value; }
Linking with the HTML <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=”file.css&quot; />
Background background-image: url(“”) background-color: #xxxxxx background-repeat: repeat-x
Background background-image: url(“”) background-color: #xxxxxx background-repeat: repeat-x
How to connect with HTML? #id .class element .class
The Box Model margin border padding
 
The Box Model width height position (fixed, absolute,relative) top, bottom, right, left Z-index
Text Text-align (center, right, left) Text-decoration(overline, underline) Text-transform (uppercase, lowercase, capitaliz...
Text Font-family Font-style (italic) Font-size Font-weight (bold)
Float float:right float:left
http://www.w3schools.com/css http://validator.w3.org
Yay! Now you are HTML+CSS experts! Next day we will make our Twitter dynamic.
Contact at: Jorge Zapico [email_address] @zapico jorgezapico.com Presentation at http://slideshare.net/jorgezapico
Upcoming SlideShare
Loading in...5
×

HTML + CSS

1,780

Published on

Course: Media Production
Lecture: Web Production nr 2
Date 2009 Nov 19

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,780
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
73
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • That’s me.
  • He created all the tools by 1990 for a working web
  • This is how websites looked liked at the beginning. Pure HTML..
  • This was what it looked like. HTML, looking the same as it does now.
  • Standard Generalized Markup Language (ISO 8879:1986 SGML) Extensible Markup Language
  • The elements inside the head element should not be displayed by a browser. According to the HTML standard, only a few tags are legal inside the head section. These are: &lt;base&gt;, &lt;link&gt;, &lt;meta&gt;, &lt;title&gt;, &lt;style&gt;, and &lt;script&gt;.
  • The elements inside the head element should not be displayed by a browser. According to the HTML standard, only a few tags are legal inside the head section. These are: &lt;base&gt;, &lt;link&gt;, &lt;meta&gt;, &lt;title&gt;, &lt;style&gt;, and &lt;script&gt;.
  • Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).
  • HTML + CSS

    1. 1. HTML and CSS JORGE ZAPICO KTH / Media Technology [email_address] MEDIA PRODUCTION 2009/Nov/19
    2. 2. HTML HyperText Markup Language
    3. 3. hypertext A multi media text with branching references (links) to other documents, that can be read in a non-linear way
    4. 4. A markup language* to create structured documents with structured semantics . * A system for annotating a text in a way which is syntactically distinguishable from that text
    5. 6. <html> <head> <title>UC Berkeley Campus Information</title> </head> <body> <img align=top src=&quot;/icons/access.gif&quot; alt=&quot;*&quot;> <h2>Campus Information:</h2> <li><a href =&quot;http://www.chance.berkeley.edu/planning/calendar.html&quot;>Academic Calendar</a> <li><a href =&quot;http://www.urel.berkeley.edu/ucadmin.html&quot;>Administration</a> <li><a href =&quot;http://haas.berkeley.edu/bpledge/&quot;>Berkeley Pledge</a> <li><a href =&quot;http://amber.berkeley.edu:4207/RSF/&quot;>Cal Bears Athletics & Recreational Sports</a> <image align=top src=&quot;/icons/new.gif&quot; alt=&quot;**new**&quot;> <li><a href =&quot;http://www.alumni.berkeley.edu/&quot;>California Alumni Association</a> </ul> <hr> <a href=&quot;/docs/copyright/&quot;>© 1995 UC Regents</a>. <i> Updated 10/22/96, <a href=&quot;/faq/&quot;>www@www.berkeley.edu</a>. </i> </body>
    6. 7. HTML is based on SGML XHTML extends HTML and is based on XML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN”> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
    7. 8. <html> </html>
    8. 9. <head> <body>
    9. 10. <title>
    10. 11. Text elements <h1> <h2> <h3> <p>
    11. 12. Formatting elements <b> <i> <sub> <big>
    12. 13. Links <a> href target
    13. 14. Images <img> src alt height / width
    14. 15. Special characters &quot; “ &amp; & &ntilde; ñ &ouml; ö
    15. 16. Tables <table border=&quot;1&quot;> <tr> <td></td> <td>/td> </tr> </table>
    16. 17. Lists <ul> <ol> <li>
    17. 18. Divisions <div> id class
    18. 19. Spaces <br/> &nbsp;
    19. 20. http://www.w3schools.com/html/ http://validator.w3.org http://www.w3.org/
    20. 22. We need style! CSS Cascading Style Sheets
    21. 24. Separation of content from presentation!
    22. 25. Structure element{ attribute:value; attribute:value; }
    23. 26. Linking with the HTML <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=”file.css&quot; />
    24. 27. Background background-image: url(“”) background-color: #xxxxxx background-repeat: repeat-x
    25. 28. Background background-image: url(“”) background-color: #xxxxxx background-repeat: repeat-x
    26. 29. How to connect with HTML? #id .class element .class
    27. 30. The Box Model margin border padding
    28. 32. The Box Model width height position (fixed, absolute,relative) top, bottom, right, left Z-index
    29. 33. Text Text-align (center, right, left) Text-decoration(overline, underline) Text-transform (uppercase, lowercase, capitalize) Color
    30. 34. Text Font-family Font-style (italic) Font-size Font-weight (bold)
    31. 35. Float float:right float:left
    32. 36. http://www.w3schools.com/css http://validator.w3.org
    33. 37. Yay! Now you are HTML+CSS experts! Next day we will make our Twitter dynamic.
    34. 38. Contact at: Jorge Zapico [email_address] @zapico jorgezapico.com Presentation at http://slideshare.net/jorgezapico
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×