SlideShare a Scribd company logo
1 of 12
Interactive Media
   Heather Strycharz
 Lecture 1 – August 30, 2012
- Douglas Rushkoff
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".
http://reference.sitepoint.com/html/page-structure
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
Divs
Example 1
Divs – Example 2
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
<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>
<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>
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>
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.

More Related Content

Viewers also liked

Understanding the Icarus Flight of Flappy Bird
Understanding the Icarus Flight of Flappy Bird Understanding the Icarus Flight of Flappy Bird
Understanding the Icarus Flight of Flappy Bird Ramya Gogineni
 
MBA724 s6 w1 experimental design
MBA724 s6 w1 experimental designMBA724 s6 w1 experimental design
MBA724 s6 w1 experimental designRachel Chung
 
ながのシティプロモーションのキャッチフレーズ及びロゴマークについて
ながのシティプロモーションのキャッチフレーズ及びロゴマークについてながのシティプロモーションのキャッチフレーズ及びロゴマークについて
ながのシティプロモーションのキャッチフレーズ及びロゴマークについて長野市議会議員小泉一真
 
เบาหวาน+~..
เบาหวาน+~..เบาหวาน+~..
เบาหวาน+~..maygaclever
 
10 species of dinosaur from Romania
10 species of dinosaur from Romania10 species of dinosaur from Romania
10 species of dinosaur from Romaniabalada65
 
Writing up the final report (narrated)
Writing up the final report (narrated)Writing up the final report (narrated)
Writing up the final report (narrated)Rachel Chung
 
Csooow12 amit-jasuja-securing-new-experience6
Csooow12 amit-jasuja-securing-new-experience6Csooow12 amit-jasuja-securing-new-experience6
Csooow12 amit-jasuja-securing-new-experience6OracleIDM
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2hstryk
 
33 deputados norte-americanos criticam o golpe
33 deputados norte-americanos criticam o golpe33 deputados norte-americanos criticam o golpe
33 deputados norte-americanos criticam o golpeMiguel Rosario
 
Island Hotel Presentation 2012
Island Hotel Presentation 2012Island Hotel Presentation 2012
Island Hotel Presentation 2012joakley123
 
From WOM to the WEB, Effective Marketing Strategies for your School, classic...
From WOM to the WEB, Effective  Marketing Strategies for your School, classic...From WOM to the WEB, Effective  Marketing Strategies for your School, classic...
From WOM to the WEB, Effective Marketing Strategies for your School, classic...Rick Newberry
 
Egoera: La economía de Bizkaia - Marzo 2016 - nº21
Egoera: La economía de Bizkaia - Marzo 2016 - nº21Egoera: La economía de Bizkaia - Marzo 2016 - nº21
Egoera: La economía de Bizkaia - Marzo 2016 - nº21Cámara de Comercio de Bilbao
 

Viewers also liked (19)

บทที่ 11
บทที่ 11บทที่ 11
บทที่ 11
 
อติมา อุ่นจิตร
อติมา  อุ่นจิตรอติมา  อุ่นจิตร
อติมา อุ่นจิตร
 
Understanding the Icarus Flight of Flappy Bird
Understanding the Icarus Flight of Flappy Bird Understanding the Icarus Flight of Flappy Bird
Understanding the Icarus Flight of Flappy Bird
 
Aparato digestivo
Aparato digestivoAparato digestivo
Aparato digestivo
 
MBA724 s6 w1 experimental design
MBA724 s6 w1 experimental designMBA724 s6 w1 experimental design
MBA724 s6 w1 experimental design
 
S t o r y b o a r d
S t o r y b o a r dS t o r y b o a r d
S t o r y b o a r d
 
Corespring
CorespringCorespring
Corespring
 
ながのシティプロモーションのキャッチフレーズ及びロゴマークについて
ながのシティプロモーションのキャッチフレーズ及びロゴマークについてながのシティプロモーションのキャッチフレーズ及びロゴマークについて
ながのシティプロモーションのキャッチフレーズ及びロゴマークについて
 
เบาหวาน+~..
เบาหวาน+~..เบาหวาน+~..
เบาหวาน+~..
 
10 species of dinosaur from Romania
10 species of dinosaur from Romania10 species of dinosaur from Romania
10 species of dinosaur from Romania
 
Writing up the final report (narrated)
Writing up the final report (narrated)Writing up the final report (narrated)
Writing up the final report (narrated)
 
Ch03 cont.
Ch03 cont.Ch03 cont.
Ch03 cont.
 
Csooow12 amit-jasuja-securing-new-experience6
Csooow12 amit-jasuja-securing-new-experience6Csooow12 amit-jasuja-securing-new-experience6
Csooow12 amit-jasuja-securing-new-experience6
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2
 
La maga mil
La maga mil La maga mil
La maga mil
 
33 deputados norte-americanos criticam o golpe
33 deputados norte-americanos criticam o golpe33 deputados norte-americanos criticam o golpe
33 deputados norte-americanos criticam o golpe
 
Island Hotel Presentation 2012
Island Hotel Presentation 2012Island Hotel Presentation 2012
Island Hotel Presentation 2012
 
From WOM to the WEB, Effective Marketing Strategies for your School, classic...
From WOM to the WEB, Effective  Marketing Strategies for your School, classic...From WOM to the WEB, Effective  Marketing Strategies for your School, classic...
From WOM to the WEB, Effective Marketing Strategies for your School, classic...
 
Egoera: La economía de Bizkaia - Marzo 2016 - nº21
Egoera: La economía de Bizkaia - Marzo 2016 - nº21Egoera: La economía de Bizkaia - Marzo 2016 - nº21
Egoera: La economía de Bizkaia - Marzo 2016 - nº21
 

Similar to Lesson1

Lesson1 - Fall 2013
Lesson1 - Fall 2013Lesson1 - Fall 2013
Lesson1 - Fall 2013hstryk
 
Web technologies: Lesson 2
Web technologies: Lesson 2Web technologies: Lesson 2
Web technologies: Lesson 2nhepner
 
Bangla HTML Tutorial
Bangla HTML TutorialBangla HTML Tutorial
Bangla HTML TutorialDhiman Biswas
 
Le wagon workshop - 2h landing page - Andre Ferrer
Le wagon   workshop - 2h landing page - Andre FerrerLe wagon   workshop - 2h landing page - Andre Ferrer
Le wagon workshop - 2h landing page - Andre FerrerAndré Ferrer
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
 
DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)
DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)
DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)Drupaltour
 
HTML introduction
HTML introduction HTML introduction
HTML introduction Wael Badawy
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designErin M. Kidwell
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
Le Wagon Tokyo - 2 hours landing page
Le Wagon Tokyo - 2 hours  landing pageLe Wagon Tokyo - 2 hours  landing page
Le Wagon Tokyo - 2 hours landing pageHidehiro Nagaoka
 
Le Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hoursLe Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hoursYannKlein2
 

Similar to Lesson1 (20)

Lesson1 - Fall 2013
Lesson1 - Fall 2013Lesson1 - Fall 2013
Lesson1 - Fall 2013
 
Web technologies: Lesson 2
Web technologies: Lesson 2Web technologies: Lesson 2
Web technologies: Lesson 2
 
Bangla HTML Tutorial
Bangla HTML TutorialBangla HTML Tutorial
Bangla HTML Tutorial
 
Html bangla
Html banglaHtml bangla
Html bangla
 
Le wagon workshop - 2h landing page - Andre Ferrer
Le wagon   workshop - 2h landing page - Andre FerrerLe wagon   workshop - 2h landing page - Andre Ferrer
Le wagon workshop - 2h landing page - Andre Ferrer
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web Development
 
DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)
DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)
DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)
 
Oenology
OenologyOenology
Oenology
 
Learning html & dhtml
Learning html & dhtmlLearning html & dhtml
Learning html & dhtml
 
Designing code
Designing codeDesigning code
Designing code
 
HTML introduction
HTML introduction HTML introduction
HTML introduction
 
Day of code
Day of codeDay of code
Day of code
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Beginning html
Beginning  htmlBeginning  html
Beginning html
 
Le Wagon Tokyo - 2 hours landing page
Le Wagon Tokyo - 2 hours  landing pageLe Wagon Tokyo - 2 hours  landing page
Le Wagon Tokyo - 2 hours landing page
 
Le Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hoursLe Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hours
 
902350_HTML_Jar.ppt
902350_HTML_Jar.ppt902350_HTML_Jar.ppt
902350_HTML_Jar.ppt
 
DOC-20220920-WA0012..pptx
DOC-20220920-WA0012..pptxDOC-20220920-WA0012..pptx
DOC-20220920-WA0012..pptx
 
902350_HTML_Jar.ppt
902350_HTML_Jar.ppt902350_HTML_Jar.ppt
902350_HTML_Jar.ppt
 

More from hstryk

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Propertieshstryk
 
Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2hstryk
 
Lesson2
Lesson2Lesson2
Lesson2hstryk
 
CSS3 Transitions
CSS3 TransitionsCSS3 Transitions
CSS3 Transitionshstryk
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorialhstryk
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3hstryk
 
Sprites rollovers
Sprites rolloversSprites rollovers
Sprites rollovershstryk
 
Building a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSSBuilding a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSShstryk
 
Lecture4
Lecture4Lecture4
Lecture4hstryk
 
Tutorial1
Tutorial1Tutorial1
Tutorial1hstryk
 
Project1
Project1Project1
Project1hstryk
 
Lesson 3
Lesson 3Lesson 3
Lesson 3hstryk
 
Lesson2
Lesson2Lesson2
Lesson2hstryk
 
Heather Strycharz - Resume
Heather Strycharz - ResumeHeather Strycharz - Resume
Heather Strycharz - Resumehstryk
 

More from hstryk (14)

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
 
Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2
 
Lesson2
Lesson2Lesson2
Lesson2
 
CSS3 Transitions
CSS3 TransitionsCSS3 Transitions
CSS3 Transitions
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorial
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Sprites rollovers
Sprites rolloversSprites rollovers
Sprites rollovers
 
Building a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSSBuilding a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSS
 
Lecture4
Lecture4Lecture4
Lecture4
 
Tutorial1
Tutorial1Tutorial1
Tutorial1
 
Project1
Project1Project1
Project1
 
Lesson 3
Lesson 3Lesson 3
Lesson 3
 
Lesson2
Lesson2Lesson2
Lesson2
 
Heather Strycharz - Resume
Heather Strycharz - ResumeHeather Strycharz - Resume
Heather Strycharz - Resume
 

Recently uploaded

Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 

Recently uploaded (20)

Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 

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
  • 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.