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 > 2:05 – 2:55 Hands-on Lecture 2:55 – 3:00 Wrapping up

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

Five labs / assignments 50% Weekly comments10% Final Project40% Grade

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:

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?

Title of the page goes here Page content goes here HTML5 Document Template:

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: Tags to are used for headers and These tags are use for paragraph and page breaks This tag adds strong emphasis to the text This tag adds a hyperlink 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: Resize the image before adding it. Use Photoshop or a free online image tool such as Use a path that is relative to the location of the image file as the “src” attribute in the “ ” tag. For example: