HTML - More Basics

Leon Noel

NEVER lost a thumb war.

Agenda

  • Questions?

  • Review - Client Server Model

  • Review - HTML Tags

  • Review - Brownie Recipe

  • Learn - New HTML Tags

  • Learn - Progressive Enhancement

  • Code - Newspaper Time 

Questions

About last class or life

What is the internet?

The Golden Rule

SEPERATION OF CONCERNS

  • HTML = Content / Structure

  • CSS = Style

  • JS = Behavior / Interaction

HTML SYNTAX

(Spelling And Grammer Rules)

source: mdn

Why follow the rules?

Time For Some

TAGS

not that kind...

Heading Elements (tags)

<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>

SIZE DOES NOT MATTER

Other Text Elements

<p> Paragraph </p>
<span> Short text </span>
<pre> Preserves Whitespace </pre>

Nerd Fights

<br>
<hr>

Assisted Device

Elements

<em> Stress Emphasis </em>
<strong> Strong Importance </strong>

Ordered List

<ol>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ol>

Unordered List

<ul>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>

Containing Elements

<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>

LET'S Review

brownies.html

HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <!-- Stuff the browser needs -->
  </head>
  <body>
    <!-- Everything the user sees -->
    <h1>Hello, Twitch!</h1>
  </body>
</html>

Time For Some

New TAGS

not that kind...

Navigation

<nav>
  <ul>
    <li><a href="news.html">News</a></li>    
    <li><a href="sports.html">Sports</a></li>    
    <li><a href="weather.html">Weather</a></li>    
  </ul>
</nav>

How do we get data from users?

Forms

<form action="confirmation.html" method="post">
  <!-- Data collection elements go here -->
</form>

Input Types

  • Text

  • Password

  • Tel

  • Email

  • Button

MDN has full list

Let's Code

A simple form

Progressive Enhancement

According to the United States Department of Commerce, about 22 million Americans--roughly 35% of the nation's rural residents--lack access to broadband.

(2017)

Let's Code

A real site

Homework?

Read: https://learn.shayhowe.com/

Code BBC Website

HTML - More Basics

By Leon Noel

HTML - More Basics

Class 02 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord

  • 2,179

More from Leon Noel