3. 1. Define HTML (HYPERTEXT MARKUP LANGUAGE
) AND how it is used for websites
2. Explain how is HTML is used in websites explain hat
e mean by browser
3. Explain what we mean by browsers term
4. List and describe the main browsers including
(advantage & disadvantage )
5. Discuss the structure of web pages and ho to open
them through browsers
6. Describe hat is HTML editor ( Netscape navigator )
and how to use it through web pages
4. • Hypertext Markup Language (HTML) is the standard
markup language for creating web pages and web
applications. With Cascading Style Sheets (CSS) and
JavaScript, it forms a triad of cornerstone technologies
for the World Wide Web.
Introduction
• HTML is a Language, as it has code-words
and syntax like any other language.
5. HTML is a computer language devised to allow
website creation. These websites can then be
viewed by anyone else connected to the Internet.
It is relatively easy to learn, with the basics being
accessible to most people in one sitting; and quite
powerful in what it allows you to create. It is
constantly undergoing revision and evolution to
meet the demands and requirements of the
growing Internet audience under the direction of
the » W3C, the organisation charged with
designing and maintaining the language.
6. • HyperText is the method by which you move
around on the web — by clicking on special
text called hyperlinks which bring you to the
next page. The fact that it is hyper just means
it is not linear — i.e. you can go to any place
on the Internet whenever you want by clicking
on links — there is no set order to do things
in.
(Hypertext Markup Language )
7. Markup is what HTML tags do to the
text inside them. They mark it as a
certain type of text (italicised text, for
example).
8.
9. HTML consists of a series of short codes typed into a text-
file by the site author — these are the tags. The text is
then saved as a html file, and viewed through a browser,
like Internet Explorer or Netscape Navigator. This browser
reads the file and translates the text into a visible form,
hopefully rendering the page as the author had intended.
Writing your own HTML entails using tags correctly to
create your vision. You can use anything from a
rudimentary text-editor to a powerful graphical editor to
create HTML pages.
How HTML is used in
webpage
10. The program you use to view webpages.
You’re more than likely reading this
through one right now. They translate, or
interpret HTML code into the page you
see. The most common are Microsoft
Internet Explorer (IE), and Netscape
Navigator (NN). There are also text-only
browsers, used for speedy information
gathering.
Definition of browser
11.
12. Internet Explorer
• Most people started out using Internet
Explorer the majority of the time when it
comes to browsing the internet, checking
emails, listening to music online, shopping
online, and etc. This was the first web
browser consumers used in technology
world before other web browsers came
out. For more information check out
Internet Explorer.
13. • Free to download at no cost
• Offers every help option we looked for, including
direct support via email
and telephone
• Provides speed and functionality
• Easy to use
• Mostly used throughout the world
14. • Bugs come in IE (Internet Explorer) users at different times
and fixing them is time consuming
• Microsoft is unaware of finding any bugs hidden within the
browser to fixes
• Installation on software such as Adobe Flash Player can
be slow and has to be done manually sometimes when it
comes to updates that need to be install
• Lack of security in ActiveX controls
• Lack of built in features to synchronize bookmarks
• Confusion between 32 and 64 bit versions for IE
• Lack of cross-platform experience (ie. used in Windows
but not Mac)
• Huge target for hackers and cyber-thieves
15. Safari is web browser that was produced and
developed by Apple Inc. which functions on a
Mac OX, iOS, and Windows operating system.
It was first put out in public on January 7, 2003
by Apple Inc. It was Apple’s default browser
known as “Panther” for Mac users and
released on June 11, 2007 on Microsoft
Windows operating system.
Safari
16. • Provides all of security features
• Cleans up unnecessary junk
• Great for Mac users and free to download
• Speed compatibility
• Extremely Fast to download for Mac users
• Add extensions from Safari Extensions
• Ease of Use
• Page-load times impressive
17. • Provides all of security features
• Cleans up unnecessary junk
• Great for Mac users and free to
download
• Speed compatibility
• Extremely Fast to download for Mac
users
• Add extensions from Safari Extensions
18. Google Chrome e
Advantage
• Fast browsing performance
• More control over your tabsMore dynamic home page for common
used search engines and bookmarks
• Built-in Flash and PDF Support
• More speed and won’t slow down on your browsing through
internet
• Has sync capabilities that allow you to access your customized
browser from any computer
• Makes searching so much simpl erEase of use
• Great security
• Free to download at no cost
19. • Lack of parental controls
• Minor site incompatibilities
• Graphics hardware acceleration doesn’t work
with all graphics cards
Disadvantage
20. Firefox was introduced to new comers who were
used to browsing through Internet Explorer in the
early 90s. Majority of people may stick to this
brand since it most popular browsers amongst its
competitors based on its features and may allow
secure downloads on applications and programs.
Firefox
21. • More secure privacy mode and downloading
• More intuitive navigation
• Contains minimalist interface
• Offers lot of help and support on Firefox
tutorial
• Ease of use
• More Customization
• Speed and more compatible
• Easy to have add-ons
• Free to download at no cost
Advantage
22. • No thumbnail previews or mouse gestures
however there are free plug-ins from Firefox
Mozilla that address both these issues
• Resource heavy “uses a heavy portion of
memory to run”
Disadvantage
23. • A web page could be considered as a
document tree that can contain any number
of branches.
• If we look at this comparison, we can see that the
html element in fact contains two elements : head
and body . head has two subbranches—a
metaelement and a title. The bodyelement contains
a number of headings, paragraphs, and ablock
quote.
24. • The head element contains metadata—information
that describes the document itself, or associates it with
related resources, such as scripts and style sheets.
• The title element, which represents the document’s
title or name—essentially, it identifies what this
document is. The content inside the title may be used to
provide a heading that appears in the browser’s title
bar, and when the user saves the page as a favorite. It’s
also a very important piece of information in terms of
providing a meaningful summary of the page for the
search engines, which display the title content in the
search results.
25. In addition to the title element, the head
may also contain:
1. Base:
defines base URLs for links or resources on the
page, and target windows in which to open linked
content
1. link
refers to are source of some kind, most often to a style
sheet that provides instructions about how to style the
various elements on the webpage
1. Style
provides an area for defining embedded (page-specific)
CSS styles
26. 1. Script
used either to embed or refer to an
external script
1. Object
represents a generic, multipurpose container
for a media object
27. Body
This is where the bulk of the page is
contained. Everything that you can see in
the browser window (or viewport) is
contained inside this element, including
paragraphs, lists, links, images, tables, and
more. The body element has some unique
attributes of its own, all of which are now
deprecated, but aside from that, there’s little
to say about this element. How the page
looks will depend entirely upon the content
that you decide to fill it with; refer to the
alphabetical listing of all HTML elements to
28.
29. An HTML editor is a specialized piece of software that
assists in the creation of HTML code. Similar to text
editors such as Notepad and TextEdit, HTML editors
allow users to enter raw text.
Most (if not all) professional web developers use an
HTML editor to create and maintain their websites.
This is because a good HTML editor can boost
productivity enormously.
30. The Netscape Navigator
web browser is the general name for a
series of web browsers formerly
produced by Netscape
Communications Corporation, a former
subsidiary of AOL. The original browser
was once the dominant browser in
terms of usage share, but as a result of
the first browser war, it lost virtually all
of its share to Internet Explorer.[1]
31. Open your Netscape browser. open the folder
with your template files. Drag any one of the
HTML pages into the Netscape browser (or you
can choose "File" then "Open File" instead). Now
choose "File" then choose "Edit Page". You can
do your edits right there. You can edit in either
"View" then "HTML Source" or in "Normal Edit
Mode". Save the file and refresh the browser to
see your updates. Be sure to backup your files
and to check each edit in Netscape, Firefox and
IE before you proceed to the next edit.
How it is
used
32. Different type of
hyperlink
1- Relative Links
A relative link points to a location that is relative to the
current page. Having a link to “index.html” is a
relative link that points to the “index.html” page in the
same directory as the current page. Links can also
be made to “../index.html” to go to “index.html” in the
parent directory. You can also use links like
“../images/mypic.jpg” to find an image in the images
directory inside the parent directory of the current
page.
33. 2- Site Root-Relative Links
A site root-relative link points to a location
that is relative to the root directory of the site.
They begin with a slash “/”. Having a link to
“/index.html” is a site root-relative link that
points to the “index.html” page in the root
directory of the site. One common use of this
is to have all images in an images directory
and then to link to images with links like
“/images/mypic.jpg”.
34. 3- Absolute Links
An absolute link is simply one that
includes the entire path to the file like
“http://www.contoso.com/news/index.html”
. These are generally used for links that
need to point to a different site than the
one on which your page is located.