Day 2 - Web_Development [basic HTML tags and their functionalities].pptx

Web Development
DAY 02 [03-09-2024]
o Introduction to HTML: Structure and content of web pages.
o Learning basic HTML tags and their functionalities.
o Hands-on exercises: Creating simple HTML documents.

Introduction to HTML
 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 and are not case sensitive
 HTML elements tell the browser how to display the content

A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Example Explained
 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

What is an HTML Element?
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

Writing HTML code in a Text Editor
Step 1: Open Notepad
Step 2: Write Some HTML Code
Step 3: Save the HTML Page with .html extension
Step 4: View the HTML Page in a Browser

HTML Headings
<h1>This is heading 1</h1>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
<p>This is a <br> paragraph with a line break.</p>

HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.com/html/html_intro.asp">This is a
link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to a slow connection, or an error in the src
attribute, or if the user uses a screen reader.
<img src="img_girl.jpg" alt="Girl with a jacket">

How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This
will open a new tab containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" to see what elements are
made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-
fly in the Elements or Styles panel that opens.

HTML Attributes
•All HTML elements can have attributes
•Attributes provide additional information about elements
•Attributes are always specified in the start tag
•Attributes usually come in name/value pairs like: name="value“
•The <img> tag is used to embed an image in an HTML page. The src
attribute specifies the path to the image to be displayed:
<img src="img_girl.jpg">
The style attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>

There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may
be in violation of copyright laws. In addition, you cannot control external images; it can suddenly
be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current
page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the
domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The HTML <pre> Element
The <pre> element in HTML displays the text as preformatted. It does not change the format of the text.
<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>

HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.

<p>This is a paragraph.</p>

Summary so far
 All HTML elements can have attributes
 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be displayed
 The width and height attributes of <img> provide size information for images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color, font, size, and more

Exercises and Homework
Create a basic web page having the following elements:
Headings,
Paragraph,
Links,
Pre,
Comments,
Etc.

Day 2 - Web_Development [basic HTML tags and their functionalities].pptx

More Related Content

Similar to Day 2 - Web_Development [basic HTML tags and their functionalities].pptx

Recently uploaded

Day 2 - Web_Development [basic HTML tags and their functionalities].pptx