Scribd
Upload
2 views

Lab 1 HTML (1)

This document is a lab guide for CSE 324 on HTML, detailing its objectives, features, and basic structure. It covers HTML tags, elements, attributes, and various components like lists, tables, and forms. Additionally, it discusses responsive web design and provides references for further learning.

Uploaded by

msrteam007
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lab 1 HTML (1)

This document is a lab guide for CSE 324 on HTML, detailing its objectives, features, and basic structure. It covers HTML tags, elements, attributes, and various components like lists, tables, and forms. Additionally, it discusses responsive web design and provides references for further learning.

Uploaded by

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

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

You might also like