Scribd
Upload
9 views

Introduction to HTML

This document provides an introduction to HTML, detailing its fundamental structure, elements, tags, and attributes necessary for creating basic web pages. It covers the history of HTML, the syntax for writing HTML documents, and how to format text, create hyperlinks, and embed images. Additionally, it explains the use of CSS for styling and the creation of tables in HTML.

Uploaded by

jarquisal2
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

Introduction to HTML

This document provides an introduction to HTML, detailing its fundamental structure, elements, tags, and attributes necessary for creating basic web pages. It covers the history of HTML, the syntax for writing HTML documents, and how to format text, create hyperlinks, and embed images. Additionally, it explains the use of CSS for styling and the creation of tables in HTML.

Uploaded by

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

Introductio

n TO
HTML
Learning
Objectives
 Explain the fundamental structure of an
HTML document, including, elements, tags,
and attributes

Learning
Objectives
 Explain the fundamental structure of an
HTML document, including, elements, tags,
and attributes
 Write the a basic HTML document from
scratch, including the necessary elements

Learning such as ‘<!DOCTYPE>’, ‘,<html >’, ‘<head>’, and


‘<body>’

Objectives
 Explain the fundamental structure of an HTML
document, including, elements, tags, and
attributes

 Write the a basic HTML document from scratch,

Learning
including the necessary elements such as ‘<!
DOCTYPE>’, ‘,<html >’, ‘<head>’, and ‘<body>’

Objectives  Learn how to use HTML tags to format text, such


as headings, paragraph, lists, and emphasis, and
how to create hyperlinks to connect web pages

 Have an understanding to HTML,


covering its core concepts and practical
skills for creating basic web pages
 Explain the fundamental structure of an HTML
document, including, elements, tags, and
attributes

 Write the a basic HTML document from scratch,

Learning
including the necessary elements such as ‘<!
DOCTYPE>’, ‘,<html >’, ‘<head>’, and ‘<body>’

Objectives  Learn how to use HTML tags to format text, such


as headings, paragraph, lists, and emphasis, and
how to create hyperlinks to connect web pages

 Have an understanding to HTML, covering its


core concepts and practical skills for creating
basic web pages
 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for


creating Web pages

What is  HTML describes the structure of a Web page

 HTML consist of a series of elements

HTML?  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 ink”, etc.
<!DOCTYPE html>
<html>

A Simple
<head>
<title>Page Title</title>
</head>

HTML <body>

<h1>My First Heading</h1>

Documents <p>My first paragraph.</p>

</body>
</html>
 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

Example the HTML page


 The <title> elements specifies a title for the HTML page
(which is shown in the browser’s title bar or in the page’s

Explained tab)
 The <body> elements 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> elements defines a paragraph
 The HTML element is defined by a start tag, some
content, and an end tag:
What is <tagname>Content goes here…</tagname>

an HTML  The HTML element is everything from the start tag to


the end tag:

Element? <h1>My First Heading</h1>


<p>My first paragraph</p>
Start Tag Element End Tag
content
What is <h1> My First Heading </h1>

an HTML <p> My first paragraph </p>

<br> None none


Element?
 The purpose of a web browser (Chrome, Edge, Firefox,
Safari) is to read HTML documents and display them
correctly
 A browser does not display HTML tags, but uses them to
determine how to display the document:

WEB
Browsers
HTML Page Structure
HTML History
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
HTML History
Year Version
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML 5
2016 W3C Recommendation: HTML 5.1
2017 W3C Recommendation: HTML 5.1 2nd Edition
2017 W3C Recommendation: HTML 5.2
HTML Versions
• Since the early days of the web, there have been many versions of HTML
Year Version
1991 HTML
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XTML
2014 HTML5
HTML Step 1: Open Notepad

Editors
• Open the Start Screen (Start Button)
• Then look for Notepad
Learn HTML
using Notepad
or TextEdit
Step 2: Write Some HTML
HTML Code
Editors <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


Learn HTML <p>My first paragraph.</p>
using Notepad
</body>
or TextEdit </html>
Step 3: Save the HTML
HTML Page
Editors
• 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

Learn HTML
using Notepad
or TextEdit
Step 3: View the HTML
HTML Page in your browser
• Open the saved HTML file in your favorite
Editors browser (double click on the file, or right-click
– and choose “Open with”)

Learn HTML
using Notepad
or TextEdit
 All HTML documents must start with a
document type declaration: <!DOCTYPE
html>
HTML  The HTML document itself begins with
Documents <html> and ends with </html>
 The visible part of the HTML document is
between <body> and </body>
Example
<!DOCTYPE html>
HTML <html>
<body>
Basic
<h1>My First Heading</h1>
Examples <p>My first paragraph.</p>

</body>
</html>
 The <!DOCTYPE html> declaration
represents the document type, and helps
browsers to display web pages correctly
The <!  The <!DOCTYPE html> declaration is not
DOCTYPE> case sensitive

Declaration  The <!DOCTYPE html> declaration for


HTML5 is
 HTML headings are defines with the <h1> to
<h6> tags <h1> defines the most important
heading <h6> defines the least important
heading

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

Headings <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>
 HTML paragraphs are defined with the <p> tag

HTML
<p> This is a paragraph </p>
Paragraph <p> This is another paragraph </p>
 HTML links are defined with the <a> tag

HTML
Links  The link’s destination is specified in the href
attribute
 Attributes are used to provide additional
information about HTML elements
 HTML images are defined with the <img> tag
 The source file (src), alternative text (alt), width and
height are provided as attributes

HTML
Images
 An HTML element is defined by a start tag, some
content, and end tag
 HTML element is everything from the start tag to the
end tag

HTML
Elements
HTML
Elements
 HTML elements can be nested (this means that
elements can contain other elements)
 All HTML documents consist of nested HTML

Nested
elements

HTML
Elements
 The <html> element is the root element and it defines
the whole HTML document
Nested  It has a start tag <html> and an end tag </html>
 Then, inside the <html> element there is a <body>

HTML
element

Elements
(example
explained)
 The <body> element defined the document’s body
Nested  It has a start tag <body> and an end tag </body>
 Then, inside the <body> element there are two other

HTML elements: <h1> and <p>

Elements
(example
explained)
 All HTML elements can have attributes
 Attributes provide additional information about

HTML elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like:
Attributes name=“value”
 The <a> tag defines a hyperlink
 The href attributes specifies the URL of the page the
link goes to
href
Attributes
 The <img> tag is used to embed an image in an HTML
page.
 The src attributes specifies the path to the image to

src
be displayed

Attributes
 The <img> tag should also contain the width and
Width height attribute, which specify the width and height
of the image

and
height
Attributes
 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
Alt
Attributes
 The style attribute is used to add styles to an element,
such as color, font, size, and more

style
Attributes
 A paragraph always starts on a new line, and a
browsers automatically add some white space
(a margin) before and after a paragraph

HTML
<p> This is a paragraph </p>
Paragraph <p> This is another paragraph </p>
 You cannot be sure how HTML will be displayed
 Large or small screens, and resized windows
will create different results
 With HTML, you cannot change the display by

HTML adding extra spaces or extra lines in your HTML


code
 The browser will automatically remove any
Display extra spaces and lines when the page is
displayed
HTML
Display
(example)
 The <hr> tag defines a thematic break in an
HTML page, and is most often displayed as a
horizontal rule
 The <hr> element is used to separate content

HTML (or define a change in an HTML page

Horizontal
Rules
 The HTML <br> element defines a line break
 Use <br> if you want a line break (a new line)
without starting a new paragraph

HTML
Line Break
 The Poem Problem

 This poem will display on a single line

HTML
Line Break
 The HTML <pre> element defines preformatted
text
 The text inside a <pre> element is displayed in
a fixed-width font (usually courier), and it

HTML preserves both spaces and line breaks

<pre>
Element
 The HTML style attribute is used to add styles
to an element, such as color, font, size, and
more

HTML
Style
Attribute
 The HTML style attribute has the following
syntax

HTML
Style
Attribute
 The CSS background-color property defines the
background color for an HTML element

Background
Color
 Setting background color for two different
elements

Background
Color
 The CSS color property defines the text color
for an HTML element

Text color
 The CSS font-family property defines the font to
be used for an HTML element

Fonts
 The CSS font-size property defines the text size
for an HTML element

Text Size
 The CSS text-align property defines the
horizontal text alignment for an HTML element

Text
Alignment
 HTML contains several elements for defining
text with a special meaning

HTML Text
Formatting
 Formatting elements were designed to display
special types of text:

HTML
Formatting
Elements
 The HTML <b> elements defines bold text,

HTML <b> without any extra importance

and
<strong>
elements
 The HTML <strong> element defines text with
strong importance.
HTML <b>  The content inside is typically displayed in bold

and
<strong>
elements
 The HTML <i> element defines part of text in an
alternate voice or mood. The content inside
HTML <i> typically displayed in italic

and <em>
elements
 The HTML <em> element defines emphasized
text. The content inside typically displayed in
HTML <i> italic

and <em>
elements
 The HTML <small> element defines smaller text
HTML
<small>
Element
 The HTML <mark> element defines text that

HTML should be marked or highlighted

<mark>
Element
 The HTML <del> element defines text that has been
deleted from a document. Browsers will usually
strike a little through deleted text
HTML <del>
Element
 The HTML <ins> element defines a text that has been
inserted into a document. Browsers will usually
underline inserted text
HTML <ins>
Element
 HTML colors are specified with predefined color
names, or with RGB, HEX, HSL, RGBA, or HSLA valued

HTML Colors
 HTML colors are specified with predefined color
names, or with RGB, HEX, HSL, RGBA, or HSLA valued

HTML Colors
(sample
output)
 You can set the background color for HTML elements

Background
Color
Background
Color
(sample
output)
Text Color
Text Color
(sample
output)
Border Color
Border Color
(sample
output)
 In HTML, colors can also be specified using RGB
values, HEX values, HSL values, RGBA values, and
HSLA values
 The following three <div> elements have their
background color set with RGB, HEX, and HSL values

Color Values
 The following two <div> elements have their
background color set with RGBA and HSLA values,
which add an Alpha channel to the color (here we
have 50% transparency)

Color Values
Color Values
(sample
code)
 An RGB color value represents RED, GREEN, and
HTML RGB BLUE light sources
 An RGBA color value is an extension of RGB with an
and RGBA Alpha channel

Colors
 In HTML, a color can be specified as an RGB value,
using this formula
RGB Color • rgb(red, green, blue)

Values
 HTML tables allow web developers to arrange data
into rows and columns
HTML Table
HTML Table
(example)
HTML Table
(example)
HTML Table
(example)
HTML Table
(example)
 A table in HTML consist of table cells inside rows and
Define an columns

HTML Table
(example)
(Sample
Output)
 Each table cell is defined by a <td> and a </td> tag
 td stands for table data
 Everything between <td> and </td> are the content
Table cells of the table cell
(example)
(Sample
Output)
 Each table row starts with a <tr> and ends with a
</tr> tag
 tr stands for table row
Table rows
(example)
(Sample
Output)
 Sometimes you want your cells to be table header
cells. In those cases use the <th> tag instead of the
Table <td> tag
 th stands for table header
Headers
(example)
(Sample
Output)
Using Emojis
in HTML
(example)
(Sample
Output)

You might also like