Scribd
Upload
2 views

_Lecture 02_HTML Basics1

HTML (HyperText Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and display of content. It is easy to learn and can be written using simple text editors. The document outlines the basic structure of HTML documents, examples of HTML elements, and attributes, as well as the history and usage of HTML.

Uploaded by

ahmeddhamed179
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

_Lecture 02_HTML Basics1

HTML (HyperText Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and display of content. It is easy to learn and can be written using simple text editors. The document outlines the basic structure of HTML documents, examples of HTML elements, and attributes, as well as the history and usage of HTML.

Uploaded by

ahmeddhamed179
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 74

HTML: HyperText Markup Language

• HTML is the standard markup language for Web pages.


• With HTML you can create your own Website.
• HTML is easy to learn.

Page 1 of 3
Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph. </p>
</body>
</html>

Page 2 of 3
• HTML Examples
• HTML Exercises
• HTML Quizzes and Exams

Page 3 of 3
Introduction to HTML

• HTML is the standard markup language for creating


Web pages.

• HTML: HyperText Markup Language


• Not a programming Language
• A language to Design and develop web pages

Page 1 of 11
What is 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
• 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.

Page 2 of 11
Example: 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>
Page 3 of 11
• 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
(shown in the browser's title bar)
• 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
Page 4 of 11
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>

Page 5 of 11
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

• Some HTML elements have no content (<br>


element). Called empty elements.
• Empty elements do not have an end tag.
Page 6 of 11
Web Browsers

• The purpose of a web browser (Chrome, Edge,


Firefox, Safari) is to read HTML documents and
display them correctly.
• A browser does not display the HTML tags, but uses
them to determine how to display the document:

Page 7 of 11
HTML Page Structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Page 8 of 11
• The content inside the <body> section 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.

Page 9 of 11
HTML History:

• Since the early days of the World Wide Web, there


have been many versions of HTML.

• This course follows the latest HTML5 standard.

Page 10 of 11
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Page 11 of 11
HTML Editors

• Web pages can be created and modified by using


professional HTML editors.

• However, for learning HTML, you can use a simple


text editor like Notepad or TextEdit.

• Follow the steps below to create your first web page


with any text editor.

Page 1 of 6
Step 1: Open the text editor (Notepad)

Step 2: Write Some HTML


Write or copy the following HTML code:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Page 2 of 6
Page 3 of 6
Step 3: Save the HTML Page
Name the file "index.htm" and set the encoding to
UTF-8 (which is the preferred encoding for HTML files).

You can use either .htm or .html as file extension. There


is no difference; it is up to you.

Page 4 of 6
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser
"Open or Open with"). The result will look like this:

Page 5 of 6
On-line HTML Editors:

https://onecompiler.com/html

Page 6 of 6
HTML Basics

This part shows some basic HTML examples.

HTML Documents
• 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>.

Page 1 of 14
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Page 2 of 14
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:
<!DOCTYPE html>
Page 3 of 14
HTML Headings

• HTML headings are defined with the <h1> to <h6>


tags.
• <h1> defines the most important heading. <h6>
defines the least important heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Page 4 of 14
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Page 5 of 14
HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

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

Page 6 of 14
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Page 7 of 14
HTML Links
HTML links are defined with the <a> tag:

Example:
<a href="https://www.google.com">This is a
link</a>

Page 8 of 14
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.google.com">This is a
link</a>
</body>
</html>

The link's destination is specified in the href attribute.


Attributes are used to provide additional information
about HTML elements.
Page 9 of 14
HTML Images

HTML images are defined with the <img> tag.


The source file (src), alternative text (alt), width, and
height are provided as attributes:

Example
<img src="man.jpg" alt="human.com" width="104"
height="142">

Page 10 of 14
<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="img.jpg" alt="google.com" width="104"


height="142">

</body>
</html>

Page 11 of 14
How to View HTML Source

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.

Page 12 of 14
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.

Page 13 of 14
Exercise:

What is a correct HTML markup for the document


type declaration?
a) <!DOCTYPE html>
b) DOCTYPE html
c) --DOCTYPE html

Correct Answer: a

Page 14 of 14
HTML Elements

An HTML element is defined by a start tag, some


content, and an end tag.

HTML Elements
The HTML element is everything from the start tag to
the end tag:
<tagname>Content goes here...</tagname>

Page 1 of 11
Examples of some HTML elements:
<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

Some HTML elements have no content (like the line


break <br> element). These elements are called empty
elements. Empty elements do not have an end tag.

Page 2 of 11
Nested HTML Elements
HTML elements can be nested (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>):
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Page 3 of 11
Example Explained:

• The <html> element is the root element, and it


defines the whole HTML document.
• It has a start tag <html> and an end tag </html>.
• Then, inside the <html> element there is a <body>
element: <body>
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>

Page 4 of 11
</body>

• The <body> element defines the document's body.


• It has a start tag <body> and an end tag </body>.
• Then, inside the <body> element there are two other
elements: <h1> and <p>.

<h1>My First Heading</h1>


<p>My first paragraph.</p>

<h1> element defines a heading.


It has a start tag <h1> and an end tag </h1>:
<h1>My First Heading</h1>
Page 5 of 11
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.

<p>My first paragraph.</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!

Page 6 of 11
Example:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Page 7 of 11
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:

Example:
<p>This is a <br> paragraph with a line break.</p>

Page 8 of 11
<!DOCTYPE html>
<html>
<body>

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

Page 9 of 11
HTML is Not Case Sensitive

• HTML tags are not case sensitive: <P> means the


same as <p>.
• The HTML standard does not require lowercase tags,
but W3C recommends lowercase in HTML, and
demands lowercase for stricter document types like
XHTML.
• Always use lowercase tag names.

Page 10 of 11
HTML Tag Reference

W3C tag reference contains additional information about


these tags and their attributes.

Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings

Page 11 of 11
HTML Attributes

HTML attributes provide additional information about


HTML elements.

Page 1 of 29
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"

Page 2 of 29
The href Attribute:

The <a> tag defines a hyperlink. The href attribute


specifies the URL of the page the link goes to.

Example:

<a href="https://www.google.com">Visit Google Search</a>

Page 3 of 29
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The
link address is specified in the href attribute:</p>

<a href="https://www.google.com">Visit Google


Search</a>

</body>
</html>

Page 4 of 29
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:

Example:

<img src="img.jpg">

Page 5 of 29
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag,
and the filename of the image source is specified
in the src attribute:</p>

<img src="img.jpg" width="500" height="600">

</body>
</html>

Page 6 of 29
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.univ.com/images/img.jpg".
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.jpg".

Page 7 of 29
If the URL begins with a slash, it will be relative to
the domain.

Example:

src="/images/img.jpg".

It is almost always best to use relative URLs.

Page 8 of 29
The width and height Attributes:
The <img> tag should also contain the width and height
attributes, which specify the width and height of the
image (in pixels).

Example:

<img src="img.jpg" width="500" height="600">

Page 9 of 29
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>The width and height attributes of the img tag,
defines the width and height of the image:</p>
<img src="img.jpg" width="500" height="600">
</body>
</html>

Page 10 of 29
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.

Example:

<img src="img.jpg" alt="Man with a jacket">

Page 11 of 29
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image
content, so users who cannot see the image get an
understanding of what the image contains:</p>
<img src="img.jpg" alt="Man with a jacket"
width="500" height="600">
</body>
</html>

Page 12 of 29
Example

if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Man with a


jacket">

Page 13 of 29
<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="Man with a jacket">

<p>If we try to display an image that does not exist,


the value of the alt attribute will be displayed instead.
</p>

</body>
</html>
Page 14 of 29
The style Attribute:

The style attribute is used to add styles to an element,


such as color, font, size, and more.

Example:

<p style="color:red;">This is a red paragraph.</p>

Page 15 of 29
<!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>

Page 16 of 29
The lang Attribute:
You should always include the lang attribute inside the
<html> tag, to declare the language of the Web page.
This is meant to assist search engines and browsers.

Example specifies English as the language:


<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Page 17 of 29
Country codes can also be added to the language code
in the lang attribute. So, the first two characters define
the language of the HTML page, and the last two
characters define the country.

Example specifies English as the language and United


States as the country:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Page 18 of 29
The title Attribute:

The title attribute defines some extra information about


an element. The value of the title attribute will be
displayed as a tooltip when you mouse over the
element.

Example:

<p title="I'm a tooltip">This is a paragraph.</p>

Page 19 of 29
<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to


display the title attribute as a tooltip.</p>

</body>
</html>

Page 20 of 29
• It is recommended to 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.
• However, W3C recommends lowercase attributes in
HTML, and demands lowercase attributes for stricter
document types like XHTML.

Page 21 of 29
• It is recommended to always Quote attribute values.
• The HTML standard does not require quotes around
attribute values.
• However, W3C recommends quotes in HTML, and
demands quotes for stricter document types like
XHTML.

Page 22 of 29
Good Style:
<a href=" https://www.google.com/html/ ">Visit Google
Search</a>
Bad Style:
<a href= https://www.google.com/html/ >Visit Google
Search</a>

Sometimes you have to use quotes. This example will


not display the title attribute correctly, because it contains
a space. You cannot omit quotes around an attribute
value if the value contains spaces.
Example: <p title=About Alex Univ>
Page 23 of 29
<!DOCTYPE html>
<html>
<body>
<h1>About Alex Univ</h1>
<p title= About Alex Univ>
You cannot omit quotes around an attribute value
if the value contains spaces.
</p>
<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from
the title.
</b></p>
</body>
</html>
Page 24 of 29
It is recommended to always use quotes around attribute
values.

Page 25 of 29
Single or Double Quotes?
• Double quotes around attribute values are the most
common in HTML, but single quotes can also be
used.
• In some situations, when the attribute value itself
contains double quotes, it is necessary to use single
quotes.

<p title='John "ShotGun" Nelson'>


Or vice versa:
<p title="John 'ShotGun' Nelson">

Page 26 of 29
<!DOCTYPE html>
<html>
<body>
<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself
contains double quotes, it is necessary to use single
quotes:</p>
<p>Move your mouse over the paragraphs below to
see the effect:</p>
<p title='John "ShotGun" Nelson'>John with double
quotes</p>
<p title="John 'ShotGun' Nelson">John with single
quotes</p>
</body>
</html>
Page 27 of 29
Summary:
•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
•The lang attribute of the <html> tag declares the language
of the Web page
•The title attribute defines some extra information about an
element
Page 28 of 29
Exercise:

Which of the following is a correct syntax for using an


HTML attribute?
a. <img src='img_girl.jpg'>
b. <img src('img_girl.jpg')>
c. <img src:'img_girl.jpg'>

Correct Answer: a

Page 29 of 29

You might also like