Writing HTML

Some content used from Duckett (2011).

In this demo-lecture:

General knowledge
Basic HTML Tags
Basic Layout/Display Information

What is HTML?

Hyper Text Markup Language

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 should be Semantic + Accessible
☞ Make your own practice index.html file within a folder named html-practice.
☞ Add this practice project folder to your Github Desktop app.

Basic Anatomy of an HTML Web Page

Basic Anatomy of an HTML tag

Each tag has a "start tag" , an "end tag" , some content in between them, and multiple types of attributes.

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

<a href="http://www.google.com">
  Google
</a>

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

Tags == declarative "commands" for browsers

Basic Anatomy of an HTML tag

Anatomy of an HTML tag

Screenshot of Codepen of basic HTML tag anatomy.

Link to Codepen

DocType + `<html>`

<!doctype html>
<html>
</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>
  <head>
    <meta charset="utf-8" />
    <title>The title of your page goes here</title>
  </head>
</html>

Contains 2 main tags:
1. "Meta" tags: 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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title of your page goes here</title>
  </head>
  <body>
    Content goes in here.
  </body>
</html>

The body contains the actual content of the page.
☞ Add the body to your page with an utterance.

A visual example of what could be written in the `<body>`

Visual example of a structured HTML document.

`/* 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

Act like "building blocks," so they start on new line in the document.
Differ from inline elements, since block elements have width and height properties that you can change.
Inline elements have a width, but are contingent on the size of the inline object itself.
With CSS, you can control the spacing between block elements: borders, margins, padding, and background colors.
Note: The <img> element is actually an inline-block element, so you can modify the dimensional and position properties.

Block vs. Inline Contexts

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Looking Ahead: CSS Defines Different Positioning Schemes for Changing Flows
(See Coyer's elaboration)

Normal flow
Relative flow

Float: float: left;
Absolute positioning: position: absolute;
Fixed positioning: position: fixed;

Codepen example

`/* questions? */`

Practice Writing `<html>`

(Navigate back to your index.html file.)

Write Semantic, Containing Block Elements
(with some attributes)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My Practice DataStory</title>
</head>
<body>
  <header>
  </header>
  <article id="datastory">
    <section id="personal-digital">
    </section>
    <section id="social-digital">
    </section>
  </article>
  <footer id="resources">
  </footer>
</body>
</html>

Write Some More Block Elements

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>My DataStory</title>
</head>
<body>
  <header>
    <h1>Title of Page</h1>
  </header>
  <article id="datastory">
    <section id="personal-digital">

      <h2>Personal Digital Data</h2>
      <p>Here is a placeholder paragraph.</p>

    </section>
    <section id="social-digital">

      <h2>Social Digital Data</h2>
      <p>Here is a placeholder paragraph.</p>

    </section>
  </article>
  <footer id="resources">

    <ul>
      <li>Resource 1</li>
      <li>Resource 2</li>
    </ul>

  </footer>
</body>
</html>

Write Some Inline Elements

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My DataStory</title>
</head>
<body>
  <header>
    <h1>Title of Page</h1>
  </header>
  <article id="datastory">
    <section id="personal-digital">
      <h2>Personal Digital Data</h2>
      <p>
        Here is a placeholder paragraph, and I should <em>emphasize
        something</em>.
      </p>
    </section>
    <section id="social-digital">
      <h2>Social Digital Data</h2>
      <p>
        Here is a placeholder paragraph.
      </p>
    </section>
  </article>
  <footer id="resources">
    <ul>
      <li>
        <a href="http://www.resourceurl.info/useful-info.html" target="_blank">
          Resource 1</a>
      </li>
      <li>Resource 2</li>
    </ul>
  </footer>
</body>
</html>

External and Internal `<a>` Links

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My DataStory</title>
</head>
<body>
  <header>
    <h1>Title of Page</h1>
  </header>
  <article id="datastory">
    <section id="personal-digital">
      <h2>Personal Digital Data</h2>
      <p>
        Here is a placeholder paragraph, and I should <em>emphasize
        something</em>.
      </p>
    </section>
    <section id="social-digital">
      <h2>Social Digital Data</h2>
      <p>
        Here is a placeholder paragraph. Here is an example of an internal
        link, where I reference <a href="#personal-data">something else</a>
        on the page by using an ID attribute to navigate to that particular
        element located on the page.
      </p>
    </section>
  </article>
  <footer id="resources">
    <ul>
      <li>
        <a href="http://www.resourceurl.info/useful-info.html" target="_blank">
          Resource 1</a>
      </li>
      <li>Resource 2</li>
    </ul>
  </footer>
</body>
</html>

Write an `<img>` Element

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My DataStory</title>
</head>
<body>
  <header>
    <h1>Title of Page</h1>
  </header>
  <article id="datastory">
    <section id="personal-digital">
      <h2>Personal Digital Data</h2>
      <!-- What kind of element is an img: block or inline? -->
      <img src="http://via.placeholder.com/350x150" alt="A placeholder image." />
      <p>
        Here is a placeholder paragraph, and I should <em>emphasize</em>.
      </p>
    </section>
    <section id="social-digital">
      <h2>Social Digital Data</h2>
      <p>
        Here is a placeholder paragraph.
      </p>
    </section>
  </article>
  <footer id="resources">
    <ul>
      <li>
        <a href="http://www.resourceurl.info/useful-info.html" target="_blank">
          Resource 1</a>
      </li>
      <li>Resource 2</li>
    </ul>
  </footer>
</body>
</html>

Recap with Your Browser's Inspect Element Tool

practice-html.html

Summary

What is HTML?
Basic Tags
Basic Layout Behaviors

Next Up :: Homework - 1

Read "Introducing CSS" (Duckett, Chapter 10)

Create new practice repo: practice-css with the following structure:

/practice-css
  ├── index.html
  └── /assets
      └── /css
          └── style.css

<link> the external CSS stylesheet to your HTML document, as per Duckett.

Next Up :: Homework - 2

Writing both HTML & CSS, recreate this basic site with placeholder text and images. Version and host it as a gh-pages website.

Next Up :: Homework - 3

Objectives: Engage and practice 2 main things:
1. 1. Thinking about basic HTML structure and its accompanying CSS selection (Duckett, p. 238).
  
  Hint: Markup this content with semantic block containers, such as a <header>, <article>, and 2 <section> elements. Then, be sure to note the paragraphs, other textual elements, and images.
  
  Hint: Print out the image and write how you will mark up the particular elements noted above. See how some designers dissect web pages.

Next Up :: Homework - 4

Objectives: Engage and practice 2 main things:
1. 2. How to write basic CSS declarations and rules, and its syntax, to style the HTML elements. Here's a great CSS Vocabulary cheat sheet to help you with your CSS writing.

Writing HTML

In this demo-lecture:

What is HTML?

Anatomy of a Typical Website

.html files

Basic Anatomy of an HTML Web Page

Basic Anatomy of an HTML tag

Basic Anatomy of an HTML tag

Anatomy of an HTML tag

DocType + <html>

<head> element

<body> Element

A visual example of what could be written in the <body>

/* questions? */

The Basics of <body> Tags

Inline vs. Block Elements #1

Inline vs. Block Elements #2

Block vs. Inline Contexts

Looking Ahead: CSS Defines Different Positioning Schemes for Changing Flows (See Coyer's elaboration)

/* questions? */

Practice Writing <html>

Write Semantic, Containing Block Elements (with some attributes)

Write Some More Block Elements

Write Some Inline Elements

External and Internal <a> Links

Write an <img> Element

Recap with Your Browser's Inspect Element Tool

Summary

Next Up :: Homework - 1

Next Up :: Homework - 2

Next Up :: Homework - 3

Next Up :: Homework - 4

DocType + `<html>`

`<head>` element

`<body>` Element

A visual example of what could be written in the `<body>`

`/* questions? */`

The Basics of `<body>` Tags

Looking Ahead: CSS Defines Different Positioning Schemes for Changing Flows
(See Coyer's elaboration)

`/* questions? */`

Practice Writing `<html>`

Write Semantic, Containing Block Elements
(with some attributes)

External and Internal `<a>` Links

Write an `<img>` Element