Scribd
Upload
44 views

HTML

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags like <h1> and <p> to mark text as headings or paragraphs. Tags have opening and closing parts and can have attributes to provide more information. Web pages are HTML documents that can contain text and tags. HTML is used to create structured and semantically marked up content to be displayed in web browsers.

Uploaded by

anon_6694774
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
44 views

HTML

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags like <h1> and <p> to mark text as headings or paragraphs. Tags have opening and closing parts and can have attributes to provide more information. Web pages are HTML documents that can contain text and tags. HTML is used to create structured and semantically marked up content to be displayed in web browsers.

Uploaded by

anon_6694774
Copyright
© Attribution Non-Commercial (BY-NC)
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

<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.

Example

<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.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag.

Example

<a href="http://www.w3schools.com">This is a link</a>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

Example
<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.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag.

Example
<a href="http://www.w3schools.com">This is a link</a>

HTML Images
HTML images are defined with the <img> tag.

Example
<img src="w3schools.jpg" width="104" height="142" />

 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:

Example

<a href="http://www.w3schools.com">This is a link</a>

HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

Example

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML Tip - How to View HTML Source


Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, right-click in the page and select "View Source" (IE) or "View Page Source"
(Firefox), or similar for other browsers. This will open a window containing the HTML code
of the page.

HTML Tag Reference


W3Schools' tag reference contains additional information about HTML elements and their attributes.

Tag Description
<p> Defines a paragraph
<br /> Inserts a single line break

HTML Formatting Tags


HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

HTML Style Example - Background Color


The background-color property defines the background color for an element:

Example

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

<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><big>This text is big</big></p>

<p><i>This text is italic</i></p>

<p><em>This text is emphasized</em></p>

<p><code>This is computer output</code></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html>

HTML Style Example - Text Alignment


The text-align property specifies the horizontal alignment of text in an element:

Example

<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

<html>

<body>

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>

</body>

</html>

Align Images
<html>

<body>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />

with align="bottom".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />

with align="middle".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />

with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>


<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />

An image before the text.</p>

<p>An image after the text.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>

</body>

</html>

Make a a Hyperlink of a Image


<html>

<body>

<p>Create a link of an image:

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a></p>

<p>No border around the image, but still a link:

<a href="default.asp">

<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a></p>

</body>

</html>

You might also like