HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section 3: Formatting text Section 4: Adding Images Section 5: Adding links to a web site Section 6: Adding sound Section 7: Common Tags Exit Section 8: CSS Style Sheets

GETTING STARTED This section tells you how to begin to make a web page CONTENTS Back Next Exit Section 1

CREATING A WEB PAGE FILE 1.Go to Start > All Programs > ICT> Notepad++ 2.Change the Language to HTML 3.Write and press enter 4.Write 5.Press enter a few times and write CONTENTS Back Next Exit

SAVING YOUR WEB PAGE FOR THE FIRST TIME 1.Go to File> Save As 2.Find your HTML folder 3.Save as mysite.html 4.Click OK 5.DO NOT close the notepad CONTENTS Back Next Exit

TO OPEN YOUR WEB PAGE AS A WEB PAGE 1.Go to My Documents 2.Double click on mysite.html 3.DO NOT close this CONTENTS Back Next Exit

SPLITTING YOUR PAGE INTO SECTIONS 1.The head section is the top section of the page 2.Between the tags and, write and CONTENTS Back Next Exit

SPLITTING YOUR PAGE INTO SECTIONS 3. Between and write the and 4. Between and write the title of your webpage 5. Save CONTENTS Back Next Exit

WHAT DOES IT LOOK LIKE SO FAR? You should still have the web page up Click refresh If not open double click on mysite.html from your HTML folder It should look like this CONTENTS Back Next Exit

MAKING THE BODY 1.After write 2.Press enter 3.Type some text you want on your page 4.Press enter 5.Write 6.Save 7.Click refresh on your web page 8.You should see the screen on the next slide CONTENTS Back Next Exit

CONGRATULATIONS!! You have successfully set up your first web page. Keep working to see how fantastic your page can look...maybe be the best in the class? CONTENTS Back Next Exit

This feature allows you to create a banner across the top of your web page with text that moves across the screen © Miss Khan CONTENTS Back Next Exit Section 2

MOVING BANNER (this will only work in internet explorer) 1.After write 2.Then type the text you want to go across the page 3.Then write © Miss Khan CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... © Miss Khan This text moves across the screen CONTENTS Back Next Exit

FORMATTING TEXT This next section tells you how to make change text so it looks clearer and more presentable CONTENTS Back Next Exit Section 3

MAKING TEXT BOLD 1.Before the text you want to make bold type 2.After the text you want to be bold type 3.Save 4.See what it looks like by pressing refresh on your internet explorer CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

MAKING TEXT ITALIC 1.Before the text you want to make italic type 2.After the text you want to make italic type 3.Save 4.See what it looks like by pressing refresh on your internet explorer CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

UNDERLINING TEXT 1.Before the text you want to underline type 2.After the text you want to underline type 3.Save 4.See what it looks like by pressing refresh on your browser (you should really only underline hyperlinks; you’ll learn about those, later) CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

COMBINING FORMATTING You can make text bold italic and underlined Always close tags in reverse order CONTENTS Back Next Exit

HEADING STYLES 1.To make text stand out as headings we can change the size of this text: h1 is the biggest size and h6 is the smallest 2.Before the text you want to make a heading type (if you want the heading to be really big!!) 3.After the text you want to make a heading type CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

FONT COLOURS 1.Before the text you want to change the colour of type 2.After : type the colour you want the text to be 3.After the text you want to change the colour of type CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

ALIGNING HEADINGS ***Align = the position of the text on the screen***  To align text, type instead of  Save This text is in the centre CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

NEW PARAGRAPHS 1.To use a paragraph write the text you want to be in a paragraph between and CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

CHANGING FONT SIZE 1.Your font goes from being very large (size 7) down to very small (size 1) 2.Before the text you want to change the font size of write 3.After the : sign write the font size you want, followed by px with no space between them 4.After the text you are changing the font size of write this font size is 24 pixels CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

Combining styles is very easy; you just have to separate them with ; 1. Write <p style="background:black 2. Write ; 3. Write color:pink"> 4. Write your paragraph 5. Write

PUTTING TEXT ONTO A NEW LINE 1.Before the text you want on a different line write CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

Bullet points 1.Write 2.Write then write the text you want to be in the bullet point and then write 3.Repeat step 2 as many times as you want 4.Finish by writing Bullet Points are useful Bullet Points are cool Exit

Numbered list 1.Write 2.Write then write the text you want to be the numbered item and then write 3.Repeat step 2 as many times as you want 4.Finish by writing Numbered lists are useful Numbered lists are cool Exit

ADDING IMAGES This next section tells you how to add images to your web page CONTENTS Back Next Exit Section 4

ADDING AN IMAGE 1.Go to the internet and find an image you like 2.Save it in your HTML folder with a sensible name (you shouldn’t use spaces) 3.In your notepad file, write and between the "" write the name of your image CONTENTS Back Next Exit

ADDING LINKS TO A WEBSITE CONTENTS Back Next Exit Section 5

ADDING HYPERLINKS TO A WEBSITE 1.Find a place where you want the hyperlink to be displayed 2.Write <a href = " 3.Write the address of the website you want to link to eg. 4.Write "> after the address 5.Write the text you want to appear on your website 6.Write click here to visit Google CONTENTS Back Next Exit

WHAT IT LOOKS LIKE... CONTENTS Back Next Exit

ADDING SOUND This section will tell you how to play sound on your site CONTENTS Back Next Exit Section 6

ADDING SOUND 1.Find a sound file in mp3 format 2.Save it to your HTML folder 3.Move the mouse to after 4.Press enter 5.Write and replace Music by the file name of your sound file CONTENTS Back Next Exit

TaskTag Bold example Bullet point list example 1 example 2 Center example Font style example Heading example Horizontal rule Hyperlink mywebsite Image Italic example Line break Numbered list example 1 example 2 Paragraph example Paragraph (blue background) example Paragraph (right align) example Paragraph (centre align) example Underline example SECTION 7 - COMMON TAGS CONTENTS Back Next Exit

INTRODUCTION TO CSS CONTENTS Back Next Exit Section 8

WHAT IS CSS? CSS stands for Cascading Style Sheets CSS is used to format your webpage CSS can be included within a HTML document or in an external document that is referenced within the HTML Using an external document can save a lot of work because it can be used to style every page of a website.

CSS SYNTAX The selector is the HTML element that you want to style. Each declaration consists of a property and a value. You can set a value to each property e.g. color:blue;

CSS SYNTAX CONTINUED This example would be used to style a paragraph (p) Must be surrounded by curly brackets. Each declaration must end with a semi-colon Note the spelling of color!! p { color:red; text-align:center; }

WAYS TO INCLUDE CSS Use an external style sheet. This is ideal when you want the same styles to be applied to many pages. To do this you use a tag within the on your html web pages. This will link to the style sheet: This must be the same as the name given to the stylesheet

THE EXTERNAL CSS DOCUMENT A text document saved with extension.css The document should not contain any HTML tags. The CSS document must be stored in the same folder as the HTML documents that use it.

STYLING BACKGROUNDS A color can be specified by:  HEX value e.g. “#E03FFFF”  RGB value e.g. “rgb(255,0,0)”  A color name e.g. “red” body {background-color:#b0c4de;}

STYLING TEXT The color property is used to set the color of the text. The text-align property is used to set the horizontal alignment of text. h1 { color:blue; text-align:center; }

COPY THIS CODE ONTO A SEPARATE NOTEPAD PAGE. SAVE AS STYLE.CSS body{ font-family:"Lucida Console", Courier New, Monospace;background-color: #BDDEFF;}h1,h2,h3{text-decoration: underline;}h1{font-size: 40px; text-align: center;}p{color:red; } Change the colours and size. Use this link to find out more about styling and hex colour codes.