Scribd
Upload
37 views

Introduction To HTML PDF

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. Sir Tim Berners-Lee invented HTML in the early 1990s and the first version was released in 1993. HTML uses tags to define the structure and layout of a web page and separate content from presentation. Some common HTML tags include <html>, <head>, <body>, <p>, <h1>-<h6> for headings, <a> for links, and <img> for images.

Uploaded by

Radge Bero
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

Introduction To HTML PDF

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. Sir Tim Berners-Lee invented HTML in the early 1990s and the first version was released in 1993. HTML uses tags to define the structure and layout of a web page and separate content from presentation. Some common HTML tags include <html>, <head>, <body>, <p>, <h1>-<h6> for headings, <a> for links, and <img> for images.

Uploaded by

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

HTML

INTRODUCTION TO BASIC

HYPERTEXT MARKUP LANGUAGE


HISTORY OF HTML
Sir Tim Berners-Lee

• is an English computer scientist


best known as the inventor of the
World Wide Web.

• He created HTML in late 1991 but


was not released officially,
published in 1995 as HTML 2.0 .
HTML 4.01 was published in late
1999 and was a major version of
HTML.
HTML Versions

• HTML 1.0, released in 1993


• HTML 2.0, released in November 1995
• HTML 3.0, released in January 1997
• HTML 4.01, released in December 1999
• HTML 5.0, released in 2012
HTML
INTRODUCTION
Understanding a Website
• HTML (Hypertext Markup Language) is the code that is
used to structure a web page and its content.

• JavaScript is a text-based programming language used both


on the client-side and server-side that allows you to make
web pages interactive.

• CSS (Cascading Style Sheet) is the language for describing


the presentation of Web pages, including colors, layout, and
fonts. CSS is independent of HTML
What is HTML?

• Hype r te xt Mar kup L ang ua g e


• H T ML i s the sta nd a r d ma r kup l a ng ua g e fo r
cr e ati ng We b page s
• HT ML de scr i be s the str uct ur e o f a We b p a g e
A Simple HTML Document
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:
Example:
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:
Example:
HTML Page Structure
Below is a visualization of an HTML page structure:
BASIC HTML TAGS
• <!DOCTYPE> • <p>
• <html > • <br>
• <he a d > • <h1>,<h2>,<h3>,<h4>, <h5>,<h6>
• <body> • <a>
• <ti tl e > • <img>
< ! D O CT Y PE h t m l >

• This tag is the very first line in the HTML document.

• It tells the browser what version of HTML the document is written so that the
browser knows what to expect.

• This tag is also commonly referred to as the <!DOCTYPE> element.

Example:
<html> Tag

• The <html> tag represents the root of an HTML document.

• The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).

Note: 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:
<head> Tag

• The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.

• Metadata is data about the HTML document. Metadata is not displayed.

• Metadata typically define the document title, character set, styles, scripts, and
other meta information.

Example:
< t i tl e > T a g

• The <title> tag defines the title of the document. The title must be text-only, and
it is shown in the browser's title bar or in the page's tab.

• The <title> tag is required in HTML documents!

• The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.

Example: Output:
<body> Tag

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

• The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.

Example:
<p> Tag
• The <p> tag defines a paragraph.

• Browsers automatically add a single blank line before and after each <p>
element.
Example:

<br> Tag
• The <br> tag inserts a single line break.

• The <br> tag is an empty tag which means that it has no end tag.

Example:
Output:
<h1> to <h2> Tag

• The <h1> to <h6> tags are used to define HTML headings.

• <h1> defines the most important heading. <h6> defines the least important
heading.
Example: Output:
<a> Tag
• The <a> tag defines a hyperlink, which is used to link from one page to another.

• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red

Example:
<img> Tag
• The <img> tag is used to embed an image in an HTML page.

• Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The <img> tag has two required attributes:

• src - Specifies the path to the image


• alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and height are not specified, the
page might flicker while the image loads.

Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example
below).

Example:
END OF DISCUSSION

You might also like