Welcome to part 15 of the Web Design HTML5 and CSS3 beginners tutorial. In this session, we will review what we’ve learned so far and apply our skills to build a new webpage. Our focus will be on creating a simple webpage about the Andromeda Galaxy.
To start, we need to decide on the content for our webpage. We will use Wikipedia as our source of information, specifically focusing on the Andromeda Galaxy. This will allow us to utilise our current knowledge to create a functional webpage.
Setting Up the Project Directory
- Create a New Directory: On your desktop, create a folder named website_projects. Inside this folder, create another folder called andromeda_galaxy (using lowercase letters).
- Create an Images Folder: Inside the andromeda_galaxy folder, create a new folder named images to store any images we might use.
- Create the HTML File: Open Notepad++ and create a new blank document. Save this file as index.html in the andromeda_galaxy folder.
Now that we have our project set up, let’s start coding our HTML.
<h1>Andromeda Galaxy</h1>
Paragraphs
Next, we will add some paragraphs about the Andromeda Galaxy. Copy three paragraphs from the Wikipedia page and paste them into your HTML file, wrapping each paragraph in <p> tags:
<p>Paragraph 1 content...</p>
<p>Paragraph 2 content...</p>
<p>Paragraph 3 content...</p>
Adding an Image
To include an image, first download an appropriate image from the Wikipedia page. Make sure to attribute the author as required. Save the image in the images folder and rename it to andromeda_galaxy.jpg. Then, add the image to your HTML:
<img fetchpriority="high" fetchpriority="high" decoding="async" src="images/andromeda_galaxy.jpg" alt="Andromeda Galaxy" width="700" height="500">
Adding a Reference
Below the image, include a reference to the image source:
<p>Image credit: [Author Name]</p>
Creating a Table
Next, we will create a table to display some data about the Andromeda Galaxy. Use the following structure:
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<!-- Add more rows as needed -->
</table>
Embedding a Video
To enhance our webpage, we can embed a YouTube video. Find a relevant video about the Andromeda Galaxy, click on the share button, and select embed. Copy the embed code and paste it into your HTML:
<iframe width="700" height="500" src="[YouTube Embed Link]" frameborder="0" allowfullscreen></iframe>
Adding a Google Map
Next, we will embed a Google Map showing the NASA Johnson Space Center. Search for the location on Google Maps, click on the share button, and select embed. Copy the HTML code and paste it into your webpage:
<iframe src="[Google Maps Embed Link]" width="700" height="500"></iframe>
Useful Information List
Create a section for useful information using an unordered list:
<h4>Useful Information</h4>
<ul>
<li><a href="[Link 1]">Galaxy in Fiction</a></li>
<li><a href="[Link 2]">Another Resource</a></li>
<li><a href="[Link 3]">More Information</a></li>
<li><a href="[Link 4]">Further Reading</a></li>
</ul>
Final Touches
Add a copyright notice at the bottom of the page:
<p>© 2023 Andromeda Galaxy Information</p>
In this tutorial, we have built a simple HTML5 webpage about the Andromeda Galaxy using our knowledge of HTML and CSS. We covered essential elements such as headings, paragraphs, images, tables, and embedded content. As we move forward, we will explore CSS to enhance the visual appeal of our webpages. Join me in the next tutorial where we will dive into CSS3 and learn how to style our pages effectively!
