Scribd
Upload
12 views15 pages

Web Design University

The document provides an overview of basic HTML elements, including their structure, types, and usage. It explains the significance of tags, attributes, and various elements such as paragraphs, headings, links, and lists. Additionally, it highlights the importance of the head element for metadata and the role of the title element in search engine optimization.

Uploaded by

jkusekwa01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views15 pages

Web Design University

The document provides an overview of basic HTML elements, including their structure, types, and usage. It explains the significance of tags, attributes, and various elements such as paragraphs, headings, links, and lists. Additionally, it highlights the importance of the head element for metadata and the role of the title element in search engine optimization.

Uploaded by

jkusekwa01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Lecture 02: Basic HTML Elements

➢ An HTML element is an individual component of an HTML


document
➢ An element is the basic building block of HTML and is typically
made up of two tags: an opening tag and a closing tag. eg.
➢ HTML tags are not case sensitive: <P> is same as <p>.
➢ Some HTML elements do not have a closing tag.
➢ These are called "empty elements„ or “singleton” or “void”
elements.
➢ For example, to add a single line break in the middle of a
paragraph, list item, etc to you would use the <br> tag.
➢ Other common elements that only includes an opening tag is
the "image" element. Example: <img src="images/logo.png">
1/
Html element, tags and attributes
Example 1:
<p>This is a paragraph element.</p>
This is the Paragraph element, with Start tag: <p> and
End tag: </p>, but do not have attribute., normally HTML
attributes provide additional information about elements and
are placed within the start tag
Example 2:
<a href=https://www.necta.go.tz>Visit NECTA website</a>
-an enchor element, with start tag <a> and end tag </a>,
attribute name href and https://www.necta.go.tz is the
attribute value
HTML head element
❖ The head element is a container for several elements
(title, style, link, meta, script, base)
❖ The elements within the head element gives
information about the html document.
❖ In other words, they contain metadata (data about
data)
❖ Metadata is not displayed by the browser
<head>….</head>
HTML title Element
❖ The <title> element defines the title of the document.
❖ The title must be text-only, and it is shown in the browser's
title bar or in the page's tab.
❖ The <title> element is required in HTML documents!
❖ The contents of a page title is very important for search
engine optimization (SEO).
❖ SEO refers to the art and science of improving your site so
that it ranks higher in search engine results e.g. Google
search results.
HTML style element
❖ The style element contains style information used to
style/format your html elements on the page.
<style>
body {background-color: green;}
h1 {color: red;}
h2 {color: blue;}
p {color: yellow;}
</style>
HTML link element
❖ The <link> element defines the relationship between the
current document and an external resource.
❖ The <link> tag is most often used to:
✓ Add a favicon to your html document
✓ link to external style sheets
❖ A favicon is an image displayed next to the title of the html
document
<link rel="icon" href="/favi.ico">
HTML body element
❖ The <body> element defines the visible part of your HTML
document.
❖ All other tags that creates content for your web page must be
included within the body tag
<body>
Content goes here
</body>
HTML images
❖ A web page with well arranged images looks more
professional and attractive.
❖ The <img> tag inserts an image into the HTML document.
❖ The image file is located by using the src attribute within the
<img> tag.
❖ The <img> is an empty element which means information is
defined through its attributes
❖ <img src=“exercise02/images/book.jpg" alt="Example
image">
HTML Paragraphs

❖ The <p> tag defines the paragraph element in a


web page
❖ <p>This is a paragraph</p>
❖ <p>This is also a paragraph. It will be displayed
below the first paragraph above</p>
HTML Headings
❖ The heading element defines the titles and subtitles that
you want to display in your HTML document
❖ HTML headings are defined with the <h1> to <h6>
tags.
❖ In other words, <h1> defines the largest heading while
<h6> defines the smallest heading. Example;
➢ <h1>Heading level 1</h1>
➢ <h6>Heading level 6</h6>
HTML Links
❖ HTML links allows us to navigate different web pages.
❖ The HTML tag (<a>) defines a hyperlink that links one
page to another page.
❖ It can create hyperlink to other web page as well as
files, location, or any URL. The "href" attribute is the
most important attribute of the HTML <a> tag and
which links to destination page or URL.
HTML Links
❖ The href attribute is used to define the address of the file to
be linked. In other words, it points out the destination page.
❖ The link text is the part that will be visible to the reader.
❖ If it is a link image, you’ll only see the image which is
clickable.
❖ Clicking on the link text, will send the reader to the specified
URL address. Example;
<a href="https://www.nbs.go.tz/index.php/en/">Click here</a>
HTML Links
❖ Syntax <a href="url">link text</a>
❖ Example <a href="https://www.eastc.ac.tz">Visit
EASTC</a>
❖ By default, links will appear as follows in all browsers:
–An unvisited link is underlined and blue

–A visited link is underlined and purple


–An active link is underlined and red
Lists
❖ HTML lists allow web developers to group a set of related
items in lists.
❖ Lists come in different styles
➢ Ordered lists: List items marked with numbers by default.
➢ Unordered lists: Marked with bullets (small black circles)
by default
HTML Lists – Ordered lists HTML Lists – Un-Ordered lists
● Ordered lists start with the <ol> tag. ● Unordered lists start with the <ul>
● Each list item starts with the <li> tag. tag.
● Example ● Each list item starts with the <li>
<ol> tag.
<li>Coffee</li> ● Example
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
<li>Milk</li>
• <ol type="i"> means Ordered List with </ul>
Lowercase Roman Numbers.
• type="A” with upper case letters

You might also like