<New code>
page HTML <!doctype html>
- at top of HTML5 documents
page HTML <html>
- contains all the HTML code
page HTML <head>
- information outside the window, like the title
page HTML <body>
- information inside the window
block HTML <h1>
- makes a large heading
block HTML <p>
- makes a new paragraph
inline HTML <strong>
- emphasizes text
inline HTML <a href="">
- create a hyperlink
inline HTML <img src="" title="kittens">
- displays an image with pop up title saying "kittens"
Howdy Programmer!
Welcome to the world of Hyper Text Markup Language - HTML. Think of HTML as a language that controls how things are displayed in a web browser.
The anatomy of a webpage
Many webpages use a combination of several programming languages to make magic happen. They use:
- HyperText Markup Language (HTML) to show things to the user
- Cascading Style Sheets (CSS) to change the design and visuals of those things
- and they use Javascript to change and process things
We are going to start by learning HTML, but let's see how they all fit in the same page.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parts of a Web Page</title>
<meta name="description" content="This page shows the different basic parts of a web page">
<meta name="author" content="Dave Drapak">
<!--
Change log:
27. July 2015 - created!
-->
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
The anatomy explained
<!doctype html>
<!-- this shows that this document is written in HTML5 - the most recent version -->
<html lang="en">
<!-- this shows that this page is written in english -->
<head>
<!-- the 'head' block of an HTML document contains code to support what is displayed in the body -->
<meta charset="UTF-8">
<!-- "UTF-8" is a character set that includes a wide range of international characters -->
<title>Parts of a Web Page</title>
<!-- this is the title that shows up in bookmarks and the title bar -->
<meta name="description" content="This page shows the different basic parts of a web page">
<!-- the description is used by search engines. Use it to describe your page -->
<meta name="author" content="Dave Drapak">
<!-- the "author" meta tag is where the programmer puts theire name -->
<!--
Change log:
27. July 2015 - created!
28. July 2015 - added comments to explain each part of the page
-->
<!-- the change log is for you to help you track how you have modified your code -->
<style>
/* ...the Cascading Style Sheets (CSS) design code goes inside the <style> block... */
</style>
</head>
<body>
<!-- ...the HyperText Markup Language (HTML) text goes inside the <body> block... -->
<script>
// ...the Javascript programming code goes inside the <script> block...
</script>
</body>
</html>
Using HTML tags
The programming code of HTML is made of tags.
For example, <!doctype html>
means we are using the latest version of HTML, HTML5.
Anything inside the <title>
tag appears on the title bar.
<h1>
tags are used to enclose the biggest headings in a document.
Use them to organize the information in your documents.
<p>
tags are very common and used to enclose paragraphs in your document.
For most tags, you use them as a pair,
normal at the beginning and then with a slash at the end:
<strong>emphasized text</strong>
.
Learn more
- Khan Academy on links and images
-
w3schools.com on
links,
images,
paragraphs,
headings, and
formatting
— Note:
using
<b>
and<i>
is no longer considered good programming style.