z Chapter 2 - HTML - Hyper Text Markup Language.pdf

CoSc3081
Web Programming
Instructor: Zinabu H.
2024
zinabuscholar@gmail.com
zinabu@aku.edu.et

Zinabu H.
Aksum University- AIT 2024 zinabuscholar@gmail.com
 Introduction to HTML
 HTML tags

What is HTML?
Zinabu H. 3
 HTML (HyperText Markup Language) is used to
structure and format the content of websites on the
World Wide Web.
 Web Developers use it to create a skeleton of
modern websites and web apps.

What is HTML?
Zinabu H. 4
 HyperText
HyperText is a way of organizing text that allows the
reader to easily navigate and access related
information.
 Markup language
A markup language is a computer language that is
used to add structure and formatting to a text
document.

HTML Structure
Zinabu H. 5
 HTML is comprised of “elements” and “tags”
 Begins with <html> and ends with </html>
 Elements (tags) are nested one inside another:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
 HTML describes structure using two main sections:
<head> and <body>
<img src="logo.jpg" alt="logo" />
 Tags have attributes

HTML
Zinabu H. 6
 The HTML source code should be formatted to
increase readability and facilitate debugging.
 Every block element should start on a new line.
 Every nested (block) element should be
indented.
 Browsers ignore multiple whitespaces in the
page source, so formatting is harmless.

First HTML Page
Zinabu H. 7
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Web Programming</title>
</head>
<body>
<p>This is some text that will appear on
the web page</p>
</body>
</html>

First HTML Page: Tags
Zinabu H. 8
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Web Programming</title>
</head>
<body>
<p>This is some text that will appear on
the web page</p>
</body>
</html>
Opening Tag
An HTML element consists of an opening tag,
a closing tag and the content inside.
Closing Tag

Meta Tag
Zinabu H. 9
 In HTML, the <meta> tag is used to provide metadata
about the HTML document.
 Metadata is data about the HTML document itself,
such as the character encoding, viewport settings for
responsive design, authorship information, and more.
 Here are some common uses of the <meta> tag:
 Character Encoding: Specifies the character encoding for
the document.
<meta charset="UTF-8">
 Description: Provides a short description of the document.
<meta name="description" content="Description of the HTML
document">

Meta Tag…
Zinabu H. 10
 Here are some common uses of the <meta> tag:
 Keywords: Specifies keywords related to the document.
<meta name="keywords" content="keyword1, keyword2,
keyword3">
 Author: Specifies the author of the document.
<meta name="author" content="Author Name">
 Refresh: Automatically refreshes or redirects the page after
a specified time.
<meta http-equiv="refresh"
content="5;url=http://example.com">

Comments: Tag
Zinabu H. 11
 Comments can exist anywhere between the
<html></html> tags
 Comments start with 
<!–- AKU Logo (a JPG file) -->
<img src="logo.jpg" alt=“AKU Logo">
<!–- Hyperlink to the web site -->
<a href="http://www.aku.edu.et/"> AKU</a>
<!–- Show the news table -->
<table class="newstable">
...

Hyperlinks: <a> Tag
Zinabu H. 12
 Link to a document called form.html on the same
server in the same directory:
 Link to a document called cs.html on the same
server in the parent directory:
 Link to a document called courses.html on the same
server in the subdirectory cs:
<a href="form.html">Fill Our Form</a>
<a href="cs/courses.html">Courses</a>
<a href="../cs.html">Computer Science</a>

Hyperlinks: <a> Tag …
Zinabu H. 13
 Link to an external Web site
 Always use a full URL, including "http://", not just
www.ait.edu.et
 Using the target="_blank" attribute opens the link
in a new window
 Link to an e-mail address:
<a href="http://www.ait.edu.et" target="_blank"> AiT</a>
<a href="mailto:bugs@ait.edu.et?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>

Hyperlinks: <a> Tag …
Zinabu H. 14
 Link to a document called apply-now.html
 On the same server, in same directory
 Using an image as a link button:
 Link to a document called index.html
 On the same server, in the subdirectory english of
the parent directory:
<a href="apply-now.html">
<img src="apply-now-button.jpg" />
</a>
<a href="../english/index.html">
Switch to English version
</a>

Text Formatting Tag
Zinabu H. 15
 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

HTML image inserting tag
Zinabu H. 16
 The HTML <img> tag embeds an image within the
HTML web page
 The HTML image tag has 2 important attributes:
 The src attribute
 The alt attribute
 The src attribute is a required attribute for the
<img> tag. It specifies the path (URL) to the image. It
tells the browser where to look for the image.
 Note: The <img> tag is an empty tag, i.e. It doesn't
require a closing tag.:
<img src="logo.png“ alt=“AKU logo">

Inserting image map tag
Zinabu H. 17
 With HTML, image maps, you can create clickable
areas on an image.
 The HTML <map> tag defines an image map
 The areas are defined with one or more <area>
tags
 The image is inserted using the <img> tag, the only
difference from other images is that you must add
a usemap attribute
 The usemap value starts with a hash tag #
followed by the name of the image map, and is
used to create a relationship between the image
and the image map
Example : Onboard

HTML Tables
Zinabu H. 18
 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

Simple HTML Tables – Example
Zinabu H. 19
<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>

Complete HTML Tables
Zinabu H. 20
 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)

Complete HTML Tables
Zinabu H. 21
 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)

Complete HTML Table: Example
Zinabu H. 22
<table>
<colgroup>
<col style="width:100px" /><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>Cell 1.1</td><td>Cell 1.2</td></tr>
</tbody>
</table>
header
footer
Last comes the body (data)
th
columns

Complete HTML Table: Example
Zinabu H. 23
<table border=“1”>
<colgroup>
<col style="width:100px" /><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>
</tbody>
</table>
header
footer
th
columns
By default, header text
is bold and centered
Although the footer is
before the data in the
code, it is displayed last

Nested Tables
Zinabu H. 24
header
footer
th
columns
 Table data “cells” (<td>) can contain nested tables
(tables within tables):
<table>
<tr>
<td>Contact:</td>
<td><table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>

Cell Spacing and Padding
Zinabu H. 25
header
footer
th
columns
 Tables have two important attributes:
cellspacing cellpadding
Defines the
empty space
between cells
Defines the empty
space around the cell
content

Cell Spacing and Padding
Zinabu H. 26
header
footer
th
columns
<html>
<head><title>Table Cells</title></head>
<body>
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

Column and Row Span: Table
Zinabu H. 27
header
footer
th
columns
Defines how many
columns the cell
occupies
cell[1,1] cell[1,2]
cell[2,1]
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
colspan="1" colspan="1" rowspan="2" rowspan="1"
 Table cells have two important attributes:
⬥ colspan ⬥ rowspan
Defines how many rows
the cell occupies
rowspan="1"

Column and Row Span – Example
Zinabu H. 28
header
footer
th
columns
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>
Cell[2,2]
Cell[1,3] Cell[2,3]
Cell[1,1] Cell[2,1]
Cell[1,2] Cell[3,2]

Ordered Lists: <ol> Tag
Zinabu H. 29
th
columns
 Create an Ordered List using <ol></ol>:
 Attribute values for type are 1, A, a, I, or i
<ol type="1">
<li>CS</li>
<li>IT</li>
<li>IS</li>
</ol>
a. CS
b. IT
c. IS
1. CS
2. IT
3. IS
A. CS
B. IT
C. IS
i. CS
ii. IT
iii. IS
I. CS
II. IT
III. IS

Unordered Lists: <ul>Tag
Zinabu H. 30
th
columns
 Create an Unordered List using <ul></ul>:
 Attribute values for type are:
<ul type="disk
<li>CS</li>
<li>IT</li>
<li>IS</li>
</ul>
disc, circle or square
• CS
• IT
• IS
o CS
o IT
o IS
 CS
 IT
 IS

Definition lists: <dl> tag
Zinabu H. 31
th
columns
 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

HTML Frames
Zinabu H. 32
th
columns
 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.

HTML Frames : Demo
Zinabu H. 33
th
columns
 Frames
<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>

Inline Frames: <iframe>
Zinabu H. 34
th
columns
 Inline frames provide a way to show one website
inside another website:
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes">
</iframe>

HTML Form and Form Controls
Zinabu H. 35
th
columns
 Forms are the primary method for gathering data
from site visitors
 Create a form block with
 Example:
<form> </form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
The “method" attribute tells how
the form data should be sent –
viaGET or POST request

HTML Form Elements
Zinabu H. 36
th
columns
 A form contains special interactive elements
that users use to send the input.
 HTML <input> tag
 HTML <label> tag
 HTML <button> tag
 HTML <select>, <option> and <optgroup> tags
 HTML <textarea> tag
 HTML <fieldset> tag
 HTML <legend> tag
 HTML <datalist> tag
 HTML <output> tag

HTML Form Elements
Zinabu H. 37
th
columns
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value=“ethiopia">Ethiopia</option>
<option value=“kenya">Kenya</option>
<option value=“sudan">Sudan</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30"
rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>

HTML Form Attributes
Zinabu H. 38
th
columns
 The HTML <form> element contains several attributes
for controlling data submission. They are as follows:
action
 The action attributes define the action to be
performed when the form is submitted. It is usually
the url for the server where the form data is to be
sent.
<form action="/login">
<label for="email">Email:</label>
<input type="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>

HTML Form Attributes
Zinabu H. 39
th
columns
method
 The method attribute defines the HTTP method to be
used when the form is submitted. There are 3 possible
values for the method attribute:
 post - It is used to send data to a server to update a
resource.
 get: It is used to request data from a specified
resource.
 dialog: This method is used when the form is inside a
<dialog> element. Using this method closes the
dialog and sends a form-submit event.

Inserting Multimedia in HTML
Zinabu H. 40
th
columns
HTML Video
 The HTML <video> tag is used to embed a media
player which supports video playback into the HTML
page.
 We use the HTML <video> tag and the <source>
tag to show the video
 For example
<video width="320" height="190" controls>
<source src="video.mp4" type="video/mp4">
</video>

Inserting Multimedia in HTML
Zinabu H. 41
th
columns
HTML Audio
 The HTML <audio> tag is used to embed a media
player which supports audio playback into the HTML
page.
 We use the HTML <audio> tag along with the
<source> tag to add the audio player.
 For example
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>

HTML Graphics
Zinabu H. 42
th
columns
HTML SVG
 SVG (Scalable Vector Graphics) is used to create 2D
diagrams such as shapes, logos, charts, etc
 The HTML <svg> tag is used to embed SVG graphics
in a web page.
 Example
<svg width="100" height="100" style="border:1px solid
black;">
<circle cx="50" cy="50" r="30" fill="blue" />
</svg>

HTML Graphics
Zinabu H. 43
th
columns
HTML Canvas
 HTML <canvas> is used to create graphics in HTML.
We create the graphics inside the <canvas> using
JavaScript.
 Example
<canvas id="circle-canvas" height="200" width="200"
style="border: 1px solid;"></canvas>
<script>
let canvas = document.getElementById("circle-canvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI, false);
ctx.fillStyle = 'blue';
ctx.fill();
</script>

Zinabu H. 44
Aksum University- AIT
2024
zinabuscholar@gmail.com

z Chapter 2 - HTML - Hyper Text Markup Language.pdf

More Related Content

Similar to z Chapter 2 - HTML - Hyper Text Markup Language.pdf (20)

Recently uploaded (20)

z Chapter 2 - HTML - Hyper Text Markup Language.pdf