eman19-meet / y2s18-html

Your First HTML Page

Lab 1: Basics

1. Fork and clone this repository

1. Fork this repository by clicking "Fork" on this page:

2. Copy this repository's url by clicking the green clone button:

3. Open you terminal, and clone the repo to your computer( replace Link with link from step 2):

git clone <LINK-FROM-STEP-2>

2. View hello.html in a web browser:

Open the 'hello.html' file using a Chrome, what do you see in the page?

3. Make your first html page!

To do that

1. Open hello.html using sublime text
2. Change it to be topic about you or a topic you like, your page should have the following:

• A header tag
• Add/change title for your page
• A body tag
• A p paragraph inside you tag
• A h1 tag inside the tag
• A h2 tag inside tag

Not sure what to do? See the html example here

4. Checkoff with an instructor or TA when you are done.

Extra:

Go to w3schools.com, read about HTML formatting and learn about some other tags that exist. Try using them!

Lab 2: Attributes

1. Add an image.

In the same file as Lab 1, add an image of you or the animal or the topic you wrote about. Set the width to 400px.

2. Add a link.

Add a link to the Wikipedia page about the animal or the topic you're interested in.

3. Use the style attribute.

Change the color or background-color of one of at least one of your headings.

4. Check off with an instructor or TA when you are done.

5. Commit and push you changes

git add hello.html
git commit -m "added hello.html. I am a pro!"
git push

Remember to git add your file, and then git commit -m "your message" to save it to the local repository.

Extra:

On w3schools.com, read about HTML Colors. Add colors specified in both HEX and rgb formats to your web page!

Lab 3: Tables

1. Ask some questions.

Take a quick survey of 4 of your classmates, asking 3 simple questions. An example is on the board.

2. Organize the information into a table on your page.

Remember to add a border and headings!

3. Check off with an instructor or a TA.

Lab 4: Lists

1. Make an unordered list.

List several of your favorite movies.

2. Make an ordered list.

List several of your favorite books, in order.

3. Check off with an instructor or a TA.

4. Extra:

Go to w3schools.com and read the page on HTML lists. Change the type of your ordered list, the style of your unordered list, and make a description list.

Lab 5: Forms

1. Create a form with a username and a password.

2. Add checkboxes.

To the same form, add checkboxes to let the user pick which of four different activities they like.

3. Add radio buttons.

To the same form, add radio buttons to let the user pick if they are a MEET Staff or MEET Student.

4. Add a submit button.

5. Check off with an instructor or a TA.

Extra:

On your own, figure out how to use the textarea tag. Add it to your form.

Lab 6:

1. Organize your document with div.

Put the content from Lab 1 in a div with class "intro". Put the rest of your HTML document in its own div with class "content". Put your form in a div with id "form".

2. For each div, give a style.

Try using both color, background-color, and text-align.

3. Commit your changes.

Remember to git add your file, and then git commit -m "your message" to save it to the local repository, and then git push to push it to GitHub so it's on the remote server.

4. Check off with an instructor or TA.

Extra: Make it pretty!

Play around with your web page, changing the styles and adding more content. Think about how you want things to be organized, and use div to do so.