This document discusses interactive media and provides examples of HTML and CSS code. It begins with an overview of HTML elements and syntax. It then provides examples of using <div> tags to structure pages with a header, content, sidebar, and footer sections. The document also demonstrates using inline, internal, and external CSS for styling, and defines HTML color notation in hexadecimal.
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. 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.
10. 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.
11. <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>
13. 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
14. 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.
