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
 
web development html css javascrptt902350_HTML_Jar.ppt
web development html css javascrptt902350_HTML_Jar.pptweb development html css javascrptt902350_HTML_Jar.ppt
web development html css javascrptt902350_HTML_Jar.pptPuniNihithasree
 

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
 
Html bangla
Html banglaHtml bangla
Html bangla
 
Bangla HTML Tutorial
Bangla HTML TutorialBangla HTML Tutorial
Bangla HTML Tutorial
 
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
 
web development html css javascrptt902350_HTML_Jar.ppt
web development html css javascrptt902350_HTML_Jar.pptweb development html css javascrptt902350_HTML_Jar.ppt
web development html css javascrptt902350_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

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024SynarionITSolutions
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 

Recently uploaded (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 

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.