Download - Meeting 01
![Page 1: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/1.jpg)
Pemrograman Internet(Internet Programming)Fakultas Ilmu Komputer, TI-S1
Udinus
De Rosal Ign Moses S.
![Page 2: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/2.jpg)
Internet
International network of networks that is a
collection of hundreds of thousands of
individual and public networks
![Page 3: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/3.jpg)
Internet Address
http://www.dinus.ac.id/en/
PROTOCOL FOR THE
WEB
HOST
COMPUTER DIRECTORY
EXTENSION
DOMAIN NAME
![Page 4: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/4.jpg)
Top Level Domains (TLDs)
= Company
= Education
= Government
= Military
= Network
= Organization
.com
.net
.mil
.gov
.edu
.org
![Page 5: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/5.jpg)
Top Level Domains (cont’d)
= Indonesia
= Australia
= Singapore
= Thailand
= United Kingdom
= Canada
= United States
.ca
.uk
.th
.sg
.us
.au
.id
etc
![Page 6: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/6.jpg)
What You Can Do on the Internet
Communicate & collaborate
Access information
Discuss
Obtain information
Entertain
Transact business
![Page 7: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/7.jpg)
Internet Features
Forum, Newsgroup, Listserv (mailing list)
Chat, Instant Messaging
Remote Access (Telnet, SSH)
Transfer File (FTP)
World Wide Web
![Page 8: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/8.jpg)
World Wide Web
A system with universally accepted
standards for storing, retrieving,
formatting, and displaying information
system using a client/server architecture
Combines text, graphics, audio, video,
hyperlink
Website, Homepage, and Webpage
Person in charge is called a Webmaster
http://info.cern.ch/ ( 6
Agustus 1991)
![Page 9: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/9.jpg)
Client/Server
Client: the device that access to server using any software (Web browser, etc)
Server: the computer that provide any services such as:
Web server (HTTP),
Simple Mail Transfer Protocol (SMTP),
Domain Name Serving (DNS),
File Transfer Protocol (FTP),
Firewall (filters data to & from Internet),
Network News Transfer Protocol (NNTP), etc
![Page 10: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/10.jpg)
Communication between
User and Web Server
user
DNS server
web server
![Page 11: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/11.jpg)
Web Forum
![Page 12: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/12.jpg)
Web Social
![Page 13: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/13.jpg)
Web Portal
![Page 14: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/14.jpg)
Web Log, Weblog, Blog
![Page 15: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/15.jpg)
Content Management System (CMS)
![Page 16: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/16.jpg)
Web Scripting
Client Side Scripting◦ Javascript
◦ VB Script
◦ Jquery
◦ Ajax
Served Side Scripting
◦ PHP
◦ ASP
◦ JSP
◦ CFM
![Page 17: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/17.jpg)
Client & Server Side
Client Side Server Side
All codes can be seen by
visitors
Visitor can not see the codes
is processing on the visitor’s
computer
is processing on the web
server
Can not access to the file on
the web server
Able to access the file on the
web server
Can not access to the
database
Able to access the database
![Page 18: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/18.jpg)
Client Side
![Page 19: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/19.jpg)
Client Side
<html>
<head>
<title>Web-ku</title>
</head>
<body>
Halo, apa kabar?<br />
<script>
document.writeln(“Baik-baik saja”);
</script>
</body>
</html>
<html>
<head>
<title>Web-ku</title>
</head>
<body>
Halo, apa kabar?<br />
<script>
document.writeln(“Baik-baik saja”);
</script>
</body>
</html>
server client
![Page 20: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/20.jpg)
Hasil
![Page 21: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/21.jpg)
Server Side
![Page 22: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/22.jpg)
Server Side
<html>
<head>
<title>Web-ku</title>
</head>
<body>
Halo, apa kabar?<br />
<?php
echo “Baik-baik saja”;
?>
</body>
</html>
<html>
<head>
<title>Web-ku</title>
</head>
<body>
Halo, apa kabar?<br />
Baik-baik saja
</body>
</html>
server clientserver client
![Page 23: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/23.jpg)
Hasil?
![Page 24: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/24.jpg)
How to make website?
Plain text editors
Text-based HTML editors
WYSIWYG editorsWhatYou See Is WhatYou Get (Artinya : ApaYang Anda
Lihat Adalah ApaYang Anda Dapatkan)
![Page 25: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/25.jpg)
Plain text editors may be used to
produce webpages Emacs
gedit
jEdit
Kate
Notepad
TextEdit
UltraEdit
Crimson Editor
vi
vim
![Page 26: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/26.jpg)
Text-based HTML editors
Aedix
UPOhtml
Alleycode HTML Editor
Aptana
Arachnophilia
BBEdit
BlueFish
CoffeeCup HTML Editor
CSE HTML Validator
EditPlus
EmEditor
Evrsoft 1st Page
HateML Pro
HTML-Kit
Adobe HomeSite
Notepad++
NoteTab
PSPad
Quanta Plus
SAPIEN PrimalScript
SCREEM
Siteaid
skEdit
TextMate
TextPad
TopStyle
Weaverslave
Kryptonite (editor)
![Page 27: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/27.jpg)
WYSIWYG editors
Adobe Contribute"Dreamweaver Lite"
Adobe Dreamweaver -Previously Macromedia Dreamweaver.
Adobe GoLive
Amaya
Bluevoda
Create
BlueFish
HotDog
iWeb
KompoZer
Media Lab SiteGrinder
Microsoft Expression Web
Microsoft SharePoint Designer
Microsoft Visual Studio / ASP.NET Web Matrix
Microsoft Visual Web Developer
NetObjects Fusion
Quanta Plus
RapidWeaver
Sandvox
SeaMonkey Composer
Softpress Freeway
Virtual Mechanics SiteSpinner
Website X5
WorldWideWeb
![Page 28: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/28.jpg)
Have been discontinued
AOLpress - Now discontinued.
Adobe PageMill - Now discontinued. Replaced by Adobe GoLive.
Microsoft FrontPage - Now discontinued. Replaced by Microsoft Expression Web Designer
Netscape Composer ; Mozilla Composer - Not updated or supported. Replaced by Nvu then KompoZer, or SeaMonkey Composer
Nvu; Developer Daniel Glazman is working on replacement, tentatively called Mozilla Composer; a community-driven WYSIWYGHTML editor fork, KompoZer, maintains Nvu codebase and fixes bugs until a successor to Nvu is released.
HoTMetaL - Replaced by XMeTaL, a commercial XML editor.
![Page 29: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/29.jpg)
Microsoft Frontpage
![Page 30: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/30.jpg)
Adobe Dreamweaver
![Page 31: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/31.jpg)
Adobe GoLive
![Page 32: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/32.jpg)
GINF
![Page 33: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/33.jpg)
Quanta
![Page 34: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/34.jpg)
Aptana Studio
![Page 35: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/35.jpg)
Nvu
![Page 36: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/36.jpg)
Produce HTML Codes
![Page 37: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/37.jpg)
HTML
Hypertext Markup Language
Containing markup tags
Tags tell to the browser how to display
the page
![Page 38: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/38.jpg)
HTML
<html>
<head>
<title>Judul Webpage</title>
</head>
<body>
….
….
</body>
</html>
![Page 39: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/39.jpg)
HTML
<b>….</b> Bold
<i>…</i> Italic
<u>…</u> Underlined
![Page 40: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/40.jpg)
HTML
<font ….>___</font> Change font
◦ Color
◦ Face
◦ Size
<p …>___</p> Create paragraph
<a href=…>___</a> Create link
![Page 41: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/41.jpg)
HTML
<ul>___</ul> Create unordered list
<ol>___</ol> Create ordered list
<li>___</li> Create item on the list
Sample:
<ul>
<li>Adi</li>
<li>Doni</li>
</ul>
![Page 42: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/42.jpg)
HTML
<img src=… /> Show an image
<br /> Line break
<hr /> Horizontal line
![Page 43: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/43.jpg)
HTML
<table …>___</table> Create table
<tr>___</tr> Create row
<td>___</td> Create column
![Page 44: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/44.jpg)
HTML
<form …>___</form> Create a form
Sample:
<form action=“save.php” method=“GET”>
<input type=“text” name=“nilai” />
<input type=“submit” />
</form>
![Page 45: Meeting 01](https://reader031.vdocuments.us/reader031/viewer/2022020307/55a966eb1a28aba3518b45ab/html5/thumbnails/45.jpg)
Thank [email protected]