INTRO / CORE
YOUR GRADED ASSIGNMENT
Using notepad, a web browser, and the CORE code,
create a web page in your folder named home.html
adding a title to <title> and a 100+ word bio paragraph
within the <body> ... </body>
that includes your name.
SAVE


Welcome to the Lake City High School Web-1 class! By the end of this semester long crash course in web programming you will have created 3 projects to truly be excited about and proud of. First, you will make your very own personal website showcasing your choice of interests, hobbies, friends, beliefs, poetry, art, etc. Based on past experiences this 1st project is one that virtually every student sucessfully completes and continues to work on even after the end of the semester :) With the 2nd project you will be adding Javascript interactivity to create your very own (real or pretend) web based business! Share your hobby or interest in the market place, e.g. art work, collector items, child care services, a unique product, or custom work. The final project has the potential to be the most self expressive and gratifying of all the projects. Using Macromedia Flash MX 2004 you will quickly learn the valuable skills necessary for making the most interactive and entertaining media on the web! This final project will allow you to bring your artwork, comic strip, lesson, story or game idea to life! For examples check out the quick links at the main Web-1 entrance. OK, time now to fasten your seatbelts and dive into this crash course :)



[1] Class RULES
  • COMPUTER RULES
  • WORK SAVE ROUTINE
    • Make a new folder in My Documets (P:drive)
      or on the desktop
    • or save to a cheap flash drive
  • Keep ALL files (html, gif, jpg, mid, wav, mp3, swf)
    necessary for your project in this 1 folder

[2] THE CORE HTML CODE
ALL of your web pages will have the basic core code listed below
Specific HTML commands ( aka tags ) appear within the < > and </ >symbols.
HTML Commands
usually "sandwich" whatever you want affected.

EACH WEB PAGE has ONE & ONLY ONE set of core tags!
ONLY ONE <html> ... </html>
ONLY ONE <head> ... </head>
ONLY ONE <title> ... </title>
ONLY ONE <body> ... </body>
arranged EXACTLY in the nested order shown...

<html>
<head>
<title> What you type here appears on the top of the browser frame </title>
</head>
<body>

Whatever you put here appears on the actual webpage.
~99% of all code will go here!


</body>
</html>


[3] EDITING WITH NOTEPAD

Notepad automatically saves as a *.txt file so it is important that as soon as you open Notepad
that you immediately SAVE AS a *.html (like page.html or index.html).
File TYPE selection should be set to All Files [*.*]
You must also change to the directory where you plan on saving ALL your work.

Use the default Web Browser (Set default to Chrome please! ) as your web page VIEWER.
After you have typed some HTML code in Notepad and SAVED it to your folder,
you can go into your folder and click on it to open it in your default internet browser.
You will keep both the Browser and NOTEPAD open and
switch back and forth between them (it's called multi-tasking).
You can minimize each application but NOT close .

"THE SEQUENCE"

  1. TYPE HTML CODE IN NOTEPAD
  2. SAVE
  3. GO TO BROWSER AND REFRESH TO SEE CHANGES
  4. REPEAT

[4] "HACKER" TRICKS

VIEW SOURCE Likely the most powerful tool to an HTML programmer!
When you go to a website and see something you like
you can see the HTML they are using by selecting the
VIEW and SOURCE from the drop down menu.
Also, right-clicking the mouse cursor within the website frame
you are interested in will also let you access the
VIEW SOURCE option.
COPY & PASTE The next most powerful tool is the COPY & PASTE
function. Use the mouse cursor to highlight (click-hold & drag)
a section of HTML from a VIEW SOURCE operation
then hit Ctrl & C keys to COPY. Nothing much happens at
this point. In the HTML document you are wanting to
add the code, place the cursor where you want the code
and then hit Ctrl & V (Paste) and the highlighted code magically
appears! This works great if you have a lot of repetitious
lines of code too!
RIGHT CLICK & SAVE IMAGE AS: If you want to borrow an image or logo to add to your
website as a link you can copy the image to your folder
where you keep ALL your work by using the mouse cursor
and right-clicking on the image and choosing
Save Picture As from the pop up menu. Be sure you make
a note of the exact name of the image and make sure you
save it to the folder you keep ALL your work.


[5] THE MOST COMMON ERRORS

  • Spelling errors, spelling errors, spelling errors (90% of the time)
    e.g. <img scr="pic1.jpg">
  • Check case sensitivity (Page.htm is different than page.htm)
  • Did you name a file using a space or special character?
    (e.g. home page.html should be home_page.html or homepage.html)
  • Is the image type pict.jpg and NOT pict.gif or vice versa?
  • Are ALL files for your site in the same folder/directory?
  • Did you save as .txt instead of .html?

[6] YOUR 1ST PROJECT EXPECTATIONS