SlideShare ist ein Scribd-Unternehmen logo
1 von 71
Internet Technology
University Of Salahaddin
Engineering College
Software Engineering
2009-2010
Introduction
In this course we will be familiar with the methods
and technologies that enable you to build web sites
and other applications that run on the browsers.
Generally, programming for these kind of
applications are more simpler than real applications,
because here we use scripting languages which they
are simpler than compiled languages (like java).
Also we use HTML for building user interfaces
which is more easier than programming language.
Internet Technology 2
Objectives Of This Course
• Introduce you to the technologies and techniques that used to build
web pages.
• Introduce you to standards on the web.
• Showing you best practice to build a web site.
• Learn good IDEs to write your code.
• Connecting your site to databases for dynamic web sites.
• Introduction for Web based Applications.
Internet Technology 3
Main Subjects & Technologies
1. HTML
2. CSS
3. JavaScript
4. PHP
5. MySql
Internet Technology 4
Client Side Server Side
Rendering StorageScripting Languages
Introduction
Why you should learn all these stuff:
1. Build websites.
2. Build web based applications.
3. Know the Internet better.
Internet Technology 5
World Wide Web
The World Wide Web ("WWW', "Web" or "W3")
is the universe of network-accessible information, the
embodiment of human knowledge.
The World Wide Web began as a networked
information project at CERN, where Tim Berners-Lee,
developed a vision of the project.
The Web has a body of software, and a set of
protocols and conventions. Through the use hypertext
and multimedia techniques, the web is easy for
anyone to roam, browse, and contribute to. An early
talk about the Web gives some more background on
how the Web was originally conceived.
Internet Technology 6
History Of World Wide Web
WWW is a global information medium which
users can read and write via computers connected to
the Internet. The term is often mistakenly used as a
synonym for the Internet itself, but the Web is a
service that operates over the Internet, as e-mail
does.
1980–1991:Development of the World Wide Web
1992–1995: Growth of the WWW
1996–1998: Commercialization of the WWW
1999–2001: "Dot-com" boom and bust
2002–present: The Web becomes ubiquitous
Internet Technology 7
Timothy Berners-Lee
Was born in London,
United Kingdom, on
8/6/1955, is a British
engineer and computer
scientist and MIT
professor credited with
inventing the World
Wide Web. Now he is
Director of W3C.
Web 2.0
Internet Technology 8
Web 2.0 is commonly associated with web development and web
design that facilitates interactive information sharing, interoperability,
user-centered design and collaboration on the World Wide Web. Examples
of Web 2.0 include web-based communities, hosted services, web
applications, social-networking sites, video-sharing sites, wikis, blogs,
mashups.
Web 2.0 websites typically include some of the following features:
Search: Finding information through keyword search.
Links: Guides to other related information.
Authoring: The ability to create and update content of the site.
Tags: Categorization of content by users adding descriptions.
Extensions: Software that makes the Web an application platform as
well as a document server.
Signals: The use of syndication technology such as RSS to notify users of
content changes
Internet
Internet Technology 9
The Internet is a global system of interconnected computer networks
that use the standardized Internet Protocol Suite (TCP/IP) to serve billions
of users worldwide.
It is a network of networks that consists of millions of private and
public, academic, business, and government networks of local to global
scope that are linked by copper wires, fiber-optic cables, wireless
connections, and other technologies.
The Internet carries a vast array of information resources and services,
most notably the inter-linked hypertext documents of the WWW and the
infrastructure to support electronic mail. In addition it supports popular
services such as online chat, file transfer and file sharing, gaming,
commerce, social networking, publishing, video on demand,
teleconferencing and. Voice over Internet Protocol (VoIP) applications
allow person-to-person communication via voice and video.
Internet (cont)
Internet Technology 10
The origins of the Internet reach back to the 1960s when the United
States funded research projects of its military agencies to build robust,
fault-tolerant and distributed computer networks called ARPANET which
connected two computers.
This research and a period of civilian funding of a new U.S. backbone
by the National Science Foundation spawned worldwide participation in
the development of new networking technologies and led to the
commercialization of an international network in the mid 1990s, and
resulted in the following popularization of countless applications in
virtually every aspect of modern human life.
As of 2009, it estimated a quarter of Earth's population uses the
services of the Internet.
World Wide Web
Arguably the future of web and internet will include:
1. Semantic Web
2. Artificial Intelligence
3. Virtual Worlds
4. Mobile
5. Attention Economy
6. Online Video / Internet TV
7. Rich Internet Apps
8. Personalization
Internet Technology 11
Web Browsers
A web browser is a software application for
retrieving, presenting, and traversing information
resources on the World Wide Web.
An information resource is identified by a Uniform
Resource Identifier (URI) and may be a web page,
image, video, or other piece of content. Hyperlinks
present in resources enable users to easily navigate
their browsers to related resources.
Although browsers are primarily intended to access
the World Wide Web, they can also be used to access
information provided by web servers in private
networks or files in file systems.
Internet Technology 12
WorldWideWeb
WorldWideWeb was the world's first web browser. It was introduced on
1991, by Tim Berners-Lee. It was later renamed Nexus.
Internet Technology 13
Features
• Displaying basic style sheets
• Download and open files
• Browsing newsgroups
• Spellchecking
• It was also an editor
• It works on NeXTSTEP
Windows Internet Explorer
Windows Internet Explorer (abbreviated to MSIE or, IE), developed by
Microsoft and included as part of the Microsoft Windows.
Internet Technology 14
Features
• Supports HTML4, CSS1,
XML1, DOM1 and XSLT1.
• Does not support XHTML,
SVG.
• Pop-up blocking and tabbed
browsing.
• Caches visited content.
• Quirks mode.
Mozilla Firefox
Mozilla Firefox is a free and open source web browser descended from the
Mozilla Application Suite and managed by Mozilla Corporation.
Internet Technology 15
Features
• Include tabbed browsing,
spell checking, incremental
find, live bookmarking and
download manager
•Supports XML, XHTML, SVG,
MathML, CSS, ECMAScript,
DOM, XSLT, Xpath and PNG.
•Has sandbox security model
• Highly Customizable by
using add-ons.
•Runs on Mac OS X, Microsoft
Windows, Linux. Portable
edition for Windows
Safari
Safari is a web browser developed by Apple Inc. First released as a public
beta on 7 January 2003 on the company's Mac OS X operating system
Internet Technology 16
Features
•Runs on Mac OS X, iPhone,
Windows.
•Supports ICC, CSS, Inline PDF
viewing, Mail integration,
webpage clips, Private
Browsing.
•Quartz-style font-smoothing.
•Uses Apple's WebKit for
rendering web pages and
running JavaScript.
Opera
Is developed by Opera company. It handles Internet tasks such as
displaying websites, e-mails, contacts, IRC, BitTorrent, web feeds.
Internet Technology 17
Features:
• Supports fit to window,
page zooming , voice control
and Content blocker
•Runs on Microsoft Windows,
Mac OS X and Linux.
•Opera Mini is designed for
mobile phones
•mouse gestures.
Web Browsers
Google Chrome is a web browser released by Google which uses the
WebKit. It was first released as a beta for Windows on 2 September 2008
Internet Technology 18
Features
•V8 JavaScript engine.
•minimalistic user interface.
•includes Gears, which adds
features for web developers
typically relating to the
building of web applications
(including offline support).
•The Gears team was
considering a multithreaded
browser.
• Updates of two blacklists
(one for phishing and one for
malware)
Netscape Navigator
Netscape was popular in the 1990s, is product of the Netscape Comm.
Corp., later purchased by AOL. Stopped at Navigator on 1 March 2008
Internet Technology 19
Features
•Important new features
included cookies, frames, and
JavaScript (in version 2.0).
•Netscape has been criticized
for following actual web
standards poorly.
•The extra functions enlarged
and slowed the software,
rendering it prone to
crashing.
Web Browsers War
Web browsers war began at mid 90s between Netscape and IE, then FF
and IE, now there are a triple war IE Vs FF Vs Google Chrome. Who can win
users heart!!
Internet Technology 20
Web Browsers War
Internet Technology 21
Exercises
1- Write one page explaining your idea on browsers,
which Browser is faster, safer, renders better and easier
to use. You can go to the
http://service.futuremark.com/peacekeeper/index.action
for bench marking. Find out others by your self
Internet Technology 22
HTML
HTML, stands for Hyper Text Markup Language, is
the predominant markup language for web pages. It
provides a means to create structured documents by
denoting structural semantics for text such as
headings, paragraphs, lists etc.
As well as for links, quotes, and other items. It
allows images and objects to be embedded and can be
used to create interactive forms.
Put most simply, HTML, is a format that tells a
computer how to display a web page. The documents
themselves are plain text files (ASCII) with special Tags
or codes that a web browser knows how to interpret
and display on your screen.
Internet Technology 23
Why Learn HTML?
It is possible to create web pages without knowing anything about the
HTML source behind the page. There are excellent editors on the market
that will take care of the HTML parts. All you need to do is layout the
page.
However, if you want to make it above average in web design, it is
strongly recommended that you understand these tags. The most
important benefits are:
1. You can use tags the editor does not support.
2. You can read the code of other people's pages, and "borrow" the
cool effects.
3. You can do the work yourself, when the editor simply refuses to
create the effects you want.
4. You can write your HTML by hand with almost any available text
editor, including notepad that comes as a standard program with
Windows.
Internet Technology 24
HTML Tags and Elements
In an HTML document, HTML elements are tags, as well as text, which
act as indicators to a web browser as to how the document is to be
interpreted by the browser and ultimately presented on the
user's computer screen.
HTML elements are SGML “Standard Generalized Markup
Language” elements that meet the requirements of one or more of the
HTMLDocument Type Definitions (DTDs). These elements have properties:
both attributes and content.
Internet Technology 25
HTML Attributes
Attributes appear within tags, and they can only contain the value of
the attribute, for instance:
<p class=“example">Here is some text</p>
An attribute can contain multiple, space-separated values, which is
useful if you need to apply different classes to one element. For instance:
<p class="example reference"> Here is some text</p>
There are many attributes, some element-specific (like the selected
attribute used with the <option> tag) and some not (like the class and id
attributes).
Internet Technology 26
HTML Document Structure
HTML documents “also informally called web pages” contain HTML
tags and plain text to describe web pages.
The purpose of a web browser (like Internet Explorer or Firefox) is to
read HTML documents and display them as web pages. The browser does
not display the HTML tags, but uses the tags to interpret the content of the
page. The basic structure of an HTML document is:
Internet Technology 27
HTML Editor
There are many good Editors that helps developer for writing HTML pages
but for now you will stick with NotePad++ till you get familiar with HTML
elements to use this editor follow these steps:
Internet Technology 28
1. Download it from
(notepad-
plus.sourceforge.net)
2. Install it.
3. From Languages menu
bar select HTML.
4. Save your files as .html
extension.
HTML Attributes
In the body tag you can write text which appears at the web page as:
But what if you want to have formatted texts:
1. Separate headers from body format
2. Bold, italic, underline texts
3. Centered, justified and right and left alignments
4. Subscripts and superscripts
5. Moving texts
6. Breaking and not braking lines
7. Etc.
Internet Technology 29
<HTML>
<Head></Head>
<Body>
This boring Text will appear at
your browser
</body>
</HTML>
Header Tags H#
There are six special tags for creating headers <H#></H#>, any header text
will be bold and has its own paragraph
Internet Technology 30
Pluto Is Not a Planet
Internet Technology 31
H# Attributes
Headers Attributes are mostly general ones which means they are
exists for most of the other HTML elements. Then we will discuss them
here once and it is valid for other Tags when we cover them, here are the
list of all Attributes:
1. Document-wide identifiers: id, class
2. Language information: lang
3. Text direction :dir
4. Element title: title
5. Inline style information: style
6. Alignment : align
7. Intrinsic events: onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup
Internet Technology 32
Element Identifiers (Id)
The id attribute assigns a unique identifier to an element (which may
be verified by an SGML parser). For example, the following paragraphs are
distinguished by their id values:
<H2 id="myparagraph"> This is a uniquely named paragraph.</H2>
<H1 id="yourparagraph"> This is also a uniquely named.</H1>
The id attribute has several roles in HTML:
1. As a style sheet selector.
2. As a target anchor for hypertext links.
3. As a means to reference a particular element from a script.
4. As the name of a declared OBJECT element.
Note: Do NOT worry if you don’t understand all of these at once we
will cover them later
Internet Technology 33
Element Identifiers (Class)
The class attribute, on the other hand, assigns one or more class
names to an element; the element may be said to belong to these classes.
A class name may be shared by several element instances. The class
attribute has As a style sheet selector several role in HTML.
<H1 id="msg1" class="info" Variable declared twice</H1>
<H1 id="msg2" class="warning" Undeclared variable</H1>
<H5 id="msg3" class=" info "Bad syntax for variable name</H5>
Internet Technology 34
Specifying Language (Lang)
Language information specified via the lang attribute may be used by a
user agent to control rendering in a variety of ways. Some situations where
author-supplied language information may be helpful include:
1. Assisting search engines
2. Assisting speech synthesizers
3. Helping a user agent select glyph variants for high quality typography
4. Helping a user agent choose a set of quotation marks
5. Helping a user agent make decisions about hyphenation, ligatures
6. Assisting spell checkers and grammar checkers
For instance, if characters from the Greek alphabet appear in the midst
of English text:
<H1 lang = “en”>This is English Text</H1>
<H1 lang = “fr”>This is Not English Text </H1>
<H1 lang = “ar-iq”>This is Arabic Text </H1>
Internet Technology 35
Text Direction (Dir)
dir = LTR | RTL
This attribute specifies the base direction of directionally neutral text
(i.e., text that doesn't have inherent directionality as defined in
[UNICODE]) in an element's content and attribute values. It also specifies
the directionality of tables. Possible values:
LTR: Left-to-right text or table.
RTL: Right-to-left text or table.
<H1 dir=“ltr“> This is Text</H1>
Internet Technology 36
Element Title (Title)
Unlike the TITLE element, which provides information about an entire
document and may only appear once, the title attribute may annotate any
number of elements.
Internet Technology 37
HTML Attributes
The syntax of the value of the style attribute is determined by the
default style sheet language.
This CSS example sets color and font size information for the text in a
specific paragraph.
Internet Technology 38
Alignment (Align)
Deprecated. This attribute specifies the horizontal alignment of its
element with respect to the surrounding context. Possible values:
left: text lines are rendered flush left.
center: text lines are centered.
right: text lines are rendered flush right.
justify: text lines are justified to both margins.
Internet Technology 39
Intrinsic Events
1. Onload: event occurs when the user agent finishes loading a window or all
frames within a FRAMESET. This attribute may be used with BODY and
FRAMESET elements.
2. Onunload: event occurs when the user agent removes a document from a
window or frame. This attribute may be used with BODY and FRAMESET
elements.
3. Onclick: event occurs when the pointing device button is clicked over an
element. This attribute may be used with most elements.
4. Ondblclick: event occurs when the pointing device button is double clicked
over an element. This attribute may be used with most elements.
5. Onmousedown: event occurs when the pointing device button is pressed
over an element. This attribute may be used with most elements.
6. Onmouseup: event occurs when the pointing device button is released over
an element. This attribute may be used with most elements.
7. Onmouseover: event occurs when the pointing device is moved onto an
element. This attribute may be used with most elements.
Internet Technology 40
HTML Attributes (cont)
8. Onmousemove: event occurs when the pointing device is moved while it is
over an element. This attribute may be used with most elements.
9. Onmouseout: event occurs when the pointing device is moved away from an
element. This attribute may be used with most elements.
10. Onfocus: event occurs when an element receives focus either by the pointing
device or by tabbing navigation. This attribute may be used with the following
elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
11. Onblur: event occurs when an element loses focus either by the pointing
device or by tabbing navigation. It may be used with the same elements as
onfocus.
12. Onkeypress: event occurs when a key is pressed and released over an
element. This attribute may be used with most elements.
13. Onkeydown: event occurs when a key is pressed down over an element. This
attribute may be used with most elements.
14. Onkeyup: event occurs when a key is released over an element. This attribute
may be used with most elements.
Internet Technology 41
HTML Attributes (cont)
15. Onsubmit: event occurs when a form is submitted. It only applies to the
FORM element.
16. Onreset: event occurs when a form is reset. It only applies to the FORM
element.
17. Onselect: event occurs when a user selects some text in a text field. This
attribute may be used with the INPUT and TEXTAREA elements.
18. Onchange: event occurs when a control loses the input focus and its value
has been modified since gaining focus. This attribute applies to the following
elements: INPUT, SELECT, and TEXTAREA.
Internet Technology 42
Font Style Elements
Rendering of font style elements depends on the user agent. The
following is an informative description only.
• TT: Renders as teletype or monospaced text.
• I: Renders as italic text style.
• B: Renders as bold text style.
• BIG: Renders text in a "large" font.
• SMALL: Renders text in a "small" font.
• STRIKE and S: Deprecated. Render strike-through style text.
• U: Deprecated. Renders underlined text.
The following sentence shows several types of text
Internet Technology 43
Font Style Elements (cont)
Internet Technology 44
Font Modifier
The FONT element changes the font size and color for text in its
contents. This element is deprecated (but it can be used till now)
Extra attribute definitions of the font tag:
1. SIZE : This attribute sets the size of the font. Possible values: An integer
between 1 and 7. This sets the font to some fixed size, whose
rendering depends on the user agent. Not all user agents may render
all seven sizes. A relative increase in font size. The value "+1" means
one size larger. The value "-3" means three sizes smaller. All sizes
belong to the scale of 1 to 7.
2. COLOR : This attribute sets the text color.
3. FACE : This attribute defines a comma-separated list of font names the
user agent should search for in order of preference.
Internet Technology 45
HTML Colors
The attribute value type "color" refers to color definitions as specified
in RGB (Red, Green, Blue). A color value may either be a hexadecimal
number (prefixed by a hash mark) or one of the following sixteen color
names. The hexadecimal value has the following format #RRGGBB where
RR, GG, and BB == 00 to FF (OR from 0 to 255 as decimal equivalent).
Common Color names and RGB values in HTML:
Internet Technology 46
HTML Colors (cont)
Internet Technology 47
From Photoshop
http://www.iconico.com/colorpic/
Structured Text
Phrase elements add structural information to text fragments. The
usual meanings of phrase elements are following:
1. EM: Indicates emphasis.
2. STRONG: Indicates stronger emphasis.
3. CITE: Contains a citation or a reference to other sources.
4. DFN: Indicates that this is the defining instance of the enclosed term.
5. CODE: Designates a fragment of computer code.
6. SAMP: Designates sample output from programs, scripts, etc.
7. KBD: Indicates text to be entered by the user.
8. VAR: Indicates an instance of a variable or program argument.
9. ABBR: Indicates an abbreviated form.
10. ACRONYM: Indicates an acronym (e.g., WAC, radar, etc.).
Note: some of these elements has an alternative with font formatting
elements and its recommended to use these ones because they present
structural documents. But personally I never use these ones!
Internet Technology 48
Subscripts & Superscripts
Many scripts (e.g., French) require superscripts or subscripts for proper
rendering. The SUB and SUP elements should be used to markup text in
these cases.
Internet Technology 49
Grouping Elements
The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents.
These elements define content to be inline (SPAN) or block-level (DIV) but
impose no other presentational idioms on the content.
The P (Paragraph) element represents a paragraph. It cannot contain
block-level elements (including P itself).
We discourage authors from using empty P elements. User agents
should ignore empty P elements.
Internet Technology 50
Grouping Elements
Internet Technology 51
Forcing A Line Break
The BR element forcibly breaks (ends) the current line of text.
Clear is another attribute, controls text flow around floating objects.
Specifies where the next line should appear in a visual browser after the
line break caused by this element. This attribute takes into account floating
objects (images, tables, etc.). Possible values:
1. none: The next line will begin normally. This is the default value.
2. left: The next line will begin at nearest line below any floating objects on the
left-hand margin.
3. right: The next line will begin at nearest line below any floating objects on the
right-hand margin.
4. all: The next line will begin at nearest line below any floating objects on either
margin.
NOTE: Test this and find more info on this attribute
Internet Technology 52
Rules
The HR element causes a horizontal rule to be rendered by visual user
agents. The amount of vertical space inserted between a rule and the
content that surrounds it depends on the user agent.
Additional attributes:
1. Noshade: When set, this Boolean attribute requests that the user
agent render the rule in a solid color rather than as the traditional two-
color "groove".
2. Size: This attribute specifies the height of the rule. The default value
for this attribute depends on the user agent.
3. Width: This attribute specifies the width of the rule. The default width
is 100%, i.e., the rule extends across the entire canvas.
Internet Technology 53
Star Gate
Internet Technology 54
Sliders
Internet Technology 55
HTML Comments
HTML comments have the following syntax:
Start of comment : <!--
End of comment : -->
Example:
Internet Technology 56
Tables
The HTML table model allows authors to arrange data -- text,
preformatted text, images, links, forms, form fields, other tables, etc. --
into rows and columns of cells. You can create a table by simply open and
close table tags <Table></Table> but this is alone will do nothing .
Additional table attributes :
1. summary :This attribute provides a summary of the table's purpose
and structure for user agents rendering to non-visual media such as
speech and Braille.
2. bgcolor : This attribute sets the background color for the document
body or table cells
3. border = pixels:This attributes specifies the width of the frame around
a table.
Internet Technology 57
Tables (cont)
5. cellspacing = length: The attribute specifies
the amount of space to leave between cells.
6. cellpadding = length: This attribute
specifies the amount of space between the
border of the cell and its contents.
7. Frame= This attribute specifies which sides
of the frame surrounding a table will be
visible. Possible values:
• void: No sides. This is the default value.
• above: The top side only.
• below: The bottom side only.
• hsides: The top and bottom sides only.
• vsides: The right and left sides only.
• lhs: The left-hand side only.
• rhs: The right-hand side only.
• box: All four sides.
• border: All four sides.
Internet Technology 58
Tables (cont)
8. Rules = This attribute specifies which rules will appear between cells
within a table. The rendering of rules is user agent dependent.
Possible values:
• none: No rules. This is the default value.
• groups: Rules will appear between row groups and column
groups only.
• rows: Rules will appear between rows only.
• cols: Rules will appear between columns only.
• all: Rules will appear between all rows and columns.
Internet Technology 59
Table Rows
The TR elements acts as a container for a row of table cells. The end
tag may be omitted.
This sample table contains three rows, each begun by the TR element:
Additional Attributes:
valign = top|middle|bottom|baseline: This attribute specifies the vertical
position of data within a cell.
Internet Technology 60
Table Cells: The TH and TD elements
There are two tags first is TH which indicates table header and the
second is TD for table data these two tags are used to create cells inside
rows or columns
Attributes of these elements :
1. abbr =This attribute should be used to provide an abbreviated form of
the cell's content.
2. axis = This attribute may be used to place a cell into conceptual
categories that can be considered to form axes in an n-dimensional
space.
3. rowspan = This attribute specifies the number of rows spanned by the
current cell.
4. colspan = This attribute specifies the number of columns spanned by
the current cell.
5. nowrap When present, it disables automatic text wrapping for this
cell.
Internet Technology 61
Tables (cont)
Internet Technology 62
Tables (cont)
Internet Technology 63
Poverty In The World
Internet Technology 64
Poverty In The World (cont)
Internet Technology 65
Poverty In The World (cont)
Kevin Carter’s Pulitzer
Prize winning photo taken
in 1994 during the Sudan
famine. The picture
depicts a famine stricken
child being stalked by a
vulture. The child is
crawling towards a UN
food camp, located a
kilometer away.
Internet Technology 66
Lists
HTML offers authors several mechanisms for specifying lists of information.
All lists must contain one or more list elements. Lists may contain:
1. Unordered information.
2. Ordered information.
3. Definitions.
unordered list, created with the UL element:
Internet Technology 67
Unordered lists (UL), ordered lists (OL), and list items (LI)
Internet Technology 68
An ordered list, created using the OL element, should contain
information where order should be emphasized
Unordered lists (UL), ordered lists (OL), and list items (LI)
Internet Technology 69
1. type = This attribute sets the style of a list item.
2. start = For OL only. This attribute specifies the starting
number of the first item in an ordered list.
3. value = For LI only. This attribute sets the number of the
current list item.
4. Compact= When set, this boolean attribute gives a hint to
visual user agents to render the list in a more compact way.
The interpretation of this attribute depends on the user
agent.
Definition
Internet Technology 70
Definition lists, created using the DL element, generally consist of a
series of term/definition pairs (although definition lists may have other
applications). Thus, when advertising a product, one might use a
definition list:
HTML
Internet Technology 71

Weitere ähnliche Inhalte

Was ist angesagt?

Grade 8: Introduction To Java
Grade 8: Introduction To JavaGrade 8: Introduction To Java
Grade 8: Introduction To Javanandanrocker
 
Summer training report on java se6 technology
Summer training  report on java se6 technologySummer training  report on java se6 technology
Summer training report on java se6 technologyShamsher Ahmed
 
A Comparison of .NET Framework vs. Java Virtual Machine
A Comparison of .NET Framework vs. Java Virtual MachineA Comparison of .NET Framework vs. Java Virtual Machine
A Comparison of .NET Framework vs. Java Virtual MachineAbdelrahman Hosny
 
Introduction to java
Introduction to javaIntroduction to java
Introduction to javashwanjava
 
Advance java summer training report
Advance java summer training report Advance java summer training report
Advance java summer training report Nitesh Saini
 
Comparison of Programming Platforms
Comparison of Programming PlatformsComparison of Programming Platforms
Comparison of Programming PlatformsAnup Hariharan Nair
 
C,c++,java,php,.net training institute in delhi, best training institute for ...
C,c++,java,php,.net training institute in delhi, best training institute for ...C,c++,java,php,.net training institute in delhi, best training institute for ...
C,c++,java,php,.net training institute in delhi, best training institute for ...MCM COmpetitive Classes
 
Introduction to java
Introduction to java Introduction to java
Introduction to java Java Lover
 
PHP, Java EE & .NET Comparison
PHP, Java EE & .NET ComparisonPHP, Java EE & .NET Comparison
PHP, Java EE & .NET ComparisonHaim Michael
 
Important features of java
Important features of javaImportant features of java
Important features of javaAL- AMIN
 
JAVA Developer_Resume_Vaibhav Srivastav
JAVA Developer_Resume_Vaibhav SrivastavJAVA Developer_Resume_Vaibhav Srivastav
JAVA Developer_Resume_Vaibhav SrivastavVaibhav Srivastav
 

Was ist angesagt? (19)

Grade 8: Introduction To Java
Grade 8: Introduction To JavaGrade 8: Introduction To Java
Grade 8: Introduction To Java
 
Java vs python
Java vs pythonJava vs python
Java vs python
 
Summer training report on java se6 technology
Summer training  report on java se6 technologySummer training  report on java se6 technology
Summer training report on java se6 technology
 
Introduction to JAVA
Introduction to JAVAIntroduction to JAVA
Introduction to JAVA
 
A Comparison of .NET Framework vs. Java Virtual Machine
A Comparison of .NET Framework vs. Java Virtual MachineA Comparison of .NET Framework vs. Java Virtual Machine
A Comparison of .NET Framework vs. Java Virtual Machine
 
Introduction to java
Introduction to javaIntroduction to java
Introduction to java
 
Advance java summer training report
Advance java summer training report Advance java summer training report
Advance java summer training report
 
Comparison of Programming Platforms
Comparison of Programming PlatformsComparison of Programming Platforms
Comparison of Programming Platforms
 
Java Programming
Java ProgrammingJava Programming
Java Programming
 
C,c++,java,php,.net training institute in delhi, best training institute for ...
C,c++,java,php,.net training institute in delhi, best training institute for ...C,c++,java,php,.net training institute in delhi, best training institute for ...
C,c++,java,php,.net training institute in delhi, best training institute for ...
 
Introduction to java
Introduction to java Introduction to java
Introduction to java
 
PHP, Java EE & .NET Comparison
PHP, Java EE & .NET ComparisonPHP, Java EE & .NET Comparison
PHP, Java EE & .NET Comparison
 
Java1
Java1Java1
Java1
 
Analysis
AnalysisAnalysis
Analysis
 
String class
String classString class
String class
 
Industrial Training report on java
Industrial  Training report on javaIndustrial  Training report on java
Industrial Training report on java
 
Important features of java
Important features of javaImportant features of java
Important features of java
 
Java unit 1
Java unit 1Java unit 1
Java unit 1
 
JAVA Developer_Resume_Vaibhav Srivastav
JAVA Developer_Resume_Vaibhav SrivastavJAVA Developer_Resume_Vaibhav Srivastav
JAVA Developer_Resume_Vaibhav Srivastav
 

Ähnlich wie HTML for beginners

UNIT-1.pptx that contains the web and internet of tecnology
UNIT-1.pptx that contains the web and internet of tecnologyUNIT-1.pptx that contains the web and internet of tecnology
UNIT-1.pptx that contains the web and internet of tecnologyrssvsa181514
 
Internet application unit2
Internet application unit2Internet application unit2
Internet application unit2MSc CST
 
Report on browser war
Report on browser warReport on browser war
Report on browser warAmandeep Kaur
 
Cmsc 100 (web programming in a nutshell)
Cmsc 100 (web programming in a nutshell)Cmsc 100 (web programming in a nutshell)
Cmsc 100 (web programming in a nutshell)MaeEstherMaguadMaralit
 
Computer communication and internet
Computer communication and internetComputer communication and internet
Computer communication and interneteVidhya
 
The Concepts of Internet and Networking.pptx
The Concepts of Internet and Networking.pptxThe Concepts of Internet and Networking.pptx
The Concepts of Internet and Networking.pptxRoshni814224
 
Web tehnology
Web tehnologyWeb tehnology
Web tehnologygurchet
 
CoverStory_Evolution_of_Internet_sept14
CoverStory_Evolution_of_Internet_sept14CoverStory_Evolution_of_Internet_sept14
CoverStory_Evolution_of_Internet_sept14Hardik Gohel
 
Open web platform talk by daniel hladky at rif 2012 (19 april 2012 moscow)
Open web platform talk by daniel hladky at rif 2012 (19 april 2012   moscow)Open web platform talk by daniel hladky at rif 2012 (19 april 2012   moscow)
Open web platform talk by daniel hladky at rif 2012 (19 april 2012 moscow)AI4BD GmbH
 
Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010Mahesh Panchal
 
Web Technologies Introduction to web technologies
Web Technologies Introduction to web technologiesWeb Technologies Introduction to web technologies
Web Technologies Introduction to web technologiesVigneshkumar Ponnusamy
 
Introduction to Internet Browsers
Introduction to Internet BrowsersIntroduction to Internet Browsers
Introduction to Internet BrowsersProf Ansari
 
webbrowser-130309124651-phpapp02.pdf
webbrowser-130309124651-phpapp02.pdfwebbrowser-130309124651-phpapp02.pdf
webbrowser-130309124651-phpapp02.pdfjacky484144
 
Module 103: Internet Technologies
Module 103: Internet TechnologiesModule 103: Internet Technologies
Module 103: Internet TechnologiesNeishaB
 

Ähnlich wie HTML for beginners (20)

9 10 july2020
9 10 july20209 10 july2020
9 10 july2020
 
UNIT-1.pptx that contains the web and internet of tecnology
UNIT-1.pptx that contains the web and internet of tecnologyUNIT-1.pptx that contains the web and internet of tecnology
UNIT-1.pptx that contains the web and internet of tecnology
 
1 web overview
1 web overview1 web overview
1 web overview
 
Internet application unit2
Internet application unit2Internet application unit2
Internet application unit2
 
Report on browser war
Report on browser warReport on browser war
Report on browser war
 
Teknologi Aplikasi Web I : Internet
Teknologi Aplikasi Web I : InternetTeknologi Aplikasi Web I : Internet
Teknologi Aplikasi Web I : Internet
 
Cmsc 100 (web programming in a nutshell)
Cmsc 100 (web programming in a nutshell)Cmsc 100 (web programming in a nutshell)
Cmsc 100 (web programming in a nutshell)
 
Computer communication and internet
Computer communication and internetComputer communication and internet
Computer communication and internet
 
The Concepts of Internet and Networking.pptx
The Concepts of Internet and Networking.pptxThe Concepts of Internet and Networking.pptx
The Concepts of Internet and Networking.pptx
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Web tehnology
Web tehnologyWeb tehnology
Web tehnology
 
CoverStory_Evolution_of_Internet_sept14
CoverStory_Evolution_of_Internet_sept14CoverStory_Evolution_of_Internet_sept14
CoverStory_Evolution_of_Internet_sept14
 
Browsers 2
Browsers 2Browsers 2
Browsers 2
 
Open web platform talk by daniel hladky at rif 2012 (19 april 2012 moscow)
Open web platform talk by daniel hladky at rif 2012 (19 april 2012   moscow)Open web platform talk by daniel hladky at rif 2012 (19 april 2012   moscow)
Open web platform talk by daniel hladky at rif 2012 (19 april 2012 moscow)
 
Module 1.pptx
Module 1.pptxModule 1.pptx
Module 1.pptx
 
Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010Wd & im session a1_internet infrastructure_march 03,2010
Wd & im session a1_internet infrastructure_march 03,2010
 
Web Technologies Introduction to web technologies
Web Technologies Introduction to web technologiesWeb Technologies Introduction to web technologies
Web Technologies Introduction to web technologies
 
Introduction to Internet Browsers
Introduction to Internet BrowsersIntroduction to Internet Browsers
Introduction to Internet Browsers
 
webbrowser-130309124651-phpapp02.pdf
webbrowser-130309124651-phpapp02.pdfwebbrowser-130309124651-phpapp02.pdf
webbrowser-130309124651-phpapp02.pdf
 
Module 103: Internet Technologies
Module 103: Internet TechnologiesModule 103: Internet Technologies
Module 103: Internet Technologies
 

Mehr von Salahaddin University-Erbil (7)

C++ for beginners
C++ for beginnersC++ for beginners
C++ for beginners
 
Advanced Java Topics
Advanced Java TopicsAdvanced Java Topics
Advanced Java Topics
 
Reporter 6 web
Reporter  6 webReporter  6 web
Reporter 6 web
 
Object-Oriented Programming Using C++
Object-Oriented Programming Using C++Object-Oriented Programming Using C++
Object-Oriented Programming Using C++
 
Introduction to Procedural Programming in C++
Introduction to Procedural Programming in C++Introduction to Procedural Programming in C++
Introduction to Procedural Programming in C++
 
40 Nawawi
40 Nawawi40 Nawawi
40 Nawawi
 
Olap
OlapOlap
Olap
 

Kürzlich hochgeladen

BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 

Kürzlich hochgeladen (20)

INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 

HTML for beginners

  • 1. Internet Technology University Of Salahaddin Engineering College Software Engineering 2009-2010
  • 2. Introduction In this course we will be familiar with the methods and technologies that enable you to build web sites and other applications that run on the browsers. Generally, programming for these kind of applications are more simpler than real applications, because here we use scripting languages which they are simpler than compiled languages (like java). Also we use HTML for building user interfaces which is more easier than programming language. Internet Technology 2
  • 3. Objectives Of This Course • Introduce you to the technologies and techniques that used to build web pages. • Introduce you to standards on the web. • Showing you best practice to build a web site. • Learn good IDEs to write your code. • Connecting your site to databases for dynamic web sites. • Introduction for Web based Applications. Internet Technology 3
  • 4. Main Subjects & Technologies 1. HTML 2. CSS 3. JavaScript 4. PHP 5. MySql Internet Technology 4 Client Side Server Side Rendering StorageScripting Languages
  • 5. Introduction Why you should learn all these stuff: 1. Build websites. 2. Build web based applications. 3. Know the Internet better. Internet Technology 5
  • 6. World Wide Web The World Wide Web ("WWW', "Web" or "W3") is the universe of network-accessible information, the embodiment of human knowledge. The World Wide Web began as a networked information project at CERN, where Tim Berners-Lee, developed a vision of the project. The Web has a body of software, and a set of protocols and conventions. Through the use hypertext and multimedia techniques, the web is easy for anyone to roam, browse, and contribute to. An early talk about the Web gives some more background on how the Web was originally conceived. Internet Technology 6
  • 7. History Of World Wide Web WWW is a global information medium which users can read and write via computers connected to the Internet. The term is often mistakenly used as a synonym for the Internet itself, but the Web is a service that operates over the Internet, as e-mail does. 1980–1991:Development of the World Wide Web 1992–1995: Growth of the WWW 1996–1998: Commercialization of the WWW 1999–2001: "Dot-com" boom and bust 2002–present: The Web becomes ubiquitous Internet Technology 7 Timothy Berners-Lee Was born in London, United Kingdom, on 8/6/1955, is a British engineer and computer scientist and MIT professor credited with inventing the World Wide Web. Now he is Director of W3C.
  • 8. Web 2.0 Internet Technology 8 Web 2.0 is commonly associated with web development and web design that facilitates interactive information sharing, interoperability, user-centered design and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups. Web 2.0 websites typically include some of the following features: Search: Finding information through keyword search. Links: Guides to other related information. Authoring: The ability to create and update content of the site. Tags: Categorization of content by users adding descriptions. Extensions: Software that makes the Web an application platform as well as a document server. Signals: The use of syndication technology such as RSS to notify users of content changes
  • 9. Internet Internet Technology 9 The Internet is a global system of interconnected computer networks that use the standardized Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of millions of private and public, academic, business, and government networks of local to global scope that are linked by copper wires, fiber-optic cables, wireless connections, and other technologies. The Internet carries a vast array of information resources and services, most notably the inter-linked hypertext documents of the WWW and the infrastructure to support electronic mail. In addition it supports popular services such as online chat, file transfer and file sharing, gaming, commerce, social networking, publishing, video on demand, teleconferencing and. Voice over Internet Protocol (VoIP) applications allow person-to-person communication via voice and video.
  • 10. Internet (cont) Internet Technology 10 The origins of the Internet reach back to the 1960s when the United States funded research projects of its military agencies to build robust, fault-tolerant and distributed computer networks called ARPANET which connected two computers. This research and a period of civilian funding of a new U.S. backbone by the National Science Foundation spawned worldwide participation in the development of new networking technologies and led to the commercialization of an international network in the mid 1990s, and resulted in the following popularization of countless applications in virtually every aspect of modern human life. As of 2009, it estimated a quarter of Earth's population uses the services of the Internet.
  • 11. World Wide Web Arguably the future of web and internet will include: 1. Semantic Web 2. Artificial Intelligence 3. Virtual Worlds 4. Mobile 5. Attention Economy 6. Online Video / Internet TV 7. Rich Internet Apps 8. Personalization Internet Technology 11
  • 12. Web Browsers A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of content. Hyperlinks present in resources enable users to easily navigate their browsers to related resources. Although browsers are primarily intended to access the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems. Internet Technology 12
  • 13. WorldWideWeb WorldWideWeb was the world's first web browser. It was introduced on 1991, by Tim Berners-Lee. It was later renamed Nexus. Internet Technology 13 Features • Displaying basic style sheets • Download and open files • Browsing newsgroups • Spellchecking • It was also an editor • It works on NeXTSTEP
  • 14. Windows Internet Explorer Windows Internet Explorer (abbreviated to MSIE or, IE), developed by Microsoft and included as part of the Microsoft Windows. Internet Technology 14 Features • Supports HTML4, CSS1, XML1, DOM1 and XSLT1. • Does not support XHTML, SVG. • Pop-up blocking and tabbed browsing. • Caches visited content. • Quirks mode.
  • 15. Mozilla Firefox Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. Internet Technology 15 Features • Include tabbed browsing, spell checking, incremental find, live bookmarking and download manager •Supports XML, XHTML, SVG, MathML, CSS, ECMAScript, DOM, XSLT, Xpath and PNG. •Has sandbox security model • Highly Customizable by using add-ons. •Runs on Mac OS X, Microsoft Windows, Linux. Portable edition for Windows
  • 16. Safari Safari is a web browser developed by Apple Inc. First released as a public beta on 7 January 2003 on the company's Mac OS X operating system Internet Technology 16 Features •Runs on Mac OS X, iPhone, Windows. •Supports ICC, CSS, Inline PDF viewing, Mail integration, webpage clips, Private Browsing. •Quartz-style font-smoothing. •Uses Apple's WebKit for rendering web pages and running JavaScript.
  • 17. Opera Is developed by Opera company. It handles Internet tasks such as displaying websites, e-mails, contacts, IRC, BitTorrent, web feeds. Internet Technology 17 Features: • Supports fit to window, page zooming , voice control and Content blocker •Runs on Microsoft Windows, Mac OS X and Linux. •Opera Mini is designed for mobile phones •mouse gestures.
  • 18. Web Browsers Google Chrome is a web browser released by Google which uses the WebKit. It was first released as a beta for Windows on 2 September 2008 Internet Technology 18 Features •V8 JavaScript engine. •minimalistic user interface. •includes Gears, which adds features for web developers typically relating to the building of web applications (including offline support). •The Gears team was considering a multithreaded browser. • Updates of two blacklists (one for phishing and one for malware)
  • 19. Netscape Navigator Netscape was popular in the 1990s, is product of the Netscape Comm. Corp., later purchased by AOL. Stopped at Navigator on 1 March 2008 Internet Technology 19 Features •Important new features included cookies, frames, and JavaScript (in version 2.0). •Netscape has been criticized for following actual web standards poorly. •The extra functions enlarged and slowed the software, rendering it prone to crashing.
  • 20. Web Browsers War Web browsers war began at mid 90s between Netscape and IE, then FF and IE, now there are a triple war IE Vs FF Vs Google Chrome. Who can win users heart!! Internet Technology 20
  • 21. Web Browsers War Internet Technology 21
  • 22. Exercises 1- Write one page explaining your idea on browsers, which Browser is faster, safer, renders better and easier to use. You can go to the http://service.futuremark.com/peacekeeper/index.action for bench marking. Find out others by your self Internet Technology 22
  • 23. HTML HTML, stands for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc. As well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms. Put most simply, HTML, is a format that tells a computer how to display a web page. The documents themselves are plain text files (ASCII) with special Tags or codes that a web browser knows how to interpret and display on your screen. Internet Technology 23
  • 24. Why Learn HTML? It is possible to create web pages without knowing anything about the HTML source behind the page. There are excellent editors on the market that will take care of the HTML parts. All you need to do is layout the page. However, if you want to make it above average in web design, it is strongly recommended that you understand these tags. The most important benefits are: 1. You can use tags the editor does not support. 2. You can read the code of other people's pages, and "borrow" the cool effects. 3. You can do the work yourself, when the editor simply refuses to create the effects you want. 4. You can write your HTML by hand with almost any available text editor, including notepad that comes as a standard program with Windows. Internet Technology 24
  • 25. HTML Tags and Elements In an HTML document, HTML elements are tags, as well as text, which act as indicators to a web browser as to how the document is to be interpreted by the browser and ultimately presented on the user's computer screen. HTML elements are SGML “Standard Generalized Markup Language” elements that meet the requirements of one or more of the HTMLDocument Type Definitions (DTDs). These elements have properties: both attributes and content. Internet Technology 25
  • 26. HTML Attributes Attributes appear within tags, and they can only contain the value of the attribute, for instance: <p class=“example">Here is some text</p> An attribute can contain multiple, space-separated values, which is useful if you need to apply different classes to one element. For instance: <p class="example reference"> Here is some text</p> There are many attributes, some element-specific (like the selected attribute used with the <option> tag) and some not (like the class and id attributes). Internet Technology 26
  • 27. HTML Document Structure HTML documents “also informally called web pages” contain HTML tags and plain text to describe web pages. The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. The basic structure of an HTML document is: Internet Technology 27
  • 28. HTML Editor There are many good Editors that helps developer for writing HTML pages but for now you will stick with NotePad++ till you get familiar with HTML elements to use this editor follow these steps: Internet Technology 28 1. Download it from (notepad- plus.sourceforge.net) 2. Install it. 3. From Languages menu bar select HTML. 4. Save your files as .html extension.
  • 29. HTML Attributes In the body tag you can write text which appears at the web page as: But what if you want to have formatted texts: 1. Separate headers from body format 2. Bold, italic, underline texts 3. Centered, justified and right and left alignments 4. Subscripts and superscripts 5. Moving texts 6. Breaking and not braking lines 7. Etc. Internet Technology 29 <HTML> <Head></Head> <Body> This boring Text will appear at your browser </body> </HTML>
  • 30. Header Tags H# There are six special tags for creating headers <H#></H#>, any header text will be bold and has its own paragraph Internet Technology 30
  • 31. Pluto Is Not a Planet Internet Technology 31
  • 32. H# Attributes Headers Attributes are mostly general ones which means they are exists for most of the other HTML elements. Then we will discuss them here once and it is valid for other Tags when we cover them, here are the list of all Attributes: 1. Document-wide identifiers: id, class 2. Language information: lang 3. Text direction :dir 4. Element title: title 5. Inline style information: style 6. Alignment : align 7. Intrinsic events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Internet Technology 32
  • 33. Element Identifiers (Id) The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser). For example, the following paragraphs are distinguished by their id values: <H2 id="myparagraph"> This is a uniquely named paragraph.</H2> <H1 id="yourparagraph"> This is also a uniquely named.</H1> The id attribute has several roles in HTML: 1. As a style sheet selector. 2. As a target anchor for hypertext links. 3. As a means to reference a particular element from a script. 4. As the name of a declared OBJECT element. Note: Do NOT worry if you don’t understand all of these at once we will cover them later Internet Technology 33
  • 34. Element Identifiers (Class) The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has As a style sheet selector several role in HTML. <H1 id="msg1" class="info" Variable declared twice</H1> <H1 id="msg2" class="warning" Undeclared variable</H1> <H5 id="msg3" class=" info "Bad syntax for variable name</H5> Internet Technology 34
  • 35. Specifying Language (Lang) Language information specified via the lang attribute may be used by a user agent to control rendering in a variety of ways. Some situations where author-supplied language information may be helpful include: 1. Assisting search engines 2. Assisting speech synthesizers 3. Helping a user agent select glyph variants for high quality typography 4. Helping a user agent choose a set of quotation marks 5. Helping a user agent make decisions about hyphenation, ligatures 6. Assisting spell checkers and grammar checkers For instance, if characters from the Greek alphabet appear in the midst of English text: <H1 lang = “en”>This is English Text</H1> <H1 lang = “fr”>This is Not English Text </H1> <H1 lang = “ar-iq”>This is Arabic Text </H1> Internet Technology 35
  • 36. Text Direction (Dir) dir = LTR | RTL This attribute specifies the base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in [UNICODE]) in an element's content and attribute values. It also specifies the directionality of tables. Possible values: LTR: Left-to-right text or table. RTL: Right-to-left text or table. <H1 dir=“ltr“> This is Text</H1> Internet Technology 36
  • 37. Element Title (Title) Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Internet Technology 37
  • 38. HTML Attributes The syntax of the value of the style attribute is determined by the default style sheet language. This CSS example sets color and font size information for the text in a specific paragraph. Internet Technology 38
  • 39. Alignment (Align) Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context. Possible values: left: text lines are rendered flush left. center: text lines are centered. right: text lines are rendered flush right. justify: text lines are justified to both margins. Internet Technology 39
  • 40. Intrinsic Events 1. Onload: event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements. 2. Onunload: event occurs when the user agent removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements. 3. Onclick: event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements. 4. Ondblclick: event occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements. 5. Onmousedown: event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements. 6. Onmouseup: event occurs when the pointing device button is released over an element. This attribute may be used with most elements. 7. Onmouseover: event occurs when the pointing device is moved onto an element. This attribute may be used with most elements. Internet Technology 40
  • 41. HTML Attributes (cont) 8. Onmousemove: event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements. 9. Onmouseout: event occurs when the pointing device is moved away from an element. This attribute may be used with most elements. 10. Onfocus: event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 11. Onblur: event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus. 12. Onkeypress: event occurs when a key is pressed and released over an element. This attribute may be used with most elements. 13. Onkeydown: event occurs when a key is pressed down over an element. This attribute may be used with most elements. 14. Onkeyup: event occurs when a key is released over an element. This attribute may be used with most elements. Internet Technology 41
  • 42. HTML Attributes (cont) 15. Onsubmit: event occurs when a form is submitted. It only applies to the FORM element. 16. Onreset: event occurs when a form is reset. It only applies to the FORM element. 17. Onselect: event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements. 18. Onchange: event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA. Internet Technology 42
  • 43. Font Style Elements Rendering of font style elements depends on the user agent. The following is an informative description only. • TT: Renders as teletype or monospaced text. • I: Renders as italic text style. • B: Renders as bold text style. • BIG: Renders text in a "large" font. • SMALL: Renders text in a "small" font. • STRIKE and S: Deprecated. Render strike-through style text. • U: Deprecated. Renders underlined text. The following sentence shows several types of text Internet Technology 43
  • 44. Font Style Elements (cont) Internet Technology 44
  • 45. Font Modifier The FONT element changes the font size and color for text in its contents. This element is deprecated (but it can be used till now) Extra attribute definitions of the font tag: 1. SIZE : This attribute sets the size of the font. Possible values: An integer between 1 and 7. This sets the font to some fixed size, whose rendering depends on the user agent. Not all user agents may render all seven sizes. A relative increase in font size. The value "+1" means one size larger. The value "-3" means three sizes smaller. All sizes belong to the scale of 1 to 7. 2. COLOR : This attribute sets the text color. 3. FACE : This attribute defines a comma-separated list of font names the user agent should search for in order of preference. Internet Technology 45
  • 46. HTML Colors The attribute value type "color" refers to color definitions as specified in RGB (Red, Green, Blue). A color value may either be a hexadecimal number (prefixed by a hash mark) or one of the following sixteen color names. The hexadecimal value has the following format #RRGGBB where RR, GG, and BB == 00 to FF (OR from 0 to 255 as decimal equivalent). Common Color names and RGB values in HTML: Internet Technology 46
  • 47. HTML Colors (cont) Internet Technology 47 From Photoshop http://www.iconico.com/colorpic/
  • 48. Structured Text Phrase elements add structural information to text fragments. The usual meanings of phrase elements are following: 1. EM: Indicates emphasis. 2. STRONG: Indicates stronger emphasis. 3. CITE: Contains a citation or a reference to other sources. 4. DFN: Indicates that this is the defining instance of the enclosed term. 5. CODE: Designates a fragment of computer code. 6. SAMP: Designates sample output from programs, scripts, etc. 7. KBD: Indicates text to be entered by the user. 8. VAR: Indicates an instance of a variable or program argument. 9. ABBR: Indicates an abbreviated form. 10. ACRONYM: Indicates an acronym (e.g., WAC, radar, etc.). Note: some of these elements has an alternative with font formatting elements and its recommended to use these ones because they present structural documents. But personally I never use these ones! Internet Technology 48
  • 49. Subscripts & Superscripts Many scripts (e.g., French) require superscripts or subscripts for proper rendering. The SUB and SUP elements should be used to markup text in these cases. Internet Technology 49
  • 50. Grouping Elements The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. The P (Paragraph) element represents a paragraph. It cannot contain block-level elements (including P itself). We discourage authors from using empty P elements. User agents should ignore empty P elements. Internet Technology 50
  • 52. Forcing A Line Break The BR element forcibly breaks (ends) the current line of text. Clear is another attribute, controls text flow around floating objects. Specifies where the next line should appear in a visual browser after the line break caused by this element. This attribute takes into account floating objects (images, tables, etc.). Possible values: 1. none: The next line will begin normally. This is the default value. 2. left: The next line will begin at nearest line below any floating objects on the left-hand margin. 3. right: The next line will begin at nearest line below any floating objects on the right-hand margin. 4. all: The next line will begin at nearest line below any floating objects on either margin. NOTE: Test this and find more info on this attribute Internet Technology 52
  • 53. Rules The HR element causes a horizontal rule to be rendered by visual user agents. The amount of vertical space inserted between a rule and the content that surrounds it depends on the user agent. Additional attributes: 1. Noshade: When set, this Boolean attribute requests that the user agent render the rule in a solid color rather than as the traditional two- color "groove". 2. Size: This attribute specifies the height of the rule. The default value for this attribute depends on the user agent. 3. Width: This attribute specifies the width of the rule. The default width is 100%, i.e., the rule extends across the entire canvas. Internet Technology 53
  • 56. HTML Comments HTML comments have the following syntax: Start of comment : <!-- End of comment : --> Example: Internet Technology 56
  • 57. Tables The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. You can create a table by simply open and close table tags <Table></Table> but this is alone will do nothing . Additional table attributes : 1. summary :This attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille. 2. bgcolor : This attribute sets the background color for the document body or table cells 3. border = pixels:This attributes specifies the width of the frame around a table. Internet Technology 57
  • 58. Tables (cont) 5. cellspacing = length: The attribute specifies the amount of space to leave between cells. 6. cellpadding = length: This attribute specifies the amount of space between the border of the cell and its contents. 7. Frame= This attribute specifies which sides of the frame surrounding a table will be visible. Possible values: • void: No sides. This is the default value. • above: The top side only. • below: The bottom side only. • hsides: The top and bottom sides only. • vsides: The right and left sides only. • lhs: The left-hand side only. • rhs: The right-hand side only. • box: All four sides. • border: All four sides. Internet Technology 58
  • 59. Tables (cont) 8. Rules = This attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values: • none: No rules. This is the default value. • groups: Rules will appear between row groups and column groups only. • rows: Rules will appear between rows only. • cols: Rules will appear between columns only. • all: Rules will appear between all rows and columns. Internet Technology 59
  • 60. Table Rows The TR elements acts as a container for a row of table cells. The end tag may be omitted. This sample table contains three rows, each begun by the TR element: Additional Attributes: valign = top|middle|bottom|baseline: This attribute specifies the vertical position of data within a cell. Internet Technology 60
  • 61. Table Cells: The TH and TD elements There are two tags first is TH which indicates table header and the second is TD for table data these two tags are used to create cells inside rows or columns Attributes of these elements : 1. abbr =This attribute should be used to provide an abbreviated form of the cell's content. 2. axis = This attribute may be used to place a cell into conceptual categories that can be considered to form axes in an n-dimensional space. 3. rowspan = This attribute specifies the number of rows spanned by the current cell. 4. colspan = This attribute specifies the number of columns spanned by the current cell. 5. nowrap When present, it disables automatic text wrapping for this cell. Internet Technology 61
  • 64. Poverty In The World Internet Technology 64
  • 65. Poverty In The World (cont) Internet Technology 65
  • 66. Poverty In The World (cont) Kevin Carter’s Pulitzer Prize winning photo taken in 1994 during the Sudan famine. The picture depicts a famine stricken child being stalked by a vulture. The child is crawling towards a UN food camp, located a kilometer away. Internet Technology 66
  • 67. Lists HTML offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain: 1. Unordered information. 2. Ordered information. 3. Definitions. unordered list, created with the UL element: Internet Technology 67
  • 68. Unordered lists (UL), ordered lists (OL), and list items (LI) Internet Technology 68 An ordered list, created using the OL element, should contain information where order should be emphasized
  • 69. Unordered lists (UL), ordered lists (OL), and list items (LI) Internet Technology 69 1. type = This attribute sets the style of a list item. 2. start = For OL only. This attribute specifies the starting number of the first item in an ordered list. 3. value = For LI only. This attribute sets the number of the current list item. 4. Compact= When set, this boolean attribute gives a hint to visual user agents to render the list in a more compact way. The interpretation of this attribute depends on the user agent.
  • 70. Definition Internet Technology 70 Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). Thus, when advertising a product, one might use a definition list: