Article HTML
Learning the most common HTML elements
Project Setup
Create a new project folder in your projects directory. For this project, you'll want to use Git/GitHub to store your files. Go through the steps in Git/GitHub exercise (through Basic Git Usage) to setup a repository for this project and then open the project folder in Visual Studio Code.
Creating an Article about Jellyfish
We're going to be building a web page that is going to contain an article about some of the interesting jellyfish that live in the ocean. We'll learn about the common HTML elements along the way.
Create index.html
Create your new HTML page in your project folder. Don't forget to change the <title> element.
Common HTML Elements
We are going to cover the most common HTML elements (about ten) when building our article. There are many more elements, but it is more productive to focus on the most common ones first, without getting overwhelmed with a huge list that you can't remember.
An important point to keep in mind with each of these elements is that browsers provide default styling for most of these elements, such as margins, text color, and font size. These defaults can be overridden by your own styles.
If you need further help with understanding these HTML elements, the MDN HTML Element Documentation is a great reference.
Headings - <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
The use of headings and sub-headings to organize the content of the document is likely familiar to you from their use in Word and Google documents. These HTML heading elements serve the same purpose on a web page.
There are six different elements, ranging from <h1> representing the most important, down to <h6>, representing the least important. In practice, the headings h1, h2, and h3 are heavily used, but it is often difficult to consistently follow a hierarchical pattern of importance throughout a site for these smaller heading.
There should only be a single h1 element on a page.
Defaults for h1 - h6
A Typical Use of h1 - h3
Adding the Article Headings
There are going to be three different jelly fish that we will cover in our article. The title of the article is the most important heading, so we'll use <h1> for that, followed by each section on a particular jellyfish using <h3>.
Paragraphs - <p>
The paragraph element is meant to display some descriptive text or a paragraph. Consecutive paragraphs will have space between them, just like in a book.
Add some descriptive paragraphs.
A technique front-end developers use when they need to add filler text is to use place-holder text supplied by sites like https://loremipsum.io/. Just copy the generated text and place in in the body of your paragraph element.
Images - <img>
The img element is a self-closing element. There is no content allowed between the opening and closing tags, so the correct syntax is <img/>
Images are inline elements
This means that they only take up as much horizontal space as their width and it can effect how the content following it behaves. Here are three examples of an images positioned before, at the beginning and in the middle of a paragraph element. We'll learn more about inline vs block elements, but for now it's just important to be aware that a block element, such as a paragraph, always starts on a new line, whereas text following an image will flow immediately to the right on the same line.
img element attributes
The <img element is our first element that demonstrates the use of attributes on the element.
<img src="images/pink-jelly.jpg" alt="jellyfish">
src - the location of the image file
can be the relative location of an image file within the project directory
can also be an URL to a remote image file.
alt - text used to support accessibility and search engines, or to display fallback text in case the image cannot be loaded.
Image Guidelines
The best format for images are jpeg, gif, or png.
Save the image in the correct size for which it will be displayed so that it doesn't waste a lot of time downloading. If you need to crop or shrink an image, sites like www.pixlr.com are a good choice.
Store images in a special folder, named images, within the project to keep things organized.
Finding Place-holder Images
The first step for our article is to find some jellyfish images to include.
Just like we used place-holder text for our paragraph content, we often need place-holder images to use for development purposes. The sites unsplash.com and pexels.com are great sites that have a wide assortment of free images to use in your pages. Go to the site and search for and download three jellyfish images to use in your article.
Set the value of the src attribute to the relative path of the image. The relative path is the location of the image file relative to the HTML page where it is being referenced.
Videos - <video>
The video element also has a src attribute, which is used to specify the location of the video. There are a couple of additional attributes that need to be set to control the video. These are a special kind of attribute, called boolean attributes.
Boolean Attributes
Boolean attributes are attributes that do not have a value. Their presence or absence indicates their value. If they are absent, the value is false. If the attribute is present, the value is true.
The following is a list of the boolean attributes we are going to set on the video element.
controls - indicates whether the control panel is present on the video. this is the place where the user can interact with the video, such as starting and pausing.
autoplay - indicates whether the video should start immediately when the page loads.
muted - indicates that the sound should be turned off. this is require in some browsers for autoplay to work, as it can be problematic for videos with sound to autoplay unexpectedly.
loop - continually replay the video.
Add a Video at the Top of the Article
You can find free videos on the site pexels.com. Experiment with removing the boolean attributes to make sure you understand how each one works.
Create a new folder in your project directory called videos, and store your videos there.
Anchors - <a>
Anchors, also called hyperlinks, or just links, are connections to other HTML pages. You can create links that navigate away from the current page, which is the technique you would typically use when you want to navigate to another page within your site. Or, you can create links that launch a new browser window and leave your current page alone. We are going to use the second technique to create some links from our narrative to external sites about jellyfish.
We need to use the href attribute on the anchor tag to specify the URL for the target web page. Just do a search for jellyfish and find a random page to link to for the purposes of this exercise.
Set the attribute target="_blank" to have the target web page launch in a new browser tab instead of replacing the contents of the current tab.
The anchor text is underlined and a different color, to indicate a link in the text. In future lessons we'll learn more about how to style anchors.
Be sure to test your link to make sure when you click on it a new browser window is launched instead of navigating away from you current page.
Add a Caption Under the Photos
Emphasizing Text
There are several elements used to emphasize text. There's a discussion here about the differences and when to use each.
Emphasizing TextFor the caption, we're just going to style it in italic, just to distinguish it from normal paragraph text.
Lists - <ul>, <ol>, <li>
Lists will be familiar to you, as you've probably created them in Word or Google Docs. There are two options: ordered and unordered. Each type of list requires the use of the container element to specific what type of list, and the inner elements for each list item.
We're going to create an unordered list of links to the sections on each jellyfish within the article. Before we do that we need to introduce the concept of internal links.
Linking to Page Elements
Most of the time the <a> element sets the href attribute to the url of an external page with in the website, or a page within another website (usually launches a new tab for this type). But it is also possible to set the href attribute to the id of another element in the same page and this will cause that element to scroll into view. This is particularly useful for very long articles where there is an index to sections at the top and clicking on a link in the index scrolls the page down to the appropriate section. For our article we are going to use this technique to link the MEET THE JELLIES list items to their associated sections further down in the article.
To use this technique, the target element must have an id attribute and the href on the anchor element must be set to that id with a '#" in front. In this example the <li> element in the first code block references the <h3> element in the second.
The following screenshot shows what the web page should look like at this point. There should be a section at the top with the video followed by a section for each jellyfish (I've just included the first jellyfish, as they each have the same structure).
Pushing Changes to GitHub and Netlify
Refer to the steps in the Basic Git Usage to Start a New Project section. Use the Netlify URL for your assignment submission.
Last updated
