Skip to content

HTML

Jump to bottom
Hurshal Patel edited this page Oct 3, 2016 · 2 revisions

What is HTML?

HTML stands for Hyper Text Markup Language. This means that you can use it to take text and mark portions of it to be bold, colored, centered, big or small, and many other things. In modern websites, HTML along with CSS and Javascript (which we will discuss later in the class_) allow you to build interactive, animated, and exciting applications like YouTube, Twitch.tv, games, Instagram, etc.

HTML Tags

A tag is simply a part of a webpage that has < and > (angle brackets). Tags are used to give special meaning to a part of your page. For example, you can make some text link to another page, or you can center an image on the page. An example of a tag is <p> which is a paragraph tag for annotating a paragraph of text, or <a> which is an anchor tag that links from one page to another. We'll learn some of the most common tags today.

Basic HTML Structure

Every HTML page has a structure to it which the browser understands. Here is a basic example:

<!doctype html>
<html>
  <head>
    <title>Mittens for Kittens</title>
  </head>
  <body>
    <h1>NEW! Kitten Mittens!!</h1>
    <p>
      Cloth footwear for cats. The goal is to make them quieter
      when they walk around
    </p>
  </body>
</html>

There are a couple tags here, and we will describe what each one does.

  • <!doctype html>: this tells the browser that this document contains HTML so it should display it accordingly.
  • <html> and </html>: these tags mark the beginning and end of the HTML page.
  • <head> and </head>: these tags contain the description or "metadata" for the page.
  • <title>Mittens for Kittens</title>: this tells the browser to put "Mittens for Kittens" in the title bar of your browser.
  • <body> and </body>: these tags contain the "meat" of the page - everything which will be shown in the browser window.
  • <h1>NEW! Kitten Mittens!!</h1>: this makes the text "NEW! Kitten Mittens!!" formatted as "Heading 1" (read: big text).
  • <p> and </p>: these tags mark a "paragraph" of text. The text inside these tags is displayed with some space above and below.

Project: Home Page

In your website repository (username.github.io), update your index.html to be a proper HTML document like the example above. Make sure you change the text to be your own!

Once you have updated your index.html, commit it and sync it with your Github repository. Now your updated page should be live!

Project: Embed

Make a separate video.html file. Link to it from the home page with an a tag. Find a cool YouTube video and embed it in this page.

You can make links using the "anchor" tag.

<a href="http://google.com">This is a link to google</a>
<a href="/blah.html">This is a link to blah.html on the current website</a>

Project: Images

Make an images.html file. Link to it from the home page with an a tag. Download a few cool images or take some photos with Photo Booth and add them to your page with img tags.

Resources

Clone this wiki locally