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, include images, and more.
HTML stands for HyperText Markup Language.
Overcoming the constraints of written text. Interactive.
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 a
file (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.
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|
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.
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.
HTML tags don’t have to always just contain text, they can contain other
<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 sur 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
<h3>Ingredients</h3> <ul>... </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, buthelps keep the page content organized.
Adding a head tag
<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 <h3\tml> 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.