2021-2022

Introduction to HTML

Introduction

Now, you will learn about the most basic HTML concepts you will ever use in website design. These are fundamentals, and it is important that you become accustomed to using them.

If you're getting lost within this document, use the table of contents on the right-hand side of your screen to quickly navigate the page.

HTML Anatomy

HTML is made up of elements. These elements are what will structure your website and define its content. Here is how they are written, also known as their syntax.

The paragraph element is what is used to display normal text. Here is a diagram:

As shown, the paragraph element consists of the following components:

  • An opening tag (<p>).

  • The content ("Hello World!" text).

  • A closing tag (</p>).

All together, this is an element. There are tons of different elements that serve different purposes (videos, images, etc). Despite its name, the paragraph element displays text in general (not just paragraphs).

Task:

Type a paragraph element in your blank index.html file. Have its content be your full name. Click the "Run" button at the top of the screen to update the website. What do you see? Does it appear to work? Ask your mentor to look at it before proceeding to the next part.

The Body Element

One element necessary to building an HTML website is the <body> element.

Each HTML file can have only one body, and only code within the body's opening and closing tags will render onscreen.

How was the<p>element from the last task rendered without being enclosed in a<body>?

Some browsers accommodate to programming mistakes and render code outside of the <body>. Not all browsers do this, and you lose a lot of customization anyway. You should always put your main code inside the <body>.

Here is how the <body> element is generally laid out:

<body>
    <p>Hello World! This is an example of a paragraph element.</p>
</body>

Let's look at the reasoning behind formatting:

  • The <body> tags are on different lines. <body> elements contain everything that is to be rendered onscreen. They tend to enclose multiple elements within. When elements are filled like this, it's best to keep the tags on separate lines.

  • Notice how the <p> element is indented. Since the <p> element is inside the <body>, it is considered a child of the <body> element. It is customary that child elements are indented 2 spaces past the parent element. On Replit, you can just hit the Tab key to insert two spaces.

Task:

Edit your Repl so that the<p>element with your name from the last task is enclosed by a<body>element. Remember to use proper code formatting! Show your code to a mentor to double check.

Heading Elements

While you cannot change font size with HTML (this is something we will delve into later into the course), you can use some preset text sizes called headings!

Heading are just like <p> elements in the way they are used, but different in how they render the text.

There are six total headings:

<h1>this is heading 1</h1>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>
<h5>this is heading 5</h5>
<h6>this is heading 6</h6>

Task:

Change the <p> element from the previous task to an <h1> element (but keep the content the same). Click "Run" to see how it looks.. Do this for <h2>, <h3>, <h4>, etc. How does the text change as the heading number change?

Divs

The <div> element is the most popular element in HTML, and is short for "division." <div>s are used to divide your code into sections.

While <div>s themselves do not change how the website renders, we can give them custom styles with CSS (which we will learn about later). Applying a "style" to a <div> element will apply the same style to every element within its tags, making it useful for adding color to your website.

Here's an example of using <div>s:

<body>
    <h1>The Northern Cardinal</h1>
    <div>
        <h2>About</h2>

        <h3>Species</h3>
        
        <h3>Features</h3>
    </div>
    <div>
        <h2>Habitat and Location</h2>
        
        <h3>High-Populated Locations</h3>
        
        <h3>Natural Environment</h3>
    </div>
    <div>
        <h2>Media</h2>
        
        <h3>Images</h3>
        
        <h3>Videos</h3>
    </div>
</body>

This example is the skeleton of a website dedicated to the Northern Cardinal.

<div>s are used to separate the introduction, the location, and the media aspects of this website. Notice how an <h1> element is used to give the website a main title.

<div>s can enclose any elements, including text and images. Remember to indent two spaces when you nest elements inside <div>s to improve readability.

Task:

Delete all existing code in your Repl, and copy/paste the code above. Update the website to see how it displays. Now, remove the <div>s but keep their content untouched. Does the website preview look different with or without <div>s? After that, delete all code and re-paste the above snippet, including the <div>s.

Attributes

If you want to expand on how an element works, we can use what are called attributes! Attributes are teeny bits of info that we add onto elements to change how they work.

Here is a diagram:

Notice how the opening tag of the <div> above has some text right before the ">." That is called an attribute, and in this case, it is the id attribute.

This attribute doesn't really change how the code is rendered, but it does make it easier for people reading and editing your code (like your mentor!) to tell what it all means.

Attributes are generally used in combination with CSS to tell the website how certain elements should look (e.g changing font size, color, line spacing, etc). For now, we'll stick to using the id attribute to give descriptions to each of our <div>s.

Task:

Give the first <div> an id attribute of "introduction." Give the second an id of "habitat." Give the third an id of "media." Call over your mentor to double check your work.

Stylizing Text

So far, all of our text (both headings and paragraphs) have been in normal font. What if we want to add more emphasis to our text, like bolded/italicized words, and bullet points/numbered lists?

Task:

Let's setup some text in our "Introduction to HTML" website to experiment with.

  1. Copy the following text: The northern cardinal (Cardinalis cardinalis) can be found in southeastern Canada, the southeastern United States (from Maine to Texas), and south through Mexico, Belize, and Guatemala. Its conservation status is "Least Concern."

  2. Put that text as a <p> element directly under the <h2> "About" element in your document.

Bold and Italics

Click the "Bold" and "Italics" tabs below to learn how to use both text styles.

To bold text in HTML, put the <strong> tags around the specific words. For example:

<p>This is an example sentence with <strong>bolded</strong> words</p>

The above will render as "This is an example sentence with bolded words" on the website.

Task:

In your Repl document, italicize the words "Cardinalis cardinalis" (which is the scientific name for the northern cardinal). Bold the words "Least Concern" (which means that the northern cardinal is not a threatened/endangered species). Update your preview to see what happened. Is the effect expected? Does it look like your code is broken? Is it throwing errors everywhere? Come to a mentor if you're having questions.

Unordered and Ordered Lists

In HTML, there are two versions of lists.

Ordered lists look like this:

  1. This

  2. Is

  3. An

  4. Ordered

  5. List

To use ordered lists, keep list items <li> as children within an overall <ol> element. E.g:

<ol>
    <li>This</li>
    <li>Is</li>
    <li>An</li>
    <li>Ordered</li>
    <li>List</li>
</ol>

This will render a numbered list similar to the above.

Task:

Make an unordered list under the <h3> "Species" element containing the following entries:

  • C. c. phillipsi

  • C. c. clintoni

  • C. c. seftoni

  • C. c. townsendi

  • C. c. flammiger

Make an ordered list under the <h3> "High-Populated Locations" containing the following entries:

  1. United States

  2. Canada

  3. Mexico

  4. Guatemala

  5. Belize

  6. Bermuda (introduced)

  7. Hawaii (introduced)

Update the website preview to see if your code works.

Images

So far, our entire website has just been one massive block of text. Let's add some images to give it some flavor!

Images are put in HTML by using the <img> element. Unlike most elements, the <img>only has an opening tag. There is no "</img>" in HTML.

To use an <img> tag, you need to combine it with an "src," "width," and/or "height" attributes.

<img src="/assets/this-is-an-image.jpg" height="500">

The above code means it is taking an example image (we will get to this next), and forcing it to have a height of 500 pixels.

In our example website, we will use 2 images (and one video later on :D). Please download the images and videos to your Desktop from this Google Drive folder.

On Repl, look at the Files panel on the left side of the screen. Click the "Add Folder" icon as shown below.

Name the folder "assets" and click inside of it. Click the three dots as shown and click "Upload file."

Upload each individual file into your project. Drag those three files into your assets folder. It should now look like this:

If you're having difficulty, please reread the instructions or talk to a mentor,

Next, click back into your index.html file and add the following code to right under the <h3> "Images" in the Media section.

<img src="" height="500">
<img src="" height="500">

Notice how we didn't include a width attribute. This is because if we include just the height, the computer will calculate and apply a width that keeps the original proportions of the image.

Notice how the src field is blank. src is essentially a "link" to your files. Since our images are stored in the assets folder, our link to each file is /assets/filename.jpg, where "filename" is the name of the image. In the following task, you will add the necessary code to the src.

Task:

Add the cardinal-pair.jpg link to the first <img> tag. Add the cardinal-with-raspberries.jpg link to the second. Remember to add the "/assets/" to the beginning of the filename, since we put the files in an assets folder.

When you think you did it right, preview the page. Do the images look stretched? Do the images just not appear at all? Try changing some stuff. If you're still stuck, you can look at the above tab labeled "Code" to help.

Once finished, show your code to a mentor to double check that everything is correct.

Videos

As mentioned before, we can also add videos to our code!

Unlike images, videos have both an opening tag and a closing tag as shown below:

<video src="/assets/cardinal-caring-for-babies.mp4" height="500" controls>
    Video not supported.
</video>
<p>Video from https://www.youtube.com/watch?v=05POu0uob4Y.</p>

src and height are self-explanatory, but what is controls? What is "Video not supported"?

  • Controls: Adding the word "controls" before the closing angle bracket of the opening tag makes it so that the video player appears with controls (e.g play/pause, volume) rather than just the video itself.

  • Video not supported: This text will render in the event that the browser fails to access the video.

The paragraph element is just providing the source of the video (a YouTube video). It isn't anything special.

Task:

Copy the above code and place it under the <h3> "Videos" element. Remember to indent properly.

Finishing Up

Let's add some more code to our website to finish all of the blank sections.

Task:

Turn the following bullet points into an unordered list, and place it under the <h3> "Features" element.

  • Body length of 21–23 cm

  • Has a mask on the face. Males have black masks, while females have grey

  • Male is bright red; female is reddish olive grey

Add the following text as a <p>under the <h3> "Natural Environment" element.

Northern Cardinals generally live in woodlands, gardens, shrublands, and wetlands.

Show your final product to your mentor for your last quality check!

PreviousGetting Started With ReplitNextYour Very First Website!

Last updated

Was this helpful?