HTML for beginners

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.

Main Subjects & Technologies
1. HTML
2. CSS
3. JavaScript
4. PHP
5. MySql
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.

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.

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
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
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
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)
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

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.

WorldWideWeb
WorldWideWeb was the world's first web browser. It was introduced on
1991, by Tim Berners-Lee. It was later renamed Nexus.
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.
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.
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
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.
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
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
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!!

Web Browsers War

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

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.

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.

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.

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).

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:

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:
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.
<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

Pluto Is Not a Planet

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

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

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>

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>

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>

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.

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.

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.

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
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

HTML Attributes (cont)
8. Onmousemove: event occurs when the pointing device is moved while it is
9. Onmouseout: event occurs when the pointing device is moved away from an
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
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.

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.

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

Font Style Elements (cont)

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.

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:

HTML Colors (cont)
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!

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.

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.

Grouping Elements

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

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.

Star Gate

Sliders

HTML Comments
HTML comments have the following syntax:
Start of comment : 
Example:

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.

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.

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.

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.

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.

Tables (cont)

Poverty In The World

Poverty In The World (cont)

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.

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:

Unordered lists (UL), ordered lists (OL), and list items (LI)
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)
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
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 for beginners

More Related Content

What's hot

Similar to HTML for beginners

More from Salahaddin University-Erbil

Recently uploaded

HTML for beginners