Welcome!

Intro to Academy and HTML

Welcome!

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

Who is everyone?

Mentor and student Introductions

What is your name?
Why are you here?
What is your favorite hobby?

Why do we do this?

Programming Rocks!
Great Jobs, Great Future
Start at anytime, find your passion

How are we going to do this?

Our Job: Spark interest and guide
Mentors
Final Project
Independent Study

Schedule

Any Questions?

You can always email us questions at bizstream.academy.staff@bizstream.com

Tour Time!

Get Online

Network: BizStream Academy
Password: BZSA-Rocks!

Download Editey

Link to Chrome Extension

What is HTML?

HTML stands for HyperText Markup Language.

HTML is the programming language used on EVERY website. It is what the browser uses to render a web page by reading the tags and interpreting the content of the web page.

HTML consists of tags enclosed in angled brackets <html>, also known as elements, and most commonly come in pairs, with a beginning and an end. HTML is styled using CSS.

Example: <h1>Heading 1</h1>

Tip: Use the “View Source” option when viewing ANY web page

Static Content

Simply a file sitting in a folder on a server.
(could be html, txt, image, …)

How your computer talks to the server:

Client (your computer) sends request via http
server response is with a static file “word for word, bit for bit”
then the client browser displays it

Dynamic Content

(back end/server side programming)

Ever hear of: .Net, asp, php, ruby, C#, or python?
Content generated on the fly by a script/program
How your computer talks to the server:
1. Client (your computer) sends request via http
2. Server responds with a program. It goes through functions, ifs, loops and so on to generate content (html) on the fly
3. Then the client browser renders it
In the end, the browser still displays it like static content. Once it leaves the server, it is static and is displayed that way

Enough Talk: Let's Code!

Create a new folder in Google Chrome
Right click and select Open With and then navigate to "Connect More Apps"
Search for Editey and then Connect
Close out and select Open With again and click Editey and allow all permissions
Create a new workspace and then close out of the popup
Select File and add New HTML File named index.html

Enough Talk: Let's Code!


    <!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            <h1>Hello, World</h1>
            <p>My first website!</p>
        </body>
    </html>

Copy the code above into your index.html file.
Save the file.
Click on the eye icon above your code.

Congratulations, you just wrote your first HTML web page!

Creating Wireframes

Wireframes outline the structure of a website before you build it.
Web designers often use special software to build wireframes, but you can use paper and pen.

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.

Get Started: Folder Structure

All the files for your site should be stored within the same folder in Editey.

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

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
```
<p>A paragraph is your content</p>
```
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>
```
- ```
<p> This is a sample paragraph.</p>
```

Tag Breakdown

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.

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.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>Hello, World</h1>
        <p>My first website!</p>
    </body>
</html>

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

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

Questions?

Don't forget your homework!