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 1

 

1 This one's important

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • If you could have lunch with anyone alive or dead, who would it be?

What is HTML?

HTML is the code that allows us to build websites

What is HTML?

If you 'view the source', you see this

History of HTML

  • Invented by Tim Berners-Lee, not Al Gore.
  • Al Gore was on 30 Rock a couple times though.
  • Created "hypertext" to share scientific papers
  • First web page August 6, 1991
  • Standardized by w3 Consortium (pack of super nerds)

History of HTML

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

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

Tools

  • Browser
    Chrome
    Firefox
  • Development Toolkit
    Chrome - Inspector
    Firefox - Firebug
  • Text Editor
    TextWrangler - Mac
    Notepad ++ - Windows
    gedit - Linux
    John's Choice:
    Sublime Text 2 - Linux, Mac, Windows

Anatomy of a website

Your Content
+ HTML: Structure/Content
+ 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.

Most Important Slide of Today

< >

Angle brackets. HTML.

Every piece of content involves these.

Anatomy of a website

Concrete example
  • A paragraph is your content

  • Putting your content into an HTML tag to make it look like a paragraph is structure
    
                    <p>A paragraph is your content</p>
                  
  • Make the font of your paragraph blue and 18pt is presentation

    A paragraph is your content

HTML Tags

  • Our HTML lives are made up of tags.
  • All HTML tags have < and >
  • There are a variety: p, strong, div, em, span, section, etc.
    etc is not one
  • A paragraph in HTML is simply:
    
    <p>There's a tag on the left and a tag on the right.</p>
                  

Anatomy of an HTML element

  • Element
    • An individual component of HTML
    • Paragraph, Table, List
    • 
      <strong>This is an HTML element, right here</strong>
                
  • Tag
    • Markers that signal the beginning and end of an element
    • Opening tag and Closing Tag
      
       <tagname>Stuff in the middle</tagname>
      
    • 
       <p> This is a sample paragraph.</p>
      

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> 
       <hr>
      
    • Just drop it in your code.

Anatomy of an HTML element

  • Attribute
    • Each element can have a variety of attributes
    • Language, style, identity, source, link
    • They look like:
      name="some value here"
  • Drop them 'inside' your opening HTML tag
    • Value is the value assigned to a given attribute.
    • 
       <a href="http://johndavidback.com">A smart dude's 
       website</a>
       <img src="my.picture.jpg"/> 
      

Questions?

We covered:

  • Tags
  • Elements and their two kinds
  • Attributes

 

Do all of those things make some sort of sense?

Okay, let's build a skeleton!

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.

Here's the doctype we use to tell the browser "Hey, this is HTML5, buddy"


          <!DOCTYPE html>
        

HTML Tag

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


            <!DOCTYPE html>
            
            <html>

              All of our content is going to live between 
              these two tags.

            </html>
          

Head and Body Tags

The head contains meta information about the page.

The body contains the actual content of the page.

Head and Body Tags

This is the basis of a complete HTML web page.


            <!DOCTYPE html>
            <html>

               <head>
                <title>Title of the page</title>
               </head>

               <body>
                The page content here.
               </body>

            </html>
          

Nesting

All elements "nest" inside one another

Whichever element OPENS first CLOSES last

Nesting

So, you could put a link into a paragraph. Very common.


<p>I want you to visit <a href="http://google.com/">this site</a>, 
soon!</p>

What would that look like?

I want you to visit this site, soon!

Yay!!

Paragraphs


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

Headings


  <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

Lists


  <ul>
    <li>List Item</li>
    <li>AnotherList Item</li>
  </ul>

  <ol>
    <li>List Item</li>
    <li>AnotherList Item</li>
  </ol>

Unordered list (bullets)

  • List Item
  • AnotherList Item


Ordered list (sequence)

  1. List Item
  2. AnotherList Item

Line Breaks


<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



* Notice: This tag is our first example of a stand-alone or "self-closing" element. A break can't contain anything.

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.

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!

We are going to start building a personal site.

  • Create a new file with your text editor.
  • Try to keep your file names lowercase, with no spaces in them
  • Save it with the extension .html, so perhaps class1.html, in a folder on your Desktop called GDI.
  • Start the page with Doctype, Head, and Body
  • Write a paragraph about yourself
  • Add a list of your favorite things
  • Feel free to experiment!

Skeleton Cheat Sheet


          <!DOCTYPE html>
          <html>

            <head>
              <title>My great site by John</title>
            </head>

            <body>
              <p>What a great body</p>
            </body>

          </html>
          

You can steal the above code right here. Just right-click, 'view source', and then copy and paste.

Links

Links have three components

  • Tag: <a></a>
  • href attribute: "http://www.girldevelopit.com"
  • alt attribute: "Girl Develop It"

<a href="http://www.girldevelopit.com" title="Girl Develop It Homepage">GDI</a>

GDI

What does HREF mean? Could be one of a few things.

Images

Images also have three components

  • Tag: <img/>
  • src attribute: "http://www.placecage.com/c/460/300"
  • alt attribute: "Nic Cage"
  • Let's all try it! Copy this code into your HTML.

<img src="http://www.placecage.com/c/460/300" alt="Nic Cage"/>
Nic Cage

Let's Develop It

Add images and links to your funky webpage!

 

Feel free to get crazy...


  <a href="http://placecage.com/" title="PlaceCage">
  <img src="http://www.placecage.com/c/460/300" alt="Girl Develop It Logo"/>
  </a>

Tables


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

Johnny don't like tables for layouts, and neither does W3C.

Head Head
Data Data

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; à
Full list

Questions?

?