HTML Basics Lesson

WHAT IS A HTML ELEMENT

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

An Explanation of Basic Tags

<html>indicates a the beginning of the webpage. Called the root element.
</html> indicates the end of the Webpage
<head> indicates the beginning of the page header. Page loading meta info and title info is placed in the header.
<title>indicates the beginning of the page’s title. (Notice that the words “My First Page” appear in the browser tab at the top of the Web page.)
<body> indicates the beginning of the visible content of the webpage. Any text, images, or other elements typed after this tag appear on the Web page itself.
<h1> indicates the beginning of Header 1 sized text. This is generally used for page headers. You must include </h1> to stop header formatting.
<p> and </p> indicates the beginning and end of a paragraph of text. It results in a double enter formatting on the page.
Tags that have a slash mark"/" indicate the end of that particular tag. (So, </title> indicates the end of the page’s title.)
All typing should happen after the <body> tag and before the </body> tag

Almost every website uses this basic webpage structure. The Main content of the page goes inside (or between) the <body> tag. The html code above results in the webpage below.

STEP 1 - OPENING YOUR TEXT EDITOR

Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad++.

Open the Windows Start Menu (window icon at the bottom of your screen)
Search for NotePad++ or NotePad (notepad++ is better suited for programming)
Open NotePad++

STEP 2 - WRITE SOME HTML

Write the following HTML code into NotePad++

Be sure to pay close attendtion to the "syntax" of the tags.

You must include the "<" and the ">" symbols around the tags.

Closing tags must have the "/" symbol in the correct location as well.

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<p>This is my second paragraph</p>

</body>

</html>

STEP 3 - SAVE THE HTML PAGE

Save the file on your computers in the DOCUMENTS folder.

On NotePad++, go to the FILE menu and select SAVE AS
Change the save location to your DOCUMENTS folder
Name the file index.html (THIS IS VERY IMPORTANT)

**If you do not add the .html to your file name, it will not save as a webpage.

STEP 4 - VIEW YOUR PAGE IN CHROME

Click on the FILE EXLORER icon at the bottom of your window screen
Navigate to your DOCUMENTS folder and find the index.html file
Double click the file and it should open with CHROME
Your page should look something like the image to the right.
You can now swith between NotePad++ and CHROME to view the edit and view versions of your webpage. When you make a change on the NotePad++ page, save it, then switch to the CHROME page and refresh to view the update.
**If it does not open with CHROME, you may have named the file incorrectly.

Step 5 - Add More HTML tags

Now that you know the basics of HTML coding, you can add even more formatting to your Web page. Adjust the text to make it your own. Change fonts, colors, and styles. Remember that all of these tags have to be used after the <body> tag, and before (above) the </body> tag.

Change the opening <body> tag to <body bgcolor="yellow"> to change the background color of the page.
Other color codes for the <body bgcolor=”yellow”> tag can be found here Color Codes
<b> and </b>to begin and end bolded text.
<i> and </i>to begin and end italic text.
<center> and </center> to begin and end centered text.
<marquee> and </marquee>to begin and end scrolling text. (This only works in Internet Explorer.)
<br>to add a line break.
<p> and </p>to begin and end a paragraph.
<h3>larger text
<h2>even larger text
<font color=”blue”>will make the text blue
<font face=”Arial”>will make the text font “Arial” instead of “Times New Roman”
<img src=”filename.jpg”>to insert a picture (picture must be saved in the same folder as your webpage)
<a href=”http://www.siteyouwanttolinkto”>linked text</a> to add a hyperlink to another page
More code tags can be found here: https://www.w3schools.com/tags/default.asp

ADD JAVA SCRIPT COUNTER

Add a countdown to Winter Break / Summer Break

Navigate to the following website: https://logwork.com/countdown-timer

Fill out the widget settings with the following info:
- Choose Date end time: 2025-12-19 15:00 (for winter break)
- Choose Date end time: 2026-05-28 15:00 (for summer break)
- Email: email@email.com
- All Other Settings: Your Choice
Click on the EMBED ON YOUR WEBSITE button
Highlight the script and copy it (Ctrl-C)
Paste it into your HTML website, within the BODY section of the page (after the <body> but before the </body>)

Experiment Sources:https://www.schillmania.com/projects/snowstorm/#customizing

Report abuse