Course Code: CSE 324
Course Title: Web Engineering
Lab 1
HTML
Prepared By
Priyanka Roy
Lecturer, CSE, Sylhet International University (SIU)
Objectives
• Learn about HTML
1/19/2025 Lab 1: HTML 2
Outline
• Introduction
• Features of HTML
• Basic Format/Page Structure
• HTML Tags, Elements and Attributes
• Text Formatting
• Anchor Tag
• HTML Table, List, Form
• HTML Frame
1/19/2025 Lab 1: HTML 3
Introduction
• The HyperText Markup Language or HTML is the standard markup
language for documents designed to be displayed in a web browser.
• It can be assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.
• A markup language is a computer language that is used to apply
layout and formatting conventions to a text document.
• Markup language makes text more interactive and dynamic.
• It can turn text into images, tables, links, etc.
1/19/2025 Lab 1: HTML 4
What is HTML?
• HTML stands for HyperText Markup Language.
• HTML is the combination of Hypertext and Markup language.
• Hyper = HTML link
• Hyper-Text = link + text
• Hypertext defines the link between the web pages and markup
language defines the text document within the tag that define the
structure of web pages.
• HTML is used to create the structure of web pages that are displayed
on the World Wide Web (www).
1/19/2025 Lab 1: HTML 5
Features of HTML
• It is a very easy and simple language. It can be easily understood and
modified.
• It is very easy to make an effective presentation with HTML because it
has a lot of formatting tags.
• It is a markup language, so it provides a flexible way to design web
pages along with the text.
• It facilitates programmers to add a link on the web pages (by html
anchor tag), so it enhances the interest of browsing of the user.
1/19/2025 Lab 1: HTML 6
Features of HTML
• It is platform-independent because it can be displayed on any
platform like Windows, Linux, and Macintosh, etc.
• It facilitates the programmer to add Graphics, Videos, and Sound to
the web pages which makes it more attractive and interactive.
• HTML is a case-insensitive language, which means we can use tags
either in lower-case or upper-case.
1/19/2025 Lab 1: HTML 7
Basic Format/Page Structure
• The basic structure of an
HTML page is laid out below.
• It contains the essential
building-block elements (i.e.
doctype declaration, HTML,
head, title, and body
elements) upon which all
web pages are created.
1/19/2025 Lab 1: HTML 8
Basic Format/Page Structure
• <!DOCTYPE html> – A doctype or document type declaration is an
instruction that tells the web browser about the markup language in
which the current page is written.
• It is not an element or tag.
• The doctype declaration is not case-sensitive.
• <html> – This tag is used to define the root element of HTML
document. This tag tells the browser that it is an HTML document.
• It is the second outer container element that contains all other elements
within it.
1/19/2025 Lab 1: HTML 9
Basic Format/Page Structure
• <head> – This tag is used to define the head portion of the HTML
document that contains information related to the document.
• Elements within the head tag are not visible on the front-end of a webpage.
• Example: it contains document title, link/connection to other programming
languages, package, reference link etc.
• <body> – The body tag is used to enclose all the visible content of a
webpage. In other words, the body content is what the browser will
show on the front end.
1/19/2025 Lab 1: HTML 10
HTML Tags
• HTML tags are keywords which defines that how web browser will format
and display the content.
• With the help of tags, a web browser can distinguish between an HTML
content and a simple content.
• HTML tags contain three main parts:
• opening tag
• content <tag> content </tag>
• closing tag
• Some HTML tags are not closed, for example br and hr.
• <br> : br stands for break line, it breaks the line of the code.
• <hr> : hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.
1/19/2025 Lab 1: HTML 11
HTML Attribute
• An attribute is used to define the characteristics of an HTML element and
is placed inside the element's opening tag.
• All attributes are made up of two parts –
• name <tag attribute_name= "value"> content </ tag>
• value
• The four core attributes that can be used on the majority of HTML
elements (although not all) are −
• Id: unique identifier
• Title: tooltip text
• Class: associated with stylesheet
• Style: inline css
1/19/2025 Lab 1: HTML 12
HTML Element
• An HTML element is an individual component of an HTML file.
• It is defined by a starting tag.
• If the element contains other content, it ends with a closing tag,
where the element name is preceded by a forward slash.
• Elements that does not have content
and end tag are known as void
elements or empty elements or
unpaired tag.
• Example: <br>, <hr> etc.
1/19/2025 Lab 1: HTML 13
HTML Element
• For the default display and styling purpose in HTML, all the elements are
divided into two categories:
• Block-level element: These are the elements, which structure main part
of web page, by dividing a page into coherent blocks.
• A block-level element always starts with new line and takes the full width of web
page, from left to right.
• These elements can contain block-level as well as inline elements.
• Inline element: Inline elements are those elements, which differentiate
the part of a given text and provide it a particular function.
• These elements do not start with new line and take width as per requirement.
• The Inline elements are mostly used with other elements.
1/19/2025 Lab 1: HTML 14
Comparison between Tag, Element and Attribute
1/19/2025 Lab 1: HTML 15
HTML Headings
• HTML headings are titles or subtitles to display on a webpage.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
1/19/2025 Lab 1: HTML 16
Text Formatting
• Paragraph: <p> … </p>
• Bold: <b> … </b>
• Italic: <i> … </i>
• Underline: <u> … </u>
• Strikethrough: <del> … </del>
• Superscript: <sup> … </sup>
• Subscript: <sub> … </sub>
• Mark or highlight: <mark> … </mark>
1/19/2025 Lab 1: HTML 17
Anchor Tag
• The Anchor tag in HTML can be defined as a means to create a
hyperlink that can link your current page on which the text is being
converted to hypertext via <a> (anchor tag) to another page.
• This anchoring from one page to another is made possible by the
attribute "href", which can be abbreviated (hypertext reference).
<a href = "https://www.example.com" target = "_blank">Example</a>
• Appearance of HTML anchor tag:
• An unvisited link is displayed underlined and blue.
• A visited link displayed underlined and purple.
• An active link is underlined and red.
1/19/2025 Lab 1: HTML 18
Anchor Tag
<a href = "https://www.example.com" target = "_blank">Example</a>
• Target attribute:
• _blank: Opens the linked document in a new window or tab.
• _self: Opens the linked document in the same frame.
• _parent: Opens the linked document in the parent frame.
• _top: Opens the linked document in the full body of the window.
• Targetframe_name: Opens the linked document in a named targetframe.
1/19/2025 Lab 1: HTML 19
Link to a section in a webpage
• We can create a link to a particular section of a given webpage by
using name (deprecated, use id and title instead) attribute.
• This is a two-step process:
1. Create a link to the place where we want to reach within a webpage and
name it using <a...> tag as follows –
<h1>HTML Text Links <a id= "top"></a></h1>
2. Create a hyperlink to link the document and place where we want to reach -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
1/19/2025 Lab 1: HTML 20
HTML Table
<table border="1" cellpadding="5“ cellspacing="5">
<caption>This is the caption</caption>
<tr>
<th> </th>
<td> </td>
</tr>
</table>
• The cellspacing attribute defines space between table cells, while cellpadding
represents the distance between cell borders and the content within a cell.
• Use colspan attribute to merge two or more columns into a single column and
rowspan to merge two or more rows.
• The caption tag will serve as a title or explanation for the table and it shows up at
the top of the table.
1/19/2025 Lab 1: HTML 21
HTML Lists
• An unordered list is a collection of related items that have no special
order or sequence.
• Use type attribute for <ul> tag to specify the type of bullet and <li> to
write a point.
• By default, it is a disc.
• Following are the possible options −
• <ul type = "square">
• <ul type = "disc">
• <ul type = "circle">
1/19/2025 Lab 1: HTML 22
HTML Lists
• An ordered list puts items in a numbered list.
• This list is created by using <ol> tag.
• The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.
• Use start attribute for <ol> tag to specify the starting point of the
numbering.
• <ol type = "1"> - Default-Case Numerals.
• <ol type = "I"> - Upper-Case Numerals.
• <ol type = "i" start = "4"> - Lower-Case Numerals.
• <ol type = "A"> - Upper-Case Letters.
• <ol type = "a" start = "4"> - Lower-Case Letters.
1/19/2025 Lab 1: HTML 23
HTML Lists
• In Definition lists, entries are listed like in a dictionary or
encyclopedia.
• The definition list is the ideal way to present a glossary, list of terms,
or other name/value list.
• Definition List makes use of following three tags.
• <dl> − Defines the start of the list and </dl> defines the end of the list
• <dt> − A term
• <dd> − Term definition
1/19/2025 Lab 1: HTML 24
HTML Form
• A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc.
• The back-end application will perform required processing on the
passed data based on defined business logic inside the application.
<form action = "Script_URL" method = "GET|POST">
<input type = "text" name = "name" />
</form>
1/19/2025 Lab 1: HTML 25
HTML Form Controls
• Text Input:
• Single-line text input: <input type="text" name="name" size="50"
maxlength="50" />
• Password input: <input type = "password" name = "password" />
• Multiple-Line Text Input: <textarea rows="5" cols="50"
name="description"></textarea>
• Checkboxes: <input type="checkbox" name="maths" value="on"
checked> Maths
• Radio Box: <input type="radio" name="subject"
value="maths" checked> Maths
1/19/2025 Lab 1: HTML 26
HTML Form Controls
• Select Box: size used to present a scrolling list box and multiple to select
multiple items.
<select name="dropdown">
<option value="Maths">Maths</option>
<option value="CSE" selected >CSE</option>
</select>
• File Select boxes: <input type="file" name="fileupload"
accept="image/*" />
• Hidden Controls: Hidden form controls are used to hide data inside the
page which later on can be pushed to the server.
<input type="hidden" name="pagename" value="10" />
1/19/2025 Lab 1: HTML 27
HTML Form Controls
• Buttons:
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/logo.png" />
1/19/2025 Lab 1: HTML 28
HTML Frame
• HTML frames are used to divide the browser window into multiple
sections where each section can load a separate HTML document.
• A collection of frames in the browser window is known as a frameset.
• The window is divided into frames in a similar way the tables are
organized: into rows and columns.
• The HTML <iframe> tag specifies an inline frame. An inline frame is
used to embed another document within the current HTML
document.
1/19/2025 Lab 1: HTML 29
HTML Layout Elements
• HTML has several semantic elements that define the different parts of
a web page:
• <header> - Defines a header for a document or a section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained content
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section
• <details> - Defines additional details that the user can open and close on
demand
• <summary> - Defines a heading for the <details> element
1/19/2025 Lab 1: HTML 30
Responsive Web Design
• A responsive web design will automatically adjust for different screen
sizes and viewports.
• Responsive Web Design is about using HTML and CSS to automatically
resize, hide, shrink, or enlarge, a website, to make it look good on all
devices (desktops, tablets, and phones).
• To create a responsive website, add the following <meta> tag to all
web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1/19/2025 Lab 1: HTML 31
Reference and Resource
• W3School: https://www.w3schools.com/html/
• GeeksforGeeks: https://www.geeksforgeeks.org/html-tutorial/
• TutorialsPoint: https://www.tutorialspoint.com/html/index.htm
1/19/2025 Lab 1: HTML 32
