1. Internet Technology and Website Design
Course Code: 2111
Instructor: Atuheire Izaara Ambrose
Credit: 4.0
When: 10:00am – 1:00, Tuesday / Wednesday 11:00 – 12:30 pm
Venue: S310 and ICS LAB II

2. EXPECTATIONS?

3. Expectations
Attend all lectures
Implement assigned projects
Do coursework and be involved in class discussions
Implement one final project

4. Prerequisites 911 Non Course site: https://lms.must.ac.ug/
You will be able to access all the Lecture presentations and electronic textbooks through the LMS.
Enrolment key is
911

5. By the end of this Semester:
Understand web client-server architecture
Perform basic website design
Perform basic client side programming
Perform basic server side programming
Gain ability to learn new Internet technologies by self

6. By the end of this semester…
Write scripts to process information submitted in a form.
Write scripts to store data collected in HTML forms, protecting a site against SQL injections.
Write scripts to retrieve data from a database and display it on a Web page.
Build a basic dynamic form
Develop a dynamic online application of preferred choice.

7. Software's to use WAMP/XAMP/LAMP SERVER NOTEPAD / NOTEPAD ++
DREAMWEAVER CSS

8. EVALUATION SYSTEM INCLASS: In class assignments 30% MID-TERM TEST: 50%
50%
FINAL PROJECTS:
GROUP PROJECTS
20%
ATTENDANCE
CRUCIAL TO ENHANCE PASSING!!!!
FINAL EXAM
100%

9. SEMESTER PROJECT …….Suggestions??
You are required in your groups to design a web application that runs on a client – server architecture. Presentations will be in November.

10. BIT2111 Web Design & Development
Introduction to the Internet

11. Internet, Packets and Routing
Internet is a network of computer networks
Data is transmitted by packet switching using the standard Internet Protocol (IP)
Packet – a unit of information carriage
Packet switching – process of moving packets from one node (computer device) to another

12. A Visualization of Internet

13. A Visualization of Internet

14. Internet, Packets and Routing
At the sender, data is broken into packets and sent to the nearest node (router)
At each router, it sends the packet to another router that is closer to the final destination
At the receiver, packets are reassembled to get the original data
A simple analogy: mailing system

15. Mailing System A B
MUST
MAK
Admin

16. TCP/IP and Domain Names
Basic task of IP – moving packets as quickly as possible from one router to another
Yet, it doesn’t check whether packets are delivered successfully, thus need TCP
TCP (Transmission Control Protocol) – disassemble/reassemble packets, error checking, ACK packets

17. TCP/IP and Domain Names
We need some sort of address in order to identify different nodes, as if every house has a mailing address in order to receive mail from others
The one used by Internet Protocol is called IP address
Every host on the Internet has a unique IP address, made up of four numbers. E.g , each number is between 0 and 255

18. TCP/IP and Domain Names
The numbers in an IP address is hard to remember, while names are easier
Domain Name System – a mapping between the human-readable name (domain name) of a host and its IP address
A domain name consists of two or more parts, e.g. must.ac.ug
The rightmost label conveys the top-level domain, e.g. .ug

19. TCP/IP and Domain Names
Each label to the left specifies a subdomain, in our example, subdomain is ac (Represents academic institution), and sub-subdomain is MUST (Mbarara University).
A top-level domain contains of multiple subdomains, each subdomain can contain multiple sub-subdomain, so on.
The database contains the mapping between a domain name and an IP address is stored on a DNS server.

20. World Wide Web
The World Wide Web (commonly shortened to the Web) is a system of interlinked, hypertext documents accessed via the Internet.
It is created to share files/documents and overcome the barrier of different file formats
Hypertext refers to text on a computer that will lead the user to other, related information on demand.

21. World Wide Web
hypertext documents are created using a special kind of document formatting or “markup” language called HyperText Markup Language (HTML).
HTML is sent or received over the network using HyperText Transfer Protocol (HTTP).
A browser is a software program which interprets the HTML documents and displays it on the user’s screen.

22. URLs and Client-Server Model
Each document/resource on the WWW needs to have an identifier in order to be accessed by others.
A Uniform Resource Identifier (URI), is a compact string of characters used to identify or name a resource.
A Uniform Resource Locator (URL) is a URI which provides means of obtaining the resource by describing its network “location”.

23. URLs and Client-Server Model
Two things are given by the URL
Exact location of the document
The method or protocol by which to retrieve and display the document
Example,
– specifies the protocol
– specifies the host name / domain name
/~ambrose/BIT2111/index.html – specifies the path of the document on the host

24. Putting it All Together

25. Copyright 2005 - The Small Business Depot
Web Components
Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and Ips
Registrars
Copyright The Small Business Depot

26. Copyright 2005 - The Small Business Depot
Clients & Servers
Clients (Browser)
Internet Explorer
Firefox
Mozilla
Netscape
Opera
Amaya
AOL
MSN
Servers
Apache
Microsoft
Netscape
zeus
AOLserver AV
JavaWebServer
Oracle
Copyright The Small Business Depot

27. Copyright 2005 - The Small Business Depot
Web Components
Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and Ips
Registrars
Copyright The Small Business Depot

28. Internet Service Providers Connect Clients to the Internet
Phone Company
AOL
Earthlink
Verizone
NetZero
Basic internet connection
Dialup/DSL/Cable/Sat
Copyright The Small Business Depot

29. Copyright 2005 - The Small Business Depot
Web Components
Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and Ips
Registrars
Copyright The Small Business Depot

30. Web Hosting Services Connects Web Sites to the Internet
Computer (server) farm
Web server software
Firewall hardware and software
IT services
(Backup, troubleshooting, hardware repair)
Disk space
Bandwidth / connection to internet
Routers and switchers
server / storage
Copyright The Small Business Depot

31. Copyright 2005 - The Small Business Depot
Web Components
Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and Ips
Registrars
Copyright The Small Business Depot

32. Copyright 2005 - The Small Business Depot
Domain’s URL’s and IPs
Domain name: The specific address of a computer on the Internet
microsoft.com
Uniform Resource Locator (URL):
Internet protocol (IP) address
Copyright The Small Business Depot

33. Copyright 2005 - The Small Business Depot
Web Components
Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and Ips
Registrars
Copyright The Small Business Depot

34. Copyright 2005 - The Small Business Depot
Domain Registrar
A company that provides domain name registration services for a fee.
Maintain database which maps domain names to IP’s
Propagate new domain name/IP address information across the internet
Copyright The Small Business Depot

35. Copyright 2005 - The Small Business Depot
Creating a Web Site
Choose a domain name
Register with a Registrar
Choose a hosting service
Tell Registrar the IP address
Create web content
Store (publish) onto hosting server (FTP)
Submit new site to search engines
Copyright The Small Business Depot

36. 12 Principles of good web design
Visitor-centric, clear purpose
Progressive disclosure
Displays quickly
Browser compatible
Intuitive navigation
Spelling, grammar, writing
Secure (eCommerce)
Attractive design, easy to read
Cultural bias? (Regional? Domestic? International?)
No technical problems (broken links, buggy scripts)
Maintainable (separate content from style)
Search Engine Accessible
Copyright The Small Business Depot

37. HTML and Markup Languages
We start by looking at HTML
HTML is a markup language
a language for adding some annotation or “markup” to text.
Many other markup languages exist, such as LaTeX:
some {\bf bold} type.
“bf” is markup to indicate how to display the word “bold”.
HTML markup allows you to specify structure of page, and hence how it is displayed, and define hyperlinks between documents.

38. HTML and SGML
HTML is based on the “Standard Generalised Markup Language” (SGML).
In SGML we label a section of text (an element) by adding start and end tags
e.g., <author> Joe </author>
There are different markup languages based on SGML with different tags (allowing different named elements)

39. HTML
HTML has a specific set of tags that allow:
the structure of a document to be described (e.g., <h1> - heading)
links to other documents on web defined (e.g, <a> - anchor)
some control of presentation (e.g., fonts).
To learn HTML you should start creating simple files using notepad.

40. HTML: Example Used Tags:
head
title
body h1 p
<html> <head> <title> My Page </title> </head> <body> <h1> My Page </h1> <p> This is great </p> </body> </html>
Type the above code into notepad and save it as something.html or something.htm

41. Tags and Elements
HTML tags are used to mark up a page.
Tags start and end with angle brackets (e.g., <h1>.
Need a start and an end tag to mark up a region. End tags have an additional “/”.
<h1> My Page </h1>
The two tags define named elements. Above is an h1 element.
head element gives information about page.
body element contains content of page.

42. Elements and Attributes
Elements can also have attributes, giving additional information.
<body bgcolor=“blue”> ..</body>
<table width=“610”> ..</table>
<a href=“ link </a>
URL - Uniform resource locator
Last example defines anchor with hyperlink to another page.

43. Adding multimedia etc.
Images and other multimedia elements easily added to the page, e.g.,
<img src=“mypic.jpg” alt=“me”>
<img src=“
The included image is indicated using a URL.
Strictly you must use an “alt” attribute giving a text description of the file, for viewers who can’t access the image.
Recent versions of HTML use the object element to incorporate any media object, rather than img (etc).

44. Other elements, comments
Other elements that you are likely to find essential include lists (ul, li), tables (table, tr, td, th).
You can and should also add comments to your HTML.
<!-- This is a comment. -->

45. HTML Page Structure You can’t use any tags anywhere on the page!
The rules for which structures are allowed are well defined (as for programming languages).
These state which elements are allowed within which other elements.
They may distinguish block level and inline elements - block level ones apply to long sections.

46. HTML Versions and Validity
HTML has evolved over last 25 years, with new versions appearing.
Development is coordinated now by World Wide Web Consortium (W3C).
Currently most widely used versions are HTML 5 and XHTML 2.0
HTML which is correct in one version may not be correct in another.
HTML 4 was a strict version and a transitional version. Strict is preferred, but transitional allows more backward compatibility.

47. HTML and Browsers
Browsers aim to display any version of HTML, even if it has errors.
Different browsers with different settings will display a page differently.
Incorrect HTML may be displayed weirdly or not at all in some browsers.
Always aim to write correct HTML, not just HTML that displays in your browser nicely.

48. Conclusion
Easy to create Web pages, but important to understand basis of HTML, and to start authoring “by hand” using text editors.
Pages that work in your browser may not work in someone else’s!
Validate your documents. If you get errors try and understand them by looking at HTML references.

49. WEEKLY ASIGNMENT
ANY SUGESTIONS?