Originally published August 2, 2017 on The Original BritishPandaChick as How to Make a Clickable Photo Page with Codeacademy. I made tweaks to the original post so it would work for Code Newbie.
Now that you know the basics about HTML & CSS, today's post is reviewing more Codecademy tutorials for different projects for your portfolio. So far we have built a basic web page and a social networking profile. These projects use only HTML, but you were able to add some more style to each project to fit your personality.
Today's tutorial is once again coming from Codecademy. I will teach you how to build a clickable photo page, another project from the HTML & CSS lesson. This post will guide you through the steps to building your own photo page.
Anyone who is just learning how to code or just starting to code projects should check out the page How to Set Up Your Workspace in the navigation. It goes over everything you need to do to be organized before you even start your project.
===> Click here to read How to Set Up Your Workspace post!
Here’s how you do it.
We are only focusing on the HTML for this post, but feel free to add some style and customize your website as you see fit. This might include adding a style sheet. If you are planning to add some style to your website, you should review how to do this in The Newbie's Guide to CSS post in the Skillcrush 101 series.
1. Create a table
2. Add three table rows
There is nothing in our table tags yet, but that changes in this step with Codecademy requesting three table rows. To make a table row, just add tr tags inside the tbody tags. If you want to add more pictures, feel free to add more as many rows as you like. For this post, I'm following Codecademy's example of using three.
3. Add cells to table
Now that we have all the rows set up, it is time to start adding the cells to create the table columns. This is where all your pictures will go. Inside your tr tags, you will add td tags for the table data. Codecademy just wants three td tags in between each tr tag set you have, but you can add more tr tags if you like if you plan on adding more pictures.
4. Create table header
Chances are you have a bunch of ideas for what your photo page should be. Once you picked an idea, let's add a table header. Table headers are where users will go first to see what your photo page is all about.
Before your tbody tag, add the thead tag. The thead tag lets the computer know this is the table header. Inside your thead tags, use the th tags to put the name of your photo page.
5. Add colspan attribute to your table header
Now that we have a header for our table, Codeacademy wants the header to go across all of our columns. This is where we use the colspan attribute. Colspan tells the computer the header will take up 3 column spaces instead of the default of one.
Inside your opening thead tag, add the colspan attribute and set it equal to 3. This is how it should look in your code.
<head>
<th colspan ="3">Name of Your Photo Page</th>
<thead>
When the computer reads your code, it makes the header go across three columns. If you are adding more columns and rows, this number will be different so you'll have to play around with the colspan number.
6. Add images
The table is done, so it is time to start adding your pictures. Inside each of your td tags, you will start adding your images.
7. Add links
The last step of this tutorial is adding links. Codecademy made their images act as links to different websites so I'm going with the same approach. Just wrap your img tags with a tags with the href attribute set to any URL your want.
You are now finished with your photo page.
This is just a basic photo page so now would be a great time to add some CSS style or play around with the existing code you have to make it fancy. Not sure if you are on the right track? Here's some of the sample code I wrote in my text editor for you to check with to see if you are on the right track.
<body>
<table>
<thead>
<th colspan="3">Downton Abbey Characters</th>
</thead>
<tbody>
<tr>
<td><a href="http://downtonabbey.wikia.com/wiki/Violet_Crawley"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/0/0b/Violetdowager.jpg/revision/latest/scale-to-width-down/250?cb=20160221113938" alt="violet"/></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Robert_Crawley"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/1/11/111.jpg/revision/latest/scale-to-width-down/250?cb=20160707162748" alt="robert" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Cora_Crawley"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/c/c2/87.jpg/revision/latest/scale-to-width-down/250?cb=20160707164650" alt="cora" /></a></td>
</tr>
<tr>
<td><a href="http://downtonabbey.wikia.com/wiki/Elsie_Hughes"><img src="https://vignette4.wikia.nocookie.net/downtonabbey/images/5/54/ElsieCarson_.jpg/revision/latest/scale-to-width-down/250?cb=20151231154018" alt="mrs.hughes" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Charles_Carson"><img src="https://vignette4.wikia.nocookie.net/downtonabbey/images/9/9d/Charles_carson.jpg/revision/latest/scale-to-width-down/250?cb=20151027113932" alt="carson" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Beryl_Patmore"><img src="https://vignette1.wikia.nocookie.net/downtonabbey/images/7/7e/Mrspatmore.jpg/revision/latest/scale-to-width-down/250?cb=20151207174044" alt="mrs.patmore" /></a></td>
</tr>
<tr>
<td><a href="http://downtonabbey.wikia.com/wiki/Mary_Talbot"><img src="https://vignette3.wikia.nocookie.net/downtonabbey/images/0/06/Mary_with_flapper_look.jpg/revision/latest/scale-to-width-down/250?cb=20160222161727" alt="mary" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Tom_Branson"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/b/ba/Tom_.jpg/revision/latest/scale-to-width-down/250?cb=20151203125350" alt="tom" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Edith_Pelham"><img src="https://vignette4.wikia.nocookie.net/downtonabbey/images/d/d7/Edith_in_gold_with_headband.jpg/revision/latest/scale-to-width-down/250?cb=20160219164217" alt="edith" /></td>
</tr>
</tbody>
</table>
</body>
Conclusion
Your photo page is now done! During this tutorial, you took your new HTML skills and built your very own photo page complete with links and images. If you would like to look at a sample project to see if you are on the right track, feel free to use the one in Codecademy or click the link below to see a sample project I made just for this post. The sample project I made is based on the characters of Downton Abbey, but you can use any images you want for your photo page.
==> Click here to the sample photo page project!
Tomorrow, we will be starting the first CSS projects. This means we will be adding style to text and playing with CSS properties. The first CSS project you'll be doing is designing a button for a website from the Codeacademy HTML & CSS section. You can work ahead on these projects if you like or go back to review any of the CSS topics featured on this blog or in the Codeacademy tutorials.
Top comments (0)