Close

Basic HTML

Leave a comment

What is HTML?

HyperText Markup Language is the foundation of ALL websites.  It's a series of tags that tell a browser what the webpage should look like.

Basic HTML presentation

Basic HTML

In this challenge, you'll work through some of the basic HTML tags that are the foundation of websites.

Open a browser window (Chrome, Edge, Firefox), Notepad and a window to your OneDrive and we'll get started.

The Bookworm Bookshop Website

You will create a simple 4-page website for this company using only HTML coding.

Create a new folder in your OneDrive, call it Web Design. Go to the Campus Share Drive and copy the #_lastname_bookworm folder into the Web Design folder.

Follow along with these videos, using Notepad (or any Text Editor your computer has) to write the code for these pages. I was using TextEdit on a Mac when I did these, but all text editors will do the same thing. There is a PDF inside the folder that shows all of the text you should be writing.

Upload to Canvas

Create a new folder called Web Design - that way all of your websites are located in one place.

Inside Web Design, create a new folder and call it #_lastname_bookworm  (just like your folder in your One Drive).

Upload your HTML and CSS pages to this folder.

Create another folder inside the bookworm folder, call it images.

Upload your image files to this folder.

***Your file/folder structure in Canvas should be exactly like that of your folder in your OneDrive.

Find your index.html page in Canvas files - select it, then click on the View button (the eyeball) at the top of the page. Copy the URL once the index page is viewed. This is the link you'll use in your ePortfolio post.

Turning it in...

Create a new page in your Canvas ePortfolio called, Web Design. Remember that your newest posts will go at the top of the page.

  1. Put the Title of the challenge
  2. Answer the following questions:
    1. What is the purpose of the <DIV> tag?
    2. Between which tags does all of the information you want seen on the webpage go?
    3. Between which tags does the <title> and <link> tags go?
  3. Type "View my Website"
  4. Select "View my Website" and Insert the link to your index.html page.

Save your page and check to make sure your link works!