Interactive Media
Heather Strycharz
Lecture 1 – August 29, 2013
- Douglas Rushkoff
HTML = HyperText Markup Language
CSS = Cascading Style Sheets
http://en.wikipedia.org/wiki/HTML_element
http://www.w3.org/...
http://reference.sitepoint.com/html/page-structure
Header
Content
Side Nav
Footer
The <div> tag defines a division
or a section in an HTML
document.
The <div> tag is used to...
Divs
Example 1
Divs – Example 2
http://letsyep.com
Header
Content Side Nav
Footer
Logo
H1 – Title Here
Body text is here. Lorem ipsum dolor sit
amet, consectetur adipiscing ...
<div id=“content”>
<h1>H1 – Title Here</h1>
<span>
<p>Body text is here. Lorem ipsum dolor sit amet,
consectetur adipiscin...
<html>
<body>
<div id="heart" style="width: 180px; float: left; display: block;">
<img src="http://www.lovelocaldesign.com...
Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head> section
External - ...
HTML colors are defined using a
hexadecimal notation (HEX) for the
combination of Red, Green, and Blue color
values (RGB)....
Lesson1 - Fall 2013
Upcoming SlideShare
Loading in...5
×

Lesson1 - Fall 2013

677
-1

Published on

Introduction to the concept of coding websites using HTML and CSS

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

  • Be the first to like this

No Downloads
Views
Total Views
677
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson1 - Fall 2013

  1. 1. Interactive Media Heather Strycharz Lecture 1 – August 29, 2013
  2. 2. - Douglas Rushkoff
  3. 3. HTML = HyperText Markup Language CSS = Cascading Style Sheets http://en.wikipedia.org/wiki/HTML_element http://www.w3.org/TR/html-markup/syntax.html In linguistics, syntax is "the study of the principles and processes by which sentences are constructed in particular languages".
  4. 4. http://reference.sitepoint.com/html/page-structure
  5. 5. Header Content Side Nav Footer The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with styles.
  6. 6. Divs Example 1
  7. 7. Divs – Example 2
  8. 8. http://letsyep.com
  9. 9. Header Content Side Nav Footer Logo H1 – Title Here Body text is here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit mollis placerat. Sed lacus eros, vestibulum eget iaculis consectetur, posuere ut lectus. Pellentesque dignissim metus eu odio ullamcorper quis elementum nibh auctor. Cras pharetra magna sed est lacinia imperdiet. Etiam dui purus, ullamcorper nec bibendum id, posuere sed arcu. Cras id scelerisque quam. Nullam et leo ipsum. In lacinia ipsum nec nunc dictum posuere. Nam sollicitudin, nisi nec fringilla pharetra, metus sapien sollicitudin nibh, vitae cursus turpis nisl et sem. Menu Item 1 - Menu Item 2 - Menu Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit mollis placerat. Sed lacus eros, vestibulum eget iaculis consectetur, posuere ut lectus. Side Nav Item 1 Side Nav Item 2 Side Nav Item 3 Side Nav Item 4 Side Nav Item 5 Side Nav Item 6 Menu Item 1 - Menu Item 2 - Menu Item 3Lorem ipsum dolor sit amet.
  10. 10. <div id=“content”> <h1>H1 – Title Here</h1> <span> <p>Body text is here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit mollis placerat. Sed lacus eros, vestibulum eget iaculis consectetur, posuere ut lectus. </p> <p>Pellentesque dignissim metus eu odio ullamcorper quis elementum nibh auctor. Cras pharetra magna sed est lacinia imperdiet. Etiam dui purus, ullamcorper nec bibendum id, posuere sed arcu. Cras id scelerisque quam. </p> <p>Nullam et leo ipsum. In lacinia ipsum nec nunc dictum posuere. Nam sollicitudin, nisi nec fringilla pharetra, metus sapien sollicitudin nibh, vitae cursus turpis nisl et sem.</p> </span> </div>
  11. 11. <html> <body> <div id="heart" style="width: 180px; float: left; display: block;"> <img src="http://www.lovelocaldesign.com/wp-content/uploads/2012/12/lovelocal.png" 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> http://tinkerbin.com
  12. 12. Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file Styles <div id=”heart" style="width: 180px; float: left; display: block;"> <img src="http://www.lovelocaldesign.com/wp- content/uploads/2012/12/lovelocal.png" height="150px"/> </div> Inline <head>type <style ="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> Internal <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> External
  13. 13. HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of 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.
  1. A particular slide catching your eye?

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

×