[go: up one dir, main page]
Scribd
Upload
22 views25 pages

About-HTML

This document provides an overview of HTML, the standard markup language for creating web pages, detailing its structure, elements, and usage. It explains key components such as the document type declaration, various HTML tags for headings, paragraphs, links, images, and attributes, along with a brief history of HTML versions. Additionally, it covers formatting elements, comments, and the basics of HTML tables.

Uploaded by

cena79286
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
22 views25 pages

About-HTML

This document provides an overview of HTML, the standard markup language for creating web pages, detailing its structure, elements, and usage. It explains key components such as the document type declaration, various HTML tags for headings, paragraphs, links, images, and attributes, along with a brief history of HTML versions. Additionally, it covers formatting elements, comments, and the basics of HTML tables.

Uploaded by

cena79286
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/ 25

HTML

part 1
Prepared by: Mr. Bernie S. Acdal
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.
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)
•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
Start tag paragraph.</p>
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:
HTML History
Since the early days of the World
Wide Web, there have been many
versions of HTML:
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 2n
d Edition
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>.
HTML Headings
HTML headings are defined with
the <h1> to <h6> tags.
<h1> defines the most important
heading. <h6> defines the least important heading:

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


OUTPU
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
T This is heading 2
This is heading 3
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>
<html>
<body> OUTPU This is a paragraph.
T
This is another paragraph.
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p>

</body>
</html>
HTML Links
HTML links are defined with the <a> tag:

<!DOCTYPE html> HTML Links


<html> OUTPU
T HTML links are defined with the a tag:
<body> This is the link

<h2>HTML Links</h2>
<p>HTML links are defined with the
a tag:</p> The link's destination is specified
in the href attribute.
<a
href="https://www.w3schools.com">T
Attributes are used to provide
his is a link</a> additional information about
HTML elements.
</body>
</html>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width,
and height are provided as attributes:
<!DOCTYPE html>
<html>
<body> OUTPU
T
<h2>HTML Images</h2>
<p>HTML images are defined with the
img tag:</p>

<img src="w3schools.jpg"
alt="W3Schools.com" width="104"
height="142">

</body>
</html>
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"
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.w3schools.com">Visit W3Schools</a>

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_girl.jpg">
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.w3schools.com/images/img_girl.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.
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_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):
Example:
<img src="img_girl.jpg" width=“100" height=“100">

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.
Example:
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as
color, font, size, and more.
<!DOCTYPE html>
<html> OUTPU
The style Attribute
<body> The style attribute is used to add
T
styles to an element, such as color:
This is a red paragraph.
<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>
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.
The following example specifies English as the language:

<!DOCTYPE html> Country codes can also be added to the


<html lang="en-US"> language code in the lang attribute. So, the
<body> first two characters define the language of
... the HTML page, and the last two characters
</body> define the country.
</html> The following example specifies English as
the language and United States as the
country:
HTML Formatting Elements
Formatting elements were designed to display special types of text:
•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Smaller text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
HTML comments are not displayed in the browser,
but they can help document your HTML source code.

Example:
<!-- Write your comments here -->
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn
into a little hand.
Note: A link does not have to be text. A link can be an image or
any other HTML element!

HTML Links - Syntax


The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href = "url“ > link text </a>


HTML Tables

• HTML tables allow web developers to arrange data into


rows and columns.
Table Cells
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 of the table cell.

Table Rows
Each table row starts with a <tr> and end with a </tr> tag.
tr stands for table row.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>TR elements define table rows</h2>

<table style="width:100%">
<tr>
<td>Emil</td> OUTPU
<td>Tobias</td> T
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

<p>To undestand the example better, we have added borders to


the table.</p>

</body>
</html>
End of HTML part 1

You might also like