Gmail Images

Group 6
Elements of a Web Page

Browser Text Image Hyperlink

Window Elements Elements Elements
Elements
Nwanwa
Topic What is Web Page?

Web Element

What is a web element?

An element is a part of a webpage. In XML and
HTML, an element may contain a data item or
a chunk of text or an image, or perhaps
nothing. A typical element includes an opening
tag with some attributes, enclosed text
content, and a closing tag.
Topic What is Web Page?

A Web page is a representation of a document

that is stored at a remote location. A Web
browser, such as Internet Explorer, Mozilla
Firefox, or Google Chrome, is used to display
the information on a Web page online. The
Web browser connects to the Web server,
which hosts the website's contents via HTTP.
Every Web page corresponds to different types
of information that is visually and readable to
the visitor.
Topic 1 Browser Window Elements

STATUS BAR

The status bar is

located at the very
bottom of your
browser window. In
essence, it describes
what you are doing
right now. It mostly
displays the load time
and URL of whatever it
is that your mouse is
hovering on.
Topic 1 Browser Window Elements

ADDRESS BAR

This bar, which is located at the top of your browser

window, serves to display the complete URL or
website address for you.
Topic 1 Browser Window Elements

TITLE BAR

This bar, which may be found at the very top of your browser, is
blue in color on most popular browsers. The Title bar’s function
is to show the title of the webpage you are now browsing on the
internet.
Topic 1 Browser Window Elements

SCROLL BARS

You can “scroll” (move

down or up the web page)
to view information that is
below or above what is
now in the Display
Window by using the
Scroll bars, which are
typically located to the
right of the Display
Window.
Topic 1 Browser Window Elements

TOOLBAR ICONS

The Toolbar is located just beneath the Title Bar. The return
button, home button, refresh button, and other buttons are
located on the toolbar.
Topic 1 Browser Window Elements

DISPLAY
WINDOW

The area where

you are currently
viewing this
page is known
as the Display
window.
Topic 1 Browser Window Elements

MENU BAR

At the very top of the browser window is a menu bar. You can use the
buttons or a variety of options to quickly access files or your favorite
websites, or you can type the URL into the box to go to a certain page.
Topic 2 What is Text Element?

Some of the most common HTML

elements that make up a webpage
are text elements. All the text you
read on this website, for example,
whether it's the titles at the top of
the page, the section headers, or
this very text, is made from HTML
text elements.
Topic 3 What is Image Elements?

The <picture> HTML element contains zero or more <source>

elements and one <img> element to offer alternative
versions of an image for different display/device scenarios.
The browser will consider each child <source> element and
choose the best match among them. If no matches are
found—or the browser doesn't support the <picture> element
—the URL of the <img> element's src attribute is selected. The
selected image is then presented in the space occupied by
the <img> element.
Topic 3 What is Image Elements?

To decide which URL to load, the user agent examines

each <source>'s srcset, media, and type attributes to select a
compatible image that best matches the current layout and
capabilities of the display device.
The <img> element serves two purposes:
1.It describes the size and other attributes of the image
and its presentation.
2.It provides a fallback in case none of the
offered <source> elements are able to provide a usable
image.
Topic 3 What is Image Elements?

Common use cases for <picture>:

• Art direction. Cropping or modifying images for

different media conditions (for example, loading a
simpler version of an image which has too many
details, on smaller displays).
• Offering alternative image formats, for cases where
certain formats are not supported.
• Saving bandwidth and speeding page load
times by loading the most appropriate image for
the viewer's display.
 What is Hyperlink Elements?

The capability of linking Web resources is

what makes the Web so fascinating. By
following links, you can be looking up job
opportunities one moment and then be
reading up on the latest mixed drink recipes
the next! Linking between documents is
accomplished with the one simple element
described in this section.
 What is Hyperlink Elements?

<a>
Type:

Container

Function:

The <a> element can do one of two things, depending on which attributes you use. Used with
the href attribute, the <a> element sets up a hyperlink from whatever content is found within
the <a> element and the document at the URL specified by href (see Figure
3.13). When you use the <a> element with the name attribute, you set up a named anchor
within a document that can be targeted by other hyperlinks. This helps make navigating a large
document easier because you can set up anchors at the start of major sections and then place
a set of links at the top of the document that points to the anchors at the beginning of each
section.

Figure
3.13
The hyperlinks on Microsoft's home page are set up using the <a> element.
 What is Hyperlink Elements?

Attributes:
The <a> element can take a host of attributes, including
• accesskey
• charset
• href
• hreflang
• name
• rel
• rev
• tabindex
• target
Thank You !