HTML Headings
HTML Headings
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
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:
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
HTML Buttons
HTML buttons are defined with the <button> tag
<button>Click me</button>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list items)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<br> is an empty element without a closing tag (the <br> tag defines a line
break)
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.
<img src="img_girl.jpg">
The value of the alt attribute can be read by screen readers. This way,
someone "listening" to the webpage, e.g. a vision impaired person, can "hear"
the element.
See what happens if we try to display an image that does not exist
The style Attribute
The style attribute is used to specify the styling of an element, like color, font,
size etc.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, add two
more letters (US).
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
Example:
<a href="https://www.google.com">Visit our HTML tutorial</a>
Local Links
The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL (without
https://www....).
Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table data/cell
is defined with the <td>tag.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Images
Images can improve the design and the appearance of a web page.
<img src="pic_trulli.jpg" alt="Italian Trulli">
The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
</body>
</html>
Actually, you can access images from any web address in the world:
Animated Images
HTML allows animated GIFs:
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text:
In the image below, click on the computer, the phone, or the cup of coffee:
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250
" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" a
lt="Coffee" href="coffee.htm">
</map>