Procedure+Library

=General Procedure=

//Make a Folder//

 * 1. ** Open the folder that you want to save your new folder in.
 * 2. ** On the **File** menu, click **New**, and then click **Folder**.
 * 3. ** Type the name of the new folder. Don’t put any spaces in the name.

//Copy and Paste Images//

 * 1. ** Navigate to the folder where your images are stored.
 * 2. ** Hold down the CTRL key and click each of the photos you want to use in your site.
 * 3. ** Let go of the CTRL key, and while the images are selected, press CTRL + C to copy them.
 * 4. ** Navigate to the folder for your Web site.
 * 5. ** Press CTRL + V to paste the images into your folder.

//Rename the Image//

 * 1. ** Right-click on the image you want to rename, and click **Rename** on the list.
 * 2. ** Type the new name you want to give the file, and then press ENTER.

//Turn// **//Off//** **//Pop-Up Blocker//**
If your default Web browser is Internet Explorer 6 or Internet Explorer 7, follow these steps to turn off the pop-up blocker:
 * 1. ** Open **Internet Explorer**.
 * 2. ** On the **Tools** menu, click **Pop-up Blocker**. Click **Turn Off Pop-up Blocker** if it appears on the list. If the list says **Turn On Pop-up Blocker**, don't click it. Just click somewhere else on the screen to make the menu disappear.

If your default Web browser is Firefox, follow these steps to turn off the pop-up blocker:
 * 1. ** Open **Firefox**.
 * 2. ** On the **Tools** menu, click **Options…**.
 * 3. ** Click the **Content** tab.
 * 4. ** Next to **Block pop-up windows**, un-check the box if it has a check in it.
 * 5. ** Click **OK**.

//Allow Active Content//
If your default Web browser is Internet Explorer 6 or Internet Explorer 7, follow these steps to allow active content, such as JavaScript:


 * 1. ** Open **Internet Explorer**.
 * 2. ** On the **Tools** menu, click **Internet Options…**.
 * 3. ** Click the **Advanced** tab.
 * 4. ** Scroll down to the **Security** section.
 * 5. ** If the check box next to **Allow active content to run in files on My Computer** is empty, click it to check it. If it already has a check, leave it as it is.
 * 6. ** Click **OK**.

If Firefox is your default browser, follow these steps to allow active content:
 * 1. ** Open **Firefox**.
 * 2. ** On the **Tools** menu, click **Options…**.
 * 3. ** Click the **Content** tab.
 * 4. ** Next to **Load images automatically**, **Enable JavaScript**, and **Enable Java**, click the check boxes to add check marks if they don't already have them.
 * 5. ** Click **OK**.

//Publish a Web Site//

 * 1. ** Choose and register for a domain name.
 * 2. ** Sign up for a Web hosting service.
 * 3. ** Get the publishing service information, user name, and password from your Web hosting service.
 * 4. ** Follow the Web hosting service's instructions for publishing your site.


 * // Choose a Hexadecimal Color //**
 * 1. ** Choose a color from the list below:

=Kompozer Procedure=

**Save a Page**

 * 1. ** On the **File** menu, click **Save As...**.
 * 2. ** In the **Page Title** dialog box, type a name for your page. Choose a name that makes it easy to understand what your page is about. This is the name your viewers will see.
 * 3. ** Click **OK**.
 * 4. ** In the **Save Page As** dialog box, navigate to the folder you want to save the page in.
 * 5. ** In the **File name** field, type a name for the page. If the page is your home page, name it **index.html**. File names must not have any spaces or special characters in the name. This is the name that only you will see. Your viewers won’t see it.
 * 6. ** Click **Save**.

**Add a Web Site to the Site Manager**

 * 1. ** In the **Site Manager**, click the **Edit Sites** button.
 * 2. ** In the **Publish Settings** dialog box, click **New Site**.
 * 3. ** In the field next to **Site Name**, type the name of the site.
 * 4. ** Click the **Select directory** button.
 * 5. ** In the **Browse For Folder** dialog box, browse to the folder for the site.
 * 6. ** Click **OK**.
 * 7. ** In the **Publish Settings** dialog box, click **OK**.

==**//Choose a Background Color //**==


 * 1. ** In the **Site Manager**, click the plus sign next to the name of the Web site that contains the page.
 * 2. ** Double-click the name of the page.
 * 1. ** On the **Format** menu, click **Page Colors and Background…**.
 * 2. ** In the **Page Colors and Background** dialog box, click **Use custom colors**.
 * 3. ** Click the box next to **Background**.
 * 4. ** In the **Block Background Color** dialog box, choose a color for your background.
 * 5. ** Click **OK** in the **Block Background Color** dialog box.
 * 6. ** Click **OK** in the **Page Colors and Background** dialog box.

**Save a Page**

 * 1. ** Click the **Save** button or go to the **File** menu and click **Save**.

**Add and Format Text**
  **// Around //****// Image //**
 * 1. ** In **Normal** view, click where you want to add text.
 * 2. ** Type the text you want to add.
 * 3. ** Click and drag with the mouse over the text to select it.
 * 4. ** On the **Format** menu, click **Paragraph**, and then click the type of text you want it to be. For a large heading for a page title, click **Heading 1**. For regular body text, click **Body text**.
 * 5. ** On the **Format** menu, click **Align**, and then click the type of alignment you want the text to have.
 * 6. ** On the **Format** menu, click **Font**, and then select a font from the list. Try out a few fonts until you find the one you want to use. Choose a Web-safe font to ensure that your viewers will see the correct font. (See the Glossary for Web-safe fonts.)
 * 7. ** On the **Format** menu, click **Text Color…**.
 * 8. ** In the **Text Color** dialog box, click a color, and then click **OK**.
 * 9. ** Click somewhere else on your page to deselect the text so you can see how the color looks.
 * 1. ** Open the page you want to add the image to in KompoZer.
 * 2. ** If you don’t see your image file listed in the Site Manager, but you do see the folder it should be in, click the yellow refresh arrow.
 * 3. ** Click and drag your image from the Site Manager to the place you want it to be on your Web page.
 * 1. ** Click your image once to make sure it is selected.
 * 2. ** On the **Format** menu, click **Align**, and then click the type of alignment you want to use.

            
 * 1. ** Click the image you want to wrap text around.
 * 2. ** On the **Format** menu, click **Image Properties…**.
 * 3. ** Click the **Appearance** tab.
 * 4. ** In the **Align Text to Image** drop-down list, select the type of text wrapping you want.
 * 5. ** Click **OK**.
 * 1. ** Save all of the changes on your open page.
 * 2. ** Minimize KompoZer.
 * 3. ** Navigate to the folder that contains your Web page.
 * 4. ** Double-click the **.html** file for your Web page to open it with your browser, or click **Refresh** if you already have the page open in your browser.
 * 5. ** Make sure your page looks the way you want it to in your Web browser.
 * 1. ** On the **File** menu, click **New**.
 * 2. ** In the **Create a new document or template** dialog box, make sure **A blank document** is selected.
 * 3. ** Make sure **Create in** says **New Tab**.
 * 4. ** Click **Create**.
 * 1. ** On the **Format** menu, click **Page Colors and Background…**.
 * 2. ** In the **Page Colors and Background** dialog box, click the box next to **Normal text**.
 * 3. ** In the **Text Color** dialog box, click the color you want your text to be. Make sure it is a color that will stand out on your background color.
 * 4. ** Click **OK**.
 * 1. ** Click where you want the table to appear on your page.
 * 2. ** On the **Insert** menu, click **Table…**.
 * 3. ** Click the **Precisely** tab.
 * 4. ** Choose how many rows and columns you want the table to have.
 * 5. ** To make the table fill the screen, next to **Width**, type **100**, and then choose **% of window** from the drop-down list.
 * 6. ** Next to **Border**, type a number for the table border weight. The higher the number, the darker the table border will be. **1** or **2** might be a good choice. **0** will make the border invisible.
 * 7. ** Click **OK**.
 * 1. ** Click a cell in the column.
 * 2. ** On the **Table** menu, click **Table Properties…**.
 * 3. ** Click the **Cells** tab.
 * 4. ** Click the check box next to **Width**.
 * 5. ** Next to **Width**, type the percentage of the table that you want the column to fill.
 * 6. ** On the **Width** drop-down list, select **% of table**.
 * 7. ** Click **OK**.
 * 1. ** Click and drag over the cells to select them.
 * 2. ** On the **Table** menu, click **Join Selected Cells**.
 * 1. ** Click and drag over the cells (or entire table) to select them.
 * 2. ** On the **Table** menu, click **Table or Cell Background Color…**.
 * 3. ** In the **Table or Cell Color** dialog box, click a color.
 * 4. ** Click **OK**.
 * 1. ** Click and drag over the text that you want to link.
 * 2. ** On the **Insert** menu, click **Link…**.
 * 3. ** In the **Link Properties** dialog box, click the yellow folder.
 * 4. ** In the **Open HTML File** dialog box, browse to the folder that contains the page you want to link to.
 * 5. ** Click the page you want to link to, and then click **Open**.
 * 6. ** In the **Link Properties** dialog box, click **OK**.
 * 1. ** Click the image that you want to link.
 * 2. ** On the **Insert** menu, click **Link…**.
 * 3. ** In the **Image Properties** dialog box, click the yellow folder.
 * 4. ** In the **Open HTML File** dialog box, browse to the folder that contains the page you want to link to.
 * 5. ** Click the page you want to link to, and then click **Open**.
 * 6. ** In the **Link Properties** dialog box, click **OK**.
 * 1. ** In the toolbar, click the **CaScadeS** button to open KompoZer's CSS editor.
 * 2. ** In the **CSS Stylesheets** dialog box, click the style sheet you want to add a style rule to.
 * 3. ** Click the painter's palette icon.
 * 4. ** If you want to style all of the elements of a certain type, such as the text or text, click **style applied to all elements of type**. If you want to style a special type of element, such as link text, click **custom style rule**.
 * 5. ** Click the drop-down arrow next to the empty field, and select the type of element you want to style from the list.
 * 6. ** Click **Create Style rule**.
 * 7. ** Click the tabs and choose how you want to style the element.
 * 8. ** Click **OK**.
 * 1. ** Open the page that has the style sheet that you want to export.
 * 2. ** In the toolbar, click the **CaScadeS** button.
 * 3. ** In the list on the left, click the text that says **internal stylesheet** to make sure it is selected.
 * 4. ** On the right, click the button that says **Export stylesheet and switch to exported version**.
 * 5. ** In the **Select a CSS File** dialog box, navigate to the folder you want to save the style sheet in.
 * 6. ** Next to **File name**, type a name for the stylesheet with **.css** at the end. Do not use any spaces or special characters in the file name.
 * 7. ** Click **Save**.
 * 8. ** Click **OK** in the **CSS Stylesheets** dialog box.
 * 1. ** Open the page that you want to apply the external style sheet to.
 * 2. ** Click the **CaScadeS** button.
 * 3. ** Click the drop-down arrow next to the painter’s palette icon, and click **Linked stylesheet** on the list.
 * 4. ** Click **Choose File**.
 * 5. ** In the **Select a CSS File** dialog box, browse to the folder that contains your external style sheet.
 * 6. ** Click the external style sheet file.
 * 7. ** Click **Open**.
 * 8. ** In the **CSS Stylesheets** dialog box, click **Create Stylesheet**.
 * 9. ** Click **OK**.
 * 1. ** On any of the pages that link to the style sheet, click the **CaScadeS** button.
 * 2. ** Click the plus sign next to the name of the style sheet, and then click the style rule you want to modify. Then use the tabs to modify the style rule.
 * 3. ** To make a new rule, click the name of the style sheet, click the painter’s palette icon, and then create the new rule.
 * 4. ** To delete a rule, click the rule you want to delete, and then click the red X.

        
 * 1. ** On the GIMP **File** menu, click **Open…**.
 * 2. ** Navigate to where your image is stored on the computer.
 * 3. ** Double-click the image you’d like to edit.
 * 1. ** On the **Image** menu, click **Transform**, and then click the type of rotation you want.
 * 1. ** On the **Image** menu, click **Scale Image…**.
 * 2. ** In the **Scale Image** dialog box, type a smaller number next to **Width** and then press ENTER to change the height automatically.
 * 3. ** Next to **X resolution**, type **72** and then press ENTER. The Y resolution will also change to 72. The X resolution controls the resolution of the width, and the Y resolution controls the resolution of the height.
 * 4. ** Click **Scale**.
 * 5. ** Change the view to **100%** to see the size the image will really be.
 * 1. ** On the **Image** menu, click **Image Properties**.
 * 2. ** In the **Image Properties** window, check the **Pixel dimensions** to make sure they are the dimensions you wanted.
 * 3. ** Check the **Resolution** to make sure it says **72 x 72 ppi**.
 * 4. ** Check the **File Size** to see how large the file is.
 * 5. ** Click **Close** in the **Image Properties** window.
 * 1. ** On the **File** menu above your image, click **Save As…**.
 * 2. ** In the **Save Image** dialog box, type a name for your image. Pick a name that clearly describes what’s in the image, so you’ll know what it is later. Be sure not to use any spaces in the name.
 * 3. ** Click the plus sign next to **Browse for other folders**.
 * 4. ** Navigate to the folder you want to save the image in.
 * 5. ** Click the plus sign next to **Select File Type** at the bottom left of the dialog box.
 * 6. ** Scroll down with the scrollbar on the right, and click **JPEG image** on the list.
 * 7. ** Click **Save**.
 * 8. ** In the **Save as JPEG** dialog box, in the field next to **Quality**, type a smaller number, like **60**.
 * 9. ** Click the plus sign next to **Advanced Options**.
 * 10. ** Make sure the **Optimize** box is checked. If it isn’t, click it to add a check.
 * 11. ** Click **Save**.
 * 12. ** Check the image properties to find out if the file is the appropriate size now.
 * 1. ** On the **Filters** menu, click a filter category, and then click a filter type.
 * 2. ** In the preview dialog box, adjust the filter until you like what you see, and then click **OK**. If you don't like it, click **Cancel** and try another filter instead.
 * 3. ** If you apply a filter and then change your mind, go to the **Edit** menu and click **Undo**.
 * 1. ** On the **File** menu, click **Quit**.

   **// Up //****// a Page with HTML Tags //**
 * 1. ** On the **Start** menu, click **All Programs**, then click **Accessories**, and then click **Notepad**.
 * 1. ** On the **File** menu, click **Save As...**.
 * 2. ** In the **Save As** dialog box, navigate to the folder you want to save your page in.
 * 3. ** In the field next to **File name**, type a name for the page, and then type **.html** after the name. If it's the home page for the site, use **index.html** as the file name.
 * 4. ** Click **Save**.


 * 1. ** Click in the white space, and type at the top of the page.
 * 2. ** Press ENTER a few times, and then type.
 * 3. ** Click the line below the tag, and press ENTER.
 * 4. ** Type, and then press ENTER a couple of times.
 * 5. ** Type, and then press ENTER a couple of times.
 * 6. ** Click after the closing tag, press ENTER, and type.
 * 7. ** Press ENTER a few times, and then type.
 * 1. ** Click after the tag, and press ENTER a couple of times.
 * 2. ** Type, type a title that describes your page, and then type.

           **// Up //****// an Internal Style Sheet //**
 * 1. ** Save the page in Notepad.
 * 2. ** Minimize Notepad.
 * 3. ** Navigate to the folder that contains your page.
 * 4. ** Double-click the **.html** file for the page to open it in a browser.
 * 1. ** Click inside the opening tag, before the >.
 * 2. ** Type a space, and then type bgcolor="".
 * 3. ** Between the quotation marks, type # and then type the hexadecimal number of the color you want the background to be.
 * 1. ** Navigate to the folder that contains your Web page.
 * 2. ** Right-click on the page, and click **Open With** and then click **Notepad**.
 * 1. ** Click where you want the heading text to appear.
 * 2. ** For large heading text, such as for the page name, type, type the title of your page, and then type . Use , , , , or for increasingly smaller text sizes.
 * 1. ** Click inside the tag for the text or image.
 * 2. ** Type a space, and then type align="".
 * 3. ** Between the quotation marks, type left, right , or center , depending on how you want to align the text.
 * 1. ** Click before the text you want to format, and type.
 * 2. ** Click after the text you want to format, and type.
 * 3. ** Click inside the first font tag, just before the >.
 * 4. ** Type a space, and then type face="".
 * 5. ** Between the quotation marks, type the name of the font you want to use for your heading. Choose a Web-safe font to make sure your viewers can see it.
 * 6. ** Click after the closing quotation mark of the font face, type a space, and then type color="".
 * 7. ** Between the quotation marks, type # and then type the hexadecimal number of the color you want the text to be.
 * 1. ** Click where you want the text to appear.
 * 2. ** Type , type the paragraph text, and then type.
 * 1. ** Click just before the word or phrase you want to emphasize, and then type  to bold it or  to italicize it.
 * 2. ** Click just after the word or phrase you want to emphasize, and then type either  or  to close the tag.
 * 1. ** Click just before the text that you want to link.
 * 2. ** Type.
 * 3. ** Between the quotation marks, add an absolute link (URL) or a relative link (folder and file name, starting in current page’s folder).
 * 4. ** Click after the text that you want to link.
 * 5. ** Type .
 * 1. ** Click in the opening  tag just before the >.
 * 2. ** Type target="_blank".
 * 1. ** Click where you want the image to appear.
 * 2. ** Type .
 * 3. ** Between the quotation marks, type the file name of the thumbnail image that represents your first Web site, with spelling and capitalization matching the file name exactly, and with the .jpg or .gif file extension.

 text-align: center; will center the text. color: #FFFFFF; will color the element. font-family: “Arial Black”; will set the font.        **// onclick //****// Attribute //**
 * 1. ** Click after the tag in the section, and press ENTER twice.
 * 2. ** Type .
 * 3. ** Press ENTER twice, and then type.
 * 1. ** Click at the end of the opening tag, and press ENTER twice.
 * 2. ** Type the selector to state the element you wish to style (such as h2 or body ), and then press ENTER.
 * 3. ** Type an opening curly brace, press ENTER twice, and then type a closing curly brace.
 * 4. ** Between the curly braces, add declarations. Each declaration has a property and a value, and each declaration is written on one line, separated by semicolons. For example:
 * 1. ** Before the text that you want to style, type.
 * 2. ** After the text that you want to style, type.
 * 3. ** In the opening tag, click after the word span.
 * 4. ** Type a space, and then type style="".
 * 5. ** If the text should be bold, type font-weight: bold; between the quotation marks.
 * 6. ** If the text should be italic, type font-style: italic; between the quotation marks.
 * 1. ** On the **Start** menu, click **All Programs**, then click **Accessories**, and then click **Notepad**.
 * 2. ** On the **File** menu, click **Save As…**.
 * 3. ** In the **Save As** dialog box, navigate to the folder you want to save the style sheet in.
 * 4. ** In the field next to **File name**, type a name for the style sheet, and then type **.html** after the name. Don’t put any spaces or special characters in the file name.
 * 5. ** Click **Save**.
 * 1. ** Click at the end of the line and press ENTER twice.
 * 2. ** Type this code to link your external style sheet:
 * 1. ** Click just before the tag.
 * 2. ** Type the following code:
 * 3. ** Between the quotation marks after href, type the file and folder name of the file you want to link to, starting in the current page’s folder.
 * 4. ** Click after the > in the tag, and type .
 * 1. ** Click inside the tag, just before the >.
 * 2. ** Type a space, and then type border="0".


 * 1. ** Click in the opening  tag for the link, just before the >.
 * 2. ** Type a space, and then type onclick="".
 * 3. ** Between the quotation marks of the onclick attribute, type alert('');.
 * 4. ** Between the single quotation marks, type the text that you want to be displayed in a dialog box. Add a backslash before any quotation marks in your message.
 * 1. ** In the tag, click before the >.
 * 2. ** Type a space, and then type name="".
 * 3. ** Between the quotation marks, type the name you wish to give the image. This is not a name your viewers will ever see.

 Welcome! The time and date is: document.write(Date);
 * 1. ** Click where you want the date and time to display.
 * 2. ** Type the following text:
 * 3. ** Click before the closing  tag, and press ENTER twice.
 * 4. ** On the blank line above the  tag, type, and then press ENTER twice.
 * 5. ** Type.
 * 6. ** Click inside the opening tag, just before the >.
 * 7. ** Type a space, and then type type="".
 * 8. ** Between the quotation marks, type text/javascript.
 * 9. ** Click on the blank line between the tags.
 * 10. ** Type the following code:

 function welcome { //Asks the person's name// // var name = prompt("What is your name?", "Enter name here"); // Welcomes the person alert("Welcome to my portfolio, " + name + "!"); }  </a> - Link tags.   - Bold tags. - Body tags. Define the start and end of the body section. - Break tag. Creates a line break. - Font tags. Add attributes in them to style the font. Not used in CSS at all. - Heading 1 tags. The largest heading size. - Heading 2 tags. - Heading 3 tags. - Heading 4 tags. - Heading 5 tags. - Heading 6 tags. The smallest heading size. - Head tags. Define the start and end of the HTML header. - HTML tags. Define the start and end of the HTML code.   - Italic tags. - Image tag. - Input tag. For an input element, such as a button. - Paragraph tags. Define the start and end of a paragraph. - Script tags. Used to insert script, such as JavaScript. - Span tags. Do nothing on their own except define a section of a Web page. Can hold attributes that apply to that section. - Style tags. Define the start and end of an internal style sheet, in the HTML header. - Title tags. For the page title that shows in the browser's title bar. Used in the HTML header.
 * 1. ** Click just after the closing tag, and press ENTER twice.
 * 2. ** Type.
 * 3. ** Press ENTER twice, and then type.
 * 4. ** Click inside the opening tag, just before the >.
 * 5. ** Type a space, and then type type="".
 * 6. ** Between the quotation marks, type text/javascript.
 * 7. ** Click and drag over the code below to select it.
 * 8. ** Press CTRL + C to copy the code.
 * 9. ** In Notepad, click the blank line below <script type=”text/javascript”>.
 * 10. ** On the **Edit** menu, click **Paste**.
 * 11. ** In the section of the page, click where you want the button that calls the welcome function to appear.
 * 12. ** Type.
 * 13. ** Between the quotation marks, type button.
 * 14. ** Click inside the tag, just before the >.
 * 15. ** Type a space, and then type value="".
 * 16. ** Between the quotation marks of the value attribute, type a message that tells the viewer to enter their name.
 * 17. ** Click inside the tag, just before the > and after the value.
 * 18. ** Type a space, and then type onclick="".
 * 19. ** Between the quotation marks, type welcome;.
 * 1. ** Use the following tags as needed in your HTML:

= =

<span style="color: #000000; font-family: arial,helvetica,sans-serif;">

.