Project: My first website
Guys, it’s time to build our first website!. Let’s use all we’ve learned so far on HTML to create the structure of a travel website.
Be sure to include images, links, lists, and other HTML elements you’ve seen throughout the course for our future users to enjoy their visit to the website.
Step by step:
- As usual, we begin by adding the <!DOCTYPE html> declaration as the first line of code.
- Next, add the <html> tag.
- Below the opening <html> tag, add the <head> tag.
- Inside the opening and closing <head>s, write the <title> tags. The title of the website is “Ly around the World | Guide for travelers”.
- On the bottom line, add the <body> tags.
- Just below the opening <body> tag, add an <h1> title tag that reads: “Landscapes, gastronomy and culture: The 3 most visited destinations in the world”
- Below that, add an <h2> tag that says: “Bali, Indonesia”
- Below that, add an <h2> tag that says: “Paris, France”
- Below that, add an <h2> tag that says: “New York, USA”
- Between the <h1> tag and the first <h2> tag, add a <p> tag that says: “The world is so big! Nowadays, you can reach virtually any corner of the planet with just a couple of clicks, though. The thing is: what should you visit first? You may need some inspiration to decide the perfect destination. Find here 3 of the best places to visit in the world and have an unforgettable experience.”
- Between the first and second <h2> tags, add another paragraph to the post using the <p> tag:“The island of Bali, in Indonesia, is number one. Why so? It may be the white sand beaches like Lovina Beach, the intense green of its jungles in the West Bali National Park, the ancient temples (more than 10,000) or the different hiking trails. Rent a motorbike to get around the island: be sure to go to the Tanah Lot temple to watch the sunset, get lost in the Jatiluwih or Tegalalang rice fields, choose a beach or a lake, visit a volcano or even take the opportunity to get married! Bali is the island of the Gods!”
- Between the second and third <h2> tags, add another paragraph to the post using the <p> tag: “The city of light, the city of love, the city of art. Paris is full of enough attractions for a lifetime. It is the only city that has two places among the ten most interesting tourist attractions in Europe: the Eiffel Tower and Notre Dame. But what else can you find there? A whole class of art in the Louvre Museum, walk around its neighborhoods such as the Marais or the Latin Quarter, enjoy gastronomy in some of its bistros, get a tour along the banks of the Seine or visit the world of Amélie Poulain… The possibilities are endless in Paris!”
- In the third and final <h2> tag, add another paragraph to the post using the <p> tag: “If there is a universal idea of a city, that is the one that New York embodies. We’ve seen it so many times in movies that when you visit it for the first time it seems like you’re walking from scene to scene. This city is vast and has so many faces that it would take several lifetimes to say that it knows each other well. Walking through Central Park in autumn or spring, going to MoMA, the cradle of modern art, visiting the Statue of Liberty, mythical skyscrapers like the Empire State Building, crossing the Brooklyn Bridge, Little Italy, Coney Island, it’s just one small part of everything you can do in New York.”
- Above each paragraph, add an <img> tag with the src attribute being one of the following links:
-
-
-
- Bali: https://learnwonderly.com/wp-
content/uploads/2022/05/ paisaje1.jpeg - París: https://learnwonderly.com/wp-
content/uploads/2022/05/ paisaje2.jpeg - New York: https://learnwonderly.com/wp-
content/uploads/2022/05/ paisaje3.jpeg
- Bali: https://learnwonderly.com/wp-
-
-
-
Below the opening body tag, add an <img> tag with the following font: https://learnwonderly.
com/wp-content/uploads/2022/ 08/Ly.jpg -
The first web page post is complete! Now, below the <body> tag, add an <h3> tag that says “by Ly | 1 day ago”
-
We want readers to know that there is much more to it than a publication. Let’s list some related posts. Below the last paragraph, add an <h4> tag that says “Related Content.” Below that header tag, create a list. The list must have the following four elements:
-
-
-
-
Visit the 5 wonders of the world.
-
Hotels with history
-
Tips for new travelers.
-
The best cruises for this summer.
-
-
-
-
Let’s connect the web page with the rest of the internet! In the first paragraph, turn the word “planet” into a link and have it go to: https://viajes.
nationalgeographic.com.es/ multimedia. -
Be sure to include the target=”_blank” attribute so it opens in a new page.
-
At the bottom of your website body, add a new <div> and set your id=”contact”.
-
Inside the <div>, create a new <p> tag and place the following contact information inside it: email: ly@wonderx.com
-
Inside the contact <div>, place opening and closing <strong> tags around “email”
-
Let’s make the profile picture a link to the contact section of the website. Find the profile <img> tag and surround it with opening and closing <a> tags. In the <a> tag, set href=”#contact”.
Congratulations to you! You have the beginnings of a solid travel website.
Leave a Reply