HTML

Text Instructions: VIDEO Instructions: [|How to create and modify your first web page using HTML and Notepad] Test Instructions:
 * ** HTML1=== ** |||| ** What is HTML? **
 * STEP 1**- create a folder for this project.
 * 1) First, logon to your computer with your own username and password.
 * 2) Open the folder on your desktop with your name on it. - the your DOCUMENTS folder.
 * 3) Click on **NEW FOLDER** and name it **Web Design**
 * 4) Open that folder
 * 5) Again, click on **NEW FOLDER** and name it **HTML1**
 * 6) You will save ALL the work on this page in your **HTML1** folder
 * STEP 2** - Create your home web page:
 * 1) **Open notepad++ (go to: Start-->Accessories-->notepad++**). If you don't have notepad++ just select notepad.
 * 2) Copy and paste the following HTML code that is in bold below:


 * **
 * My first web page **
 * **
 * HELLO**
 * HELLO**
 * HELLO**
 * HELLO AGAIN**
 * **
 * **


 * 1) Go to: **File-->Save** and save the file in your HTML1 folder exactly as: **index.html** (NO SPACES IN NAME!)
 * 2) //Note: the home page file of any web site is ALWAYS named: INDEX//
 * 3) **Test the file in your browser:** G o into your folder, and double-click on the **index.html** file. It should have saved as a Google icon if Chrome is your default browser. ||
 * ** HTML2 ** |||| ** How do we modify a web page? **

=Hello=
 * 1) Open your index.html file in Notepad
 * 2) Do a search on HTML tags and use the reference to modify your page.
 * 3) Modify the index.html file. Replacing the text, so that when you save the changes and open the page in the browser, or refresh it, it says the following. Use HTML heading tags to change the size of the text on each line.

School
||

. # Display this image on your web page (or another of your choice). Hint: search on "html image tag"
 * **HTML3 - How do we change and add HTML tags to a page?**
 * Goal: Use the following new HTML tags on your web page:**
 * 1) **center**
 * 2) **italic**
 * 3) **font**
 * 4) **image**
 * Assignment Instructions: **
 * 1) Using paragraph tags write the following **four** statements so that each statement is on its own line on your web page.
 * 2) Check out my first web page.
 * 3) I love web design!
 * 4) HTML is fun!
 * 5) HTML is getting easier and easier.
 * 6) Do the following to each statement. (Search for an information on each HTML tag to find out how to change your code in notepad. Make one change, save and refresh your page in the browser to see your changes.)
 * 7) Center the first statement
 * 8) Apply italic to the second one
 * 9) Change the font face of the third one to verdana and the size to 4
 * 10) Change the font color to any other color than black (use a hex color code instead of the color name).
 * 11) Add another paragraph of text to your page that says: **I LOVE WEB SITE DESIGN!!** Use the font tag to make it look different from all other text - your choice.
 * 12) **Add this image to your page by right-clicking on it below and select File->Save Image As.** Make sure you save it to the same folder your index.html file is in
 * 1) **Add this image to your page by right-clicking on it below and select File->Save Image As.** Make sure you save it to the same folder your index.html file is in
 * 1) This file name in your image tag's src attribute will be: "**familyguy.jpg"** Hint: this image file MUST be in the same folder as your index page or it will not be found and you will get a broken image on your page.
 * 2) Reminder: Make sure you add the image tag **BEFORE** the closing body tag of the page.
 * 3) Save and test your changes in the browser.
 * Challenge:** Make the text - HTML if really FUN! scroll across you page.
 * 1) So a search on: ** code** select: []
 * 2) Copy and paste the marquee tag **that scrolls across the page** **AND has a background color.**
 * 3) **T**ell us who your best friend is.
 * 4) Do a search on "web hex colors". Select a light color.
 * 5) Use the hex color code (#xxxxxx) for that color and put it in the "bgcolor" tag attribute of the marquee tag. ||


 * **HTML4 - How do we change the background of our web page?**
 * Goal:**
 * 1) **Use BODY tag attributes - bgcolor**
 * 2) Use the hex color code to define the colr

Read about pixels and hex colors


 * Assignment Instructions: **
 * To change the background color of your web page: **
 * 1) Open your index page in Notepad and in your browser
 * 2) Do a search on: **hex color codes** and choose a hex code for a light color (Example: #dd44ff )
 * 3) In another browser tab, search on **"HTML body tag",** choose W3schools and **READ** the **attributes**.
 * 4) Find the tag in your code. Add the **bgcolor** attribute in the opening tag. For Example: 
 * 5) Save and test.
 * Easy challenge:**
 * 1) Create a separate web page (For example: save under another name like index2.html) that contains a soft-colored patterned image as a background. Note: Use the **index.html** for the following exercises. ||   ||

**HTML5 - How do we create lists in HTML?**
 * Goal:** Use the following new HTML tags on your web page:
 * 1) ordered list
 * 2) unordered list customize the bullets - shape and color

Using the w3schools.com web site, do a search on **HTML lists.**
 * There are two types of lists:**
 * 1) ** Ordered List: ** (a numbered list)
 * ** Unorder List ** : (a unnumbered list which is called a bullet list)

Add two different types of lists in your index.html page. Create an ** unordered l ** ist (bullets) of your favorite music artists
 * Assignment Instructions: **
 * your favorite artist1
 * your favorite artist2
 * your favorite artist3

Save and test as you go along.
 * DEFINE in ** an ** ordered list ** (numbered) defining these web terms: # default
 * 1) pixel
 * 2) acronym
 * 3) RGB
 * 4) web-safe color

For full credit - complete ALL of the following:
 * 1) Can you figure it out WITHOUT HELP from me?- Problem Solving Challenge (but not required): Modify the **unordered list** to display a **square** instead of a disc **(**the default). (Hint: use the w3schools.com web site, read, click on links and the try buttons to figure it out or do a search on "html unordered list types")
 * 2) Modify the **ordered list to display A,B,C** instead of 1,2,3. (Hint: use the w3schools.com web site, read, click on links and the try buttons to figure it out or do a search on "html ordered list types".
 * 3)  Make the **unordered list's bullets BOTH a different color**  ||

**HTML6 - What is a Hyperlink and how can we customize link colors?**
 * GOALS:**
 * 1) create a hyperlink
 * 2) create an email link
 * 3) define a custom color for active links
 * 4) define a custom color for visited links

**Assignment Instructions:** Extra Credit:
 * 1) **SEARCH** on "**HTML hypertext link**" to find the code. ** The HTML anchor element ......, is used to define both hyperlinks and anchors. ** Use the w3shools.com site as a reference.
 * 2) **ADD A LINK on your page to: www.mamma.com** so that when the user clicks on it, the page opens **IN A NEW BROWSER WINDOW** - the user SHOULD NOT LEAVE YOUR WEB PAGE. ** Your link text should read: ** Click here to go to mamma.com - **NOTE**: For your link to work, the URL in **the code** MUST contain the entire address: **http://www.mamma.com** inside quotes.
 * 3) **ADD A LINK to a web site** of your choice. The active link text on your web page should say: **"Click here to go to one of my favorite sites".** N A NEW BROWSER WINDOW - the user SHOULD NOT LEAVE YOUR WEB PAGE. Make sure the link works and
 * 4) **ADD AN EMAIL LINK** to your gmail address. The active link text on your page should say: **Contact Me**. The user should not see you email address on the page. **HINT**: Search "HTML email link" and use the code.
 * 5) **MODIFY YOUR LINK COLORS** - SEARCH on "HTML body tag". Visit the attributes table and body your body tag to customize the colors of your active and visited links.
 * DEFINE **these words IN YOUR WEB PAGE using a numbered list:
 * 1) **hyperlinks**
 * 2) **anchor tag**
 * 3) **relative link**
 * 4) **email link**
 * 5) **link ro**t
 * Create a ** anchor link ** on your web page. ** Put the link at the top of the page and have it link to text at the very bottom of the page. **
 * WEB SITE USABILITY TIP**: Link names should always be **short and clear what they link to.**