Scribd
Upload
27 views74 pages

HTML

Uploaded by

ICT World
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views74 pages

HTML

Uploaded by

ICT World
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 74

HTML

Programming
Content
 HTML Introduction  HTML Links  HTML Head
 HTML Editors  HTML Images  HTML Layout
 HTML Basic  HTML Favicon  HTML Responsive
 HTML Elements  HTML Page Title  HTML Computercode
 HTML Attributes  HTML Tables  HTML Semantics
 HTML Headings  HTML Lists  HTML Style Guide
 HTML Paragraphs  HTML Block & Inline  HTML Entities
 HTML Styles  HTML Div  HTML Symbols
 HTML Formatting  HTML Classes  HTML Emojis
 HTML Quotations  HTML Id  HTML Charsets
 HTML Comments  HTML Iframes  HTML URL Encode
 HTML Colors  HTML JavaScript  HTML vs. XHTML
 HTML CSS  HTML File Paths
Content
 HTML Forms  HTML Video  HTML Editor
 HTML Forms  HTML Audio  HTML Quiz
 HTML Form Attributes  HTML Plug-ins  HTML Exercises
 HTML Form Elements  HTML YouTube  HTML Website
 HTML Input Types  HTML Interview Prep
 HTML APIs
 HTML Input Attributes  HTML Bootcamp
 HTML Geolocation
 Input Form Attributes  HTML Certificate
 HTML Drag/Drop
 HTML Summary
 HTML Graphics  HTML Web Storage
 HTML Accessibility
 HTML Canvas  HTML Web Workers
 HTML SVG  HTML SSE  HTML References
 HTML Tag List
 HTML Media  HTML Examples
 HTML Examples
 HTML Media
Content
 HTML Attributes
 HTML Global Attributes
 HTML Browser Support
 HTML Events
 HTML Colors
 HTML Canvas
 HTML Audio/Video
 HTML Doctypes
 HTML Character Sets
 HTML URL Encode
 HTML Lang Codes
 HTTP Messages
 HTTP Methods
HTML
Introduction
HTML PROGRAMMING
HTML
• HTML is the standard markup language for
creating Web pages.
• Hypertext Markup Language is the
standard markup language for documents
designed to be displayed in a web browser.
It defines the content and structure of web
content. It is often assisted by technologies
such as Cascading Style Sheets and
scripting languages such as JavaScript.
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.
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
• 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)
Example
Explained
• 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


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:
Web Browsers
HTML Page Structure
Year Version
1989 Tim Berners-Lee
invented www
1991 Tim Berners-Lee
HTML invented HTML
1993 Dave Raggett drafted
History HTML+
1995 HTML Working Group
defined HTML 2.0
1997 W3C
Recommendation:
HTML 3.2
2012 WHATWG HTML5 Livi
ng Standard
HTML 2014 W3C Recommendatio
n: HTML5
2016 W3C Candidate
History Recommendation:
HTML 5.1
2017 W3C Recommendatio
n:
2017 W3CHTML5.1 2nd Editi
Recommendatio
on
n: HTML5.2
HTML Editors
HTML PROGRAMMING
Learn HTML Using
Notepad or TextEdit
• Web pages can be created and modified
by using professional HTML editors.
• However, for learning HTML we
recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
• We believe that using a simple text
editor is a good way to learn HTML.
• Follow the steps below to create your
first web page with Notepad or
TextEdit.
Step 1: Open
Notepad (PC)
• Windows 8 or later:
• Open the Start Screen (the
window symbol at the bottom left
on your screen). Type Notepad.
• Windows 7 or earlier:
• Open Start > Programs >
Accessories > Notepad
Step 1: Open
TextEdit (Mac)
• Open Finder > Applications > TextEdit
• Also change some preferences to get the
application to save files correctly. In
Preferences > Format > choose "Plain Text"
• Then under "Open and Save", check the box
that says "Display HTML files as HTML code
instead of formatted text".
• Then open a new document to place the
code.
Step 2: Write Some HTML
Step 2: Write Some HTML
Step 3: Save the HTML Page
• Save the file on your computer. Select File
> Save as in the Notepad menu.
• Name the file "index.htm" and set the
encoding to UTF-8 (which is the preferred
encoding for HTML files).
Step 4: View the HTML Page in Your
Browser
• Open the saved HTML file in your favorite
browser (double click on the file, or right-
click - and choose "Open with").
• The result will look much like this:
HTML Basic 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>.
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>
HTML Headings
• 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>
HTML
Paragraphs
• HTML paragraphs are defined
with the <p> tag:
• Example
• <p>This is a paragraph.</p>
• <p>This is another
paragraph.</p>
HTML Links
• HTML links are defined with the <a>
tag:
• Example
• <a href="www.netflix.com">This is the
link of Netflix </a>
• <a href="www.youtube.com">This is the
link of Youtube </a>
• <a href="www.Instagram.com">This is
the link of Instagram </a>
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=“icon.jpg" alt=“Youtube.com"
width="104" height="142">
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.
HTML Elements
HTML Elements
• 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


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>):
Example
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:
Example
Explained
• 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>:
Example
Explained
• The <h1> element defines a
heading.

• It has a start tag <h1> and an


end tag </h1>:
Example
Explained
• The <p> element defines a
paragraph.

• It has a start tag <p> and an


end tag </p>:
Never Skip the End Tag
• Some HTML elements will display
correctly, even 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:
• Example
• <p>This is a <br> paragraph with a
line break.</p>
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.
Summery
• HTML (HyperText Markup Language) is the foundation of
web development, used to create the structure and content
of web pages. It uses tags to format elements like text,
images, links, and multimedia to make the content
readable and interactive in browsers. You can write HTML
code using any text editor, but specialized HTML editors
like VS Code or Sublime Text offer features such as syntax
highlighting and autocompletion to make the coding
process smoother.
• An HTML document is made up of a basic structure, starting
with <!DOCTYPE html> and followed by the <html> tag, which
contains a <head> section for metadata and a <body> section
for visible content. HTML elements, such as <h1> for headings
and <p> for paragraphs, are the essential building blocks of a
webpage. These elements can also have attributes, like src for
images or href for links, providing additional functionality.
Understanding HTML basics and elements is crucial for
building well-structured and interactive web pages.
Exercices
Activity 1: Short Answer Questions

1. What does HTML stand for?


2. What is the purpose of the <head> section in
an HTML document?
3. Name two common HTML elements used to
structure text.
4. What is the difference between <h1> and
<h6> tags?
5. How do you create a hyperlink in HTML?
Activity 2: Detailed Questions

1. Describe the basic structure of


an HTML document.
2. What is the purpose of the `<!
DOCTYPE html>` declaration?
3. Explain how to add an image to
an HTML page. Include the required
attributes.
6. How do you specify the title of a webpage that appears in
the browser's title bar or tab?
7. Define an HTML attribute and explain its purpose with an
example.
8. How can you add a line break in HTML without creating a
new paragraph?
9. What is the importance of the `<a>` tag in HTML? How is
it used?
10. Explain how HTML headings are structured and why
they are important.
Activity 3: Multiple Choice
Questions
1.) What is the correct way to start an
HTML document?
a) <html>
b) <!DOCTYPE html>
c) <head>
d) <body>
2.) Which tag is used to create a
paragraph in HTML?
a) <p>
b) <h1>
c) <br>
d) <div>
3.) What does the src attribute in the
<img> tag define?
a) Image size
b) Image source file
c) Image alternative text
d) Image format
4.) How do you create a hyperlink?
a) <link>
b) <a href="URL">
c) <img src="URL">
d) <url>
5.) Which of the following is not a
heading tag in HTML?
a) <h1>
b) <h4>
c) <h7>
d) <h6>
6.) Which tag is used for the largest
heading?
a) <h1>
b) <h3>
c) <h6>
d) <p>
7.) What does the alt attribute in the
<img> tag do?
a) Adds a title
b) Describes the image
c) Changes image size
d) Sets the image format
8.) What is the purpose of the <title>
element?
a) Defines the page title shown in the
browser tab
b) Defines the main heading of the page
c) Adds metadata to the document
d) Adds text to the body
9.) Which element is used for
hyperlinks in HTML?
a) <a>
b) <link>
c) <url>
d) <href>
10.) What does the <br> tag do?
a) Adds a break in the page
b) Inserts a line break
c) Ends a paragraph
d) Adds a block of content
Activity 4: Simple Practical Exercises

1.Create an HTML page with the


following:
• A heading that says "Welcome to
My Website“
• A paragraph with some text
about your favorite hobby.
2.Add an image to the webpage
Activity 5: Hard Practical
Exercises
1. Create a webpage that contains:
• A heading <h1>, a subheading <h2>,
and a paragraph <p>.
• Three images, each with different
sizes and alternative text.
• Hyperlinks to three different websites.
2. Develop an HTML document that
displays the following:
• An ordered list (<ol>) with five list
items, and an unordered list (<ul>)
with three list items.
• Use different heading tags from <h1>
to <h4> for different sections.
3. Create a webpage with multiple
paragraphs, and add a line break
between each one using the <br>
tag. Ensure there is also a link
that takes the user to a different
section of the same webpage.
4. Write an HTML page that uses an
<iframe> to embed a YouTube
video, and also contains a table
with two columns and three rows,
where you describe different web
browsers and their key features.
Activity 6: Mixed Exercise

1. Explain the difference between


an ordered list (<ol>) and an
unordered list (<ul>) in HTML.
Provide an example of each.
2. Create a webpage with:
• A heading that says "My Favorite
Foods“
3. What does the alt attribute in
the <img> tag do?
4. How would you structure an
HTML page that includes
metadata, a heading, and a
paragraph? Write out the
necessary code.
6. What is the purpose of the
<title> element in an HTML
document?
7. Describe how you would create a
link in HTML that opens in a new
browser tab. Include an example
code.
9. Design an HTML page with:
• A heading that says "My Favorite
Websites“
• Three links to websites you visit regularly
(use the <a> tag).
10.What is the correct syntax for adding an
image to a webpage using the <img> tag?

You might also like