Scribd
Upload
540 views53 pages

HTML

HyperText Markup Language (HTML) is the standard markup language used to define the structure and layout of web pages on the World Wide Web. HTML uses tags to annotate text and other media to indicate how it should be displayed. The HTML specification has evolved over time, with newer versions adding support for new tags and attributes. HTML documents are hierarchical in nature and can include elements like headings, paragraphs, lists, and divisions to appropriately structure the content.

Uploaded by

api-26312742
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
540 views53 pages

HTML

HyperText Markup Language (HTML) is the standard markup language used to define the structure and layout of web pages on the World Wide Web. HTML uses tags to annotate text and other media to indicate how it should be displayed. The HTML specification has evolved over time, with newer versions adding support for new tags and attributes. HTML documents are hierarchical in nature and can include elements like headings, paragraphs, lists, and divisions to appropriately structure the content.

Uploaded by

api-26312742
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 53

HyperText Markup

Language (HTML)
Web technology 2

Introduction
• Standardized by World Wide Web Consortium (W3C)
• Used to encode WWW documents (web pages)
• Document-layout and hyperlink specification language
• Defines the syntax and placement of various media like
text, images etc. to be displayed by the browser
• Marking up means additions of certain commands (in the
form of tags) to our document in order to tell the browser
how we want the document displayed

| U. K. Roy | [ 10/18/08 ]
Web technology 3

History of HTML and W3C


• 1961 - HTML
• 1994 – HTML 2.0
• 1996 – HTML 3.2
• 1997 – HTML 4.0
• 1999 – HTML 4.01
• Today – XHTML
• See http://w3c.org/

| U. K. Roy | [ 10/18/08 ]
Web technology 4

HTML and its Flavors


• HTML – Hyper Text Markup Language
• SGML – Standard Generalized Markup Language
• XML – Extensible Markup Language
• XHTML - Extensible Hypertext Markup Language
• DHTML - Dynamic Hypertext Markup Language

| U. K. Roy | [ 10/18/08 ]
Web technology 5

HTML Basics (Hierarchical Model)


• HTML is structured in hierarchical order
• Organized in hierarchical fashion such as File
management in computer
• DOM – Document Object Model

| U. K. Roy | [ 10/18/08 ]
Web technology 6

HTML Basics (Structure)


HTML Basics (Structure)

• Basic structure
<html>
<head><title>…</title>…</head>
<body>…</body>
</html>
• Syntax of the HTML language
–Behind the scene tags
–On screen tags

| U. K. Roy | [ 10/18/08 ]
Web technology 7

Elements, Attributes and Tags


• Tags – Commands to do something
• Elements – Set of tags with content in
between
• Attributes – Modify the tags

| U. K. Roy | [ 10/18/08 ]
Web technology 8

HTML Basics (Tag Guidelines)


• All tags are contained within < and >.
• No spaces between the <, >, and the tag
text. Example: <html>
• No spaces within tag text.
• Both opening and closing tags should be used (for
closed tags).
• Use the same case for all tag text, preferably
lowercase text.
• Keep horizontal symmetry.

| U. K. Roy | [ 10/18/08 ]
Web technology 9

HTML tags
• HTML comments
<!--comment text-->…

• Inserting a title
– Only one title element is permitted
…
<title>My Home Page</title>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 10

First HTML page


<html>
<head>
<title>My First html page</title>
</head>
<body>
Hello World!
</body>
</html>

| U. K. Roy | [ 10/18/08 ]
Web technology 11

Working with text


• Inserting a paragraph
…
<p>This is a simple one sentence paragraph</p>
<p>This second paragraph starts on its own line, with a little extra
line space</p>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 12

Working with text


• Inserting line breaks
– Browser attempts to display all text in a single continuous line
…
This is first line.<br>
This is second line.
…

• Inserting Horizontal line


…
A short poem
<hr>
<p>Mary had a little lamb<br>
Whose fleece was white as snow
…
| U. K. Roy | [ 10/18/08 ]
Web technology 13

Changing text styles


– b—boldface, i—italics, tt—teletype etc.
…
<p>This product is <b>new</b> and <b>improved</b>!</p>
<p>This product is <i>new</i> and <i>improved</i>!</p>
<p>This product is <b><i>new</i></b> and
<b><i>improved</i></b>!</p>
<p>The computer said <tt>"I want to compute."</tt></p>
…
– Elements can be nested

| U. K. Roy | [ 10/18/08 ]
Web technology 14

Headings
• h1- through h6; numbers signify relative importance
…
<h1>HTML Tags</h1>
<h2>The Body tag</h2>
<h3>The paragraph tag</h3>
The p tag is used to break text into paragraphs
…

| U. K. Roy | [ 10/18/08 ]
Web technology 15

Pre-formatting text
• Preserves white space entered into the source code
• Uses monospace font
<pre>
<b> item Specification Manufacturer</b>
<hr>
CPU Pentium-III Intel
Disk 40 GB Seagate
Monitor SVGA Samsung
Printer LaserJet HP
</pre>

| U. K. Roy | [ 10/18/08 ]
Web technology 16

More text formatting


• Used to create sections
80 GB hard disk is now Rs.<del>2500</del> 2000.</body>

• Indenting text
Thus the story begins -
<blockquote>
Ten thousand years ago...<br>
Men used to
</blockquote>

| U. K. Roy | [ 10/18/08 ]
Web technology 17

HTML symbols
Result Description Entity Name Entity Number
∀ for all &forall; &#8704;
∃ exists &exists; &#8707;
∅ empty &empty; &#8709;
∈ isin &isin; &#8712;
∋ ni &ni; &#8715;
∏ prod &prod; &#8719;
∑ sum &sum; &#8721;
≤ Less of equal &le; &#8804;
≥ Greater or equal &ge; &#8805;
√ square root &radic; &#8730;

| U. K. Roy | [ 10/18/08 ]
Web technology 18

HTML Colors

Color Name Color HEX Color


AliceBlue  #F0F8FF  
AntiqueWhite  #FAEBD7  
Aqua  #00FFFF  
Aquamarine  #7FFFD4  
Azure  #F0FFFF  
Beige  #F5F5DC  
Bisque  #FFE4C4  
Black  #000000  
BlanchedAlmond  #FFEBCD  
Blue  #0000FF  
BlueViolet  #8A2BE2  
Brown  #A52A2A  

| U. K. Roy | [ 10/18/08 ]
Web technology 19

Creating divisions
• Used to create sections
…
<div style="color:red">
This is first line of section1.<br>
This is second line of section 1.
</div>

<div style="color:blue">
This is first line of section 2.<br>
</div>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 20

Unordered list
…
<ul>
<li>Africa</li>
<li>Asia</li>
<li>Australia</li>
<li>Antarctica</li>
</ul>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 21

Ordered list
…
<ol>
<li>Choose Open from File menu</li>
<li>Locate the file you wish to edit and Click on the filename</li>
<li>Click the open button</li>
</ol>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 22

Combination list
…
<ol>
<li>
Topic 1
<ul>
<li>Topic 1.1</li>
<li>Topic 1.2</li>
<li>Topic 1.3</li>
</ul>
</li>
<li>
Topic 2
<ul>
<li>Topic 2.1</li>
<li>Topic 2.2</li>
<li>Topic 2.3</li>
</ul>
</li>
</ol>
…
| U. K. Roy | [ 10/18/08 ]
Web technology 23

Definition list
…
<dl>
<dt>Triangle<dd>Three sided figure
<dt>Quadrilateral<dd>Four sided figure
</dl>

| U. K. Roy | [ 10/18/08 ]
Web technology 24

Displaying different Fonts


…
<font face="Century Gothic" color="blue">Appearance of text</font><br>
<font face="Times Roman" color="olive" size="6">depends on</font><br>
<font face="Times Roman" color="#C0660C" size="5">font attributes</font>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 25

Working with images


• Embedding images
…
<img src="earth.bmp">
<img src="earth.bmp" width=100 height=100>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 26

Background image
…
<body background=Sunset.jpg>

</body>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 27

Background Color
…
<body bgcolor="gold">

</body>

| U. K. Roy | [ 10/18/08 ]
Web technology 28

Working with Hyperlinks


• Creating Hypertext
…
Further details may be obtained in <a
href="charter3.html">Chapter 3</a> of this document<br>
Download the free software from <a
href="http://www.microsoft.com">Microsoft Home Page</a>
Send me <a href="mailto:[email protected]">email</a>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 29

Creating bookmarks
…
<a href="bookmark.html#section3">go</a>
<a name="section3">Section3</a>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 30

Changing link appearance


…
<a href="bookmark.html">
<font size=5 color="#008088">
Go to section 3
</font>
</a>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 31

Hyperlinks
• Hyperlinks with images
…
Click the buttons below to go the previous or next pages<br>
<a href="chapter2.html"><img src="backward.jpg"></a>
<a href="chapter4.html"><img src="forward.jpg"></a>
…

• Specifying link colors


…
<body link="green" alink="red" vlink="gray">
…
| U. K. Roy | [ 10/18/08 ]
Web technology 32

Creating tool tip label


• Describes textual description for image
• Specifies something about the target document

Click the buttons below to go the previous or next pages<br>


<a href="chapter2.html"><img src="backward.jpg"
alt="previous page"></a>
<a href="chapter4.html"><img src="forward.jpg" alt="next
page"></a>

| U. K. Roy | [ 10/18/08 ]
Web technology 33

Creating Acronym
…
<acronym title="World Wide Web">WWW</acronym>
uses <acronym title="HyperText Markup
Language">HTML</acronym>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 34

Image map
• A graphic that can be divided into multiple areas
• Each area can point to a different URL
• Browser loads the URL on clicking the associated area

<img src="shapes.jpg" usemap="#mainmap">


<map name="mainmap">
<area shape=circle coords="32,32,33" href="circle.html">
<area shape=rect coords="31,37,100,90" href="rect.html">

| U. K. Roy | [ 10/18/08 ]
Web technology 35

Working with head section


• Base tag
– Used to specify base URL for all links in this page

<head>
…
<base href="e:\My Documents\html\Picture\">
</head>
<body>
<img src="shapes.jpg">
</body>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 36

Meta tag
• Keywords for search engines
…
<head>
<title>My First html page</title>
<meta name="keywords" content="html, JavaScript, Xml">
</body>
…

• Redirecting to another page


…
<head>
<meta HTTP-EQUIV="REFRESH" content="0;
url=http://www.yahoo.com">
</head>
…
| U. K. Roy | [ 10/18/08 ]
Web technology 37

Advanced tags
• Creating Tables
– table tag
• tr tag— table row
• td tag—table column
…
<table>
<tr> <td>2</td> <td>3</td> </tr>
<tr> <td>4</td> <td>5</td> </tr>
</table>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 38

Creating Tables (contd.)


• Adding column header
– th tag
…
<table>
<tr> <th>Name</th> <th>OS</th> <th>OOP</th> </tr>
<tr> <td>Sujay</td> <td>2</td> <td>3</td> </tr>
<tr> <td>Tuhina</td> <td>4</td> <td>5</td> </tr>
</table>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 39

Creating Tables (contd.)


• Adding a caption
– caption tag
…
<table>
<caption>Marks</caption>
…
</table>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 40

Creating Tables (contd.)


• Adding border
– border attribute—default width is 1 pixel
…
<table border>
…
</table>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 41

Creating Tables (contd.)


• Adding column header
– rowspan number of rows caption spans
– Colspan number of columns caption spans
…
<table border>
<caption>Marks table</caption>
<tr><th rowspan=2>Name</th><th colspan=2>Marks</th></tr>
…
</table>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 42

Creating Tables (contd.)


• Cell spacing and cell padding
– cellspacing—spacing between cells
– cellpadding—gap between edge and the content of cell
…
<table border cellspacing=10 cellpadding=5 width=300>
…
</table>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 43

Creating Tables (contd.)


• Background color
– bgcolor
…
<table border cellspacing=10 cellpadding=5 width=300
bgcolor="gold">
…
</table>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 44

Creating Tables (contd.)


• Background color of a row/cell
– bgcolor
…
<tr bgcolor="gold"><td>Sujay</td><td>2</td><td>3</td></tr>
<tr bgcolor="olive"><td>Tuhina</td><td>4</td><td>5</td></tr>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 45

Working with forms


• Used to send user supplied data to server program
(CGI/JSP/ASP) over the Internet
• Form can contain interface elements such as text fields,
buttons, checkboxes, radio buttons and selection lists that
let users to enter text and make choices
• Interfaces are defined by INPUT or SELECTION tag
• Elements are defined within FORM tag
• Data can be passed using submit button

| U. K. Roy | [ 10/18/08 ]
Web technology 46

Text fields
• INPUT tag, type is text
• Used to specify single line textual data, such as name, email
address, login name etc.
…
<form>
First Name<input type=“text”><br>
Last Name<input type=“text”>
</form>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 47

Text fields
• Attributes
– size number of characters visible
– maxlength maximum number of characters that can be
typed
…
First Name <input type="text" size=5 maxlength=10>
Middle Initial<input type="text" size=1>
Last name <input type="text" size=5>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 48

Password fields
• INPUT tag, type is password
…
<form>
<table>
<tr><td>login</td>
<td><input type="text" size=10></td></tr>
<tr><td>password</td>
<td><input type="password" size=10></td></tr>
</table>
</form>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 49

Check box
• Used to specify true/false type options
…
<form>
<input type="checkbox" checked>CPU <br>
<input type="checkbox">RAM <br>
<input type="checkbox">Disk
</form>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 50

Radio buttons
• Similar to checkbox, except that only one radio button in a
group can be selected at a time
• Group is specified by NAME attribute
…
<input type="radio" name="CPU" checked>Pentium I<br>
<input type="radio" name="CPU">Pentium II<br>
<input type="radio" name="CPU">Pentium III<br>
<p>
<input type="radio" name="ram">32 MB<br>
<input type="radio" name="ram" checked>64 MB<br>
<input type="radio" name="ram">128 MB<br>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 51

Text area
• Allows users to enter lines of text
• ROWS and COLS attributes fixes the number of rows and
column of the visible portion of text area
…
<form>
Tell us about your interest(maximumm of 100 words)
<textarea cols=20 rows=5></textarea>
</form>
…

| U. K. Roy | [ 10/18/08 ]
Web technology 52

Selection list
• Allows users to select an item from pull down menu
• Options are included using OPTION tag
• SIZE determines how many items are visible
• MULTIPLE attribute allows the user to select multiple
options at a time by holding down the shift key
<form>
<select>
<option>CPU
<option selected>Disk
<option>RAM
<option>Monitor
</select>
</form>
| U. K. Roy | [ 10/18/08 ]
Web technology 53

Action buttons
• RESET button to clear contents of elements of a form
• SUBMIT button to send the content of a form

<form action="ckeck.jsp">
…
<input type="reset" value="Clear">
<input type="submit" value="Login">
</form>

| U. K. Roy | [ 10/18/08 ]

You might also like