4.3 - Organization & Style
Today's lesson is mostly live demo. If you miss class, click the links below to learn independently (and ask a classmate).
Review:
If you've been absent, you would benefit from catching up on the first two lessons.
We have looked at the structure of an HTML document and some basic tags
<!doctype html>
<head> vs <body>
Various basic HTML tags for things like text and images
Remember that most tags need a closing tag to stop that element (like bold) but some do not (like an image)
w3schools and Google are your best friend for learning HTML!
Part 1: Organization
Keeping your files organized is very important. Imagine how many files are on Wikipedia.org or Amazon.ca?
Developers use folders and proper naming conventions to make their work easier. Let's look at a typical structure:
The "home" page of your site must be in the root folder (lowest or main folder) and for default web servers, it must be named index.html.
You can change the home page filename but the server would need to be configured to do so.
Media should be separated into images and video, etc.
Other HTML files should be organized in folders
Scripts and Style should also have their own "homes"
Files should be named very descriptively and with a common look and feel. If you decide on using camelCaseNaming or under_score_naming, it should be consistent.
Part 2: Style
Modern HTML has three main parts:
Content (HTML)
Style (CSS)
Interactivity (JavaScript)
At this point we know enough about HTML to get some text and images on the screen. But what if you want to change the font or colour or size? That's where Cascading Style Sheets (CSS) comes in.
Three ways to add Style to our HTML:
Inside the individual tag: <p id="intro" style="font: 15px Arial, sans-serif;color:'red';">
Inside the HTML document <head> section as a <style> tag:
<style>
p {
font: 15px Arial, sans-serif;
color:'red';
}
</style>In a separate .css file that the HTML loads with <link> (Preferred)
<link rel="stylesheet" href="styles.css">
It is best practice to use option 3 at all times.
Essentially, HTML is for the content of a page and CSS is for the style of the page. This separation also helps with organization and you can apply the same style on any page you want without having to copy and paste the code!
Learning how to style elements is a very independent thing. The Internet is filled with tutorials and examples. Your best bet is to look it up and try to keep things as simple as possible at first!
Step 1:
Read about the CSS Box Model
Step 2:
Read about CSS Selectors
Step 3:
Just keep practicing and learning...
Practice Time!
Fork the repo from GitHub.
Take a look at the code and make sure you understand it.
Read the README.md file and follow the instructions.
Extra
Entire list of HTML tags by category and by alphabet