Ministry of Higher Education

Bamyan University
Computer Science Department

Fundamentals of Web designing

‫مبانی طراحی وب‬
How the Web works?
‫وب چگونه کار میکند؟‬
learning objective ‫هدف یادگیری‬
 In this chapter you will learn ‫ در این فصل یاد خواهید گرفت‬
 What is web? ‫وب چیست؟‬ 
 How does the web works? ‫وب چگونه کار می کند؟‬ 
 What is a web server? ‫یک وب سرور چیست؟‬ 
 What is a browser? ‫مرورگر چیست ؟‬ 
Internet vs. Web
• The Internet is network of
connected computers that
electronically connects millions
people of world wide.
• No company owns the Internet, it is
a cooperative effort governed by a
system of standards and rules.
• The purpose of connecting
computers together, of course, is to
communicate and share information
‫اینترنت در مقابل وب‬
‫• اینترنت شبکه ای از رایانه های متصل است که‬
‫میلیون ها نفر را در سراسر جهان به صورت‬
.‫الکترونیکی به هم متصل می کند‬
‫ این یک تالش‬،‫• هیچ شرکتی صاحب اینترنت نیست‬
‫مشترک است که توسط سیستمی از استانداردها و‬
.‫قوانین اداره می شود‬
‫• البته هدف از اتصال کامپیوترها به یکدیگر‬
‫برقراری ارتباط و اشتراک گذاری اطالعات‬
What is Web?
• The Web (originally called the World
Wide Web, thus the www in site
addresses) is part of the Internet which
itself is "a network of interconnected
computers" to transfer data (for
example, emails, web documents etc.)
between computers
• It is just one of the ways information
can be shared over the Internet.
• The World Wide Web was created in
1989 by Sir Tim Berners-Lee
• The Web is a subset of the Internet. It
is just one of many ways information
can be transferred over networked
computers.
‫وب چیست؟‬
،‫وب (که در اصل وب جهانی نامیده می شود‬ •
‫ در آدرس های سایت) بخشی از‬www ‫بنابراین‬
‫اینترنت است که خود « شبکه ای از رایانه های به‬
، ‫هم پیوسته» برای انتقال داده ها ( به عنوان مثال‬
.‫ اسناد وب و غیره) بین رایانه ها است‬،‫ایمیل‬
‫این تنها یکی از راه هایی است که می توان‬ •
. ‫اطالعات را از طریق اینترنت به اشتراک گذاشت‬
‫ توسط سر تیم‬1989 ‫شبکه جهانی وب در سال‬ •
‫برنرز لی ایجاد شد‬
‫ این تنها یکی‬.‫وب زیر مجموعه ای از اینترنت است‬ •
‫از راه هایی است که می توان اطالعات را از‬
.‫طریق رایانه های شبکه منتقل کرد‬
How does WWW works?
• The Web (World Wide Web) is a body of
information stored on web servers.
• A web server can mean two things
• A computer on which a web site is hosted
• A program that runs on such a computer
• Term web server refers to both hardware and
software:
• 1. The hardware web server computer
• A web site to be available to everyone in the world at
all times, it need to be stored or "hosted" on a
computer that is connected to the internet. Such a
computer is known as a Web Server
• 2. The web server program
• The software: Software that runs on the web site
hosting Server computer, Its main purpose is serving
web pages by retrieving web pages and giving it to
users as requested.
‫ چگونه کار می کند؟‬WWW
‫• وب (وب جهانی) مجموعه ای از اطالعات است که در‬
. ‫سرورهای وب ذخیره می شود‬
‫• یک وب سرور می تواند دو معنی داشته باشد‬
‫ای که یک وب سایت روی آن میزبانی می شود‬ •
‫ای که روی چنین کامپیوتری اجرا می شود‬ •
‫• اصطالح وب سرور به سخت افزار و نرم افزار اشاره‬
: ‫دارد‬
‫ کامپیوتر سرور وب سخت افزاری‬.1 •
، ‫یک وب‌سایت برای اینکه همیشه در دسترس همه مردم دنیا باشد‬ •
»‫باید روی رایانه‌ای که به اینترنت متصل است ذخیره یا «میزبان‬
‫ چنین رایانه ای به عنوان وب سرور شناخته می شود‬. ‫شود‬
‫• برنامه وب سرور‬
‫ نرم افزاری که روی وب سایت میزبان کامپیوتر سرور‬:‫نرم افزار‬ •
‫اجرا می شود و هدف اصلی آن سرویس دهی صفحات وب با‬
‫بازیابی صفحات وب و ارائه آن به کاربران در صورت‬
.‫درخواست می باشد‬
Software web servers
• There are many server software
options out there, but the two most
popular are:
• 1. Apache(open source software) :
• For Unix-based computers and comes
installed on Macs running Mac OS X.
• 2. Microsoft Internet Information
Services (IIS) Windows version :
• Part of Microsofts family of server
solutions
‫وب سرورهای نرم افزاری‬
‫ اما دو‬،‫• گزینه های نرم افزار سرور زیادی وجود دارد‬
:‫مورد از محبوب ترین آنها عبارتند از‬
: )‫ (نرم افزار متن باز‬Apache .1 •
‫برای رایانه‌های مبتنی بر یونیکس و روی مک‌های دارای‬ •
.‫ نصب می‌شود‬Mac OS X ‫سیستم عامل‬
Microsoft Internet Information Services .2 •
:‫( نسخه ویندوز‬IIS)
‫بخشی از خانواده راه حل های سرور مایکروسافت‬ •
What is browser?
• The web browser is software
that goes to a web server to pull
the page through the network,
to your machine(Client).
• Also referred to as the user
agent
• An information resource is
identified by a Uniform Resource
Identifier (URI).
‫مرورگر چیست؟‬
‫• مرورگر وب نرم افزاری است که به سرور وب می رود‬
) ‫تا صفحه را از طریق شبکه به دستگاه شما (کالینت‬
. ‫بکشد‬
‫• عامل کاربر‬
) URI( ‫• یک منبع اطالعاتی با یک شناسه منبع یکنواخت‬
. ‫شناسایی می شود‬
 Client Vs. Server in web ‫مشتری در مقابل‬
• The words client
‫سرور در وب‬
and server have ‫• کلمات کالینت و سرور‬
two meaning : :‫دو معنی دارند‬
• They can refer ‫آنها می توانند به یک‬ •
either to a )‫کامپیوتر (سخت افزار‬
computer ‫یا یک برنامه (نرم‬
( hardware) or a .‫افزار) اشاره کنند‬
program
( software)
How does WWW work?
Web Caches
• A mechanism for the temporary
storage of web document such as
Html pages and images ,to reduce
bandwidth usage ,server load.
• Browser sends all request to
cache:
• If Object is in cache :cache returns
objects
• else cache requests object from
origin server ,then returns object to
client.
• Cache acts as both client and
server
• Typically cache is installed by ISP
‫کش های وب‬
‫• مکانیزمی برای ذخیره موقت اسناد وب مانند صفحات‬
‫ بار‬، ‫ برای کاهش استفاده از پهنای باند‬،‫ و تصاویر‬Html
. ‫سرور‬
‫• مرورگر تمام درخواست ها را به حافظه پنهان ارسال می‬
:‫کند‬
‫ اشیاء را برمی گرداند‬cache: ‫ در حافظه نهان باشد‬Object ‫اگر‬ •
‫ سپس‬،‫ شیء را از سرور مبدا درخواست می کند‬other cache •
.‫شی را به مشتری برمی گرداند‬
‫• کش هم به عنوان کالینت و هم به عنوان سرور عمل می کند‬
‫ نصب می شود‬ISP ‫• معموال کش توسط‬
Web Cashe types ‫انواع کش وب‬
• There are two type of web cache: :‫دو نوع کش وب وجود دارد‬ •
• Browser cache: : ‫کش مرورگر‬ •
• Is part of all popular web ‫است که یک کپی محلی از تمام صفحات اخیرًا نمایش‬ •
browser that keeps a local copy ‫داده شده را نگه می دارد و هنگامی که کاربر به یکی‬
of all recently displayed pages ‫ نسخه محلی مجددًا‬،‫از آن صفحات باز می گردد‬
and when user returns to one of .‫استفاده می شود‬
those pages ,local copy is reused. : ‫کش پروکسی‬ •
• Proxy cache: ‫است که می تواند تراکنش وب را از طرف یک‬ •
• is shared network device that ‫ کش پروکسی‬،‫کالینت انجام دهد و مانند مرورگر‬
can undertake web transaction .‫محتوا را ذخیره می کند‬
on behalf of a client and like
browser, proxy cache stores the
content
Proxy Cashe
A bit about network
• Every computer and device (modem, router,
smartphone, cars, etc.) connected to the
Internet is assigned a unique numeric
• IP address (IP stands for Internet Protocol).
• For example, the computer that hosts
oreilly.com has the IP address 208.201.239.100
• All those numbers can be dizzying, so
fortunately, the Domain Name System (DNS)
was developed to allow us to refer to that
server by its domain name
• Ex. oreilly.com, facebook.com, mohe.gov.af ,.…..
• The numeric IP address is useful for computer
software, while the domain name is more
accessible to humans.
‫کمی در مورد شبکه‬
‫ گوشی‬،‫ روتر‬،‫به هر رایانه و دستگاهی (مودم‬ •
‫ اتومبیل و غیره ) متصل به اینترنت یک عدد‬،‫هوشمند‬
.‫منحصر به فرد اختصاص داده می شود‬
.)Internet Protocol ‫ مخفف‬IP( IP ‫آدرس‬ •
oreilly.com ‫ رایانه ای که میزبان‬،‫به عنوان مثال‬ •
.‫ است‬IP 208.201.239.100 ‫است دارای آدرس‬
‫ بنابراین‬،‫همه این اعداد می توانند گیج کننده باشند‬ •
‫) به گونه ای‬DNS( ‫ سیستم نام دامنه‬،‫خوشبختانه‬
‫توسعه یافته است که به ما امکان می دهد به آن سرور‬
. ‫با نام دامنه آن اشاره کنیم‬
oreilly.com ، facebook.com، .‫سابق‬ •
..…،mohe.gov.af
‫ عددی برای نرم افزارهای کامپیوتری مفید‬IP ‫• آدرس‬
‫ در حالی که نام دامنه برای انسان قابل دسترس‬،‫است‬
.‫تر است‬
 URLs ‫آدرس های صفحه وب و‬
Web Page Addresses and URLs
• Every page and resource on ‫• هرصفحه وب آدرس خاص خود را روی وب دارد‬
the Web has its own special Uniform Resource Locator ‫ به معنای‬URL ‫که‬
address called a URL Stands .‫است‬
for Uniform Resource
Locator. ‫• این یک قرارداد نامگذاری استاندارد برای آدرس‬
‫دهی اسناد قابل دسترسی از طریق اینترنت یا‬
• It is a standardized naming .‫اینترانت است‬
convention for addressing
documents accessible over ‫ کامل به طور کلی از سه بخش تشکیل شده‬URL ‫• یک‬
the Internet or Intranet. :‫است‬
‫ پروتکل‬.1
• A complete URL is generally
‫ نام سایت‬.2
made up of three parts:
‫ مسیر مطلق به سند یا منبع‬.3
1. The protocol
2. The site name
3. The absolute path to the
document or resource
HTTP Protocol HTTP ‫پروتکل‬
• Protocol is Set of rules or convention for ‫• پروتکل مجموعه ای از قوانین یا قرارداد برای ارسال‬
sending information, files and mails over a )‫ فایل ها و نامه ها از طریق شبکه (اینترنت‬،‫اطالعات‬
network (INTERNET) .‫است‬
• HTTP (Hyper Text Transfer Protocol) )‫ (پروتکل انتقال متن فوق العاده‬HTTP •
• FTP (File Transfer Protocol) ) ‫ (پروتکل انتقال فایل‬FTP •
• SMTP (Simple mail transfer protocol) )‫ (پروتکل ساده انتقال نامه‬SMTP •
• …
… •
• HTTP?
‫؟‬HTTP •
• Stands for Hyper Text Transfer Protocol
‫ است‬Hyper Text Transfer Protocol ‫مخفف‬ •
• Set of rules for transferring files (text,
graphic images, sound, video, and other ‫ تصاویر‬،‫مجموعه قوانین برای انتقال فایل ها (متن‬ •
multimedia files) on the World Wide Web ) ‫ ویدئو و سایر فایل های چند رسانه ای‬،‫ صدا‬،‫گرافیکی‬
‫در شبکه جهانی وب‬
• The language that web server and client
(browsers) use to communicate is called ‫زبانی که وب سرور و کالینت (مرورگرها) برای‬ •
HTTP. . ‫ نامیده می شود‬HTTP ‫برقراری ارتباط استفاده می کنند‬
HTTPS Protocol
• Short for Hypertext Transfer
Protocol over Secure
• A secure method of accessing or
sending information across a web
page.
• All data sent over HTTPS is
encrypted before it is sent, this
prevents anyone from
understanding that information if
intercepted.
HTTPS ‫پروتکل‬
Hypertext Transfer Protocol over ‫• مخفف عبارت‬
Secure
‫• روشی امن برای دسترسی یا ارسال اطالعات در یک صفحه‬
.‫وب‬
‫ قبل از ارسال‬HTTPS ‫• تمام داده‌های ارسال شده از طریق‬
‫ این امر مانع از آن می‌شود که هر کسی‬،‫رمزگذاری می‌شوند‬
. ‫آن اطالعات را در صورت رهگیری درک کند‬
URL : Site name ‫ نام‬:URL
• www : : www •
• This is a sub-domain prefix that is a ‫ اما‬،‫این یک پیشوند زیر دامنه است که یک قرارداد است‬ •
convention, but is not a rule.This portion of ‫ مورد نیاز نیست و می‬URL ‫ این بخش از‬.‫یک قاعده نیست‬
the URL is not required and many times can .‫توان چندین بار از آن خارج شد‬
be left out.
: ‫ مثال‬. •
• .example: .‫این یک زیر دامنه است‬ •
• This is a sub-domain.
: ‫ کام‬. •
• .com: ‫این دامنه سطح باال است که به عنوان "پسوند دامنه " شناخته‬ •
• This is the top-level domain, is known as the ‫می شود که برای شناسایی نوع یا مکان وب سایت مانند‬
"domain suffix" used to identify the type or com. ‫نمایش تجاری‬
location of web site like .com show
commercial
URL : Absolute path ‫ مسیر مطلق‬:URL
• The absolute path to the document or ‫• مسیر مطلق به سند یا منبع‬
resource
‫• این مسیر مطلق از طریق دایرکتوری های روی سرور‬
• This is the absolute path through . ‫ است‬first.html ‫ درخواست شده‬HTML ‫به سند‬
directories on the server to the
‫ نام دایرکتوری ها‬،‫• کلماتی که با اسلش از هم جدا شده اند‬
requested HTML document first.html.
. ‫هستند که با دایرکتوری ریشه میزبان شروع می شوند‬
• The words separated by slashes are the
directory names, starting with the root
directory of the host.
Anatomy of a Web page
• At the Figure, you saw a minimal web
page as it appears in a graphical
browser.
• Although you see it as one coherent
page, it is actually assembled from four
separate files:
• An HTML document (index.html)
• A CSS style sheet (kitchen.css)
• Two graphic images.
‫آناتومی یک صفحه وب‬
‫ یک صفحه وب حداقلی را همانطور که در یک‬،‫• در شکل‬
.‫ مشاهده کردید‬،‫مرورگر گرافیکی ظاهر می شود‬
،‫• اگرچه شما آن را به عنوان یک صفحه منسجم می بینید‬
: ‫اما در واقع از چهار فایل مجزا جمع آوری شده است‬
HTML (index.html) ‫یک سند‬ •
CSS (kitchen.css) ‫یک شیوه نامه‬ •
‫دو تصویر گرافیکی‬ •
Lets do some practice!

‫!بیایید کمی تمرین کنیم‬

Putting It All Together ‫همه اش را بگذار کنار هم‬
• To wrap up our introduction to how the web works, lets ‫ اجازه می دهیم‬،‫• برای پایان دادن به مقدمه ما در مورد نحوه کار وب‬
trace a typical stream of events that occurs with every web ‫جریان معمولی از رویدادها را که با هر صفحه وب که روی صفحه‬
page that appears on your screen: :‫ ردیابی کنیم‬،‫نمایش شما ظاهر می شود رخ می دهد‬
1. You request a web page by either typing its URL in the ‫ آن در مرورگر درخواست می‬URL ‫ شما یک صفحه وب را با تایپ‬.1
browser. . ‫کنید‬
2. Your browser sends an HTTP Request to the server named ‫ نامگذاری شده‬URL ‫ به سروری که در‬HTTP ‫ شما یک درخواست‬.2
in the URL and asks for the specific file. . ‫است ارسال می کند و فایل خاص را می خواهد‬
3. The server looks for the requested file and issues an HTTP ‫ صادر‬HTTP ‫ سرور به دنبال فایل درخواستی می گردد و یک پاسخ‬.3
response. . ‫می کند‬
1. If the document is found, the server retrieves the requested file
and returns it to the browser. ‫ سرور فایل درخواستی را بازیابی کرده و به مرورگر برمی‬،‫اگر سند پیدا شد‬ .1
.‫گرداند‬
2. If the page cannot be found, the server returns an error message.
The message typically says 404 Not Found ‫ پیام معموًال می‬. ‫ سرور یک پیغام خطا برمی‌گرداند‬،‫اگر صفحه پیدا نشد‬ .2
‫ یافت نشد‬404 ‫گوید‬
4. The browser parses the HTML document.
1. If the page contains images ,the browser contacts the server
.‫ را تجزیه می کند‬HTML ‫مرورگر سند‬ .4
again to request each resource specified in the markup. The ‫ مرورگر دوباره با سرور تماس می گیرد تا‬،‫اگر صفحه حاوی تصاویر باشد‬ .1
browser inserts each image in the document flow where ‫ مرورگر هر‬.‫هر منبع مشخص شده در نشانه گذاری را درخواست کند‬
indicated by the img element. ‫ نشان داده شده‬img ‫تصویر را در جریان سند درج می کند که توسط عنصر‬
. ‫است‬
5. The assembled web page is displayed for your viewing
pleasure. .‫صفحه وب مونتاژ شده برای لذت مشاهده شما نمایش داده می شود‬ .5