[HTML - get started writing it]

Posted by: tumocurriculum on: October 19, 2009

In: Front-End Development
Comment!

“Hovering” and “Clicking”
- When you’re browsing on the web, there is a lot of information displayed. How does that information appear on your computer screen? This is what we’re going to look at now.
- The NASA website has a ton of great information about the universe, galaxy and astronomy. Let’s take a look.
- Hover over the words on the top of the webpage – NEWS, MISSION, MULTIMEDIA, etc.
- When you hover over these words, notice how another list of words opens up. Each of these words are “clickable” – able to be clicked on. Because of this, they are called “Links”.
- Scroll back up to the top of the page. Click on the “For Students” link at the top of the page.
  - Notice that a new list appears on the left.
    Which of the categories of students do you fit into?
    - Grades K-4
    - Grades 5-8
    - Grades 9-12
    - Higher Education
- All of this information that you just hovered over and clicked on was constructed by someone on the web design team. The person who built it is called the “Web Developer”. We will see how the web developer makes this work in this activity.
Organize your own information
- Information can be organized in a variety of ways. As we saw above, you can organize information by creating lists. Let’s do that now.
- Read over this cluster of words: Planets, Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, Galaxy, Comet, Star, Asteroid, Black Hole, Meteor
- Separate these words into to groups – Planets and Galaxy – and write the groups of words on a piece of paper.
- We’re now going to transfer these groups into the computer, and write lists in the program, Notepad.
  - Open Notepad:
  - Type the groups of words into Notepad, each word should be on it’s own line.
  - Save this file on your desktop, titled “planets-galaxy.txt”
- We want the list that we made in Notepad to show up on the web, similar to the list we saw in the student section of NASA’s site. Go back to that link and we’re going to see how that appears on the web browser.
  How do you think we can get our text from Notepad onto the web?
  - A. We can highlight and change the text on an existing website, like we do in Notepad
  - B. We have to make a special function that the web browser will understand
  - C. We send an email to someone else to do it
  - D. We drag and drop the text from Notepad to the web browser
  - ANSWER: The web works differently than Notepad. To get the text to show up on a web browser, we must put the words into a format that the web browser understands. Try highlighting the text and hitting the “DELETE” button on your keyboard:
    Nothing happens. So what IS the format that the web browser understands?
Look underneath a website
- Firebug is an application that will help us see what’s underneath the website that makes the website work. Let’s take a look. Click on the FIREBUG Button in the footer of your web browser, on the bottom right:
  
  The Firebug screen should appear. Your screen is going to look something like this:
- Click on the “Selector” Button. This will allow you to choose one part of the website and look underneath it specifically. The “Selector” button looks like this:
  
  While you have the selector cursor active, hover over each of the “Student” list items. Notice how the code changes on the bottom left. We want our list to appear on the web like the “Students” list, so let’s see what is making that work… Click on the list element when your highlighted area looks like this:
  
  [HELP ITEM]: Are you having trouble with the selector? The selector works like this: if you click it once, your cursor becomes the selector. You can hover over as many items as you’d like, and the selector will find and display the code for those items. Then once you click on one of the items, the selector locks, and your cursor returns to its normal function. Unless you click the selector again, your mouse cursor will act as it normally does. (Watch this movie to see how to use this tool if you’re having trouble.)
- What’s behind that text making it work? To see, hover over the code that is highlighted (it should look like this:
  )
  - Right click the code and select “Edit HTML” from the menu
  - Now highlight and delete the code.
    
    Don’t worry, you’re not changing the site at all. No one but you is seeing these changes. That’s the beauty of this tool, the website changes only happen on your computer and when you turn it off, the site goes back to normal!
  - Undo this by hitting “Ctrl Z”.
- What just happened?? We found the code that controls this portion of the website. The code you just saw is called HTML
- This is the same code we need to make our list show up on the web. So, copy this code and paste it into your .txt document. We’re going to use it in the next step.
- These items in the code are called “TAGS“. For each tag, there’s an OPEN and a CLOSE tag. The content goes inside of the open and close tags. Some example of tags are:
  - <ul></ul>: Unordered List
  - <p></p>: Paragraph
  - <h1></h1>: Header (this is used for titles on the page)
  - <a></a>: Links (this makes text clickable)
  Look at this website here:
  . This is the W3Schools site, it describes the different types of tags in more detail. You can try HTML yourself.
How will the web read your list??
- We’ve now got most of what we need to turn our list into something that a web browser can read. Just needs a little more detail.
- Your “planets.txt” file should be open in Notepad already. If it isn’t, open this file with Notepad: Right Click/Open With/Notepad:
- Now let’s fill in the rest of the detail.
  Notice back on the NASA site that there is another tag that opens and closes around the <li></li> tags. Look back there now to see what that is:
  - A. <ul></ul>: Unordered List
  - B. <p></p>: Paragraph
  - C. <h1></h1>: Header (this is used for titles on the page)
  - D. <a></a>: Links (this makes text clickable)
  ANSWER: A. Unordered list. This code creates a bulleted list. Again, you can put as many list items inside of it as you need.
- The entire thing must be an “unordered list” in HTML language. To do this, write the open tag (<ul>) above the first list beginning with Planets, and write the close tab (</ul>) below the end of the last item in the list.
- We have two groups of lists. Each of the lists must be separated into individual list items. To do this, put an open li tag above the “Planets” list, and a close li tag below the last item in the “Planets” list. Do the same for the “Galaxy”.
- There are lists inside of lists – for example, “Mercury, Venus, Mars…” is a list inside of the “Planets” list. For each list we need an open and close ul tag> This is called an “embedded list”. We’ll now fill in the rest of the tags. Remember that the ones we’re going to use look like this: <ul>, </ul>, <li>, </li>. Your notepad should now look like this:
- When you’re done the code should look like this:
- Hit Save. You just finished writing your first code!
  
  Now test it out. Copy/Paste your text into Try-it editor to see what it looks like: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro (*show video*)
View your list on the web
- Finally, you will save the file into a language that the browser will understand. To do this, we’re going to change the type of file manually.
  - Go to the File Manager from the “Start” menu. Click “My Documents”, then navigate to “Desktop”. Remember that you saved the “planets-galaxy.txt” file on your desktop.
  - In the File Manager, we will change the type of file from “.txt” to “.html”.
    
    [Side Help Note]: Make sure that the file extensions are appearing in your File Manager – the file name should display in full, i.e. “planets-galaxy.txt”, not “planets-galaxy”. If it is not, check your settings – go to Tools/Folder Options. Click on the “View” tab. Make sure that the box to “Hide Extensions…” is unchecked. You will find it here:
    
    You want to rename your file, and you can do this one of two ways. You can Right Click and select “Rename” or click on the file and hit “F2″. When the file name is editable, highlight the extension of the file and change it from “.txt” to “.html”
  Your file can now be read by the web browser, because it is in a format that the web browser can understand (See Terminology Activity to learn more about file formats).
- If everything is right, you will be able to open your file in a web browser. Right click the file and open it in the Firefox browser. It should look like this:
- Next you can design your list, and then arrange more content on your page!