Web Technology Lab
(BCSL504)
By
Shravan H S
Assistant Professor
Dept of CSE
PESITM, Shivamogga
HTML – Hypertext Markup Language
What is Markup Language
Introducti Markup Language vs Programming Language
on To Tags and Attributes
HTML HTML Document
HTML Document Structure,
HTML vs HTML 5
HyperText
Markup
Language
• HyperText : A text
contains Links to other text
or resources allowing for
navigating and exploration.
• Markup Language : A
language used for
structuring, formatting and
presenting information within
document. (This language is
interpreted by Browser).
Markup language vs Programming
Language
Markup Language Programming Language
• A language used for • A process of writing
structuring, formatting instruction for a computer
and presenting to perform a specific task.
information within • Ex: Java, Python, PHP, C,
document. (This language JS etc.
is interpreted by Browser).
• Ex:- HTML, XML, LaTeX
• HTML uses Tags and Attributes to
markup the content which we
Cont.. browser can interpret and render
visually
Tags and Attributes
Tags Attributes
• It is used to define different • It provides additional information
elements and tell the browser or modify the behavior of HTML
how to display the content. tags.
• These are placed within opening
• They are enclosed in angle tag in the form of name=value
brackets (<>). pair.
• They have opening and • Ex: <img src="image.jpg“ />.
closing tag. • 1) name : Specify the property
• Ex: <b></b>, <i></i>, (src)
<html></html>, • 2) value : sets the specific
<img ></img> etc, setting. (image.jpg)
HTML
Documen
t
A document which
containing HTML
Elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Title</title>
<!-- Add styles, metadata, or
links to external
resources here -->
HTML Document </head>
<body>
Structure here
<!-- Main content of the webpage goes
-->
<h1>Welcome to My
Website</h1>
<p>This is a paragraph of
text.</p>
</body>
</html>
HTML vs HTML5
HTML HTML 5
It didn't support audio and video
without the use of flash player
• It supports audio and video
support. controls with the use of
Does not allow JavaScript to run in
<audio> and <video> tags.
the browser.
• Allows JavaScript to run in the
It does not allow drag and drop
background.
effects. • It allows drag and drop effects.
Older version of HTML are less • HTML5 language is more
mobile-friendly. mobile-friendly.
Elements like nav, header were • New element for web structure
not present. like nav, header, footer etc.
• Develop the HTML page named as
“Myfirstwebpage.html”.
• Add the following tags with relevant
content.
1. Set the title of the page as “My First
Web Page”
2. 2. Within the body use the following
tags:
Program 1 a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style ()
• To create class timetable, we need
specific HTML tags for tables:
• <table>: This tag defines the table
itself. All table content is contained
within this tag.
• <thead>: This element groups the
header content in a table, which is
useful for accessibility and styling. It
Table Tag will contain your table header.
• <tbody>: This tag groups the body
content of the table, where your
actual timetable data will go.
• <tfoot>: This element groups the
footer content in a table. You'll use
this for your table footer.
• <tr>: This tag defines a table row.
Cont..
<th>: This tag defines a table header cell. These cells typically
contain headings for columns or rows and are often displayed in
bold.
<td>: This tag defines a standard table data cell.
colspan and rowspan attributes: These are crucial for creating
complex tables.colspan allows a cell to span across multiple
columns.
For example, <td colspan="2"> would make a cell occupy the
space of two columns.rowspan allows a cell to span across multiple
rows.
For example, <td rowspan="2"> would make a cell occupy the
space of two rows.
• To apply colors and other visual style,
Cascading Style Sheets (CSS). The
simplest way to apply styles for this project
is to use the style attribute directly on HTML
elements.
• style attribute: You can add this attribute
to any HTML tag to apply inline CSS. For
example, to change the background color of
Styling with a cell, you would write <td
style="background-color: yellow;">.
CSS • Color Names and Hex Codes: You can
specify colors by their names (e.g., red, blue,
yellow) or by their hexadecimal codes (e.g.,
#FF0000 for red). You'll use this to highlight
lab and elective hours with different colors.
• Highlighting rows and cells: You will
apply the style attribute to <tr> and <td>
tags to achieve the required color options for
your timetable.
• Develop the HTML page named
as “Table.html” to display your
class time table.
a) Provide the title as Time
Table with table header and
table footer, row-span and col-
Program 2 span etc.
b) Provide various colour
options to the cells (Highlight
the lab hours and elective hours
with different colours.)
c) Provide colour options for
rows.
