Scribd
Upload
16 views

HTML Introduction: Colors

HTML is the code that defines the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, lists, and links. The main tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for content, and <a> for hyperlinks to other pages or elements within the page. HTML pages are displayed in web browsers which interpret the HTML tags to structure and render the page.

Uploaded by

binode
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

HTML Introduction: Colors

HTML is the code that defines the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, lists, and links. The main tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for content, and <a> for hyperlinks to other pages or elements within the page. HTML pages are displayed in web browsers which interpret the HTML tags to structure and render the page.

Uploaded by

binode
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Introduction

HTML stands for Hyper Text Markup Language.

HTML is the computer language that is used to create documents for display on the Web. Many
editors exist to create Web Pages – Word, FrontPage, and DreamWeaver are just a few.
Nevertheless, each of these software programs (editors) performs the exact same task – they all
generate HTML language.

The HTML language consists of a series of HTML tags. Learning HTML involves finding out what tags
are used to mark the parts of a document and how these tags are used in creating an HTML
document.

Tags are instructions that tell your browser what to show on a Web page. They break up your
document into basic sections. All tags start with a < (left bracket) and end with a > (right bracket).

Basic HTML Tags

<HTML> </HTML>
This tag tells your browser that the file contains HTML-coded information. All html tags must be
placed between the open <HTML> tag and the closed tag </HTML> The file extension .html also
indicates the document is an HTML document. All html documents MUST be saved with the .html file
extension.

<HEAD> </HEAD>
The head tag identifies the first part of your HTML-coded document. The title tag (explained below)
must be places between the open <HEAD> tag and the closed </HEAD> tag.

<TITLE> </TITLE>
The title tag contains your document title and identifies its content in a global context. The title is
typically displayed in the title bar at the top of the browser window, but not inside the window itself.
The title is also what is displayed on someone's hotlist or bookmark list, so choose something
descriptive, unique, and relatively short. A title is also used to identify your page for search engines
(such as Hotbot or AltaVista).

<BODY> </BODY>
The largest part of your HTML document is the body, which contains the content of your document
(displayed within the text area of your browser window). All HTML tags that pertain to the body of
your HTML document must be places between the open <BODY> tag and the closed </BODY> tag.
The tag has attributes which you can use to set the colors of your background, text, links, and also
to include your own background image. They are as follows:

 BGCOLOR="white" Sets the background color (other color names: red, black, blue etc)
 TEXT="black" Sets the body text color
 LINK="blue" Sets the unvisited hypertext links
 VLINK ="purple" Sets the visited hypertext links
 ALINK="red" Sets the active hypertext links (the color of the hypertext link when you have
your mouse button depressed)
 BACKGROUND Let you use an image as the background <background=
Body attributes are used as part of the open <body> tag. For example:

<BODY BGCOLOR = "white" TEXT = "black" LINK = "blue" VLINK = "purple" ALINK = "red">

<H#> </H#>
HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are
typically displayed in larger and/or bolder fonts than normal body text. The first heading in each
document should be tagged <H1>.

The syntax of the heading element is: <Hy>Text of heading </Hy>


where y is a number between 1 and 6 specifying the level of the heading.

<P> Paragraph tag


Unlike documents in most word processors, carriage returns in HTML files aren't significant. In fact,
any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are automatically
compressed into a single space when your HTML document is displayed in a browser. So you don't
have to worry about how long your lines of text are. Word wrapping can occur at any point in your
source file without affecting how the page will be displayed.

In the bare-bones a paragraph could be coded as:

<P>This is a paragraph

the line break is ignored.</P>

In the source file there is a line break between the sentences. A Web browser ignores this line break
and starts a new paragraph only when it encounters another <P> tag.

To align a paragraph, use the align attribute along with the paragraph tag. Alignment can be
"center" or "right." Left is the default alignment. Text will be aligned in the manner spcified until the
paragraph tag is closed </P>

<P ALIGN="center"> This paragraph is centered </P>

TIP: To preserve readability in HTML files, put headings on separate lines, use a blank line or two
where it helps identify the start of a new section, and separate paragraphs with blank lines (in
addition to the <P> tags). These extra spaces will help you when you edit your files (but your
browser will ignore the extra spaces because it has its own set of rules on spacing that do not
depend on the spaces you put in your source file).

NOTE: The </P> closing tag may be omitted. This is because browsers understand that when they
encounter a <P> tag, it means that the previous paragraph has ended.

<BR> Line break


The <BR> tag forces a line break with no extra (white) space between lines. Use the <BR> tag
instead of the <P> tag when you want a line break with no additonal vertical space. Think of this a
single spacing.

<UL></UL>, <OL></OL>, <LI> Unordered and Ordered Lists


HTML supports unnumbered and numbered lists. You can nest lists too, but use this feature
sparingly because too many nested items can get difficult to follow.

HTML LISTS

1. Unnumbered Lists
To make an unnumbered, bulleted list,

1. start with an opening list <UL> (for unnumbered list) tag;


2. enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is
needed;
3. end the entire list with a closing list </UL> tag.
Below is a sample three-item list:

<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
The output is:

 apples
 bananas
 grapefruit
The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph
tags.

2. Ordered Lists
A numbered list is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items
are tagged using the same <LI> tag. The following HTML code:

<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

produces this formatted output:

1. oranges
2. peaches
3. grapes
<HR> Horizontal Rule
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful
to separate major sections of your document.

You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule).
Experiment with the settings until you are satisfied with the presentation. For example:

<HR SIZE=4 WIDTH="50%">

Character formatting

<B></B> Bold
<I></I> Italics
<U></U> Underline
<CENTER></CENTER> Centers image/text

<FONT> </FONT>
Font tag controls font attributes such as size, color and face. Sizes can range from 1-7, where 1 is
the smallest and 7 the largest font size. <FONT SIZE ="1" COLOR= "pink" FACE="ariel">This text is
small and pink</FONT>

LINKING in HTML

The chief power of HTML comes from its ability to link text and/or an image to another document or
section of a document. A browser highlights the identified text or image with color and/or underlines
to indicate that it is a hypertext link (often shortened to hyperlink or just link).

HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your
document:

1. start the anchor with <A (include a space after the A)


2. specify the document you're linking to by entering the parameter HREF="filename" followed
by a closing right angle bracket (>)
3. enter the text that will serve as the hypertext link in the current document
4. enter the ending anchor tag: </A> (no space is needed before the end anchor tag)
Here is a sample hypertext reference to our class syllabus:

<A HREF="http://www.luc.edu/faculty/dfelici/">Class Syllabus</A>

This entry makes the words Class Syllabus the hyperlink to the URL for the class syllabus.

Mailto links
You can make it easy for a reader to send electronic mail to a specific person or mail alias by
including the mailto attribute in a hyperlink. The format is:

<A HREF="mailto:emailinfo@host">Name</a>

Images
Most Web browsers can display images that are in X Bitmap (XBM), GIF, or JPEG format. Each image
takes additional time to download and slows down the initial display of a document. Carefully select
your images and the number of images in a document.

To include an image, enter:

<IMG SRC=ImageName.fileformat>
<IMG SRC=images/ImageName.fileformat -- if the image is in a directory called "images"

In order for the image to display in your browser the image must be saved, preferably to the same
directory, as the .html page that refers to it, either on the webserver (ORION) or on a local drive
(A:, C:, etc). If the image exist in a directory other than the one the HTML page is saved, you must
include the path to the directory as part of the tag information (as shown above).

Example: Creating a simple HTML page

1. Start Notepad.
2. Type in the following text
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic HTML webpage. <b>This text will be displayed in bold</b>
</body>
</html>
3. Save the file as "firstpage.html".
4. Double click the saved file the browser will display the page.

You might also like