HTML5 Introduction

Download Report

Transcript HTML5 Introduction 

Miguel Lara, PhD
1:10 – 1:15
Pre-test
1:15 – 1:30
Course overview
1:30 – 2:00
Setting up DW Site
2:00 – 2:05
<< Break >>
2:05 – 2:55 Hands-on Lecture
2:55 – 3:00 Wrapping up
http://goo.gl/Wmn9TB
Design and development instructional websites after
acquiring knowledge and skills to use HTML5,
CSS3, JavaScript, and jQuery
Course objectives
- Apply HTML, CSS and JavaScript specifically as an interactive learning technology.
- Use JavaScript and jQuery to modify and control HTML content and style.
- Create functions, conditions, and variables using Javascript and jQuery.
- Adapt and modify existing code to incorporate in your own projects.
- Embed video in a web page without plugins with modern HTML techniques.
- Create an interactive instructional website that integrates the above technologies
Week 1: HTML common tags
Week 2: CSS
Week 3: jQuery UI
Week 4: jQuery
Week 5: HTML Media (video, audio)
Week 6: HTML Forms / Web Storage
Week 7: Image Map / Hot Spot Activity
Week 8: Final Project
Grade
Five labs / assignments
50%
Weekly comments
10%
Final Project
40%
Deliverables:
Project proposal
Provide project description and at least three instructional
objectives
Storyboard
Entire site should include at least 5 pages, storyboard should show
navigation and main sections
Final Product
Final product must apply all of the content introduced in the course:
CSS, HTML5, jQuery. It should also include diverse type of media
elements such as images, audio, and video.
Final project samples:
http://itcdland.csumb.edu/~sphegley/ist541/Final/homeBusc.html
http://itcdland.csumb.edu/~bswift/IST541/Final_HomePage.html
Lesson Objectives
- Use an HTML5 document template to create a web page
- Describe the purpose of each tag within the HTML5 template
- Use several common HTML tags such as headings, lists,
paragraphs, images, and links
- Apply inline and internal Cascading Styles (CSS) to change the
font color
- Apply CSS to float an image
- Upload a web page to the server
What is the language used to create web pages?
What does HTML stand for?
When was HTML first used? (year)
Who created it?
Why was HTML created?
What characters or symbols are used for the HTML tags?
How many major versions of HTML are?
What are the main differences between Flash and HTML5?
HTML5 Document Template:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>
Title of the page goes here
</title>
</head>
<body>
Page content goes here
</body>
</html>
Can I have a Koala as a pet?
Koalas look adorable! They are marsupials,
meaning that they carry their babies in a
pouch. They are also herbivores, that is, they
only eat leaves and plants, no meat.
Let's consider the following facts to find out if
you can have a koala as a pet:
•
•
•
•
They are bears
They can be very aggressive
They have very sharp claws and teeth
They are an endangered specie
So, no, you should not have a Koala as a pet!
Click here for more information
To create the previous slide as a web page, we’ll use basic
HTML tags such as:
<h1>
Tags <h1> to <h6> are used for headers
<p> and <br /> These tags are use for paragraph and page
breaks
<strong> This tag adds strong emphasis to the text
<a href=…> This tag adds a hyperlink
<img src=… > This tag embeds an image
When adding images into your web page:
• Make sure the image is not copyrighted. You can find free
images at:
http://office.microsoft.com/en-us/images/
http://allfree-clipart.com
http://morguefile.com/
http://www.wpclipart.com/
• Resize the image before adding it. Use Photoshop or a free
online image tool such as
http://www.webresizer.com/resizer/
• Use a path that is relative to the location of the image file as
the “src” attribute in the “<img>” tag.
For example: <img src="images/my_image.jpg">