Laboratory Exercises 1

Laboratory Exercises 1Web pages are designed by using HTML (Hypertext Markup Language.) Today we willplay with some HTML to get a feel for the code involved. In the future, we will useHTML as a framework for our coding projects, so make sure you have a goodunderstanding of what is going on here.There is a lot of good webpage design software out there. Many of these programs will domuch of the programming work for you. However, we will be doing our webpage designin Notepad. This will allow us to see exactly how HTML works and won’t clutter our codewith complicated extras.In this lab, we’re going to write a simple webpage and then make some changes to the codeto see what happens. After each step, leave the changes to your code unless theinstructions tell you to do otherwise. Answer the 20 questions on a separate sheet of paper.You should be able to answer each question with a phrase or a sentence or two. No bigparagraphs needed. Turn in your answers and a printout of the final version of your code.You have until the end of class on Thursday to complete this assignment.Exercise 1: Run the Notepad (or Wordpad) program. Type the following code:This is a testI would use this page to make some money, but nobody would bother to viewit. My instructor says so.Save the document. Take note of the location where the file is being saved (Desktop, MyDocuments, etc). Make sure you change the “Save as type:” box from “Text document” to“All files.” Choose whatever name for your document that you like, but end the file namewith the “.htm” extension. The .htm extension tells the computer to interpret the file asHTML code. For instance, you could call it sample.htmFind the icon for your webpage and double-click it. Congratulations! Your webpageshould open in a browser window.1. Briefly describe what you see in your webpage.2. Where is the text located on your page?

Exercise 2: HTML is a markup language, not a programming language. It uses markuptags to specify the characteristics of your webpage. They usually come in pairs. The firsttag in the pair is the start tag, and the second tag is the end tag. The first tag looks like while the end tag looks like . In our example, everything that is between < >brackets is a tag that is used to mark different components of our page.3. There are four pairs of tags in our example code (for a total of eight tags). What arethey?Different tags tell the computer different things. For instance, the and tags tell the computer that everything between the tags is HTML code. The and tags define the viewable document. Everything between those tags will bedisplayed on the page.4. We’re going to make some formatting changes to your code. Find the words somemoney in your code. Change them to say some money and then save your code.Open the webpage icon or refresh your webpage. What changed?5. Leave the but erase the . Save it again and open (or refresh) the webpage.Now what happened?6. What did the tell the computer?7. Now erase the tag, and this time change the some money text so that your codesays some money. Save and reopen the page. Now what happened?Exercise 3: HTML doesn’t necessarily format your page the way you think it would.8. Try the following: Insert several (like 10 or so) spaces after the word page. Save, open.What happened?9. Erase the extra spaces. Instead of spaces, hit the “Enter” key several times after theword page to drop the rest of the sentence down several lines. Save, Open the page. Whathappened?10. Erase the extra “enters.” Instead of spaces or enter keys, type after the wordpage. Save, open the icon. What happened?11. How is the tag different from other tags we have seen?12. What can we learn about formatting from this exercise?

Exercise 4: Start tags (not end tags) can have attributes. Attributes specify someparameter about the tag. They are written in the form: attribute=”value”. The valueshould always be enclosed in quotes. There are many different attributes, but not allattributes are valid for every tag. Consult a good HTML reference book or website for acomplete list of attributes.13. Let’s see an example of how they work. Find the spot in the code that says .Change it to say . Save your code. Openthe page. What happened?Exercise 5: Images are created by using another common tag. They have at least oneattribute, if not several. Somewhere between the and tags, type thefollowing code:14. Save your code and open the page. What happened?15. What would happen if you put the new code somewhere else, but still between the and tags? What would happen if the new code was not between the bodytags?16. Notice how the tag doesn’t have a end tag. Also notice that the tag hastwo attributes listed, src and alt. What do you think the first attribute (src) does?17. The second attribute (alt) is actually optional. Notice how the two attributes areseparated by a space. What do you think the alt attribute does?Exercise 6: The hyperlink (or simply link) is another common webpage feature that iscreated using tags. In this case, we use the anchor tags and .18. Find the words My instructor in your code. Change it to say:My instructor Save it and refresh.What happened?19. What does the href attribute define?20. How do I know what text in my webpage will be turned into a hyperlink?