Build A Pet Adoption Center Page: Part 3
This part of the html page tutorial explains the code with inclusion of the html boilerplate.
Introduction
This is part 3 of the sequel for building a pet adoption center page in HTML. In part 2, I explained how to build the pet adoption page in pure HTML but I didn't use the boilerplate in the previous part. In this part , I will be using the HTML Boilerplate in the code to help you to understand the importance of using the Boilerplate. I will also be using some additional attributes to improve upon the image dimensions and proportion.
Working With HTML Boilerplate
The Boilerplate for html serves as a basic framework for structuring the code base. It's not essential to remember it as a beginner but you can write it down somewhere in your code editor and use it every time you code a html project.
Let's see how a Boilerplate in html looks like, as shown in the code block below
How a HTML Boilerplate looks like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My html Project</title>
<!-- To link external styling file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>
Welcome
</h1>
</header>
<main>
<p>
content
</p>
</main>
<footer>
<p>© 2025 My Project</p>
</footer>
<!-- To link external javascript file -->
<script src="scripts.js"></script>
</body>
</html>The Boilerplate Explained
In the first line of above code we find the syntax <!DOCTYPE html> and this is ised here to indicate that thevpage in question us axsrandard html page . Its a standard html declaration. This is followed by <html lang=”en”> </html>
Please keep in mind that the closed html tag that is </html> will be pushed into the ladt line of the boilerplate. The open html tag , follows the html declaration line as shown above. Inside the open html tag there is a attribute called lang. the attribute lang stands for language and the value assigned to this lang attribute is “en” whereb"en” stands for English! This means that the language in which this html page is communicating with the user is in English.
Next line shows the meta elements with different attributes. The first meta element has a charset attribute setbto a value of “UTF-8 “ which is a character encoding that allows us to use all rhe characters in the internet for the building of the page.
The next meta element in the boilerplate has an attribute called name , set to a value of “viewport “. If you are wondering, “ What is this viewport?’ no to worry long as I am here to explain it to you. The viewport is simply put, the visible part of the web page that you are building. There is one more attribute inside the meta tag and that is the content attribute with another attribute of width set to a value of “device-width”.
What this does is to set the width of your html page to that of the width of the device that you are viewing the page from and thereby asking the page to follow the screen-width of the device from which you are viewing the page.So this renders the page to be responsive to different device widths and maintain the proportion of the page irrelevant of the device from which you are viewing it, be it a laptop , desktop computer, android phone, apple phone, etc etc..Imagine viewing your page from a laptop in a nice scale but viewing from a mobile phone renders it looking very disproportionate! This issue is solved by the meta tags and attributes as explsined here.
There is one more attribute inside the meta tag and its called initial-scale that is set to “1”
The initial-scale attribute sets the initial zoom level of the page content as 1 and this will ensure that the content is displayed at its true size withour any zoom being applied. Hence the overall proportion of the page is maintained throughout the usage of different devices.
Next we have the title tags inside the head tag. The title tag is used to display the name of the post in the search engines to the user when he/she searches for pages related to a certain topic. This title that the user views on the search page in the browser is not the inclusive part of the content inside the page when the user lands on the specific page!
Please ignore the link tag mentioned in the code as I haven't started doing posts on CSS yet.
After the closed head tag you have the body tag right underneath it. This is where the body of the content of your page lives! Right below the open body tag we have the header tag followed by the main tag. So, the body tag serves as a container for the header and main tag.
The header tag contains the h1 tags to carry the main headline for the document or page. This is followed by the main tag as shown above in the boilerplate.
The reason it's called a main tag is because it houses the main content that is unique and specific to the content of the page and not supposed to repeated across other pages of the website or on side bars, navigation menu or search bars etc etc. The main tag will house other tag such as paragraph tags to store paragraphs of the content in the main tag.
After the closed main tag we have the footer tags that usuallt contain copyright information as shown above in the boilerplate.
Below the footer closed tag we have the script tag to link with any JavaScript code file but for now we will ignore that as I am yet to get you started with JavaScript. We do things one at a time to avoid confusing your brain!
Below the footer and script tags is the closed body tag. So the body tag acts as a container for several tags such as main, paragraph, header, h1, h2, h3 , footer,script tags etc. Right below the closed body tag you have the closed html tag that contains all the tags of the boilerplate. Your boilerplate is completed now.
Let's reiterate the source code for this project that we already did in the previous post.
Source Code
<h1>Catryn Pet Adoption</h1>
<p>Welcome to the Catryn Adoption Center ! Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>
<h2>See our cats!</h2>
<img src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg" alt="Five cats looking around a field.">
<h2>Adopt a Siamese cat!</h2>
<a href="https://siamesehaven.com">Visit Siamese cats page</a>
<h2>Adopt a Persian Cat!</h2>
<a href=" https://www.chewy.com/g/cat-persian_ga1" >Visit the persian cats page</a>
Let's do this code for the project inside the boilerplate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Building a Adoption Page in Pure HTML</title>
</head>
<body>
<header>
<h1>Catryn Pet Adoption</h1>
</header>
<main>
<p>Welcome to the Catryn Pet Adoption Center ! Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>
<h2>Our happy cats!</h2>
<img src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg" height="320" width="400" alt="Five cats looking around a field.">
<h2>Adopt a Siamese cat!</h2>
<a href="https://siamesehaven.com">Visit Siamese cats page</a>
<h2>Adopt a Persian Cat!</h2>
<a href=" https://www.chewy.com/g/cat-persian_ga1">Visit the persian cats page</a>
</main>
<footer>
<p>© 2025 Meera Menon html Project tutorial</p>
</footer>
</body>
</html>In the above code I have inserted the previous code inside the html boilerplate and also added some information of copyright inside the footer. I also added two attributes namely, width and height attributes in order to make the image size proportionate with the page. The height attribute has been assigned with a value 320 px and the width with a value of 400 px respectively. You can refer to the code in my code editor here. The finished look can be viewed here.
The finished look
Conclusion
Congratulations! The final part of the project tutorial to build a pet adoption page has been completed successfully. I have guided you on building the pure HTML page using the html boilerplate and also using the html elements you can now build a web page in html with image uploaded on the page and now in this page users who visit the landing page can click links to be directed to another page specified to visit the adoption centers where they can adopt the pets as per their choice!
More related HTML posts
Build A Travel Agency page in html
Subscribe if you wish to learn HTML as a code newbie and get fresh lessons in your inbox once every week!
