9953330565 Low Rate Call Girls In Rohini Delhi NCR
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
BEFORE CLASS&#x2022;&#xA0;&#xA0;&#xA0; Check if books are in student bookstore or across the street&#x2022;&#xA0;&#xA0;&#xA0; Fill out Office Hours Form in Dean&#x2019;s office&#x2022;&#xA0;&#xA0;&#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.&#x2022;&#xA0;&#xA0;&#xA0; Print out the roster &#x2022;&#xA0;&#xA0;&#xA0; Print out 26+ syllabi&#x2022;&#xA0;&#xA0;&#xA0; Take attendance
HW:
* Meta tag refresh animations
* At least 10 frames
* Recycle these frames for GIF animation next week.
