Scribd
Upload
8 views

HTML

Uploaded by

Hat Dog
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
8 views

HTML

Uploaded by

Hat Dog
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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