html basics an introduction to html. what is html? stands for “hyper text markup language”...
TRANSCRIPT
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• <p>• Not a “paired” tag• Each new paragraph, insert <p>
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 <p> between lines?• Meant to be “section headers”• No need for the <p>
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: <b> … </b>• Italicize: <I> … </I>• Underline: <u> … </u>• 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 <p> 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: <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 <font color=“#colour code goes here”>
• 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 <font color=“blue”> with simple colours but it does not work for all
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
• <font face=“times new roman”>• 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 <font color=“blue”>
• 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:• <FONT COLOR=“YELLOW”>• 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.– <P> (to create a new paragraph)– <FONT FACE=“VERDANA”>– <FONT COLOR=“RED”>– <B>– <I>– <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