Intro to HTML/CSS

Section 1

What is HTML?

HTML is the code that allows us to build websites

Screenshot of the BizStream Academy Homepage

What is HTML?

If you 'view the source', you see this

Screenshot of the Bizstream Academy page source code

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.

Tools

Browser
Chrome
Firefox
Development Toolkit
Chrome - Inspector
Firefox - Firebug
Text Editor
Sublime Text - Windows, Mac, Linux
[ ] Brackets - Windows, Mac
Notepad++ - Windows
Atom - Windows, Mac

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, index.html, and styles.css

Goals

Final project

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 our favorite superhero.

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 an HTML tag to make it look like a paragraph is structure
```
A paragraph is your content
```
Making the font of your paragraph green and 24px is presentation

A paragraph is your content

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>
```
- ```
 This is a sample paragraph.
```

Tag Breakdown

Anatomy of an HTML element

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

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">©BizStream Academy logo 2016</div>
<img src="my_picture.jpg" />
<a href="http://www.bizstreamacademy.com">BizStream Academy</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
(although that last one is pretty weird).

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

Head and Body Tags

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

Enough Talk: Let's Code!

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 inside of the <body> tags. The is now nested inside the <body>

Nesting Order

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.

* 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

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.

Enough Talk: Let's Code!

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 and within a few paragraphs.

Element: Link

Links have three components

Tag: <a></a>
Href attribute: "http://www.bizstreamacademy.com"
Title attribute: "BizStream Academy"

<a href="http://www.bizstreamacademy.com" title="BizStream Academy">BizStream Academy</a><

BizStream Academy

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@bizstream.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
Relative paths 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. "img/filename.jpg"
Absolute
- Absolute paths refer to a specific location of a file, including the domain. "http://www.bizstreamacademy.com/returning"
- Typically used when pointing to a link that is not within your own domain.

Enough Talk: Let's Code!

Let's add links to our site!

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

Element: Image

Images have three components

Tag: <img />
Src attribute: "https://raw.githubusercontent.com/misterhamm/bzsa-featured-html-css-intro/master/img/bzs-academy-logo-2015.png"
Alt attribute: "BizStream Academy logo"

<img src="https://raw.githubusercontent.com/misterhamm/bzsa-featured-html-css-intro/master/img/bzs-academy-logo-2015.png"
alt="BizStream Academy Logo"/>

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

Enough Talk: Let's Code!

Let's add a few images to our page.

We can even turn our images into links.

Element: Unordered and ordered 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
Another List Item

Ordered list (sequence)

List Item
Another List Item

Lists: Examples

Lists can be used to organize any list of items.

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

Enough Talk: Let's Code!

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!

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 id="header">
     <h1>Main Heading<h1>
  </div>

<div class="sub-content">
     <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.

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> Header Content </div>
<!-- End of header -->
<!--
<ol>
<li>List Item</li>
<li>Another List Item</li>
</ol>
-->

Enough Talk: Let's Code!

Let's add some divs your site to separate content into different sections based off of your wireframe drawings.

Then add comments to organize your divs content.

Character codes

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

Delta: δ δ
Grave: &grave; `
An grave a: à à
A full list is available at htmlandcssbook.com

Intro to HTML/CSS

Section 1

What is HTML?

What is HTML?

Terms

Tools

Get Started: Folder Structure

Goals

Final project

Anatomy of a website

Anatomy of a website

Anatomy of an HTML element

Tag Breakdown

Anatomy of an HTML element

Anatomy of an HTML element

Doctype

HTML Tag

Head and Body Tags

Head and Body Tags: Example

Head and Body Tags

Enough Talk: Let's Code!

Nesting

Nesting Order

Nesting: Example

Element: Paragraph

Example: Paragraphs

Element: Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Example: Headings

Formatted text

Enough Talk: Let's Code!

Element: Link

Link Attributes

Relative vs. Absolute paths for links & images

Enough Talk: Let's Code!

Element: Image

Enough Talk: Let's Code!

Element: Unordered and ordered lists

Lists: Examples

Enough Talk: Let's Code!

Element: Div

Div Examples

Grouping elements with div

Comments

Enough Talk: Let's Code!

Character codes

Questions?