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.

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

http://www.creative-writing-now.com/how-to-write-a-haiku.html

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

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

<body>
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?
    </body>
    </html>
  • 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.

home  MED105