Welcome!

Please download the course slides, and install Sublime Text. Link and slides available here:   www.andreajessup.com  

Wifi Name: Improving Guest

NO PASSWORD :)

Bathroom Code: 5600*

Beginning HTML and CSS

Class 1

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 childhood game?

What is this course for?

You're going to learn HTML, the basic language used to create websites, and CSS, the tool we use to control the appearance of our sites.



YOU'RE GOING TO MAKE A WEBSITE!!



(Actually, you'll make two websites.)

But first ...

Let's make sure we're all using the same language and definitions as we talk about the web, our tools, and what we're doing here.

Terms & Definitions

  • 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. Tools include languages like HTML and CSS, web browsers, and a development environment.
  • Back end
    The inner workings and functionality of a website or application. Tools include languages like Java, PHP, and Ruby, as well as web browsers and a development environment.

Terms & Definitions

A Website

A website is actually a file or collection of files. Browsers open the file and interpret the contents, then display them to the user as intended by the developer. (Pretty much). The contents of the file can instruct the browser to display text, colors, images, links, and more. The file can also include instructions about how the site should behave, though that is covered in a later course.


Terms & Definitions

Browser

A browser (Firefox, Chrome, Internet Explorer, Opera, Netscape, etc.) is a computer application that displays certain file types, usually for websites. In the same way that Microsoft Word can display .doc, .docx, .txt, and other types of files, browsers can handle .html, .jsp, .php, and many other file types. And like Word, the browser does not display the code that is included in those files. Instead it interprets that code and displays it as website, with images, colors, words, and structure.

Terms & Definitions

The Internet

Your computer (the "client") is connected to the internet, which allows you to access a collection of files (a website) that are stored on someone else's server (also connected to the internet).

Browsers vs. the Internet

  • You can use a browser without an internet connection because it's just a program for reading files.
  • In other words, a website is just a collection of files.
  • In this class, we learn how to write the files that can make up a website, using HTML and CSS.
  • Learning how to actually get hosting and put your site on the internet for others to see is reserved for another class.

Our Tools

  • Browser
    Chrome
    Firefox
  • Development Toolkit
    Chrome - Inspector
    Firefox - Firebug
  • Text Editor
    Sublime Text - Linux, Mac or Windows
    TextWrangler - Mac
    Notepad ++ - Windows
    gedit - Linux

Get Started: File Structure

If a website is a collection of files, then the first step in making our website is to create our files/file 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.

Let's develop it!

Let's get our folder structure set up so we're ready to create our site

  • Download the file at http://www.andreajessup.com/GDI-IntroHTML.zip
  • Extract that file to your desktop (ask for help if you need it!)
  • Open the index.html file in SublimeText and Chrome.
  • In SublimeText, change some of the text in the index.html file. Then go back to Chrome where you have the index.html file open and refresh the page (hit the "refresh" button, or use a keyboard shortcut: COMMAND-R on a Mac, CTRL-R on a PC). So exciting!

Anatomy of a website

A website is made up of three components: your Content, the Structure, and the Presentation.

The "stuff" in your site: Content
+ HTML: Structure
+ CSS: Presentation
= Your Website

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

In today's class, we'll focus on HTML - the structure of your site

Anatomy of a website

Concrete example
  • The actual information you want on your site is the Content

  • Putting your content into an HTML p element because it is a paragraph is Structure

  • Making the font of your paragraph blue and 18pt is Presentation

What we'll be building today

Today we will be learning how to code a site in HTML using paragraphs, headings, links, images, and lists.

History of HTML

  • Invented by Sir Tim Berners-Lee
  • Created "hypertext" to share scientific papers
  • First web page August 6, 1991
  • Standardized by w3 Consortium

What is HTML?

If you 'view the source', you see this

What is HTML?

  • What is all that?
  • How does the browser know what to do with website content?
  • How does a browser read a file?

HTML Elements

Anatomy of an HTML element

  • Element
    • An individual component of HTML
    • Paragraph, heading, table, list, div, link, image, etc.
  • Tag
    • Marks the beginning & end of an element
    • Opening tag and Closing Tag
    • 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
    • 
       <p>Some Text</p>
      
      
  • Stand Alone Element
    • An element that cannot contain anything else
    • 
      <br/>
      
      <img/>
      
      

Anatomy of an HTML Element: Nesting

All elements "nest" inside one another

Nesting is what happens when you put other containing tags inside other containing tags.

Whichever element OPENS first CLOSES last

Nesting: Example

Whichever element opens FIRST closes LAST.

<p>
  <ul>
    <li>
      <i>
        This is some content!
      </i>
    </li>
    <li>
      <i>
        This is some content!
      </i>
    </li>
  </ul>
</p>

Starting Our HTML Page

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, one of which is to tell search engines about your page, who created it, and a description.

Body: The body contains the actual content of the page. This is what is displayed to the user when they visit your site.

Each html file has exactly 1 head element and 1 body element.

Head and Body Tags


            <!DOCTYPE html>
            <html>
               <head>
                Information about the page here.
               </head>
               <body>
                The page content here.
               </body>
            </html>
          

Title tag

When you look at the top of a tab in your browser, you can see some text telling you what site you are on. This is the page Title.

The Title tag must be nested inside of the Head tags.

This will be our first time adding content to the inside of a tag:


            <head>
              <title>My Page Title</title>
            </head>
          

Let's develop it!

Let's get our basic website set up.

  1. Open up the directory/file that you downloaded at the beginning of class.
  2. Open the file "index.html" in SublimeText.
  3. In SublimeText, add the following code to the file:
    <!DOCTYPE html>
     <html>
        <head>
           <title>Title of the page </title>
        </head>
        <body>
           Write someting interesting here, just for fun
        </body>
     </html>

When you're done, open this file in Chrome. The page will show the "interesting text", and the tab will show the title!

Body Elements

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 outlines from high school papers

Example: Headings

Example of headings

Element: Paragraph

<!-- Ex. 1: -->
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
<!-- Ex. 2: -->
  <p>Paragraph 1</p> <p>Paragraph 2</p>  <p>Paragraph 3</p>
<!-- Ex. 3: -->
  <p>Paragraph 1</p>


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

All 3 examples produce the same output. White space is only for humans!

Paragraph 1

Paragraph 2

Paragraph 3

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

Formatted text


<p>
  Here is a paragraph with <em>Emphasized</em> text.
</p>
<p>
  Here is a paragraph <strong>Important</strong> text.
</p>

Here is a paragraph with Emphasized text.

Here is a paragraph with Important text.


<em> and <strong> are meant to indicate meaning through code. If you want to have italicized text just for style/appearance, you should use CSS.

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



Let's Develop it!

In SublimeText, add the following to your index.html file (the same you worked on before).

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

- Create some emphasized and strong text within a few paragraphs.

- Add a line break in the text somewhere as well.

- When you're done, refresh the file in Chrome to see the changes!

Remember, content goes between our opening and closing <body> tags

HTML Basics: Nested Structures

Some elements are more complex, and require more than one set of tags to be complete. "Elements" such as lists and tables are actually made up of a collection of nested elements.

Element: Unordered and ordered lists


  <p>Unordered list (bullets)</p>
  <ul>
    <li>List Item</li>
    <li>Another List Item</li>
  </ul>




  <p>Ordered list (sequence)</p>
  <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.

Tables

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

Tables are made up of rows and columns.

<table>
  <tr>
    <th>Left Head Cell</th>
    <th>Right Head Cell</th>
  </tr>
  <tr>
    <td>Data Cell 1</td>
    <td>Data Cell 2</td>
  </tr>
  <tr>
    <td>Data Cell 3</td>
    <td>Data Cell 4</td>
  </tr>
</table>

Left Head Cell Right Head Cell
Data Cell 1 Data Cell 2
Data Cell 3 Data Cell 4

Tables: Examples

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

Example of tables

Let's Develop it!

Again working on index.html in SublimeText, add more content between the <body> tags:

Add an ordered list and an unordered list to our page.

Add a small table to our page as well.


When you're done, refresh/open index.html in Chrome to see your changes

Anatomy of an HTML element

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

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="GDI Homepage">GDI</a>

GDI

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:info@girldevelopit.com">E-mail us!</a>
          

Link opens mail program by inserting mailto: directly before the email address.

Element: Image

Images have three components

  • Tag: <img/>
  • Src attribute: "http://girldevelopit.com/assets/pink-logo.png"
  • Alt attribute: "Girl Develop It logo"

<img src="https://www.girldevelopit.com/assets/gdi-logo.png" 
     alt="Girl Develop It Logo"/>
Girl Develop It Logo

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

Relative vs. Absolute paths for links & images

  • Relative
    • Change depending upon the page the link is on.
      • Links within the same directory need no path information. "filename.jpg"
      • Subdirectories are listed without preceding slashes. "images/filename.jpg"
  • Absolute
    • Refer to a specific location of a file, including the domain. "http://www.girldevelopit.com/chapters/detroit"
    • Typically used when pointing to a link that is not within your own domain.

Relative vs Absolute Paths

Relative Path Example:

Can you find the Apple Store?

  1. From here, turn right onto a street named Easton Oval
  2. Turn right onto a street called Stelzer
  3. Turn left onto a street called Worth
  4. Turn left onto a street called The Strand
  5. The Apple Store is on your left. (Good luck parking)


Absolute Path Example:

Can you find the Apple Store?

40.054042, -82.914596

Relative vs. Absolute paths for links & images

Relative paths are just instructions to the browser so it can navigate the file structure of your website.

  • If your file has a link to another file that is in your same directory, you can just name the file - no additional directions needed! "filename.jpg"
  • But if the browser needs to look in a different folder for the file, you have to tell it how to get to that folder (turning instructions) and what it is called (the street name):"./images/filename.jpg"

Relative vs. Absolute paths for links & images

Absolute paths refer to a specific location of a file, including the domain.

  • "http://www.girldevelopit.com/chapters/detroit"
  • Typically used when pointing to a link that is not within your own domain.
  • When developing locally, you can put in an absolute path to a file on your own file system: file:///Users/andreajessup/Sites/GirlDevelopIt_IntroHTML/GDI_IntrolHTML_Redo/class1.html#/50But this won't work if you try to open your site on a different computer.

Let's Develop It

Add links that open in the same window, a new window and link to an e-mail address.

Add one image that is in your filesystem (relative path) and another from someone else's site (absolute path).

For the relative path exercise, if you don't have an image on your computer you like find one on the internet then copy/save it to the "images" folder you created in your website folder. The value for the "src" attribute will be: "images/filename.jpg" where filename.jpg is ... your filename!

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

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

Let's Develop It!

Add a copyright statement (with the proper symbol) to the bottom of your site

Add a comment somewhere in the site that tells you what style you'd like to add to that element next week. For example:


            <!-- Make this h1 content red and underlined -->
            <h1>This is a header!</h1>
          

Questions?

?