html basics an introduction to html. what is html? stands for “hyper text markup language”...

HTML Basics

An Introduction to HTML

What is HTML?

• Stands for “Hyper Text Markup Language”

• Composed of “tags” which are surrounded by sideways triangles < and >

• Usually occur in Pairs:<tag> … </tag>

• Many different types of tags

Where to start?

• Our HTML will be in Notepad• This can be accessed by:

– Start button– Accessories– Note pad

• Saved as “______.htm”, not the default “______.txt”

Document Tags

• First tag always has to be the HTML tag (since we are writing in HTML)

• It looks like this:– <html>– </html>

• The tag with the slash will appear at the end of the page, since all of the html code will be in between

Document Tags Cont.

• Headers and titles:• Shown by <head> … </head> and

<title> … </title>• For example

– <head> Ms. Mattatall’s Page </head> would be

seen like the following:

HTML version vs. Saved Version

Body Tags

• Body is the main part of the webpage, aside from the title.

• Like this section of text• Start with <body>• End with </body>

Body Example

How come it didn’t work?

• Paragraph Tags• • Not a “paired” tag• Each new paragraph, insert

Paragraph Tag Example

Basic Text Structures

• New Headings (different from earlier)

• Same as the six different sizes of fonts: range from 1-6– 1 = biggest– 6 = smallest

Heading Examples

A bit more about headings

• Why no between lines?• Meant to be “section headers”• No need for the

Unordered Lists (not numbered)

• Starts with <UL> (for “unordered list”)• Then list the objects:

– <LI>Monday– <LI>Tuesday– <LI>Wednesday– <LI>Thursday– <LI>Friday– <LI>Saturday– <LI>Sunday

• End with </UL>

List Examples

Ordered List (same as a numbered list)

• Same as Unordered list• No bullets, goes with numbers• Starts with <OL>• Ends with </OL>

Ordered List Example

Some Easier Tags

• Bold: … • Italicize: … • Underline: … • Horizontal Rule (a line that goes

across the screen, like a divider) <hr> (an empty tag, doesn’t need the one at the end)

Bold/Italicize/Underline Examples

(notice the between the names to create the new paragraph)

Hyperlinks

• How you transfer people from one webpage to another

• Referred to as a “hypertext reference”

• Seen as “a href”• Website needs to be in quotations• Need the “http://”

Hyperlinks Cont.

• Makes words into a link• Instead of seeing the webpage

address, you see “click here” or other words

• Shown as:<a href=“http://www.dhs.ednet.ns.ca”>Dartmouth High Website</a>

Hypertext Reference Example (hyperlink)

Putting in an Image

• This is done through the internet• Uses the “internet source” or the

“image source”• Tag : <img src=“website of

image”>• To find the source of the image,

right click on the picture, then go to “picture properties”

Image example

Some Other Easy Tags

• To center your words on the page: <center> … </center>

• To change font size: (enter a number from 1-7)

• To make your font blink (careful this can be very annoying!) <blink> … </blink>

Changing Colours• Not as simple as typing the colour• Need the colour code: found here• http://html-color-codes.com/ or

http://www.htmlgoodies.com/tutorials/colors/article.php/3478961

• Change font by 

• This needs to go at the top of the page before your text if you want it all to be that colour

• Sometimes you can try with simple colours but it does not work for all

http://html-color-codes.com/

Changing Background Colour

• At the top of the page, after the <html> and <body> tags, you can enter <body bgcolor=“color here”>

Changing the Font

• • Use whatever font you prefer, but

your computer has to support that font for you to see it

• Make sure you use the quotations!!

More Tags

• You can find more html tags by searching the internet

• These are just simple ones meant to guide you along to making a simple web page

• Search for “html tags” on the internet to learn more

Assignment #1 - Walkthrough

1. Open up “notepad”• Start button• Accessories• Notepad

2. Save in your WWW folder in the H drive as

– Assignment1.html– MAKE SURE YOU DO THE .HTML part

Assignment #1 Cont.

• Write <HTML> at the top• Press enter 4 times• Write </HTML>• Go up top, click file then “save”

Assignment #1 Cont.

• Everyone should see this:

Assignment #1 Cont.

• Underneath the first <html> tag, insert 

• Press enter• Write your name (First, Middle, and

Last)

Assignment #1 Cont.

• Now you should see this:

Assignment #1 Cont.

• After your name, press enter• Create a Horizontal Rule (A horizontal

line that goes across the screen)• Write <HR> on the next line• Press enter• Now we are making the Body text• Type <Body> on the next line• GO down to where the </HTML> is (at

the bottom). On the line above it, type </BODY>

Assignment #1 Cont.

• You should see this on your screen

Assignment #1 Cont.

• Between the two body tags, press enter a few times. This does NOTHING to your page, just helps you keep organized.

• Make your text centered: type <CENTER> below the body tag, then press enter again.

• Enter the following:• • Dartmouth High School• Press Enter

Assignment #1 Cont.

• Now you should see this:

Assignment #1 Cont.

• Underneath Dartmouth high school, we will make your name a different color, make it scroll across the screen, make it bold, and make it italicized. Sounds hard but it’s not. Follow closely.

Assignment #1 Cont.

• Under dartmouth high school, place the following. Make sure you press enter after each.– (to create a new paragraph)– – – – – <MARQUEE>– Enter your name again here. (full name)– </MARQUEE> (To end the scrolling)

• Now your screen should look like this

Assignment #1 Cont.

• Go to “file” then “save”• Minimize the screen• Open your H: drive in the WWW

folder• You will see “assignment1.html”

saved• Open it up (it will open as a

webpage)

Assignment #1 Cont.

• Now your webpage should look like this: (the name in red will move across the screen

html basics an introduction to html. what is html? stands for “hyper text markup language”...

Documents