Mehedi Hasan Imran, Lecturer, Department of Information and Communication Engineering
4/19/2024 2
Course Outcome (CO) & mapping

What is HTML?
4/19/2024 3
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

4/19/2024 4
HTML Page Structure

A Simple HTML Document
4/19/2024 5
<!DOCTYPE html>
<html>
<head>
<title>ICE</title>
</head>
<body>
<h1>Information and Communication Engineering</h1>
<p>BAUET</p>
</body>
</html>

4/19/2024 6
•The <!DOCTYPE html> declaration defines that this document is an HTML5 document
•The <html> element is the root element of an HTML page
•The <head> element contains meta information about the HTML page
•The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the
page's tab)
•The <body> element defines the document's body, and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
•The <h1> element defines a large heading
•The <p> element defines a paragraph
•Element consists of three part 1. Start tag 2. End Tag and 3. Content
•Element can be nested <p> This is a <b>man<b> <p>.
A Simple HTML Document

What is an HTML Element?
4/19/2024 7
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

4/19/2024 8
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is heading 1</h1>
</body>
</html>

4/19/2024 9
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. Bangladesh Army
University of Engineering and
Technology</p>
<hr>
<p>This is another paragraph.</p>
</body>
</html>

4/19/2024 10
HTML Formatting Elements
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text (mainly use for the blind people). Sound tone different.
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

4/19/2024 11
<!DOCTYPE html>
<html>
<body>
<p>Web Programming</p>
<p><strong>Internet and Web Programming</strong></p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>

4/19/2024 12
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Math Formula Implementation: <br>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></p>
</body>
</html>

4/19/2024 13
In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.
<!DOCTYPE html>
<html>
<body>
<p>Bangladesh Army University of Engineering and Technology</p>
<p> <b> <q>Information and Communication Engineering</q></b></p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in
nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that
protect communities, wildlife, and the places in which they live.
</blockquote>
<p>The <abbr title="Information and Communication Engineering">ICE</abbr> was founded on 6 March,2016.</p>
<address>
Mehedi Hasan Imran<br>
Hamdah, Jhenaidah-7300<br>
</address>
</body>
</html>

4/19/2024 14
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an
element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>

4/19/2024 15
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line
breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>

4/19/2024 16
Background Color
The background-color property defines the background color for an HTML element.
<!DOCTYPE html>
<html>
<!–-This is comment section-->
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

4/19/2024 17
HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
<!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override
(bdo), the next line will be written from right to left
(rtl):</p>
<bdo dir="rtl">Information and Communication
Engineering</bdo>
</body>
</html>

4/19/2024 18
HTML Link
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href="list.html" target="_blank">Go To New File</a>
</body>
</html>
Value Description
_blank Opens the linked document in a new window or tab
_self
Opens the linked document in the same frame as it was clicked
(this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in the named iframe

4/19/2024 19
HTML Image
<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src=“BAUET.jpg" alt=“BAUET Image" width="500" height="600">
</body>
</html>

4/19/2024 20
HTML Table
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
padding: 15px;
text-align: center;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Department</th>
<th>Batch</th>
</tr>
<tr>
<td>Shuvo</td>
<td>ICE</td>
<td>1st</td>
</tr>
<tr>
<td>Arush</td>
<td>IT</td>
<td>5th</td>
</tr>
<tr>
<td>Zarib</td>
<td>ICT</td>
<td>3rd</td>
</tr>
</table>
</body>
</html>

4/19/2024 21
HTML Table
<table style="width:100%">
<tr>
<th>Name</th>
<th>Department</th>
<th>Batch</th>
</tr>
<tr>
<td rowspan="2">Arush</td>
<td>ICE</td>
<td>1st</td>
</tr>
<tr>
<td>IT</td>
<td>5th</td>
</tr>
<tr>
<td>Zarib</td>
<td colspan="2">ICT</td>
</tr>
</table>

4/19/2024 22
HTML List
<!DOCTYPE html>
<html lang="en">
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Black Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

4/19/2024 23
HTML List
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

4/19/2024 24
HTML Block and Inline Elements
<!DOCTYPE html>
<html>
<body>
<p style="border: 3px solid blue">Welcome To BAUET</p>
<div style="border: 3px solid green">Welcome To ICE</div>
</body>
</html>
Here are the block-level elements in HTML:
<address> <article> <aside> <blockquote> <canvas> <dd>
<div> <dl> <dt> <fieldset> <figcaption> <figure> <footer>
<form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript>
<ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before
and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

4/19/2024 25
HTML Block and Inline Elements
An inline element does not start on a new line. An inline element only takes up as much width as necessary.
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 3px solid
black">Hello World</span> element inside a paragraph.</p>
</body>
</html>
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small> <span> <strong> <sub> <sup>
<textarea> <time> <tt> <var>
Here are the inline elements in HTML:

4/19/2024 26
HTML Iframes
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<iframe src="https://bauet.ac.bd/ice/" height="200"
width="400" title="Iframe Example"></iframe>
</body>
</html>
An HTML iframe is used to display a web page within a web page.

4/19/2024 27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
</head> <body>
<h2 >An Unordered HTML List</h2>
<ul style="font-size: 2vw;">
<li>Black Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2 >An Ordered HTML List</h2>
<ol type="i" style="font-size: 2vw;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> </body> </html>
HTML Responsive

4/19/2024 28
Thank You

This slides helps a lot to learn about html tags.

More Related Content

Similar to This slides helps a lot to learn about html tags. (20)

Recently uploaded (20)

This slides helps a lot to learn about html tags.