Class #02


Introduction to HTML



Warmup: GitHub Refresher

1. Open your Github repo in SublimeText (click and drag)

2. Create a new directory, class-work, inside of your repo

3. Create a new file, index.html, inside of class-work

4. Add some HTML to this file

5. Commit these changes

6. Push these changes to the cloud

7. Check https://github.com to ensure changes have been made

How the Internet Works

How the Internet Works: An Analogy
How the Internet Works
How the Internet Works

• Websites are really just collections of files:



⇒ JavaScript

• Hosted on specialized computers ⇒ servers

• Goals for FEWD: create/organize/host these files

What Are HTML, CSS, and JavaScript Files?

• Plain text files (they are not compressed; you can read them)

• Different file extensions:

HTML => .html

CSS => .css

JavaScript => .js

• Each file type has a particular responsibility

What Are HTML, CSS, and JavaScript?


Content / Structure / Presentation


Style / Design


Behavior / Interaction



HTML: History of HTML

• HTML => Hypertext Markup Language

• Invented in 1989 by Sir Timothy Berners-Lee

• Majority of the websites you've visited are rendered in HTML

• Web browsers parse (read) HTML and render (display) the results

HTML Elements

• Fundamental building-block of HTML is the element

• Most elements consist of:

⇒ Opening tag: <p>

⇒ Content: text, image, video, other elements, etc.

⇒ Closing tag: </p>

• The content is what the user sees

• The tags tell the browser how to present the content

• Note: Some tags do not have a closing tag: <img>, <hr>

HTML Elements: Anatomy

• The user will only see "Hello world!"

• The browser applies styling to <p> elements

HTML Tags Review

Heading Tags

• Displays text as a title

• Tags <h1> through <h6>

<h1> represents the most important title

• SEO: search engines pay attention to headings





Paragraph Tags

• Used to group related chunks of text

• Like heading tags, browsers will apply default styling

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Dolores corporis perspiciatis amet autem sapiente fugiat sunt.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Dolores corporis perspiciatis amet autem sapiente fugiat sunt,
    labore eum totam facere, assumenda
    magni nobis sequi cumque dolore officiis laudantium. Ea, beatae.

		  <li> First Item </li>
		  <li> Second Item </li>
		  <li> Third Item </li>

List Tags: Unordered List

<ul></ul> defines an unordered list

<ol></ol> defines an ordered list

• Use together with <li></li>

    <li>Point Break (1991)</li>
    <li>Bill and Ted's Excellent Adventure</li>

Code Along: GA Press Release

1) Download starter code

2) Open ga-press-release.txt

3) Open a new http://codepen.io

4) Describe ga-press-release.txt using HTML

5) Make sure you do not exit your CodePen!

5 minute break

HTML Structure

1. Open any webpage

2. Right-click

3. 'View Page Source'


• The first line of an HTML document:

  <!DOCTYPE html>

• Document type declaration

• Tells browser the "flavor" of HTML

• Modern websites should use HTML5 doctype


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">


<!DOCTYPE html>

HTML Structure: <html>

<html> is HTML...

• All HTML should live between <html>...</html>

• Represents the root of your HTML document

• Within our <html> tags, we have:



HTML Structure: <head>

<head> is the first tag inside <html>

• Adds additional, behind-the-scenes content

• Not displayed, but is machine parsable

<title> : adds title to page

<meta> : adds data...about data (keywords, author)

• External CSS documents are linked in the <head>

HTML Structure: <body>

<body> is the second tag inside <html>

• Follows the <head>

• Holds content for the user to see

• Majority of HTML lives here

HTML Structure: Basic Structure

  <!DOCTYPE html>
      <title>The Website Title</title>

      <h1>ALL HTML CONTENT HERE!</h1>

Exercise: GA Press Release (ctn)

1. Create a directory, homework in your repo

2. Create a directory, ga-press-release, in homework

3. Create an index.html file inside ga-press-release

4. Copy your code from CodePen into index.html

5. Save your code and right-click to open in browser

Exercise: GA Press Release (ctn)

1. Restructure the page using proper HTML

2. Include:

<!DOCTYPE html>





<img> tags

<img> tags

• Images are placed using the <img> tag

<img> has no closing tag

• Requires a src attribute

• Both are valid:

	<img src="cookie.png">

	<img src="cookie.png"/>

src attribute

• The src attribute can be a relative/absolute path:

• Relative:

  <img src="cookie.png">

• Absolute:

  <img src="http://matrix.espaciolatino.com/keanu1/kean006.jpg">

Exercise: GA Press Release (ctn)

1. Search Google images for "General Assembly"

2. Save an image as logo inside ga-press-release

3. Add an <img> tag that points to this image in index.html

  <img src="IMAGE_NAME_HERE">

What is a website?

A collection of files:




Can you have more than one html file?

Anchor Tags

Anchor Tags

<a> tags navigate between HTML pages

href attribute tells the browser where to go:

  <a href="https://generalassemb.ly">General Assembly</a>

• Wrapped content is displayed: General Assembly

• Like images, anchor tags use relative/absolute paths

Homework: GitHub Portfolio + Resume

1. Open the root of your Github repo (where index.html is)

2. Add a new file, resume.html, to the same directory

3. Ensure index.html and resume.html use proper HTML structure

4. Add two <a> tags to index.html:

Absolute: link to your page of choice (LinkedIn, portfolio, etc)

Relative: link to resume.html

5. Add a <a> tag to resume.html that links back to index.html


1. Finish ga-press-release

2. Finish your portfolio index.html and resume.html

3. Complete the Dash Pre-work (projects 1 - 3)

On Deck: Class #03 - Introduction to CSS

• Introduction to CSS

• Common CSS Properties (colors, font, text)