Html

Introduction to Hypertext
 HTML: Hypertext Markup Language
 Hypertext …
 links within and among Web documents
 connect one document to another
 Although this seems rather mundane today, this is
a radical departure from the structure of books
since the invention of the printing press

Origins of HTML
 HTML is based on SGML (Standardized
General Markup Language)
 “A philosophical rule was that HTML
should convey the structure of a hypertext
document, but not the details of its
presentation.”
 Since then, HTML has evolved into a
presentation language.

What is HTML?
• HTML (Hypertext Markup Language)
• HTML standards are developed under the authority of the World
Wide Web Consortium (W3C), headed by Tim Lee
• http://www.w3c.org
• HTML is the set of "markup" symbols or codes inserted in a file
intended for display on a World Wide Web browser.
• The markup tells the Web browser how to display a Web page's text,
images, sound and video files for the user.
• The individual markup codes are referred to as elements (but many
people also refer to them as tags).

HTML
 HTML is easy to pick up.
 There are many good books as well as resources on-line
 Our goal is to teach you the basics so that you can pick up the rest on
your own.

HTML Documents

• HTML documents are text documents
• We use simple ASCII text files
• Html file extensions: .html or .htm
• You can create html documents using:
• Notepad in Windows and TextEdit (MAC OS X)
• You can also use HTML Editors

HTML Editors
• HTML editors are called “WYSIWYG”
• What You See Is What You Get!
• Examples of HTML Editors:
• Dreamweaver
• Front Page
• Go Live

HTML Editors:
 Pros  Cons
– Good for beginners – They do not always
• You do not have to know generate clean HTML
much HTML to use editors  Add redundant tags
• It is easy to create complex  Add their own tags
tables, image maps, and use – They do not offer good
advanced functions such graphic tools to
as Style Sheets and manipulate images
JavaScript
– It can be hard to fix
• Easy for design due to the HTML tags since every
WYSIWYG interface time you open a
document, code is added.

HTML Document Structure

• HTML Document contains
• Text (content of the page)
• HTML uses the following file extensions or
suffix: .HTML or .HTM
• Embedded tags:
• provides instruction for the structure, and
appearance of the content

HTML Document Structure
• The HTML document is divided into two major parts:
• HEAD: contains information about the document:
• Title of the page (which appears at the top of the browser
window)
• Meta tags: used to describe the content (used by Search
engines)
• JavaScript and Style sheets generally require statements in the
document Head
• BODY: Contains the actual content of the document
• This is the part that will be displayed in the browser
window

Sample HTML Document
<HTML>

<HEAD>
<TITLE> My web page </TITLE>
</HEAD>

<BODY>
Content of the document
</BODY>

</HTML>

HTML Tags

• All HTML tags are made up of a tag name and
sometimes they are followed by an optional list of
attributes which all appear between angle brackets < >
• Nothing within the brackets will be displayed by the browser (unless
the HTML is incorrectly written and the browser interprets the tags
as part of the content)
• Attributes are properties that extend or refine the tag’s functions

Basic Syntax
 Most (but not all!) HTML tags have a start
tag and an end tag:
 <H1>Hello, world!</H1>
 Basic Document Structure
 header: information about the page, e.g.
the title.
 body: the actual content of the page.
 document starts with
 <HTML> and ends with </HTML>

HTML Tags
 Standalone tags
– There are a few HTML tags which do not use
an end tag and are used for standalone
elements on the page:
<img> to display an image
<BR> Line break
<HR> header

HTML Tags
 Attributes

<body bgcolor=“khaki” text=“#000000” link=“blue” vlink=“brown”
alink=“black” >

 Attributes are added within a tag to extend a tag’s action.
 You can add multiple attributes within a single tag.
 Attributes belong after the tag name; each attribute should be separated
by one or more spaces.
 Most attributes take values, which follow an equal sign “=“
 after the attribute’s name.
 Values are limited to 1024 characters in length.

This is Information which the browser
will ignore:
 Tabs
 multiple
spaces will appear as a single space
 Example:
–
“Hello,
How are you?”
The browser will ignore the blanks and new
line:
Hello, How are you?

<P> v. <BR> Tags
 <BR>: Break
 <P>: Paragraph tag. Creates more space
than a BR tag.
 <HR>: Creates a Horizontal Rule

Paragraph Tag <P>
 Leaves one empty line after the tag
 Multiple <P> tags with no intervening text
is interpreted as redundant by all browsers
and will display a single <P> tag

Line break <BR>
 This tag breaks the line and starts text at a
new line.
 It will not add an empty line like the
paragraph tag
 Multiple <br> tags will display multiple
line breaks

Using blockquotes
 Use <blockquote> …. </blockquote> to
set up a “block” of text. Nested
blockquotes will further indent.
 For example:
<blockquote>Tiffany was one of America's
most acclaimed and multitalented artists
working in the late 19th and early 20th
centuries.
<blockquote>Of all of Tiffany's artistic
endeavors, stained glass brought him the
greatest recognition.

Comments 
 Browser will NOT display text in between



 I. E. uses the following tag as a comment:
<comment> this a comment </comment>

Headings: <h1> .. <h6>
 You can create Headlines of various sizes on
your page
 Headlines appear as bold letters
 An empty line will also follow the headlines.
 Used for titles
– H1 is the largest font and h6 is the smallest heading

– Headings need an end tag </h1>

Font Tags to specify color, font
type and size
<FONT FACE=ARIAL SIZE=6>
<B>The Curse of Xanadu</B>
</FONT>
<FONT FACE=ARIAL SIZE=3>
by By Gary Wolf, <I>Wired Magazine</I>
</FONT>
 Font tags:
 face: Arial, Courier, etc.
 size: e.g. 3, 6
 color: e.g. “RED”, “GREEN”, etc.

Text format tags
 Bold: <b> some text </b> or <strong>
 Italic <I> some text </I> or <em>

 <HR> (Horizontal Rule) Displays horizontal line in the browser
window. The line fills the window from left to the right margins.
It’s useful to separate sections of your document
 You can use attributes with <hr> such as
– <hr width=“70%”>

Lists
 Lists
are used to organize items in the
browser window:
 Unordered list: Bulleted list (most popular), list
items with no particular order
 Ordered list: Numbered list

Lists
 HTML supports two types of Lists:
 Ordered Lists (OL): e.g. 1,2,3
 UnOrdered Lists (UL): e.g. bullets.
 Basic Syntax:
<UL>
<LI>Item 1
<LI>Item 2
</UL>

Unordered list:
– Unordered list: Bulleted list
(most popular), lists items
with no particular order

Fruit
<UL> Fruit
<LI> Banana • Banana
•Grape
<LI>Grape
</UL>

Ordered list:
 Numbered list:

Fruit Fruit
<ol> 1. Banana
2. Grape
<LI> Banana
<LI>Grape
</OL>

Hyperlinks (Anchor Tag):

 Hyperlinks are used for linking:
 within the same page (Named tags)
 To another page in your web site (Relative Link or local
link)
 To another page outside your web site (Absolute or remote
link)
 Email Link

 Hyper Links: are highlighted and underlined text.
When you click on it, it takes you to another
page on the web.
<A command=“target”>highlighted text</A>

Hyperlinks:

 Absolute Link: These are links to another page
outside of your web site. These links specify the
entire URL of the page:

<A HREF=“http://www.nyu.edu/”>NYU Web Site</A>

NYU Web Site

Hyperlinks:

 Relative Link: These are links to another
page in your site so you do not have to
specify the entire URL.
<A HREF=“index.html”>Go back to main page</A>

Go back to main page

Targeted Links
 A tag includes a target attribute. If
you specify target=“_blank”, a new
browser window will be opened.
 <A HREF=“http://www.nyu.edu”
target="_blank”> NYU</A>
 More on this when we get to frames...

Email Link:

 You can someone at:
<a href=“mailto:jj1@nyu.edu”>Send email to
J.J.</A>

HTML Tables
 Tables represent a simple mechanism for
creating rows and columns of data.
 This is a great tool for laying out the
content of any web page, especially when
you omit the border by using:
 … border = “0” …
 Tables are very widely used and supported
by all common browsers.
 Tables use a very simple tag structure.

Backgrounds
 Use< body bgcolor = “ …” > for a
background color with a hex version of a
web-safe color:
<body bgcolor = “ccffff”>
 For a tiled background using an image file:
<BODY background="backgroundPicture.gif">

HTML - Tables
 Tables tags starts with
1. <TABLE> tag, then
1. <TR> defines table rows.
• Each <TR> represents one row in the table.
• The number of rows is determined by the number of <TR>
2. <TD> Table data or <TH> Table Header can follow the <TR> tag
• The number of cells in each row is determined by the number of <TH> (Table
Header) and/or <TD> (Table data) tags contained within that row.
• <TH> text will be in bold, and centered
2. <table>

<tr> <td> cell 1 <th> cell 2 <th> cell 3 </tr>
<tr> <td> cell 4 <td> cell 5 <td> cell 6 </tr>
</table>

<tr> <td> cell 7 <td> cell 8 <td> cell 9 </tr>

Basic Tag Structure
<TABLE>
<TR >
<TH>Ticker</TH> TR: Table Row
<TH>Price</TH>
</TR>
<TR> TH: Table Heading
<TD>MSFT</TD>
<TD>71 1/16</TD>
</TR>
<TR>
<TD>KO</TD>
TD: Table Data
<TD>46 15/16</TD>
</TR>
</TABLE>
Every <TD> must have a matching
</TD>.
Every <TR> must have
a matching </TR>.

Table Attributes
<TABLE ALIGN=“left" BORDER=0 BGCOLOR=“cyan“ width=600 cellpadding=0
cellspacing=0>

 Align: "left", "center" or "right“ - "left" is the default
 Border: thickness of the border in pixels - 0 for no borders
 Bgcolor: is background color in HEX or as a name color
 Background=url (works with IE only)
 Cellpading=n (n is number of pixels (space) between cell content and its border
 Cellspacing=n (n is number of pixels (space) between cells)
 Height=n (height of table in pixels or percentages 100%)
 Width=n (Width of table in pixels or percentages 100%)

Scrolling text using the
<marquee> tag
<html>
<head><title> scrolling text</title></head>

<marquee><font face=”sand">Welcome to my
website! Be sure to visit again!</marquee>
</body>
</html>

HTML and Multimedia

40

Images
<img src= "logoblue.gif" width="153"
height="31" border="0" alt="W I R E D">
 Image Attributes
 src: URL or filename for the image
 width/height: not required
 border: not required.
 alt: recommended for users running a text browser.

Adding multimedia files
 <a href=“filename.extension> listen to sound file </a>
 <a href=“sound1.wav> listen to sound file </a>
 <a href=“movie1.mov> view movie clip </a>

Multimedia Filetypes
File Type Extention/Mime type
================================
plain text: .txt
HTML document: .html
GIF image: .gif or .jpg or .png
Acrobat file: .pdf
AIFF sound file: .aiff .au . wav
MP3 .mp3
QuickTime movie: .mov

MPEG movie: .mpeg or .mpg

Html

More Related Content

What's hot

Similar to Html

Html