GDI Logo

HTML 101

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • What is your favorite or dream vacation destination?

What is HTML?

HTML is the code that allows us to build websites

Screenshot of the Girl Develop It Homepage

What is HTML?

If you 'view the source', you see this

Screenshot of the Girl Develop It page source code

History of HTML

  • Invented by Tim Berners-Lee, first web page published August 6, 1991
  • Created "hypertext" to share scientific papers
  • Intended as a standard way to structuring documents
  • Standardized by W3C (World Wide Web Consortium - pack of super nerds)

History of HTML

  • HyperText Markup Language
  • Early 90s
  • HTML 4 in 1997
  • XHTML in 2000
  • HTML 5 in 2014

Terms

  • Web design: The process of planning, structuring and creating a website
  • Web development: The process of programming dynamic web applications
  • Front end: The outwardly visible elements of a website or application
  • Back end: The inner workings and functionality of a website or application.

Clients and Servers

How your computer accesses websites

Diagram showing computer connecting to server

Photo credit: Eric Lease Morgan

Tools

  • Browser
    • Chrome
    • Firefox
  • Development Toolkit
    • Chrome - Inspector
    • Firefox - Firebug
  • Text Editor

Get Started: Folder Structure

All the files for your site should be stored within the same folder.

This includes:

  • HTML Files
  • CSS Files
  • Images
  • Script files
  • Anything else that will appear on your site

Note: File names should not include spaces or special characters. File names ARE case sensitive.

Diagram showing html-site folder with sub-folder for images, https://d33wubrfki0l68.cloudfront.net/7c529751d33a899ed15499240e02d4b7c77342e4/a98a5/index.html, and styles.css

Goals

Soccer goal on beach

Photo credit: Cristiano Corsini cc

Final Project

Screenshot of a sample page

By the end of the class, you will have built a simple site using HTML and CSS on a topic of your choice. Here is one about rock climbing.

Anatomy of a Website

Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

Anatomy of a Website

Concrete example:

  • A paragraph is your content
  • Putting your content into a <p> HTML tag to indicate it is a paragraph is creating structure 
    <p>A paragraph is your content</p>
  • Making the font of your paragraph green and 24px is presentation

    A paragraph is your content

Anatomy of an HTML Element

  • Element
    • Building blocks of web pages - an individual component of HTML
    • Examples: paragraph, heading, table, list, div, link, image, etc.
  • Tag
    • Opening tag marks the beginning of an element & closing tag marks the end
    • Tags contain characters that indicate the tag's purpose 
      <tagname>Stuff in the middle</tagname>
      <p>This is a sample paragraph.</p>

Tag Breakdown

Tag breakdown

Anatomy of an HTML Element

  • Container Element
    • An element that can contain other elements or content
    • A paragraph (<p>) contains text
  • Stand Alone Element
    • An element that cannot contain anything else 
      <br />
<img />

Anatomy of an HTML Element

  • Attribute
    • Provides additional information about the HTML element
    • Placed inside an opening tag, before the right angle bracket.
    • Examples: class, id, language, style, source
  • Value
    • Value is the value assigned to a given attribute.
    • Values must be contained inside quotation marks. 
      <div id="copyright">©Girl Develop It logo 2016</div>
<img src="my_picture.jpg" />
<a href="http://girldevelopit.com">Girl Develop It</a>

Doctype

The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>

* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.

HTML Tag

After <doctype>, the page content must be contained between <html> tags.

<!DOCTYPE html>
<html>

</html>

Head and Body Tags

Head: The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines.

Body: The body contains the actual content of the page. Everything that is contained in the body is visible to the user.

Head and Body Tags: Example

example of head and body

Head and Body Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page </title>
  </head>
  <body>
    The page content here.
  </body>
</html>

Let's Develop It!

Let's get our web page set up with a doctype, head, title and body.

Later we'll add some content.

Nesting

All elements "nest" inside one another

Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the <p> inside of the <body> tags. The <p> is now nested inside the <body>

Nesting Order

Nesting owl dolls

Whichever element OPENS first CLOSES last

Nesting: Example

Elements are 'nested' inside the <body> tag.

<body>
  <p>A paragraph inside the body tag</p>
</body>

Paragraphs 'nested' inside list items.

<ul>
  <li>
    <p>A paragraph inside a list item</p>
  </li>
</ul>

Element: Paragraph

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 1</p> <p>Paragraph 2</p>  <p>Paragraph 3</p>
<p>Paragraph 1</p>


<p>Paragraph 2</p>
<p>Paragraph 3</p>

Paragraph 1

Paragraph 2

Paragraph 3

* White space is only for humans. You can write your code with any spacing.

Example: Paragraphs

Paragraphs allow you to format your content in a readable fashion.

Example of Paragraphs in the wild

* You can edit how paragraphs are displayed with CSS

Element: Heading

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

* Heading number indicates hierarchy, not size. Think of outlines from high school papers

Example: Headings

Example of headings

Formatted Text

<p>
  Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>

Here is a paragraph with Emphasized text and Important text.

* Notice: em and strong are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.

Let's Develop It!

Let's add some content to our site!

Add one of each level of heading with 1-2 short paragraphs of text below each heading.

Use <strong> and <em> within a few paragraphs.

Element: Link

Links have three components

  • tag: <a></a>
  • href attribute: "http://www.girldevelopit.com"
  • title attribute: "Girl Develop It"
<a href="http://www.girldevelopit.com" title="Girl Develop It">Girl Develop It</a>

Girl Develop It

The <a> tag surrounds text or images to turn them into links

Link Attributes

Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.

<a href="home.html" target="_blank">Link Text</a>

Link opens in a new window/tab with target="_blank"

<a href="mailto:sponsorships@girldevelopit.com">E-mail us!</a>

Adding mailto: directly before the email address means the link will open in the default email program.

Relative vs. Absolute Paths for Links & Images

  • Relative: paths change depending on the page the link is on.
    • Links within the same directory need no path information. "filename.jpg"
    • Subdirectories are listed without preceding slashes. "img/filename.jpg"
  • Absolute: paths refer to a specific location of a file, including the domain.
    • Typically used when pointing to a link that is not within your own domain.
    • Example: https://www.girldevelopit.com/chapters/san-francisco

Element: Image

Images have three components

  • tag: <img />
  • src attribute: "https://assets.brandfolder.com/4btx26fz/original/circle-gdi-logo.png"
  • alt attribute: "Girl Develop It logo"
<img src="https://assets.brandfolder.com/4btx26fz/original/circle-gdi-logo.png"
alt="Girl Develop It logo"/>

* Notice: This tag is our first example of a stand-alone or "self-closing" element.

Element: Line Break

<p>
  Imagine there's no Heaven<br/>
  It's easy if you try<br/>
  No hell below us<br/>
  Above us only sky
</p>

Imagine there's no Heaven
It's easy if you try
No hell below us
Above us only sky

* Note: It's not good convention to put line breaks inside paragraphs. These lines are grouped together as a block of song verse, but we'll soon learn about better container tags to use...

Let's Develop It!

Let's add links, images, and line breaks to our site!

  • Add at least one image and line break to your page.
  • Add links that 1) open in the same window 2) open in a new window and 3) link to an e-mail address.
  • Turn the image you added into a link.

Element: Unordered and Ordered Lists

<ul>
  <li>List Item</li>
  <li>Another List Item</li>
</ul>
<ol>
  <li>List Item</li>
  <li>Another List Item</li>
</ol>

Unordered list (bullets)

  • List Item
  • Another List Item

Ordered list (sequence)

  1. List Item
  2. Another List Item

Lists: Examples

Lists can be used to organize any list of items.

Examples of lists

You'd be surprised how often lists are used in web design.

Let's Develop It!

Let's add one of each ordered and unordered lists to our page.

We can make a list of links or even a list of images!

Comments

You can add comments to your code that will not be seen by the browser, but only visible when viewing the code.

<!-- Comment goes here -->

Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.

<!-- Beginning of header -->
<div id="header">Header Content </div>
<!-- End of header -->

<!--
<ol>
<li>List Item</li>
<li>Another List Item</li>
</ol>
-->

Tables

Tables are a way to represent complex information in a grid format.

Tables are made up of rows and columns.

<table>
  <tr>
    <th>Head</th>
    <th>Head</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>
Head Head
Data Data

Tables: Examples

Tables can be styled with CSS to add zebra striping or to highlight important rows/columns.

Example of tables

Character Codes

There are character codes for many different characters in many different languages

  • Delta: &delta; δ
  • Copyright symbol: &copy; ©
  • Grave: &grave; `
  • An grave a: &agrave; à
  • A full list is available at htmlandcssbook.com
Example of Characters

Inline vs Block

So far, we have mostly seen "block" elements. They appear on the next line, like paragraphs.

There are also "inline" elements. They appear on the same line that they are written on.

example of inline and block elements

Block & Inline Elements

  • CSS divides HTML into two types: inline and block.
  • After block elements, browsers render a new line.
  • Inline elements: img, a, br, em, strong
  • Block elements: p, h1, ul, li, almost everything else

Element: div

  • Block level element. Each new div is rendered on a new line.
  • A division, or section of content within an HTML page.
  • Used to group elements to format them with CSS.
  • Apply IDs and Classes to divs to control their styles with CSS.

Div Examples

<div>
  <p>Content<p>
  <p>Content<p>
</div>
<div>
  <h1>Main Heading<h1>
</div>
<div>
  <p>Some more content<p>
</div>

Grouping Elements with div

  • The div tag is used everywhere to group elements together into sections.
  • You can wrap groups of elements in a div to style them differently.

Grouping Elements with div, Cont.

<div style="color: purple;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p>Magna aliqua. Ut enim ad minim veniam.</p>
<p>Quis nostrud exercitation ullamco.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Sed do eiusmod tempor incididunt ut labore et dolore.

Magna aliqua. Ut enim ad minim veniam.

Quis nostrud exercitation ullamco.

HTML5

HTML5 offers new elements for better document structure and semantics

Some of the most commonly used new tags include:

<header></header>
<nav></nav>
<article></article>
<section></section>
<main></main>
<footer></footer>

A full list can be found here.

Let's Develop It!

Let's create a site using divs to separate content into different sections on our page.

Create a header, content area, sidebar, and a footer.

Sample Code

A page divided into divs might look like this:

<!doctype html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <div id="header">
      <h1>My Page Title</h1>
    </div>
    <div id="content">
      <p>The main content</p>
    </div>
    <div id="sidebar">
      <p>Some stuff in a sidebar</p>
    </div>
    <div id="footer">
      <p>Copyright me</p>
    </div>
  </body>
</html>

Sample Code: HTML5

A page divided using HTML 5 elements might look like this:

<!doctype html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <header>
      <h1>My Page Title</h1>
    </header>
    <main>
      <p>The main content</p>
    </main>
    <aside>
      <p>Some stuff in a sidebar</p>
    </aside>
    <footer>
      <p>Copyright me</p>
    </footer>
  </body>
</html>

Element: span

  • Inline element. Each new span is rendered next to each other & only wraps when it reaches the edge of the containing element.
  • Can be used to apply styles to text inline so as not to break the flow of content.

Span

span is used to apply a specific style inline

<p>Paragraph with <span style="color:teal;">teal</span> text.</p>

Paragraph with teal text.

Let's Develop It!

Let's add some spans to our content to help highlight some text.

Questions?