Project 1: Basic Tags

Basic HTML Page Structure

explanation video

The html pages you write will be composed from "tags." For example, <body>

Notice that the html tags usually come in pairs, an opening and a closing tag. For example: <html> </html>

<!DOCTYPE html>

<html>

<head>

<title> my html page template </title>

</head>

<body>

</body>

</html>

All of what the audience can see on a website is in the body section of the html code, so the body section grows and grows as the page content increases.

The head section contains information about the website, styling information, and the title tags.

1. The first task is to create a page "template"

The template will have all of the necessary html tags so you can begin each assignment with the basic parts of a page, saving you from re-typing it every time.

Go to repl.it and open "Project 1: Basic Tags." Click on "index.html" to open the file. Type (do not copy-paste) the above code into the index.html file.
Then make a new file (at the upper left, to the right of the word "Files," there is a icon like a page of paper with a "+" on it.) Name it html_template.html
Copy-paste your work from index.html to html_template.html

2. How to use the online tutorial web site, W3Schools:

In parts 3-5, below, you will be asked to read sections, study the examples and practice using the tags. Then, you will write your code in your repl.it file.

DO NOT COPY THE CODE FROM W3SCHOOLS.

There are two reasons I say that:

You learn better when you type it yourself.
When you copy-paste and then submit it as your own work, that counts as plagiarism and I will prosecute it as described in the school's honor code.

3. Read the sections called html introduction & elements:

Learn and understand the following terms and how they apply to html:

Elements: What are they?
Tags: What are tags and how does one work with them in html?

4. Study the Headings & Paragraphs pages on w3schools

Headings page on w3schools

Here you will learn the 6 headings tags, the tags for making horizontal lines on the page and the tags for including hidden comments in the code.

Try clicking on the green "Try it now" feature. When you see "Try it now" throughout W3Schools, it's an opportunity for you to try running code, editing it, running it again, etc. It's a fun way to learn.

Paragraphs page on w3schools

Here you will learn the paragraph tag as well as tags for creating line breaks.

You will also learn how the browser strips out many spaces and line breaks.

Code Comments

Here you will learn how to create comments that are hidden from the viewer of the web page. Yopu can also use this to "turn code off" without deleting the code.

Project 1: Basic Tags- Due Date: Wednesday, 4/10/24

Please go repl.it and index.html. After finishing part 1, above, it will have your template, which you will now add to.
Change the title of the page (in the <title> tags) to Basic Tags. This is the title that appears on the tab in the browser.
Make sure you understand each of the basic html tags and attributes listed below and include at least one example of each in the page.
Don't just have an h1, then an h2, then an h3, etc.
Instead, think about how web sites, magazines and newspapers are organized and try to create some order in your page. Each heading element must contain some text. You can choose what text to use.
REMEMBER: Most html tags travel in pairs, an opening tag and a closing tag.
When you have finished Project 1, hit the Submit button. Believe you can still edit it after submitting, but it indicates to me that it is ready for me to grade it.

here are The tags to use:

<!doctype html>