Module 4: HTML Basics

Congratulations on making it this far! It's time to finally start coding. We'll begin our foray with the web's humble but ever-present powerhouse: HTML.

Module 4 Deliverable

For this module, you'll be creating an HTML file. You can add this file to the prework folder on your computer and place it in the Module-4 subfolder.

What Is HTML?

HTML (hypertext markup language) is one of the three cornerstone languages used on every webpage in existence. While the syntax might seem daunting at first, by the end of the course, you will find it simple, straightforward, and completely painless.

HTML handles the basic markup of a page. This means that HTML is responsible for the simplest aspects of a website, including the following:

  • What text elements are on the page?

  • What images are on the page?

  • In what order will the elements appear?

  • Which text elements are the primary headings? Which are the secondary headings?

To draw a distinction, HTML won't be responsible for things like the following:

  • fanciful colors and layouts

  • snazzy effects on the page

  • complex user interactivity

HTML represents the bare skeleton of a webpage. CSS and JS are then used to add the fancy things like visual aesthetics, effects, and event-handling (such as form submissions and database interactions).

Tag, You're It

Every HTML document is made up of various pieces of contents wrapped in tags. These tags are most often represented by angle brackets (< tag >) with an associated tag name contained inside. We then insert the content between an opening and a closing tag so that our browser understands how to treat the content.

For instance, let's say we wanted HTML to style the following phrase in bold: "Coding Rocks!"

HTML Code:

<strong>Coding Rocks!</strong>

Visualized:

Coding Rocks

Notice how we made use of the opening <strong> tag and the closing </strong> tag to wrap the content. The browser then interprets this HTML: Hey. The developer wants this phrase to be in bold.

Don't worry, there are only a few dozen HTML tags out there, and after just a few weeks in the course, these will all become second nature.

Here are a few tags that you'll come across frequently:

  • title: Aptly named, this tag defines the title of the website as shown on the webpage's tab.

  • head, body: These tags help define the structure of the overall webpage. In essence, head contains invisible matter that the browser uses to render the page correctly, whereas the body tag represents the actual content shown to the user.

  • h1, h2, h3, h4, h5, h6: These tags represent the level of heading a given text block represents. Headings are exactly what they sound like; they are larger or more prominent elements of text on a page. They can be likened to topic sentences on a paper.

  • p: This tag represents paragraphs or blocks of text. You'll use this tag extensively to wrap most of the text on your webpages.

  • strong, em: These tags are used respectively to bold or italicize a given text element.

  • br: This tag is used to create a line of empty space between two blocks of content.

  • img: This tag is used to display images on a page. The syntax is slightly different (see below), but we will walk through its makeup later in the course.

  • a: This tag (which stands for anchor) is used to create links to the same webpage or to other webpages. Again, the syntax is slightly different, but you'll become comfortable using a tags as the course progresses.

  • ul, ol, li: These tags represent unordered lists, ordered lists, and list items. In essence, these HTML elements represent bulleted lists of symbols or numbers.

Hello, HTML

The best way to learn coding concepts is to actually code. So let's roll up our sleeves and get started!

1. Open Visual Studio Code.

2. Copy and paste the below code directly into your editor.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>Hello World!</title>
  </head>

  <body>
    <h1>Panda Fan Site!</h1>

    <p>
      I LOVE PANDAS!!! I LOVE PANDAS!!! I LOVE PANDAS!!! I LOVE PANDAS!!! I LOVE
      PANDAS!!!
    </p>

    <h2>Reasons I like Pandas</h2>

    <ul>
      <li>They are fuzzy</li>
      <li>They are cute</li>
      <li>They are adorable</li>
    </ul>

    <img
      src="http://images4.fanpop.com/image/photos/17800000/Cute-Panda-Cubs-Together-pandas-17838800-450-324.jpg"
      alt="Cute Pandas"
    />

    <br />

    <a href="http://www.pandafix.com/">PandaFix.com</a>
  </body>
</html>

3. Select File; Save As..., and save the file as My_First_Website.html on your desktop. 4. Right-click on your Visual Studio Code window and then click Open in Default Browser.

If all went well, you should see the following page show up on your screen.

Image of Panda Web Site showing added text, image and a list.

Rejoice! You just created your first HTML file.

If you're thinking, "But all I did was copy stuff," you're correct! In the next activity, you will work on an HTML file of your own. Start by taking a look at the example you just copied. Modify the site to match what's being asked for. If there are any pieces that are still a mystery, do a little Google searching. Trust us; you will learn what it all means after the first week of class.

Activity

Resources