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!

Students!

  • Who are you?
  • What do you hope to get out of the class?
  • What is your favorite animal (real or mythical)?


TAs!

  • Who are you?
  • What do you do with technology?
  • How old were you when you wrote your first line of code?

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'll create two websites:


The first, created in the first 2 classes, will allow you to learn the basics of HTML and CSS through example code you write yourself.

The second website will allow you to apply what you've learned in the first 2 classes, plus some more advanced concepts, to create a basic website for your own content.

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 development
    The outwardly visible elements of a website or application. Tools include languages like HTML and CSS, web browsers, and a text editor.
  • Back end development
    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

  • Website
    A website is just a file or collection of files. The contents of the file are instructions to the browser telling it to display text, colors, images, links, and more.
  • Text Editor
    A program or application that we use to write code in. Text editors usually provide color coding and formatting that is specific to particular programming languages.
  • Developer Tools
    A set of tools in your browser that allows you to look at the code behind a website, and even interact with that code. Ex: Chrome's DevTools, Firefox's "Firebug"

Terms & Definitions

Browser

A computer application (Firefox, Chrome, Internet Explorer, etc.) that can interpret certain file types. In the same way that Microsoft Word can display .docx files, browsers can handle .html (and other) files. Like Word, the browser does not display the code that is included in those files. Instead it interprets that code and displays it as a website, with images, colors, words, and structure.

Terms & Definitions

The Internet

The internet allows multiple people to access the same content regardless of location (mostly). 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 computer (a server) which is 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 (or a collection of files, like a website).
  • 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.

Get Started: File Structure

Since a website is a collection of files, the first step in making our website is to create the file structure.

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

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

Download the initial file structure for our site and open all of our tools.

  1. Download the file at http://www.andreajessup.com/GDI-IntroHTML.zip
  2. Extract that file to your desktop.
  3. Open the index.html file in Chrome.
  4. Open index.html in SublimeText. Add your own text and save your changes.
  5. Go back to Chrome and refresh the page. Make sure you can see the changes you made to the file in SublimeText.

Anatomy of a website

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

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

  • Putting that content into an HTML <p> element because it is a paragraph is Structure

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

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

History of HTML

  • Invented by Sir Tim Berners-Lee (trivia question)
  • First web page August 6, 1991 (it's been around awhile)
  • Standardized by w3 Consortium (not owned by any particular browser company)
  • Created "hypertext" to share scientific papers


HTML was originally created to provide both structure AND presentation to scientific/academic papers. Modern websites are more than academic papers, and HTML is no longer sufficient for the presentation of our sites. Hence the second part of this course, CSS.

What does HTML look like?

  1. Go to http://www.girldevelopit.com in chrome
  2. Right click anywhere on the page
  3. In the menu that appears, choose "View Source" or "View Page Source"

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 have a name that indicates the tag's purpose
    • 
      <tagname>Stuff in the middle</tagname>
      <p> This is a sample paragraph.</p>
      
      

How a Human Writes HTML

  • In HTML, we put tags around our content - opening tag, then content, then closing tag.
  • The opening tag has instructions to the browser about how to treat content, and tells the browser to start following those instructions for all content after that opening tag.
  • The closing tag tells the browser to stop applying those previous instructions.

Tag Breakdown

Tag breakdown

How A Browser Reads HTML

  • The browser needs to differentiate between HTML tags and content, and it needs to tell opening tags from closing tags.
  • A browser is a computer application, not a human - it can't apply context to what it reads.
  • To tell the browser that we are starting an opening tag we use a special character: <
  • To tell the browser that we are starting a closing tag, we use the opening character plus a slash: </
  • To tell the browser what that tag is instructing it to do, we include a tag name, such as p, ol, etc.
  • To tell the browser that we are ending a tag, we use another special character: >

Types of HTML Elements

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

Nesting: Example

All elements "nest" inside one another - you put elements inside of container elements, inside of container elements…

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 that the document is of type HTML. This is a standalone element.


          <!DOCTYPE html>
        

* The doctype is case-insensitive. DOCtype, doctype, and DoCtYpe are all valid. We follow the convention of "DOCTYPE" for the benefit of other humans, not the browser.

HTML Tag

After <!DOCTYPE html>, we always put <html> tags to tell the browser that anything inside these tags is to be treated as HTML.


            <!DOCTYPE html>
            <html>

            </html>
          

Head and Body Tags

Inside the <html> tags, we place <head> and <body> tags to separate out information about our page from the actual page contents.

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

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.

Head and Body Tags


            <!DOCTYPE html>
            <html>
               <head>

               </head>
               <body>

               </body>
            </html>
          

Head Element: the 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.


            <!DOCTYPE html>
            <html>
               <head>
                 <title>My Page Title</title>
               </head>
               <body>

               </body>
	    </html>
          

Let's develop it!

Add a Title

  1. Open index.html in SublimeText (the same one as we worked on in the last Develop It section).
  2. In SublimeText, add the basic website structure we just discussed to your file (see previous slide)
  3. Inside the <head> element, add a title:
      ...
      <head>
        <title>Make up a fun title</title>
      </head>
      ...
  4. Open index.html in Chrome (don't forget to save your changes first). In the top tab, you should see the title you created!

Body 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

Body 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

Body Elements: 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.

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

  1. Open index.html in SublimeText and Chrome.
  2. In SublimeText add the following inside the <body> tags.
    • Add one of each level of heading (1-6) with 1 or 2 short paragraphs of real or dummy text below each heading.
    • Create some emphasized and strong text within a few paragraphs.
    • Add a line break in the text somewhere as well.
  3. After you add each element, save your changes in SublimeText, and then refresh the file in Chrome to see your progress.

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, including menus of links.

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>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Left Head Cell Right Head Cell
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

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:

  1. Open index.html in SublimeText and Chrome
  2. In SublimeText, add an ordered list and an unordered list to your page.
  3. Add a small table to your page.

After each chage, save your work and refresh the page in Chrome to verify your work.

Questions?

?