Website Design Course Outline

Introduction to creating websites

• Introduction to HTML, CSS, JS and Dreamweaver

• Web browsers (Internet Explorer, Firefox, Safari, Opera and Google Chrome)

• Role of HTML in web development

HTML (Hyper Text Markup Language)

• HTML page structure

• HTML tags

• HTML attributes and values

• View HTML web pages code

HTML Meta

• What are HTML Meta tags

• Role of HTML in search engine optimisation

• HTML keywords and importance in SEO

HTML Text

• Change the font of text

• Define text colour and size

• Use of Headings H1, H2, H3 etc

• Creating superscripts and subscripts

HTML List

• HTML ordered list

• Unordered list

• Use list items

• Create a navigation with a list

HTML Links

• How to create a link to another page

• Connecting web pages using links

• Define target for links

• Create HTML anchors

• Link to an anchor

• Change link colour on mouse hover

• Creating a link from an image

HTML Tables & Div

• Creating an HTML table

• Adding rows and columns to table

• Defining padding and spacing

• Adding table borders

• Create table cell colour

• Use images in tables

• Create Div

• Apply Div Colours

• Defining width and height for Div

• Float vs Clear

• Use background colour for Div

Working with image in HTML

• Create image links

• The GIF, JPEG and PNG formats

• Alternative text, titles and descriptions for images

HTML Multimedia

• Creating a marquee

• Adding video to web pages

• Adding YouTube video to a web page

• Adding a Google map to a web page

HTML Forms

• Creating a form

• Creating fieldsets and legends

• Creating HTML Form text boxes

• Creating password boxes

• Using form Labels

• Creating checkboxes

• Creating List menus

• How to create a file upload

• Creating form submit button

• Form reset button

CSS (cascading style sheet)

• What is CSS?

• Separating content from presentation

• Role of CSS in web design courses

• Inline vs embedded or external CSS

• CSS structure

CSS in HTML

• Applying style on one web page

• Applying style on complete website

• Defining styles for Classes

• Style for HTML tags

• Defining styles for links

Styling text using CSS

• Styling text elements

• Specifying font size and colour

• Specifying font alignment

• Choosing a font family

• Specify font size

• Setting the Line Height

• Make text Italics

• Use Bold Formatting

• Underlining Text

• Use text’s background

• Word-spacing and Letter-spacing

Styling links using CSS

• Creating hover effects

• Keeping track of links

• Create website navigation and page layout using CSS

• How to use Div

• Fluid, Fixes and Elastic layouts

• Specify the height and width of an element

• Specify the border, margin and padding around an element

• Wrapping text around images

• Use float and clear

• Use background images for elements

• CSS positions: static, relative, absolute, fixed

Publishing/Upload website

• Selecting a Domain Name for your website

• CPanel intro

• Web Servers Introduction

• Uploading and Downloading to and from your website

• Protocols FTP, HTTP

HTML web page troubleshooting

• Testing your website

• Check HTML code

• View code from browser

• Use Firebug to inspect HTML web page elements

• Markup and CSS Validation tools