HTML Basics: HTML, Text, Images, Tables
HTML Basics: HTML, Text, Images, Tables
HTML Basics: HTML, Text, Images, Tables
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:
Microsoft FrontPage
Macromedia Dreamweaver
Netscape Composer
Microsoft Word
Visual Studio 3
HTML Structure
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
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>
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>
<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>
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 -->
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>
<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>
<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>
<a href="mailto:bugs@example.com?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>
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:bugs@example.com?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:bugs@example.com?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:
Example:
<center></center>: Deprecated!
<center>Hello World!</center>
<font></font>: Deprecated!
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>
<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>
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
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"
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
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
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>
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?