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
- you will see 2 folders there, a Common folder and a folder with your name.
- 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
- 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)
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?
- right click on the index.html file and open the web page you just created in a browser
- Start Firefox.
Step 4. Adding an image
- 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.