HTML: Pages and Tools
HTML redux
HTML Tags < tag-name [attribute-name=value]> </tag-name> No attributes on end tag Blank lines and spaces don’t matter
Two types of commands Start/end commands <command> ... </command> Single commands < command> or < command />
Important Difference Whether they start a new line or not Paragraphs do Emphasize does not
The Basics Regular text = paragraph Heading numbers represent style, not order Lists consist of list delimiters and list items
Correctly Nested Tags Some can take any content Some have restrictions divisions, footers Some have restrictions Paragraphs can not have lists inside them Some tags are limited as to where they can appear List items can only appear in lists Incorrectly nested tags MAY appear to work
Special Characters
Special symbols < and > are special symbols with special meanings How would you display A < B ? Suggestions? < for < and > for > & is an escape symbol, handled specially. Always ends with ; Means that you need a special way to display “&” too: & Full lists on Resources page
HTML tools
A better editor Understands commands Gives suggestions Recognizes mistakes Creates an appropriate file Easy to see results Help save them in the right place
Setting Up Komodo Creating a page Viewing the page Creating a project Chrome Creating a project Clean up your folder
General Page Structure <!DOCTYPE html> <html> <head> <! --- what shows up on the tab --- > <title>Put your title here</title> <! ---defining character necessary for validation --- > <meta charset="UTF-8"> </head> <body> <! --- the “good stuff” i--- > What will appear on the page <footer> Created by A. Person on a date </footer> </body> </html>
The Body Every page needs Minimal content Header (DIFFERENT THAN head) Footer Minimal content Header: title Footer: who wrote it and when
Filezilla redux
Post your page Clean up your folder Check before you submit Named correctly? Correct HTML?
How do you know? Validation http://validator.w3.org/
Helping yourself
Formatting your SOURCE Comments <!-- any text you want --> Indentation Nested parentheses Multi-line Line up start and end Things inside belong one tab over Single line Start, content, end on a single line Always include your name in date in every file
Formatting Help http://www.freeformatter.com/html-formatter.html
Do I have to do ALL that?