HyperTextMarkupLanguage.ppt

2
Topics
 Web Terminology
 HTML
 What is HTML
 Parts of an HTML Document
 HTML Tags
 Required
 Common

3
Internet vs. WWW
 Most people use the two terms interchangeably but
they are in fact different.
 The Internet is a vast, international network, made up
of computers and the physical connections (wires,
routers, etc.) allowing them to communicate.
 The World Wide Web (WWW or just the Web) is a
collection of software that spans the Internet and
enables the interlinking of documents and resources.
 Provides a way of accessing information on the Internet.

4
Web Servers and Clients
 A Web server is a computer that is
programmed to send files to browsers on
other computers connected to the Internet.
 The Web browser, such as Google Chrome,
Firefox or Internet Explorer, is the client that
sends a request for a Web page.
 The Web server answers the request and
delivers the requested page to the browser
so you can view it.

5
HTTP
 Stands for HyperText Transfer Protocol
 Allows computers on the WWW to
communicate with one another.
 Handles the “request” sent to the Web server
and the “response” received from the Web
server.

7
URLs
 Stands for Uniform Resource Locator
 Also called the Web page’s address
 You typically type it into your Web browser’s location
bar when you want to view a Web page
http://www.umbc.edu
Name of
Web server
Protocol needed to
communicate with
Web server

Markup Languages
Traditional vs. Hyperlinked Document Pages
Source: Schneider and Perry

Markup Languages
Hypertext & HTML
 Hypertext Markup Language (HTML) is
the language for specifying the content of
Web pages
 hypertext refers to the fact that Web pages are
more than just text
 can contain multimedia, provide links for jumping
within & beyond
 markup refers to the fact that it works by
augmenting text with special symbols (tags)
that identify structure and content type

10
HTML
 Used to create a Web page
 Made up of tags that specify the structure of the
document (this section is a heading, this section is a
paragraph, etc..)
 An excerpt from a sample HTML document:
<html>
<head>
<title>Bob’s Web page</title>
</head>
<body>
<h1>This is my first Web page</h1>

11
HTML Tags
 Most HTML tags work in pairs. There is an
opening and a closing tag. For example:
<p>Some content here.</p>
 The <p>…</p> tag displays a paragraph
 <p> opens the paragraph (opening tag)
 </p> closes the paragraph (closing tag)
 “Some content here.” will be displayed on the
page

12
Self-closing Tags
 Some HTML tags are self closing. For
example:
<br />
 The <br /> tag will display a line break.

Markup Languages
Tags vs. Elements
An HTML element is an object enclosed by a pair of tags
<title>My Home Page</title> is a TITLE element
<b>This text appears bold.</b> is a BOLD element
<p>Part of this text is <b>bold</b>.</p>
is a PARAGRAPH element that contains a BOLD
element
HTML document is a collection of elements (text/media with
context)

Markup Languages
Structural Elements
 an HTML document
has two main
structural elements
 HEAD contains setup
information for the
browser & the Web
page
 e.g., the title for the browser
window, style definitions,
JavaScript code, …
 BODY contains the
actual content to be
displayed in the Web
page
Add content
between
<BODY> …
</BODY>
Text Structure
Tags
Headings
Paragraphs
Lists
Images

15
Required Tags
 All HTML documents should have html, head and
body tags, along with the DOCTYPE identifier.
 !DOCTYPE – Tells the browser which set of standards the
page adheres to
 <html>…</html> -- Surrounds the contents of the entire
page
 <head>…</head> -- Lists the identification information on
the page, such as the title
 <title>…</title> -- Gives the name of the page that
appears in the top of the browser window
 <body>…</body> -- Frames the content of the page to be
displayed in the browser

16
Basic HTML Template
<!DOCTYPE html>
<html>
<head>
<title>CMSC104 HTML Template</title>
</head>
<body>
This is just a basic HTML template to be used in CMSC104.
</body>
</html>
Example file: template.html

17
Basic HTML Template
Screenshot

18
Some Common HTML Tags
and Their Meanings
 <p>…</p> -- Creates a paragraph
 <br /> -- Adds a line break
 <hr /> -- Separates sections with a horizontal
rule
 <h1>…</h1> -- Displays a heading (h1-h6)
  -- Inserts a comment
 <ol>…</ol> -- Creates an ordered list
 <ul>…</ul> -- Creates an unordered list
 <img /> -- Inserts an image into the document
 <a>…</a> -- Inserts a link into the document

19
Paragraph Example
<p>
The exam next week will consist of T/F,
multiple choice, short answer and pseudocode
questions. You cannot use a calculator.
</p>
<p>
After the exam, we will learn JavaScript.
It should be fun!!
</p>

20
Paragraph Example
Screenshot

Markup Languages
Alignment
Align headings and text with the ALIGN command
 left, center, and right justify a heading
<H1 ALIGN=LEFT>Joe’s home page</H1>
<H1 ALIGN=CENTER>Joe’s home page</H1>
<H1 ALIGN=RIGHT>Joe’s home page</H1>
 left, center, and right justify a paragraph
<P ALIGN=LEFT>imagine a BIG paragraph in
here</P>
<P ALIGN=CENTER> imagine a BIG paragraph in
here </P>
<P ALIGN=RIGHT> imagine a BIG paragraph in here
</P>
 note that the </P> is used here to end the paragraph and

22
Line Break Example
<p>
Roses are Red. <br />
Violets are Blue. <br />
You should study for Exam 1. <br />
It will be good for you!
</p>

23
Line Break Example
Screenshot

24
Horizontal Rule Example
<p>
The exam next week will consist of T/F,
multiple choice, short answer and
pseudocode questions. You cannot use a
calculator.
</p>
<hr />
<p>
After the exam, we will learn JavaScript.
It should be fun!!
</p>

25
Horizontal Rule Example
Screenshot

26
Heading Example
<h1>This is heading 1</h1>

28
Comment Example

<p>
Here is my paragraph.
</p>

30
Ordered List Example
<ol>
<li>Print Review Questions for Exam 1.</li>
<li>Work on Review Questions for Exam 1.</li>
</ol>

32
Unordered List Example
<ul>
<li>country music</li>
<li>monday mornings</li>
<li>brussels sprouts</li>
</ul>

Markup Languages
HTML LISTS
 An unordered List
 An ordered List
 Definition List
 Nested List
 Tags
 <ul>- Define an unordered list
 <ol>- Define an ordered list
 <li> - Define a list item
 <dl>- Define a definition list.
 <dt> - Define a definition term
 <dd>- Define a definition
description

Markup Languages
Creating Lists
 Unordered Lists: Unordered (bulleted) lists <UL> can use a
disc, circle, or square
 <h4>An Unordered List:</h4>
 <ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
 </ul>
 Output:
 An Unordered List:
• Coffee
• Tea
• Milk

Markup Languages
Ordered Lists
 Ordered (numbered) lists
<OL> can use numbers (1),
capital letters (A), lowercase
letters (a), or Roman
numerals (i)
<OL TYPE=1 START=5>
<LI>first line
<LI>second line ...
</OL>
<UL TYPE=circle>
<LI>first line ...
</UL>
 All lists use <LI> to specify a
new line
 Progarm
 <ol>
 <li>Coffee</li>
 <li>Milk</li>
 </ol>
 Output
1. Coffee
2. Milk
 Additional
 <ol type="A">
 <ol type="a">
 <ol type="I">
 <ol type="i">

Markup Languages
Nested Lists
 <h4>A nested List:</h4>
 <ul>
 <li>Coffee</li>
 <li>Tea
 <ul>
 <li>Black tea</li>
 <li>Green tea</li>
 </ul>
 </li>
 <li>Milk</li>
 </ul>
 A nested List:
 Coffee
 Tea
 Black tea
 Green tea
 Milk

Markup Languages
Definition Lists
 <h4>A Definition
List:</h4>
 <dl>
 <dt>Coffee</dt>
 <dd>Black hot
drink</dd>
 <dt>Milk</dt>
 <dd>White cold
drink</dd>
 </dl>
 A Definition List:
 Coffee
 Black hot drink
 Milk
 White cold drink

Markup Languages
Fonts
Font Size
 Base font size (default=3, range = 1-7; 1=smallest,
7=largest)
 <BASEFONT SIZE=5>
 Font size
 <FONT SIZE=3> sets font size to 3
 Relative font size
 <FONT SIZE=+1> increases font size by 1
 <FONT SIZE=-2> decreases font size by 2
 <big>… </big> increase the size of the font
 <small>… </small> decrease the size of the font

40
Link Example
<a href="http://www.cs.umbc.edu/104/">CMSC104 Main page</a>

42
Image Example
<img src="linux-tux.png" alt="Tux the Penguin" />

Markup Languages
HTML Images
<img> Defines an image
Attributes:SRC, ALT, HEIGHT, WIDTH,
ALIGN, HSPACE ,VSPACE
<map> Defines an image map
<area> Defines an area inside an image map

Markup Languages
Image File Formats
 Acceptable image formats vary by
browser
 Generally acceptable formats are
 GIF
 Graphics Interchange Format
 Use for graphics
 JPG
 Joint Photographic Experts Group
 Use for photographs
 PNG
 Portable Network Graphics
 Expected to replace GIF

Markup Languages
HTML Image Tag
 <p> An image:
 <img src="constr4.gif"
 width="144" height="50">
 </p>
 <p> A moving image:
 <img src="hackanm.gif"
 </p>
 An image:
 A moving image:


Markup Languages
Inserting Image from Other
Location
 <p> An image from another
folder:
 <img
src="/images/netscape.gif"
 </p>
 <p> An image from
W3Schools:
 <img
src="http://www.upes.co.in/ima
ges/ie.gif" width="73"
height="68">
 </p>
 An image from another
folder:
 An image from
W3Schools:


Markup Languages
HTML Back Ground
 Attribute of Body Tag
 bgcolor
 Types of Background:
 a background color and a text color that
makes the text on the page easy to read.
 <body bgcolor=“red">
 a background color and a text color that
makes the text on the page difficult to read.
 <body bgcolor=“red" text="yellow">

Markup Languages
Background Color / Graphics
Backgrounds can be added to each document, but are not
readable on all browsers.
Attributes of <BODY>
BGCOLOR=”code” Specify color for background of the screen
BACKGROUND=”path/file” Tiles the graphic in the file to fit the
screen
<BODY BGCOLOR=”green”>
<BODY BACKGROUND=” BrickWall.gif”>

Markup Languages
Creating Tables
<TABLE BORDER> starts table including a border
 <CAPTION ALIGN=top> add title at top
 <TR> starts a new table row
 <TH> adds the headers for a table
 <TD> adds the data for a table
 <table> Defines a table
 <caption>Defines a table caption
 <colgroup>Defines groups of table columns
 <col>Defines the attribute values for one or more columns in a
table
 <thead>Defines a table head
 <tbody>Defines a table body
 <tfoot>Defines a table footer
 see next page for example format

HyperTextMarkupLanguage.ppt

More Related Content

Similar to HyperTextMarkupLanguage.ppt

Recently uploaded

HyperTextMarkupLanguage.ppt