18904: Ch 1: Introduction to

Web Programming
Introductions, Internet, WWW, HTML Intro

Credits to: Rose-Hulman Institute of Technology

Intro to Course

Front-end development

Back-end development

Node.js

Data-driven application
MongoDB

REST API
2
Agenda

Roll call and introduction

Course introduction

Visual Studio Code installation

The Internet and the World Wide Web

HTML Intro

3
Roll call, Introductions

Student Introductions (Name, Hometown, Web development experience)

❖ Listen to other students’ Web dev background

❖ One of them will be your in-class partner

❖ You should partner with someone with similar experience

Instructor Introduction

4
INSTRUCTOR’S PROFILE

Muhammad SenoYODHA Brennaf

32 yo, 1 wife, 2 sons
Bandung – Jakarta
B.Sc.Eng Computer Science @ Inha University, South Korea
M.Sc. Computer Science @ The University of Manchester, UK

Lecturer at Politeknik Pos Indonesia

President Commissioner PT. Astrajingga Inovasi Digital
Founder & Commissioner of Halal Local

Clients:

5
More Introductions, partner selection

Instructor Introductions
❖ Why I am doing this course (passion for Web dev, learn by teaching)

❖ We will all learn from each other

❖ Teach web services development

In-class partner selection, sign contract

5
Course Introduction

Course objectives
❖ Understand what is a web application
❖ Be able to develop a simple web application
❖ Develop the thinking patterns required to adapt to the fast evolution of the web
technologies

What we’ll study in the course

❖ The Web – short history, why it was developer, how it evolved, where is it going
❖ How the web works, the HTTP protocol, and web technologies
❖ Develop a web page after a designer’s model
6
What I Want From You

Ask questions
❖ Don’t leave anything unanswered (sometimes I’ll try to ask them for you)
❖ Why ask questions? In order to understand something, you need to get answers.
But more importantly, you need to want to get the answers and to know what
questions to ask

Learning by doing
❖ Why? Learning happens when you work and discover. That is how knowledge is
constructed inside your head ☺

6
How you’ll get points

Course Grades
Weight Grade Component

10% Attendance, participation in-class, online, & with in-class partner

10% Quizzes

25% Graded Homework/Assignments/Lab works

30% Exams

25% Term Project

7
Install Visual Studio Code

http://code.visualstudio.com/Download
❖ Installation instructions:
Find it on Google Drive/VL

❖ Launch from Terminal/Command Prompt

❖ Install extensions to add themes, languages, debuggers, additional services

❖ Built-in support for Git

❖ IntelliSense

10
5-mins break

You may want to talk to your

partner candidates

Get help finishing installation

of VS Code

Can use other editor if you

prefer

11
Internet vs World Wide Web

The Internet
❖ Network of networks that use the Internet protocol
suite to link billions of devices worldwide

❖ Consists of millions of private, public, academic,

business, government networks

❖ Networks linked together by electronic, wireless, &

optical networking technologies

❖ Carries information resources and services, e.g. WWW

12
Brief history of the Internet

The Internet

❖ Began as a US Department of Defense network called ARPANET (1960s-70s)

❖ Initial services: electronic mail, file transfer

❖ Opened to commercial interests and most universities in late 80s

❖ WWW created in 1989-91 by Tim Berners-Lee

❖ Early web browsers released: Mosaic 1992, Netscape 1994, Internet Explorer 1995

❖ Amazon.com opens in 1995; Google January 1996 11

Internet: Layered Network Architecture

❖ Physical layer: devices such as Ethernet, coaxial

cables, fiber-optic lines, modems

❖ Data link layer: basic hardware protocols

(ethernet, wifi, DSL PPP)

❖ Network / internet layer: basic software protocol (IP)

❖ Transport layer: adds reliability to network layer

(TCP, UDP)

❖ Application layer: implements specific communication

for each kind of program (HTTP, POP3/IMAP, SSH, FTP) 12
Internet Protocol (IPv4)

❖ Simple protocol for attempting to exchange data between two computers

❖ Each device has a 32-bit IP address written as four 8-bit numbers (0-255)

❖ Find out your internet IP address:

http://ip-lookup.net/

❖ Find out your local IP address:

in a terminal window, type: ipconfig (Windows) or
ifconfig (Mac/Linux)

15
Transport Control Protocol (TCP)

❖ Adds multiplexing and guaranteed packet delivery on top of IP

❖ Multiplexing: multiple programs using the same IP

port: a number given to each program or service

port 80: web client (port 443 for secure web browsing)
port 25: email
port 22: ssh and sftp
port 27017: mongoDB

❖ Some programs (games, streaming media programs) use simpler UDP (User Datagram
Protocol) protocol instead of TCP
16
World Wide Web

The WWW comprises Web Servers and Web Browsers

❖ Web Server: software that listens for Web page requests and serves up the requested pages

Apache - http://www.apache.org
Microsoft Internet Information Server (IIS) - http://www.iis.net/
Express - https://expressjs.com
Phusion Passenger - https://www.phusionpassenger.com

17
World Wide Web

The WWW comprises Web

Servers and Web Browsers

❖ Web browser: gets and renders

documents from servers

Popular browsers

18
Organizations you should know

Internet Engineering Task Force (IETF)

❖ internet protocol standards

Internet Corporation for Assigned Names and Numbers (ICANN)

❖ decides top-level domain names

World Wide Web Consortium (W3C)

❖ web standards
19
Domain Name System (DNS)

Set of servers that map domain names to IP addresses

❖ Example:

https://poltekpos.ac.id ➔ 103.10.60.106

❖ DNS Lookup Tool

http://mxtoolbox.com/DNSLookup.aspx

20
Uniform Resource Locator (URL)

Web Address OR an ID for the location of a Web resource on a computer network

❖ https://poltekpos.ac.id/tentang
protocol host path

When this URL is entered in the browser, it would:

❖ Ask the DNS server for the IP address of https://poltekpos.ac.id

❖ Connect to that IP address at port 80

❖ Ask the server to GET /tentang and display the result in the browser
21
Advanced URLs

Anchor: jumps to a given section of a page

❖ http://en.wikipedia.org/wiki/HTML_element#Anchor
Fetches the HTML_element document, then jumps to the part of the page labeled Anchor

Port: for web servers on ports other than the default port 80

❖ http://portquiz.net:8080/index.php

22
Advanced URLs

Query string: a set of parameters passed to a web application

http://www.google.com/search?q=miserable+failure&start=10

❖ parameter named q is set to value miserable+failure

❖ Parameter named start is set to value 10

23
Hypertext Transfer Protocol (HTTP)

Defines a set of commands understood by a Web server and sent from a browser
Some HTTP commands (your browser sends these internally)

❖ GET resource -- requests data from a specified resource

❖ POST resource -- submits data to be processed to a specified resource

❖ PUT resource -- uploads a representation of the specified URL

❖ DELETE resource -- deletes the specified resource

24
HTTP status codes

When a request is made by the browser, a response is sent back by the server with a
status code, possibly followed by a Web resource
Number Meaning
200 OK
301-303 Page has moved (temporarily or permanently)
403 It is forbidden to access this page
404 Page not found
500 Internal server error

25
Internet Media Types (MIME)

Sometimes when including other resources in a Web page (stylesheet, image,

multimedia object), we specify their type of data
MIME Type File Extension
text/html .html
text/plain .txt
image/gif .gif
image/jpeg .jpg
videeo/quicktime .mov
application/octec-stream .exe 26
Basic HTML

Defines the content and structure of information on a page

❖ Not the same a presentation (appearance in the browser)
Surrounds text content with opening and closing tags

Each tag’s name represents an HTML element

❖ Syntax: <tagname>Content goes here...</tagname>
Most whitespace is collapsed or ignored in HTML

We will use HTML5 syntax

27
Structure of HTML page

DOCTYPE tells browser to interpret <!DOCTYPE html>

code as HTML5 <html>
<head>
HTML page is save in a file with information about the page
</head>
extension .html
The header describes the page, and <body>
page contents
the body holds the page’s content </body>
</html>

28
Page title: <title>

Describes the title of the page <!DOCTYPE html>

<html>
Displayed in the Web browser’s <head>
title bar and when bookmarking a <title>Introduction to HTML </title>
</head>
page
<body>
page contents
</body>
</html>

29
Paragraph: <p>

Describes a paragraph of text <!DOCTYPE html>

(block element) <html>
<head>
This is placed within the body of <title>Introduction to HTML </title>
</head>
the page
<body>
Examples:
<p>This is a paragraph of text </p>
❖ http://www.w3schools.com/tags/tryit.as </body>
p?filename=tryhtml_paragraphs2 </html>

30
Headings: <h1>, <h2>, … <h6>
<!DOCTYPE html>
Separate major areas of a page <html>
(block element) <head>
<title>Introduction to HTML </title>
This is placed within the body of </head>
the page
<body>
Examples: <p>This is a paragraph of text </p>
❖ http://www.w3schools.com/tags/tryit.as <h1>Politeknik Pos Indonesia</h1>
<h2>Academy of Smart People</h2>
p?filename=tryhtml_headers
<h3>D4 Ecommerce Logistics</h3>
<h6>We teach the best stuff here!</h6>
</body>
</html>
29
Questions?