Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML5 Introduction
Document related concepts
Transcript
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">
