This booklet is knowledge of. a web page. of a web page find what you. you want to. SiteSell offers. Introduction

Size: px

Start display at page:

Download "This booklet is knowledge of. a web page. of a web page find what you. you want to. SiteSell offers. Introduction"

Brenda Watson
5 years ago
Views:

1 From computerskills.com/ Thank you for downloading this freee Booklet. This booklet is intended for people, who want to start out with their own web site or just want to get the basic knowledge of what goes on behind the a web page. These days it is almost expected that everyone has at least a personal webpage. If you have been considering having a web site for personal use or for your small business and never really had any html training, this just might be all the training you ll need. This booklet is written in an easy to understand language and illustrated with images. It explains the setting up of a web page from scratch. You may or may not know some of it already, so I tried to make it easy for you to find what you need to know by using the Index. Numerous web hosts out there will offer you small programs for creating a click by click edited website, so you don t NEED to know how to work with html. It is my experience, however, that when you first start your personal or small business website, you will want to be able to personalize your site, so the site gets your idea of the right look and feel. Most of these web host programs will allow you to choose between different effects or features, but it is always nice to know the basics of how you achieve simple changes. You are welcome to make comments or suggestionss to this Ebook. Just send me a note through the contact form on my web site. You can find it HERE. If you want to start a smalll business on the web, I would like to recommend the world s best web host to you. The name is SiteSell, and calling it a web host is really not the right word for it! SiteSell offers hosting, site building made very easy, submission to the search engines is included, a community of people to help with anything you find difficult, lots and lots of easy to follow tutorials.....and LOTS more all included in the subscription. You can read more about it HERE Introduction

2 Page 1 Table of contentt Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page TOC Building a page Adding text Formatting text Adding line breaks Your first web page! Aligning text/content Formatting font Font color Back ground color Inserting image Inserting text link Creating image links Creating a list Creating a Table L&F of table Wrapping text around an image Copyright c computerskills.com This document is protected under the general law of Copyright. Permission is granted to print this document for educational purposess and/or to link to the origin of this document with a clear reference to the author and web site it belongs to.

3 The html codes are called "tags", and every tag has a start and an ending symbolized with the "<" and the ">" Also called 'starting a tag" and "closing a tag". Every web site/web page consists of a notepad text file with the information for every command everything you see on the page: Page 2 <html> <head> </head> <body> </body> </html> tells the browser, that here comes a web site/page inside the head tag you will find the tags for keywords optimization for the seach engines, IF the page you're looking at is keywords optimized, that is. You may also find the page "Title" Marks the end of the head tag tells the browser that here starts the actual content of the page tells the browser that here ends the actual contents of the page tells the browser that here ends the web site/page What I just mentioned is the basics behind any web page, if left like this the page will be a white page in the browser with no content, but just a page. Text file for the basic web page And the web site will look like this <html> <head> </head> <body> </body> </html>

4 Page 3 Give it a try... Create a text file with Notepad with the text : <html> <head> </head> <body> </body> </html> Save the text file as test.html (save it to your desktop)... Double click the icon...and the file will open with your browser.. Content Now we want to actually write something on that page... We already know that content goes between the <body> and the</body> tags, so try to write a sentence between these two tags in the text file.. Open the textt file test.html file with notepad...(right click... open with...notepad) Save the file, and open it by double clicking it again...

5 And now you actually wrote a page with text on it! Page 4

6 Formatting the text Page 5 <b> </b> <i> </i> <u> </u> Start Bold text End bold text Start Italic text End Italic text Start underlined text End underlined text Open your text file again Type in the same line 3 times like this between the body tags.: Line number 1 you wrap in the BOLD tags Line number 2 you wrap in the italic tags Line number 3 you wrap in the underline tags Now your text file should look like this:

7 Now save the text file again as text.html and open it by double clicking it. It will again open in your browser, only now you have formatted the text and your web page will look like this: Page 6 Notice how the 3 lines you typed are NOT 3 lines, but actually 1 line. That is because we haven t actually told the browser to see them as 3 lines. In order to do that we need to insert another tag the line break tag: <br> Tells the browser that here is a line break This tag does NOT have an end tag, as a line break really doesn t have a start and an end! Try adding it like this to your text file

8 Page 7 Now you told the browser to see these lines as 3 lines in a row. Congratulations! You have created your first web page.

9 Page 8 Now I m sure you would like to be able to do more than just adding random text.. Ready to go on to next step? Aligning your text/content <p> Start of paragraph </p> End of paragraph <p align= right > Describes the alignment of the paragraph as RIGHT <p align= left > Describes the alignment of the paragraph as LEFT <p align= center > Describes the alignment of the paragraph as CENTERED Give it a try.. Open Notepad again and create a file that looks like this: Save it like before as test.htlm (overwrite the one you have)

10 Double click your text.html file and now you have a web page like this: Page 9

11 Page 10 Formatting font We don t always want to write in Times New Roman, which is the usual default font, so we need to be able to change that. However, you will have to choose between the web safe fonts the fonts that most browsers will allow you to use. Web Safe fonts include: Arial sans serif Verdana Times New Roman Courier Courier New Impact Other fonts that work on a majority of browsers include: Chicago Helvetica Microsoft Internet Explorer (now about 75% of the market) also accepts: Georgia Trebuchet <font face= verdana > </font> Start of text with a special font face End of text with a special font face So let s try changing the font in our test.html file:

12 Page 11 Open the test.html by double clicking, and you ll seee the result: Try the same with your other lines in the text file and use other fonts. Notice how the font of the line inside the tag has changed...

13 Page 12 Adding color to fonts Next step is to be able to change the color of the font.. Colors are changed by adding the hex number for the color you want your text to have. Here are some examples of hex numbers for the most usual colors: Color Color Code Red #FF0000 Turquoise #00FFFF Light Blue #0000FF Dark Blue #0000A0 Light Purple #FF0080 Dark Purple # Yellow #FFFF00 Pastel Green #00FF00 Pink #FF00FF Color Color Code White #FFFFFF Light Grey #C0C0C0 Dark Grey # Black # Orange #FF8040 Brown # Burgundy # Forest Green # Grass Green # <font color= ff0000 > </font> Starts the color of the font Ends the color of the font

14 Page 13 Give it a try.. Write your text with the codes like this: And the result: Notice how the font of the line inside the tag has changed...

.. <body bgcolor= hex number > No end tag needed, it applies to

15 Page color/background color Page 14 You can change the background color for the entire page... <body bgcolor= hex number > No end tag needed, it applies to the entire page Let s try the code for that in the text file: Open it the usual way and the results will be...

16 Page 15 Inserting an image <img src= name of image.jpg > </img> Start of image shows the source of the file displayed End of image To insert an image, you will need to point to the source of the image, meaning the location where it is stored. In this case we point to an image source located on this computer. If this web page was to go live on the net, the source would have to be somewhere online you would need to upload your images to a folder at an online storage. Let s write the code into the text file: Open the file the usual way.. and the result would be this:

17 Page 16 Inserting a text link We want to link to Yahoo from our web page, so we will have to referrence to a URL: <a href= Start of link/reference </a> End of link/reference Put this code into your text file: And now you have a text with a link..

18 Page 17 Make an image link Instead of the text you can also make an image link to another page.. <a href= url of website/page.com ><img scr= name of image.jpg > Refers to webpage and image source </a> Closes the tag Back to your text file...and write in the code and save the file as test.html now you have a linked image. Notice how the link shows as a hand and in the process line when pointed at with the mouse

19 Page 18 Creating a list There are several different kinds of lsts, but tis booklet will concentrate one two kinds of lists: The unordered list a lists with bullets The ordered list a numbered list starting with the number 1 Your text file for a list with bullets... Your web page...with an un ordered list with bullets.

20 Page 19 Your text file for a list with numbers... Notice the only thing change from before is the start and end tag... Save and open your web page file and you ll see the difference..

21 Page 20 Adding a table <table cellpadding xx cellspacing xx width= xxx > <td> <tr> </table> Starts table and gives info on dimensions Table data Table row End of table So the code for a 2 column 1 row table will be: And the result will look like this:

22 Page 21 Look and feel of the table You can also change the L&F of the table by adding a little more info inside that table tag. You can change the number for cell space and padding and add the hex number for the color, you would like. border color= hexnumber cellspadding= xxx cellspace= xx Inside <table > tag Inside <table > tag Inside <table > tag To add some color to the borders, in this case red: And here is the result:

Page 22 Of course inside the table tag you can add the other formating snippets like bold, Italic,underlined, change the font, insert images or create links.

23 Page 22 Of course inside the table tag you can add the other formating snippets like bold, Italic,underlined, change the font, insert images or create links. In this next example we want to create a table for small images.. You can add as many as you like. Remember to deine the width of your table suitable for the number of images you want to place inside the table. When one row is filled up and you want to add another ro, you use the</tr> and start the next row with a new <tr> This code would result in one row of two columns:

24 Here is an example of a table with two rows and three columns: Page 23 and on the web page...

<div> Inside the div tag the information of that section will have to be placed.

25 Wrapping text around an image Page 24 To make the text wrap nicely around an image, you ll need to use a div tag. The div tag defines a division/section of the document. <div> Inside the div tag the information of that section will have to be placed. Here s an example: In this example the image floats to the rigth of the section. You can change that to left or center as well. The web page of this example looks like this:

26 Basic html overview Page 25 Start of tag What the tag does.. End of tag <html> tells the browser, that here starts and ends a web site/page </ /html> <head> inside the head tag you will find the tags for keywords optimization for the search engines, IF </ /head> the page you're looking at is keywords optimized, thatt is. You may also find the page "Title" <body> tells the browser that here starts and ends the actual content of the page </ /body> <b> <i> <u> <br> Start and ends Bold text Start and ends Italic text Start and ends underlined text Tells the browser that here is a line break no end tag! </ /b> </ /i> </ /u> <p> <p align= right > Start and end of paragraph Describes the alignment of the paragraph as RIGHT end with... </ /p> </ /p> <p align= left > Describes the alignment of the paragraph as LEFT end with... </ /p> <p align= center > Describes the alignment of the paragraph as CENTERED end with... </ /p> <font face= name of font > <font color= hex number > <img src= name of image.jpg > Start and end of text with a special font face Start and end of font color Start and end of image shows the source of the file displayed </ /font > </ /font> </ /img> <a href= URL > <ul> <ol> <li> Start and end of link tag Un numbered list Numbered list Starts every element of the list inside the <ol> and <ul> tags. </ /a> </ /ul> </ /ol> <table> Starts table and should have the snippets for dimensions inside the <> </ /table> border= xx Defines the border of the table placed inside the <table > No end cellpadding= xxx Defines the cell padding placed inside the <table > No end cellspace= xxx Border color= = hexnumber Defines the cell space placed inside the <table > Defines color of table border placed inside the <table > No end No end <div> Defines a division/section of a document </ /div>

Html basics Course Outline

Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and