Miguel Lara, PhD

Design and development instructional websites using a variety of web technologies such as HTML5, CSS, JavaScript, and jQuery

11:15 – 11:25 Pre-test 11:25 – 11:35 Course overview 11:35 – 11:45 Dreamweaver Configuration 11:45 – 12:25 In-class exercise: Lab 0 12:25 – 12:30 Wrapping up 12:30 – 1:30 One-on-one Troubleshooting

-Apply HTML, CSS and JavaScript as an interactive learning technology. - Use JavaScript and jQuery to modify HTML content and style. - Create functions, conditions, and variables using Javascript and jQuery. - Adapt and modify existing code to integrate in your own projects. - Embed video and audio in a web page using HTML5 tags - Create an interactive instructional website that integrates the above technologies Course Objectives

Week 1: HTML common tags Week 2: Cascading Style Sheets / lab 1 Week 3: jQuery UI / lab 2 Week 4: jQuery / lab 3 Week 5: HTML Media (video, audio) / lab 4 Week 6: HTML Forms / Web Storage / lab 5 Week 7: Image Map / Hot Spot Activity / lab 6 Week 8: Final Project

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

Fridays from 3 to 5pm Please, let me know at least two hours in advance!

Deliverables: Project proposal Provide project description and at least three instructional objectives Storyboard Entire site should include at least 5 web 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.

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

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

We will learn very basic HTML tags, such as: Tags to are used for headings 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 This tag defines a container or division in the page

Cascading Style Sheets (CSS) are special tags to give formatting and styling to the web page (change color, font size, borders, etc.) CSS can be included within the same page or as an external page To include them within the same page, the tags must be placed within the section: /* The styles go here */

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

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: