Week 2
Tutorial 2: Web Design – Chapter 4, 6, 7
*Instructions: Please write your answer in a piece of paper. Don’t forget to write your Name, group members, your Class and Date.
1. What is the difference between a tag and an element?
- A tag contains the element name within angle brackets.
- The Element appears in a start and closing tag.
2. Write out the minimal structure of an (X)HTML document.
<html></html>
<head></head>
<title></title>
<body></body>
3. Mark whether each of these file names is an acceptable name for a web document by circling “Yes” or “No”.
If it is not acceptable, provide the reason why.
a) %blablabla.html No Incorrect filename or No percentage symbol allowed.
b) index.docx No Not in html file format
c) kevinhobby.html Yes
If it is not acceptable, provide the reason why.
a) %blablabla.html No Incorrect filename or No percentage symbol allowed.
b) index.docx No Not in html file format
c) kevinhobby.html Yes
d) chasing cars.html No Error filename cause of spacing between it.
e) snow_patrol_lyrics.html Yes
e) snow_patrol_lyrics.html Yes
f) games/rubix.html No Slashes is not allow in the filename
4. All of the following markup examples are incorrect. Describe what is wrong with each one, then write it correctly.
a) <a href=”contact_us”>Contact Us</a href=”contact_us”>
<a href=”contactus.html”>Contact Us</a>
b) <img “HolgaCamera.jpg”>
<a href=”contactus.html”>Contact Us</a>
b) <img “HolgaCamera.jpg”>
<img src=”Holgamanera.jpg”/>
c) <i>where there’s a will there’s a way<i>
c) <i>where there’s a will there’s a way<i>
<i>where there’s a will there’s a way</i>
(d) <p>This is a new paragraph<\p>
(d) <p>This is a new paragraph<\p>
<p>This is a new paragraph</p>
5. How would you mark up this comment in an (X)HTML document so that it doesn’t display in the browser window?
table for production department begins here
<!--table for production department begins here-->
5. How would you mark up this comment in an (X)HTML document so that it doesn’t display in the browser window?
table for production department begins here
<!--table for production department begins here-->
6. What is the difference between a <ul></ul> and an <ol></ol>?
<ul></ul> is Bullet List.
<ul></ul> is Bullet List.
<ol></ol> is Numbering List.
7. The following paragraph is written in incorrect markup and need to be fixed. There will be seven changes, some of them are obvious and some of them are subtle. Fix it.
<font face=arial color=”black” size=’12’><p>Your time is limited, so don’t waste it living someone else’s life.<\fonts>
7. The following paragraph is written in incorrect markup and need to be fixed. There will be seven changes, some of them are obvious and some of them are subtle. Fix it.
<font face=arial color=”black” size=’12’><p>Your time is limited, so don’t waste it living someone else’s life.<\fonts>
Don’t be trapped by <em>dogma<em> – which is living with the results of other people’s thinking.
Don’t let the noise of other’s opinion drown out your own inner voice. And most important, have
the courage to follow your heart and intuition. They somehow already know what you truly want to become.
Everything else is secondary
<em><strong>⎼ Steve Jobs (1955-2011)<strong>
<font face=”arial” color=”black” size=”12”><p>Your time is limited, so don’t waste it living someone else’s life.
Don’t be trapped by <em>dogma</em> – which is living with the results of other people’s thinking.
Don’t let the noise of other’s opinion drown out your own inner voice. And most important, have
the courage to follow your heart and intuition. They somehow already know what you truly want to become.
Everything else is secondary
<em><strong>⎼ Steve Jobs (1955-2011)</strong></em></font></p>
8
Figure 8.1
8(i) In index.html (the site’s home page), write the markup for a link to tutorial.html
<a href=”tutorial.html”>Tutorial</a>
(ii) In index.html, write the anchor element for a link to instructions.html
<a href=”examples/instructions.html”>Link To Instructions</a>
<a href=”tutorial.html”>Tutorial</a>
(ii) In index.html, write the anchor element for a link to instructions.html
<a href=”examples/instructions.html”>Link To Instructions</a>
(iii) Create a link to family.html from the page tutorial.html
<a href=”/examples/kedayan/family.html”>Family</a>
<a href=”/examples/kedayan/family.html”>Family</a>
(iv) Create a link to numbers.html from the family.html page, but this time, start with the root directory.
<a href=”/somesite/examples/chinese/numbers.html”></a>
<a href=”/somesite/examples/chinese/numbers.html”></a>
(v) Create a link back to the homepage (index.html) from the page instructions.html
<a href=”/somesite/index.html”>Back to Homepage</a>
<a href=”/somesite/index.html”>Back to Homepage</a>
(vi) Create a link to instructions.html from the page greetings.html
<a href=”/somesite/examples/instructions.html”>Link to Instructions</a>
(vi) Create a link back to the home page (index.html) from money.html
<a href=”/somesite/index.html”>Back to Homepage</a>
(vi) Create a link back to the home page (index.html) from money.html
<a href=”/somesite/index.html”>Back to Homepage</a>
9. Specify the location of the image files for the following examples:
(i) To place the graphic arrow.gif on the page index.html, the URL is:
<img src=”images/arrow.gif” alt=”Somesite”/>
(ii) To place the graphic arrow.gif on the page intro.html, the tag is:
<img src=”images/arrow.gif” alt=”Introduction”/>
(i) To place the graphic arrow.gif on the page index.html, the URL is:
<img src=”images/arrow.gif” alt=”Somesite”/>
(ii) To place the graphic arrow.gif on the page intro.html, the tag is:
<img src=”images/arrow.gif” alt=”Introduction”/>
10. What might be going wrong if your images don’t appear when you view the page in a browser? There are three key explanations:
- Image not available.
- Image not available.
- Broken link provide.
- Wrong tag provide.
-URL is incorrect, so the browser is lookingin the wrong place or for the wrong filename (name are case-sensitive)
- The image file is not in an acceptable format.
- The image file is not named with the proper suffix (gif, jpg, png)
