Previous
 The World Wide Web 

Introduction to HTML

Next 
No site found for btvca-curriculum.herokuapp.com; using Bootcamp content.

Intro to HTML

  • Stands for Hyper-Text Markup Language.
  • Every HTML file is one web page.
  • Invented by Sir Tim Berners-Lee
  • Based on SGML
  • Standard language used for creating web pages.
  • Composed of tags
  • CSS and JavaScript are designed to work in tandem with HTML
  • HTML is for structuring content. It does not perform complex computations.

What Is It?

HTML is a coding language composed of various types of tags, also known as elements. These are what are used to build web pages.

  • HTML is used to build web pages by using tags.
  • Web browsers "read" HTML and render it as pretty visual elements for humans.

Standard Page Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My House</title>
  </head>
  <body>
    <p>My house is a very very very fine
     house, with two cats in the yard.</p>
    <p>Life used to be <strong>so
     hard</strong>; now everything is
     easy cause of you.</p>
  </body>
</html>

Elements (aka Tags)

Lets break down the page structure above. You can see above, all HTML tags are surrounded by angle brackets. You can also see that every tag has what is known as a closing tag. These are the tags that have a preceeding forward slash. For the most part, every HTML tag needs to have a closing tag.

Examples of Structural Tags (Layout)

tag meaning
<head> head (contains metadata)
<body> page body
<div> division
<h1> Heading (level 1)
<p> Paragraph containing text
<span> Text without a line break
<img> Image tag
<link> Link tag
<style> Style tag

Examples of Style Tags

tag example
<b> bold
<i> italic
<strong> strong
<em> emphasis
<br> Line break
<hr> Horizontal rule (dividing line)
<blockquote> "call-out" quotation
etc.

Lab: Create a Web Page

That's enough theory! Let's build something!

  • Open up VSCode and create a file named index.html
  • Type out your page structure following the example on the "Standard Page Structure" slide
  • Or use emmet abbreviations by typing an exclamation point ! and hitting Tab
  • Add an h1 tag in the body of your document, and some text inside the h1
  • Enter open index.html into your terminal if you're on a Mac
    • or on Windows, use start index.html
    • or enter pwd and copy and paste the directory path into your browser (chrome), then click on the index.html file
    • or drag your html file directly into your browser window

Self Closing Tags

Some tags can act as both an opening and a closing tag. These are written with a forward slash at the end, and are most commonly seen for tags that insert something into the page such as an image, or a line break. e.g. <img src="myImg.jpg" /> is a self closing image tag.

Attributes

Attributes further define HTML elements and their purpose. For example, an image tag may have the following attributes:

<img src="/images/cat-pic.jpg" title="Cat Picture" alt="Picture of a fuzzy cat">
  • src defines where the image file is located.
  • alt is alternative text to be displayed if the image cannot be.
  • Attributes are not always required. However in the example above, a source is needed for the image to be displayed.
  • Others include style (for inline CSS), title (for hover-over tooltips), href (hyperlink reference)
  • Attribute names should always be lowercase

Lab: Adding Attributes

Let's add a few attributes to the h1 in the HTML file we just created.

  • Give your element an id
  • Change the color of your text using the style attribute and setting it to a key:value pair
    • e.g. style="color:red"
  • Add an image to your page

Style vs Layout vs Semantics

This war has raged inside HTML since the beginning of the web.

Some tags exclusively describe how it's contents should be displayed (ex. <b>), where as some describe it's contents (ex. <strong>). Web content isn't just about appearence. It matters how it is intepreted.

  • Semantics are all about meaning - what is the purpose?
  • Not all HTML elements convey meaning - not all HTML elements are semantic (e.g. div).
  • Imagine a blind person using a screen reader - how might they understand the difference between a <strong> and a <b> tag?
  • Not all elements style content, and not all elements define structure or layout.

Tables

  • Tables are comprised 4 elements: <table>, <tr>, <th>, and <td>
  • Tables are a way of structuring data into rows and columns.

Example Table structure:

<h1>Grocery List</h1>
<table>
  <tr>
    <th>Fruit</th>
    <th>Grains</th>
    <th>Dairy</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>White Rice</td>
    <td>Milk</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>Oatmeal</td>
    <td>Yogurt</td>
  </tr>
</table>

The Result

Grocery List

Fruit Grains Dairy
Apples White Rice Milk
Bananas Oatmeal Yogurt

Lists

  • Two main types of HTML lists: ordered and unordered.
  • <ul> describes a unordered list
    • this list
    • is unordered
  • <ol> describes an ordered list.
    1. this list
    2. is ordered
<ul>
  <li>Pizza</li>
  <li>Pasta</li>
  <li>Bread</li>
</ul>

The Result

  • Pizza
  • Pasta
  • Bread

Commenting with HTML

  • Commenting is important in any form of coding.
  • Comments help both you and others to better understand the intent of the code.
  • Especially helpful when reviewing large amounts of code.

Comments in HTML are not read by browsers. They use the following syntax:

<!-- This is a comment! -->

  • Note that no closing tag is necessary. Comments can also be used to temporarily disable a block of code. For example:
<!-- I don't want this to be shown because it is silly
<body>
    <div>
        <p>I do not want this content to be shown</p>
        <img src="/images/dog-pic.jpg" alt="this is a doggo" title="Doggo">
    </div>
</body>
-->