Writing HTML

Some content used from Duckett (2011).

In this demo-lecture:

  • General knowledge
  • Basic HTML Tags
  • Block vs. Inline Elements

What is HTML?

Hyper Text Markup Language

Tags == declarative "commands" for browsers

Anatomy of a Typical Website

  • Content: Text, Media
  • +  HTML: Structure + Semantics
  • +   CSS: Presentation + Design
  • +    JS: Interactivity
  • = Your Website

.html files

  • A "marked up" text-file with tags
  • HTML considered a "declarative" language
  • Saved with .html extension
  • Standardized language of web browsers
  • HTML defines semantics for "chunks" of information to increase its Accessibility

Let's create a practice project folder and .html file

  1. In Desktop, select "Create a new repository" and create a 4814-html-practice folder in your typical local folder
  2. Once created, use Desktop to open the repo in VSC
  3. In VSC, create an index.html file in the root folder
  4. Open the index.html file and check your default indentation rule
  5. In GH, let's create and publish a gh-pages branch to your profile

Basic Anatomy of an HTML Web Page

<!doctype html>
<html>

  <head>
    <title>Title of page here</title>
    <meta description="Metadata and resources go in the head." />
  </head>

  <body>
    <h1>Rendered page content here.</h1>
  </body>

</html>

Basic Anatomy of an HTML Web Page

Diagram indicating how a web page is comprised of a head and body element. The head contains metadata and resources, while the body contains user content.
James' diagram of the basic elements of a web page.

Basic Anatomy of an HTML tag

Diagram indicating how 2 tags are required to create an element and its syntax.
Duckett's diagram of the basic tag syntax.

What are attributes?

  • Within each "opening tag" , you can include attributes.
  • Some attributes can be used in all elements: id and class
    • id: unique identifier for an element; 1 per page
    • class: identifier for a class of shared styled elements; helps select many across site pages
  • Other attributes are specific to specific elements: href for a or link
  • MDN's list of attributes

Example tags with attributes 

<tagname attribute="value">
  content
</tagname>

<html lang="en">scope == the entire page</html>
<span lang="en">scope == wrapped inline text</span>
<span lang="fr">portée == texte en ligne encapsulé</span>

<a href="http://www.google.com" target="_blank" rel="noopenner">
  Google
</a>

<section id="about" class="f-didot">
  <h2>About Me</h2>
</section>

Interactive anatomy of an HTML tag

Screenshot of Codepen of basic HTML tag anatomy.

Link to Codepen

DocType + <html>

<!doctype html>
<html lang="en">
</html>
  • doctype:
    1. tells the browser what type of HTML specification you are writing (Wikipedia article on doctype).
    2. needs to be at start at every HTML page to tell browser which version of HTML you're using (HTML5 here).
    3. is not the html tag.
  • html: the root of the page.
  • ☞ Add these tags to your index.html file.

<head> element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- declaration that maintains user zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Practice Site</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  </head>
</html>
  • Contains 2 main tags:
    1. "Meta"data: Info about the page (comprehensive list).
      Note how <meta /> tags self-close.
    2. Resources: For example, <link> tags that tell the browser WHERE to locate CSS stylesheets.

<body> Element

  • The body contains the actual content of the page.
  • ☞ Add the body to your page with an utterance. 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- declaration that maintains user zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Practice Site</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  </head>
  <body>
    Content goes in here.
  </body>
</html>

/* questions? */

The Basics of <body> Tags

Inline vs. Block Elements #1

Image from Duckett demonstrating difference between inline and block elements.

Inline vs. Block Elements #2

  • Block elements act like "building blocks," so they start on new line in the document.
  • block elements can be nested to create parent-child relationships.
  • Most elements actually are block elements.
  • Inline elements can begin within a line and do not by default start a new line.
  • An inline element's width only extends as far as it is defined by its tags.
  • With CSS, you can control the spacing between both block and inline elements: borders, margins, padding, and background colors.

Block vs. Inline Contexts (James)

Diagram indicating how block elements start on a new line, while inline elements do not.
James' diagram of the basic elements of a web page.

Example Nested HTML5 Block Elements

Visualized nesting of HTML5 elements within content areas

Practice Writing <html>

Let's practice writing and structuring some more HTML elements!

Write 2 examples of a meaningful set of parent-child nested relationships.

Homework

  • Complete the module readings for Week 3, Day 1
  • Complete the next exercise: 2-html-fave-things
  • Let's review the README