COMP 1234 Lecture 1 - Introduction to Web Development

• The lecture is an introduction to web development.

Agenda

• A brief history of the Intranet.
• How web applications work.
• Introduction to HTML, CSS, JavaScript.
• Tools for Web Development include Webstorm.
• Introduction to web servers, HTTP and FTP.
• Client / Server Communications
• How web browsers interpret HTML/CSS/JavaScript.

History of the Internet

• The internet started with ARPANET in the 1960s.
• Email was created in 1971.
• Online shopping was invented in 1979.
• The first computer virus was spread in the 1980s.
• The speed of the intranet was developed in 1986.
• The first Browser was published in the 1990s.
• eBay is founded in 1995.
• WiFi was established.
• Google was founded in 1998.
• The internet started to become world wide.
• The Internet of today is 2022+.

How Web Applications Work

• Devices such as Desktops Computer, Tablets and Smart Phones connects via the internet to a Web Server.

The Architecture of the Internet

• A web application is the clients, a web server, and a network.
• Clients use web browsers to request webpages from the web server.
• The web server returns the pages that are requested back to the client browsers.

LAN

• Local Area Network directly connects computer to each other.
• Often referred to as an intranet connection.

WAN

• A Wide Area Network consist of two or more LANs connected by routers.
• The routers route information from one network to another.

IXP

• The Internet consists of many WANs that have been connected at Internet Exchange Points (IXPs).
• There are many IXPs located throughout the world.

ISP

• An Internet service provider (ISP) owns a WAN and leases network access.
• It connects its WAN to the rest of the Internet at one or more IXPs

Static Web Pages

• A static web page is an HTML document stored on a web server that does not change.
• The HTML files (.html or .htm extensions), are examples of static web pages.

How a web server processes a Static Web Page

• The client, uses a web browser to request via HTTP a web server.
• That web server responds to the client, returning code written in HTML

Dynamic Web Pages

• A dynamic web page is a web page whose construction is controller by an application server, processing server side code.
• The parameters passed to the server determine how the assembly of the page is determined.

How a web server processes a Dynamic Web Page

• The client, uses a web browser to request via HTTP a web server.
• If the page is dynamic the web server will contact an Application Server, to prepare any data access from a database Server.
• The Application server composes the page which is returned through the web-server to the client.
• The web server then responds to the client, returning code written in HTML.

Introduction to HTML, CSS, JavaScript

HTML – Hypertext Markup Language

• HTML is the standard markup language for documents designed to be displayed in a web browser.
• It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript to help an application run efficiently.

CSS

• Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.
• CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

JavaScript

• JavaScript is client-side scripting language, that is ran by the JavaScript engine of a web browser.
• When a browser requests an HTML page that contains JavaScript or a link to a JavaScript it loads into the browser.
• Because JavaScript runs on the client, not the server, it provides functions that don't require a trip back to the server.
• JavaScript can help an application run more efficiently.

Tools for Web Development

Webstorm / Atom / Visual Studio Code

• WebStorm, Visual Studio code and Atom are Integrated Development Environment (IDE) for HMTL, CSS and JavaScript
• Like most IDEs, their job is to make your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease.

Webstorm

• Webstorm is a popular Integrated Development Environment to use for the lecture in this course
• Ultimately the choice of IDE is up to the student

Client / Server Communication Model

• Involves two components: Client requesting data, Server responds to the request
• Typically there are many client in communication to a single server

Client Machines:

• Desktops, laptops, smart phones, and tablets
• Have a broad range of specifications for operating system, processing speed, screen size, available memory and storage

Server Machine

• Hosts web applications, stores ser and program data, and performs security authorization tasks
• Powerful system to handle high traffic and bandwidth
• The essential characteristic of a server is that it is listening for requests, and upon getting one, responds with a message

Internet Protocols

• Protocol is a set of rules that partners use when they communicate
• TCP/IP is an essential internet protocol
• Every OS implements these protocols, making fast web development possible

URL

• Uniform Resource Locators (URL) allow client to request particular files from a server
• URLs consist of two required components
• The protocol used (ex http)
• The domain (or IP address) to connect to)
• Optional components include
• The path that idenifies a file
• Optional port
• Query string
• a fragment identifier

Hypertext Transfer Protocol

• HTTP is the protocol of the web
• HTTP establishes a TCP connection on port 80 by default
• The server waits for the request, then responds with
• Headers
• Response Code
• An optional message (which can include files)

HTTP Headers

• Headers are sent in the request from the client and received in the response from the server
• Request headers include data about the machine like Host, User-Agent, Cache settings
• Response headers have info about the server answering the request and the data being sends, like server, Last Modified, Content Type and Encoding.

HTTP Request Methods

• Common requests are GET, POST and HEAD request.
• PUT and DELETE requests are used when constructing an API in NODE

HTTP GET Request

• The most common type of HTTP Request
• Asking for a resource, located at a specified URL to be retrieved
• If you click on a link, type in a URL, or click a bookmark, you are making a GET request
• Data can be transmitted through a GET request, with a query string

HTTP POST Request

• POST Request transmit data to the server using an HTML form

Web Server

• A fundamental web server takes web requests and responds to them
• Real-world websites have many servers configured together in web farms
• Run web server with a combination of OS, webserver software, database and scripting language

Hypertext Transfer Protocol Details

• Allow your browser to communicate with a server and get info from internet
• Use HTTP to construct websites and app

File Transfer Protocol (FTP)

• Storage a database that allow access to service on internet
• Is a set of standard protocols for file transfer of data
• FTP utilizes a client/sever model.
• FTP is ONLY used to transfer file

How Web Browsers and servers exchange HTML/CSS/JavaScript?

• Web browsers do need user experience for website like they for traditional desktop software.
• User does not download software, they just visit the URL
• Typical developer my must understand in order to develop the websites and browser

Fetching a web Page

• Single webpage facilitated by the browser requests of initial HTML page
• Parse result HTML results to find all resources referenced from within its
• HTML images Style sheet, etc...

Absolute Path and Relative URLs

• Referencing a page or resource on an external site will require a Full URL
• A full URL will contain the protocol and the domain name
• Referencing a resource on the current server can use relative referencing
• If the URL does not inlcude HTTP will indicate the browser will request the current the current server files

Absolute Path

• Is a Path that describes to the location of folder or file and regardsless of working directory
• Absolute path contains all full address of the file location to refer certain directory computer as (D: DocumentsMy/Document.doc)

Relative Path to File

• Relative Path it describes the allocation file or folder relative to the current working directory(DocumentMydocument.docx) example

Linking

• To link a file,use simple the file name with same directory
• To link to subdirectory use the subdirectory with slash and file name
• Grandchild directory it include the all directory and subdirectory before the file name
• Parent directory will use (../ )
• Sibling Directory use (../ ) moves up then use same techniques for grand child and child

Relative Path Example

• Index.html, /graphichs/image.png, /help/article/how-do-i-set-up a webpage.html
• Abolute PAth, https//:www.mysite.com/help/article/how-do-i-set-up a webpage.html

GBLearn Hosting(George Brown Learn)

• Allow student in George Brown to gain experiences working with real server with individual hosting account.
• Once student is get account access with website(https//:www.My.gblearn.com/)
• The GBLearn administrator allow receive and email with all information the account activation — To Access the GBlran Accout with a file Transfer protocols like Flilezilla. To loign the your GBLearn you will need 3 pieces of information
• HostName, Account and password

HTML Basic Details

• A simple HTMl document looks like the example in slide
• Working with HTML tags,openings and closing Tags:

Tags Elements

• .,

  Here is a link list:

• Empty Tags
  , Src-“logo.gif”alt-“Murach loga
• Correct Tags Element copy-copy
• Correct nesting todayToday Copy the today
• An opening tag with one Attributes
• an opening tag with 3 attributes

-W3C
  • Html markup validator(https://validator.w3.org)
  • CSS validator(https://Jigsaw.w3.oeg/css.validator