Lecture 3
HTML Basics
HTML, Text, Images, Tables
What is a Web Page?
Web pages are text files containing HTML
HTML – Hyper Text Markup Language
A notation for describing
document structure (semantic markup)
formatting (presentation markup)
Looks (looked?) like:
A Microsoft Word document
The markup tags provide information about
the page content structure
2
Creating HTML Pages
An HTML file must have an .htm or .html file
extension
HTML files can be created with text editors:
NotePad, NotePad ++, PSPad
Or HTML editors (WYSIWYG Editors):
Microsoft FrontPage
Macromedia Dreamweaver
Netscape Composer
Microsoft Word
Visual Studio 3
HTML Structure
HTML is comprised of “elements” and “tags”
Begins with <html> and ends with </html>
Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
Tags have attributes:
<img src="logo.jpg" alt="logo" />
HTML describes structure using two main sections:
<head> and <body>
4
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
5
Tags Attributes
Tags can have attributes
Attributes specify properties and behavior
Example: Attribute alt with value "logo"
<img src="logo.gif" alt="logo" />
Few attributes can apply to every element:
id, style, class, title
The id is unique in the document
Content of title attribute is displayed as hint
when the element is hovered with the mouse
Some elements have obligatory attributes
6
Introduction to HTML
HTML Document Structure in Depth
The <!DOCTYPE> Declaration
HTML documents must start with a document
type definition (DTD)
It tells web browsers what type is the served code
Possible versions: HTML 4.01, XHTML 1.0
(Transitional or Strict), XHTML 1.1, HTML 5
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
See http://w3.org/QA/2002/04/valid-dtd-list.html for a list
of possible doctypes
8
HTML vs. XHTML
XHTML is more strict than HTML
Tags and attribute names must be in lowercase
All tags must be closed (<br/>, <img/>) while HTML allows <br> and
<img> and implies missing closing tags (<p>par1 <p>par2)
Many element attributes are deprecated in XHTML, most are moved to
CSS
Attribute minimization is forbidden, e.g.
<input type="checkbox" checked>
<input type="checkbox" checked="checked" />
Note: Web browsers load XHTML faster than HTML and valid code
faster than invalid!
9
The <head> Section
Contains information that doesn’t show
directly on the viewable page
Starts after the <!doctype> declaration
Begins with <head> and ends with </head>
Contains mandatory single <title> tag
Can contain some other tags, e.g.
<meta>
<script>
<style>
<!–- comments --> 10
<head> Section: <title> tag
Title should be placed between <head> and
</head> tags
<title>Telerik Academy – Winter Season 2009/2010
</title>
Used to specify a title in the window title bar
Search engines and people rely on titles
11
<head> Section: <meta>
Meta tags additionally
describe the content
contained within the page
<meta name="description" content="HTML
tutorial" />
<meta name="keywords" content="html, web
design, styles" />
<meta name="author" content="Chris Brewer" />
<meta http-equiv="refresh" content="5;
url=http://www.telerik.com" />
12
<head> Section: <script>
The <script> element is used to embed
scripts into an HTML document
Script are executed in the client's Web browser
Scripts can live in the <head> and in the <body>
sections
Supported client-side scripting languages:
JavaScript (it is not Java!)
VBScript
JScript
13
The <script> Tag – Example
<!DOCTYPE HTML> scripts-example.html
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
14
<head> Section: <style>
The <style> element embeds formatting
information (CSS styles) into an HTML page
<html> style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>
15
Comments: <!-- --> Tag
Comments can exist anywhere between the
<html></html> tags
Comments start with <!-- and end with -->
<!–- Telerik Logo (a JPG file) -->
<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...
16
<body> Section: Introduction
The <body> section describes the viewable
portion of the page
Starts after the <head> </head> section
Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>
17
Text Formatting
Text formatting tags modify the text between
the opening tag and the closing tag
Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
18
Headings and Paragraphs
Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
Sections: div and span
<div style="background: skyblue;">
This is a div</div>
19
Headings and Paragraphs –
Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
20
Headings and Paragraphs –
Example (2)
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
21
Text Formatting – Example
text-formatting.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
22
Text Formatting – Example (2)
text-formatting.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
23
Hyperlinks: <a> Tag
Link to a document calledform.html on the
same server in the same directory:
<a href="form.html">Fill Our Form</a>
Link to a document calledparent.html on
the same server in the parent directory:
<a href="../parent.html">Parent</a>
Link to a document calledcat.html on the
same server in the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
24
Hyperlinks: <a> Tag (2)
Link to an external Web site:
<a href="http://www.devbg.org" target="_blank">BASD</a>
Always use a full URL, including "http://", not
just "www.somesite.com"
Using the target="_blank" attribute opens
the link in a new window
Link to an e-mail address:
<a href="mailto:[email protected]?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
25
Hyperlinks: <a> Tag (3)
Link to a document called apply-now.html
On the same server, in same directory
Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>
Link to a document called index.html
On the same server, in the subdirectory english of
the parent directory:
<a href="../english/index.html">Switch to
English version</a>
26
Hyperlinks and Sections
Link to another location in the same document:
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>
Link to a specific location in another document:
<a href="chapter3.html#section3.1.1">Go to Section
3.1.1</a>
<!–- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
27
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
28
Hyperlinks – Example (2)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
29
Links to the Same Document –
Example
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
30
Links to the Same Document –
Example (2)
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
31
Images: <img> tag
Inserting an image with <img> tag:
<img src="/img/basd-logo.png">
Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
Example:
<img src="./php.png" alt="PHP Logo" />
32
Miscellaneous Tags
<hr />: Draws a horizontal rule (line):
<hr size="5" width="70%" />
<center></center>: Deprecated!
<center>Hello World!</center>
<font></font>: Deprecated!
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
33
Miscellaneous Tags – Example
misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
</body>
</html>
34
Ordered Lists: <ol> Tag
Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
Attribute values for type are 1, A, a, I, or i
1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
35
Unordered Lists: <ul> Tag
Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
Attribute values for type are:
disc, circle or square
• Apple o Apple Apple
• Orange o Orange Orange
• Pear o Pear Pear
36
Definition lists: <dl> tag
Create definition lists using <dl>
Pairs of text and associated definition; text is in
<dt> tag, definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
Renders without bullets
Definition is indented
37
Lists – Example
<ol type="1"> lists.html
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
38
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
39
Special Characters – Example
<p>[>> Welcome special-chars.html
<<]</p>
<p>►I have following cards:
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
<p>Telerik Academy™</p>
40
Special Chars – Example (2)
<p>[>> Welcome special-chars.html
<<]</p>
<p>►I have following cards:
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
<p>Telerik Academy™</p>
41
HTML Tables
HTML Tables
Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns
Tables
comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
Tables should not be used for layout. Use CSS
floats and positioning styles instead
43
HTML Tables (2)
Start and end of a table
<table> ... </table>
Start and end of a row
<tr> ... </tr>
Start and end of a cell in a row
<td> ... </td>
44
Simple HTML Tables – Example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
45
Simple HTML Tables – Example (2)
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
46
Complete HTML Tables
Table rows
split into three semantic sections:
header, body and footer
<thead> denotes table header and contains
<th> elements, instead of <td> elements
<tbody> denotes collection of table rows that
contain the very data
<tfoot> denotes table footer but comes
BEFORE the <tbody> tag
<colgroup> and <col> define columns (most
often used to set column widths)
47
Complete HTML Table: Example
<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup> th
<thead>
header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body (data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
48
Complete HTML Table:
By default, header text Example (2)
<table> is bold and centered. table-full.html
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>CellAlthough the footer
1.1</td><td>Cell is
1.2</td></tr>
<tr><td>Cell before the data in 2.2</td></tr>
2.1</td><td>Cell the
</tbody> code, it is displayed last
</table>
49
Nested Tables
Table data “cells” (<td>) can contain nested
tables (tables within tables):
<table> nested-tables.html
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
50
Cell Spacing and Padding
Tables have two important attributes:
cellspacing cellpadding
cell cell cell cell
cell cell cell cell
Defines the Defines the empty
empty space space around the cell
between cells content
51
Cell Spacing and Padding –
Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
52
Cell Spacing and Padding –
Example (2)
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
53
Column and Row Span
Table cells have two important attributes:
colspan rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"
cell[1,1] cell[1,2] cell[1,2]
cell[1,1]
cell[2,1] cell[2,1]
colspan="2" rowspan="1"
Defines how Defines how
many columns many rows the
the cell occupies cell occupies
54
Column and Row Span – Example
table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
55
Column and Row Span –
table-colspan-rowspan.html
Example (2)
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
Cell[1,1] Cell[2,1]
</table>
Cell[1,2] Cell[3,2]
Cell[2,2]
Cell[1,3] Cell[2,3]
56
Using <DIV> and <SPAN>
Block and Inline Elements
Block and Inline Elements
Block elements add a line break before and
after them
<div> is a block element
Other block elements are <table>, <hr>,
headings, lists, <p> and etc.
Inline elements don’t break the text before
and after them
<span> is an inline element
Most HTML elements are inline, e.g. <a>
58
The <div> Tag
<div> creates logical divisions within a page
Block style element
Used with CSS
Example:
div-and-span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
59
The <span> Tag
Inline style element
Useful for modifying a specific portion of text
Don't create a separate area
(paragraph) in the document
Very useful with CSS
span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
60
HTML Frames
<frameset>, <frame> and <iframe>
HTML Frames
Frames provide a way to show multiple HTML
documents in a single Web page
The page can be split into separate views
(frames) horizontally and vertically
Frames were popular in the early ages of HTML
development, but now their usage is rejected
Frames are not supported by all user agents
(browsers, search engines, etc.)
A <noframes> element is used to provide
content for non-compatible agents.
62
HTML Frames – Demo
frames.html
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>
Note the target attribute applied to the
<a> elements in the left frame.
63
Inline Frames: <iframe>
Inline frames provide
a way to show one
website inside another website:
iframe-demo.html
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>
64
HTML, CSS and JavaScript
Basics
Questions?
