How to Use this Tutorial
Read ALL INFORMATION and then execute the Exercise at the bottom of each page. Don't Skip Anything!! Complete all 9 exercises.
Important
If you just run through the tutorial copying and pasting, you won't learn a thing.
Examine the HTML code, then 'copy & paste'.
Preview the page before you add the CSS.
Examine the CSS and try to see how it relates to the HTML code, then 'copy & paste'.
Preview the page again and notice the changes in appearance.
DO NOT USE WYSIWYG editors like Komposer, Seamonkey etc!!!
CSS (Cascading Style Sheets)
The more you learn about CSS, the more sophisticated a website you will be able to build.
You can, however, create a very impressive website by just learning the basics.
What the CSS Does
The best way to see what the CSS does is to preview the web page before and after you add the CSS.
We will provide an explanation of what each line of style text does for those that need it.
Head and Body
Every web page is divided into 2 sections. Head and Body.
The Head section is at the top of the page and contains data mostly for the browser. People won't see the stuff you add to your head section.
Information in the head section lives between these 2 tags: <head> </head>.
Our Stylesheet will live there.
So, when I say, 'Copy and Paste into the stylesheet', you'll be pasting into the head section between the style tags shown below in red.
The Body section is always under the Head section. The HTML Code for the body section lives between these 2 tags: <body> </body>
Summarize it: Paste CSS in the top <head> section - Paste HTML code in the bottom <body> section.
Before You Start
We went a step beyond the call and made the tutorial Responsive.
If you're working on a nice big desk top or lap top you can set the tutorial up just like it shows on the tutorial page.
HTML5 Code
The secret to learning HTML code is to USE AS LITTLE AS POSSIBLE! You should spend as much time or more learning about CSS (cascading style sheets).
The Basic HTML5 Page
This is all the code you need to get started.
The code in red will provide the location for your embedded style sheet.
The viewport meta tag tells the browser, "Hey, you can send this page to a cell phone screen. We ready!"
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title is required</title>
<meta charset="utf-8"> <!--Required -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
This is an Embedded Style Sheet
</style>
</head>
<body>
</body>
</html>
Other Helps
- How to Copy and Paste
- How to Create a New Folder
- How to Find and Use Emulator Tool
- How to Check Your Code with W3C Validator
Using a Browser OFFLINE
See: How to Preview Your Pages in a Browser or you can skip it if you know how to use file:/// in the address bar.
You'll also be learning how to check your code using the W3C Validator and how to use Developer Tools to set break points and view you work on different devices.
If you know how to create folders are already adept at the procedures mentioned above , you can bypass any more BANTER and Return to Lesson #1