BODY - Muhammad sami
Download
Report
Transcript BODY - Muhammad sami
Introduction to HTML
1
W W W – World Wide Web.
HTML – HyperText Markup Language – The Language
of Web Pages on the World Wide Web.
HTML is a text formatting language.
URL – Uniform Resource Locator.
Browser – A software program which is used to show web pages.
Web server - a system on the internet containing one or more
web site
2
Web site - a collection of one or more web
pages
Web pages - single disk file with a single
file name
Home pages - first page in website
HTML Editor – A word processor that has
been specialized to make the writing of
HTML documents more effortless.
3
• HyperText Markup Language--HTML is a collection of
platform-independent styles (indicated by markup
tags) that define the various components of a World
Wide Web document. WWW & HTML was invented by
Tim Berners-Lee while at CERN, the European
Laboratory for Particle Physics in Geneva.
HTML documents are plain-text files that can be
created using any text editor (e.g., Emacs or vi on
UNIX machines; SimpleText on a Macintosh;
Notepad on a Windows machine). You can also use
word-processing software if you remember to save
your document as "text only with line breaks".
An element is a fundamental component of the
structure of a text document. Some examples of
elements are heads, tables, paragraphs, and lists.
Think of it this way: you use HTML tags to mark the
elements of a file for your browser. Elements can
contain plain text, other elements, or both.
To denote the various elements in an HTML
document, you use tags. HTML tags consist of a left
angle bracket (<), a tag name, and a right angle
bracket (>). Tags are usually paired (e.g., <H1> and
</H1>) to start and end the tag instruction. The end
tag looks just like the start tag except a slash (/)
precedes the text within the brackets.
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML. This is the first
paragraph. While short it is still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
Markup Tags
HTML
This element tells your browser that the file
contains HTML-coded information. The file
extension .html also indicates this an HTML
document and must be used. (e.g.,
Welcome.htm, use only .htm for your extension.)
HEAD
The head element identifies the first part of your
HTML-coded document that contains the title. The
title is shown as part of your browser's window
TITLE
The title element 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.
BODY
The second--and 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 other tags now come within the body tag.
Headings
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:
<Hx>Text of heading </Hx>
where y is a number between 1 and 6 specifying
the level of the heading.
Paragraphs
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. A Web
browser ignores this line break and starts a new
paragraph only when it encounters another <P>
tag
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>
15
There are many different programs that you can use to
create web documents.
HTML Editors enable users to create documents
quickly and easily.
These programs will generate the HTML Source Code
for you.
16
HTML Editors are excellent tools for experienced web
developers; however; it is important that you learn and
understand the HTML language so that you can edit
code and fix “bugs” in your pages.
For this Course, we will focus on using the standard
Microsoft Windows text editors, NotePad. We may use
also textpad.
17
NotePad is the standard text editor that comes with
the microsoft windows operating system. To start
NotePad in windows 9x or XP follow the steps
bellow:
Click on the “Start” button located on your
Windows task bar.
Click on “Programs” and then click on the directory
menu labeled “Accessories”.
Locate the shortcut “NotePad” and click the
shortcut once.
18
In this chapter you will learn to create HTML
pages with a standard text editor.
Objectives:
Upon completing this section, you should be able to
1. Choose a Text Editor.
2. Create a Basic Starting Document.
3. Understand and set Document Properties.
4. View Your Results in a Browser.
19
<HTML>
<HEAD>
<TITLE>Lahore Leads University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>
20
The HEAD of your document point to above
window part. The TITLE of your document
appears in the very top line of the user’s
browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the TITLE
that is added to the list.
The text in your TITLE should be as descriptive
as possible because this is what many search
engines, on the internet, use for indexing your
site.
21
Document properties are controlled by
attributes of the BODY element. For
example, there are color settings for the
background color of the page, the
document’s text and different states of
links.
22
Colour Code
Colors are set using “RGB” color codes, which are,
represented as hexadecimal values. Each 2-digit
section of the code represents the amount, in
sequence, of red, green or blue that forms the color.
For example, a RGB value with 00 as the first two digits
has no red in the color.
23
Main Colours
24
RGB Colour Model
25
26
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
WHITE
BLACK
RED
GREEN
BLUE
MAGENTA
CYAN
YELLOW
AQUAMARINE
BAKER’S CHOCOLATE
VIOLET
BRASS
COPPER
PINK
ORANGE
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
#FFFFFF
#000000
#FF0000
#00FF00
#0000FF
#FF00FF
#00FFFF
#FFFF00
#70DB93
#5C3317
#9F5F9F
#B5A642
#B87333
#FF6EC7
#FF7F00
27
If you require more information about color values,
there is an excellent site entitled “VGDesign’s
Interactive Color Cube” that displays the background
color code when you put your cursor over a small color
sample. The Web address is :
http://www.vgdesign.com/color.html
28
The BODY element of a web page is an important
element in regards to the page’s appearance. Here
are the attributes of the BODY tag to control all
the levels:
TEXT="#RRGGBB" to change the color of all the
text on the page (full page text color.)
This element contains information about the
page’s background color, the background image, as
well as the text and link colors.
29
It is very common to see web pages with their
background color set to white or some other colors.
To set your document’s background color, you need to
edit the <BODY> element by adding the BGCOLOR
attribute. The following example will display a
document with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
30
The TEXT attribute is used to control the color of
all the normal text in the document. The default
color for text is black. The TEXT attribute would be
added as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red.
31
These attributes control the colors of the different link
states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”
LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> </BODY>
32