HTML : INTRODUCTION TO WEB DESIGN Presentation

• Introduction
• Basic Structure
• Semantic/Non-semantic
• Headings
• Paragraphs
• Attribute
• Links
• Images
• Tables
• Forms
• Meta tags

# HTML stands for HyperText Markup Language. It is used to
design web pages using a markup language.
# HTML is a markup language used by the browser to manipulate
text, images, and other content, in order to display it in the
required format. HTML was created by Tim Berners-Lee in 1991.
# HTML file is saved in .html extension

All HTML documents must start with
a document type declaration:
<!DOCTYPE html>
The HTML document itself begins
with <html> and ends with </html>.
The visible part of the HTML
document is between <body> and
</body>

Semantic Tags v/s Non Semantic Tags
• Although Browser recommends to use Semantic
Tags
but many Developers use Non-Semantic Tags
• Semantic Tags help to Improve SEO,
to rank our website in top list of Searches.

Headings in
HTML
HTML headings are
defined with the <h1>
to <h6> tags.
<h1> defines the most
important heading.
<h6> defines the least
important heading.
Each HTML heading
has a default size.

Paragraphs
in HTML
The HTML <p> element
defines a paragraph.
A paragraph always
starts on a new line,
and browsers
automatically add
some white space (a
margin) before and
after a paragraph.

Attributes in HTML
• HTML attributes are special words which provide additional
information about the elements or attributes are the modifier of the
HTML element.
• Each element or tag can have attributes, which defines the
behaviour of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and value pair.

Links in HTML
HTML links are hyperlinks.
You can click on a link and
jump to another document.
The <a> tag defines a
hyperlink, which is used to
link from one page to
another.
The most important attribute
of the <a> element is the href
attribute, which indicates the
link's destination.

Browser
OUTPUT:
*If you click ‘Instagram’ ,
then it redirect to instagram
website

Images
in HTML
The HTML <img> tag is used to
embed an image in a web page.
syntax: <img src="URL">
Links to an external image that is
hosted on another website.
Example:
src="https://www.w3schools.com/i
mages/img_girl.jpg".
Links to an image that is hosted
within the website.
Example: src="img_girl.jpg",
src="/images/img_girl.jpg"

<div> tag in HTML
The div tag is known as Division tag. The div tag is used in HTML to make
divisions of content in the web page like (text, images, header, footer,
navigation bar, etc).
Div tag has both open (<div>) and closing (</div>) tag and it is mandatory to
close the tag.
The Div is the most usable tag in web development because it helps us to
separate out data in the web page and we can create a particular section for
particular data or function in the web pages.

Browser
OUTPUT:
What is style section in the code?
We will see that in CSS topic.

Tables in HTML:
A table is a structured set of data made up of rows and columns
(tabular data).
A table allows you to quickly and easily look up values that
indicate some kind of connection between different types of
data,
for example a student and their Roll No.

HTML Lists are used to specify lists of information. All lists may
contain one or more list elements. There are three different types of
HTML lists:
• Ordered List or Numbered List (ol)
• Unordered List or Bulleted List (ul)
• Description List or Definition List (dl)
Lists in HTML:

Let’s understand <label> tag
first
The <label> HTML element represents a caption for an item in a user
interface.
The <label> tag can be used in two ways:
• Firstly, use <label> tag by providing the <input> and id attribute.
The <label> tag needs a for attribute whose value is the same as
input id.
• Alternatively, <input> tag use directly inside the <label> tag. In this
case, the for and id attributes are not needed because the
association is implicit.
• for : It refers to the input control that this label is for.

• The <meta> tag defines metadata about an HTML document. Metadata is
data (information) about data.
• <meta> tags always go inside the <head> element, and are typically used to
specify character set, page description, keywords, author of the document,
and viewport settings.
• Metadata will not be displayed on the page, but is machine parsable
• Metadata is used by browsers (how to display content or reload page),
search engines (keywords), and other web services.
• There is a method to let web designers take control over the viewport (the
user's visible area of a web page), through the <meta> tag.
META Tags:

Example
:
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Presentation">
<meta name="keywords" content="HTML, Basic, Tags">
<meta name="author" content="Surya">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

HTML : INTRODUCTION TO WEB DESIGN Presentation

More Related Content

Similar to HTML : INTRODUCTION TO WEB DESIGN Presentation (20)

Recently uploaded (20)

HTML : INTRODUCTION TO WEB DESIGN Presentation