SUBJECT
COMPUTER APPLICATIONS
TECHNOLOGY
COURSE
GETTING STARTED WITH
HTML WEB DEVELOPMENT
COMPILED BY
MICHELLE MEYER
, Page 2 of 19
Contents
Creating a New Web Page in Notepad .......................................................... 3
Webpage Structure ..................................................................................... 4
Text and Paragraph Formatting ................................................................... 5
Basic Text Editing .................................................................................... 5
Paragraph Formatting and Breaks ............................................................ 5
Font Types and Colours ........................................................................... 6
Horizontal Lines ....................................................................................... 6
Heading Styles ......................................................................................... 7
Page Setup .................................................................................................. 8
Bullet and Numbered Lists .......................................................................... 8
Ordered Lists ........................................................................................... 8
Unordered Lists........................................................................................ 9
Multi-level Lists........................................................................................ 9
Adding Images .......................................................................................... 10
Hyperlinks ................................................................................................ 11
Links to Websites ................................................................................... 11
Links to Files ......................................................................................... 12
Using an Image as a Link ....................................................................... 12
Link to Top of Webpage .......................................................................... 13
Tables ....................................................................................................... 13
Basic Tables ........................................................................................... 13
Merging Cells ......................................................................................... 14
Cell Alignment........................................................................................ 15
Adding an Image in a Table .................................................................... 15
Basic Animations ...................................................................................... 15
Marquee Scrolling Text ........................................................................... 15
Animated GIFs ....................................................................................... 15
HTML Colours and Codes .......................................................................... 16
Common Fonts ......................................................................................... 17
Comments ................................................................................................ 17
Good Practices when Creating a Webpage ................................................. 18
HTML Tag Sheet........................................................................................ 19
Getting Started with HTML Compiled by: Michelle Meyer
, Page 3 of 19
Creating a New Web Page in Notepad
Create a folder and give it an appropriate name, for example, I am going to
create a website about Rottweilers. My folder will therefore be called
RottweilerWebsite for this example. All web pages and images relating to my
website will be saved in this single folder.
Open a new text file in Notepad. Click File > Save as. Give your web page an
appropriate name and add the extension .html manually. I will name the page
home.html.
home.html
file name extension manually added
Now you are ready to begin coding. Make use of the HTML Tag Sheet on page
19 to help you with your tags and attributes.
First open the file in Notepad or any other text-based editor. You need to right
click and use the open with option. Also open the file in any web browser,
such as Google Chrome or Firefox. Fit the windows, so you can see both
windows at the same time. See the screenshot below:
Getting Started with HTML Compiled by: Michelle Meyer
COMPUTER APPLICATIONS
TECHNOLOGY
COURSE
GETTING STARTED WITH
HTML WEB DEVELOPMENT
COMPILED BY
MICHELLE MEYER
, Page 2 of 19
Contents
Creating a New Web Page in Notepad .......................................................... 3
Webpage Structure ..................................................................................... 4
Text and Paragraph Formatting ................................................................... 5
Basic Text Editing .................................................................................... 5
Paragraph Formatting and Breaks ............................................................ 5
Font Types and Colours ........................................................................... 6
Horizontal Lines ....................................................................................... 6
Heading Styles ......................................................................................... 7
Page Setup .................................................................................................. 8
Bullet and Numbered Lists .......................................................................... 8
Ordered Lists ........................................................................................... 8
Unordered Lists........................................................................................ 9
Multi-level Lists........................................................................................ 9
Adding Images .......................................................................................... 10
Hyperlinks ................................................................................................ 11
Links to Websites ................................................................................... 11
Links to Files ......................................................................................... 12
Using an Image as a Link ....................................................................... 12
Link to Top of Webpage .......................................................................... 13
Tables ....................................................................................................... 13
Basic Tables ........................................................................................... 13
Merging Cells ......................................................................................... 14
Cell Alignment........................................................................................ 15
Adding an Image in a Table .................................................................... 15
Basic Animations ...................................................................................... 15
Marquee Scrolling Text ........................................................................... 15
Animated GIFs ....................................................................................... 15
HTML Colours and Codes .......................................................................... 16
Common Fonts ......................................................................................... 17
Comments ................................................................................................ 17
Good Practices when Creating a Webpage ................................................. 18
HTML Tag Sheet........................................................................................ 19
Getting Started with HTML Compiled by: Michelle Meyer
, Page 3 of 19
Creating a New Web Page in Notepad
Create a folder and give it an appropriate name, for example, I am going to
create a website about Rottweilers. My folder will therefore be called
RottweilerWebsite for this example. All web pages and images relating to my
website will be saved in this single folder.
Open a new text file in Notepad. Click File > Save as. Give your web page an
appropriate name and add the extension .html manually. I will name the page
home.html.
home.html
file name extension manually added
Now you are ready to begin coding. Make use of the HTML Tag Sheet on page
19 to help you with your tags and attributes.
First open the file in Notepad or any other text-based editor. You need to right
click and use the open with option. Also open the file in any web browser,
such as Google Chrome or Firefox. Fit the windows, so you can see both
windows at the same time. See the screenshot below:
Getting Started with HTML Compiled by: Michelle Meyer
