Introduction to Computer Programming and HTML

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

Computer Science: Key Concepts

Computer programmers use programming languages to give instructions (code) for a computer to do.

Programming Languages

Programming languages have commands and constraints to tell the computer what to do. One command cannot do every little thing.

Programmers must understand the set of commands a programming language allows them to do.

The programmer must use their creativity and problem-solving skills to get the computer to do what they want.

It is a lot like learning a language.

Languages We Will Learn in Modules 2 and 3

Structure and semantics of web content (aka markup) -
HTML (markup language)

Styling of fonts, headers, colors, images, links, etc. -
CSS (style sheet language)

Functionality of a webpage, such as scrolling and login -
JS (scripting language)

Important Terms (review!)

• Web design
  The process of planning, structuring and creating a website
• Web development
  The process of programming dynamic web applications

Different Roles in Tech Companies

Front-End and Back-End

In software engineering, the terms "front-end" and "back-end" are distinctions which refer to the separation of concerns between a presentation layer and a data access layer respectively.

Front-End Development

• Front-end development refers to how the user interfaces with the data and information stored by the website/application/program.
• Most of everything you see on any website is a mixture of HTML, CSS, and JavaScript, which are all controlled by the browser.

What's on my screen?

For example, if you’re using Google Chrome or Firefox, the browser is what translates all of the code in a manner for you to see and with which to interact, such as fonts, colors, drop-down menus, sliders, forms, etc.

Front-end development refers to how the user interfaces with the data and information stored by the website/application/program.

Our Phase 2 curriculum equips you with front-end development skills.

How do these all fit together?

Let's use Developer Tools.

Front-End Languages

• HTML aka Hypertext Markup Language: Describes layout of elements on a website and provides browsers with a list of needed files, e.g., CSS and JavaScript.
• Think: The blueprint of a house.
• CSS aka Cascading Style Sheets: is responsible for the way websites look. Colors, fonts, and even some animations are all controlled by CSS.
• Think: an interior designer's instructions for making a website look great.
• JavaScript: controls interactions on a website.
• Think: a handyman that can tear down walls, build new rooms, redecorate your house, make a house "smart".

Now that we have a front-end "house"...

How does the browser access the house?
GET request to the server

Where do we put the house on the web for others to access?
Hosting service

How do we store info the user has submitted to the house?
Database

More on Databases

Enter databases to the rescue!

Databases store, organize, and retrieve a website or application’s data.

Databases make up the backend.

Did you know?
Data is now the most valuable commodity on the planet, even more valuable than oil.

Back-End Languages

The back-end enables the browser to show
the front-end "house."

The back-end holds the information and helps with all of the technical pieces that help make a website function.

Back-End Web Development

The back-end has three parts to it:

• server
• application
• database

A server is a computer that fulfills client requests.

An application creates, deletes, changes, renames, etc., information.

A database stores such information.

Back-End Web Development Analogy

Back-End Web Development Example

Everything that a customer sees on the webpage is the front-end.

Once that customer enters all of her information, such as name, billing address, destination, etc.,

the web application stores the information in a database that was created previously on the server in which the website is calling for information.

That is all back-end.

Back-End Web Development

The web application creates, deletes, changes, renames, etc., items in the database.

A server, in the simplest form, is a computer accessed remotely that runs software to fulfill requests from clients.

What's so special about JavaScript?

It is the only language on both
the front-end and the back-end!

Lots of great libraries and frameworks!

• Front-end: Angular, Backbone, React, Ember
• Server: Express, Node.js
• Database: MongoDB

Review

What is the difference between front-end and back-end?

Review

What is the difference between a markup language and a programming language?

Review

What are the three languages used on the front-end?

Review

What is the one language that can be read by the browser on the front-end and the back-end?

Introduction to Markup Languages

Read Introduction in Textbook

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

HTML

HTML Exercise

Sign up for an account at Codecademy. Complete the Introduction to HTML course by the end of this unit.

What is HTML?

HTML is the code that tells browsers to display the parts of the website that users see on their screens.

images * text * videos

History of HTML

• Invented by Tim Berners-Lee
• 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 2014

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>This is the content of my paragraph</p>
  

• Making the font of your paragraph orange and 24px is presentation
  

  This is the content of my paragraph.

What does HTML look like?

If you 'view the source', you see this:

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

Examples of tags

Let's Create Something for the Browser!

Text Editors

For us to write or modify code, we will need to download a Text Editor. We use Visual Studio Code (VS Code).

These instructions will help with download, setup, and creating a project folder!

IDE's

IDE stands for Integrated Development Environment.

This is a fancy way of saying that your text editor has a lot of tools (e.g., running code, debugging) that makes it easier to write code well!

Guess what VS Code is?😊 Yes, VS Code is an IDE.🎉

Tour of VS Code

Let's see what an IDE can do!

Start an HTML file in VS Code

Your browser will look for an index.html file first!

You can create a new file in your root folder in VS Code:

1. In the left panel Explorer menu, hover over the name of your project folder. Options will appear to its right.
2. Click the icon that is a piece of paper with a plus sign. A blinking cursor in a blank file appears in your root folder.
3. Type the name of your file (index.html), then press return.

Congrats! You just created your index.html file!

HTML Structure

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.

HTML 4.01 strict doctype declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">

HTML 5 and beyond doctype declaration:

<!DOCTYPE html>

* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.

HTML Tag

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

<!DOCTYPE html>
<html>

</html>

Head and Body Tags

Head: The head tag 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 tag contains the actual content of the page. Everything that is contained in the body is visible to the user.

Head and Body Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page appears in the tab.</title>
  </head>
  <body>
    The page content here displays in the browser window.
  </body>
</html>

HTML and CSS Book

Let's review page 27:

Headings and Opening a File in Your Browser

Online Code Editors

In addition to VS Code, we will use online code editors to test snippets of code. In this training, we may use:

• JS Bin
• CodePen
• CodeSandbox

Each site permits users with accounts to save these snippets and access settings, such as text wrap. We will use Github for the signup/signin process.

GitHub Accounts!

• We will be learning more about Git & Github later in the training.
• For now, we will create accounts so that we can use JS Bin with more options (like wrapping!)
• Important: your username is like a handle; some people strive to keep their handle gender-neutral in order to avoid bias.

See next slide for instructions.

GitHub Accounts!

• The sign-up flow will ask questions about what you are interested in, and what you do. Feel free to answer the questions in a way that feels right to you - you can always change them later.
• Once you have gone through the process and verified your email, navigate to JSBin.com, and click 'Login or Register' in the upper right corner of your screen.
• Log in with GitHub!

Click here to get started!

JS Bin Preferences Settings

Click here to edit your JS Bin Settings.

Nesting

All elements "nest" inside one another.

Nesting is when you put containing tags inside other containing tags.

<body>
  <p>I am now a paragraph tag nested inside the body tag.</p>
</body>

Try it! Nest a heading inside the body tag.

Nesting Order

Whichever element OPENS first
CLOSES last

<html>
  <head>
    <title>I am a title. Which owl am I?</title>
  </head>
  <body>
    <h1>I am a heading. Which owl am I?</h1>
    <p>I am a paragraph. Which owl am I?</p>
    <ol>I am an ordered list. Which owl am I?
      <li>I am a list item. Which owl am I?</li>
      <li>I am a list item. Which owl am I?</li>
      <ul>I am an unordered list. Which owl am I?
        <li>I am a list item. Which owl am I?</li>
        <li>I am a list item. Which owl am I?</li>
      </ul>
    </ol>
  </body>
</html>

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>

Anatomy of an HTML element

• Container Element
  • An element that can contain other elements or content
  • A paragraph (<p>) contains text
• Empty (Standalone) Element
  • An element that cannot contain anything else, often described as "self-closing."

<br/>
<img/>

HTML Structure

Read Chapter 1 in Textbook

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

HTML Text

Element: Paragraph

Paragraph tags contain text often found in the body of the document.

On this slide, can you guess which text is contained in a paragraph tag?

<p>Paragraph tags contain text often found in the body of the document.</p>
<p>On this slide, can you guess which text is contained in a paragraph tag?</p>

White Space: Paragraph

White space makes code readable for programmers.

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

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>

Example: Headings

Formatting Text

Page 43 in the Textbook

Semantic Markup

Although some text elements do not affect the structure of your web pages, they DO add extra information to the pages.

These text elements are known as semantic markup.

Semantic Tags

• footer
• header
• section
• nav

Let's identify each one on a webpage!

Formatted text

<p>
  This paragraph has <em>Emphasized</em> text and <strong>Important</strong> text.
</p>

HTML Text

Read Chapter 2 in Textbook

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

HTML Lists

Element: Unordered and ordered lists

<ul>
  <li>List Item</li>
  <li>Another List Item</li>
</ul>
  

<ol>
  <li>List Item</li>
  <li>Another List Item</li>
</ol>
  

Example: Unordered and Ordered Lists

<ul>
  <li>January</li>
  <li>February</li>
</ul>
  

<ol>
  <li>Wake up.</li>
  <li>Brush teeth.</li>
</ol>
  

Lists: Examples

Ordered List: Top 100 Sites Visited

Unordered List: Bucket List Ideas

App: To Do List App

Lists: Exercise

Lists can be used to organize any list of items.

Let's make a list of the New York Times Books from your Google Docs.

Click here to start

Comments

Imagine a file that has thousands of lines of code.
How do we break it up to be more readable?

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 help organize your code into sections so you (or someone else) can easily understand your code. You can also 'comment out' large chunks of code to hide it from the browser.

<!-- Beginning of header -->
  <div id="header">Header Content </div>
<!-- End of header -->
  
<!-- Beginning of comment block
  <ol>
    <li>List Item</li>
    <li>Another List Item</li>
  </ol>
End of comment block -->
  

Review HTML Lists

Chapter 3

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

HTML Links

HTML Links: An Exploration

How does a link in your browser know where to show up in the code?

Links are "anchored" to the item that you want users to be able to click on.

Anchor tags <a> make the above clickable. So what kind of element is an anchor tag -- container or empty?

<a> </a>

Anatomy of an HTML element

Opening tags can give us more information about an element.

• Attribute
  • Provides additional information about the element
  • class, identity, language, style, source
  • Placed inside an opening tag, before the right angle bracket

<button disabled>Submit</button>

• Value
• Value is the value assigned to a given attribute.
• Values must be contained inside quotation marks.

<a href="https://anniecannons.com">AnnieCannons</a>

Element: Link

Links have three components

• Tag: <a></a>
• href attribute: "https://www.anniecannons.com"
• Link text: "AnnieCannons"

<a href="https://anniecannons.com">AnnieCannons</a>

AnnieCannons

The <a> tag surrounds text or images or other HTML elements to turn them into links.

The awesome thing about VS Code...is that it autofills for you. Let's try it! 💪

Link Attributes

Links can have attributes that tell the link to do different actions like open in a new tab...

<a href="home.html" target="_blank">Link Text</a>

Link opens in a new window/tab with target="_blank"

<a href="mailto:info@anniecannons.com">E-mail us!</a>

What else can a link tag do? Let's GTS - Google That Stuff!

Review links and attributes

Chapter 4 in your textbook

Directory Structure

Page 82: Let's play "Find That Relative!"

Example: Directory Structure

Question: If I am in my index.html file and want to insert an image into the body element, how do I find the img folder to select the cute-panda.jpg image file?

<body>
  <img src="?" alt="Cute Panda" />
</body>

Congratulations! You found a sibling's child. 👶

The path you just made to get from index.html to cute-panda.jpg is a relative path because these paths change (read: are "relative"). These files also happen to be relatives in the ac-directory-structure folder.

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

HTML Images

Element: Image

Images have three components

• Tag: <img />
• src attribute: "https://www.publicdomainpictures.net/pictures/360000/velka/panda-in-chiangmai-zoo-thailand-1594485630URd.jpg"
• Alt attribute: "Cute Panda"

<img src="https://www.publicdomainpictures.net/pictures/360000/velka/panda-in-chiangmai-zoo-thailand-1594485630URd.jpg"
alt="Cute Panda"/>

* Notice: This tag is our first example of an empty or standalone or "self-closing" element.

Relative vs. Absolute paths for links & images

• Relative
  
  • Relative paths change depending upon directory structure.
  • Links within the same directory (siblings) need no path information. "filename.jpg"
  • Subdirectories (parent with child[ren]) are listed without preceding slashes. "img/filename.jpg"
  • Typically used when pointing to a link that is within your own directory/webpage/website/domain.
• Absolute
  
  • Absolute paths refer to a specific location of a file, including the domain. "http://www.anniecannons.com/volunteers"
  • Typically used when pointing to a link that is not within your own domain.

Images in HTML

• jpg
• png
• gif
• vectors

Page 109 in Textbook

New types of images

Click here for information on new types of images.

Element: Line Break

<p>
  Hello <br/>
  It's me <br/>
  I was wondering if after all these years you'd like to meet <br/>
</p>

Review HTML Images

Chapter 5

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

HTML Tables

Can you think of websites that use tables? Let's GTS!

Tables

Tables represent information in a grid format.

Tables are made up of rows and columns.

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

Tables: Examples

Tables can be styled with CSS to add zebra striping or to highlight important rows/columns.

Review Tables

Page 131

Table Exercise

Make this table. Take a screenshot of your code in VSC.

Review HTML Tables

Chapter 6

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

HTML Forms

Can you think of websites that use forms? Let's GTS!

Forms

Forms allow us to collect information from our users.

Form Structure

Form Controls (Text)

• Text Input
• Password Input
• Text Area

Making Choices

• Radio Buttons
• Check boxes
• Drop-down boxes

   Lion
   Bear
   Tiger
   Student
   Teacher

Making Choices

• Drop-down boxes

  
    Oakland
    San Francisco
    Atlanta
    Seattle
  

Submitting Forms

• Submit Button

Other cool form tools

Adding Dates

Adding Colors

Uploading Files

Review Forms

Page 148

Form Practice

Let's practice!

Download the HTML file here.

Fill in the sections where there are directions in the comments.

HTML Resources

• Mozilla Developer Network
• Opera Web Standards
• Stack Overflow

GDI Website

By the end of the class, you will have built a simple site using HTML and constructed a login form.

Project

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

Additional HTML Elements

Divs

Imagine a huge file of code that makes up a website.
How do you break it up?

Spans

Imagine several lines of text:

Veggies es bonus vobis, proinde vos postulo
Essum magis kohlrabi welsh onion daikon lettuce.
Amaranth tatsoi tomatillo melon azuki bean garlic.

How do we use HTML to help change the color of only one word (e.g., kohlrabi) and not the whole paragraph?

Veggies es bonus vobis, proinde vos postulo
Essum magis kohlrabi welsh onion daikon lettuce.
Amaranth tatsoi tomatillo melon azuki bean garlic.

Divs and spans

Divs and spans

Page 187

Important Attributes: Class & ID

What do you notice about the code below?

<p class="anniecannons">We are learning awesome coding skills.</p>
<p class="anniecannons">We are going to start CSS soon!</p>
<p id="coach">Where's my treat?</p>

Classes and IDs help us categorize HTML elements
for ease of styling in CSS.

Choose the best word: HTML is for content/presentation while CSS is for content/presentation.

CSS Unit Preview for the above code.

Adding media to your site

• iframe tags (Page 189)
• video tags (Page 214)
• audio tags (Page 219)

Review Additional Markup and Media

Chapter 8 + Chapter 9 sans Flash
(Pages 212, 213, 216, 217, 220-222, 224, 226-228)

Project

Create an HTML website with the following features:

Unit Overview

• Introduction to Programming
• Introduction to HTML
• HTML Text
• HTML Lists
• HTML Links
• HTML Images
• HTML Tables
• HTML Forms
• Advanced HTML

THE END

Thank you for your attention!