0% found this document useful (0 votes)
161 views34 pages

Fusion

The document provides an overview of web design and development topics including the internet, world wide web, HTML, CSS, JavaScript, databases, PHP and more. It covers basic concepts like what makes up a website and how to structure pages with HTML tags. The document also includes examples of coding concepts.

Uploaded by

api-3844034
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
161 views34 pages

Fusion

The document provides an overview of web design and development topics including the internet, world wide web, HTML, CSS, JavaScript, databases, PHP and more. It covers basic concepts like what makes up a website and how to structure pages with HTML tags. The document also includes examples of coding concepts.

Uploaded by

api-3844034
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

Fusion

“The Web Designing


Workshop”

© 2008 INCORD 2008, HBTI Kanpur


Overview
Introduction to the Internet
• - What is the Internet?
• - What is the World Wide Web?
• - How does the Internet work?

Web content: sites and pages


• - Locating content: URLs
• - What is a web page?
• - Static vs. dynamic pages

Web designing: Using HTML &


Dreamweaver
• - Static page authoring: HTML, CSS
• - Dynamic page authoring: Forms, CGI,
Overview
Web designing: Using Flash
• - What is Flash?
• - How to use Flash to make interactive
animation?

Web designing: CSS and JavaScript


• - What is CSS?
• - What is JavaScript?
• - How to employ them in a website?
• - What are advantages to use them?
Overview
Database Handling: Using Mysql
• - What is Database?
• - What is Mysql?
• - How to link Mysql with your webpage?

Introducing “The Server side code”


• - Introduction to PHP
• - connecting Mysql with PHP
• - What is JSP?
• - Comparison between JSP and PHP.
Internet & World Wide Web -
The same?

• The Internet and the Web are not the


same thing.
• The Web is just one of many services
that make use of the internet.
Internet Protocols
• TCP/IP (Transmission Control
Protocol / Internet Protocol).
• Internet protocols are standardized,
allowing different types of computers
to "talk" to each other.
• Different services work within the
TCP/IP framework.
Internet Services with
Protocols
• World Wide Web (HTTP, HTTPS)
• Email (SMTP, IMAP, POP3, MAPI)
• Directories (LDAP)
• File transfer (FTP, SFTP, SCP)
• Command line login (Telnet, SSH)
• Instant messaging / Chat (ICQ, Jabber,
AIM, .NET Messenger Service, Yahoo!
Messenger)
• Streaming audio/video (RTP, RTSP,
SMIL)
• Voice (VoIP)
TCP/IP Details
• Each computer or device connected to
the Internet is given a unique numeric
address called an IP address.
• Example: 169.237.58.3
• Allows information to be sent to a
specific computer.
• Information is transmitted in small
pieces (called packets), which each
include addressing information.
• Packets can be sent across the Internet
along the fastest possible route
Web Surfing/Browsing
• You "request" a web page.
a. Type address in the address bar.
b. Click a link.
• The remote computer receives the
request and sends the data to your
computer (by means of your computer's
IP address).
• The software that sends you the
information is called the server, which
listens for and responds to such
requests.
• Your browser renders and displays the
web page.
You don't see IP address…
• Most of the time, you see mnemonic
names in Web addresses, not IP
numbers.
• E.g., www.incordhbti.com,
www.google.com
• These are hostnames, human-readable
aliases for numeric IP addresses.
• Registered hostnames and their
equivalent IP addresses are stored in a
DNS (Domain Name Server)
• When a web page is requested, the
hostname is sent to the DNS, which
resolves it into an IP address.
Construction of a hostname
• Most of the time, the structure gives
hints about the organization that
owns the name.
• It consist of three basic parts: The
local hostname (e.g., "www", "mail")
• The organization domain name
(e.g.,”Google", "yahoo“,”incordhbti”)
• The top-level domain (TLD) (e.g.,
"com", "edu", "gov", "us")
URLs
• URL (Uniform Resource Locator) is an
Internet resource address
• In general, URLs are written as
follows: scheme:scheme-specific-part
• The scheme identifies the internet
service used E.g., http, ftp, mailto
For the Web, the scheme-specific
part consists of: a hostname, the
path to a file
URLs….
• URLs are often abbreviated, e.g.,
www.incordhbti.com This is actually,
www.incordhbti.com /index.html
• If no page filename is specified, the
index page is sent to the browser by
the server.
• Different servers use different index
page file names, e.g., index.html and
default.html.
• Our's web servers use index.html.
What is a web page?

• A plain text file with specific coding


or markup for display by the web
browser.

• Markup used to create web pages is


HTML/XHTML
• HTML markup provides for page
structure. For example:
o Define text as a heading.
o Define text as a paragraph.
o Define placement of an image.
• HTML should be supplemented by CSS
(Cascading Style Sheets), a language
that specifies the presentation of the
page. For example:
Define that a particular heading is
Large, Bold and Red in color
Define a particular paragraph as
using italics
• HTML files can also include script code
(such as JavaScript) to be executed by
the browser.
Browser display of HTML

• The browser interprets the markup


(HTML, CSS) in the web page to
display its content.

• Not all browsers display web pages


the same way!!!
Static vs. dynamic web pages
Static pages
• always contain the same information
(so long as the source code is
unchanged);
• are modified by opening the file and
changing the content or HTML.
Dynamic pages
• can contain different information at
different times (from the same source
code);
• are produced on-the-fly by a computer
program or script on the web server.
What is a web site?
• A collection of individual web pages,
• organized into a directory structure,
• stored on a web server, so they are
accessible via the web.
• The directory structure of the site is
reflected by the URLs of the various
pages.
Error messages
• Sometimes, something goes wrong
while browsing the web, or while
verifying that your own web site works.
• Depending on what happened you may
get different error messages:
• - 400 - Bad request
• - 403 - Forbidden
• - 404 - File not found
• - 500 - Server error
• - 503 - Service not available
HTML: HyperText Markup
Language
Introduction
“In computing, HyperText Markup Language
(HTML) is a markup language designed for the
creation of web pages and other information
viewable in a browser.”

“HTML is used to structure information - denoting


certain text as headings, paragraphs, lists and
so on - and can be used to describe, to some
degree, the appearance and semantics of a
document.”
--
Wikipedia
HTML Tags
Tags are mainly used to tell the
browser how to display the content.
• Document properties
• Layout
• Text style
• Images
• Hyper-links
• Etc.
Basic Tags
Four Basic tags

• HTML <HTML></HTML>
• Head <HEAD></HEAD>
• Title <TITLE></TITLE>
• Body <BODY></BODY>
Basic Tags…
They are nested in this way:
<HTML>
<HEAD>
<TITLE> title </TITLE>
other header fields
</HEAD>
<BODY>
body
</BODY>
</HTML>
Our first webpage
<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY>
Hi there!!!
</BODY>
</HTML>

Save it as hello.html
Hands on….
• Start Notepad
• Create an HTML document with all four basic
tags
• HTML
• HEAD
• TITLE
• BODY
• Save as an html document, e.g. hello.html
• To display: Double click or open in a web
browser
• To edit / modify: Open with Notepad
HTML Tags: Document
Attributes
Background color
• <body bgcolor="#000000">
• <body bgcolor="rgb(0,0,0)">
• <body bgcolor="black">

• HTML colors are defined using a hexadecimal notation for


the combination of Red, Green, and Blue color values
(RGB). The lowest value that can be given to one of the
light sources is 0 (hex #00). The highest value is 255 (hex
#FF).

Background image
• <body background="anubhav.jpg">
HTML Tags: Heading
HTML Tags: Paragraph
Paragraphs are defined with the <p> tag.
• <p>This is a paragraph</p>
• <p>This is another paragraph</p>

• A blank line is added before/after the


heading.
HTML Tags: Line break
The <br> tag is used when you want to
end a line,but don't want to start a new
paragraph. The <br> tag forces a line
break wherever you place it.

<p>This <br> is a para<br>graph with line


breaks</p>
HTML Tags: Text Styles
Regular <b> bold </b><br>
Regular <big> big </big><br>
Regular <em> emphasized </em><br>
Regular <i> italic </i><br>
Regular <small> small </small><br>
Regular <strong> strong </strong><br>
Regular <sub> subscripted </sub><br>
Regular <sup> superscripted </sup><br>
Regular <ins> inserted </ins><br>
Regular <del> deleted </del><br>
HTML Tags: Fonts
Font is defined by <font> tag, with the following
attributes:
• size="number" size="2" Defines the font size
• size="+number" size="+1" Increases the font
size
• size="-number" size="-1" Decreases the font
size
• face="face-name" face="Times" Defines the
font-name
• color="color-value" color="#FFFFFF" Defines
the font color
• color="color-name" color="red" Defines the
HTML Tags: Lists
Three types of lists
• <ul></ul> define unordered lists
• <li></li> define a list item
• <ul type=“disc”>, <ul type=“circle”>, <ul
type=square>
• <ol></ol> define ordered lists
• <li></li> define a list item
• <ol type=“A”>, <ol type=“a”>, <ol type=“I”>,
<ol type=“i”>
• <dl></dl> define definition lists
• <dt></dt> define a definition-list term.

Unordered List
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Ordered List
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Definition List
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Thank you!!!

You might also like