Introduction to HTML and CSS
-
Excellent literature to take away. The trainer, Dean, was knowledgeable and guided us through the course at his own pace.
← | →
Training
In London
Description
-
Type
Training
-
Level
Beginner
-
Location
London
-
Duration
2 Days
-
Start date
Different dates available
This course will give you an introduction to Hypertext Markup Language (HTML) - the language of the world wide web. You will learn how to write your own web pages and to style them using Cascading Stylesheets (CSS). Suitable for: This is an introduction level class, so there are no prerequisites.
Facilities
Location
Start date
Start date
Reviews
-
Excellent literature to take away. The trainer, Dean, was knowledgeable and guided us through the course at his own pace.
← | →
Course rating
Recommended
Centre rating
Barry Hunt
Course programme
This course will give you an introduction to Hypertext Markup Language (HTML) - the language of the world wide web. You will learn how to write your own web pages and to style them using Cascading Stylesheets (CSS).
Introducing HTML
- What is HTML?
- HTML files
- HTML and the internet
- Uniform Resource Locators (URLs)
- Default pages
- HTML and browsers
- Common browsers
- HTML versions
HTML page structure
- HTML page structure
- The document type declaration
- Document type settings
- HTML 4.01 versions
- Validating your HTML
- The header section
- The contents of the page
- Writing an HTML page
- What is an element?
- The html, head and body elements
- Contents of the head element
- The title element
- Contents of the body element
- More on Headings
- The p element - paragraphs
- Spaces and tabs in text
- Emphasising text within paragraphs
- Adding a strong emphasis
- b and i elements
- Line Breaks
- Adding comments to HTML
- Special characters in HTML
- Preformatted text
Adding links, images and multimedia
- Embedding images
- img element attributes
- Image formats
- Image height and width
- Specifying image height and width
- Creating links
- Opening a link in a new window
- Absolute vs relative paths
- Relative paths
- The base element
- Linking to a particular part of a page
- What links look like
- Using an image as a hyperlink
- Embedding other multimedia
Image maps
- Image maps
- Creating image maps
- The map element
- The area sub-elements
- The shape attribute
- The coords attribute
- Map element in a separate file
HTML logical elements
- Addresses
- Abbreviations and acronyms
- Defining terms and phrases
- Quotations
- Insertions and deletions
- Meta tag
- Setting the content type
- Specifying the character set
Styling your HTML
- Styling your HTML
- What is CSS?
- Internal style sheets
- Specifying styles in a separate file
- CSS rules
- CSS rules for multiple elements
- Declaring Styles Inline
- Background colour
- Colours
- 3 digit hex values
- Functional notation
- Functional notation using percentages
- Colour names
- Background images
- Formatting text: colour
- Formatting text: alignment
- Formatting text: decoration
- Formatting text: Indentation
- Formatting text: Text transformation
- Fonts
- Generic font families
- Font style and weight
- Font size
- Deprecated tags and attributes
More CSS
- Reference by ID
- Reference by class
- Being even more specific
- Pseudo-classes
- Pseudo-elements
- Block and inline elements
- The CSS display property
- div and span
Lists
- Lists
- Ordered lists
- Declaring an ordered list
- Unordered lists
- Declaring an unordered list
- Definition lists
- Declaring a definition list
- Displaying lists
- Formatting lists
The box model
- The box model
- Borders
- Border styles
- Border width and colour
- Shorthand border definition
- Setting individual borders
- Padding
- Padding individual sides of an element
- Margins
- Setting individual margins
- Using margins to centre a block element
- Height and width
- The full size of the element
- The full size of the element – IE bug
- Visibility
- Positioning
- Static positioning
- Fixed positioning
- Relative positioning
- Absolute positioning
- The z-index property
- Float
HTML Tables
- Data vs layout tables
- Example: Using a table to display data
- Example: Using a table for layout
- Defining a table
- Add a caption and summary to tables
- Column widths
- colspan and rowspan
- Formatting table data
Frames
- HTML frames
- Creating a page with frames
- Specifying column width and row height
- Nesting framesets
- Changing the contents of a frame
- Special target names
- Frame display options
- The noframes element
- Inline frames: the iframe element
Advanced topics: HTML Forms
- What are HTML forms?
- HTML form example
- The input element
- Password fields
- Text areas
- A textarea’s wrap attribute
- Radio buttons
- Checkboxes
- Hidden fields
- Uploading files
- Submit buttons
- Reset buttons
- Labelling form elements
- A form’s action
- Form submission methods
XHTML
- XHTML
- XHTML: differences from HTML 4.01
- XHTML DOCTYPE declaration
- Changes to document prologue
Next steps
- Using JavaScript for form validation
- Web Development Frameworks
- Common web development frameworks
Introduction to HTML and CSS