SlideShare a Scribd company logo
1 of 13
ARTDM 170
     Week 1: Meta Tag
     Refresh Animation
               Gilbert Guerrero
             gguerrero@dvc.edu
http://gilbertguerrero.com/blog/artdm-170/
Meta Tag Refresh Animation

• Most basic form of animation on the
  web
• Pre-dates gif animations
Meta Tag Refresh code
  <meta http-equiv="Refresh"
  content="1; URL=slide2.html" />
• The meta tag will cause the browser
  to refresh with a new web page
• The code is placed in the header of
  your web page
Create a basic web page called
slide1.html with this code:
<html>
<head>
<meta http-equiv="Refresh" content="1;
URL=slide2.html" />
</head>
<body>
<center>Hello</center>
</body>
</html>
Create a second web page
called slide2.html with this code:
<html>
<head>
<meta http-equiv="Refresh" content="1;
URL=slide1.html" />
</head>
<body>
<center>World</center>
</body>
</html>
Meta Refresh tag causes pages to go
from one to the next and loop back




     Hello             World

  slide1.html        slide2.html

URL=slide2.html    URL=slide1.html
Duplicate pages and change the code
    to make a sentence with five words




     Hello           World            How             Are            You?

  slide1.html      slide2.html     slide3.html     slide4.html    slide5.html

URL=slide2.html URL=slide3.html URL=slide4.html URL=slide5.html URL=slide1.html
Add a “pause” button by creating a link
that goes to a duplicate page which
does not contain the refresh tag

                         World

                    slide2stop.html
                         Pause




         Hello           World            How

      slide1.html     slide2.html      slide3.html

    URL=slide2.html URL=slide3.html URL=slide4.html
Code for slide2.html with a
pause button
<html>
<head>
<meta http-equiv="Refresh" content="1;
URL=slide3.html" />
</head>
<body>
<center>World</center>
<center>
<p><a href=”slide2stop.html”>Pause</a></p>
</center>
</body>
</html>
Add a “play” button by creating
a link that goes to the next slide

                                                     To start playing the
                         World                   slideshow, add a link that
                                                   takes them to the next
                    slide2stop.html             slide that has a refresh tag
                         Pause




         Hello           World            How

      slide1.html     slide2.html      slide3.html

    URL=slide2.html URL=slide3.html URL=slide4.html
Code for slide2stop.html with a play
button. Notice: there is no refresh tag!
<html>
<head>

</head>
<body>
<center>World</center>
<center>
<p><a href=”slide3.html”>Play</a></p>
</center>
</body>
</html>
Replace the word with an
  image:
<html>
<head>
<meta http-equiv="Refresh" content="1;
URL=slide2.html" />
</head>
<body>
<center><img src=“images/pic1.jpg” /></center>
</body>
</html>
Homework, due Feb 2 – Make
a short slideshow animation
•   Fill out the student survey
•   Read about the Meta Refresh technique
•   Create a slideshow animation using HTML pages with
    Meta Tag Refresh
    ‣   Create at least 10 frames
    ‣   Use images, so there will be at least ten images
    ‣   Place the images in a folder called “images” with
        your slide html pages
    ‣   Add Play, Pause, Forward, and Back buttons (By
        the end youʼll have at least 20 pages)
    See you next week!

More Related Content

What's hot

What's hot (8)

Using Personal Start Pages to Organize Your "OWN"line Life
Using Personal Start Pages to Organize Your "OWN"line LifeUsing Personal Start Pages to Organize Your "OWN"line Life
Using Personal Start Pages to Organize Your "OWN"line Life
 
Google Keyword Planner
Google Keyword PlannerGoogle Keyword Planner
Google Keyword Planner
 
1st
1st 1st
1st
 
How to Use Google Drive
How to Use Google DriveHow to Use Google Drive
How to Use Google Drive
 
Howtoedit C Wiki
Howtoedit C WikiHowtoedit C Wiki
Howtoedit C Wiki
 
eTwinning New Twinspace - How To Add A Blog
eTwinning New Twinspace - How To Add A BlogeTwinning New Twinspace - How To Add A Blog
eTwinning New Twinspace - How To Add A Blog
 
How to use postcron to schedule your post
How to use postcron to schedule your postHow to use postcron to schedule your post
How to use postcron to schedule your post
 
An overview of storage spaces on google account
An overview of storage spaces on google accountAn overview of storage spaces on google account
An overview of storage spaces on google account
 

Viewers also liked

Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...
Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...
Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...Grupa Unity
 
Scheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4 m.fasanelli
Scheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4   m.fasanelliScheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4   m.fasanelli
Scheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4 m.fasanellimariella
 
Tecla.it Smarter Commerce
Tecla.it Smarter Commerce Tecla.it Smarter Commerce
Tecla.it Smarter Commerce Carlo Visani
 
Business Model Innovation by Trick of the Trade
Business Model Innovation by Trick of the TradeBusiness Model Innovation by Trick of the Trade
Business Model Innovation by Trick of the TradeUtai Sukviwatsirikul
 
Soluciones y solubilidad
Soluciones y solubilidadSoluciones y solubilidad
Soluciones y solubilidadOriel Mojica
 
club Secretary
 club Secretary club Secretary
club Secretarym nagaRAJU
 
CDA Dagupan Extension Office Annual Report 2015
CDA Dagupan Extension Office Annual Report  2015CDA Dagupan Extension Office Annual Report  2015
CDA Dagupan Extension Office Annual Report 2015jo bitonio
 
Máster UAB-Formación 29 septiembre_2016
Máster UAB-Formación 29 septiembre_2016Máster UAB-Formación 29 septiembre_2016
Máster UAB-Formación 29 septiembre_2016evaristogonzal2
 
Tutorial in italiano di Pearltrees
Tutorial in italiano di PearltreesTutorial in italiano di Pearltrees
Tutorial in italiano di PearltreesMIUR
 
JHON FERNANDO CARREÑO
JHON FERNANDO CARREÑOJHON FERNANDO CARREÑO
JHON FERNANDO CARREÑOklaumilenitha
 

Viewers also liked (15)

Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...
Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...
Konferencja Intratic Przyjazny SharePoint, Bałut Piotr, Barański Jarosław - E...
 
Mahmoud F CV 2016_17
Mahmoud F CV 2016_17 Mahmoud F CV 2016_17
Mahmoud F CV 2016_17
 
Tutoria
TutoriaTutoria
Tutoria
 
Gender Equality
Gender EqualityGender Equality
Gender Equality
 
Scheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4 m.fasanelli
Scheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4   m.fasanelliScheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4   m.fasanelli
Scheda competenze 21° secolo per corso ad rm 6 gruppo di lavoro 4 m.fasanelli
 
Tecla.it Smarter Commerce
Tecla.it Smarter Commerce Tecla.it Smarter Commerce
Tecla.it Smarter Commerce
 
Business Model Innovation by Trick of the Trade
Business Model Innovation by Trick of the TradeBusiness Model Innovation by Trick of the Trade
Business Model Innovation by Trick of the Trade
 
Videolaparoscopia na endometriose
Videolaparoscopia na endometrioseVideolaparoscopia na endometriose
Videolaparoscopia na endometriose
 
Soluciones y solubilidad
Soluciones y solubilidadSoluciones y solubilidad
Soluciones y solubilidad
 
club Secretary
 club Secretary club Secretary
club Secretary
 
CDA Dagupan Extension Office Annual Report 2015
CDA Dagupan Extension Office Annual Report  2015CDA Dagupan Extension Office Annual Report  2015
CDA Dagupan Extension Office Annual Report 2015
 
Máster UAB-Formación 29 septiembre_2016
Máster UAB-Formación 29 septiembre_2016Máster UAB-Formación 29 septiembre_2016
Máster UAB-Formación 29 septiembre_2016
 
Tutorial in italiano di Pearltrees
Tutorial in italiano di PearltreesTutorial in italiano di Pearltrees
Tutorial in italiano di Pearltrees
 
JHON FERNANDO CARREÑO
JHON FERNANDO CARREÑOJHON FERNANDO CARREÑO
JHON FERNANDO CARREÑO
 
Matlab1
Matlab1Matlab1
Matlab1
 

Similar to ARTDM 170, Week 1: Introduction

ARTDM 170 Week 1: Introduction
ARTDM 170 Week 1: IntroductionARTDM 170 Week 1: Introduction
ARTDM 170 Week 1: IntroductionGilbert Guerrero
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello worldhemi46h
 
HTML Tutorial Summer 2015Part 1Note This will cover basic cod.docx
HTML Tutorial Summer 2015Part 1Note This will cover basic cod.docxHTML Tutorial Summer 2015Part 1Note This will cover basic cod.docx
HTML Tutorial Summer 2015Part 1Note This will cover basic cod.docxpooleavelina
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205志宇 許
 
Joomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-websiteJoomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-websiteRBaggio2000
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalChandra Prakash Thapa
 
HyperText Markup Language - HTML
HyperText Markup Language - HTMLHyperText Markup Language - HTML
HyperText Markup Language - HTMLSun Technlogies
 
GWT training session 2
GWT training session 2GWT training session 2
GWT training session 2SNEHAL MASNE
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsSun Technlogies
 
Web pop up javascript
Web pop up javascriptWeb pop up javascript
Web pop up javascriptAmyDoyle1
 
Introduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.jsIntroduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.jsmonterail
 
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!Jarne W. Beutnagel
 
Html5 first look by aj.Ball
Html5 first look by aj.BallHtml5 first look by aj.Ball
Html5 first look by aj.BallSupote Phunsakul
 
Hello world
Hello worldHello world
Hello worldhemi46h
 

Similar to ARTDM 170, Week 1: Introduction (20)

ARTDM 170 Week 1: Introduction
ARTDM 170 Week 1: IntroductionARTDM 170 Week 1: Introduction
ARTDM 170 Week 1: Introduction
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
HTML Tutorial Summer 2015Part 1Note This will cover basic cod.docx
HTML Tutorial Summer 2015Part 1Note This will cover basic cod.docxHTML Tutorial Summer 2015Part 1Note This will cover basic cod.docx
HTML Tutorial Summer 2015Part 1Note This will cover basic cod.docx
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205
 
Joomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-websiteJoomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-website
 
Wave Workshop
Wave WorkshopWave Workshop
Wave Workshop
 
DOM.pptx
DOM.pptxDOM.pptx
DOM.pptx
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
 
HyperText Markup Language - HTML
HyperText Markup Language - HTMLHyperText Markup Language - HTML
HyperText Markup Language - HTML
 
Fewd week1 slides
Fewd week1 slidesFewd week1 slides
Fewd week1 slides
 
GWT training session 2
GWT training session 2GWT training session 2
GWT training session 2
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Web pop up javascript
Web pop up javascriptWeb pop up javascript
Web pop up javascript
 
Django crush course
Django crush course Django crush course
Django crush course
 
Introduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.jsIntroduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.js
 
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
 
Html5 first look by aj.Ball
Html5 first look by aj.BallHtml5 first look by aj.Ball
Html5 first look by aj.Ball
 
Hello world
Hello worldHello world
Hello world
 
Print this
Print thisPrint this
Print this
 
Java Script
Java ScriptJava Script
Java Script
 

More from Gilbert Guerrero

Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightGilbert Guerrero
 
ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAGilbert Guerrero
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishingGilbert Guerrero
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysGilbert Guerrero
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingGilbert Guerrero
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesGilbert Guerrero
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interactionGilbert Guerrero
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 TemplatesGilbert Guerrero
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsGilbert Guerrero
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesGilbert Guerrero
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceGilbert Guerrero
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceGilbert Guerrero
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityGilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 

More from Gilbert Guerrero (20)

Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright Sunlight
 
ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
 
Artdm 171 week15 seo
Artdm 171 week15 seoArtdm 171 week15 seo
Artdm 171 week15 seo
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
 
ARTDM 171, Week 14: Forms
ARTDM 171, Week 14: FormsARTDM 171, Week 14: Forms
ARTDM 171, Week 14: Forms
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 

Recently uploaded

DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and stepobaje godwin sunday
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 

Recently uploaded (20)

DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and step
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 

ARTDM 170, Week 1: Introduction

  • 1. ARTDM 170 Week 1: Meta Tag Refresh Animation Gilbert Guerrero gguerrero@dvc.edu http://gilbertguerrero.com/blog/artdm-170/
  • 2. Meta Tag Refresh Animation • Most basic form of animation on the web • Pre-dates gif animations
  • 3. Meta Tag Refresh code <meta http-equiv="Refresh" content="1; URL=slide2.html" /> • The meta tag will cause the browser to refresh with a new web page • The code is placed in the header of your web page
  • 4. Create a basic web page called slide1.html with this code: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide2.html" /> </head> <body> <center>Hello</center> </body> </html>
  • 5. Create a second web page called slide2.html with this code: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide1.html" /> </head> <body> <center>World</center> </body> </html>
  • 6. Meta Refresh tag causes pages to go from one to the next and loop back Hello World slide1.html slide2.html URL=slide2.html URL=slide1.html
  • 7. Duplicate pages and change the code to make a sentence with five words Hello World How Are You? slide1.html slide2.html slide3.html slide4.html slide5.html URL=slide2.html URL=slide3.html URL=slide4.html URL=slide5.html URL=slide1.html
  • 8. Add a “pause” button by creating a link that goes to a duplicate page which does not contain the refresh tag World slide2stop.html Pause Hello World How slide1.html slide2.html slide3.html URL=slide2.html URL=slide3.html URL=slide4.html
  • 9. Code for slide2.html with a pause button <html> <head> <meta http-equiv="Refresh" content="1; URL=slide3.html" /> </head> <body> <center>World</center> <center> <p><a href=”slide2stop.html”>Pause</a></p> </center> </body> </html>
  • 10. Add a “play” button by creating a link that goes to the next slide To start playing the World slideshow, add a link that takes them to the next slide2stop.html slide that has a refresh tag Pause Hello World How slide1.html slide2.html slide3.html URL=slide2.html URL=slide3.html URL=slide4.html
  • 11. Code for slide2stop.html with a play button. Notice: there is no refresh tag! <html> <head> </head> <body> <center>World</center> <center> <p><a href=”slide3.html”>Play</a></p> </center> </body> </html>
  • 12. Replace the word with an image: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide2.html" /> </head> <body> <center><img src=“images/pic1.jpg” /></center> </body> </html>
  • 13. Homework, due Feb 2 – Make a short slideshow animation • Fill out the student survey • Read about the Meta Refresh technique • Create a slideshow animation using HTML pages with Meta Tag Refresh ‣ Create at least 10 frames ‣ Use images, so there will be at least ten images ‣ Place the images in a folder called “images” with your slide html pages ‣ Add Play, Pause, Forward, and Back buttons (By the end youʼll have at least 20 pages) See you next week!

Editor's Notes

  1. BEFORE CLASS&amp;#x2022;&amp;#xA0;&amp;#xA0;&amp;#xA0; Check if books are in student bookstore or across the street&amp;#x2022;&amp;#xA0;&amp;#xA0;&amp;#xA0; Fill out Office Hours Form in Dean&amp;#x2019;s office&amp;#x2022;&amp;#xA0;&amp;#xA0;&amp;#xA0; Post name, email, and course title and section on the board: ARTDM-171 Web Design, Section: 0465, Lecture and Lab: Tuesdays 2-4:50pm in A-303, Open Lab: Tue 1-2pm, 5-6pm, A-303.&amp;#x2022;&amp;#xA0;&amp;#xA0;&amp;#xA0; Print out the roster &amp;#x2022;&amp;#xA0;&amp;#xA0;&amp;#xA0; Print out 26+ syllabi&amp;#x2022;&amp;#xA0;&amp;#xA0;&amp;#xA0; Take attendance
  2. HW: * Meta tag refresh animations * At least 10 frames * Recycle these frames for GIF animation next week.