Module #1 - Introduction To HTML

focus
introduction to HTML
What is HTML?
• with HTML you can create your own
Website
What is HTML?
HTML stands for
• Hyper Text Markup Language

What is HTML?
• HTML is the standard markup language
for creating Web pages
What is HTML?
• HTML describes the structure and
design of a Web page
What is HTML?
• HTML consists of a series of elements
What is HTML?
• HTML elements tell the browser how to
display the content
A Simple HTML Document
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
Example Explained
• 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
• The <h1> element defines a large heading

• The <p> element defines a paragraph
HTML Tags
• HTML tags are used to mark-up or
organize HTML elements
• HTML tags are surrounded by the two

characters < and >
HTML Tags
• The surrounding characters are called
angle brackets
• HTML tags normally come in pairs like

<i> and </i>
HTML Tags
• The first tag in a pair is the start tag,
the second tag is the end tag
• The text between the start and end

tags is the element content
• HTML tags are not case sensitive, <b>

means the same as <B>
Paired Tag
• begin with an opening tag and end with a
matching closing tag
• defines the structure of the content between

them
Example:
<p>
This is a paragraph. Everything between
these two tags is part of this paragraph. </p>
Standalone Tag
• don't have end tags
• tags that are stand-alone structure, and

don't need to contain content to be
meaningful
this main ones are:

<br> or <br />
<img>
<hr> or <hr />
<meta>
ANATOMY OF HTML TAG
What is an HTML Element?
• An HTML element is defined by a start
tag, some content, and an end tag:
• The HTML element is everything from
the start tag to the end tag:
Web Browsers
• The purpose of a web browser
(Chrome, Edge, Firefox, Safari) is to
read HTML documents and display
them correctly.
to be continued…
introduction to HTML
• A browser does not display the HTML
tags, but uses them to determine how
to display the document:
HTML Page Structure
Note:
• The content inside the <body> section
(the white area above) will be
displayed in a browser.
• The content inside the <title> element

will be shown in the browser's title bar
or in the page's tab.
HTML History
• Since the early days of the World Wide
Web, there have been many versions of
HTML:
Pros and Cons of HTML
• Like most things, HTML comes with a
handful of strengths and limitations.
Pros:
• A widely used language with a lot of
resources and a huge community
behind.
• Runs natively in every web browser.
• Comes with a flat learning curve.
• Open-source and completely free.

Pros:
• Clean and consistent markup.
• The official web standards are

maintained by the World Wide Web
Consortium (W3C).
• Easily integrable with backend

languages such as PHP and Node.js.
Cons:
• Mostly used for static web pages. For
dynamic functionality, you may need to
use JavaScript or a backend language
such as PHP.
• It does not allow the user to implement

logic. As a result, all web pages need to
be created separately, even if they use
the same elements, e.g. headers and
footers.
Cons:
• Some browsers adopt new features
slowly.
• Browser behavior is sometimes hard to

predict (e.g. older browsers don’t
always render newer tags).
How are HTML, CSS, and
JavaScript related?
• While HTML is a powerful language, it
isn’t enough to build a professional
and fully responsive website.
• We can only use it to add text elements

and create the structure of the
content.
• CSS is responsible for styling’s such as
background, colors, layouts, spacing,
and animations.
• JavaScript lets you add dynamic

functionality such as sliders, pop-ups,
and photo galleries.
• Think of HTML as a naked person,
• CSS as the clothing,
• and JavaScript as movements and
manner.
HTML Editors
• A simple text editor is all you need to
learn HTML.
• Web pages can be created and

modified by using professional HTML
editors.
How to create a Webpage?
• Start a Notepad.
• Type in the following text
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic webpage.
<b>This text will be displayed in bold</b>
</body>
</html>
• Save the file as firstpage.html.

• Double click the saved file, the browser will display the page.
HTML Basic Examples
HTML Documents
• The HTML document itself begins
with <html> and ends with </html>.
• The visible part of the HTML document
is between <body> and </body>.
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the
document type, and helps browsers to display
web pages correctly.
• It must only appear once, at the top of the page

(before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:

HTML Headings
• HTML headings are defined with
the <h1> to <h6> tags.
• <h1> defines the most important

heading. <h6> defines the least
important heading:
HTML Paragraphs
• HTML paragraphs are defined with
the <p> tag:
HTML Links
• HTML links are defined with
the <a> tag:
• The link's destination is specified in

the href attribute.
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text

(alt), width, and height are provided as
attributes:
How to View HTML Source?
• Right-click in an HTML page and select
"View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in
other browsers.
• This will open a window containing the

HTML source code of the page.
Nested HTML Elements
• HTML elements can be nested (this
means that elements can contain other
elements).
• All HTML documents consist of nested

HTML elements.
• The following example contains four
HTML elements
(<html>, <body>, <h1> and <p>):
Never Skip the End Tag
• Some HTML elements will display correctly,
even if you forget the end tag:
However, never rely on

this! Unexpected results
and errors may occur if
you forget the end tag!
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:
HTML Attributes
• HTML attributes provide additional
information about HTML elements.
HTML Attributes
• All HTML elements can have attributes
• Attributes are always specified in the

start tag
• Attributes usually come in name/value

pairs like: name="value"
The href Attribute
• The <a> tag defines a hyperlink.
The href attribute specifies the URL of
the page the link goes to:
The src Attribute
• 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:
There are two ways to specify
the URL in the src attribute:
• Absolute URL
• Relative URL
Absolute URL
• Links to an external image that is hosted on
another website.
Example:
src="https://www.w3schools.com/images/img_gi
rl.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.
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 width and height Attributes
• The <img> tag should also contain
the width and height attributes, which
specifies the width and height of the
image (in pixels):
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 slow
connection, or an error in the src attribute,
or if the user uses a screen reader.
The style Attribute
• The style attribute is used to add styles
to an element, such as color, font, size,
and more.
We Suggest: Always Use
Lowercase Attributes
• The HTML standard does not require
lowercase attribute names.
• The title attribute (and all other

attributes) can be written with
uppercase or lowercase
like title or TITLE.
References
• https://www.w3schools.com/html/default.asp
• HTML1 - Basic HTML Tutorial HTML stands for
Hyper Text -
https://www.coursehero.com/file/21236266/
HTML1/
• What is HTML? The Basics of Hypertext
Markup Language Explained -
https://www.hostinger.ph/tutorials/what-is-
html
END of the SLIDES

Module #1 - Introduction To HTML

Uploaded by

Copyright:

Available Formats

Module #1 - Introduction To HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module #1 - Introduction To HTML

Uploaded by

Copyright:

Available Formats

focus

• Hyper Text Markup Language

• The <html> element is the root element

• The <head> element contains meta

• The <body> element defines the

• The <h1> element defines a large heading

• HTML tags are surrounded by the two

• HTML tags normally come in pairs like

• The text between the start and end

• HTML tags are not case sensitive, <b>

• defines the structure of the content between

• tags that are stand-alone structure, and

this main ones are:

• The content inside the <title> element

• Runs natively in every web browser.

• Comes with a flat learning curve.

• Open-source and completely free.

• The official web standards are

• Easily integrable with backend

• It does not allow the user to implement

• Browser behavior is sometimes hard to

• We can only use it to add text elements

• JavaScript lets you add dynamic

• Web pages can be created and

• Type in the following text

• Save the file as firstpage.html.

• It must only appear once, at the top of the page

• The <!DOCTYPE> declaration is not case sensitive.

• The <!DOCTYPE> declaration for HTML5 is:

• <h1> defines the most important

• The link's destination is specified in

• The source file (src), alternative text

• This will open a window containing the

• All HTML documents consist of nested

However, never rely on

• The <br> tag defines a line break, and is

• Attributes are always specified in the

• Attributes usually come in name/value

Notes: External images might be under

• Here, the URL does not include the domain name.

Example: src="img_girl.jpg". If the URL begins with

Tip: It is almost always best to use relative URLs.

• The title attribute (and all other

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.