📖 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.
We've started to add Tips for Windows Users:
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 Liquid and 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 first page of the tutorial.
Believe it or NOT, there is software available for creating websites on a cellphone. Research something called Acode if interested. I have ZERO interest in it so, NUFF SAID on the subject.
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