Scribd
Upload
242 views

HTML Headings Are Defined With The To Tags

HTML is a markup language that defines the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, links, images, and more. Tags are keywords surrounded by angle brackets that usually come in pairs like <p> and </p> to delineate the start and end of a paragraph. HTML documents are made up of nested HTML elements and are displayed as web pages by browsers, which ignore the tags but use them to interpret the content. Common HTML elements include headings, paragraphs, links, images, and tables.

Uploaded by

nharyanne
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
242 views

HTML Headings Are Defined With The To Tags

HTML is a markup language that defines the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, links, images, and more. Tags are keywords surrounded by angle brackets that usually come in pairs like <p> and </p> to delineate the start and end of a paragraph. HTML documents are made up of nested HTML elements and are displayed as web pages by browsers, which ignore the tags but use them to interpret the content. Common HTML elements include headings, paragraphs, links, images, and tables.

Uploaded by

nharyanne
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 7

What is HTML?

HTML is a language for describing web


pages.
HTML stands for Hyper Text
Markup Language
HTML is not a programming
language, it is a markup
language
A markup language is a set of
markup tags
HTML uses markup tags to
describe web pages
HTML Tags
HTML markup tags are usually called
HTML tags
HTML tags are keywords
surrounded by angle brackets like
<html>
HTML tags normally come in pairs
like <b> and </b>
The first tag in a pair is the start
tag, the second tag is the end tag
Start and end tags are also called
opening tags and closing tags
HTML Documents = Web Pages
HTML documents describe web
pages
HTML documents contain HTML
tags and plain text
HTML documents are also called
web pages
The purpose of a web browser (like
Internet Explorer or Firefox) is to read
HTML documents and display them as
web pages. The browser does not display
the HTML tags, but uses the tags to
interpret the content of the page:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained

The text between <html> and


</html> describes the web page
The text between <body> and
</body> is the visible page
content
The text between <h1> and </h1>
is displayed as a heading
The text between <p> and </p> is
displayed as a paragraph
HTML Headings

HTML headings are defined with the <h1> to


<h6> tags.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p>
tag.

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

<a
href="http://www.w3schools.com">This
is a link</a>
HTML Images
HTML images are defined with the <img>
tag.

<img src="w3schools.jpg" width="104"


height="142" />

HTML Element Syntax


An HTML element starts with a
start tag / opening tag
An HTML element ends with an
end tag / closing tag
The element content is
everything between the start and
the end tag
Some HTML elements have empty
content

Empty elements are closed in the


start tag
Most HTML elements can have
attributes
Nested HTML Elements

Most HTML elements can be nested (can


contain other HTML elements).
HTML documents consist of nested HTML
elements.

HTML Document Example


<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
HTML Example Explained
The <p> element:

<p>This is my first paragraph.</p>

<body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the
HTML document.
The element has a start tag <body> and an
end tag </body>.
The element content is another HTML
element (a p element).
The <html> element:

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

The <html> element defines the whole


HTML document.
The element has a start tag <html> and
an end tag </html>.
The element content is another HTML
element (the body element).
Don't Forget the End Tag
Most browsers will display HTML correctly
even if you forget the end tag:

<p>This is a paragraph
<p>This is a paragraph
The example above will work in most
browsers, but don't rely on it. Forgetting the
end tag can produce unexpected results or
errors.
Note: Future version of HTML will not allow
you to skip end tags.

Empty HTML Elements


HTML elements with no content are
called empty elements. Empty elements
can be closed in the start tag.
<br> is an empty element without a
closing tag (the <br> tag defines a line
break).
In XHTML, XML, and future versions of
HTML, all elements must be closed.
Adding a slash to the start tag, like
<br />, is the proper way of closing
empty elements, accepted by HTML,
XHTML and XML.
Even if <br> works in all browsers,
writing <br /> instead is more future
proof.
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P>
means the same as <p>. Many web sites
use uppercase HTML tags.
W3Schools use lowercase tags because
the World Wide Web Consortium (W3C)
recommends lowercase in HTML 4, and
demands lowercase tags in future
versions of (X)HTML.
HTML Attributes

HTML elements can have


attributes
Attributes provide additional
information about an element
Attributes are always specified in
the start tag
Attributes come in name/value
pairs like: name="value"

Attribute Example
HTML links are defined with the <a> tag.
The link address is specified in the href
attribute:
<a
href="http://www.w3schools.com">This
is a link</a>
Always Quote Attribute Values
Attribute values should always be
enclosed in quotes.
Double style quotes are the most
common, but single style quotes are also
allowed.
Tip: In some rare situations, when the
attribute value itself contains quotes, it is
necessary to use single quotes:
name='John "ShotGun" Nelson'
HTML Tip: Use Lowercase Attributes
Attribute names and attribute values are
case-insensitive.
However, the World Wide Web
Consortium (W3C) recommends
lowercase attributes/attribute values in
their HTML 4 recommendation.
Newer versions of (X)HTML will demand
lowercase attributes.
HTML Headings
Headings are defined with the <h1> to
<h6> tags.
<h1> defines the largest heading. <h6>
defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Note: Browsers automatically add an
empty line before and after a heading.
Headings Are Important

Use HTML headings for headings only.


Don't use headings to make text BIG or
bold.
Search engines use your headings to
index the structure and content of your
web pages.
Since users may skim your pages by its
headings, it is important to use headings
to show the document structure.
H1 headings should be used as main
headings, followed by H2 headings, then
the less important H3 headings, and so
on.

HTML Lines
The <hr /> tag creates a horizontal line
in an HTML page.
The hr element can be used to separate
content:
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
HTML Comments
Comments can be inserted into the HTML
code to make it more readable and
understandable. Comments are ignored
by the browser and are not displayed.
Comments are written like this:
<!-- This is a comment -->
HTML Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Line Breaks
Use the <br /> tag if you want a line
break (a new line) without starting a new
paragraph:
<p>This is<br />a para<br />graph with
line breaks</p>
HTML Formatting Tags

HTML uses tags like <b> and <i> for


formatting output, like bold or italic text.
HTML Text Formatting Tags
Tag
Description
<b>
Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i>
Defines italic text
<small
Defines small text
>
<stron
Defines strong text
g>
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
HTML "Computer Output" Tags
Tag Description
<code
Defines computer code text
>
<kbd
Defines keyboard text
>
<sam
Defines sample computer code
p>
<tt> Defines teletype text
<var> Defines a variable
<pre
Defines preformatted text
>
HTML Citations, Quotations, and
Definition Tags
Tag
Description
<abbr>
Defines an abbreviation
<acronym
Defines an acronym
>
Defines contact information
<address> for the author/owner of a
document
<bdo>
Defines the text direction
<blockquo
Defines a long quotation
te>
<q>
Defines a short quotation
<cite>
Defines a citation
<dfn>
Defines a definition term

HTML Style Example - Background


Color
The background-color property defines
the background color for an element:
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This
is a heading</h2>
<p style="background-color:green">This
is a paragraph.</p>
</body>
</html>
HTML Style Example - Font, Color
and Size
The font-family, color, and font-size
properties defines the font, color, and
size of the text in an element:
<html>
<body>
<h1 style="font-family:verdana">A
heading</h1>
<p style="font-family:arial;color:red;fontsize:20px;">A paragraph.</p>
</body>
</html>
HTML Style Example - Text
Alignment
The text-align property specifies the
horizontal alignment of text in an
element:
<html>
<body>
<h1 style="text-align:center">This is a
heading</h1>
<p>The heading above is aligned to the
center of this page.</p>
</body>
</html>
HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of


words, or image that you can click on to
jump to a new document or a new
section within the current document.
When you move the cursor over a link in
a Web page, the arrow will turn into a
little hand.
Links are specified in HTML using the
<a> tag.
The <a> tag can be used in two ways:
1. To create a link to another
document, by using the href
attribute
2. To create a bookmark inside a
document, by using the name
attribute

The name attribute specifies the name of


an anchor.

HTML Link Syntax


The HTML code for a link is simple. It
looks like this:
<a href="url">Link text</a>

<a href="#tips">Visit the Useful Tips


Section</a>

The href attribute specifies the


destination of a link.
Example
<a
href="http://www.w3schools.com/">Visit
W3Schools</a>
which will display like this: Visit
W3Schools
Clicking on this hyperlink will send the
user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be
text. You can link from an image or any
other HTML element.

HTML Links - The target Attribute


The target attribute specifies where to
open the linked document.
The example below will open the linked
document in a new browser window:
<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
HTML Links - The name Attribute

The name attribute is used to create a


bookmark inside an HTML document.
Bookmarks are not displayed in any
special way. They are invisible to the
reader.
Example
A named anchor inside an HTML
document:
<a name="tips">Useful Tips
Section</a>
Create a link to the "Useful Tips Section"
inside the same document:

Or, create a link to the "Useful Tips


Section" from another page:
<a
href="http://www.w3schools.com/html_lin
ks.htm#tips">
Visit the Useful Tips Section</a>
HTML Images
HTML The <img> Tag and the Src
Attribute
In HTML, images are defined with the
<img> tag.
The <img> tag is empty, which means
that it contains attributes only, and has
no closing tag.
To display an image on a page, you need
to use the src attribute. Src stands for
"source". The value of the src attribute is
the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text"/>
The URL points to the location where the
image is stored. An image named
"boat.gif", located in the "images"
directory on "www.w3schools.com" has
the URL:

http://www.w3schools.com/images/boat.g
if.
The browser displays the image where
the <img> tag occurs in the document. If
you put an image tag between two
paragraphs, the browser shows the first
paragraph, then the image, and then the
second paragraph.
HTML The Alt Attribute
The required alt attribute specifies an
alternate text for an image, if the image
cannot be displayed.
The value of the alt attribute is an
author-defined text:
<img src="boat.gif" alt="Big Boat" />
The alt attribute provides alternative
information for an image if a user for
some reason cannot view it (because of
slow connection, an error in the src
attribute, or if the user uses a screen
reader).
Basic Notes - Useful Tips
Note: If an HTML file contains ten
images - eleven files are required to
display the page right. Loading images
take time, so my best advice is: Use
images carefully.
Note: When a web page is loaded, it is
the browser, at that moment, that
actually gets the image from a web
server and inserts it into the page.
Therefore, make sure that the images
actually stay in the same spot in relation
to the web page, otherwise your visitors
will get a broken link icon. The broken
link icon is shown if the browser cannot
find the image.

HTML Tables
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the
<tr> tag), and each row is divided into
data cells (with the <td> tag). td stands
for "table data," and holds the content of

a data cell. A <td> tag can contain text,


links, images, lists, forms, other tables,
etc.
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML Tables and the Border
Attribute
If you do not specify a border attribute,
the table will be displayed without
borders. Sometimes this can be useful,
but most of the time, we want the
borders to show.
To display a table with borders, specify
the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
Header information in a table are defined
with the <th> tag.
The text in a th element will be bold and
centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>

<td>row 2, cell 2</td>


</tr>
</table>
HTML Unordered Lists
An unordered list starts with the <ul>
tag. Each list item starts with the <li>
tag.
The list items are marked with bullets
(typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

How the HTML code above looks in a


browser:
Coffee
Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a
browser:
1. Coffee
2. Milk
HTML Definition Lists
A definition list is a list of items, with a
description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with
<dt> (defines the item in the list) and
<dd> (describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a


browser:
Coffee
- black hot drink
Milk
- white cold drink

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy