Web Designing

  • July 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Web Designing as PDF for free.

More details

  • Words: 35,317
  • Pages: 638
Web Development ITM 4132 Internet and W3 By Pramudith Kandambi

© Pramudith_Kandambi Rajarata_University BIT_2009

Evaluation Criteria „

Continues assessment ‰ ‰ ‰

„

20%

Assessment I Assessment II Micro Project

Semester Examination

80%

© Pramudith_Kandambi Rajarata_University BIT_2009

Web Development ITM 4132 „

Topics to be covered: Introduction ‰HTML/XHTML ‰Cascading Style Sheets (CSS) ‰JavaScript: Object-Based Scripting for the Web ‰Dynamic HTML ‰Web Servers ‰PHP: Database Programming ‰

„

Self Study Packages: Adobe Photoshop: Creating Web Graphics ‰Macromedia Flash: Building Interactive Animations ‰Macromedia Dreamweaver ‰

„

References: Internet & WWW, 3rd ed, 2005 - Deitel & Deitel ‰PHP and MySQL Web Development - Luke Welling Laura Thomson ‰

© Pramudith_Kandambi Rajarata_University BIT_2009

What is internet „

The Internet is a network of computer networks.

„

It makes it possible for any computer connected to it to send and receive data from any other computer connected to it. © Pramudith_Kandambi Rajarata_University BIT_2009

What is Web „

Using Internet transferring Fils, Data ect.

What is a Network? „

A group of two or more devices, that are able to communicate with one another: ‰

‰

‰

The telephone network: interconnection of telephones and switches Computer networks: interconnection of computers Between two and millions of devices interconnected

© Pramudith_Kandambi Rajarata_University BIT_2009

How it works „ „

„

„

Computer Networks The computers in a network are connected via ‰ hardware and software Hardware Physically connects the computers together telephone lines, fiber-optic cables, routers and gateways, and the computers themselves Software Enables communication and exchange of by following a set of rules, called protocols

information,

© Pramudith_Kandambi Rajarata_University BIT_2009

Internet Protocols „

A protocol is a standard set of rules that determines how computers communicate with each other across networks

„

A protocol describes: ‰ ‰

the format that a message must take the way in which computers must exchange a

message © Pramudith_Kandambi Rajarata_University BIT_2009

IP „

TCP/IP- Transmission Control Protocol and Internet Protocol .

„

SMTP - Simple Mail Transfer Protocol to send and receive electronic mail

„

FTP -

„

HTTP - Hypertext Transfer Protocol to transmit

File Transfer Protocol to transfer files between computers information on the World Wide Web

„

NNTP - Network News Transfer Protocol to transmit discussion forum messages © Pramudith_Kandambi Rajarata_University BIT_2009

IP Addresses „

Every machine on the the Internet has a unique number assigned to it,

192.168.1.10 Class

Start address

Finish address

A

0.0.0.0

126.255.255.255

B

128.0.0.0

191.255.255.255

C

192.0.0.0

223.255.255.255

D

224.0.0.0

239.255.255.255

E

240.0.0.0

255.255.255.255

© Pramudith_Kandambi Rajarata_University BIT_2009

Domain Name • Domain Names are the unique name that identifies an entity whether that be an single individual or a company, on the Internet. • Domain Names always have 2 or more parts seperated by the dots. • The leftmost piece is the most specific part while the right part is the TLD or Top Level Domain. Full Address

Hostname

Domain Name

TLD

www.bleepingcomputer.com

www

bleepingcomputer.com

com

bleepingcomputer.com

bleepingcomputer.com

bleepingcomputer.com

com

www.google.net

www

google.net

net

my.www.bleepingcomputer.com

my.www

bleepingcomputer.com

com

© Pramudith_Kandambi Rajarata_University BIT_2009

Internet Architecture

Desktop computer “client”

Computer on the Internet holding information remote “server”

© Pramudith_Kandambi Rajarata_University BIT_2009

Server/Client Interface SERVERS Hardware

+ Software

Software Protocols CLIENTS Hardware +

Software

© Pramudith_Kandambi Rajarata_University BIT_2009

Web Browsers

© Pramudith_Kandambi Rajarata_University BIT_2009

Web Servers

© Pramudith_Kandambi Rajarata_University BIT_2009

The Internet Address or URL

This page is being viewed in the Internet Explorer Browser. Browsers allow computers to read Hyper Text Mark-up Language OR HTML.

The Address or URL is typed in here.

© Pramudith_Kandambi Rajarata_University BIT_2009

Entering a URL address in the address box

After entering a URL address in the address box click Go or hit the RETURN key. In this example we have entered http://www.who.int for the WHO website

© Pramudith_Kandambi Rajarata_University BIT_2009

Hypertext links

Links to other pages are usually underlined or in another colour of text.

© Pramudith_Kandambi Rajarata_University BIT_2009

Forward and back navigation buttons

The arrow buttons on the tool bar allow users to move Back and Forward to pages within the website.

© Pramudith_Kandambi Rajarata_University BIT_2009

Home page button

The House icon on the tool bar will take you back to the browser’s default Home Page.

© Pramudith_Kandambi Rajarata_University BIT_2009

This is the end of Module 1

This is the end of Module 1.1 There is a Work Book to accompany this part of the module. The workbook will take you through a live session covering the topics included in this demonstration with working examples. Updated 02 2008

© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Hyper Text Markup Language By Pramudith Kandambi

© Pramudith_Kandambi Rajarata_University BIT_2009

What is HTML? „

HTML is a language for describing web pages.

„

HTML stands for Hyper Text Markup Language.

„

HTML is not a programming language, it is a markup language.

„

A markup language is a set of markup tags.

„

HTML uses markup tags to describe web pages. © Pramudith_Kandambi Rajarata_University BIT_2009

HTML Tags „ „

„

„

HTML markup tags are usually called HTML tags Keywords surrounded by angle brackets like HTML tags normally come in pairs like and

Starting tag

abcd
Closing Tag

© Pramudith_Kandambi Rajarata_University BIT_2009

Format of a HTML Doc This is area what we view © Pramudith_Kandambi Rajarata_University BIT_2009

W3C HTML Validation Service „

Validation service ( validator.w3.org ) ‰

Checking a document’s syntax „ „

URL that specifies the location of the file Uploading a file to the site http://validator.w3.org/file-upload.html

© Pramudith_Kandambi Rajarata_University BIT_2009

W3C HTML Validation Service

© Pramudith_Kandambi Rajarata_University BIT_2009

First HTML Doc Hello Sri Lanka © Pramudith_Kandambi Rajarata_University BIT_2009

HTML Headings „

HTML headings are defined with the

to

tags.

„

Example

This is a heading

This is a heading

This is a heading

© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Paragraphs „

HTML paragraphs are defined with the

tag.

„

Example

This is a paragraph

This is another paragraph



© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Links „

HTML links are defined with the tag.

„

Example
This is a link

© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Images „

HTML images are defined with the tag.

Example

© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Element Syntax „

„

„

An HTML element starts with a start tag / opening tag

An HTML element ends with an end tag / closing tag

The element content is everything between the start and the end tag

„

Some HTML elements have empty content

„

Empty elements are closed in the start tag

„

Most HTML elements can have attributes © Pramudith_Kandambi Rajarata_University BIT_2009

Empty HTML Elements „

HTML elements without content are called empty elements.

„


is an empty element without a closing tag (it defines a line break).

„

In XHTML, XML, and future versions of HTML, all elements must be closed.

„

Adding a slash to the start tag, like
, is the proper way of closing empty elements, accepted by HTML, XHTML and XML.

„

Even if
works in all browsers, writing
instead is more future proof.

© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Tip: Use Lowercase Tags „

„

„

HTML tags are not case sensitive:

same as

. Plenty of web sites use uppercase HTML tags in their pages. World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in future versions of (X)HTML.

© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Attributes „

Attributes provide additional information about HTML elements.

„

HTML elements can have attributes

„

Attributes provide additional information about the element

„

Attributes are always specified in the start tag

„

Attributes come in name/value pairs like: name="value" © Pramudith_Kandambi Rajarata_University BIT_2009

Always Quote Attribute Values „

Attribute values should always be enclosed in quotes.

„

Double style quotes are the most common, but single style quotes are also allowed.

„

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson' © Pramudith_Kandambi Rajarata_University BIT_2009

Don't Forget the End Tag „

Most browsers will display HTML correctly even if you forget the end tag:

Example

This is a paragraph

This is another paragraph



© Pramudith_Kandambi Rajarata_University BIT_2009

HTML Output - Useful Tips „

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.

„

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

„

The browser will remove extra spaces and extra lines when the page is displayed.

„

Any number of lines count as one space, and any number of spaces count as one space.

© Pramudith_Kandambi Rajarata_University BIT_2009

Text Formatting Tags Tag <em> <small> <strong> <sub> <sup> <del> <s> <strike>

Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use <del> instead Deprecated. Use <del> instead Deprecated. Use styles instead

© Pramudith_Kandambi Rajarata_University BIT_2009

The HTML Style Attribute „

To provide a common way to style all HTML elements.

„

„

Styles was introduced with HTML 4, Styles can be added to HTML elements directly by using the style attribute or separate style sheets (CSS files).

„

HTML Style Examples

„

‰ ‰ ‰ ‰

style="background-color:yellow" style="font-size:10px" style="font-family:Times" style="text-align:center" © Pramudith_Kandambi Rajarata_University BIT_2009

Hyperlinks, Anchors, and Links „

In web terms, a hyperlink is a reference (an address) to a resource on the web.

„

Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.

„

An anchor is a term used to define a hyperlink destination inside a document.

An HTML Link Link syntax: Link text „

‰

„ „ „ „

Note: The element content doesn't have to be text. You can link from an image or any other HTML element.

The href Attribute The href attribute defines the link "address". This element defines a link to RJT site Visit Rajarata! The code above will display like this in a browser:

An HTML Link cont.. „

The target Attribute ‰

‰

„

The target attribute defines where the linked document will be opened. The code below will open the document in a new browser window:

Example Visit W3Schools!

An HTML Link cont.. „

The name Attribute ‰

„

Named anchor syntax: ‰

„

Named anchor are not displayed in any special way. They are invisible to the reader. Any content

The link syntax to a named anchor: ‰ ‰

Any content The # in the href attribute defines a link to a named anchor.

An HTML Link cont.. Example: „ A named anchor inside an HTML document: Useful Tips Section „

A link to the Useful Tips Section from the same document:

Jump to the Useful Tips Section

<area>