Git Product home page Git Product logo

y2s19-html-labs's Introduction

Your First HTML Page

(adapted from y2s18 html labs)

Lab 1: Basics

1. Fork and clone this repository

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

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

  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 the tag
  • A h1 tag inside the tag
  • A h2 tag inside the 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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.