HTML g2

HTML
 HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup
Language
 HTML is not a programming language, it is a
markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web
pages
HTML
 short for hypertext markup language
• Hyper is the opposite of linear. HTML does
not hold to the old linear pattern but allows
the person viewing the Web page to go
anywhere, any time
• Text is what you will use
• Mark up is what you will do
• Language it's a language, really -- but the
language is plain English
Writing HTML
 by hand
 using tools such as NotePad on Windows
 OS X users can use TextEdit on the Mac
 using an HTML assistant program

 easier than by hand
 but harder to understand HTML because the
program does all work
HTML documents
 must be text only
 when you save an HTML document, you
must save only the text, nothing else.
 HTML browsers can only read text
 They don't understand anything else
HTML TAGS
 HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle
brackets like <html>
 HTML tags normally come in pairs like <b> and
</b>
 The first tag in a pair is the start tag, the second
tag is the end tag
 Start and end tags are also called opening tags and
closing tags
Nested Tags
 Like a tree, each element is contained inside a parent
element
 Each element may have any number of attributes
<html>...</html>
<head>...</head> <body>...</body> bgcolor="white"
<title>...</title> other stuff <p>...</p> <br> <table>...</table>
This is some text!

Basic Tags
 <hr> horizontal rule
 <br> new line
 <b>...</b> bold
 <i>...</i> italicize text in between
HTML Documents = Web Pages
 HTML documents describe web pages

 HTML documents contain HTML tags and plain
text
 HTML documents are also called web pages
 The purpose of a web browser (like Internet
Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does
not display the HTML tags, but uses the tags to
interpret the content of the page:
.HTM or .HTML File Extension?
 When you save an HTML file, you can use

either the .htm or the .html file extension.
There is no difference, it is entirely up to you.
Example
 <html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Tags
 The text between <html> and </html>
describes the web page
 The text between <body> and </body> is the
visible page content
 The text between <h1> and </h1> is displayed
as a heading
 The text between <p> and </p> is displayed as
a paragraph
Creating and Publishing a Web
PAGE
 Create an HTML document
 Place the document in the world-accessible
directory (often public HTML or WWW) on a
system running an HTTP server.
 Access the webpage through
http://hostname/~username/filename
 Eg. http://www.apl.jhu.edu/~lmb/test.htm
 Validate the document
HTML DOCUMENT
TEMPLATE
MAIN HTML ELEMENTS
 DOCTYPE
 HTML
 HEAD
- TITLE element required
-Optional elements
-BASE
-META
-BGSOUND
-SCRIPT,NOSCRIPT
-STLYE
 BODY element
- HTML Attributes and attribute values
-BACKGROUND
-BGCOLOR
-TEXT
-LINK,VLINK,ALINK
 Elements inside BODY element
 bgcolor: This is the background color of the entire HTML
document, and may be specified either by the color name
directly or by the six-digit hex code.
 alink: The color of the links.
 vlink: The color of the visited links.
 topmargin: The margin from the top of the browser window.
 leftmargin: The margin from the left of the browser window.
BLOCK LEVEL ELEMENTS
 HEADINGS
 Types Of Headings:
 <H1>….</H1>
 <H2>….</H2>
 <H3>….</H3>
 <H4>….</H4>
 <H5>….</H5>
 <H6>….</H6>
 Headings are from H1 to H6
 Attributes are: LEFT(default), RIGHT,CENTER
P- The BASIC PARAGRAPH
 Paragraphs are defined with the <p> tag.
 <html>
 <body>
 <p>This is a paragraph.</p>
 </body>
 </html>
Formatting Tags
 Font(face,size,color)
 <font size=2 face="Helvetica" color=red>This
illustrates the attributes of the font tag.</font>
 <center>
 The <center> tag causes all the text within the tag to be
centered.
<center>This is centered text.</center>
<b>-Bold
<i>-Italic
<u>Underline
<html> This is a paragraph.
<body> This is a paragraph.
<p>This is a This is a paragraph.
paragraph.</p>
<p>This is a
paragraph.</p>
<p>This is a
paragraph.</p>
</body>
</html>
HTML LISTS
 The most common HTML An unordered list:
lists are ordered and  List item
unordered lists:  List item
 Ordered list
 List item
 Unordered list
An ordered list:
1.The first list item
2.The second list item
3.The third list item
HTML Unordered Lists
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
 The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
OUTPUT:
 Coffee
 Milk
 Attributes: type(disc,square,circle)
HTML Ordered Lists
 An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
 The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
OUTPUT:
1.Coffee
2.Milk
HTML Definition Lists
 A definition list is a list of items, with a description of each item.
 The <dl> tag defines a definition list.
 The <dl> tag is used in conjunction with <dt> (defines the item in the list) and
<dd> (describes the item in the list)
 <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
TEXT LEVEL ELEMENTS
 Physical character styles
 B,I,TT,U,SUB,SUP,SMALL,BIG,STRIKE,S,BLINK,Fo
nt
 Logical Character styles
 EM,STRONG,CODE,SAMP,KBD,DFN,VAR,
CITE
 Hypertext
 A
 HREF,NAME,TARGET
Image Tag
 IMAGES
 IMG
 SRC,ALT,ALIGN,WIDTH,HEIGHT,HSPACE,VSPAC
E,BORDER,USEMAP,ISMAP
 MISC. TEXT LEVEL ELEMENTS
 BR- Explicit line break
PHYSICAL CHARACTER
STLYES EXAMPLE
OUTPUT
Logical styles
LOGICAL CHARACTER
EXample
OUTPUT
HYPERLINK
 A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to a new document or a new section within the current document.
 When you move the cursor over a link in a Web page, the arrow will turn into a
little hand.
 Links are specified in HTML using the <a> tag.

 A link is created with an <a> tag. The "a" in <a> stands for
anchor thus it is called an "anchor tag" or simply link tag. An
anchor tag is a two-sided tag and uses a href attribute to
specify the destination of the link. The href attribute stands for
Hypertext Reference.
Types of Links
 There are four main types of hyperlinks:

 relative — linking local pages using relative
file names
 absolute — linking to local or external pages
using absolute file names
 reference — linking to specific locations or
sections of a page
 email — linking to an email address
Links
 The code for a same page link has two parts; the link and the
hook.
 The link is that part that tells the browser where to go when the user
clicks on it.
 The hook is what the link looks for and how it knows where on the
page to go.
 Hook is
 <A NAME="top">Title Of The Page</A>
 code for the link looks like:
 <A HREF="#top">Back To The Top</A>
Relative link
 When creating links, we need to reference the
files with each file's location, known as file's
path.
 HTML supports two kinds of file paths:
 Relative
 Absolute
A relative path refers to a file's location that is

relative to the folder in which the file is in.
example
Let say on ScriptingMaster.com's website there is one folder called html

and it has two web page files saved as: headings.asp and
paragraph.asp. To create a link in headings.asp to the paragraph.asp
file, we will use just the filename. Specifically, link tag will look
something like:
<a href="paragraph.asp">How to create a paragraph</a>
Absolute link
 An absolute link shows the entire destination address
in the link tag. This exact destination address is
referred to as an absolute path.
 To link to files which are outside of the current folder,
an absolute path needs to be used.
 Thus an absolute link is used for linking to files that
are outside of the current folder; a relative link is used
for linking to files that are within the same folder. An
absolute link is also used for linking to other websites.
 So for the first example assume that we have two folders: asp
and html. Assume further that we have one web page in each
of these two folders : asp folder contains a file named Active-
Server-Pages.asp and the html folder has a file called HTML-
introduction.asp.
 To create a link from the Active-Server-Pages.asp file to the
HTML-introduction.asp file, we would need to reference the
folder name and the file in our link tag:
 <a href="html/HTML-introduction.asp">Introduction to
HTML</a>
Reference link
 A reference link points to a specific part of a
web page.
Email link
 When a person clicks on an email link, the person
can send email to the specified email address in
the HREF property. Note simply clicking on an
email link does not send the email; it rather
copies the recipient's email address into the user's
default email editor program.
 <a
href="mailto:info@scriptingmaster.com">info@s
criptingmaster.com</a>
IMAGES
 In HTML, images are defined with the <img>
tag.
 The <img> tag is empty, which means that it
contains attributes only, and has no closing tag.
 To display an image on a page, you need to use
the src attribute. Src stands for "source". The
value of the src attribute is the URL of the
image you want to display.
Syntax
 <img src="url" alt="some_text"/>
 The URL points to the location where the image is
stored. An image named "boat.gif", located in the
"images" directory on "www.w3schools.com" has the
URL: http://www.w3schools.com/images/boat.gif.
 The browser displays the image where the <img> tag
occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first
paragraph, then the image, and then the second
paragraph.
Html images- alt attribute
 The required alt attribute specifies an alternate
text for an image, if the image cannot be
displayed.
 The value of the alt attribute is an author-defined
text:
 <img src="boat.gif" alt="Big Boat" />
 The alt attribute provides alternative information
for an image if a user for some reason cannot
view it
HTML Images - Set Height and Width
of an Image
 The height and width attributes are used to specify the height
and width of an image.
 The attribute values are specified in pixels by default:
 <img src="pulpit.jpg" alt="Pulpit rock" width="304"
height="228" />
 HSPACE
 VSPACE
 BORDER
 The related HSPACE and VSPACE attributes create a horizontal space
and a vertical space, respectively, between the graphic and the
surrounding text, with the value specified in pixels.
Image tag
<IMG SRC = "/gifs/wdj134.gif“
WIDTH = 134 HEIGHT = 28
BORDER = 0 ALT = "Back to the Web
Developer's Journal Main Page"
ALIGN = "right" HSPACE = "6" VSPACE =
"6">
Html images-map tag
 The <map> tag is used to define image-map. An
image-map is an image with clickable areas.
 To define clickable regions on a single image, set
up hotspots within a single image.
 A hotspot is a defined area on an image that acts
as a hypertext link.
 Image maps list the coordinates that define the
boundaries of the hotspots (or the regions that act
as hypertext links) on an image.
 There are two types of image maps:
 server-side image maps
 client-side image maps
Server-side image maps
In a server-side image map, the server controls the
image map. A server is a computer that store web
pages and serves those pages when a client request.
One of the main drawbacks of using server-side
image map is that server-side image maps can be
slow to operate. This is so because every time a
user clicks on an inline image map, that
information has to be sent to the server and then the
server has to process that request.
Client-side image maps
 In a client-side image map, the image map is
defined in an HTML file and that is processed
by the browser locally.
 There are two easy steps to create an image
map:
 define image map hotspots
 use the image map
Defining image map hotspots
 To create image an image map, you will define an
area, by using coordinates, for each hyperlink. To find
coordinates for a specific area for an image, you will
need a special program that shows you coordinates.
Eg. Macromedia's Dreamweaver 2004
 The general syntax for an image map tag is:
 <map name="mapName">
<area shape="areaShape" coords="coordinates"
href="URL">
</map>
The <area> tag has three
attributes:
 Shape: refers to the type of shape you want for the
hotspot. You have three choices for the shape: rect, circle,
and poly.
 Coords: refers to the coordinates for the location of a
hotspot. The coordinates (0,0) refers to a point where the
image starts to get displayed. For instance, the coordinates
(31,9) refer to a point that is 31 pixels from the left edge
and 9 pixels down from the top on an inline image.
 Href: refers to the URL of the hypertext link that the
hotspot points to.
Creating a rectangular hotspot
 To define a rectangular hotspot, you have to
define two points: the upper-left corner and the
lower-right corner.
 The following shows the HTML code to create
the rectangular hotspot:
 <map name="ScriptHTML">
<area shape="rect" coords="6,4,93,38"
href="HTML-introduction.asp">
</map>
Map tag example
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets“ />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
OUTPUT
Click on the sun or on one of
the planets to watch it closer:
Html -Tables
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag).
 td stands for "table data," and holds the content of a
data cell.
 A <td> tag can contain text, links, images, lists,
forms, other tables, etc.
Defining a table structure in
HTML
 Creating a table in HTML is very simple if you keep in mind that
you have to create one row at a time and create one column at a
time for each row. Let's say we want to create the following
table :
Col 1 Col 2
 To create the top table, use the following code :
 <table width="190" border="1">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
Table attributes
1. Controlling cell spacing
 To add space among a table cells, use the
cellspacing property.
 <table width="40" border="1" cellspacing="10">
<tr>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
2. Controlling cell padding
 To add space around the content of a cell, use
cellpadding in the table tag.
 <table width="40" border="1" cellpadding="5">
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
</table>
3. Modifying table background
color
 If you like to change the background color for
the entire table, just use the bgcolor property
in the <table> tag.
 You can also change the color for the entire
row (by inserting bgcolor inside the <tr> tag)
or for an individual cell (by inserting bgcolor
inside the <td> tag).
4.Controlling table with the align
property
 By default, the browser places a table on the left
margin just like the text is placed on the left.
 The table's align property has three possible values:
 left - places the table on the left margin. Again, this is the
default alignment so it is not necessary to specify this if
you want the table to be placed on the left margin)
 Center - places the table in the center of the page
 right - places the table on the right margin

 align=center places the table in the center of the page.
 <table width="20" align="center" border="1" cellspacing="0"
cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>
5. Spanning rows and columns
 When you work with tables, it is sometimes
necessary to combine one or two adjacent cells
into one.
 The process of combining one or more adjacent
cells into one is knows as spanning cell.
 If you span cells vertically down, it is known as a
rowspan.
 If you span cells horizontally across, it is known
as a colspan.
Spanning rows: rowspan
 To span cells vertically down, use the rowspan
attribute with the <td>.
 <table width="520" border="1" cellpadding="2">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

HTML g2

Uploaded by

Copyright:

Available Formats

HTML g2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML g2

Uploaded by

Copyright:

Available Formats

HTML

 HTML is a language for describing web pages.

 using an HTML assistant program

<head>...</head> <body>...</body> bgcolor="white"

<title>...</title> other stuff <p>...</p> <br> <table>...</table>

This is some text!

 HTML documents describe web pages

 When you save an HTML file, you can use

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 Links are specified in HTML using the <a> tag.

 There are four main types of hyperlinks:

A relative path refers to a file's location that is

Let say on ScriptingMaster.com's website there is one folder called html

<img src="planets.gif" width="145" height="126" alt="Planets“ />

 right - places the table on the right margin

You might also like