Scribd
Upload
7 views

Web Technologies - Lecture 3 HTML

Uploaded by

kanchuka induranga
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Web Technologies - Lecture 3 HTML

Uploaded by

kanchuka induranga
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

CS1215, SE1215, IT1217

CS2104, SE2104, IT2104


Lecture 03
Web Technologies – HTML (Part II)
12/12/2023
22 / 05 / 2024

Bachelor of Science (Hons) in Computer Science | Software Engineering | Information Technology


Department of Computing
Faculty of Computing and Technology
Saegis Campus
Nugegoda

1
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Fonts
• The <font> tag in HTML is deprecated.
• The World Wide Web Consortium (W3C) has removed the <font> tag
from its recommendations.
• In future versions of HTML, style sheets (CSS) will be used to define
the layout and display properties of HTML elements.
• The <font> Tag Should NOT be used.

2
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Backgrounds
Backgrounds
• The <body> tag has two attributes where you can specify backgrounds.
• The background can be a color or an image.
Bgcolor
• 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.

3
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Background
• 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="https://user-
images.githubusercontent.com/14011726/94132137-7d4fc100-fe7c-11ea-8512-
69f90cb65e48.gif">

4
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
<html>
Try It Out! <head>
<title>My First Webpage</title>
Open your text editor and type the </head>
following text: <body background="https://user-
images.githubusercontent.com/14011726/94132137-7d4fc100-
fe7c-11ea-8512-69f90cb65e48.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>

5
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Colors
Color Values
• 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).
• This table shows the result of combining
red, green, and blue:

6
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Color Names

7
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
For HTML color codes: https://htmlcolorcodes.com/

8
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Lists
• HTML provides a simple way to show unordered lists (bullet lists) or
ordered lists (numbered lists).
Unordered Lists
• 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.

9
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Lists (Cont.)
Ordered Lists
• 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.

10
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
<html>
<head>
Try It Out! <title>My First Webpage</title>
</head>
Open your text editor and type the <body bgcolor="#EDDD9E">
following text:
<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 web pages like a pro....<br>
which I am of course.</p>
Here's what I've learned:
<ul>
<li>How to use HTML tags</li>
<li>How to use HTML colors</li>
<li>How to create Lists</li>
</ul>
</body>
</html>

11
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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
• An anchor can point to any resource on the Web: an HTML page, an image, 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.

12
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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.
• The code below will open the document in a new browser window:
<a href=http://www.austincc.edu/ target="_blank">Visit ACC!</a>
Email Links
• To create an email link, you will use mailto: plus, your email address. Here is a link
to ACC's Help Desk:
<a href="mailto:[email protected]">Email Help Desk</a>
• To add a subject for the email message, you would add ?subject= after the email
address. For example:
<a href="mailto:[email protected]?subject=Email
Assistance">Email Help Desk</a>

13
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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>

14
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
• To link directly to the top section, add a # sign and the name of the
anchor to the end of a URL, like this:

15
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Images
The Image Tag and the Src Attribute
• 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. The syntax of defining an image:

16
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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/chef.gif" alt="Smiling Happy Chef ">

• 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.

17
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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.
• The chef image would then be:

<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

18
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Practice the code:

19
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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.

20
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Tables and the Border Attribute
• To display a table with borders, you will use the border attribute.

21
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Headings in a Table
Headings in a table are defined with the <th> tag.

22
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Cell Padding and Spacing
• 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.

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.

23
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
• 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.

24
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Table Tags

25
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Table Size - Table Width
• The width attribute can be used to define the width of your 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.
• For example, this code, <table width="550">, will produce a table that is 550 pixels
wide.
• A relative table width is specified as a percentage of the width of the visitor's
viewing window.
• Hence this code, <table width="80%">, will produce a table that occupies 80
percent of the screen.

26
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
<html>
<head> Practice the code:
<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>
<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="http://www.austincc.edu">Links</a> </li>
</ul></td>

27
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
<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>
<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> Janet Doeson<br> Technical Specialist<br> 512.555.5555 </address>
<p>Contact me at <a href="mailto:[email protected]">[email protected]</a> </p>
</body>
</html>

28
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Activity: Create Your Own Page
It’s time to create your own page. Use your text editor to create a page which contains the
following:
•the required HTML page codes
• link to another web page
• an email link
• a picture/graphic
• a list of information

Save the file as xyhtml_basics.html where xy is your initials. Email the file to your Saegis outlook email.

29
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus

You might also like