Scribd
Upload
6 views

HTML

Uploaded by

Hat Dog
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
6 views

HTML

Uploaded by

Hat Dog
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 30

HTML

Hyper Text Markup Language


HISTORY OF WWW

In early 1989, an English Physicist started the


world wide web.
HISTORY OF WWW

Sir Tim Berners-Lee


ACCESSING THE WEB

The most common means of accessing the


internet is through the use of telephone lines.
ACCESSING THE WEB

• Dial-Up Connection – Connecting to internet using the


telephone lines.
• DSL – Digital Subscriber Line also same as dial up but provides
both data and voice communication.
• Cable Internet – connection to the web using cable lines.
• Wireless internet – internet connection without any cables and
can access any gadget with Wi-Fi enabled.
IN ACCESSING THE WEB, YOU NEED A
BROWSER
• Internet Explorer
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
• Google Chrome
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
• Google Chrome
• Opera
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
• Google Chrome
• Opera
HTML TEXT EDITOR

TEXTUAL
WYSIWYG HTML
EDITOR
NOTEPAD++

Notepad++ is a free HTML editor


that was developed for Windows-
based machines. Linux users can
also use it via Wine. This editor is
distributed as free software and its
repository is also available on
GitHub. Like other community
projects, third-party plugins are
supported.
SUBLIME TEXT

Sublime is another excellent free


HTML editor. Developed by a Sydney-
based company, this software falls
under the category of freemium.
Freemium means that you can use
Sublime for free, but you must buy a
license to enjoy the full features.
DREAMWEAVER

Developed and managed by


tech giant Adobe Inc, Adobe
Dreamweaver CC is a premium,
powerful, and versatile tool. It
caters to both the back end and
front-end development. As a
closed-source software,
Dreamweaver is designed to
work within the Adobe
ecosystem. Adobe also provides
support, plugins, and features to
make sure you will always code
seamlessly.
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>
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>
A SIMPLE HTML DOCUMENT

The <!DOCTYPE html> declaration defines this document to be HTML5 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
The <html> element is the root element of an HTML page <html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
<html>
The <head> element contains meta information about the document <head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
<html>
<head>
The <title> element specifies a title for the document
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
The <body> element contains the visible page content </head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

The <h1> element defines a large heading


<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


The <p> element defines a paragraph
<p>My first paragraph.</p>

</body>
</html>
HTML PAGE STRUCTURE
HTML TAGS

<tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p> and </p>


• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward
slash inserted before the tag name
This is the root element tag. It designates that
<html></html> everything between these brackets contains
HTML code.
This tag distinguishes the head of the web page
from the content. This is where you put Javascript
<head></head> code or give ‘meta’ information about the web
site.
Have you noticed that browser tabs contain text
<title></title> that gives you an overview of the website? That
text is written as the site’s title with this tag.
The body tag specifies the actual content of the
<body></body> website.
This is a heading tag, which creates a title by
making text bigger and making it bold. There are
<h1></h1> six heading tags: h1, h2, h3, h4, h5, h6, in
descending order of size.
This tag specifies that a given section is
supposed to be its own paragraph.
Browsers usually insert blank spaces
<p></p>
between paragraphs, making the text
easier to read.

This tag let’s us create a link with its


‘href’ attribute, like so: <a
<a></a>
href=www.somewebsite.com>Click
here</a>.
The ‘image’ tag is how you insert images
<img></img>
into a web page.
<b></b> This tag specifies bold text.

<i></i> This tag specifies italic text.

<u></u> This tag specifies undelined text.


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"
HTML 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

You might also like