Download presentation
Presentation is loading. Please wait.
1
IST541 Interactive Media Miguel Lara, PhD
2
HTML5, CSS, JavaScript, and jQuery
IST541 Goal: Design and development instructional websites using a variety of web technologies such as HTML5, CSS, JavaScript, and jQuery
3
Today’s Agenda 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: Wrapping up 12:30 – 1: One-on-one Troubleshooting
4
What do you already know about Web Development?
IST 541 What do you already know about Web Development?
5
Course Overview Course Objectives
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
6
Course Introduction Content: 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 We will cover a lot of different topics in this course. The goal of this course is not for you to become an expert in JavaScript programming. This is not a programming course. The goal is to become familiar with this set of technologies in order to use them for instructional purposes. As an instructional designer is important to be aware of ways in which emerging technologies can be used to make learning more interactive, efficient, and appealing.
7
Course Introduction Activities: Five labs / assignments 50%
Grade Five labs / assignments 50% Weekly comments 10% Final Project 40% Assignments submitted after the due date are penalized with 20% of the grade.
8
Course Introduction Virtual Office Hours Fridays from 3 to 5pm
Please, let me know at least two hours in advance!
9
Final Project 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. Examples of how you will be able to use the skills from this class:
10
Cascading Style Sheets (CSS)
IST 541 Week 1 HTML5 Introduction: Common HTML Tags, Cascading Style Sheets (CSS)
11
HTML5 Introduction 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
12
HTML5 Introduction HTML5 Document Template: <!DOCTYPE HTML>
<head> <meta charset="utf-8" /> <title> Title of the page goes here </title> </head> <body> Page content goes here </body> </html> This is the basic structure of an HTML5 document, that is, the basic tags that must be included. This template is on our LMS (week 1). <!DOCTYPE> is NOT an HTML tag, it’s just used to tell the browser the HTML version we’re using, in this case, it’s HTML5 compatible. The outermost tag in any HTML document is <html>. There should be an opening and ending <html> </html> tags. All the web page content should be included between those tags. HTML documents have two sections: head and body. Each section is delimited by the corresponding HTML tags. The <head> section contains JavaScript code and cascading style sheets declaration, but those are optional since not all HTML pages use them. The <head> section contains “<meta>” tags which provide information about the document such as author, keywords. The <meta charset=“utf-8” /> line specifies the character encoding. Currently, “utf-8” is the most comprehensive character encoding since it contains all existing characters in all languages. Meta tags don’t have an enclosing tag, so a forward slash “/” is used to end the tag. The <title> tag includes the title of the document. The title shows on the top of the browser window. All of the page content goes within the <body> tag.
13
HTML5 Introduction We will learn very basic HTML tags, such as:
<h1> Tags <h1> to <h6> are used for headings <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 <div> This tag defines a container or division in the page
14
HTML5 Introduction 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 <head> section: <head> <style> /* The styles go here */ </style> </head>
15
HTML5 Introduction 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 Let’s suppose a zoo is planning to provide instructional information about their animals on its web page. So we’ll create a web page like this. Create a folder structure like: ist541/lab0/index.html Inside lab0 create the following folders: css and img When saving the file, it’s important to remember that the file name should NOT include spaces or special symbols like If the file name contains several words, they can be separated by a hyphen or an underscore. You can get free images from the following web sites:
16
HTML5 Introduction 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 “<img>” tag. For example: <img src="images/my_image.jpg"> You can get free images from the following web sites:
17
Thanks! Thanks!
Similar presentations
