Scribd
Upload
13 views

ITaS Lect01

Uploaded by

knqqqdbihedwwurkwp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

ITaS Lect01

Uploaded by

knqqqdbihedwwurkwp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 75

Internet Technologies

and Services

HTML basics
PhD, DSc Eng. Remigiusz Rajewski
March 14, 2024
March 28, 2024
Outline
●
Use a text editor to create an HTML document.
●
Be able to use basic tags to denote paragraphs, emphasis or
special type.
●
Create hyperlinks to other documents.
●
Create an email link.
●
Add images to your document.
●
Use a table for layout.
●
Apply colors to your HTML document.

2
HTML editor
●
We need a text editor (e.g. Notepad) and an Internet browser (e.g. Edge,
Safari, Chrome).
●
Q: What is Notepad and where do I get it?
●
A: Notepad is the default Windows text editor. On most Windows systems, click
your Start button and choose Programs then Accessories or start typing “note...”.
It should be a little blue notebook.
●
Mac Users: SimpleText is the default text editor on the Mac. In OSX use TextEdit
and change the following preferences: Select (in the preferences window) Plain
text instead of Rich text and then select Ignore rich text commands in HTML files.
This is very important because if you don't do this HTML codes probably won't
work.
●
One thing you should avoid using is a word processor (like Microsoft
Word) for authoring your HTML documents!!!
3
HTML file
●
What is an html file?
●
HTML is a format that tells a computer how to display a web
page. The documents themselves are plain text files with
special "tags" or codes that a web browser uses to interpret and
display information on your computer screen.
●
HTML stands for Hyper Text Markup Language.
●
An HTML file is a text file containing small markup tags.
●
The markup tags tell the Web browser how to display the page.
●
An HTML file must have an htm or html file extension.

4
Try it!
●
Open your text editor and type the ●
Save the file as mypage.html. Start
following text: your web browser. Select Open (or
Open Page) in the File menu of your
<html>
browser. A dialog box will appear.
<head> ●
Select Browse (or Choose File) and
<title>My First Webpage</title> locate the html file you just created -
</head> mypage.html - select it and click
Open.
<body> ●
Now you should see an address in the
This is my first homepage. <b>This dialog box, for example
text is bold</b> C:\MyDocuments\mypage.html.
</body> ●
Click OK, and the browser will display
</html> the page. 5
Example explained
●
What you just made is a skeleton html document. This is the
minimum required information for a web document and all web
documents should contain these basic components. The first
tag in your html document is <html>. This tag tells your browser
that this is the start of an html document. The last tag in your
document is </html>. This tag tells your browser that this is the
end of the html document.
●
The text between the <head> tag and the </head> tag is header
information. Header information is not displayed in the browser
window.

6
Example explained
●
The text between the <title> tags is the title of your document.
The <title> tag is used to uniquely identify each document and
is also displayed in the title bar of the browser window.
●
The text between the <body> tags is the text that will be
displayed in your browser.
●
The text between the <b> and </b> tags will be displayed in a
bold font.

7
HTM or HTML extension?
●
When you save an HTML file, you can use either the .htm or the
.html extension. The .htm extension comes from the past when
some of the commonly used software only allowed three letter
extensions.
●
It is perfectly safe to use either .html or .htm, but be consistent.
mypage.htm and mypage.html are treated as different files by
the browser.

8
How to view HTML source?
●
A good way to learn HTML is to look at how other people
have coded their html pages. To find out, simply click on the
View option in your browsers toolbar and select Source or Page
Source. This will open a window that shows you the actual
HTML of the page. Go ahead and view the source html for this
page.

9
HTML tags
●
What are HTML tags?
●
HTML tags are used to mark-up HTML elements
●
HTML tags are surrounded by the two characters < and >
●
The surrounding characters are called angle brackets
●
HTML tags normally come in pairs like <b> and </b>
●
The first tag in a pair is the start tag, the second tag is the end tag
●
The text between the start and end tags is the element content
●
HTML tags are not case sensitive, <b> means the same as <B>

10
HTML tags
●
In HTML there are both logical tags and physical tags.
Logical tags are designed to describe (to the browser) the
enclosed text's meaning. An example of a logical tag is the
<strong> </strong> tag. By placing text in between these tags
you are telling the browser that the text has some greater
importance. By default all browsers make the text appear bold
when in between the <strong> and </strong> tags.
●
Physical tags on the other hand provide specific instructions on
how to display the text they enclose.

11
HTML tags
●
Examples of physical tags include:
●
<b>: Makes the text bold.
●
<big>: Makes the text usually one size bigger than what's around it.
●
<i>: Makes text italic.
●
Physical tags were invented to add style to HTML pages
because style sheets were not around, though the original
intention of HTML was to not have physical tags. Rather than
use physical tags to style your HTML pages, you should use
style sheets.

12
HTML elements
●
The HTML example from the ●
This is an HTML element: <b>This text is bold</b>
previous page: ●
The HTML element begins with a start tag: <b>
<html> ●
The content of the HTML element is: This text is bold
<head> ●
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element
<title>My First Webpage</title>
●

that should be displayed as bold.


</head> ●
This is also an HTML element::
<body> <body>
This is my first homepage. <b>This text is bold</b>
This is my first homepage. </body>
<b>This text is bold</b> ●
This HTML element starts with the start tag <body>, and
</body> ends with the end tag </body>. The purpose of the <body>
tag is to define the HTML element that contains the body of
</html> the HTML document. 13
Nested tags
●
You may have noticed in the previous example, the <body> tag
also contains other tags, like the <b> tab.
●
When you enclose an element in with multiple tags, the last tag
opened should be the first tag closed. For example:
●
<p><b><em>This is NOT the proper way to close nested
tags.</p></em></b>
●
<p><b><em>This is the proper way to close nested tags.
</em></b></p>
●
Note: It doesn't matter which tag is first, but they must be
closed in the proper order.
14
Why use lowercase tags?
●
You may notice we've used lowercase tags even though I said
that HTML tags are not case sensitive. <B> means the same as
<b>. The World Wide Web Consortium (W3C), the group
responsible for developing web standards, recommends
lowercase tags in their HTML 4 recommendation, and XHTML
(the next generation HTML) requires lowercase tags.

15
Tag attributes
●
Tags can have attributes. Attributes can provide additional
information about the HTML elements on your page.
●
The <tag> tells the browser to do something, while the attribute
tells the browser how to do it.
●
For instance, if we add the bgcolor attribute, we can tell the
browser that the background color of your page should be blue,
like this:
<body bgcolor="blue">

16
Tag attributes
●
<table> tag defines an HTML table.
●
With an added border attribute, we can tell the browser that the
table should have no borders:
<table border="0">
●
Attributes always come in name/value pairs like this:
name="value".
●
Attributes are always added to the start tag of an HTML
element and the value is surrounded by quotes.

17
Quote styles, “blue” or ‘blue’?
●
Attribute values should always be enclosed in quotes. Double
style quotes are the most common, but single style quotes are
also allowed.
●
In some rare situations, like when the attribute value itself
contains quotes, it is necessary to use single quotes:
name='George "machine Gun" Kelly'

18
Basic HTML tags

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment

19
Headings
●
Headings are defined with the <h1> to <h6> tags. <h1> defines
the largest heading while <h6> defines the smallest.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6> This is a heading</h6>
●
HTML automatically adds an extra blank line before and after a
heading. A useful heading attribute is align. 20
Headings
●
HTML automatically adds an extra blank line before and after
a heading. A useful heading attribute is align.

<h5 align="left">I can align headings </h5>

<h5 align="center">This is a centered heading </h5>

<h5 align="right">This is a heading aligned to the right </h5>

21
Paragraphs
●
Paragraphs are defined with the <p> tag. Think of a paragraph
as a block of text. You can use the align attribute with
a paragraph tag as well.
<p align="left">This is a paragraph </p>
<p align="center">this is another paragraph</p>
●
Note! You must indicate paragraphs with <p> elements.
A browser ignores any indentations or blank lines in the source
text. Without <p> elements, the document becomes one large
paragraph. HTML automatically adds an extra blank line before
and after a paragraph.
22
Line break
●
The <br> tag is used when you want to start a new line, but
don't want to start a new paragraph. The <br> tag forces a line
break wherever you place it. It is similar to single spacing in
a document.
●
The <br> tag has no closing tag.
Code Displayed
<p>This <br> is a para<br> graph with This
line breaks</p> is a para
graph with line breaks

23
Horizontal rule
●
The <hr> element is used for horizontal rules that act as
dividers between sections, like this:

●
The horizontal rule does not have a closing tag. It takes
attributes such as align and width. For instance:
Code Displayed
<hr width="50%" align="center">

24
Comments in HTML
●
The comment tag is used to insert a comment in the HTML
source code. A comment can be placed anywhere in the
document and the browser will ignore everything inside the
brackets. You can use comments to write notes to yourself, or
write a helpful message to someone looking at your source
code.
Code Displayed
<p> This HTML comment would <!-- This This HTML comment would be displayed
is a comment --> be displayed like like this.
this.</p>

25
Comments in HTML
●
Notice you don't see the text between the tags <!-- and -->. If
you look at the source code, you would see the comment. To
view the source code for this page, in your browser window,
select View and then select Source.
●
HTML automatically adds an extra blank line before and after
some elements, like before and after a paragraph, and before
and after a heading. If you want to insert blank lines into your
document, use the <br> tag.

26
Try it out!
●
Open your text editor and type the following text:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and plain old
html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br>which I am of course.</p>
</body>
</html>
27
Other HTML tags
●
As mentioned before, there are logical styles that describe what
the text should be and physical styles which actually provide
physical formatting. It is recommended to use the logical tags
and use style sheets to style the text in those tags.
●
Character tags like <strong> and <em> produce the same
physical display as <b> and <i> but are more uniformly
supported across different browsers.
●
When you hold your mouse pointer over the WWW, text in the
title attribute will appear in.
Code Displayed
<abbr title="World Wide Web">WWW</abbr> WWW
28
Logical tags
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<cite> Defines a citation
<code> Defines computer code text
<blockquote> Defines a long quotation
<del> Defines text
<dfn> Defines a definition term

29
Logical tags
Tag Description
<em> Defines emphasized text
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines preformatted text
<q> Defines a short quotation
<samp> Defines sample computer code
<strong> Defines strong text
<var> Defines a variable

30
Physical tags
Tag Description
<b> Defines bold text
<big> Defines big text
<i> Defines italic text
<small> Defines small text
<sup> Defines superscripted text
<sub> Defines subscripted text
<tt> Defines teletype text
<u> Deprecated! Use styles instead

31
HTML character entities
●
Some characters have a special meaning in HTML, like the less
than sign (<) that defines the start of an HTML tag.
●
If we want the browser to actually display these characters we
must insert character entities in place of the actual characters
themselves.
●
A character entity has three parts: an ampersand (&), an entity
name or an entity number, and finally a semicolon (;).
●
The & means we are beginning a special character, the ; means
ending a special character and the letters in between are sort of
an abbreviation for what it's for.
32
HTML character entities
●
To display a less than sign in an HTML document we must
write: &lt; or &#60; The advantage of using a name instead of a
number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity
names, while the support for entity numbers is very good in
almost all browsers.
●
Note! Entities are case sensitive.

33
The most common HTML
character entities
Result Description Entity Name Entity Number
non-breaking space &nbsp &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; (does not work in IE) &#39;

34
Non-breaking space
●
The most common character entity in HTML is the non-breaking
space &nbsp;. Normally HTML will truncate spaces in your text.
If you add 10 spaces in your text, HTML will remove 9 of them.
To add spaces to your text, use the &nbsp; character entity.

Code Displayed
<p> This code would appear as This code would appear as this.
this.</p>
<p> This code &nbsp;&nbsp;&nbsp; would This code would appear with three extra
appear with three extra spaces.</p> spaces.

35
Backgrounds
●
The <body> tag has two attributes where you can specify
backgrounds. The background can be a color or an image.
●
The bgcolor attribute specifies a background-color for an
HTML page. The value of this attribute can be a hexadecimal
number, an RGB value, or a color name:
●
<body bgcolor="#000000">
●
<body bgcolor="rgb(0,0,0)">
●
<body bgcolor="black">
●
The lines above all set the background-color to black.

36
Backgrounds
●
The background attribute can also specify a background-
image for an HTML page. The value of this attribute is the URL
of the image you want to use. If the image is smaller than the
browser window, the image will repeat itself until it fills the entire
browser window.
●
<body background="clouds.gif">
●
<body
background="http://put.poznan.pl/html/graphics/clouds.gif">
●
The URL can be relative or absolute.

37
Backgrounds
●
If you want to use a background image, you should keep in mind:
●
Will the background image increase the loading time too
much?
●
Will the background image look good with other images on the
page?
●
Will the background image look good with the text colors on
the page?
●
Will the background image look good when it is repeated on
the page?
●
Will the background image take away the focus from the text?
38
Backgrounds
●
Note: The bgcolor, background, and the text attributes in the
<body> tag are deprecated in the latest versions of HTML
(HTML 4 and XHTML). The World Wide Web Consortium
(W3C) has removed these attributes from its recommendations.
Style sheets (CSS) should be used instead (to define the
layout and display properties of HTML elements).

39
Try it out!
<html>
<head>
<title>My First Webpage</title>
</head>
<body background="http://put.poznan.pl/html/graphics/clouds.gif" bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor
and plain old html.</p>
<p>By learning html, I'll be able to create webpages like a <del>beginner</del> pro....<br>
which I am of course.</p>
</body>
</html> 40
HTML colors
●
Colors are defined using a hexadecimal notation for the
combination of red, green, and blue color values (RGB).
●
The lowest value that can be given to one light source is 0 (hex
#00).
●
The highest value is 255 (hex #FF).
●
A collection of color names is supported by most browsers.
●
Note! Only 16 color names are supported by the W3C HTML
4.0 standard (aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow).
For all other colors you should use the Color HEX value
41
HTML colors – names

42
HTML colors
●
The combination of Red, Green and Blue values from 0 to 255
gives a total of more than 16 million different colors to play with
(256 x 256 x 256).
●
Most modern monitors are capable of displaying at least 16,384
different colors.
●
To assist you in using color schemes, check out below site. It
lets you test different color schemes for page backgrounds, text
and links.
●
http://colorschemedesigner.com/

43
HTML lists
●
HTML provides a simple way to show unordered lists (bullet
lists) or ordered lists (numbered lists).
●
Types of lists:
●
Unordered lists
●
Ordered lists
●
Definition lists

44
HTML lists – unordered list
●
An unordered list is a list of items marked with bullets (typically
small black circles). An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.

Code Displayed
<ul> ●
Coffee
<li>Coffee</li> ●
Milk
<li>Milk</li>
</ul>

45
HTML lists – ordered list
●
An ordered list is also a list of items. The list items are marked
with numbers. An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
●
Inside a list item you can put paragraphs, line breaks, images,
links, other lists, etc.
Code Displayed
<ol> 1. Coffee
<li>Coffee</li> 2. Milk
<li>Milk</li>
</ol>

46
HTML lists – definition list
●
Definition lists consist of two parts: a term and a description.
●
To mark up a definition list, you need three HTML elements:
●
a container <dl>
●
a definition term <dt>
●
a definition description <dd>
●
Inside a definition-list definition (the <dd> tag) you can put
paragraphs, line breaks, images, links, other lists, etc.

47
HTML lists – definition list

Code Displayed
<dl> Cascading Style Sheets
<dt>Cascading Style Sheets</dt> Style sheets are used to provide
<dd>Style sheets are used to provide presentational suggestions for
presentational suggestions for documents marked up in HTML.
documents marked up in HTML.
</dd>
</dl>

48
Try it out!
<html> which I am of course.</p>
<head> Here's what I've learned:
<title>My First Webpage</title> <ul>
</head> <li>How to use HTML tags</li>
<body bgcolor="#EDDD9E"> <li>How to use HTML colors</li>
<h1 align="center">My First Webpage</h1> <li>How to create Lists</li>
<p>Welcome to my <strong>first</strong> </ul>
webpage. I am writing this page using a text
</body>
editor and plain old html.</p>
</html>
<p>By learning html, I'll be able to create
web pages like a pro....<br>

49
HTML links
●
HTML uses the <a> anchor tag to create a link to another
document or web page.
●
The anchor tag and the href attribute (href = hypertext reference)
●
The target attribute
●
E-mail links
●
The anchor tag and the name attribute

50
HTML links – the anchor tag
and the href attribute
●
An anchor can point to any resource on the Web:
●
an HTML page, Code Displayed
<a href="https://put.poznan.pl"> The PUT main page
●
an image, The PUT main page</a>
●
a sound file,
●
a movie, etc.
●
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
●
The <a> tag is used to create an anchor to link from, the href
attribute is used to tell the address of the document or page we
are linking to, and the words between the open and close of the
anchor tag will be displayed as a hyperlink. 51
HTML links – the target attribute
●
With the target attribute, you can define where the linked
document will be opened.
●
By default, the link will open in the current window.
●
To open the document in a new browser window we need to
specify the target
<a href=https://put.poznan.pl target="_blank">The PUT main
page</a>

52
HTML links – e-mail links
●
To create an email link, you will use mailto: plus your email
address. Here is a link to:
<a href="mailto:[email protected]">Email to PUT’s Doctoral
School</a>
●
To add a particular subject for the email message, you would
add ?subject= after the email address. For example:
<a href="mailto:[email protected]?subject=Email
Assistance">Email to PUT’s Doctoral School</a>

53
HTML links – the anchor tag
and the name attribute
●
The name attribute is used to create a named anchor. When
using named anchors we can create links that can jump directly
to a specific section on a page, instead of letting the user scroll
around to find what he/she is looking for.
●
Unlike an anchor that uses href, a named anchor doesn't
change the appearance of the text (unless you set styles for
that anchor) or indicate in any way that there is anything special
about the text.
●
Below is the syntax of a named anchor:
<a name="top">Text to be displayed</a>
54
HTML links – the anchor tag
and the name attribute
●
To link directly to the top section, add a # sign and the name of
the anchor to the end of a URL
Code Displayed
<a href="https://pot.poznan.pl/html Back to top of page
/SomePage.html#top">Back to top of page </a>

●
A hyperlink to the top of the page from within the file
SomePage.html will look like this:
Code Displayed
<a href="#top">Back to top of page </a> Back to top of page

55
HTML links – the anchor tag
and the name attribute
●
Named anchors are often used to create "table of contents" at
the beginning of a large document.
●
Each chapter within the document is given a named anchor,
and links to each of these anchors are put at the top of the
document.
●
If a browser cannot find a named anchor that has been
specified, it goes to the top of the document. No error occurs.

56
HTML images
●
The <img> tag is empty, which means that it contains attributes
only and it has no closing tag.
●
To display an image on a page, you need to use the src
attribute. src stands for "source".
●
The value of the src attribute is the URL of the image you want
to display on your page.
<img src="graphics/SomeImage.gif">

57
HTML images
<img src="graphics/SomeImage.gif">
●
Not only does the source attribute specify what image to use,
but where the image is located. The above image,
graphics/SomeImage.gif, means that the browser will look for
the image name SomeImage.gif in a graphics folder in the
same folder as the html document itself.
●
The browser puts the image where the image tag occurs in the
document. If you put an image tag between two paragraphs, the
browser shows the first paragraph, then the image, and then
the second paragraph.

58
HTML images – the alt attribute
●
The alt attribute is used to define an alternate text for an image.
The value of the alt attribute is author-defined text:
<img src="graphics/SomeImage.gif" alt="Smiling Happy Baby ">
●
The alt attribute tells the reader what he or she is missing on a
page if the browser can't load images. The browser will then
display the alternate text instead of the image.
●
It is a good practice to include the alt attribute for each image
on a page, to improve the display and usefulness of your
document for people who have text-only browsers or use
screen readers.
59
HTML images – image dimensions
●
When you have an image, the browser usually figures out how
big the image is all by itself. If you put in the image dimensions
in pixels however, the browser simply reserves a space for the
image, then loads the rest of the page. Once the entire page is
loads it can go back and fill in the images.
●
Without dimensions, when it runs into an image, the browser
has to pause loading the page, load the image, then continue
loading the page.
<img src="graphics/SomeImage.gif" width="130" height="101"
alt="Smiling Happy Baby">

60
Try it out!
<html> which I am of course.</p>
<head> <!-- Who would have guessed how
easy this would be :) -->
<title>My First Webpage</title>
<p><img
</head> src="graphics/SomeImage.gif"
<body> width="130" height="101"
alt="Smiling Happy Baby"
<h1 align="center">My First Web
align="center"></p>
page</h1>
<p align="center">Happy baby</p>
<p>Welcome to my first webpage. I
am writing this page using a text </body>
editor and plain old html.</p> </html>
<p>By learning html, I'll be able to
create web pages like a pro....<br> 61
Tables
●
Tables are defined with the <table> tag.
●
A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands
for table data, which is the content of a data cell.
●
A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.

62
Table tags
Code Displayed
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or
more columns in a table

63
Tables – example 1
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
64
Tables – example 2a
To display a table with borders, you will use the border attribute.
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

65
Tables – example 2b
To display a table with borders, you will use the border attribute.
<table border="5">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

66
Tables – example 3
Headings in a table are defined with
the <th> tag.
<table border="1">
<tr>
<tr>
<td>row 2, cell 1</td>
<th>Heading</th>
<td>row 2, cell 2</td>
<th>Another Heading</th>
</tr>
</tr>
</table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
67
Tables – example 4
●
The <table> tag has two attributes known as cellspacing and cellpadding. Here is
a table example without these properties. These properties may be used separately
or together.
<table border="1">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table> 68
Tables – example 5
●
Cellspacing is the pixel width between the individual data cells in the table (The
thickness of the lines making the table grid). The default is zero. If the border is set
at 0, the cellspacing lines will be invisible.
<table border="1" cellspacing="5">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table> 69
Tables – example 6
●
Cellpadding is the pixel space between the cell contents and the cell border.
●
The default for this property is also zero. This feature is not used often, but
sometimes comes in handy when you have your borders turned on and you want
the contents to be away from the border a bit for easy viewing.
●
Cellpadding is invisible, even with the border property turned on. Cellpadding can
be handled in a style sheet.
<table border="1" cellpadding="10">
<tr> <td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr> </table> 70
Table size
●
The width attribute can be used to define the width of a table.
●
It can be defined as a fixed width or a relative width.
●
A fixed table width is one where the width of the table is
specified in pixels. The following code will produce a table that
is 550 pixels wide.
<table width="550">
●
A relative table width is specified as a percentage of the width of
the visitor's viewing window. The following code will produce a
table that occupies 80 percent of the screen.
<table width="80%">
71
Table size
●
There are arguments in favor of giving your tables a relative
width because such table widths yield pages that work
regardless of the visitor's screen resolution.
●
For example, a table width of 100% will always span the entire
width of the browser window whether the visitor has a 800x600
display or a 1024x768 display (etc). Your visitor never needs to
scroll horizontally to read your page, something that is regarded
by most people as being very annoying.

72
Try it out!
<html>
<head>
<title>My First Web Page </title>
</head>
<body>
<table width="90%" cellpadding="5" cellspacing="0" >
<tr bgcolor="#EDDD9E">
<td width="200" valign="top"><img src="graphics/contact.gif" width="100"
height="100"></td>
<td valign="top"><h1 align="right">Janet Doeson</h1>
<h3 align="right">Technical Specialist</h3></td>
</tr>

73
Try it out!
<tr>
<td width="200">
<h3>Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li> <a href="faq.html">FAQ</a></li>
<li> <a href="contact.html">Contact</a></li>
<li> <a href="https://put.poznan.pl">Links</a> </li>
</ul></td>
<td valign="top"><h2 align="center">Welcome!</h2>
<p>Welcome to my first webpage. I created this webpage without the assistance of a
webpage editor. Just my little text editor and a keen understanding of html.</p>
<p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not be
able to tell, but the layout is done with a table. I'm very clever. </p>

74
Try it out!
<blockquote>
<p>I always wanted to be somebody, but now I realize I should have been more specific.</p>
<cite>Lily Tomlin </cite> </blockquote> </td>
</tr>
</table>
<hr width="90%" align="left">
<address>
Bob Gates<br>
Technical Specialist<br>
123-456-789
</address>
<p>Contact me at <a href="mailto:[email protected]">[email protected]</a> </p>
</body>
</html>

75

You might also like