Lesson1
- 1. Interactive Media Heather Strycharz Lecture 1 – August 30, 2012
- 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".
- 5. The <div> tag defines a division or a section in an HTML document. Header The <div> tag is used to group block-elements to format them with styles. Content Side Nav Footer
- 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 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>
- 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 file Inline <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 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.