<!doctype html> - at top of HTML5 documents
<html> - contains all the HTML code
<head> - information outside the window, like the title
<body> - information inside the window
<h1> - makes a large heading
<p> - makes a new paragraph
<strong> - emphasizes text
<a href=""> - create a hyperlink
<img src="" title="kittens"> - displays an image with pop up title saying "kittens"
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
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
Using HTML tags
The programming code of HTML is made of tags.
<!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:
- Khan Academy on links and images
<i>is no longer considered good programming style.