*Introduction to Web

Technologies

Ahmed Elashry
[email protected]
 HTML CSS JAVA SCRIPT

• HTML Basics • Introduction CSS • Variables

• Creating HTML • CSS2 Selectors and • Expressions and
Webpage Properties Operators
• HTML Table and Lists • Forms Style • User defined function
• HTML Forms & Input • Error Handling &
Debugging
• Event Handling
• Intro to DOM & BOM
*How the Web Works

*Introduction
* Computers are connected together via a
network or transmission line
* The network then became known as the
Internet
* It has since adopted a suite of protocols called
the Internet Protocol Suite or as more
commonly known as TCP/IP
* Now, the Internet has grown to encompass a
huge number of autonomous networks

*Transmission
* Set of rules that allow electronic items to
connect to and exchange information with one
another

*What is a Protocol
* The Internet Protocol Suite includes a number of standard
protocols. The two most common are:
– Transmission Control Protocol (TCP)
– Internet Protocol (IP)
* A computer communication protocol is a description of the rules
computers must follow to communicate with each other.
* TCP/IP defines how electronic devices (like computers) should be
connected to the Internet, and how data should be transmitted
between them.
* The TCP/IP protocol is embedded in TCP/IP software that is part
of the operating system (OS)

*Internet Protocol Suite

* The Web was mostly text based until Marc Andreessen
created the Mosaic browser in 1992
* • Accredited for popularizing the WWW
* • People started thinking about adding videos,
sound,and graphics on the Web.
* • Now many people think of the Web as the graphical or
illustrated part of the Internet

*The Web
* A Uniform Resource Locator (URL) is used to address a
document on the Web.
* The name that corresponds to an IP address in the DNS is
known as a URL
* A full Web address is like:
* http://iti.gov.eg/site/home.html
* A URL usually follows these syntax rules:
* scheme://host.domain.country_code:port/path/filename

* Uniform Resource Locators (URL)

* For International use, the domains end in the country code
* – .eg For Egypt websites
* – .fr French websites
* – .co.uk United Kingdom
* Some URLs end in the following
* – .com Commercial institute or service provider
* – .me Personal website
* – .edu Educational institute
* – .gov Government
* – .org Nonprofit organization
* – .net Network Service Provider
* – .mil U.S. military

*URL Codes
* HTTP is used for sending requests from a web
client (browser) to a web server, returning web
content (webpages) from the server back to the
client.
* The Web browser specifies the details of the
required Web page in a HTTP Request message
* The Web server receives this request and after
processing it completes the operation by
returning either the document or an error in the
HTTP Response message

*Retrieving a URL
*Hypertext Transfer Protocol
* Hypertext Transfer Protocol
* HTTP takes care of the communication between a web
server and a web browser.
* HTTP is used for sending requests from a web client (a
browser) to a web server, returning web content (web
pages) from the server back to the client.
* Before the Web, the Internet protocol was FTP (File
Transfer Protocol)
* FTP was too slow, and HTTP was invented

*HTTP
* HTTP adopted the concept of hypertext links but its
protocol includes other methods
* There are four messages within this protocol
* – Connection: Establishes a connection between the client
and the server
* – Request: Asks for a resource
* – Response: Delivers the resource
* – Close: Terminates the connection

*HTTP
*SSL (Secure Sockets Layer)
* A port number is used to distinguish between the
individual networking applications that are
running simultaneously above the TCP/IP protocol
stack
* Port numbers for standard TCP/IP services may
be referred to as well-known port numbers
* – 80 HTTP (Hypertext Transfer Protocol) - WWW
* – 194 IRC (Internet Relay Chat) - Conferencing
* – 21 FTP (File Transfer Protocol)
* – 25 SMTP (Simple Mail Transfer Protocol) - E-mail

*Port Numbers
* No person or organization owns the entire
Internet
* •As the Internet is a network of networks, each
network is owned by a company
* • This is similar to the motor-way and road
system. Each town or state owns and maintains
roads in its jurisdiction

*Who owns the Internet?

 * HTML
Hypertext Markup Language
* HTML (Hypertext Markup Language) is not a
programming language; it is a markup language
used to tell your browser how to structure the
web pages you visit. It can be as complicated
or as simple as the web developer wishes it to
be

*What is HTML?
* HTML is a subset of Standard Generalized
Markup Language (SGML) and is developed by
the World Wide Web Consortium (W3C) and
Web Hypertext Application Technology Working
Group (WHATWG).

*About HTML
* One group, the W3C (World Wide Web
Consortium), maintains the HTML5 specification,
which is a "snapshot" of the specification at a
particular point in time.

* The W3C also maintains a HTML 5.1 Nightly,

which includes modifications to the
specification that will be released at a later
date (and under a new version number - HTML
5.1).

*The W3C Standard

* The other group, the WHATWG (Web Hypertext
Application Technology Working Group), maintains what
they call a Living Standard for HTML. This is a standard
that is continually updated.

* There are no version numbers (i.e. it is HTML not

HTML5). The standard can (and does) change on a
regular basis. The reason behind this is in order to stay
relevant with browser implementations. It can also avoid
issues with browsers implementing features from a
"snapshot" specification that potentially contains known
bugs, issues or limitations.

*The WHATWG Living

Standard
*How Pages Use
Structure

*Structure
* The !DOCTYPE...
declaration tells the browser which version of
HTML the document is using.
* The html element is the document's root element - it can be
thought of as a container that all other tags sit inside (except for
the !DOCTYPE declaration).
* The head tag contains information that is not normally viewable
within your browser (such as meta tags, JavaScript and CSS),
although the title tag is an exception to this. The content of the
title tag is displayed in the browser's title bar.
* The body tag is the main area for your content. This is where most
of your code (and viewable elements) will go.
* The h1 tag defines a level 1 heading.
* The p tag defines a paragraph. This contains the body text.

*Body, Head & Title

* You can use uppercase or lowercase when
coding HTML, however, most developers use
lowercase. This helps the readability of your
code, and it also saves you from constantly
switching between upper and lower case.

* Good: <head>
* OK: <HEAD>

*UPPERCASE or lowercase?
* Some of the above tags are optional in certain
situations. In particular, the html, head, and
body tags can all be omitted.

*Optional Tags
*DOCTYPEs
* attributes are all wrapped in double quotes.
You might however see single quotes in some
people's HTML. This is purely a matter of style,
and you can feel free to choose which one you
prefer.

*Single or double quotes?

* Id used to uniquely identify any element
* Title gives a suggested title for the element.
* Class used to associate an element with a
style sheet
* Style allows you to specify Cascading Style
Sheet (CSS) rules within the element.

*Core Attributes
* <tagname style="property:value;">
* The CSS color property defines the text color
* The CSS font-size property defines the text size
* The CSS text-align property defines the
horizontal text alignment
* The CSS background-color property defines the
background color

*HTML Styles
* The dir attribute allows you to indicate to the
browser about the direction in which the text
should flow.

*The dir Attribute

* An HTML element is defined by a starting tag.
If the element contains other content, it ends
with a closing tag.
* For example, <p> is starting tag of a paragraph
and </p> is closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph
element.

*HTML Tag vs. Element

* The <meta> tag is used to provide such
additional information. This tag is an empty
element and so does not have a closing tag but
it carries information within its attributes.

*HTML – META TAGS

* Name Name for the property. Can be anything.
Examples include, keywords, description, author,
revised, generator etc.
* content Specifies the property's value.
* http-equiv Used for http response message
headers. For example, http-equiv can be used to
refresh the page or to set a cookie. Values include
content-type, expires, refresh and set-cookie.
* <meta name="keywords" content="HTML, Meta Tags" />

*META TAGS
* You can use <meta> tag to specify important
keywords related to the document and later
these keywords are used by the search engines
while indexing your webpage for searching
purpose.
*<meta name="keywords" content="HTML,
Meta Tags, Metadata" />

*Specifying Keywords
* You can use <meta> tag to give a short
description about the document. This again can
be used by various search engines while
indexing your webpage for searching purpose.
*<meta name="description"
content="Learning about Meta Tags." />

*Document Description
* You can use <meta> tag to give information
about when last time the document was
updated. This information can be used by
various web browsers while refreshing your
webpage.
*<meta name="revised" content=“iti,
3/7/2014" />

*Document Revision Date

* A <meta> tag can be used to specify a duration
after which your web page will keep refreshing
automatically.
*<meta http-equiv="refresh" content="5" />

*Document Refreshing
* You can use <meta> tag to redirect your page
to any other webpage. You can also specify a
duration if you want to redirect the page after
a certain number of seconds.
*<meta http-equiv="refresh" content="5;
url=http://iti.gov.eg" />

*Page Redirection
* You can set an author name in a web page
using meta tag.
*<meta ame="author" content=“Ahmed
elashry" />

*Setting Author Name

* You can use <meta> tag to specify character
set used within the webpage.
*<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />

*Specify Character Set

* The viewport is the user's visible area of a web
page. It varies with the device, and will be
smaller on a mobile phone than on a computer
screen.
* <metaname="viewport" content="width=d
evice-width, initial-scale=1.0">
* The initial-scale=1.0 part sets the initial zoom
level when the page is first loaded by the
browser.

*Setting The Viewport

<meta property="og:image"
content="https://developer.cdn.mozilla.net/static/img/opengraph-
logo.dc4e08e2f6af.png">
<meta property="og:description"
content="The Mozilla Developer Network (MDN) HTML, CSS, and APIs
for both Web sites and HTML5 Apps.">
<meta property="og:title" content="Mozilla Developer
Network">

Open Graph Data

*social networking meta

* A favicon can be added to your page by:

* Saving it in the same directory as the site's index page, saved

in .ico format (most browsers will support favicons in more
common formats like .gif or .png, but using the ICO format will
ensure it works as far back as Internet Explorer 6.)
* Adding the following line into your HTML <head> to reference it:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

*Adding custom icons to

your site
* This is useful in many ways. Your HTML
document will be indexed more effectively by
search engines if its language is set (allowing it
to appear correctly in language-specific
results, for example), and it is useful to people
with visual impairments using screen readers

<html lang="en-US">
<html lang=“ar-EG">

*primary language of the

document
*Information About Your Pages
* It is very much allowed to keep one HTML
element inside another HTML element.

*Nested HTML Elements

* Comment is a piece of code which is ignored by
any web browser.
* HTML <!-- ... -->
* Commenting Script Code <!-- … //-->
* Commenting Style Sheets <!-- … //-->
* HTML Conditional Comments
<!--[if IE 6]> … <![endif]-->

*HTML – COMMENTS
* Headings and paragraphs
* Bold, italic
* Line Breaks , Horizontal Rules

*Text Formatting
* <h1>
* <h2>
* <h3>
* <h4>
* <h5>
* <h6>

*Headings
* The <p> tag offers a way to structure your text
into different paragraphs.

*Paragraph Tag
* No matter how much whitespace you use
(which can include space characters, but also
line breaks), the HTML parser reduces each one
down to a single space when rendering the
code

*Whitespace in HTML
* Literal character Character reference
equivalent
*< &lt;
*> &gt;
*" &quot;
*' &apos;
*& &amp;

*special characters
* Anything that appears within <b>...</b>
element, is displayed in bold

*Bold Text
* Anything that appears within <i>...</i>
element is displayed in italicized

*Italic Text
* Anything that appears within <u>...</u>
element, is displayed with underline

*Underlined Text
* Whenever you use the <br /> element,
anything following it starts from the next line.
This tag is an example of an empty element

*Line Break Tag

* You can use <center> tag to put any content in
the center of the page or any table cell.

*Centering Content
* Horizontal lines are used to visually break-up
sections of a document. The <hr/> tag creates
a line from the current position in the
document to the right margin and breaks the
line accordingly.

*Horizontal Lines
* The <div> and <span> elements allow you to
group together several elements to create
sections or subsections of a page.

*Grouping Content