Intro to Academy and HTML


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 Is Awesome!
  • Great Jobs, Great Opportunity, Great Future
  • Start at anytime and find your passion

How are we going to do this?

  • Our Job: To spark interest and guide you
  • Team of Mentors
  • Final Project
  • Independent Study


Any Questions?

You can always email us questions at

Question Picture

Tour Time!

Get Online

  • Network: BizStream Academy
  • Password: BZSA-Rocks!

wifi cat

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 Drive titled My_BZSA_Website
  • Right click on the folder and select "Open With" and then navigate to "Connect More Apps"
  • Search for Editey and then click "Connect"
  • Once Connected, close out the popup and right click your folder and select "Open With" again and click Editey
  • Allow all permissions
  • Create a new workspace titled "Workspace" and click "Create"
  • Select the workspace and then add New HTML File named index.html
  • Add the HTML file by selecting File > New > HTML File in Editey

Enough Talk: Let's Code!

You want to make sure your code and test site are in separate windows.

  • Remember: to get back to your site you will need to right click on the folder in your drive and select to "Open With" Editey
  • To Format Editey Workspace:
  • Select View in the menu bar and uncheck "Show preview"

Enough Talk: Let's Code!

      <h1>Hello, World</h1>
      <p>My first website!</p>
  • Copy the code above into your index.html file
  • Click on the eye icon in the menu bar of your index.html file
  • Note: To see your changes while you work, you will need to refresh your preview page

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.


  • 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

Screenshot of a sample page

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 Yoda.

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>Text/content that will be visible</tagname>
    • <p>This is a sample paragraph.</p>

Tag Breakdown

Tag breakdown


The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.

4.01 Transitional//EN" "http://">
<!DOCTYPE html>

* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid
(although that last one is pretty weird).


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

<!DOCTYPE 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>
        <h1>Hello, World</h1>
        <p>My first website!</p>

Notice: After adding this HTML, what does your website look like? Why does it look this way?


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.

  <p>A paragraph inside the body tag</p>

Paragraphs 'nested' inside list items.

    <p>A paragraph inside a list item</p>

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.

Example of Paragraphs in the wild

* You can edit how paragraphs are displayed with CSS


Don't forget your homework!