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?
What's your favorite movie or TV show?

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

Sublime Text 3 - 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 ﬁrst 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>

              STUFF GOES HERE

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

List Item
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"/>

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: δ δ
Grave: &grave; `
An grave a: à à

Full list