HTML Basic
1. HTML lists HTML document
Input:
<!DOCTYPE html>
<html>
<body>
<h1> My First Heading</h1>
<p> My first paragraph. </p>
</body>
</html>
Output:
My First Heading
My first paragraph.
HTML headings
Input:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Output:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
HTML paragraphs
Input:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. </p>
<p>This is another paragraph. </p>
</body>
</html>
Output:
This is a paragraph. This is another paragraph.
HTML links
Input:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with <a> tag: </p>
<a href="[Link] This is a link</a>
</body>
</html>
Output:
HTML Links
HTML links are defined with <a> tag:
This is a link
HTML images
Input:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the <img> tag: </p>
<img src="[Link]" alt="Little Rabbit " width="104"
height="142">
</body>
</html>
Output:
HTML Images
HTML images are defined with the <img> tag:
HTML buttons
Input:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body>
</html>
Output:
HTML Buttons
HTML buttons are defined with the button tag:
Click me
HTML Attributes
The tittle attribute
Input:
<!DOCTYPE html>
<html>
<body>
<h2 tittle="I'm a header">The title Attribute</h2>
<p tittle="I'm a tooltip">Mouse over this paragraph, to display
the tittle attribute as a tooltip. </p>
</body>
</html>
Output:
The tittle Attribute
Mouse over this paragraph, to display the title attribute as a
tooltip.
The href attribute
Input:
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with <a> tag. The link address is
specified in the href attribute:</p>
<a href="[Link] W3Schools</a>
</body>
</html>
Output:
The href Attribute
HTML links are defined with <a> tag. The link address is
specified in the href attribute: Visit W3Schools
The width and height attributes Input:
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>The width and height attributes of the img tag, defines the
width and height of the image:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
Output:
Width and Height Attributes
The width and height attributes of the img tag, defines the
width and height of the image:
The alt attribute
Input:
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so
users who cannot see the image get an understanding of
what the image contains:</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500"
height="600">
</body>
</html>
Output:
The alt Attribute
The alt attribute should reflect the image content, so users
who cannot see the image get an understanding of what the
image contains:
Attribute without quotes
Input:
<!DOCTYPE html>
<html>
<body>
<a href=htps://[Link]>This is a link</a>
</body>
</html>
Output:
This is a link
Attribute without quotes does not work
Input:
<!DOCTYPE html>
<html>
<body>
<h1>About W3Schools</h1>
<p title=Description of W3Schools>
You cannot omit quotes around an attribute value if
the value contains spaces.
</p>
<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from the title.
</b></p>
</body>
</html>
Output:
About W3Schools
You cannot omit quotes around an attribute value if the value
contains spaces.
If you move the mouse over the paragraph above, your
browser will only display the first word from the tittle.
HTML Headings
HTML headings
Input:
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html
Output:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Html horizontal rule
Input:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text. </p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text. </p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text. </p>
</body>
</html>
Output:
This is heading 1
This is some text.
This is heading 2
This is some other text.
This is heading 2
This is some other text.
HTML head
Input:
<!DOCTYPE html>
<html>
<head>
<tittle>My First HTML</tittle>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data. </p>
<p>Meta data is data about the HTML document. </p>
</body>
</html>
Output:
The HTML head element contains meta data.
Meta data is data about the HTML document.