Creating basic web page using HTML & CSS
Theresacobb
Creating basic web page using HTML & CSS
2 years ago
15
files (5)HTML_Lab_Instruction.docx
HTML_Lab_Source.html
HTML_Lab_solution.pdf
- Pyramid.jpg
- Sahara.jpg
HTML_Lab_Instruction.docx
Backround information:
1. Download all files from Brightspace to your local computer
2. You will modify ‘HTML_Lab_Source.html’ according to this instruction. The completed the web page shown as the below.
3. Open ‘HTML_Lab_Source.html’ with Notepad when you edit the file. If you double click on the file to open, it will open the file with your default web browser (ie Google Chrome).
4. Compare your file (HTML_Lab_Source.html) with the solution file (HTML_Lab_Solution.pdf )
HTML-Lab Instruction
1. Begin the body section by adding an h1 heading that is left-aligned (WORLD TRAVEL)
2. Add the following code into an embedded style
|
body {font-family: Arial, Verdana, Garamond; font-size: 11pt;}
h1, h2, h3 {color: Blue;}
a {color: black;}
a:hover {background: #19212d; color: white;}
img.align-right {float: right; margin-left: 10px; margin-right: 10px;}
img.align-left {float: left; margin-left: 10px; margin-right: 10px;} |
3. Add an unordered list with the two list items, Pyramid and Sahara. These two items will be used to link to the two sections of text below them
4. Add an inline style sheet changing the first three words, “World Travel, Inc.”, of the first paragraph to be color “Red” and font-weight of bold. ( Hint: Use the <span></span> container)
5. Add the two images provided and apply class for each. (pyramid: 320x250 alt: Pyramid, sahara: 260x380 alt: Sahara)
6. Create a link target at the top of the page named top.
7. Add two “To top” links, one after each section. Set the link to direct to the top target at the top of the page. Format font size small
8. Create two link target at each section, Pyramid and Sahara.
9. Create links from the bulleted list to the two targets.
10. Create an e-mail link at the last paragraph.
image1.png
HTML_Lab_Source.html
World Travel, Inc. has the distinguished honor of being ranked the 4th largest independently-owned, US based Travel Management Company by BTN Magazine in 2012. We’ve achieved this level of prestige without mergers or acquisitions; World Travel, Inc. has grown organically since its inception in 1983. We focus on mid-market clients – those with annual travel spend between $100,000 and $30 million, regionally – allowing us to create targeted but individualized plans for each organization. We provide our clients with superior customer service, technology and customization to meet their business needs. This focus has helped us establish an unusually high client retention rate of over 98 percent.
Things to see:
Whether planning business travel for your company or leisure travel for your vacation, we have the resources to support your needs. If you want your travel dollars to go further in an era of rising costs and meaningless interactions, we want to talk to you. We pride ourselves on cultivating and preserving genuine relationships with our people, clients, and partners by proactively investing in their success.
Our leisure travel agents have a combined travel industry experience of over 100 years with extensive product knowledge on any destination! Take the stress out of your vacation planning by letting us research and book your perfect vacation. We can manage all the details of your vacation. Let us also arrange your golf tee times, theatre tickets and day tours. Our agents will match any price. Whether it is a quick getaway, cruise to the Mediterranean or an adventure in Costa Rica let us find the right vacation for you.
Pyramid
A pyramid (from Greek: πυραμίς pyramis)[1][2] is a structure whose outer surfaces are triangular and converge to a single point at the top, making the shape roughly a pyramid in the geometric sense. The base of a pyramid can be trilateral, quadrilateral, or any polygon shape, meaning that a pyramid has at least three outer triangular surfaces (at least four faces including the base). The square pyramid, with square base and four triangular outer surfaces, is a common version.
A pyramid's design, with the majority of the weight closer to the ground,[3] and with the pyramidion on top means that less material higher up on the pyramid will be pushing down from above. This distribution of weight allowed early civilizations to create stable monumental structures.
Sahara
The Sahara (Arabic: الصحراء الكبرى, aṣ-Ṣaḥrāʾ al-Kubrā , 'the Great Desert') is the largest subtropical hot desert and third largest desert after Antarctica and the Arctic.[1] At over 9,400,000 square kilometres (3,600,000 sq mi), it covers most of North Africa, and is nearly the area of China or the United States. The Sahara stretches from the Red Sea in the east, including parts of the Mediterranean, to the Atlantic Ocean in the west. To the south, it is delimited by the Sahel, a belt of semi-arid tropical savanna that composes the northern region of central and western Sub-Saharan Africa.
The Sahara's boundaries are the Atlantic Ocean on the west, the Atlas Mountains and the Mediterranean on the north, the Red Sea on the east, and the Sudan and the valley of the Niger River on the south. The Sahara is divided into western Sahara, the central Ahaggar Mountains, the Tibesti Mountains, the Aïr Mountains (a region of desert mountains and high plateaus), Ténéré desert and the Libyan Desert (the most arid region). The highest peak in the Sahara is Emi Koussi (3,415 metres (11,204 ft)) in the Tibesti Mountains in northern Chad.
The Sahara is the largest desert on the African continent. The southern border of the Sahara is marked by a band of semiarid savanna called the Sahel; south of the Sahel lies Southern Sudan and the Congo River Basin. Most of the Sahara consists of rocky hamada; ergs (large areas covered with sand dunes) form only a minor part.
<These pictures show just a sample of the many beautiful sights that you can do see while enjoying your travel.
To book your own trip, please call us at (999) 555-TIERRA or e-mail us at [email protected]. If you use e-mail, please include the following information: (1) your address and phone number, (2) a list of your favorite hiking activities, and (3) a few days and times that are convenient for us to contact you. We will respond with an e-mail message when we receive your request.
HTML_Lab_solution.pdf
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Midterm SP15</title>
<style type="text/css">
<!--
body {font-family: Arial, Verdana, Garamond;
font-size: 11pt;}
h1, h2, h3 {color: #19212d;}
a {color: black;}
a:hover {background: #19212d;
color: white;}
img.align-right {float: right;
margin-left: 5px;
margin-right: 5px;}
img.align-left {float: left;
margin-left: 5px;
margin-right: 5px;}
-->
</style>
</head>
<body>
<a id="top"></a>
<header>
<h1>WORLD TRAVEL</h1>
</header>
<p><span style="color: #19212d; font-weight: bold">World Travel,
Inc.</span> has the distinguished honor of being ranked the 4th
largest independently-owned, US based Travel Management Company by BTN
Magazine in 2012. We’ve achieved this level of prestige without
mergers or acquisitions; World Travel, Inc. has grown organically
since its inception in 1983. We focus on mid-market clients – those
with annual travel spend between $100,000 and $30 million, regionally
– allowing us to create targeted but individualized plans for each
organization. We provide our clients with superior customer service,
technology and customization to meet their business needs. This focus
has helped us establish an unusually high client retention rate of
over 98 percent. </p>
<h2>Things to see:</h2>
<ul style="list-style-type: square">
<li><a href="#pyramid">Pyramid</a></li>
<li><a href="#sahara">Sahara</a></li>
</ul>
<p>Whether planning business travel for your company or leisure travel
for your vacation, we have the resources to support your needs. If
you want your travel dollars to go further in an era of rising costs
and meaningless interactions, we want to talk to you. We pride
ourselves on cultivating and preserving genuine relationships with our
people, clients, and partners by proactively investing in their
success.</p>
<p>Our leisure travel agents have a combined travel industry
experience of over 100 years with extensive product knowledge on any
destination! Take the stress out of your vacation planning by letting
us research and book your perfect vacation. We can manage all the
details of your vacation. Let us also arrange your golf tee times,
theatre tickets and day tours. Our agents will match any price.
Whether it is a quick getaway, cruise to the Mediterranean or an
adventure in Costa Rica let us find the right vacation for you.</p>
<a id="pyramid"></a>
<h3>Pyramid</h3>
<p><img class="align-left" src="pyramid.jpg" width="320" height="250"
alt="Pyramid" /></p>
<p><span style="color:Blue; Font-weight:Bold">A pyramid </span>(from
Greek: πυ�αμίς pyramis)[1][2] is a structure whose outer
surfaces are triangular and converge to a single point at the top,
making the shape roughly a pyramid in the geometric sense. The base of
a pyramid can be trilateral, quadrilateral, or any polygon shape,
meaning that a pyramid has at least three outer triangular surfaces
(at least four faces including the base). The square pyramid, with
square base and four triangular outer surfaces, is a common
version.</p>
<p>A pyramid's design, with the majority of the weight closer to the
ground,[3] and with the pyramidion on top means that less material
higher up on the pyramid will be pushing down from above. This
distribution of weight allowed early civilizations to create stable
monumental structures.</p>
<br style="clear: left" />
<p><a href="#top"><span style="font-size: small">To top</span></a></p>
<a id="sahara"></a>
<h3>Sahara</h3>
<p><img class="align-right" src="sahara.jpg" width="259" height="387"
alt="View of Valley" /></p>
<p><span style="color:Blue; Font-weight:Bold">The Sahara</span>
(Arabic: الصØراء الكبرى‎, aá¹£-á¹¢aḥrĕʾ al-
Kubr� , 'the Great Desert') is the largest subtropical hot desert
and third largest desert after Antarctica and the Arctic.[1] At over
9,400,000 square kilometres (3,600,000 sq mi), it covers most of North
Africa, and is nearly the area of China or the United States. The
Sahara stretches from the Red Sea in the east, including parts of the
Mediterranean, to the Atlantic Ocean in the west. To the south, it is
delimited by the Sahel, a belt of semi-arid tropical savanna that
composes the northern region of central and western Sub-Saharan
Africa.</p>
<p>The Sahara's boundaries are the Atlantic Ocean on the west, the
Atlas Mountains and the Mediterranean on the north, the Red Sea on the
east, and the Sudan and the valley of the Niger River on the south.
The Sahara is divided into western Sahara, the central Ahaggar
Mountains, the Tibesti Mountains, the Aïr Mountains (a region of
desert mountains and high plateaus), Ténéré desert and the Libyan
Desert (the most arid region). The highest peak in the Sahara is Emi
Koussi (3,415 metres (11,204 ft)) in the Tibesti Mountains in northern
Chad. </p>
<p>The Sahara is the largest desert on the African continent. The
southern border of the Sahara is marked by a band of semiarid savanna
called the Sahel; south of the Sahel lies Southern Sudan and the Congo
River Basin. Most of the Sahara consists of rocky hamada; ergs (large
areas covered with sand dunes) form only a minor part.</p>
<br style="clear: right" />
<p><a href="#top"><span style="font-size: small">To top</span></a></p>
<p>These pictures show just a sample of the many beautiful sights that
you can do see while enjoying your travel.</p>
<p>To book your own trip, please call us at (999) 555-TIERRA or e-mail
us at
<a href="mailto:[email protected]">[email protected]</a>. If you use
e-mail, please
include the following information: (1) your address and phone number,
(2) a list of your favorite hiking activities, and (3) a few days and
times that are convenient for us to contact you. We will respond with
an e-mail message when we receive your request.</p>
</body>
</html>
HTML_Lab_Instruction.docx
Backround information:
1. Download all files from Brightspace to your local computer
2. You will modify ‘HTML_Lab_Source.html’ according to this instruction. The completed the web page shown as the below.
3. Open ‘HTML_Lab_Source.html’ with Notepad when you edit the file. If you double click on the file to open, it will open the file with your default web browser (ie Google Chrome).
4. Compare your file (HTML_Lab_Source.html) with the solution file (HTML_Lab_Solution.pdf )
HTML-Lab Instruction
1. Begin the body section by adding an h1 heading that is left-aligned (WORLD TRAVEL)
2. Add the following code into an embedded style
|
body {font-family: Arial, Verdana, Garamond; font-size: 11pt;}
h1, h2, h3 {color: Blue;}
a {color: black;}
a:hover {background: #19212d; color: white;}
img.align-right {float: right; margin-left: 10px; margin-right: 10px;}
img.align-left {float: left; margin-left: 10px; margin-right: 10px;} |
3. Add an unordered list with the two list items, Pyramid and Sahara. These two items will be used to link to the two sections of text below them
4. Add an inline style sheet changing the first three words, “World Travel, Inc.”, of the first paragraph to be color “Red” and font-weight of bold. ( Hint: Use the <span></span> container)
5. Add the two images provided and apply class for each. (pyramid: 320x250 alt: Pyramid, sahara: 260x380 alt: Sahara)
6. Create a link target at the top of the page named top.
7. Add two “To top” links, one after each section. Set the link to direct to the top target at the top of the page. Format font size small
8. Create two link target at each section, Pyramid and Sahara.
9. Create links from the bulleted list to the two targets.
10. Create an e-mail link at the last paragraph.
