#EngineeringPlus Online Course Series
Web Designing/Web
Technology/Web Management
ECS32106/ECS52102 Module: 02
Lecture: 01
Course Instructor
Roneeta Purkayastha
Assistant Professor
Computer Science and Engineering
[Link]@[Link]
SCHOOL OF ENGINEERING & TECHNOLOGY | ADAMAS UNIVERSITY | KOLKATA
Index
• Introduction
• HTML elements
• HTML attributes
• HTML tags
• HTML images
• Example
• References
01-02-2021 Web Designing/ Web Technology 2
Introduction
• HTML is the main markup language for describing the structure of web
pages.
• HTML stands for HyperText Markup Language.
• Hypertext is text displayed on a computer or other electronic device with
references to other text that the user can immediately access, usually by a
mouse click or key press.
• Apart from text, hypertext may contain tables, lists, forms, images, and other
presentational elements. It is an easy-to-use and flexible format to share
information over the Internet.
• Markup languages use sets of markup tags to characterize text elements
within a document, which gives instructions to the web browsers on how the
document should appear.
01-02-2021 Web Designing/ Web Technology 3
HTML benefits
• We can publish documents online with text, images, lists, tables, etc.
• We can access web resources such as images, videos or other HTML
document via hyperlinks.
• We can create forms to collect user inputs like name, e-mail address,
comments, etc.
• We can include images, videos, sound clips, flash movies, applications and
other HTML documents directly inside an HTML document.
01-02-2021 Web Designing/ Web Technology 4
Creating Your First HTML Document
• We will create an HTML file that displays "Hello world" message in the web
browser.
• Step 1: Creating the HTML file
Open up your computer's plain text editor and create a new file.
• Step 2: Type some HTML code
Start with an empty window and type the following code:
<!DOCTYPE html>
<html lang="en">
<head> <title>A simple HTML document</title> </head>
<body>
<p>Hello World!<p>
</body>
</html>
01-02-2021 Web Designing/ Web Technology 5
Creating Your First HTML Document
• Step 3: Saving the file
Now save the file on your desktop as "myfi[Link] ".
• To open the file in a browser. Navigate to your file then double click on it. It
will open in your default Web browser. If it does not, open your browser and
drag the file to it.
01-02-2021 Web Designing/ Web Technology 6
Creating Your First HTML Document
<!DOCTYPE html> Explanation
<html lang="en"> • The first line <!DOCTYPE html> is
the document type declaration. It
<head> <title>A simple HTML instructs the web browser that this
document</title> </head> document is an HTML5 document. It is
case-insensitive.
<body>
• The <head> element is a container for
<p>Hello World!<p> the tags that provides information
</body> about the document, for
example, <title> tag defines the title of
</html> the document.
• The <body> element contains the
document's actual content (paragraphs,
links, images, tables, and so on) that is
rendered in the web browser and
displayed to the user.
01-02-2021 Web Designing/ Web Technology 7
What is an HTML tag?
• HTML is written in the form of HTML elements consisting of markup tags.
• Every markup tag is composed of a keyword, surrounded by angle brackets,
such as <html>, <head>, <body>, <title>, <p>, and so on.
• HTML tags normally come in pairs like <html> and </html>.
• The first tag in a pair is often called the opening tag (or start tag), and the
second tag is called the closing tag (or end tag).
01-02-2021 Web Designing/ Web Technology 8
HTML tag
• In between the start and end tags you can place appropriate contents.
• For example, a paragraph, which is represented by the p element, would be
written as:
<p>This is a paragraph.</p>
<!-- Paragraph with nested element -->
<p> This is <b>another</b> paragraph. </p>
01-02-2021 Web Designing/ Web Technology 9
HTML tag
01-02-2021 Web Designing/ Web Technology 10
HTML Images
• The <img> tag is used to insert images in the HTML documents.
• It is an empty element and contains attributes only.
• The syntax of the <img> tag can be given with:
<img src="url" alt="some_text">
01-02-2021 Web Designing/ Web Technology 11
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Placing Images in HTML Documents</title>
</head>
<body>
<img src="/examples/images/[Link]" alt=“A picture">
<img src="/examples/images/[Link]" alt=“B picture">
<img src="/examples/images/[Link]" alt=“C picture">
</body>
</html>
01-02-2021 Web Designing/ Web Technology 12
References
• Web Technologies, Uttam K. Roy, Oxford University Press
• Web Technology & Design, [Link], New Age International Publishers
01-02-2021 Web Designing/ Web Technology 13
