Upcoming SlideShare
Loading in...5




Course: Media Production

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 87 86 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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: , , , , , and
  • 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: , , , , , and
  • 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 HTML + CSS Presentation Transcript

  • 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 which is syntactically distinguishable from that text
  • <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;;>Academic Calendar</a> <li><a href =&quot;;>Administration</a> <li><a href =&quot;;>Berkeley Pledge</a> <li><a href =&quot;;>Cal Bears Athletics & Recreational Sports</a> <image align=top src=&quot;/icons/new.gif&quot; alt=&quot;**new**&quot;> <li><a href =&quot;;>California Alumni Association</a> </ul> <hr> <a href=&quot;/docs/copyright/&quot;>&#169; 1995 UC Regents</a>. <i> Updated 10/22/96, <a href=&quot;/faq/&quot;></a>. </i> </body>
  • 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;;> <html xmlns=&quot;; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  • <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;
  • 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, capitalize) Color
  • Text Font-family Font-style (italic) Font-size Font-weight (bold)
  • Float float:right float:left
  • Yay! Now you are HTML+CSS experts! Next day we will make our Twitter dynamic.
  • Contact at: Jorge Zapico [email_address] @zapico Presentation at