Introduction To HTML
What is HTML?
- HTML full form is Hyper Text Markup Language
- HTML tell about the structure of Web pages using markup
- HTML elements are the building blocks of HTML pages
- HTML elements are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to render the content of the page
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Examples:
- The
<!DOCTYPE html>declaration defines this document to be HTML5 - The
<html>element is the root element of an HTML page - The
<head>element contains meta information about the document - The
<title>element specifies a title for the document - The
<body>element contains the visible page content - The
<h1>element defines a large heading - The
<p>element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle
brackets:
<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
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to
read HTML documents and display them.
The browser does not display the HTML tags, but uses them to
determine how to display the document
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page
title</title>
</head>
<body>
<h1>This
is a heading</h1>
<p>This is
a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading:
<h1>This is
heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Links
HTML links are defined with the <a> tag:
Example:
<a href="https://www.w3schools.com">This is
a link</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height
are provided as attributes:
Example:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML tags are not case sensitive: <P> means the same as <p>.
Some HTML elements will display correctly, even if you forget the
end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a
fixed-width font (usually Courier), and it preserves both spaces and line
breaks:
Example
<pre>
“Oh, we’ll drink once more
“Oh, we’ll drink once more
when the wind’s off shore,”
We’ll drink from the good old jar
</pre>
No comments:
Post a Comment