‫مقدمة‬

" bleiner@computer.org"
"http://www.acm.org"
.

.
 ‫‪.‬‬
‫اإلنترنت ‪ ،‬شبببببلشب ات ببببلش‬
‫‪،‬هي أبرز ثمرة نتجببت ت حم‬
‫نبانبيبببب هبي ثباتة‬ ‫ثباتا‬ ‫ثبم‬
‫‪ ،‬وثاتة االحصببب ال ‪،‬‬ ‫اتمعلام‬
‫–‬ ‫وثاتة اتحااسبببببيم نمب أن‬
‫أي اإلنترنت ‪ -‬حمثل أبرز اتنم ذج‬
‫اتعب تميبب اي االسبببببت ب ة مت‬
‫ات ببببببلبشبببب اتبر بمبيبببب‬ ‫خبببتمب ب‬
‫‪ (Integrated Digital‬اتمتشب ملبب‬
‫واإلنترنت شبببلشب ‪Network).‬‬ ‫‪.‬‬
‫ا ال‬ ‫ب تميببب حرب‬ ‫معلام ب‬
‫اتبحبااسببببببيبببم‬ ‫مبت شببببببلبشب ب‬
‫اتبعب ب تب‬ ‫اتبمبنبت بببببرة ابي بب ب ب‬
‫‪ ،‬وخدبببت تم‬ ‫بلع‬ ‫بعضببب‬ ‫اإلنترنت ما هو وكيف بدأ‬
‫‪.‬اتممخيت مت اتل ر‬

‫‪1969‬‬

‫‪The‬‬ ‫‪ARPA‬‬
‫‪Advanced Research Project Administration‬‬

‫‪Dynamic rerouting‬‬

‫‪.‬‬

‫‪" MILNET‬‬ ‫‪1983‬‬

 Internet Protocol (IP) "
.

" Unix

1984
1986 National Science Foundation (NSF)
1990 NSFNET
20
NSFNET
 ‫أهم نقاط تاريخ نشأة شبكة "االنترنيت" هي‬
‫ا منتاتة‬ ‫وضععععول أوب أ نوا اتص ل لععععتب أرععععت ا أ نت ل في مولقع جتموتت أمري‬
‫‪1969‬‬
‫نونتيا‪.‬‬
‫أوب عرض عتم أرععععت ا أ نت ل في م لر لأوتوععععلا ولوععععنعا نونولد لأوتأ يري أد‬
‫‪1972‬‬
‫لي وملنس يخترع لأتري لإلأ ترو ي ويرسل أوب ستأا على أ نت ل‪".‬‬ ‫يتلل‪ ،‬ولأس‬
‫إضتفا لأنرويج وإ جلترل إأى لأرت ا‪.‬‬ ‫‪1973‬‬
‫نتأنال ‪ ،‬إح ى لأتان تت لأتي ستح د إ تر ل‪".‬‬ ‫لإلعالد عا فتو ل نرو وكوب لأتح‬ ‫‪1974‬‬
‫أوتحل وركتت لأ لت و ر تت ع مولقع ختوا نهت على لأرت ا‪.‬‬ ‫‪1977‬‬
‫أوتح لأترو وكوب ‪TCP/IP‬مو ت ً‬
‫يت أرت ا أ نت ل‪" .‬‬ ‫‪1983‬‬
‫متم‬ ‫ا ‪NSF‬على عت اهت مسععلوأ ا أ نت ل ‪ ،‬و ا ي‬ ‫أخذت م سععسععا لأولوم لكمري‬
‫إععتء أسععلتء كجه ة لأ لت و ر لألووععوأا نتأرععت ا لألسععلى ‪Domain Name System‬‬ ‫‪1984‬‬
‫)‪(DNS‬‬
‫ا إ تر ل ختوا نهت‪.‬‬ ‫أوب وركا كلت و ر سجل مل‬ ‫‪1985‬‬
‫أ ر ع ت م سععسععا لأولوم لأوتأل ا وععت تهت لكسععرع ‪TNSFNE‬مع ظهو نرو وكوب ال‬
‫عا ‪Network News Transfer Protocol‬جعتعال أ ع يعا لأناعتت لأتفعتعلي‬ ‫لكختعت لأرعععععت‬ ‫‪1986‬‬
‫لألتتور أمرل مل نت ‪ ،‬وإح ى وركتت لأ لت و ر تني أوب ج ل حلتيا أرت ا إ تر ل‪" .‬‬
‫توأى لألهلا نتألاتنل‪.‬‬ ‫إغالق أ نت ل و إ تر ل‬ ‫‪1990‬‬
‫غوفر ‪" Gopher‬وهو نر ععتمج تسعععععترجععتع‬ ‫ععا ا ع م نر ععتمج‬ ‫جععتموععا م ن سعععععو ععت لكمري‬
‫‪1991‬‬
‫لألولومتت ما لكجه ة لأختدما في لأرت ا‪.‬‬
‫لأف يعت عا لأوعتأل عا ‪CERN‬في سعععععويسعععععرل‪ ،‬اع م وععععع فرة لأن‬ ‫م سعععععسععععععا لكنحعت‬
‫لألترلنط ‪Hypertext‬لألت أ لأترمجي لأذي أدى إأى عوير لأرعععت ا لأوتأل ا ‪Word Wide‬‬ ‫‪1992‬‬
‫‪Web‬‬
‫تو‬ ‫ق لنت أ لإلنحت ‪ ،‬ما خالب إوععععع ل أوب نر تمج مسعععععتورض لأرعععععت ا مو لي‬
‫لأر س لكمري ي كل نتود‬ ‫و ونر تمج متي روسععععوفل‬ ‫تسعععع‬ ‫آخرود مثل نر تمج‬
‫‪1993‬‬
‫لأعععععخعععععتوععععععععععا ععععععلعععععى لأرععععععععععتععع ع عععععا لأعععععوعععععتأعععععلععع ع عععععا‬ ‫يعععععععععععلعععععع وععععععععععفعععععحعععععتععع ع‬
‫‪http://whitehouse.gov/wh/welcome.html‬‬
‫ل لععععل نرععععت ا إ تر ل سععععتا مالي ا جهت ختدم و ‪50.000‬وععععت ا‪ ،‬وإح ى وععععركتت‬
‫‪1995‬‬
‫لأ لت و ر علع نر تمج لأتحث في لأرت ا لأوتأل ا‪.‬‬
‫في لأرععععرق لأوسععععط أوععععتحل‬ ‫أوععععتحل إ تر ل و وك كللتت مت لوأا عتر لأوتأ‬
‫لكوب أرععت ا وحتى لأ وم‪ ،‬وأوععتح‬ ‫إ تر ل ما لألولضع ع لأسععتخنا‪ ،‬لنت لء ما لأتلععل‬ ‫‪1996‬‬
‫هنتك ع د ما م ودي خ ما إ تر ل يا مود خ مت ه ‪.‬‬
 ‫ما الفرق بين اإلنترنت والويب؟‬

‫‪.‬‬

‫إلنترنت‬
‫‪Web servers‬‬
‫بينما الويب‬ ‫فاإلنترنت‬

‫‪Internet Relay Chat‬‬

‫‪IRC.‬‬

‫آلية عمل شبكة اإلنترنت‬

‫‪.‬‬

‫الشبكة البسيطة‬

‫ا‪ .‬قاسم سلحب‬ ‫‪5‬‬ ‫تصميم ويب ‪1‬‬

 ‫‪45‬‬ ‫‪10‬‬
‫‪.‬‬

‫‪Router‬‬
‫‪A‬‬
‫‪A‬‬ ‫‪B‬‬
‫‪C.‬‬ ‫‪B‬‬

‫‪.‬‬ ‫‪10‬‬

‫ا‪ .‬قاسم سلحب‬ ‫‪6‬‬ ‫تصميم ويب ‪1‬‬

 ‫شبكة مكونة من عدة شبكات‬

‫‪.‬‬

‫ا‪ .‬قاسم سلحب‬ ‫‪7‬‬ ‫تصميم ويب ‪1‬‬

 ‫‪.‬‬

‫‪Modem‬‬

‫‪.‬‬

‫ا‪ .‬قاسم سلحب‬ ‫‪8‬‬ ‫تصميم ويب ‪1‬‬

 Internet Service
ISP. Provider

‫إيجاد حاسوب معين‬

IP address (
IP ). Internet Protocol

: 192.168.2.10.

Domain
IP names.
142.250.190.78. IP google.com
.

‫ قاسم سلحب‬.‫ا‬ 9 1 ‫تصميم ويب‬

 URL‫ ما هو عنوان‬-URL

URL
(Uniform Resource Locator)

URL

(Address Bar)
URL
http://. fttp:// URL

URL

‫ قاسم سلحب‬.‫ا‬ 10 1 ‫تصميم ويب‬

 URL‫البنية األساسية لعنوان‬

: URL

(Network Protocol). .1
(access authorization). .2
(host) .3
(IP).
(IP). (Port) .4

URL‫شرح تفصيلي لعنوان‬

URL
: https://www.ptuk.edu.ps

https:// •

Hyper Text Transfer Protocol http

(Application Layer Protocol)
(Web Browser) (HTML)
. (HTTP) (Web Servers)

Https s

. http

www •

(World Wide Web)

URL
URL

‫ قاسم سلحب‬.‫ا‬ 11 1 ‫تصميم ويب‬

 ptuk •

(DomainName)

(IP). (Web Hosting)

. edu •

Top Level Domain TLD

.edu
.

‫ رك تا لسععع ع لأنعتق مع لألسعععععتوى لكعلى كسععععع لأنعتق هي لأتي جول لسععع ع‬:‫ملحوظا‬
facebook.net.‫ مختلف عا لأ وم ا‬facebook.com ‫ وهذل يجول لأ وم ا‬، ‫لألوقع فري وغ ر م ر‬

.
)Generic Top-Level Domain) gTLDs .1

: .

. (.com)
. (.org)
. (.gov)
. (.edu)
. (.tv)
country code Top Level Domain) ccTLDs) .2
:
:
. (.eg)
. (.ae)
. (.us)

‫ قاسم سلحب‬.‫ا‬ 12 1 ‫تصميم ويب‬

 . (.uk)
. (.ly)
. (.sa)
. (.kw)
. (.dz)
. (.ma)
. (.ca)
new top-level domain) nTLDs .3

.
:
. (.app)
. (.business)
. (.academy)

‫ قاسم سلحب‬.‫ا‬ 13 1 ‫تصميم ويب‬

 ‫مجال تطوير المواقع‬

Back-End/Front-End

Front-End + Back-End,
Front-End
Back-End

Front-End Developer‫تعريف ال‬

Front-End Develop ‫اللغات األساسية في مسار‬

HTML‫لغة‬

HTML5.

CSS ‫لغة‬

HTML CSS

JavaScript ‫لغة‬

‫ قاسم سلحب‬.‫ا‬ 14 1 ‫تصميم ويب‬

 .

Bootstrap ‫إطار‬
Bootstrap
Responsive

(Backend development) ‫الواجهات الخلفية‬

Back-End

PHP
Node.js Flask Django NET
Html , CSS , JavaScript

Back-End Developer

(Backend)‫اللغات المستخدمة في تطوير الواجهات الخلفية‬

(server-side scripting language) :PHP

(Server Side) PHP
.

: Java
. Java (highly scalable)

Python:
(Backend).

(runtime Node.js:
NodeJS JavaScript environment)

‫ قاسم سلحب‬.‫ا‬ 15 1 ‫تصميم ويب‬

(Backend Service) Node.js (Framework).
Mobile App.
Walmart. Netflix Uber Paypal

(Backend )‫األطر والمكتبات المستخدمة في تطوير الواجهات الخلفية‬

Nodejs
(hybrid). (SPA)
. HTTP

(model-template- Python Django:

. views).

Ruby on Rails:
(model-view-controller).
.

PHP . Laravel:
. (reusing components)

(Server-side) Spring:
Struts Hibernate Java. (infrastructure)
. Java (extensions) EJB.

‫ قاسم سلحب‬.‫ا‬ 16 1 ‫تصميم ويب‬

‫ما هو الفرق بين المواقع الثابتة ‪ static‬والمواقع الديناميكية ‪ dynamic‬؟‬

‫ما هو الموقع الثابت ‪ Static‬؟‬

‫ما هو الموقع الديناميكي‪dynamic‬؟‬

‫الفرق بين المواقع الثابتة والمواقع الديناميكية‬

‫ا‪ .‬قاسم سلحب‬ ‫‪17‬‬ ‫تصميم ويب ‪1‬‬

 ‫موقع ديناميكي‬ ‫موقع ثابت‬ ‫المعيار‬
‫كتـ برم وتنلكـا دك ر تننكـ م ـل‬ ‫كتبت بالكامل بـــــ ‪ HTML‬وكل صفحة هي‬
‫‪PHP‬دو‪ ، ASP‬وتوكلـ م لتحك يي‬ ‫ـ‬ ‫هلـاا د‬ ‫صــفحـن ملف ــيـة ولك‬
‫أاـاإل در ا لو ع بـالكـامـل‪ ،‬هـع نلي‬ ‫ـوـكـ‬ ‫لـيـبـكـاأـا دو أـاـاإل ار ا لـوـحـتـ‬
‫لغات‬
‫ــيــى د ــر‬ ‫دأـ فـــ ن تــكـ ل ــار‬ ‫ال ـتـوـار ـيـكـنه وهـع ـنـلـي دل ل ـ ـبـكـل‬
‫البرمجة‬
‫لتحـ ـا رول لحـا ـة دلى د منريـة‬ ‫مـ‬ ‫هـع لـلـ‬ ‫لـ يـكـ لـتـنـ ـل مـحـتـ‬
‫‪HTML‬دو د لـغـة مـ لـغـا بـرمـ ـن‬ ‫ع ه تغككر كل صـفحة ‪ HTML‬يى‬ ‫لو‬
‫ع‪.‬‬ ‫لو‬ ‫ي ا‪.‬‬
‫ـوـيـكـة ‪ -‬فــ ـيـة لـتـحـ ـ ‪ -‬تـ ـربـة‬ ‫فــر نة لتي ر ‪ -‬تكيفة يكية ‪ -‬خك ــة‬
‫م ـ ـتـ ـ إل ديضـــل ‪ -‬لـنـكـاإل بـوـ ـاإل‬ ‫ول ك كر‬ ‫الفتضاية ‪ -‬ال تتيي‬ ‫المزايا‬
‫منن ا‬
‫ع ل ـابتـة ‪ -‬تحتـا‬ ‫تكيفـة د يى م لو‬ ‫تـتـيـيـ خـبـرا بـرمـ ـكـة لـتـحـ ـ وتـيـ ـر‬
‫العيوب‬
‫دلى م ر ك كر‬ ‫لو ع‬ ‫محت‬

‫ا‪ .‬قاسم سلحب‬ ‫‪18‬‬ ‫تصميم ويب ‪1‬‬

 Web Server‫كيف يعمل خادم صفحات الويب‬

(http://www.ptuk.edu.ps)

‫خلف الكواليس‬

Enter URL

URL 1

http .a
www.ptuk.edu.ps server name .b
index. html .c

IP name server 2
www.ptuk.edu.ps

IP 3
80 port

‫ قاسم سلحب‬.‫ا‬ 19 1 ‫تصميم ويب‬

 HTTP 4
www.ptuk.edu.ps /index.htm

HTML 5

HTML 6

‫إعادة ترتيب األفكار‬

•

•
DSL
internet service
ISP provider
•
fiber optics

‫ قاسم سلحب‬.‫ا‬ 20 1 ‫تصميم ويب‬

 ‫مفاهيم ومحاور عامة في بنية االنترنت‬
clients and servers ‫ العمالء والخوادم‬.1
•
clients servers

web servers
FTP mail server server
servers
clients
www.yahoo.com

IP Addresses ‫ عناوين بروتوكول االنترنت‬.2

•

‫ قاسم سلحب‬.‫ا‬ 21 1 ‫تصميم ويب‬

 IP IP address
32bit Internet protocol
216.183.103.150
255 0 Octs IP •
28

IP IP •

IP

IP
IP •
CMD RUN
Enter IPCONFIG.EXE

‫ قاسم سلحب‬.‫ا‬ 22 1 ‫تصميم ويب‬

 ‫‪IP‬‬ ‫•‬

‫‪Domain name‬‬
‫‪ .3‬أسماء النطاقات ‪Domain Names‬‬
‫•‬

‫‪www.ptuk.edu.ps‬‬
‫‪ .a‬الجزء األول وهو األحرف املشهورة )”‪(“www‬تسمى اسم املضيف ‪host name‬‬
‫‪ .b‬الجزء الثاني هو )”‪ (“PTUK‬هو اسم النطاق ‪domain name‬‬
‫‪ .c‬الجزء الثالث هو )”‪ (“PTUK‬ويعتبر املستوى األىلع السم النطاق ‪top-‬‬
‫‪level domain name‬‬
‫‪ .4‬خوادم أسماء النطاقات ‪Name Servers‬‬
‫•‬
‫‪IP address‬‬

‫‪ .5‬البوابات ‪Ports‬‬
‫‪ports‬‬

‫ا‪ .‬قاسم سلحب‬ ‫‪23‬‬ ‫تصميم ويب ‪1‬‬

 80
21 FTP
IP

Protocols ‫ البروتوكوالت‬.6
•
protocol

daytime protocol o
13

HTTP o

URL
http

‫ قاسم سلحب‬.‫ا‬ 24 1 ‫تصميم ويب‬

‫ا‪ .‬قاسم سلحب‬ ‫‪25‬‬ ‫تصميم ويب ‪1‬‬