Scribd
Upload
46 views

HTML Headings

The document provides an overview of basic HTML elements and tags for headings, paragraphs, links, images, lists, and tables. It explains the purpose and syntax of each element, including common attributes like href, src, alt, and style. Key points covered include defining headings with <h1-h6>, paragraphs with <p>, links with <a> and the href attribute, images with <img> and src/alt attributes, and lists with <ul> and <ol>. It also discusses empty elements, case-insensitivity, and image maps.

Uploaded by

YT Premone
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

HTML Headings

The document provides an overview of basic HTML elements and tags for headings, paragraphs, links, images, lists, and tables. It explains the purpose and syntax of each element, including common attributes like href, src, alt, and style. Key points covered include defining headings with <h1-h6>, paragraphs with <p>, links with <a> and the href attribute, images with <img> and src/alt attributes, and lists with <ul> and <ol>. It also discusses empty elements, case-insensitivity, and image maps.

Uploaded by

YT Premone
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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>

You might also like