Training:WebCourse

Huajuapan Web Coding Activities

Preparation

• Have Lesson Folders unzipped and available on desktop
• Install Firefox and Firebug on computer
• Have http://aumha.org/html/colorsb.htm open in browser
• Figure out which text editor works best in edubuntu - OpenOfficeWriter

Lesson 0: Choose / build your avatar

• If there is internet access, have students build their avatar, name it avatar.png and copy avatar into Group0 lesson folders
• If there is no internet access, have students choose avatar from Avatars. The avatar number they choose corresponds to the group folder they will be working in.

Lesson 1: Making web pages

What is HTML?

• HTML stands for HyperText Markup Language.
• HTML is the language that browsers understand. Just like we speak Spanish and English, browsers speak HTML.
• HTML documents are often refered to as "Web pages". The browser retrieves Web pages from Web servers that thanks to the Internet, can be pretty much anywhere in World.
• So when you go to any web site in your browser, you are going to an HTML page.

• Today's we're going to learn how to start making our own web pages and also learn a few cool tricks we can do easily.
• How many of you have made a web page before?
• OK, let's make our first web page.

Let's make our first web page:

• Open up lesson1.html
• DOCTYPE - Document Type Declaration
• html
• An HTML document has a HEAD and a Body
  • head
  • title
  • body
• Look @ page in browser.
• Bold example
• H1
• Paragraph
• Does anyone notice a pattern for the way these tags are written?
  • Just like each sentence in the spanish language begins with a capital letter and ends with a punctuation mark, there's a pattern to HTML tags.
  • Each tag has a left angle bracket, the tag name, then a right angle bracket.
  • Then the content to go between the opening and closing tag.
  • And then a closing tag which has a left bracket, a forward slash, the tag name, and then a right angle bracket.
    • Tags - Tags enclose content. The names of tags describe the meaning of content.
    • If you remember, HTML stands for hypertext markup language. These tags are why its called Markup Language. The tags delimit content so we can assign meaning and presentation for the content we want on our pages.

• • Adding an image
  • Adding an anchor tag
  • Who can guess how to do both bold and italicized

CSS

• There is a way to add styles to pages. And it is called CSS.
• Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in HTML (or any markup language)
• Copy Script file
• Change colors
  • http://aumha.org/html/colorsb.htm

• Some examples:
  • What are some of your favorite web sites?
  • http://kids.yahoo.com/
  • http://www.girlstart.com/
  • http://www.kids.gov/
  • http://wikipedia.org/
  • http://flickr.com
  • http://mail.yahoo.com

• Now that you have all made your first web page, you can call yourself web developers. :-D

Lesson 2: JavaScript and YUI Overview

• Let's copy your lesson1 file into the lesson2 folder. We're going to start lesson 2 where we left off with lesson 1.
• After it's copied, open up your lesson2 folder and rename the file to lesson2.html

• We're going to learn a few more tricks.

• Open up lesson2.html

• Change caption into a input field with a button next to it.
• Now when we click this button, what we want to happen is for the header color to change.

• This is where JavaScript comes in. With JavaScript, we can do things like animation, moving things around, and we can write code which changes the page when the user clicks somewhere.
• Right now when you go the web page we built, it is always the same. It doesn't change over time on its own and it doesn't do anything when you click anywhere for example the avatar.

• Copy from script file

• Look @ in browser
• Add id selectors into HTML
• Look @ in browser
• Enter in different colors in browser; click button

• Change the background

Lesson 3: Drag the avatar

• Now let's play around with some more complicated features
• Open up lesson3.html

• Change avatar image to be your avatar
• Look at page in web browser

• Avatar does move - no box around it.

• Copy styles
• Copy from script file

• YUI is an open-source JavaScript library that Yahoo! has built and is used to build rich interactive web applications.
• YUI makes life easier for web developers. It makes things such as animation, dragging and dropping possible with only a few lines of code.

• Let's take a look at one site that uses YUI: http://my.yahoo.com

• Change height / width of avatar box
• Move img in box
• Change color

Lesson 4: Fading the avatar

• Open up lesson4.html
• Copy script file

• How would I change it so that the image is not fully transparent
• Extra credit - change link to a button

Lesson 5: What's Possible?

• YUI example

• View Source
• Inspect Element

• Ways to learn:
  • W3C
  • Look at other sites using Firebug.