Module #8 - HTML Hotness (Required)

Now that you've gotten some time flexing your Python muscles, let's switch gears to the language of the web. We'll begin our foray with the web's humble but everpresent powerhouse—HTML.

HTM... Huh?

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.

But what exactly is HTML?

In short, HTML handles the basic markup of a page. This means that HTML is responsible for the simplest aspects of our website—things like the following:

• What text elements are on the page?

• What images are on the page?

• Which element will come after which?

• Which text elements are our primary headers? Which are our secondary headers?

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

• Fanciful colors and layouts

• Snazzy effects on our page

• Complex user interactivity

As you will come to see, HTML effectively represents the bare skeleton of our webpage. We'll then use CSS and JS to add the fancy things like visual aesthetics, effects, and event-handling (like visual animations 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 (<>) with an associated tag name contained inside. We then insert our content in between an opening and a closing tag so that our browser will understand how to treat our content.

For instance, let's say I wanted HTML to style the following phrase in bold: "Coding Rocks!" To do this, I might write the below HTML.

Code:

Visualized:

What you can see in the above example is that we make use of the opening <strong> tag and the closing </strong> tag to wrap our content. The browser then interprets this HTML to understand—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 over-all 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 what level of header a given text block represents. Headers 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 bolden 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 you'll be walked further through its makeup during class.

• a - This tag (which stands for anchor) is used to create links to the same 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 - Lastly (for us), these tags represent unordered lists, ordered lists, and list items. In essence, these HTML elements represent bulleted lists of symbols or of numbers.

Hello, HTML

As with all things related to coding, there is no way to learn without coding yourself. So let's roll up our sleeves and get started!

1. To begin, open up your VS Code editor.
2. Next, copy and paste the below code directly into your editor.

   3. Then select File -> Save As..., and save the file as My_First_Website.html        somewhere on your desktop.

   4. Then right click on your Sublime window, and click Open in Browser.

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

   6. Rejoice!!! You just created your first HTML file.

But I just copied...

Yep. And that's what the next activity is for. It's time to work on an HTML file of your own!

But.... I wouldn't know where to start!

Sure you do.

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 means and why it matters by the middle of class.

Assignment (Required):

• Mah Bands!

Additional Reading:

• W3 Schools - Intro to HTML
• If you know nothing about HTML, this is where you start

Supplemental Resources (Recommended):

• CodeCademy - HTML Basics
• Code School - Intro to HTML

Copyright

Trilogy Education Services © 2017. All Rights Reserved.