This lab reviews previously HTML tags and introduces the img and a tags.
The scenario is that you've been hired to create a webpage for a local band. At this point we just need to get a few images, headers, and paragraphs describing the band, and a placeholder link to their merch store.
Should you need guidance on how to fork, open, edit, and maintain your codespaces, please use the link below by right clicking and opening in a new tab.
Attention: When you complete a task, put an x in the middle of the brackets to mark it off your ToDo list.
- Create an
index.htmlfile, type!and hitenterto create your boilerplatehtml.
-
Create a
<h1>header with the text content set to the band's nameThe Devs. -
Create a
<h2>header with the text content set to Description. Underneath that add a<p>tag and typeloruminto it to generate dummy text as a placeholder.
- Now that we have a description, add another H2 header titled
Galleryand then put some images on the page. The band images are locatated inassets/images.
-
Notice how the images are too large? We can use the
heightandwidthattributes within the image tag to quickly resize them:height="200px"orwidth="400px"for example. The `px stands for pixel. Try using one or both attributes per image to resize them to something more appropriate for the page adn refresh it to see your changes. This will require some trial and error in determining what values yield the best results. -
Now we need a section for the band's shop. Add another
<h2>tag with the text content set to Shop. Then create a<p>tag with a nested<a>tag within like in the screenshot. This is how we can create links within paragraphs. The#in thehrefis used as a placeholder when the destination of a hyperlink is not yet known. Since this is the main page, the store page is not yet complete so there is nothing to link to just yet.
🛑 Only use this as a reference 🛑
💾 Not something to copy and paste 💾
Note: This lab references a solution file located here