Web Mastering
Basic XHMTL

September
October October 6 October 3 October 1 & 2 TEST Oct. 7 October 10 Oct. 13 October 14 Oct. 15 - 16 October 17 October 17-20

click on the date to access the
lessons for that day

Major Test on Wednesday, Oct. 8

FINAL PROJECT is due at the END OF THE CLASS ON MONDAY, OCTOBER 20

FREE IMAGES for WEBSITESHTML TUTORIAL SITES

  

September 10 & 11

Warm-up: Logon to Learn 2 Type. Take the "Timed Test" When you have completed the test, record your score on a sheet of notebook paper and date it. Search and continue reading about various browsers.

FREE Account Signup

Why register? By creating a personal account, Learn2Type.com can keep track of your typing lessons. Each time you login to your account, your keyboarding performance charts will be available. All information is private, we do NOT share user information with anyone (Privacy Statement)

NOTE: Register using your email address as the login. Record your password in your notebook.

Complete ONE lesson, and record your speed and errors in your notebook. When 5 have been completed, you will print a certificate for a class grade. You can complete more than five and delete the lower scores. Five must be recorded in order to get a "certificate".

When certificate is printed, you can work on typing speed at the following URL: http://www.freetypinggame.net/play.asp

NOTES:You will be expected to take notes daily in this class. All vocabulary, guided questions, graphic organizers and activities should be dated and in chronological order in your binder.

Activities: Become familiar with the following html terms.

  • Editor – notepad, XHTML, DOCTYPE,
  • Elements html, head, title, meta, readability

    Select a text editor to work in to create your first XHTML document. We will use Notepad in this class.

    Navigate to open Notepad on your computer

September 24-25

warm-up:

  • Create a G-mail account.
  • Change the settings for the name seen to Lastname, Firstname period __?__
  • Send an email with your Lastname,Firstname in the subject line
  • Teacher will create a group and contact list
  • Check your e-mail for your grade.

Activities:

Complete the Computer Information handout. Grade in class and turn in.

Turn in the handout on computer parts with the labels for a grade.

Do the following at the beginning of class each day:

  1. Check to see whether the student server is mapped. Z should never be mapped until YOU map it! If it is already mapped, then you need to disconnect by right clicking on My Network Places, then you should disconnect them.
  2. Right Click and Map Network Drive
  3. Choose Z from the server dropdown menu
  4. Choose \\Wsidehs-rs05\Students from the folder menu. If this is not a choice, then type it in VERY CAREFULLY
  5. Make sure the 'reconnect at logon box IS NOT checked
  6. Log in as a different user
  7. Type Wsidehs-rs05\(the name of YOUR folder) in the User name box. I suggest memorizing this rather than trying to copy and paste. Ease and speed are critical though.
  8. Your password was given to you in class. Do not share this password with ANYONE.
  9. Select OK
  10. Select Finish

A window containing all of the student folders should open. You can close this window. You should now be able to save your files to the appropriate folder on the student server. STUDY THIS. You will be quizzed over this in class on Friday.

DISCONNECT this network drive EVERY DAY! Do this by right clicking on My Network Places and disconnecting the server. You should do this at the end of class, then log off. This will ensure that your files are secure.

September 26

warm-up:

  • Logon to the student server.
  • Use the handout in class and follow the directions VERY carefully.
    (continue with activities if you were successful. Stay logged in!)

ACTIVITIES:

WORD WALL: Fold your sheet of paper in half. Write each word from the Word Wall in front of the room. Search through the Module 1 packet to write a complete definition for each word.

list of words: element, HTML, Render, Source code, Tag, W3C, Web page,
Web site

Read pages 1-4 in Module 1 very carefully. You should take appropriate notes on the BACK of the definitions you just wrote. Keep this in your binder and bring to class each day.

Module 1 PowerPoint -- access the @pickup folder and view the PowerPoint Show. (This is only accessible for Students at Westside High School). Feel free to visit the Expression Web Website for more information.

Create a notepad file; save it as lastnamefirstinitialhtml.html to the folder. Continue working on this file. You should complete the examples in the packet by the end of the period. Handout is ONLY available as a hard copy. If you are absent, please get a pass from me to come to Wednesday lunch tutorials.

Follow-up/Homework: Write at least two paragraphs about your experiences during Hurricane Ike. Work on content develop. Write the most interesting 'story' that you can. If possible, bring pictures that YOU took to support your story.heck for spelling and grammar errors.

September 29

Warm - Up: Practice logging onto the student server. Quiz TODAY!

Logon Quiz: Access the student server. Open the lastnamefirstinitialhtml.html file.

(Continue working on the lesson when you have the file open.)

Complete the HTML sample lesson. Due today! Save and copy to the @dropoff folder at the end of class

Learn2Type.com -- logon and take the Typing Test for practice. Word per minute will be recorded today. When time is called, you will access your certificate, copy/paste the table to your document you saved on September 10/11. Save this document to your temp folder as lastnamefirstinitialtyping.doc

September 30

Warm - Up: Practice logging onto the student server. Quiz TODAY!

Objective: Experiment with various web tags and format html document for readability

Activities:

Open the lastnamefirstinitialhtml.html file the you created in class yesterday. Complete typing all the code that is on the handout in your Module packet. Include the doctype found on page 5 of the packet at the beginning of the document.

Create THREE separate html files for each of the samples.

Save sample one as lastnamefirstinitial1.html
Save sample two as lastnamefirstinitial2.html
Save sample three as lastnamefirstinitial3.html

What differences are noted in each of the samples?
Which is easier to read?

Folder Structure: All files created for Module one should be saved to the temp folder. You will be directed to create this in class today.

Follow-up/Homework: The first web site will be a 'personal web site'. One of the pages will be a movie review. Think of a movie that you enjoyed over the last few months. Write a two paragraph review, research to know the actor's names, plot etc. Think of images/graphics that could be used on your site. NO IMAGES CAN BE SAVED FROM THE WEB.

October 1 - 2

Creating Your First Web Site -- due date: End of Class on Monday, October 6

MODULE 1:  HTML BASICS (project covers through page 14 of the Module 1 text).
This portion of the assignment MUST be completed by the end of class on Friday.

Before beginning this assignment, all of MODULE 1 should be completely read.  The rest of the words on the “word wall” should be defined.  You may find it helpful to reference the page number for each of the requirements below.  This will help when you are creating your web page.

Directions:  Create a Web site review of a movie you have recently seen.
You first website will saved to a folder called first.  Create this folder before you begin this assignment.  ONLY the files that are actually used on this website should be saved to this folder.  Any others should be saved to your temp folder.

  • Name of the movie should be a heading, with your byline in a smaller heading.  Since this web page will actually be posted on a server, you must use ONLY your first name. 
  • Use the center attribute for the Header and the Right Align attribute for the byline.  Refer to the text if you need help with this.
  • Write at least a 2-paragraph critique of the movie.  Place a horizontal line between the heading and the text.
  • Also include bold, underline, and italics in the body.
  • Choose colors that reflect the tone of the movie.  (visit websites that suggest good color combinations…see tutorials on the lessons link).
  • Additionally, use subscript and superscript.
  • Save your work using the filename movie.html
  • Make sure to include the doctype information you included in your first practice html files.
  • Add a comment listing you as the author and today’s date.  Use your FIRST name and LAST initial in the comment.
  • Create a details.html file in your first folder.
  • Create a link from your movie.html file to this file.  (reference text for help with creating links).
  • On the new page (details.html) create an ordered list.  The list should identify the top three features of the movie that made it appealing to you.
  • Next, create an unordered list of the locations of the movie scenes (office, jungle, etc.)
  • Next, create a table of the actors and the characters they portrayed.
  • Use the Internet to locate each actor’s homepage or studio page.  Link each actor’s name in the table to his or her homepage.
  • Be sure to include your FIRST and LAST INITIAL and the date in a comment with the code.
Be sure to TITLE both pages.  (The title goes in the header is seen in the top bar of the browser.)

October 3

The Movie Project due date has been extended through Monday, October 6.

You should read Module 1 through page 14. The project focuses on the elements found in these pages. Take careful notes and keep them in your binder. I have emailed each of you a copy of the Module 1 text. Please study to prepare for a major test next Wednesday/Thursday.

Before continuing the work on your project, please review the basic HTML lessons in the tutorial below. This interactive HTML tutorial has been specifically designed to be applicable to Alternate Web Design clients. The lessons explain HTML coding and teach you how modify existing Web pages. The tutorial uses a "hands-on" approach to teaching HTML so you will be able to test out the HTML lessons as you go through them.

Assessment/Homework: STUDY for Basic HTML test on Wednesday.

October 6 -- Module 1 -- Movie Critique Project is due at the end of class.

You should read Module 1 pg.15. You will learn how to make a hyperlink on a web page.

Hyperlinks consists of text or images. They are defined by an anchor ("a").
There are two basic types of links. An absolute link will take the viewer to another website. The path used is an entire URL. A relative link is a link that will take the viewer to another web page within the site that is being viewed.

Examples:

absolute hyperlink: <a href="http://westsidewolves.org">Westside High School</a>

The <a opens an anchor. href indicates the page "referenced". The absolute URL is typed between " and the is a > after it. The text that is actually linked is shown before the anchor tag is closed </a> .

relative hyperlink: <a href="details.html">Movie Characters</a>

The <a opens an anchor. href indicates the page "referenced". In this example, the file details.html has been saved to the SAME folder as the page with the link on it. The relative link does NOT include the actual URL. Only the file name is shown. The text that is actually linked is show before the anchor tag is closed </a>.

Continue work on Module 1. Project should be complete by the end of class. If you were absent, you should plan to attend tutorials during lunch on Wednesday.
Please study to prepare for a major test next Wednesday

October 7 -- Design Web Page Using Tables

Text on a web page is much easier to read if it is constrained to a width that is 640 pixels. This allows older monitors set to a low resolution to view the text without horizontal scrolling. To accomplish this, all content between the body tags should be placed in a 1 x 1 table. This table looks best if it is centered on the page. You should not have borders on this table.

Code for a 1 x 1 table

<table width=640 align=center border=0> beginning table element tag
    <tr> beginning tag for a row
        <td> beginning tag for a column

cut and paste all the content between the body tags on your website - OR - create all content between the <td> tag.

       </td> close the tag for the column
    </tr> close the tag for the row
</table> close the tag for the table

This code should be entered on ALL web pages. I would suggest that you create a table.txt file in your temp folder so you can use it when needed.

October 8

Objective: Complete Basic HTML Quiz and create a practice CSS file.

Assignment:

  • Review for Quiz

QUIZ -- Online. After reading the directions carefully, access the Quiz Star web site and take the "Basic HTML" quiz. After you have completed the quiz, you should copy any question you answered incorrectly, write the CORRECT answer and put this in your binder. Record your grade for future reference. This quiz is worth twenty-five points.

Directions to access quiz.

You were given a strip of paper in class with a username (usually last name and some numbers). Your password is the same as the one used to logon to the student server. Write these in a safe place that you will always have with you. I would suggest that you email them to your gmail account and any other email account you use.

You should choose the link of 'untaken quizzes'.

Scroll to the top of the page. You should see a 'take quiz icon' on the right of the 'untaken quizzes' section. Select it.

Complete the Quiz. When complete, REVIEW quiz and record questions/answers for any question you answered incorrectly.

URL: http://quizstar.4teachers.org/indexs.jsp

  • After quiz, read pages 18-25 in Module packet.
  • Open your lastnamefirstinitialhtml3.html in notepad. Save this file as lastnamefirstinitialcss.html to your temp folder.
  • Practice the code found on pages 18-25. You will need to add the 1x1 table and perhaps other content.

October 10

Warm-up QUIZ -- logon to Quizstar and the student server -- timed (5 minutes)

Objective: Create a Cascading Style Sheet

CSS is a tool for setting HTML styles by defining the styles within a style document that is separate from the HTML files, and then associating each HTML file with thet style document.

PowerPoint presentation -- (check your gmail account for reference)

Access the CSS Zen Garden Web site. http://www.csszengarden.com/

Note that each design was created with the same HTML file and that only the CSS file is different. Visit some of the Web page designs on the site. Explore the site. You will work in small groups to note the differences in the code. Pair and share you favorite page and explain what makes the design of the page attractive.

October 13

Warm-up: Create a css.html file in notepad. Save this file to your temp folder. Begin typing the HTML code on the handout given in class. (hint: you can copy/paste code from other web pages!)

Objective: Create a Cascading Style Sheet. (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the learning CSS page. For background information on style sheets, see the Web style sheets page.

Handout in class: Cascading Style Sheets

  • create css.html and mystyle.css
  • save the files to your temp folder on the student server

In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once. Use the handout in class to create the style sheet.

Cascading Order
What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

  • Browser default
  • External style sheet
  • Internal style sheet (inside the <head> tag)
  • Inline style (inside an HTML element)
  • So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

CSS Syntax -- Review the syntax that you used to create the mypage.html --
READ CAREFULLY before going to the activities.

Go over the following examples:

Look at Example 1
Look at Example 2

Other practice:

Start learning CSS! -- Read this section before you begin the actual tutorials. Review the Casading Order below.

Interactive Practice -- work through the practice activities. When you are confident that you can make some decisions regarding the actual style you want your first web page to have, then you begin creating your own page. I suggest that you create it using these interactive tools and perhaps combine some of the sample styles that are easily found on the web.

Sample CSS Scripts -- practice these scripts by creating a sample.html file in your html folder.

  • Ready Made CSS Scripts -- very simple, but most do not 'show' examples.
  • CSS experiments
    Recently, there has been a trend among web designers to document all their experiments with CSS on a section of their site. Examples include:

    These experiments are usually only compatible with browsers that are largely standards compliant.

Homework/Followup: Write a two paragraph autobiography for the homepage of your first website. This content must be completed prior to class on Tuesday. Decide on a basic 'style' to use for your first web page. The content (with some modifications) will be transfered to this page next week. Visit CSS Templates. There is an assortment of free CSS templates, downloadable in .Zip format. Read the license page information on how to use them. Visit this page periodically as newer CSS templates will be added to the existing list periodically. At present, there are 219 free CSS templates, spread over 15 pages.

October 14

Warm-up: Open lastnamefirstinitialcss.html. Compelte mystyle.css using the handout given in class on Monday. All values should be included in the code. Check the answerkey when you have finished.

Objective: Use an existing CSS template to create styles for your first website.

Activities: Save the two paragraph biography you wrote to the temp folder. Save the file as bio.txt or bio.doc (pending the application you used to write this document).

Decide on a basic 'style' to use for your first web page. The content (with some modifications) will be transfered to this page next week. Visit CSS Templates. There is an assortment of free CSS templates, downloadable in .Zip format. Read the license page information on how to use them. Visit this page periodically as newer CSS templates will be added to the existing list periodically. At present, there are 219 free CSS templates, spread over 15 pages.

Using your knowledge on CSS styles, you will download the style.css page and the index.html page from you gmail account. You will need two images for this template. One image will be a picture of yourself, the other image will be a horizontal bar that can be created in Photoshop.

  • Open your gmail account.
  • Save the two attachments to your first folder. (One file is index.html and the other is style.css)
  • Open the index.html file in notepad and study the code.
  • View the final web page.

Do not change any of the selectors, properites or values for this style sheet. Copy the text for your paragraphs into the white text space next to the image. Save your file as index.html to your temp folder. Make sure the style.css file is saved there as well.

Change content to reflect what you want YOUR homepage to say.

Assignment: Have access to a digital image of yourself for your webpage. This will be used in class tomorrow.

October 15/16

Warm-up: view the sample CSS site and read the content. Sample CSS web site

Activities: You will want to use some images for your first web site. Unless you take pictures yourself, you must use images from the following site: FREE IMAGES for WEBSITES . You are NOT allowed to use images found from any other site on the web for this project.

Working with a CSS Template

Follow the following steps VERY carefully.  When you have completed these, you can work with the template to replace the paragraphs shown with those you have written, the links at the top with appropriate links, and the links in the green area at the bottom with those that you would like.

First

Access your gmail account.  Download the three files that were sent to you.  Choose each file separately, download and save to your first folder.

  • headerbg.gif
  • index.html             first (folder)
  • style.css

Second

Go to the @pickup folder on the student server => open the appropriate “class period” folder =>  View thumbnails =>  Right click on YOUR picture => Copy => Navigate to your folder => open the “first” folder => paste picture.

Right click on the file name and rename it to pic.jpg
(If you are using one that YOU have, then you must use the file type that it is. 
It may NOT be a .jpg)

Open Photoshop – left click on start => programs => Adobe Master Collection C3 => Adobe Photoshop C3

Go the dropdown menu:  File => Open => go to your first folder => double click on pic.jpg.  (this a HUGE file). 

We are going to crop and compress the image.  (if you are using your OWN image, skip to the end of this section).

  • Go to the Navigator Window (it is probably open and on the right of the screen). 
  • Set the % view of the image so you can see the entire picture on the stage. 
  • Select the CROP tool.  This is found in the toolbar on the left.  If you hover over the icons, you can tell what they are. 
  • The image in the template has set dimensions. In the menu at the TOP of the page, set the width to 289 px and the height to 213 px (do not change other settings.) –if you are using another picture, you may not be able to use these dimensions. 
  • Hold the left mouse button down and drag the crop tool from the upper left to the lower left of the picture to select the part of the picture you want to use. Hit enter.
    Resize the Navigator to 100%
  • Choose the image menu => Adjustments => Levels.  Move the RIGHT arrow to the center to see whether the quality of the image improves.  If so, choose OK, if not, CANCEL.
  • Choose File=> Save for Web and Devices.  A screen will open.  If the upper right image is NOT selected, choose it (a border will be around the picture). 
  • Choose .jpg from the dropdown menu on the right.
  • Choose SAVE and save the image to your first folder

Your image may not look good cropped to the size suggested.  You are welcome to try to use different dimensions, but you should still resize and compress your file.  With your image open on the stage, go to Image=>Image size=>make sure the “Constrain Proportions box is checked=> and choose a width that is no more than 300 pixels.  DO NOT CHANGE THE HEIGHT.  Continue with the fifth  box in the second section: -- Adjust image.

Third

  • Create an images folder in your first folder.
  • Drag pic.jpg and headerbg.gif into the first folder.

Fourth

Find 9 web sites that you would like to share with other students in the class.  They can be on any topic you are interested in.  (please make sure these are school appropriate.)

  • Open a new notepad file and save it as link.text to your temp folder.
  • Copy or Create the title for each of your websites.
  • Copy the URL for each of the web sites.
  • Make sure you have NINE sites listed.

Write a paragraph describing WHY you chose these sites.

Fifth

  • Open the index.html file in notepad.
  • Modify top links to reflect links that will take you to
    1. Home
    2. Movie
    3. Details
    4. Portfolio (this file has not been created yet.  The code for the link is
      <a href= ”../portfolio.html”>
  • Copy your two page autobiography text to the text area.
  • Copy your link paragraph and create links in the green area of the page.
  • Save this file as index.html to your first folder.

October 17

Continuing the CSS Web Site.                                

Your goal is to create a three page web site.  Each page of the site should link to the others.  Each page should have a link BACK to a portfolio page.  (I emailed you two files that can be used so the link actually works.  We will replace these files next semester)

Fourth -- (Note - steps 1-3 are found in October 15-16 lesson)

Find 9 web sites that you would like to share with other students in the class.  They can be on any topic you are interested in.  (please make sure these are school appropriate.)

  • Open a new notepad file and save it as link.text to your temp folder.
  • Copy or Create the title for each of your websites.
  • Copy the URL for each of the web sites.
  • Make sure you have NINE sites listed.
  • Write a paragraph describing WHY you chose these sites.

Fifth

  • Open the index.html file in notepad.
  • Modify top links to reflect links that will take you to
    1. Home
    2. Movie
    3. Details
    4. Portfolio (check your gmail account.  I sent you two files (portfolio.html and graphic.gif) that should be saved to your folder on the student server.  DO NOT put these files inside any folder.  The code for the link is <a href= ”../portfolio.html”>
  • Copy your two page autobiography text to the text area.
  • Check the code to make sure you place the text in the appropriate place.  Your ‘job’ is to make sure that it looks the way the template intended.  Be careful to paste the text in the appropriate area.
  • Copy your link paragraph and create links in the green area of the page.
  • Save this file as index.html to your first folder.

Sixth

Modify the movie.html page and the detail.html page to ‘match’ the template style.  In order to make this happen, you will need to remove the element attributes.  The simplest way to do this is to replace the text in the index file with the text from your other two pages.  Save the pages as movie.html and details.html. 

FINAL PROJECT is due at the END OF THE CLASS ON MONDAY, OCTOBER 20

October 20

Warm-up: CSS Quiz -- Access Quizstar and take the quiz. You may use your notes for this quiz, but NOT another web site.

Quiz-Star -- CSS Quiz

FINAL PROJECT is due at the END OF THE CLASS ON MONDAY, OCTOBER 20

Modify the movie.html page and the detail.html page to ‘match’ the template style.  In order to make this happen, you will need to remove the element attributes.  The simplest way to do this is to replace the text in the index file with the text from your other two pages.  Save the pages as movie.html and details.html.  (I would save a copy of these files to your temp folder in case an error is made).

Today is the final day to work on this CSS web site. If you choose to come to tutorials Wednesday--either lunch--it will NOT be considered late. You are encouraged to stay after school any day other than Wednesday.

TUTORIAL SITES

Top 10 CSS Tutorials

HTML - An Interactive Tutorial

Top 10 CSS Tutorials

 

HOME

Info

 Calendar HISD Academics Staff Small Schools

This page was last updated October 17, 2008
Mail comments to Webmaster
©Houston Independent School District

 

Sept. 10 & 11 September 24 & 25 Sept. 26 September 29 9_30