Cours HTML complet en Anglais
HTML Crash Course
By Daniel D'Agostino
2nd June 2007
Revised 19th June 2007
HTML Kickstart: Tools Needed
A text editor
* Notepad is fine
* Chami's HTML-Kit is better
* Other systems can use their respective text editors
A web browser, preferably two
* Firefox
* Internet Explorer
Some good reference
*
HTML Kickstart: HTML Demo
* HTML is just text
* HTML tags give text a special meaning
* Create a new text file* Name it (htm = html) * Write the following in the file:
“The future is now.”
* Now open the file with a web browser.
* What happened to the text enclosed in tags?
HTML Kickstart: HTML Syntax
* HTML tags normally have a start tag
() and a closing tag () * You can have multiple tags around the same text but they must be closed in reverse order
Hello!
* Tags are sometimes called elements
HTML Text Formatting: Spacing
White space
* newlines
* multiple spaces
Spacing tags
*
*
*
is called an empty tag
* Block and inline elements
HTML Text Formatting:
* The tag is deprecated
* Use it until you learn better things* HTML tags can have attributes * attributes:
* face
* color
* size
* Order of attributes not important
* Values in quotes
HTML Text Formatting: Headings
*
through
* Hierarchal structure (use
for page title, etc)
* Headings may be customised (like all other text)
Heading 1
Heading 2
Heading 3
Why Layout Tags are Bad
* Previous example has lots of extra layout code
* A lot of layout code is repeated several times
* It adds nothing to the meaning of the text
(the heading is still a heading) * Ideally content and presentation should be separate
* This is achieved with CSS (another language)... for now live with HTML
Logical Tags vs Layout Tags
* is very bad
* , and are bad as well* and should be used instead of and
* should not be used because text can be confused with links
* means text should stand out
* means text should be emphasised* and just mean the text should look different (no meaning)
* example of JAWS browser reading text
* not or not?
HTML Text Formatting: Quotations
The
tag* needs inner tags (e.g.
)
* block element
The
tag* inline element
* browser incompatibilities
HTML Comments
Useless in HTML
* demonstrate using
* HTML tags are clear and legible * HTML comments increase the size of the page, unlike with programming
HTML Text Formatting: Code
Tags used to format source code in a
page
* (inline, monospace)
* (inline, not monospace) * (block, monospace, kills whitespace)
HTML Text Formatting: Other
can be aligned left, right, center or justify (left is usually best)
Serif fonts are best for printed media; sans-serif are best for reading off a screen
Horizontal rules (
): another empty tag More (less useful) text formatting tags:HTML Entities
* You cannot use characters because they are used for HTML tags * Entities are used where special characters are needed
* Examples: © & "* Entity formats: name and number * Reference:
HTML Links
* Link is the most important thing
* Format: link* Links are relative unless they start with a protocol (e.g. http:// or file://)
- wrong! (relative)
* For internal links, relative links are better
* shorter
* transparent when relocating website
Relative Links: Folder Navigation
* / - root
* .. - parent directory* . - current directory
* dir/ - child directory named 'dir'
* ../dir1/ - 'dir1' directory in parent directory
Append slash to domains/folders to prevent multiple requests
HTML Links: Local Links
* Used to link to a specific point in a page
* local anchor (old)
*
local anchor
(best)* Example of simple table of contents
Links to other media
mailto: links
* try mailto: in browser
* mailto: link
* additional parameters
* make it VERY clear that mail client will pop up
Other file types (zip, pdf, doc, etc)
* Linking to any file type is possible, not just htm
* make it clear that link does not go to a webpage * it is very annoying to have a pdf load when a webpage is expected * put a little icon or something
Notes about links
When you link to a folder, it will fetch index.*, so is generally the first file you should create
Link text should be descriptive (e.g. “Photos of my garden”) to show where they go
Link text should not be an action (e.g. “Click here!”)
* link destination is not clear
* people don't like being told what to do
Use title attribute when a link cannot be clear
HTML Lists
* Ordered Lists (
,
- )
* Unordered Lists (
,
- )
* When to use each
* Definition Lists (
,
- ,
- )
* Nested Lists
HTML Images
* Images are separate files (compare doc with htm)
* * ALT is not there to popup text, even though Internet Explorer does it * ALT = alternate text, used if the image fails to load
* Use title attribute to popup text
Other attributes: width, height, border, title, align, hspace, vspace
HTML Images: Advice
Use only jpg, gif and png formats
* bitmaps are too large
* other formats are not always readable
Specify a width and a height for the image to make sure page doesn't keep resizing every time an image loads
Thumbnailing
* To make a thumbnail, enclose an image in a link
* It is possible to use the same picture and resize it using width and height attributes * Very bad – wastes bandwidth!
Image Maps
This section is here for completeness' sake and can be skipped
* image map => image with clickable areas
* tag, id attribute
* tag, attributes: alt, coords, href, shape, title
* shape can be rect, circle or polygon
HTML Tables
* A table is made up of rows and columns
* A table can be considered a list of rows
* A row can be considered a list of cells
*