Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
458
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Interactive Media Heather Strycharz Lecture 1 – August 30, 2012
  • 2. - Douglas Rushkoff
  • 3. HTML = HyperText Markup LanguageCSS = Cascading Style Sheetshttp://en.wikipedia.org/wiki/HTML_elementhttp://www.w3.org/TR/html-markup/syntax.htmlIn linguistics, syntax is "the study of the principles and processes by which sentences areconstructed in particular languages".
  • 4. http://reference.sitepoint.com/html/page-structure
  • 5. The <div> tag defines a divisionor a section in an HTMLdocument. HeaderThe <div> tag is used to groupblock-elements to format themwith styles. Content Side Nav Footer
  • 6. DivsExample 1
  • 7. Divs – Example 2
  • 8. Header Logo Menu Item 1 - Menu Item 2 - Menu Item 3 H1 – Title Here Side Nav Item 1 Side Nav Item 2 Body text is here. Lorem ipsum dolor sit Side Nav Item 3 amet, consectetur adipiscing elit. Duis Side Nav Item 4 hendrerit mollis placerat. Sed lacus eros, Side Nav Item 5 vestibulum eget iaculis consectetur, Side Nav Item 6 posuere ut lectus.Content Side Nav Pellentesque dignissim metus eu odio Lorem ipsum dolor sit ullamcorper quis elementum nibh auctor. amet, consectetur Cras pharetra magna sed est lacinia adipiscing elit. Duis imperdiet. Etiam dui purus, ullamcorper hendrerit mollis nec bibendum id, posuere sed arcu. Cras id placerat. Sed lacus eros, scelerisque quam. vestibulum eget iaculis consectetur, posuere ut Nullam et leo ipsum. In lacinia ipsum nec lectus. nunc dictum posuere. Nam sollicitudin, nisi nec fringilla pharetra, metus sapien sollicitudin nibh, vitae cursus turpis nisl et sem. Footer Lorem ipsum dolor sit amet. Menu Item 1 - Menu Item 2 - Menu Item 3
  • 9. <div id=“content”><h1>H1 – Title Here</h1><span><p>Body text is here. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis hendrerit mollisplacerat. Sed lacus eros, vestibulum eget iaculisconsectetur, posuere ut lectus. </p><p>Pellentesque dignissim metus eu odio ullamcorperquis elementum nibh auctor. Cras pharetra magna sedest lacinia imperdiet. Etiam dui purus, ullamcorpernec bibendum id, posuere sed arcu. Cras idscelerisque quam. </p><p>Nullam et leo ipsum. In lacinia ipsum nec nuncdictum posuere. Nam sollicitudin, nisi nec fringillapharetra, metus sapien sollicitudin nibh, vitae cursusturpis nisl et sem.</p></span></div>
  • 10. <html><body><div id="keroppi" style="width: 180px; float: left; display: block;"> <img src="http://images1.fanpop.com/images/photos/2300000/Keroppi-Fishie-keroppi-2355325-240-238.gif" height="150px"/></div> <div id="hello" style=“padding:10px; float: left; border: 1px solid lime; width: 100px; height: 50px;margin-top: 20px;"> <span style="text-align: center; color: green; width: 100px;"> Hello world!</span> </div> </body></html>
  • 11. Styles Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS fileInline <div id="keroppi" style="width: 180px; float: left; display: block;"> <img src="http://images1.fanpop.com/images/photos/2300000/Keroppi- Fishie-keroppi-2355325-240-238.gif" height="150px"/> </div>Internal <head>type <style ="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>External <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
  • 12. HTML colors are defined using ahexadecimal notation (HEX) for thecombination of Red, Green, and Blue colorvalues (RGB).The lowest value that can be given to oneof the light sources is 0 (in HEX: 00).The highest value is 255 (in HEX: FF).HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.