By admin/development, html/October 20, 2014

HTML INTRODUCTION

The language of a webpage is HTML. HTML allows you to take a plain text document created in any simple text editor and organize it into lists, link to other webpages, including images, and more.

HTML stands for HyperText Markup Language.

Hypertext

Overcoming the constraints of written text. Interactive.

Markup Language

A way to literally Mark Up a document to specify attributes, like different font sizes, lists, links to other webpages, and images.

HTML is written in text files

Just like most programming languages, we type a bunch of HTML into anfile (aka. document) so we can send it around.

To display an HTML file we need a browser

Web Browsers are basically HTML Readers. They understand how to read HTML and display it for you.

History

In 1980, Tim Berners-Lee worked for CERN, where he proposed a better way for researchers there to share and read documents. So in 1984, he built something called ENQUIRE for CERN, which was made up of Cards (Documents) and Hyperlinks (which connected the Documents). But Tim realized he could do better.

The World Wide Web

With Robert Cailliau, Tim Berners-Lee wrote a proposal in 1990 for the creation of the World Wide Web.

When it started, the WWW was a way for scientists around the world to create and share their own webpages.

First things first: Content

Before you start making a web page, you’ve got to figure out what content it is going to show.

We’ll start with a single recipe with these sections.

Page Title	Recipe King
Page Title	Pancakes
Section Name	Ingredients

Writing HTML

Most of the time, you’ll put your content in between HTML tags, which have corresponding opening and closing versions.

Use heading tags to define your content hierarchy

Higher heading numbers mean the content that appears between the headings is less important than lower numbers.

<h1>Recipe King</h1>
<h2>Pancakes</h2>
<h3>Ingredients</h3>

Here, h1 is more important than h3, or h2 for that matter.

Generally speaking:

The page title/company name goes in the <h1> The page main subject goes in the <h2> <h3> through <h6> are used to organize other divisions of page content

Use paragraph tags for non-heading text

<p> is called the paragraph tag.

<h1>Recipe King</h1>
<h2>Pancake</h2>
 
<h3>Ingredients</h3>
...

The highlighted paragraph describes Pancake.

Add paragraph content (where necessary) in between heading tags.

Use an unordered list to display a list of things

<ul> stands for unordered list. Each list item needs to also be put inside of an <li> tag.

<h3>Ingredients</h3>
<ul>
    <li>2 eggs</li>
    <li>1 pound of sugar</li>
    <li>3 sticks of butter</li>
</ul>

This list of ingredients doesn't need to be in a specific order.

Nesting tags

HTML tags don’t have to always just contain text, they can contain other HTML tags.

<h3>Ingredients</h3>
    <ul>
        <li>2 eggs</li>
        <li>1 pound of sugar</li>
        <li>3 sticks of butter</li>
    </ul>
<h3>Directions!</h3>
...

A tag that contains other tags is called the parent.

The tags contained in a parent tag are called children.

Not indenting child tags makes HTML hard to read

The code below is valid HTML. But it's too diffcult to read!

<h3>Ingredients</h3>
<ul>
    <li>2 eggs</li>
    <li>1 pound of sugar</li>
    <li>3 sticks of butter</li>
</ul>

Always make sure you indent the code for the readability.

Use an ordered list to show list items in a certain order

If the content in your list does refer to steps to be followed, use an ordered list.

<h3>Ingredients</h3>
<ol>
    <li>Mix eggs, sugar, and butter in a large bowl</li>
    <li>Spread into a non-stick dish</li>
    <li>Bake at 350 degrees for 1 hour</li>
    <li>Let sit at room temperature for 20 minutes</li>
    <li>Eat and enjoy!</li>
</ol>

Wrapping everything in the body

Any content that appears on a web page should be in between a <body> tag

<body>
    <h1>Recipe World</h1>
    <h2>Magic Cake</h2>!
    <p>Magic Cake is one of...</p>!
    <h3>Ingredients</h3>
    <ul>...</ul>
    <ol>
    <h3>Directions</h3>
    <ol>...</ol>
</body>

<body> doesn’t display anything, but helps keep the page content organized.

Adding a head tag

Non-visible stuff goes in the <head> tag. You’ll eventually use the head tag to load other useful scripts, like CSS and JavaScript.

<head>
</head>
<body>
    <h1>Recipe World</h1>
</body>

we'll discuss what goes in the <head> later when we need it.

Make everything a child of a single parent tag

All of your HTML goes inside of the <html> tag.

<html>
    <head></head>
    <body>
        <h1>Recipe King</h1>
        ...
    </body>
</html>

Notice that we're indenting again so it's easy to see the parent/child relationship

Setting the DOCTYPE to html

The DOCTYPE sets the HTML version.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Recipe King</h1>
        ...
    </body>
</html>

The browser can make better decisions about how to display your page when it knows which version of HTML you’re using.

That's a barebone HTML page for you. We'll discuss further in the up coming tutorials.