1 HTML Info Sheet

HTML Information Sheet
What is HTML?
Hypertext Markup Language, or HTML for short, is what tells a web browser how a page should look. An HTML document contains two
components: content (e.g., course schedule information) and HTML commands that specify the placement and formatting of the content
(e.g., bold, italics, grid layout).
HTML Elements
1. HTML tags are surrounded with angle brackets < >.
2. HTML tags are not technically case sensitive, but for good practice (xHTML compliance), always use lowercase.
3. HTML tags are often in pairs with a starting tag and ending tag (<body></body>).
4. HTML tags must have a closing tag. For paired tags, this means the second tag: , for others, the closing slash is in the tag
itself: (xHTML compliance)
5. Nested HTML tags should close in the reverse order of the opening tags:
<body>
Curriculum Vitae
</body>
6. Some tags can have properties (or "attributes") which further refine the effects of the tag:

<img alt="logo">
In the Beginning
Start with the following tags to begin your page. All HTML pages will have these tags. The <html> tag tells the browser to
<html> read and render the page in HTML. The ending </html> tag tells the
<head>
<title> Your title goes here </title>
browser that this is the end of the page. The <title> tag denotes the title
</head> displayed on the top left of the browser. It must be placed inside
<body> the <head> tag, which is closed </head> before the body of the page begins.
Your content goes here. All of the content of the page, the text, images, media, etc., is enclosed
</body> between <body> and</body>.
</html>
Save your file with the extension .html (not .txt)
See Your Results

Your file isn’t available on the Internet but we use this program to view the results of your webpage. Once you open the file, you should
be able to view your “webpage.” When you go back to Edit pad and change and add more tags and information, you should be able to
just refresh your web browser to see the changes.
Internet Explorer: File > Open > Browse.
Chrome: To get to an Open Dialog box, click CTRL + O
Basic Tags
<HR> Horizontal rule. This command gives you a line across the page.
Break. This Breaks the text and starts it again on the next line. In an HTML document, you need to denote where you
 
want every carriage return by using the tag.
 Paragraph. This skips a line before starting the text again.
<UL> </UL> Unordered list (bulleted)
<OL> </OL> Ordered list (numbered)
<LI> List Items (each new line)
Example:
<UL>
<LI> Applies
 Apples
<LI> Oranges  Oranges
<LI> Pears  Pears
</UL>
<HR>
 
 1. Monday
<OL>
2. Tuesday
<LI> Monday
<LI> Tuesday
3. Wednesday
<LI> Wednesday
</OL>
Text Manipulation
Text located between these tags will be formatted to your tags: bold, italics or underlined.
 Bold. Example: I want to be bold.
 Italics. Example: I prefer italics. 
 Underline. Example: No. Underlining is the way to go. 
<TT></TT> Typewriter Text. Example: <TT> Display text as if it came from a typewriter. </TT>
To combine tags, always nest them (outside -- in)
 This text will be bolded and underlined. 
Text Alignment – Use American spelling!

<CENTER> </CENTER> Any text contained between these are centered.
 This controls the alignment of the text.
<CENTER> All this text will be centered. </CENTER>.
To right align text and have as a separate paragraph, use the following command:
 Text in here is pushed to the right. 
Font Flags
 There are 12 font size commands: +6 to +1 (larger) and –1 to –6 (smaller)
 This changes the font type of the text contained between them.
While styles are a nice way to define the appearance of various text elements of your document, the and 
flags are the most practical way to improve your page’s appearance.
 Increase the font size of all this text 3 times. 
 All this text will be in Comic Sans MS 
OR
 Text will be increased in size, arial font and blue 
Adding Colours
To change the colour of your text, you need two items:
1. A command to change the text
2. The hex code that represents the colour (or simply the name of common colours)
Use a search engine to find websites to see the numerous colour codes available.
<BODY BGCOLOR = “…”>

In the <BODY> flag, add: BGCOLOR= “red” to change the background colour to red.
</BODY>
To change the colour of a specified word, words or letters, use the flag with a colour code

(hex value). For example, to change text to appear in blue .
< TEXT = “#######”> This denotes the full-page text colour.

< LINK = “#######”> This denotes the colour of the links on your page.
< ALINK = “#######”> This denotes the colour the link will flash when clicked upon.
< VLINK = “#######”> This denotes the colours of the links after they have been visited.
These commands come right after the <TITLE> command. In that position, they affect everything on the page. You can also place
them all together inside the same command along with any background commands, something like this:
<BODY BGCOLOR=”#######” TEXT=”#######” LINK=”#######” VLINK=”#######”>
Insert an Image
<IMG SRC=”…”> This will insert an image (a file name or an online image)
This tag stands for Image Source and the file name is exactly as it is in your account with the file extension. Be sure to save all files
associated to your site in the same folder as your HTML files. This is mostly for in class assessment purposes. Your “C drive” will be
different from the teacher’s “C drive”.
<IMG SRC=”hello.jpg”>
<IMG SRC=”http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg”>
Re-sizing Images
Sometimes the picture you find is too large for your page. Change the size by thinking about how many pixels high or wide you want.
Play around with the numbers until you are satisfied with the size. Keep in mind the height vs width ratios for a square versus a
rectangle.
<IMG SRC=”picture.jpg” HEIGHT=100 WIDTH=100>

Links
Anchor Hypertext Reference. Create a hyperlink to another page you created (file name) or to
<A HREF=”…”> </A>
anther website (URL).
To create an INTERNAL link for something like “Go to my page about my friends” you will need to type the following:
<A HREF=”FriendsPage.html”> Go to my page about my friends </A>

 FriendsPage.html is the exact file name of the other page you already created and are linking to. Remember to have a link back to
the home page and to the other pages in the site.
To create an EXTERNAL link such as “Click here for HTML goodies”, you would need to type the following:
<A HREF=”http://www.htmlgoodies.com”>Click here for HTML goodies</A>
 You can also use an image to be the “clickable” link, just replace the file name with the URL.
Advanced Table Design

<TABLE> </TABLE> Starts the table. Make sure the rows and cells are embedding properly within these tags.
<TR> </TR> is a row
<TD> </TD> is a cell (or a new column)
You can use a table for a variety of purposes. You can align information into a table with columns and rows, or use them to organize the
information on the page in a specific placement (with invisible borders). If you change the border to equal zero, the border will be clear
but the information will be still be placed in the cells.
<TABLE BORDER=”1”>
<TR>
<TD> Row 1, cell 1 </TD>
<TD> Row 2, cell 2 </TD> Row 1, cell 1 Row 1, cell 2
</TR> Row 2, cell 1 Row 2, cell 2
<TR>
</TR>
</TABLE>
To add borders and tables within tables, please refer to the following site: http://www.htmlgoodies.com/tutors/table.html#simple
“Go back to the top” of a page (or any other point)

<A NAME=”…”> </A>
Create a hyperlink to another position on the page.
<A HREF=”…”> </A>
Sometimes when a page is very long, you want to be able to click on a link to take you back to the top of the page. You could also use
this tag on any section of the page. It is important to “name” the section you want before making the hyper-reference to it.
<A NAME=”Top”> This is the top of the page, the title, or any section. You can give it any name </A>
Lots of information is on the page…
<A HREF =”#Top”> Click here to go back to the top of the page </A>
Text that scrolls across the page

<MARQUEE=”…”> Text or images will scroll across the page. You can specify direction.
<MARQUEE DIRECTION=”Right”> <IMG SRC=”picture.jpg”> </MARQUEE>

<MARQUEE DIRECTION=”Left”> left </MARQUEE>
<MARQUEE DIRECTION=”Up”> up! </MARQUEE>
<MARQUEE DIRECTION=”Alternate”> Bounce! </MARQUEE>
Animated Icons
Please refer to the following site for some examples: http://www.gifanimations.com/

1 HTML Info Sheet

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

1 HTML Info Sheet

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Information Sheet

Save your file with the extension .html (not .txt)

See Your Results

To combine tags, always nest them (outside -- in)

Text Alignment – Use American spelling!

<CENTER> All this text will be centered. </CENTER>.

<P ALIGN=”right”> Text in here is pushed to the right. </P>

<BODY BGCOLOR = “…”>

< TEXT = “#######”> This denotes the full-page text colour.

<BODY BGCOLOR=”#######” TEXT=”#######” LINK=”#######” VLINK=”#######”>

<IMG SRC=”picture.jpg” HEIGHT=100 WIDTH=100>

<A HREF=”FriendsPage.html”> Go to my page about my friends </A>

<A HREF=”http://www.htmlgoodies.com”>Click here for HTML goodies</A>

Advanced Table Design

“Go back to the top” of a page (or any other point)

Lots of information is on the page…

Text that scrolls across the page

<MARQUEE DIRECTION=”Right”> <IMG SRC=”picture.jpg”> </MARQUEE>

Das könnte Ihnen auch gefallen