top of page
  • Facebook
  • Twitter
  • Instagram

HTML1

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Evan's HTML page</title>

</head>

<body>

<h1>Exercise 1</h1>

Welcome to Evan's HTML Page <b>Hello!</b>

<h2>School schedule and Holiday life</h2>

 

<p>

This page is about my daylife and the school schedule. Also has some photo about what did I do in my winter break.

In my winter break, I went to Cypress mountain to snowboard for 8 hours.

And I made my semester 2 schedule in here.

</p>

 

<p>

This is a link tag

<a href="https://manage.wix.com/dashboard/65f1c02a-19fa-4d2c-9f55-73096d80da93/setup?referralInfo=sites-dropdown">

The a is the tag. Herf is the hyperlink reference.

</a>

<br>

<a herf="https://manage.wix.com/dashboard/65f1c02a-19fa-4d2c-9f55-73096d80da93/setup?referralInfo=sites-dropdown" target="_blank">

The lnk will open in a new webpage.

</a>

<br>

</p>

<br>

<h3>This image is about Cypress mountain</h3>

<img src="Night.jpeg" alt="Night" width="400" height="400" border="10">

 

<br>

<br>

<br>

<h3>stationary</h3>

<ul>

 

<li>Paper

<ul>

<li>white</li>

</ul>

</li>

<li>Pen</li>

<ul>

<li>black</li>

<li>red</li>

<li>blue</li>

</ul>

<li>Ruler</li>

<li>Eraser</li>

<li>Pencil</li>

<li>Correction tape</li>

</ul>

<br>

<ol>

<li>Paper</li>

<li>Pen</li>

<li>Ruler</li>

<li>Eraser</li>

<li>Pencil</li>

<li>Correction tape</li>

</ol>

 

<table border="10" cellpadding="10" cellspacing="10">

 

<tr>

<th>Sunday</th>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>

<th>Friday</th>

<th>Saturday</th>

</tr>

<tr>

<td rowspan="4">Subject</td>h

<td>Computer progamming</td>

<td>Computer progamming</td>

<td>Computer progamming</td>

<td>Computer progamming</td>

<td>Computer progamming</td>

<td>Computer progamming</td>

</tr>

 

<tr>

<td>CLE 11</td>

<td>CLE 11</td>

<td>CLE 11</td>

<td>CLE 11</td>

<td>CLE 11</td>

<td>CLE 11</td>

</tr>

<tr>

<td>Chemistry 11</td>

<td>Chemistry 11</td>

<td>Chemistry 11</td>

<td>Chemistry 11</td>

<td>Chemistry 11</td>

<td>Chemistry 11</td>

</tr>

<tr>

<td>English 11</td>

<td>English 11</td>

<td>English 11</td>

<td>English 11</td>

<td>English 11</td>

<td>English 11</td>

</tr>

</table>

HTML2

</>Html

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charest="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>The view of Cypress mountain</title>

<h1>Exercise 2</h1>

 

<style>

body {ß

margin: 0 ;

font-family: Georgia, serif;

background-color:- #dcdcdc;

color: #000;

}

 

.container {

width: 100%;

max-width: 1000px;

margin: auto;

padding: 20px;

}

 

header h1 {

color:aqua;

font-size: 28px;

margin-bottom: 0;

}

 

header p {

color:blue;

font-style: italic;

margin-top: 5px;

}

 

h2 {

margin-top: 30px;

font-size: 18px;

}

 

.gallery {

display: grid;

grid-template-columns: repeat(3,1fr);

gap: 20px;

margin-top: 10px;

margin-bottom: 30px;

}

 

.gallery img {

width: 125%;

height: 300px;

object-fit: cover;

border-radius: 5px;

box-shadow: 0 4px 8px rgba(o,o,o,o.2);

}

 

.ingredients {

margin-bottom: 10px;

}

.ingredients h3 {

margn-bottom: 10px;

}

 

.ingredients ul {

padding-left: 20px;

line-height: 1.6;

}

 

@media (max-width: 768px) {

.gallery {

grid-template-columns: 1fr;

}

}

</style>

</head>

<body>

<div class="container">

 

<header>

<h1> The different of a view</h1>

<p> Cypress mountain's afternoon and night view</p>

</header>

 

<h2>Afternoon view</h2>

<div class="gallery">

<img src="Afternoon 1.jpeg" alt="Afternoon view 1">

<img src="Afternoon 2.jpeg" alt="Afternoon view 2">

<img src="Afternoon 3.jpeg" alt="Afternoon view 3">

</div>

 

<h2>Night view</h2>

<div class="gallery">

<img src="Night 1.jpeg" alt="Night view 1">

<img src="Night 2.jpeg" alt="Night view 2">

<img src="Night 3.jpeg" alt="Night view 3">

</div>

<h3>About the viewpoint</h3>

<ul>

<li>All of the afternoon view photo, I was taking in the hightest point of Cypress mountain</li>

<li>I also eat the lunch in there</li>

<li>For the night view, I was taking in the middle of the snowboard road</li>

<li>It's very dangerous of taking the afternoon view photo, when I took those photo, my snowboard shoe was broken.</li>

<li>Because the ramp is too steep</li>

</ul>

<br>

 

<table border="10" cellpadding="10" cellspacing="10">

 

<tr>

<th>Recomand %</th>

<th>Dangerous %</th>

<th>Pretty</th>

<th>Sport</th>

</tr>

 

<tr>

<td>60%</td>

<td>70%</td>

<td>Very pretty, the view is very nice</td>

<td>Snowboard and ski</td>

</tr>

</table>

</div>

</body>

</html>

HTML3

Index Page

<> index1.html>....

 

<!DOCTYPE html>

<html>

<head>

<meta charest="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Evan's Turkey trip introduce page</title>

<link rel="stylesheet" href="style.css">

 

<style>

body {

margin: 0;

font-family: Georgia, serif;

background-color:beige;

}

 

body h1 {

color:rgb(108, 183, 229);

font-size: 28px;

margin-bottom: 0;

}

 

body h3 {

color:cornflowerblue;

font-size: 28px;

margin-bottom: 0;

}

 

body p {

color:deepskyblue;

font-style:italic;

margin-top: 5px;

}

body h1 {

padding: 20px;

}

body h3 {

padding: 20px;

}

body p {

padding: 20px;

}

body img {

padding: 20px;

}

</style>

</head>

<body>

<h1>Evan's Page</h1>

 

<nav class="navbar">

<ul>

<li><a href="index1.html">Mediterranean Coast</a></li>

<li><a href="about.html">Kas</a></li>

<li><a href="news.html">Ephesus</a></li>

<li><a href="contact.html">Pamukkale</a></li>

</ul>

</nav>

<main>

<h3>The Mediterranean Coast in Turkey </h3>

<p>

This photo shows the beautiful coast of Turkey with very clear blue water.

<br>

The beach looks peaceful, and the small rocks near the shore can be seen through the water.

<br>

I like how calm and clean this place looks, especially with the mountains in the background.

<br>

It gives a relaxing feeling and shows why so many people visit Turkey for its beaches.

<br>

This view is a good example of the natural beauty of the country. </p>

<img src="Mediterranean Coast.jpeg" alt="View" width="500" height="450" >

<br>

<table border="10" cellpadding="10" cellspacing="10">

 

<tr>

<th>Recomand %</th>

<th>Dangerous %</th>

<th>Reason</th>

</tr>

 

<tr>

<td>90%</td>

<td>0%</td>

<td>The view is very pretty and nice</td>

</tr>

</main>

</body>

</html>

About

<> about.html

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Evan's Turkey trip introduction page</title>

<link rel="stylesheet" href="style.css">

 

<style>

 

body {

margin: 0;

font-family: Georgia, serif;

background-color: aliceblue;

}

 

body h1 {

color:darkolivegreen;

font-size: 28px;

margin-bottom: 0;

}

 

body h3 {

color:darkseagreen;

font-size: 28px;

margin-bottom: 0;

}

 

body p {

color:darkgreen;

font-style:italic;

margin-top: 5px;

}

body h1 {

padding: 20px;

}

body h3 {

padding: 20px;

}

body p {

padding: 20px;

}

body img {

padding: 20px;

}

</style>

</head>

<body>

<h1>Evan's page</h1>

 

<nav class="navbar">

<ul>

<li><a href="index1.html">Mediterranean Coast</a></li>

<li><a href="about.html">Kas</a></li>

<li><a href="news.html">Ephesus</a></li>

<li><a href="contact.html">Pamukkale</a></li>

</ul>

</nav>

<main>

<h3>Kas</h3>

<p>

This picture shows the town of Kaş, a small coastal town in Turkey.

<br>

From this view, you can see the red roofs, the harbor, and the islands in the water.

<br>

I think the town looks very quiet and beautiful because it is surrounded by both the sea and the mountains.

<br>

It seems like a nice place for people to walk around and enjoy the scenery. Kaş is known as a popular place for tourists because of its views and peaceful atmosphere.

 

</p>

<img src="Kas.jpeg" alt="View" width="500" height="450" >

<br>

 

<table border="10" cellpadding="10" cellspacing="10">

 

<tr>

<th>Recomand %</th>

<th>Dangerous %</th>

<th>Reason</th>

</tr>

 

<tr>

<td>80%</td>

<td>0%</td>

<td>In here, you can feel very relaxing and everything's price is very cheap</td>

</tr>

</main>

</body>

</html>

NEW

<> news.html

 

<!OCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" cotent="width=device-width, initial-scale=1">

<title>Evan's Turkey trip introdution page</title>

<link rel="stylesheet" href="style.css">

 

<style>

body {

margin: 0;

font-family: Georgia, serif;

background-color:azure

}

 

body h1 {

color:gold;

font-size: 28px;

margin-bottom: 0;

}

 

body h3 {

color:khaki;

font-size: 28px;

margin-bottom: 0;

}

 

body p {

color:goldenrod;

font-style:italic;

margin-top: 5px;

}

body h1 {

padding: 20px;

}

body h3 {

padding: 20px;

}

body p {

padding: 20px;

}

body img {

padding: 20px;

}

 

</style>

</head>

<body>

<h1>Evan's Page</h1>

 

<nav class="navbar">

<ul>

<li><a href="index1.html">Mediterranean Coast</a></li>

<li><a href="about.html">Kas</a></li>

<li><a href="news.html">Ephesus</a></li>

<li><a href="contact.html">Pamukkale</a></li>

</ul>

</nav>

 

<main>

<h3> Ephesus </h3>

<p>

This photo shows the Library of Celsus in Ephesus, which is one of the most famous ancient sites in Turkey.

<br>

The building has large columns and detailed stone carvings that show how impressive Roman architecture was.

<br>

Even though it is very old, it still looks strong and beautiful today.

</p>

<img src="Ephesus.jpeg" alt="View" width="500" height="450" >

 

<br>

<table border="10" cellpadding="10" cellspacing="10">

 

<tr>

<th>Recomand %</th>

<th>Dangerous %</th>

<th>Reason</th>

</tr>

 

<tr>

<td>20%</td>

<td>0%</td>

<td>It's very boring, and the ticket is too expensive</td>

</tr>

</main>

</body>

</html>

Contact.HTML

​

<> contact.html

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Evan's Turkey trip introduction page</title>

<link rel="stylesheet" href="style.css">

 

<style>

body {

margin: 0;

font-family: Georgia, serif;

background-color:beige;

}

 

body h1 {

color:darkred;

font-size: 28px;

margin-bottom: 0;

}

 

body h3 {

color:red;

font-size: 28px;

margin-bottom: 0;

}

 

body p {

color:crimson;

font-style:italic;

margin-top: 5px;

}

body h1 {

padding: 20px;

}

body h3 {

padding: 20px;

}

body p {

padding: 20px;

}

body img {

padding: 20px;

}

</style>

</head>

<body>

<h1>Evan's Page</h1>

 

<nav class="navbar">

<ul>

<li><a href="index1.html">Mediterranean Coast</a></li>

<li><a href="about.html">Kas</a></li>

<li><a href="news.html">Ephesus</a></li>

<li><a href="contact.html">Pamukkale</a></li>

</ul>

</nav>

 

<main>

<h3>Pamukkale in Turkey</h3>

<p>

This picture shows Pamukkale, which is one of the most famous places in Turkey.

<br>

The white surface looks almost like snow, but it is actually made from minerals left behind by hot spring water.

<br>

I think this place looks very special because it does not look like normal land at all.

<br>

It is beautiful, bright, and very different from other natural places. Pamukkale is important because it is both a natural wonder and a tourist attraction in Turkey.

 

</p>

<img src="Pamukkale.jpeg" alt="View" width="500" height="450" >

 

<img src="Pamukkale 1.jpeg" alt="View" width="500" height="450" >

<br>

 

<table border="10" cellpadding="10" cellspacing="10">

 

<tr>

<th>Recomand %</th>

<th>Dangerous %</th>

<th>Reason</th>

</tr>

 

<tr>

<td>30%</td>

<td>0%</td>

<td>This place is also very boring and also very hot, but you can soak your feet in here, the water is very clean.</td>

</tr>

</main>

</body>

</html>

Index quiz

Index.HTML

!DOCTYPE html>

<html>

<head>

<title>Vancouver Aquarium </title>

</head>

<body style="font-family: Arial; background-color: lightblue; margin: 0;">

 

<div style="background-color: #0077b6; color: white; text-align: center; padding: 20px; border-bottom: 3px solid navy;">

<h1>Vancouver Aquarium</h1>

<p><i>A fun place to learn about sea animals and ocean life</i></p>

</div>

 

<div style="background-color: #caf0f8; text-align: center; padding: 10px; border-bottom: 2px solid #0077b6;">

<a href="index.HTML" style="margin: 10px; color: darkblue;"><b>Home</b></a>

<a href="Ticket.HTML" style="margin: 10px; color: darkblue;"><b>Tickets and Membership</b></a>

<a href="Experience.HTML" style="margin: 10px; color: darkblue;"><b>Exhibit and experience</b></a>

</div>

 

<div style="padding: 20px;">

 

<h2>Welcome</h2>

<img src= Aquarium.jpeg alt="Aquarium" width="700" border="3">

<p>

The <b>Vancouver Aquarium</b> is one of the most popular places to visit in Vancouver.

People can see many sea animals, learn more about the ocean, and enjoy different exhibits.

It is a great place for <u>families, students, and tourists</u>.

</p>

 

<hr>

 

<h2>Featured Exhibits</h2>

<ul>

<li>Pacific Canada Pavilion</li>

<li>Tropical Zone</li>

<li>Jellyfish Display</li>

<li>Marine Mammal Area</li>

</ul>


 

<h2>Popular Areas</h2>

<table border="2" cellpadding="8" cellspacing="0" style="background-color: white;">

<tr style="background-color: #90e0ef;">

<th>Exhibit</th>

<th>Main Animals</th>

<th>Why visit</th>

</tr>

<tr>

<td>Pacific Zone</td>

<td>Jellyfish, sea stars, Axolotl</td>

<td>It shows local ocean life</td>

</tr>

<tr>

<td>Tropical Zone</td>

<td>colorful fish</td>

<td>It is bright and interesting</td>

</tr>

<tr>

<td>Marine Mammals</td>

<td>Sea otters</td>

<td>It is one of the most popular areas</td>

</tr>

</table>


 

<img src= Inside.jpeg alt="inside the aquarium" width="275" height="200" border="3">

<img src= Seaotter2.jpeg alt="Seaotter" width="275" height="200" border="3">

<img src=Animal.jpeg alt="Sea animal" width="275" height="200" border="3">

 

</div>

 

<div style="background-color: #0077b6; color: white; text-align: center; padding: 15px; margin-top: 20px;">

<p></p>

</div>

 

</body>

</html>

Ticket and membership

​

<!DOCTYPE html>

<html>

<head>

<title>Vancouver Aquarium Tickets</title>

</head>

<body style="font-family: Arial; background-color: #e6f7ff; margin: 0;">

 

<div style="background-color: #0096c7; color: white; text-align: center; padding: 20px; border-bottom: 3px solid navy;">

<h1>Tickets and Membership</h1>

<p><i>Plan your visit to the Vancouver Aquarium</i></p>

</div>

 

<div style="background-color: #caf0f8; text-align: center; padding: 10px; border-bottom: 2px solid #0077b6;">

<a href="index.HTML" style="margin: 10px; color: darkblue;"><b>Home</b></a>

<a href="Ticket.HTML" style="margin: 10px; color: darkblue;"><b>Tickets and Membership</b></a>

<a href="Experience.HTML" style="margin: 10px; color: darkblue;"><b>Exhibit and experience</b></a>

</div>

 

<div style="padding: 20px;">

 

<h2>Visit Information</h2>

<img src=Tickets.jpeg alt="Visitors" width="700" border="3">

<p>

Visitors can buy tickets and explore many different exhibits in the aquarium.

It is a fun and educational place to visit. People of different ages can enjoy the animals and displays.

</p>

 

<hr>

 

<h2>Ticket Prices</h2>

<table border="2" cellpadding="8" cellspacing="0" style="background-color: white;">

<tr style="background-color: #90e0ef;">

<th>Ticket Type</th>

<th>Age Group</th>

<th>Price</th>

</tr>

<tr>

<td>Adult</td>

<td>18+</td>

<td>$42.00</td>

</tr>

<tr>

<td>Youth</td>

<td>13-17</td>

<td>$30.00</td>

</tr>

<tr>

<td>Child</td>

<td>4-12</td>

<td>$25.00</td>

</tr>

<tr>

<td>Toddler</td>

<td>0-3</td>

<td>Free</td>

</tr>

 

</table>

 

<h2>Membership</h2>

<p>

Membership is a good choice for people who want to visit more than one time.

It can help visitors save money and come back again during the year.

</p>

 

<h3>Membership Benefits</h3>

<ul>

<li>Unlimited visits</li>

<li>Discounts at the gift shop</li>

<li>Special member benefits</li>

<li>Good for frequent visitors</li>

</ul>


 

</ol>

 

<h2>Ticket and Membership Comparison</h2>

<table border="2" cellpadding="8" cellspacing="0" style="background-color: white;">

<tr style="background-color: #90e0ef;">

<th>Plan</th>

<th>Benefit</th>

<th>Best For</th>

</tr>

<tr>

<td>Single Ticket</td>

<td>One visit</td>

<td>Tourists</td>

</tr>

<tr>

<td>Membership</td>

<td>Visit many times</td>

<td>Local visitors</td>

</tr>

<tr>

<td>Family Visit</td>

<td>Fun group activity</td>

<td>Families</td>

</tr>

</table>

 

<h2>Animals Pictures</h2>

<img src= Seaotter.jpeg alt="Seaotter" width="300" height="250" border="3">

<img src= Axolotl.jpeg alt="Axolotl" width="300" height="250" border="3">

 

</div>

<div style="background-color: #0096c7; color: white; text-align: center; padding: 15px; margin-top: 20px;">

</div>

 

</body>

</html>

Exhibit and experience

<!DOCTYPE html>

<html>

<head>

<title>Exhibit </title>

</head>

<body style="font-family: Arial; background-color: lightblue; margin: 0;">

 

<div style="background-color: #76c5f0; color: white; text-align: center; padding: 20px; border-bottom: 3px solid navy;">

<h1>Exhibit and experience</h1>

<p><i>The experience of visit to the Vancouver Aquarium</i></p>

</div>

 

<div style="background-color: #caf0f8; text-align: center; padding: 10px; border-bottom: 2px solid #0077b6;">

<a href="index.HTML" style="margin: 10px; color: darkblue;"><b>Home</b></a>

<a href="Ticket.HTML" style="margin: 10px; color: darkblue;"><b>Tickets and Membership</b></a>

<a href="Experience.HTML" style="margin: 10px; color: darkblue;"><b>Exhibit and experience</b></a>

</div>

 

<div style="padding: 20px;">

 

<h2>Main Exhibits</h2>

<img src=Road.jpeg alt="New environment width="700" border="3">

<p>

The <b>Vancouver Aquarium</b> has many different exhibits for visitors to explore.

People can see animals from local waters and also from tropical areas.

Each exhibit gives visitors a different experience and helps them learn more about <u>marine life</u>.

</p>

 

<hr>

 

<h2>Popular Exhibits</h2>

<ul>

<li>Pacific Canada Pavilion</li>

<li>Tropical Zone</li>

<li>Jellyfish Display</li>

<li>Marine Mammal Area</li>

<li>Shark and Ray Area</li>

</ul>

 

<h2>Things Visitors Can Experience</h2>

<ol>

<li>Watch sea otters swim and play</li>

<li>See colourful fish in different tanks</li>

<li>Learn about ocean animals and habitats</li>

<li>Take pictures with family and friends</li>

</ol>

 

<h2>Exhibit Information</h2>

<table border="2" cellpadding="8" cellspacing="0" style="background-color: white;">

<tr style="background-color: #90e0ef;">

<th>Exhibit</th>

<th>What You Can See</th>

<th>Why It Is Interesting</th>

</tr>

<tr>

<td>Pacific Canada Pavilion</td>

<td>Local fish, sea stars, jellyfish</td>

<td>Visitors learn about sea life in British Columbia</td>

</tr>

<tr>

<td>Tropical Zone</td>

<td>Bright tropical fish and coral</td>

<td>It is colourful and exciting to look at</td>

</tr>

<tr>

<td>Marine Mammal Area</td>

<td>Sea otters and other marine mammals</td>

<td>It is one of the most popular areas in the aquarium</td>

</tr>

</table>

 

<h2>Visitor Experience</h2>

<p>

A visit to the aquarium is not only educational, but also <i>fun and memorable</i>.

Visitors can move through different areas, look at many animals, and enjoy the peaceful underwater environment.

For many people, the aquarium is a relaxing and interesting place to spend time.

</p>

 

<img src="Outside.jpeg" alt="Outside place" width="250" height="200" border="3">

<img src="Seal.jpeg" alt="Seal show" width="250" height="200" border="3">

<img src="Seaotter3.jpeg" alt="Seaotter" width="250" height="200" border="3">

 

</div>

 

<div style="background-color: #0077b6; color: white; text-align: center; padding: 15px; margin-top: 20px;">

</div>

 

</body>

</html>

bottom of page