Your SlideShare is downloading. ×
Lesson1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson1

481
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
481
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
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.

×