HELLO

Class #02

09/19/2018

Introduction to HTML

Agenda

• Warmup Exercise

• How the Internet Works

• Intro to HTML

• HTML Structure

• Image Tags

• Anchor (link) Tags

Warmup

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:

⇒ HTML

⇒ CSS

⇒ 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?

HTML

Content / Structure / Presentation

CSS

Style / Design

JavaScript

Behavior / Interaction

Example

HTML

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

<h1></h1>
Heading Tags

• Displays text as a title

• Tags <h1> through <h6>

• <h1> represents the most important title

• SEO: search engines pay attention to headings

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<p></p>
Paragraph Tags

• Used to group related chunks of text

• Like heading tags, browsers will apply default styling


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

  <p>
    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.
  </p>



		<ul>
		  <li> First Item </li>
		  <li> Second Item </li>
		  <li> Third Item </li>
		</ul>
List Tags: Unordered List

• <ul></ul> defines an unordered list

• <ol></ol> defines an ordered list

• Use together with <li></li>


  <ul>
    <li>Point Break (1991)</li>
    <li>Bill and Ted's Excellent Adventure</li>
    <li>Speed</li>
  </ul>
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'

HTML Structure: DOCTYPE

• The first line of an HTML document:


  <!DOCTYPE html>

• Document type declaration

• Tells browser the "flavor" of HTML

• Modern websites should use HTML5 doctype

1999

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

2012+

<!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:

<head></head>

<body></body>

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>
    <html>
    <head>
      <title>The Website Title</title>
    </head>

    <body>
      <h1>ALL HTML CONTENT HERE!</h1>
    </body>
  </html>
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>

• <html>

• <head>

• <title>

• <body>

<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:

HTML

CSS

JavaScript

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

Homework

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)