Ex1: Intro Haiku

Exercise 1: Introduction to HTML (Haiku)

Step 1. Setting up your K: drive space

  • Use Windows Explorer or the Mac Dock to navigate to the K: drive
  • Open the MED_105 folder (K: –>Fa17–>med105)
    • you will see 2 folders there, a Common folder and a folder with your name.
      • the common folder is a read only folder where I will store files and media for you to use
  • Select the folder with your name
    • create 4 new folders in your directory
    • name them: Exercises, Projects, FinalExam and FinalWeb

Step 2. Learning simple HTML

  • Open the HTML tutorialLink to 3Schools:https://www.w3schools.com/html/html_intro.asp(link on the left column of the course homepage or your syllabus)
    • study the tutorials (look at at least 4 of the tutorials, you will find yourself referring to this site over the course of this class)
      • these tutorials will help you learn how to write and debug your pages
    • when you are comfortable move on to step 3

Step 3. Creating your fist web page

  • Create a new folder named ex1-HTML in your new Labs folder on the K drive
  • Open a text editor such as (Mac: Sublime Text or Text Wrangler – do not use MS Word!)) (Windows: MS Notepad++ or MS Wordpad -do not use MS Word!)
  • Write your own simple haiku about technology, the weather, your dog, anything you wish. Use Notepad, Sublime Text, or similar software.
  • Traditionally, haiku is written in three lines, with five syllables in the first line, seven syllables in the second line, and five syllables in the third line.

The last winter leaves
Clinging to the black branches
Explode into birds.


Type the following into the editor exactly as it appears below:

<head><title> MY HAIKU </title>

Text typed here will appear on your web page.
This is my first haiku. <br>

  • .Place your haiku in this spot.<br>
    Did it appear?
  • Save the file as index.htm in the new ex1-HTML folder.
  • Keep your editor running.
    • Start Firefox.
      • right click on the index.html file and open the web page you just created in a browser
        • use the open option in the menu
      • what do you notice about the page? Is it laid out as you expected? Why isn’t it?

Step 4. Adding an image

2017 Eclipse


  • control click/right click on the image above and Save As: Eclipse2017.jpg in the ex1-HTML folder of your K drive.
  • place the following code into the body of your document before Did it appear?  
  • <img src=”Eclipse2017.jpg”>
  • insert tags: <h1> in front of Did it appear? and </h1> after
  • Save your file and test it in a browser.

Step 5: Adding links

  • add the following line of code to the body:<a href=”https://www.nasa.gov/”> Go to NASA’s homepage</a>

Step 6: Explore

  • try to implement more of the tags from the Basic HTML link on my homepage or from the tutorial
  • Look at the <p></p> paragraph tags.

Step 6: Sit back and smile. You just created your first webpage.