HTML Web Design - Lesson 08

XHTML - Extensible Hypertext Markup Language

• short definition - "a stricter and cleaner version of HTML"

Why XHTML? ...what's the goal?

• to write code that is clean, well-formed, and conforms to the XHTML standards and elements
  

HTML Web Design - Homework Assignment 04

1) What is XHTML?

Multimedia - Lesson 04

You will continue working on your "web sites" today.

• Please ask or email me if you have questions or need any help.
• All work MUST be saved into the folder: Multimedia/yourUserName
  
• This assignment will be due on Tuesday. (accidentally had Monday on this...sorry!)
  

HTML Web Design - In Class Assignment 07

You will continue working from the HTML Examples tutorials found at:

More practice

1. Create a new folder in your network share for these assignments named:
1. ica07
2. Start with
   
1. "Text formatting link"
3. Do all consecutive links and End with
1. "Jump to another part of a document"

**Look at In Class Assignment 06 for specifics on the naming of your files and general instructions.

HTML Web Design - In Class Assignment 06

Hands-on practice

Click for practice

1. Save your work into "ica06"
2. Start with the link that says: "More paragraphs"
1. Create a new html file in Web Developer Express
   
2. name your file: "moreparagraphs.html"
1. remember to save in "ica06" folder on your network share
3. Type the html code that is in the textbox on the left-side of the tutorial screen.
4. Save your work and view it in a browser.
5. Make sure that it looks like the results that are displayed on the right-side of your tutorial screen.
   
3. Do the same with:
1. "The use of line breaks" - "useoflinebreaks.html"
   
2. "Poem problems" - "poemproblems.html"
   
3. "Heading tags" = "headingtags.html"
   
4. "Center aligned heading" - "centeralignedheading.html"
   
5. "Insert a horizontal rule"- "horizontalrule.html"
   
6. "Comments in the html source" - "comments.html"
   
7. "Add a background color" - "backgroundcolor.html"
   

Multimedia - Homework Assignment 03

Create a web site! (This is due by Tuesday...it must be ready to go)
*this will not be put on the public internet...it will be stored locally within the schools intranet.

Download Kompozer from:
download

You will be using your answers from the last homework assignment as the content for your web pages.

Requirements

1. 6 web pages
1. Index Page (or home page) - this page will link to all the other pages.
   
2. Animation page - this page links back to the index page
   
3. Video page - this page links back to the index page
4. Clip art page - this page links back to the index page
5. Photographs page - this page links back to the index page
6. Music or Other sound files page - this page links back to the index page

For each category/content page you must:

1. Add a link
   
1. to the Site Address that you found for the last homework assignment.
2. the link can be a text link or an image link.
   
2. Add text (or a graphic of the text) to the page that displays the
   
1. Creator/Owner information.
   
3. Add text to the page that displays the
1. Description
4. Add text to the page that displays the
   
1. Suggested Use
5. Embed an example of the media content type.
1. i.e. for animation, your page must have a - flash animation/animated gif, etc.
   

Gmail Account

All students in this class are required to have a gmail account.

• Username is the following format: ics.html.[your first initial and last name]@gmail.com
• example: ics.html.jredin

We will be using Google Documents for taking notes. The notes will be "shared" with me so I can review them.

Multimedia - Homework Assignment 02

Internet Media Catalog

Create a catalog of media resources available on the Internet that you may use for upcoming projects. Locate sites that can supply the following types of media: animation, video, clip art, photographs, music/other sound files. Locate 1 site for each type of media.


Here are the categories in list form:

1. Animation
2. Video
3. Clip art
4. Photographs
5. Music or other sound files

For each category you must list:

1. Site Address
2. Creator/Owner
3. Description
4. Suggested Use

HTML Web Design - In Class Assignment 05

Relative Path Practice

Use the provided files to fill in the "href" and "src" attributes using relative paths to pages and images stored in nested folders.

Multimedia - Lesson 03

We will start class with a quiz. Click on the following link to start:
Click to start the quiz

HTML Web Design - Lesson 07

We will begin class with our quiz. Click on the following link to start:

Click to start the quiz

Practice:
We are going to start using a different text editor for creating our web pages from now on. You are graduating from Notepad into a more useful editor for creating web pages. I will show you the program in class, and install it if it's not already installed.

Here is what you will practice:

Click for practice

Start with the "More paragraphs" link, and finish with "Add a background color". Type in the html code in the left window, save the file as the title of the tutorial without spaces (i.e. moreparagraphs.html) into the "ica06" folder.

HTML Web Design - Lesson 06

Relative Path

• links in the same directory as the page have no path information listed:
  filename
• sub-directories are listed without any preceding slashes:
  weekly/filename
• links up one directory are listed as
  ../filename

Absolute Path

• This is the full path or full url to the file.
• Examples:
• c:\inetpub\wwwroot\index.html
• http://www.mywebsite.com/mypage.html
  

Multimedia - Lesson 02

Today we started presenting our "about me" power point presentations. 10 people presented. We will be presenting the rest tomorrow.

HTML Web Design - Lesson 05

• Learn how to open a link in a new window.
• Practice with google maps.
• Search online for "html text-formatting tags".
• Find at least 3 formatting tags that you are not familiar with.
• You will be using these in today's html page you will be creating.
• Create a new web page called: me.html
• Include on the page at least 1 image of yourself.
• Write a description of yourself:
• Where you are from.
• Where/if you plan to go to college.
• What type of job you want to do.
• Include at least 2 links to your favorite web-sites.
• Make the links open in a new window.
  

HTML Web Design - Homework Assignment 03

Answer the following questions:

1) Define hypertext links in your own words.

2) Where are the following tags positioned on an html page:
<head><title></title></head>

3) What is the difference between a relative address and an absolute address?

HTML Web Design - In Class Assignment 03

Initial Setup
Create 2 new shortcuts on your desktop...

1. network share on the web server
1. \\192.168.1.3\jredin
2. web site root directory
1. http://192.168.1.3/jredin

Open your network share and create 2 new html files. When creating your pages, make sure to include all the default tags necessary for an html page... <html> <body> ...

1. homepage.html
1. This file will have a header level 1 tag with the title: "My home page"
2. Add an anchor tag with a relative address to contactinfo.html
3. Add an anchor tag with a full address to contactinfo.html
1. Full address is: E:\htmlsemester1\yourusername\ica03\contactinfo.html
4. Add an image tag using a relative path to the "smiley face" image in the src attribute.
   
2. contactinfo.html
1. This file will have a header level 1 tag with the title: "My contact information"
2. Add an anchor tag with a relative address back to homepage.html
   

HTML Web Design - In Class Assignment 02

Duplicate the web page displayed on the projector using the tags that we learned in class today.

HTML Web Design - Lesson 04

Introduction

We are going to start off by reviewing the tags that we learned yesterday.

• We will be taking notes in class today, so make sure they are done in google documents and shared with my before you leave class.
• There will be a homework assignment tonight so please check the "html - homework" link.

Today's Lesson - Linking to other Web Pages (notes03 on google documents)

Let's start off with a couple definitions:

Hypertext links - those words that take you from one web page to another when you click them with your mouse.

Attribute - an extra piece of information associated with a tag that provides further details about the tag.

1. The tag for creating a link is: <a>
2. The "a" stands for "anchor".
1. Not only does the anchor tag allow you to link to other pages, but you can jump to a spot (anchor point) within a web page. - hence the name anchor
3. Let's look at an example:
1. <a href="http://www.digg.com">Take me to digg</a>
2. Notice that the anchor tag has an attribute just like the image tag.
1. The attribute is: href which stands for "hypertext reference"
4. The href attribute can point to either a relative address or an absolute address.
1. This will require a whiteboard explanation and hands-on practice.
2. *As a general rule, use relative addresses whenever/wherever possible.
1. This makes it easy to drop your web site on any machine and the links will still behave properly.
   

HTML Web Design - Lesson 03

New tags you will need to memorize:

<html>

<head> - tags that are nested within the head tags (i.e. title) are not intended to be viewed on the page.

<title></title> - this tag contains the text that will be displayed in the title of the browser window.

</head> - the "end head tag" goes right before the "open body tag".

<body> - tags nested within the body tags are in intended for viewing on the page.

<h1 ></h1> - big level 1 heading

<h2 ></h2> - slightly smaller level 2 heading

<h3 ></h3> - little level 3 heading

<hr /> - horizontal rule. this is an empty tag (it doesn't have a separate closing tag)

<br /> - line break. this is an empty tag also.

<img src="" / > - the image tag can load files from anywhere accessible on the local machine/network, or internet

</body>

</html>

HTML Web Design - Homework Assignment 02

Write a paragraph about 3 things a Web Developer should take into consideration when designing/coding a web site.

HTML Web Design - Lesson 02

Definitions:

• I.P. Address
• A unique address that computers use in order to identify and communicate with each other.
• Web Server
• A computer program that is responsible for accepting HTTP requests from clients, which are known as web browsers, and serving them HTTP responses which are usually HTML web pages.
• Web Browser
• A computer program that interprets HTML commands to collect, arrange, and display the parts of a web page.
• *examples of various web browsers are: Apple's Safari, Mozilla Firefox, Opera, Internet Explorer, Netscape Navigator.
  

Demo. method for viewing HTML:
We will look at the "view source" or "view page source" menu command found in browsers to see the HTML for any website.

Media that can be displayed on a web page:

1. graphics
2. sound
3. animations
4. video
5. interactive programming

*The media files remain separate from the web page they are displayed on. HTML commands tell the web browser where to find the media files. We will see this concept today by putting our first image on a web page.

Design considerations:

1. The target device
1. cel phone / pda
2. computer
3. television
2. resolution of the monitor (1024 x 768, 800 x 600, etc.)
3. Target web browser(s)

HTML is not solely rendered to a web browser sitting on a computer. The HTML can be rendered anywhere from a PDA to a Television set. "Your job is to design pages so that they look as consistent as possible across major browsers with their default settings."

HTML Web Design - Lesson 01

What is the internet? - the "network of networks" that connects millions of computers around the globe.

What is HTML? - a language for describing how pages of text, graphics, and other information are organized and linked together.

HTML Web Design - In Class Assignment 01

First HTML Web Page - (after reviewing what HTML is, discussing web browsers, and discussing web servers)

1. Follow along with the teacher to create your 1st web page.
2. Save (publish) your .html file to the web server.
   
3. View the web page in internet explorer.
   

Multimedia - In Class Assignment 01

Introduction Slide Show

Directions: Using presentation software, prepare a simple multimedia slide show to highlight information about yourself. Focus on information that will help your class members get to know you.

Your final slide show must include:

• One title slide
• Four to six slides with the following information
• Information about you
• Information about your school activities
• Information about your hobbies or interests
• Information about your talents or skills that would be useful in a
  multimedia project
• At least two of the following: transitions, animation, photos,
  templates, or clip art
• Once you have prepared your slide show, you will present it to the rest of the class.

HTML Web Design - Homework Assignment 01

Please post your responses to the following statements/question...(use google or another search engine if you need help with your responses)

1) Define Hypertext Markup Language.

2) Name 2 different Web Browsers other than Internet Explorer.

3) What is the function of a web server?

Multimedia - Homework Assignment 01

Multimedia Critique

Directions: You will identify the types and media components of multimedia presentations available on the Internet. Locate 1 Internet site that contains a multimedia presentation. Use the format below to record the Web address, the name of the person or company who created the site, the type of presentation found on the site, the media components of the presentation, and an analysis of the site’s effectiveness. You may identify more than one example of media on a site. Your critique needs to include at least one example of each of the following media components: animated text, graphics, animation, sound, and video.

1) Web address:

2) Name of the person or company who created the site:

3) Type of presentation found on the site:

4) Media components of the presentation:

5) Analysis of the site's effectiveness:

HTML Web Design Introduction

1. HTML - HyperText Markup Language
1. a language for describing how pages of text, graphics, and other information are organized and linked together. (keywords in bold)
2. The Internet - network of networks..."the mother of all networks"
3. "hypertext links" - method to easily cross-reference text on the Internet

Multimedia Introduction - Lesson 01

1. Medium - any means of conveying information
2. Media - plural form of medium
3. "the media" - radio, television, newspapers, magazines
4. Specific media types
1. Text
2. Sound
3. Video
4. Animation
5. Graphics
5. Multimedia - the integration of still and moving images, text, and sound by means of computer technology.
   

Multimedia Class - Welcome!

Welcome to my Multimedia class! I am confident you will enjoy learning multimedia and developing skills that will equip you for future employment and/or your personal enjoyment.

During class, you will be required to take notes and turn them in. I am also requiring a daily blog entry as a means for ingraining concepts learned in class. These will be short entries describing the concept/skill learned and how it was applied in your homework assignment.

Grading Policy (revised)

Quizzes 10%
Tests 15%
Homework/Blog 30%
Project 35%
Class notes 10%

Course Syllabus – at a glance

• Exploring the World of Multimedia
• The Internet and Multimedia
• Multimedia and Society
• Hardware and Multimedia
• Software and Multimedia
• Text – Inkscape, Gimp
• Graphics and Animation – Blender
• Audio / Video
• Multimedia Project Team Roles
• Anatomy of a Multimedia Project

*course outline is from Introduction to Multimedia, www.intromm.sec.glencoe.com

HTML Web Design - Welcome to class!

Welcome to my HTML / Web Design class! I am confident you will enjoy learning web-development skills, and end the course well-equipped for designing and publishing creative web-sites.

This class is highly hands-on and project based. Quizzes and tests will be based off the specific skills learned and applied in class. The format for learning will be tutorial based. The concepts learned in class will be applied to a web-site project that is due at the end of the semester.

I am requiring daily blog entries as a means for ingraining concepts learned in class. These will be short entries describing the concept/skill learned and how it was applied in your homework assignment.

Grading Policy (revised)

Homework/Blog 35%
Tests 15%
Notes 10%
Quizzes 10%
Project 30%

Course Syllabus – at a glance

Your First Web Page
o Understanding HTML and XHTML
o Linking to Other Web Pages
o Publishing Your HTML Pages
Building Practical Web Pages with HTML
o Basic Text Alignment and Formatting
o Putting Graphics on a Web Page
o Custom Backgrounds and Colors
Creative Web Page Design
o Using Tables to Organize and Lay Out Your Pages
o Formatting Web Page Content with CSS Style Sheets
o Creating Print-Friendly Web Pages
Dynamic Web Pages
o Gathering Information with HTML Forms
o Embedding Multimedia in Web Pages
Building a Web Site
o Organizing and Managing a Web Site
o Helping People Find Your Web Pages

*course outline is from SAMS Teach Yourself HTML and CSS.