Bicol University College of Science – Advanced Computer Applications
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>
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="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
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>
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line
break)
<p>This is a <br> paragraph with a line break.</p>
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.
HTML Is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
HTML Attributes
Attributes provide additional information about HTML elements.
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
<a href="https://www.w3schools.com">This is a link</a>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
<img src="img_girl.jpg">
The width and height Attributes
HTML images also have width and height attributes, which specifies the width
and height of the image:
<img src="img_girl.jpg" width="500" height="600">
The width and height are is specified in pixels by default; so width="500"
means 500 pixels wide.
The alt Attribute
The alt attribute specifies an alternative text to be used, if an image cannot be
displayed.
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.
<img src="img_girl.jpg" alt="Girl with a jacket">
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.
<p style="color:red">This is a paragraph.</p>
The lang Attribute
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers)
and search engines:
<!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).
The title Attribute
Here, a title attribute is added to the <p> element. The value of the title
attribute will be displayed as a tooltip when you mouse over the paragraph:
<p title="I'm a tooltip">
This is a paragraph.
</p>
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
HTML Links - Syntax
Hyperlinks are defined with the HTML <a> tag
<a href="url">link text</a>
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....).
<a href="html_images.asp">HTML Images</a>
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or tab
• _self - Opens the linked document in the same window/tab as it was
clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window
• framename - Opens the linked document in a named frame
HTML Tables
An HTML table is defined with the <table> tag.
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">
HTML Images Syntax
In HTML, images are defined with the <img> tag.
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;">
Width and Height, or Style?
The width, height, and style attributes are valid in HTML.
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>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
</body>
</html>
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the
web page.
However, it is common to store images in a sub-folder. You must then include
the folder name in the src attribute:
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Images on Another Server
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W
3Schools.com">
Animated Images
HTML allows animated GIFs:
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
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:
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable
areas.
In the image below, click on the computer, the phone, or the cup of coffee:
<img src="workplace.jpg" alt="Workplace" use
map="#workmap">
<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>
