Web Design Project 1: HTML Coding Basics
For this project, please do the following:
a) Create a new folder named "yourname_project 1", put another folder into this folder called "root".
b) Create another folder called "images", and put it in the root folder. Put a picture (.jpeg) in this folder.
c) Using Textwrangler (NOT textedit!), create three new html pages called: "index.html", "pictures.html", and
"aboutme.html".
d) Code the pages with opening and closing html, head, title, and body tags.
e) On index.html page, make 2 links to the other two pages, then link the other two back to the index (or home page)
using the <a href...> element tags. Then put three related pictures into your images folder, and place them aligned
together using the following code:
<figure>
<img src="images/pic1.jpg" alt="describe pic1">
<img src="images/pic2.jpg" alt="describe pic2">
<img src="images/pic3.jpg" alt="describe pic3">
<figcaption>These are pictures of something. From left to right, a thing, something else, and some stuff. Pictures by<a
href="http://www.flickr.com/photos/yourflickr/">your name</a></figcaption>
</figure>
f) On the pictures page, put at least two pictures with captions using the following "figure" element:
<figure>
<img src="images/yourpicture.jpg" alt="describe your picture here">
<figcaption>Put a caption here that will appear under your picture.</figcaption>
</figure>
g) On the aboutme page, use an <h3></h3> heading to start an unordered list of things (that you like, don't like, are afraid of, etc.
The list will look like this:
<h3>These are the things I like:</h3>
<ul>
<li>coins</li>
<li>bass fishing</li>
<li>bayonets</li>
</ul>
h) Using the <p> element, write a short autobiography of your life so far. Three or four sentences will be fine. Utilize the <strong>
and <em> elements somewhere in it.
i) Finish up the site by saving all of your pages, make sure everything works in a browser, fix and bugs, and place the folder
into the artshare folder under 2013-2014 > yutkins > web design > project_1.
j) Pat yourself on the back, you just handcoded an entire website in html.
k) Sigh in relief...
a) Create a new folder named "yourname_project 1", put another folder into this folder called "root".
b) Create another folder called "images", and put it in the root folder. Put a picture (.jpeg) in this folder.
c) Using Textwrangler (NOT textedit!), create three new html pages called: "index.html", "pictures.html", and
"aboutme.html".
d) Code the pages with opening and closing html, head, title, and body tags.
e) On index.html page, make 2 links to the other two pages, then link the other two back to the index (or home page)
using the <a href...> element tags. Then put three related pictures into your images folder, and place them aligned
together using the following code:
<figure>
<img src="images/pic1.jpg" alt="describe pic1">
<img src="images/pic2.jpg" alt="describe pic2">
<img src="images/pic3.jpg" alt="describe pic3">
<figcaption>These are pictures of something. From left to right, a thing, something else, and some stuff. Pictures by<a
href="http://www.flickr.com/photos/yourflickr/">your name</a></figcaption>
</figure>
f) On the pictures page, put at least two pictures with captions using the following "figure" element:
<figure>
<img src="images/yourpicture.jpg" alt="describe your picture here">
<figcaption>Put a caption here that will appear under your picture.</figcaption>
</figure>
g) On the aboutme page, use an <h3></h3> heading to start an unordered list of things (that you like, don't like, are afraid of, etc.
The list will look like this:
<h3>These are the things I like:</h3>
<ul>
<li>coins</li>
<li>bass fishing</li>
<li>bayonets</li>
</ul>
h) Using the <p> element, write a short autobiography of your life so far. Three or four sentences will be fine. Utilize the <strong>
and <em> elements somewhere in it.
i) Finish up the site by saving all of your pages, make sure everything works in a browser, fix and bugs, and place the folder
into the artshare folder under 2013-2014 > yutkins > web design > project_1.
j) Pat yourself on the back, you just handcoded an entire website in html.
k) Sigh in relief...
