Web Design

*1*
References

*2*
Web Design - HTML

o Introduction to Web Design

Let’s start with the first set of slides

*3*
Internet

*4*
Internet

*5*
 Internet

 The Internet is a network of connected computers. No company owns the

Internet (i.e., it is not equivalent to a service like America Online); it is
a cooperative effort governed by a system of standards and rules.

 The purpose of connecting computers together, of course, is to share

information. There are many ways information can be passed between
computers, including email, file transfer (FTP), and many more specialized
modes upon which the Internet is built. These standardized methods for
transferring data or documents over a network are known as protocols.

*6*
 WWW - HTTP

 The World Wide Web (known affectionately as ―the Web‖) is just one of the
ways information can be shared over the Internet. It is unique in that it allows
documents to be linked to one another using hypertext links thus forming a
huge ―web‖ of connected information.

 The Web uses a protocol called HTTP ( Hyper Text Transfer Protocol). If
you’ve spent any time using the Web, that acronym should look familiar because
it is the first four letters of nearly all web site addresses.

*7*
WWW - HTTP

*8*
 Web Page Addresses (URLs)

 Web Page Addresses (URLs) With all those web pages on all those servers,
how would you ever find the one you’re looking for? Fortunately, each
document has its own special address called a URL (Uniform Resource Locator).

*9*
Web Page Addresses (URLs)

*10*
Web Page Addresses (URLs)

*11*
Web Page Addresses (URLs)

*12*
Web Page Addresses (URLs)

*13*
Web Page Addresses (URLs)

*14*
 programming languages for Web

 1-Client –Side Programming Code running in the browser is known as client-

side code (programming) and is primarily concerned with improving the
appearance and behavior of a rendered web page.

 This includes selecting and styling UI components, creating layouts,

navigation, form validation

ِٓ ‫خ‬١‫ّبد اٌجشِد‬١ٍ‫ اٌّسزعشع ثبسُ اٌزع‬ٟ‫ب ف‬ٍٙ١‫زُ رشغ‬٠ ٟ‫خ اٌز‬١‫ّبد اٌجشِد‬١ٍ‫ُرعشف اٌزع‬ 
.‫ت اٌّمذِخ‬٠ٌٛ‫ن طفحخ ا‬ٍٛ‫س‬ٚ ‫ش‬ٙ‫ٓ ِظ‬١‫ ثزحس‬ٟ‫زُ ثشىً أسبس‬ٙ‫ر‬ٚ ً١ّ‫خبٔت اٌع‬

، ً‫اٌزٕم‬ٚ ، ‫طبد‬١‫إٔشبء اٌزخط‬ٚ ، ‫ب‬ّٙ١ّ‫رظ‬ٚ َ‫خ اٌّسزخذ‬ٙ‫اخ‬ٚ ‫ٔبد‬ٛ‫ذ ِى‬٠‫زؼّٓ رٌه رحذ‬٠ 
‫رج‬ٌّٕٛ‫اٌزحمك ِٓ طحخ ا‬ٚ

*15*
 programming languages for Web

 1-Client –Side Programming

 Client-side code is written using HTML, CSS, and JavaScript — it is run

inside a web browser and has little or no access to the underlying
operating system (including limited access to the file system).

- ‫جذ‬٠‫خبفب سىش‬ٚ CSS ٚ HTML َ‫ً ثبسزخذا‬١ّ‫خ ِٓ خبٔت اٌع‬١‫ّبد اٌجشِد‬١ٍ‫رزُ وزبثخ اٌزع‬ 
‫ (ثّب‬ٟ‫ً األسبس‬١‫ ٔظبَ اٌزشغ‬ٌٝ‫ً إ‬١‫ي ػئ‬ٛ‫ط‬ٚ ‫ب‬ٙ٠‫ٌذ‬ٚ ‫ت‬٠ٚ ‫ب داخً ِسزعشع‬ٍٙ١‫زُ رشغ‬٠
.)‫ ٔظبَ اٌٍّفبد‬ٌٝ‫د إ‬ٚ‫ي اٌّحذ‬ٛ‫ط‬ٌٛ‫ رٌه ا‬ٟ‫ف‬

*16*
 programming languages for Web

 2-Server –Side Programming mostly involves choosing which content is

returned to the browser in response to requests.

 The server-side code handles tasks like validating submitted data and
requests, using databases to store and retrieve data and sending the
correct data to the client as required.

ٌٝ‫زُ إسخبعٗ إ‬٠ ٞ‫ اٌز‬ٜٛ‫بس اٌّحز‬١‫ اخز‬ٍٝ‫ت ِٓ خبٔت اٌخبدَ ع‬٠ٌٛ‫الع ا‬ِٛ ‫رزؼّٓ ثشِدخ‬ 
.‫اٌّزظفح اسزدبثخ ٌٍطٍجبد‬

، ‫اٌطٍجبد اٌّمذِخ‬ٚ ‫بٔبد‬١‫بَ ِثً اٌزحمك ِٓ طحخ اٌج‬ِٙ َ‫د ِٓ خبٔت اٌخبد‬ٛ‫عبٌح اٌى‬٠ 
ً١ّ‫ اٌع‬ٌٝ‫حخ إ‬١‫بٔبد اٌظح‬١‫إسسبي اٌج‬ٚ ‫اسزشداد٘ب‬ٚ ‫بٔبد‬١‫ٓ اٌج‬٠‫بٔبد ٌزخض‬١‫اعذ اٌج‬ٛ‫اسزخذاَ ل‬ٚ
‫ة‬ٍٛ‫ ِط‬ٛ٘ ‫وّب‬

*17*
 programming languages for Web

 2-Server –Side Programming

 server-side code can be written in any number of programming languages

— examples of popular server-side web languages include PHP, Python ,
Asp.Net, C#, and JavaScript (NodeJS). The server-side code has full
access to the server operating system

‫ رشًّ أِثٍخ‬- ‫ ِٓ ٌغبد اٌجشِدخ‬ٞ‫خ ِٓ خبٔت اٌخبدَ ثأ‬١‫ّبد اٌجشِد‬١ٍ‫ّىٓ وزبثخ اٌزع‬٠ 
.)NodeJS( ٚ # C ٚ Asp.Netِ ٚ Python ٚ PHP َ‫ت اٌشبئعخ ِٓ خبٔت اٌخبد‬٠ٌٛ‫ٌغبد ا‬
َ‫ً اٌخبد‬١‫ ٔظبَ رشغ‬ٌٝ‫ي اٌىبًِ إ‬ٛ‫ط‬ٌٛ‫ٗ حك ا‬٠‫خبٔت اٌخبدَ ٌذ‬

*18*
 Web communication
Web pages are stored on a Web server to make them available on the Internet
for the users

Web server is a computer with high processing speed and connected to the
Internet.

Web server is used to host and display the Web pages on a Web browser.

Web browser displays the Web pages using the HTTP protocol.

HTTP protocol is a protocol that specifies how a Web page will be retrieved from
the Web server.
*19*
 Web communication
 Steps to view a Web page in a browser are as follows:

1- User specifies the Uniform Resource Locator (URL) of Web page in a browser.

2- The client browser sends the URL request to the appropriate Web server.

3- Web server processes the request and sends the Web page as a response to
the browser.

*20*
Web communication

*21*
Web communication

*22*
 Term Web Design

 The term ―web design‖ has come to encompass a number of

disciplines, including:

 Graphic design

 Information design

 HTML, style sheet

 Scripting and programming

 Multimedia

*23*
 Web Technologies
 Technologies used for creating dynamic Web sites are as follows:

JavaScript, a scripting language, is used for creating dynamic Web pages

CSS specifies the formatting of a Web page for both static and dynamic Web
pages.

Extensible HTML (XHTML) when used with JavaScript, displays the required user-
defined data each time the Web page is loaded in the browser.

Dynamic HTML (DHTML) uses JavaScript and CSS to make dynamic Web pages
and transform the look and feel of the Web pages.

*24*
 Web Browsers

 A web browser (commonly referred to as a

browser) is a software application for
retrieving, presenting, and traversing information
resources on the World Wide Web.

 Hyperlinks present in resources enable users

easily to navigate their browsers to related
resources

*25*
 Hypertext Markup Language (HTML)

 HTML (Hyper Text Markup Language) is the language used to create

web page documents.

 HTML is not a programming language; it is a markup language, which

means it is a system for identifying and describing the various components
of a document such as headings, paragraphs, and lists.

Hyper Text Markup ‫اٌىٍّخ إخزظبس ٌـ‬ٚ( .‫ب اٌٍغخ اٌّسزخذِخ إلٔشبء طفحبد اإلٔزشٔذ‬ٙٔ‫إ‬ 
.)Language

. C ++‫ وٍغخ‬ٜ‫ٗ ٌٍغبد اٌجشِدخ األخش‬١ٍ‫اٌشىً اٌّزعبسف ع‬ٚ ٕٝ‫سذ ٌغخ ثشِدخ ثبٌّع‬١ٌ ٟ٘ٚ 
‫دت‬٠ ًّ‫عٕذ اٌحبخخ السزخذاَ ٘زٖ اٌد‬ٚ ،ْ‫سا‬ٚ‫اٌذ‬ٚ ُ‫ خًّ اٌزحى‬ٍٝ‫ ع‬ٞٛ‫ ِثال ً ال رحز‬ٟٙ‫ف‬
Java, JavaScript, CGI ‫ وـ‬ٜ‫فشاد ِٓ ٌغبد أخش‬١‫ٓ ش‬١ّ‫رؼ‬

*26*
 ‫)‪Hypertext Markup Language (HTML‬‬

‫ال رحزبج إٌ‪ِ ٝ‬زشخُ خبص ثٗ ‪ ٟ٘ٚ . Compiler‬غ‪١‬ش ِشرجطخ ثٕظبَ رشغ‪ِ ً١‬ع‪ ،ٓ١‬ألٔٗ ‪٠‬زُ‬ ‫‪‬‬
‫رفس‪١‬ش٘ب ‪ٚ‬رٕف‪١‬ز رعٍ‪ّ١‬بر‪ٙ‬ب ِجبششح ِٓ لجً ِزظفح اإلٔزشٔذ ‪ٚ‬ثغغ إٌظش عٓ إٌظبَ‬
‫اٌّسزخذَ‪.‬‬

‫ٌغخ ثس‪١‬طخ خذاً‪ٚ ،‬س‪ٍٙ‬خ اٌف‪ٚ ُٙ‬اٌزعٍُ ‪ٚ‬ال رحزبج ٌّعشفخ ِسجمخ ثٍغبد اٌجشِدخ ‪ٚ‬اٌ‪١ٙ‬ىٍ‪١‬خ‬ ‫‪‬‬
‫اٌّسزخذِخ ف‪ٙ١‬ب‪ .‬ثً سثّب وً ِب رحزبخٗ ٘‪ ٛ‬اٌمٍ‪ ِٓ ً١‬اٌزفى‪١‬ش إٌّطم‪ٚ ٟ‬رشر‪١‬ت األفىبس‬

‫*‪*27‬‬
 ‫)‪Hypertext Markup Language (HTML‬‬

‫ال ‪٠‬زطٍت وزبثخ ٍِف ‪ HTML‬أ‪٠‬خ ثشاِح خبطخ ف‪ ٟٙ‬وّب لٍٕب ٌغخ ال رحز‪ ٞٛ‬عٍ‪ ٝ‬ثشٔبِح ِزشخُ‪ .‬ثً‬ ‫‪‬‬
‫ٔحزبج فمط إٌ‪ ٝ‬ثشٔبِح ٌزحش‪٠‬ش إٌظ‪ٛ‬ص اٌجس‪١‬طخ ‪ِٚ‬عبٌدز‪ٙ‬ب‪ٚ ،‬ثشٔبِح اٌّفىشح اٌّ‪ٛ‬خ‪ٛ‬د ف‪ٟ‬‬
‫‪٠ Windows‬ف‪ ٟ‬ث‪ٙ‬زا اٌغشع‬

‫أحذ ِزظفحبد اإلٔزشٔذ ‪ Netscape Navigator‬أ‪ٌّ MS Internet Explorer ٚ‬عب‪ٕ٠‬خ اٌظفحبد اٌز‪ٟ‬‬ ‫‪‬‬
‫ٔم‪ َٛ‬ثزظّ‪ّٙ١‬ب‪ .‬وعليك فقط أن نقوم تحفظ النص المكتوب تملف يحمل االسن الممتد‬
‫‪ .html‬أو ‪.htm‬‬

‫‪ٛ٠‬خذ اٌعذ‪٠‬ذ ِٓ اٌجشاِح اٌز‪ ٟ‬رسزخذَ إلٔشبء طفحبد ‪ٚ Html‬س‪ٛ‬ف ٔسزخذَ ا‪ٚ‬ال ثشٔبِح اٌّفىشح‬ ‫‪‬‬
‫ثُ ثشٔبِح ‪Microsoft Expression Web 4‬‬

‫*‪*28‬‬
 HTML elements TAGS

 Before we start adding tags to our document, let’s look at the anatomy
of an HTML element (its syntax) and firm up some important terminology.

 The browser knows that any text within brackets< > is hidden and not
displayed in the browser window.

*29*
 ‫‪HTML elements TAGS‬‬

‫رزى‪ِ ْٛ‬فشداد ٌغخ ‪ ِٓ Html‬شفشاد رسّ‪ TAGS ٝ‬أ‪ ٞ‬اٌ‪ٛ‬س‪ ٟ٘ٚ .َٛ‬رسزخذَ ثشىً أص‪ٚ‬اج‬ ‫‪‬‬
‫‪ٚ‬رىزت ثبٌظ‪١‬غخ اٌزبٌ‪١‬خ (ِٓ اٌ‪١‬سبس إٌ‪ ٝ‬اٌ‪: )ٓ١ّ١‬‬

‫فعٍ‪ ٝ‬سج‪ ً١‬اٌّثبي اٌ‪ٛ‬سُ <‪٠ >B‬سزخذَ ٌىزبثخ اٌىٍّبد ثخط أس‪ٛ‬د عش‪٠‬غ ‪Bold‬‬ ‫‪‬‬

‫>‪<B> ADEL AHMED ALHAJJ </B‬‬

‫*‪*30‬‬
 HTML Attributes

 tag is not very useful by itself

 Attributes are instructions that clarify or modify an element.

 The syntax for attributes is as follows:

<element attribute-name="value"> Content</element>

or for empty elements:

<element attribute-name="value" />

*31*
 HTML Attributes

 Attributes go after the element name in the opening tag only, never in the
end tag.

 There may be several attributes applied to an element

 Attributes take values, which follow an equals sign (=).

 A value might be a number, a word, a string of text, a URL, depending on

the purpose of the attribute.

 Always put values within quotation marks. Although quotation marks

aren’t required around all values in HTML, they are required in XHTML.

 Some attributes are required.

*32*
Basic Document Structure

 1 Identifies the document as

written in HTML or XHTML
 2 The head provides
information about the
document
 3 A descriptive title is
required
 4 The body contains the
content that displays in the
browser

*33*
 Basic Document Structure (Exercise 1)

 Open the newly created document, index.html, if it isn’t open already.

 Put the entire document in an HTML root element by adding an <html> start
tag at the very beginning and an end </html> tag at the end of the text.

 Next, create the document head that contains the title for the page.
Insert <head> and </head> tags before the content. Within the head
element, add the title, ―My First Exercise‖, surrounded by opening and
closing <title> tags.

 Finally, define the body of the document by wrapping the content in <body>
and </body> tags. When you are done, the source document should look like
this
*34*
 Basic Document Structure (Exercise 1)
<html>
<head>
<title> My First Exercise </title>
</head>

<body>
Name :- ADEL AHMED ALHAJJ
Mobile:- 7777777
</body>

</html>
*35*
 Color in HTML

 There are two main ways to specify colors in HTML: with a predefined color
name as we have been doing so far

 <BODY BGCOLOR=―Red"> ...</BODY>

‫> تقوم تتحديد لون الخلفية للصفحة‬BODY< ‫ إلى الوسن‬BGCOLOR ‫ إضافة خاصية‬
 or, more commonly, with a numeric value that describes a particular RGB
color (the color model on computer monitors). You’ve probably seen
color values that look like these:
 <BODY BGCOLOR=―#FFFFF"> ...</BODY>
‫ هي القيمة التي تمثل اللون المختار وهو هنا اللون األتيض‬FFFFFF 

*36*
 Color in HTML

 HTML uses color values to specify a color. Typically, these are used to set
a color either for the foreground of an element (i.e., its text) or for the
background of the element.

 They can also be used to affect the color of borders and other
decorative effects.

 You can specify your color values in various formats. Following table lists all
the possible formats:

*37*
‫‪Color in HTML‬‬

‫ٕ٘بن ثالثخ أٌ‪ٛ‬اْ أسبس‪١‬خ ٘‪ ٟ‬األحّش ‪ٚ‬األخؼش ‪ٚ‬األصسق‪،‬‬ ‫‪‬‬

‫‪ٌٚ‬ىً ِٕ‪ٙ‬ب ‪ٛ٠‬خذ ‪ 256‬دسخخ ٌ‪١ٔٛ‬خ ‪٠ٚ‬عجش عٓ ٘زٖ اٌذسخبد‬
‫ثبألسلبَ ِٓ ‪ٚ 000‬حز‪.255 ٝ‬‬

‫‪ ِٓٚ‬خالي ِضج ٘زٖ األٌ‪ٛ‬اْ ثذسخبر‪ٙ‬ب اٌٍ‪١ٔٛ‬خ اٌّخزٍفخ‬ ‫‪‬‬

‫ٔحظً عٍ‪ ٝ‬األٌ‪ٛ‬اْ األخش‪.ٜ‬‬

‫إْ أ‪ِ ٛ٘ ٌْٛ ٞ‬ض‪٠‬ح ‪ٚ-‬ثٕسجخ ِع‪ٕ١‬خ ِٓ اٌذسخبد‪٘ ِٓ -‬زٖ‬ ‫‪‬‬

‫األٌ‪ٛ‬اْ اٌثالثخ‬

‫*‪*38‬‬
 Color in HTML

Format Syntax Example

Hex Code #RRGGBB #FF0000

RGB % rgb(rrr%,ggg%,bbb%) rgb(50%,50%,50%)

RGB Absolute rgb(rrr,ggg,bbb) rgb(0,0,255)

keyword yellow, black, etc. pink

*39*
Color in HTML

*40*
 HTML elements TAGS

‫سح‬ٛ‫لذ اسزخذِذ اٌظ‬ٚ ‫سق خذساْ) ٌٍظفحخ‬ٚ( ‫خ‬١‫سح وخٍف‬ٛ‫ذ ط‬٠‫ ثزحذ‬BACKGROUND ‫خ‬١‫َ اٌخبط‬ٛ‫رم‬ 
:‫خ‬١ٌ‫اٌزب‬
‎<BODY BGCOLOR = "#FFFFFF" BACKGROUND= "image.jpg">‎ <‎/BODY>

*41*
 ‫) ;‪TAGS ( <BR> - <P> - &nbsp‬‬

‫الوسن <‪٠ >BR‬م‪ َٛ‬ثبٌزحىُ ف‪ٙٔ ٟ‬ب‪٠‬بد األسطش (أ‪ ٞ‬أٔٗ ‪ ٟٕٙ٠‬اٌسطش اٌحبٌ‪ ٟ‬ثح‪١‬ث ‪٠‬ظ‪ٙ‬ش إٌض‬ ‫‪‬‬
‫اٌز‪ ٗ١ٍ٠ ٞ‬ف‪ ٟ‬سطش خذ‪٠‬ذ)‪.‬‬

‫‪ٕ٘ٚ‬بن أ‪٠‬ؼب الوسن <‪ >P‬اٌز‪٠ ٞ‬م‪ َٛ‬رمش‪٠‬جبً ثٕفس عًّ اٌ‪ٛ‬سُ اٌسبثك أ‪ ٞ‬أٔٗ ‪ ٟٕٙ٠‬اٌسطش أ‪ٚ‬‬ ‫‪‬‬
‫اٌفمشح ‪٠ٚ‬جذأ ثسطش خذ‪٠‬ذ ٌىٓ ِع إػبفخ سطش إػبف‪ ٟ‬فبسغ ث‪ ٓ١‬اٌفمشاد‪.‬‬

‫أِب الفراغات فزعزجش سِ‪ٛ‬صاً خبطخ ٌزٌه ال ٔسزط‪١‬ع اٌزحىُ ث‪ٙ‬ب ‪ٚ‬ثعذد٘ب إال ثبسزخذاَ اٌ‪ٛ‬سُ‬ ‫‪‬‬
‫;‪ٚ( & nbsp‬األحشف ٘‪ ٟ‬اخزظبس ٌٍعجبسح ‪.)Non Breakable Space‬‬

‫إرا أسدد إدخبي عذح فشاغبد ث‪ٔ ٓ١‬ض ‪ٚ‬آخش ِب عٍ‪١‬ه إال وزبثخ ٘زا اٌ‪ٛ‬سُ ثٕفس عذد اٌفشاغبد‬ ‫‪‬‬
‫اٌّطٍ‪ٛ‬ة‪ .‬كما يجة عليك التقيد تاألحرف الصغيرة هنا‪.‬‬

‫*‪*42‬‬
TAGS ( <BR> - <P> - &nbsp; )

*43*
TAGS ( <BR> - <P> - &nbsp; )

*44*
Web Design - HTML

*45*
Web Design

*46*
Web Design - HTML
o Elements Text Content
o Define Protocols
o Lists Elements
o Horizontal Rules Elements <hr>
o Addresses Elements

Let’s start with the first set of slides

o
*47*
 Elements (TAGs) for Text content

 When creating a web page, I always start with my raw content in a text file and
make sure that it has been proofread and is ready to go.

*48*
 Headings <Hn>…</Hn>

 we used the h1 and h2 elements to indicate headings for our Black Goose Bistro
page. There are actually six levels of headings in HTML, from h1 to h6.

‫ صفحات اإلَحشَث‬ٙ‫ ف‬Headings ٍٚٔ‫ز انعُا‬ًٛٛ‫ُْاك ٔسٕو خاصة جسحخذو نح‬ 

.‫ أطغش خظ‬ٛ٘ 6 ‫بط‬١‫ِم‬ٚ ‫ أوجش خظ‬ٛ٘ 1 ‫بط‬١‫ث ِم‬ٛ‫ًثم يسحٕٖ انعُٕاٌ ح‬ٚ 6-1 ٍٛ‫ ْٕ سقى ت‬n ‫حشف‬ 

*49*
Headings <Hn>…</Hn>

*50*
 Paragraphs Elements <p>…..</p>

 Paragraphs are the most rudimentary elements of a text document.

 You indicate a paragraph with the p element. Simply insert an opening <p> tag at
the beginning of the paragraph and a closing </p> tag after it
 Paragraphs may contain text, images and other inline elements, but they may not
contain other block elements

*51*
Paragraphs Elements <p>…..</p>

*52*
 Long quotations Elements

 If you have a long quotation, a testimonial, or a section of copy from another

source, particularly one that spans four lines or morale, you should mark it up as a
blockquote element

‫ٍ انفقشِ أٔ شًانٓا‬ًٛٚ ٗ‫ز انفقشات ٔرنل يٍ خالل إضافة ْايش عه‬ًٛٛ‫فحٓا ج‬ٛ‫ٔسى انفقشات انًقحثسة ٔظ‬ 
‫ًكٍ ٔضع عذِ أٔسًّ حسة يساحة انٓايش انًطهٕب‬ٚٔ

*53*
Long quotations Elements

*54*
Long quotations Elements

*55*
 Preformatted Text <pre>….</pre>

 some types of information, such as code examples or poetry, the white

space is important for conveying meaning. For these purposes, there is the
preformatted text (pre) element.
 It is a unique element in that it is displayed exactly as it is typed including all the
carriage returns and multiple character spaces.

.ّ‫ق انًسثق انز٘ جى إعذادِ ت‬ٛ‫ححفع تانحُس‬ٚ .‫ أ٘ انًُسق يسثقا‬Preformatted ‫اخحصاس نكهًة‬ 

*56*
Preformatted Text <pre>….</pre>

*57*
 ‫‪Define Protocols‬‬

‫ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬الد االرظبالد ٌٍذبعت ا‪ ٟ٘ ٌٟ٢‬ػجبسح ػٓ ِجّ‪ٛ‬ػخ ِٓ اإلجشاءاد (آٌ‪١‬خ خبطخ) ر‪ٛ‬جٗ‬ ‫‪‬‬

‫اٌذبعت ا‪ ٌٟ٢‬إٌ‪ ٝ‬اٌم‪ٛ‬اػذ اٌز‪٠ ٟ‬جت إرجبػ‪ٙ‬ب ٌالرظبي ثأج‪ٙ‬ضح اٌذبعت األخش‪.ٜ‬‬

‫وّب ‪ّ٠‬ىٓ رؼش‪٠‬ف اٌجش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ثأٔٗ ٔظبَ ل‪١‬بع‪ ٟ‬رزبثؼ‪ِ ٟ‬زفك ػٍ‪٠ ٗ١‬غبػذ ػٍ‪ٔ ٝ‬مً اٌّؼٍ‪ِٛ‬بد‬ ‫‪‬‬

‫ثغ‪ٌٛٙ‬خ ‪٠ٚ‬غش ث‪ ٓ١‬األج‪ٙ‬ضح اٌّخزٍفخ‪ٚ ،‬ف‪ّ١‬ب ‪ٔ ٍٟ٠‬زؼشف ع‪٠ٛ‬بً ػٍ‪ ٝ‬أوضش اٌجش‪ٚ‬ر‪ٛ‬و‪ٛ‬الد اعزخذِبً‬

‫‪ٚ‬أ‪ٚ‬عؼ‪ٙ‬ب أزشبساً‪.‬‬

‫*‪*58‬‬
 ‫‪Protocols TCP / IP‬‬

‫ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ ٛ٘TCP/IP‬ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ٌالرظبالد ث‪ ٓ١‬أج‪ٙ‬ضح اٌذبعت ا‪ٌ ٌٟ٢‬الرظبي ثشجىخ اإلٔزشٔذ ‪،‬‬ ‫‪‬‬

‫‪ ٛ٘ٚ‬اخزظبس ٌٍّظطٍخ ‪،Transmission Control Protocol / Internet Protocol‬‬ ‫‪‬‬

‫‪٠ٚ‬ؼٕ‪ ٟ‬ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي اٌزذىُ ف‪ٔ ٟ‬مً اٌج‪١‬بٔبد ث‪ ٓ١‬طجمبد اٌشجىخ‪٠ ٚ .‬ؼذ ٔظبَ ل‪١‬بع‪٠ ٟ‬ذذد و‪١‬ف‬ ‫‪‬‬

‫‪ّ٠‬ىٓ ٌألج‪ٙ‬ضح اإلٌىزش‪١ٔٚ‬خ ِضً اٌذبعت ا‪ ٌٟ٢‬أْ رزظً ثشجىخ اإلٔزشٔذ‪ٚ ،‬و‪١‬ف‪١‬خ ٔمً اٌج‪١‬بٔبد‬

‫‪ٚ‬اٌّؼٍ‪ِٛ‬بد ث‪ ٓ١‬رٍه األج‪ٙ‬ضح‪.‬‬

‫‪٠ٚ‬ضّٓ أْ اٌج‪١‬بٔبد لذ رُ إسعبٌ‪ٙ‬ب ‪ٚ‬اعزمجبٌ‪ٙ‬ب ثشىً طذ‪١‬خ‪.‬‬ ‫‪‬‬

‫‪ٚ‬ظ‪١‬فزٗ ٘‪ٔ ٟ‬مً دضَ اٌّؼٍ‪ِٛ‬بد ثؼذ رمغ‪ّٙ١‬ب إٌ‪ ٝ‬دضَ ِؼٍ‪ِٛ‬بد إلسعبٌ‪ٙ‬ب ‪ٚ‬اعزمجبٌ‪ٙ‬ب‬ ‫‪‬‬

‫*‪*59‬‬
 ‫‪Protocols TCP / IP‬‬

‫‪ٕ٠‬مغُ ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ TCP/IP‬إٌ‪ ٝ‬لغّ‪ ٓ١‬سئ‪١‬غ‪:ٓ١١‬‬ ‫‪‬‬

‫اٌمغُ األ‪ٚ‬ي ‪TCP ٛ٘ :‬‬ ‫‪‬‬

‫٘‪ ٛ‬اٌز‪٠ ٞ‬م‪ َٛ‬ثؼٍّ‪١‬خ رشل‪ ُ١‬اٌذضَ ِٓ اٌذبعت اٌّشعً إٌ‪ ٝ‬اٌذبعت اٌّغزمجً د‪١‬ش ‪٠‬زُ‬ ‫‪‬‬

‫اعزمجبي ٘زٖ اٌذضَ ‪ٚ‬اٌزأوذ ِٓ ػذَ فمذ أ‪ ٞ‬دضِخ ِٓ اٌّؼٍ‪ِٛ‬بد أصٕبء أزمبٌ‪ٙ‬ب ِٓ دبعت‬

‫إٌ‪ ٝ‬أخش‬

‫‪ٚ‬ف‪ ٟ‬دبٌخ فمذ أ‪ ٞ‬دضِخ ‪٠‬م‪ َٛ‬ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪TCP‬ثطٍت ‪ٚ‬اعزشجبع اٌذضِخ ِشح أخش‪ ٜ‬دز‪٠ ٝ‬زُ‬ ‫‪‬‬

‫إسعبي وبفخ اٌّؼٍ‪ِٛ‬بد وبٍِخ ‪ٚ‬عٍ‪ّ١‬خ د‪ ْٚ‬أْ رفمذ أ‪ ٞ‬جضء ِٕ‪ٙ‬ب‪.‬‬

‫*‪*60‬‬
 ‫‪Protocols TCP / IP‬‬

‫اٌمغُ األ‪ٚ‬ي ‪TCP ٛ٘ :‬‬ ‫‪‬‬

‫رؼذ ٘زٖ أُ٘ ِّ‪١‬ضاد ٘زا اٌجش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي د‪١‬ش أٔٗ ‪٠‬غزط‪١‬غ اعزؼبدح ‪ٚ‬اعزشجبع اٌج‪١‬بٔبد إرا دذس‬ ‫‪‬‬

‫خًٍ ِب ف‪ٔ ٟ‬مطخ أ‪ِ ٚ‬ىبْ أصٕبء ٔمٍ‪ٙ‬ب ‪٠ٚ‬زُ رٌه ثغشػخ شذ‪٠‬ذح ػٕذِب رطٍت ِٓ اٌّغزؼشع‬

‫ػشع طفذخ أ‪ِٛ ٚ‬لغ ِب ِٓ خالي اإلٔزشٔذ‪.‬‬

‫*‪*61‬‬
 ‫‪Protocols TCP / IP‬‬

‫اٌمغُ اٌضبٔ‪IP ٛ٘ : ٟ‬‬ ‫‪‬‬

‫٘‪ ٛ‬اٌز‪٠ ٞ‬م‪ َٛ‬ثؼٍّ‪١‬خ رمغ‪ ُ١‬اٌٍّفبد ‪ٚ‬اٌّؼٍ‪ِٛ‬بد إٌ‪ ٝ‬دضَ ػجش اإلٔزشٔذ ‪ٚ‬إسعبٌ‪ٙ‬ب إٌ‪ٝ‬‬ ‫‪‬‬

‫دبعت أخش‪ِ ،‬غ اخز‪١‬بس أٔغت اٌطشق إلسعبي دضَ اٌج‪١‬بٔبد‪،‬‬

‫وزٌه ‪٠‬زُ اٌزؼشف ػٍ‪ ٝ‬أ‪ ٞ‬دبعت ِزظً ثبإلٔزشٔذ ِٓ خالي اٌزؼشف ػٍ‪ ٝ‬سلُ اٌـ ‪IP‬اٌخبص‬ ‫‪‬‬

‫ثٗ ػٍ‪ ٝ‬اإلٔزشٔذ‪،‬‬

‫‪٠ ٚ‬زى‪ ِٓ ْٛ‬ػذح أسلبَ‪ٚ ،‬وً ِغزخذَ ػٍ‪ ٝ‬اٌشجىخ ‪٠‬ذظً ػٍ‪ ٝ‬ػٕ‪ٛ‬اْ خبص ثٗ ‪ٔٚ‬ظشاً ألْ‬ ‫‪‬‬

‫اٌؼٕب‪ ٓ٠ٚ‬اٌشلّ‪١‬خ طؼجخ اٌذفع فمذ رُ اعزجذاٌ‪ٙ‬ب ثبٌؼٕب‪ ٓ٠ٚ‬اٌذشف‪١‬خ ‪ِ ٛ٘ٚ‬ب ‪٠‬طٍك ػٍ‪ٗ١‬‬

‫ِظطٍخ إٌطبق أ‪ ٛ٘ٚ DNS ٚ‬اخزظبس ٌـ (؟؟؟)‪Domain Name Server.‬‬

‫*‪*62‬‬
 Protocols TCP / IP

‫ رذذد‬ٟ‫الد اٌز‬ٛ‫و‬ٛ‫ر‬ٚ‫زضّٓ ثذاخٍٗ ػذد ِٓ اٌجش‬٠ ٟ‫بع‬١‫ي ل‬ٛ‫و‬ٛ‫ر‬ٚ‫ ثش‬ٛ٘TCP/IP ‫ي‬ٛ‫و‬ٛ‫ر‬ٚ‫ثش‬ 

:‫بٔبد االرظبالد‬١‫مخ ِؼبٌجخ ث‬٠‫طش‬

TCP >> Transmission Control Protocol .
.‫مبد‬١‫ٓ اٌزطج‬١‫ٌالرظبي ث‬
UDP >> User Datagram Protocol.
.‫مبد‬١‫ٓ اٌزطج‬١‫ظ ث‬١‫ارظبي ثغ‬
ICMP >> Internet Control Message Protocol.
.‫اإلدظبءاد‬ٚ ‫ٌألخطبء‬
DHCP >> Dynamic Host Configuration Protocol.
.‫خ‬١‫ى‬١ِ‫ٕب‬٠‫ٓ اٌذ‬٠ٚ‫ٌٍؼٕب‬

*63*
 ‫‪IP Address‬‬

‫ألغبِٗ ‪٠ :‬زى‪ ْٛ‬اٌـ‪٠ٚ ، 32 Bit ِٓ IP‬مغُ إٌ‪ ٝ‬أسثؼخ ألغبَ‬ ‫‪‬‬

‫‪ّ٠ٚ‬ىٓ رغّ‪١‬زٗ ‪ 4 Octets‬أ‪ ٞ‬أسثغ ِجّ‪ٛ‬ػبد صّبٔ‪١‬خ ألٔٗ ‪٠‬مغُ إٌ‪ ٝ‬صّبْ ثزبد ٌىً لغُ‬ ‫‪‬‬

‫وبٌزبٌــــ‪-: ٟ‬‬

‫*‪*64‬‬
 ‫‪IP Address‬‬

‫‪٠ٚ‬مغُ فؼٍ‪١‬بً إٌ‪ ٝ‬لغّ‪ّ٘ٚ ٓ١‬ب ‪-:‬‬ ‫‪‬‬

‫( ‪1-NP )Network Part‬‬ ‫‪ ٛ٘ٚ‬اٌمغُ األ‪٠‬غش ‪٠ٚ‬جت أْ ‪٠‬ى‪ِ ْٛ‬زشبثٗ ٌٕفظ اٌشجىخ‬

‫( ‪2-HP )Host Part‬‬ ‫‪ ٛ٘ٚ‬اٌمغُ األ‪٠ ٛ٘ٚ ، ّٓ٠‬خزٍف ٌىً ج‪ٙ‬بص ثبٌشجىخ‬

‫*‪*65‬‬
 ‫‪IP Address‬‬

‫ِضبي ٌزف‪ ُٙ‬طج‪١‬ؼخ اٌجضئ‪-: ٓ١١‬‬ ‫‪‬‬

‫ٌ‪ ٛ‬لّٕب ثأخز صالصخ شجىبد خٍ‪٠ٛ‬خ ف‪ ٟ‬ثٍذ ِب ( اٌغؼ‪ٛ‬د‪٠‬خ ِضال ً ) االرظبالد اٌغؼ‪ٛ‬د‪٠‬خ ‪ ،‬ششوخ‬ ‫‪‬‬

‫اٌى‪ٙ‬شثبء‪ٚ ،‬شجىخ إِٔ‪١‬خ ‪ِٚ‬فبر‪١‬ذ‪ٙ‬ب ‪ 078 , 077 , 079 :‬ػٍ‪ ٝ‬اٌز‪ٛ‬اٌ‪ٚ . ٟ‬لّٕب ثأخز أسلبَ‬

‫ػش‪ٛ‬ائ‪١‬خ ٌ‪ٛٙ‬ارف خٍ‪٠ٛ‬خ وبٌزبٌ‪: ٟ‬‬

‫*‪*66‬‬
 ‫‪IP Address‬‬

‫رمغ‪ّ١‬بد ‪ٚ‬أٔ‪ٛ‬اع اٌـ ‪-: IP‬‬ ‫‪‬‬

‫ٕ٘بن رمغ‪ّ١‬بد ‪ٚ‬أٔ‪ٛ‬اع ٌـ ‪ٚ NP‬اٌـ ‪ِ ٟ٘ٚ ، HP‬ظٕفخ دغت اٌؼذد اٌّطٍ‪ٛ‬ة ٌٍشجىخ‬ ‫‪‬‬

‫اٌّخزبسح ‪ ،‬أ‪ ٞ‬أٔٗ إرا وبْ اٌؼذد لٍ‪ ً١‬أ‪ِ ٚ‬ز‪ٛ‬عظ أ‪ ٚ‬وج‪١‬ش ‪ّ٠‬ىٕٕب اخز‪١‬بس إٌ‪ٛ‬ع اٌّالئُ ٌزٌه ‪،‬‬

‫الدع اٌزمغ‪: ُ١‬‬

‫*‪*67‬‬
IP Address

*68*
IP Address

*69*
IP Address

*70*
IP Address

*71*
IP Address

*72*
‫‪IP Address‬‬

‫دذد اٌفئبد ‪ٚ‬سلُ اٌشجىخ ‪ٚ‬سلُ اٌج‪ٙ‬بص ِٓ سلُ (‪ِ )IP‬ضً ‪-:‬‬

‫*‪*73‬‬
 ‫‪IP Address‬‬

‫ِالدظبد ( ‪-: ) IP Address‬‬

‫‪ -‬ال ‪ّ٠‬ىٓ أْ ‪٠‬جذأ ثبألسلبَ اٌزبٌ‪١‬خ ( ‪. ) 255 – 127 – 0‬‬

‫‪٠ -‬زُ رذذ‪٠‬ذ اٌفئخ ثٕبءاً ػٍ‪ ٝ‬اٌخبٔخ األ‪. ٌٝٚ‬‬

‫‪ -‬ال ‪ّ٠‬ىٓ أْ ‪٠‬ى‪ ْٛ‬جّ‪١‬غ اٌخبٔبد ‪ IP‬أطفبساً (‪ ) 0.0.0.0‬أ‪255.255.255.255 ( ٚ‬‬

‫د‪١‬ش أْ ٘زٖ األسلبَ ِذج‪ٛ‬صح ِٓ إٌظبَ ‪.‬‬

‫‪ -‬سلُ اٌشجىخ الثذ أْ ‪٠‬زىشس ػٍ‪ ٝ‬جّ‪١‬غ األج‪ٙ‬ضح ف‪ ٟ‬اٌشجىخ اٌ‪ٛ‬ادذح ‪ٚ‬سلُ اٌج‪ٙ‬بص‬

‫‪٠‬جت أْ ‪٠‬خزٍف ف‪ ٟ‬جّ‪١‬غ األج‪ٙ‬ضح ف‪ ٟ‬اٌشجىخ اٌ‪ٛ‬ادذح ‪.‬‬

‫*‪*74‬‬
 ‫‪Other Protocols‬‬

‫‪ HTTP - Hyper Text Transfer Protocol‬‬

‫ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ ٛ٘HTTP‬اٌّغئ‪ٛ‬ي ػٓ االرظبي ث‪ ٓ١‬خبدَ اٌ‪٠ٛ‬ت ‪ِٚweb server‬زظفخ اٌ‪٠ٛ‬ت ‪web‬‬ ‫‪‬‬

‫‪browser .‬‬

‫فجش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪٠HTTP‬غزخذَ إلسعبي طٍت ِٓ ج‪ٙ‬بصن ‪web client‬ػجش اٌّزظفخ إٌ‪ ٝ‬خبدَ‬ ‫‪‬‬

‫اٌ‪٠ٛ‬ت‪ٚ ،‬إػبدح اٌطٍت ف‪ ٟ‬شىً طفذبد اٌ‪٠ٛ‬ت ِٓ اٌخبدَ إٌ‪ِ ٝ‬زظفخ اٌؼّ‪.ً١‬‬

‫‪ HTTPS - Secure HTTP‬‬

‫ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ ٛ٘HTTPS‬اٌّغئ‪ٛ‬ي ػٓ االرظبي ا‪ ِٓ٢‬ث‪ ٓ١‬خبدَ اٌ‪٠ٛ‬ت ‪ِٚ‬زظفخ اٌ‪٠ٛ‬ت‪،‬‬ ‫‪‬‬

‫فجش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪٠ HTTPS‬م‪ َٛ‬ػٍ‪ ٝ‬رٕف‪١‬ز رؼبِالد اٌجطبلبد االئزّبْ ‪ٚ‬اٌج‪١‬بٔبد اٌذغبعخ األخش‪ٜ‬‬ ‫‪‬‬

‫*‪*75‬‬
 ‫‪Other Protocols‬‬

‫‪ SSL - Secure Sockets Layer‬‬

‫‪٠‬غزخذَ ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ٌSSL‬زشف‪١‬ش اٌج‪١‬بٔبد ٌٕمً اٌج‪١‬بٔبد اٌّؤِٕخ‪.‬‬ ‫‪‬‬

‫‪ SMTP - Simple Mail Transfer Protocol‬‬

‫‪٠‬غزخذَ ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪SMTP‬إلسعبي اٌجش‪٠‬ذ اإلٌىزش‪٠ .ٟٔٚ‬غزط‪١‬غ إسعبي سعبئً إٌظ‪ٛ‬ص فمظ‪،‬‬ ‫‪‬‬

‫‪ٌٚ‬ىٕٗ ال ‪٠‬غزط‪١‬غ إسعبي اٌظ‪ٛ‬س أ‪ٍِ ٚ‬فبد اٌظ‪ٛ‬د أ‪ ٚ‬اٌف‪١‬ذ‪.ٛ٠‬‬

‫‪ IMAP - Internet Message Access Protocol‬‬

‫‪٠‬غزخذَ ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ٌIMAP‬زخض‪ٚ ٓ٠‬اعزشجبع اٌجش‪٠‬ذ اإلٌىزش‪.ٟٔٚ‬‬ ‫‪‬‬

‫*‪*76‬‬
 ‫‪Other Protocols‬‬

‫‪ POP - Post Office Protocol‬‬

‫‪٠ ‬غزخذَ ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ٌPOP‬زٕض‪ ً٠‬اٌجش‪٠‬ذ اإلٌىزش‪ ِٓ ٟٔٚ‬خبدَ اٌجش‪٠‬ذ اإلٌىزش‪ ٟٔٚ‬إٌ‪ ٝ‬دبعجه‬
‫اٌشخظ‪.ٟ‬‬
‫‪ NTP - Network Time Protocol‬‬
‫‪٠ ‬غزخذَ ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ٌّNTP‬ضإِخ اٌ‪ٛ‬لذ (اٌغبػخ) ث‪ ٓ١‬أج‪ٙ‬ضح اٌذبعت ا‪.ٌٟ٢‬‬

‫‪ FTP - File Transfer Protocol‬‬

‫‪ ‬ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪ ٛ٘FTP‬اٌّغئ‪ٛ‬ي ػٓ ٔمً اٌٍّفبد ث‪ ٓ١‬أج‪ٙ‬ضح اٌذبعت ا‪.ٌٟ٢‬‬

‫*‪*77‬‬
 ‫‪FTP - File Transfer Protocol‬‬

‫‪ ٛ٘ٚ‬ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ٌٕمً اٌٍّفبد‪٘ٚ ،‬زٖ اٌخذِخ ٘‪ ٟ‬إدذ‪ ٜ‬رطج‪١‬مبد ‪ TCP/IP‬اٌز‪ ٟ‬رجؼً ِٓ‬ ‫‪‬‬

‫اٌّّىٓ ٔمً اٌٍّفبد ث‪ ٓ١‬أج‪ٙ‬ضح اٌذبعت ا‪ ٌٟ٢‬اٌّخزٍفخ ‪ ٚ‬اٌّشرجطخ ثشجىخ اإلٔزشٔذ‪.‬‬

‫‪١ِّ ِٓٚ‬ضاد ثشر‪ٛ‬و‪ٛ‬ي اٌـ ‪ FTP‬أٔٗ ‪٠‬م‪ َٛ‬ثزشجّخ شىً اٌٍّفبد إٌظ‪١‬خ ثطش‪٠‬مخ أ‪ٚ‬ر‪ِٛ‬بر‪١‬ى‪١‬خ‬ ‫‪‬‬

‫د‪١‬ش رخزٍف ٔ‪ٛ‬ػ‪١‬خ ٔظُ اٌزشغ‪ ً١‬اٌّضجزخ ػٍ‪ ٝ‬أج‪ٙ‬ضح اٌذبعت ‪ٚ‬ثبٌزبٌ‪ ٟ‬رخزٍف ط‪١‬غخ اٌٍّفبد‬

‫اٌّ‪ٛ‬ج‪ٛ‬دح ػٍ‪ٙ١‬ب ِّب ‪٠‬زطٍت رشجّخ رٍه اٌظ‪١‬غخ ٌزٕبعت أٔظّخ اٌزشغ‪ ً١‬األخش‪ ٜ‬اٌّضجزخ ػٍ‪ٝ‬‬

‫األج‪ٙ‬ضح اٌّشرجطخ ثشجىخ اإلٔزشٔذ‪،‬‬

‫*‪*78‬‬
 ‫‪FTP - File Transfer Protocol‬‬

‫‪ٚ‬لذ طُّ ٘زا اٌجشر‪ٛ‬و‪ٛ‬ي ٌؼًّ ث‪ ٓ١‬األج‪ٙ‬ضح اٌّخزٍفخ ِٓ د‪١‬ش إٌ‪ٛ‬ع ‪ٚ‬وزٌه ِٓ د‪١‬ش أٔظّخ‬ ‫‪‬‬

‫اٌزشغ‪ ً١‬اٌّخزٍفخ ػٍ‪ ٝ‬عج‪ ً١‬اٌّضبي ‪ّ٠‬ىٓ أْ ‪٠‬غزخذَ ٘زا اٌجش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ث‪ ٓ١‬ج‪ٙ‬بص خبدَ‬

‫‪٠ٚ‬ؼًّ ثٕظبَ رشغ‪ٔٛ٠ ً١‬ىظ أ‪ٕ١ٌ ٚ‬ىظ ‪ٚ‬ث‪ ٓ١‬ج‪ٙ‬بص شخظ‪ ٟ‬أخش ‪٠ٚ‬ؼًّ ثٕظبَ رشغ‪ٕ٠ٚ ً١‬ذ‪ٚ‬ص‪.‬‬

‫ارظبالد ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪FTP‬‬ ‫‪‬‬

‫‪ٚ‬ثش‪ٚ‬ر‪ٛ‬و‪ٛ‬ي ‪FTP‬ػٕذ ل‪١‬بِٗ ثؼٍّ‪١‬خ ٔمً اٌٍّفبد ‪٠‬م‪ َٛ‬ثئٔشبء ارظبٌ‪ّ٘ٚ ٓ١‬ب‪:‬‬ ‫‪‬‬

‫*‪*79‬‬
 ‫‪FTP - File Transfer Protocol‬‬

‫‪ -1 ‬ارظبي رذىُ ‪Control Connection:‬‬

‫‪٘ٚ‬زا االرظبي خبص ثٕمً األ‪ٚ‬اِش ث‪ ٓ١‬ج‪ٙ‬بص‪ ٓ٠‬د‪١‬ش ‪٠‬م‪ َٛ‬ج‪ٙ‬بص اٌخبدَ ثفزخ إٌّفز ‪ٕ٠ٚ‬زظش ف‪ٟ‬‬ ‫‪‬‬

‫‪ٚ‬ضغ ‪ listen‬أل‪ ٞ‬ارظبي لبدَ ِٓ ج‪ٙ‬خ اٌج‪ٙ‬بص اٌؼّ‪ً١‬‬

‫‪٘ٚ‬زا االرظبي ‪٠‬ى‪ ْٛ‬ارظبي دائُ أ‪ ٞ‬ال ‪ٕ٠‬مطغ إال إرا لبَ أدذ اٌطشف‪ ٓ١‬ثمطغ االرظبي ػٓ اٌطشف‬ ‫‪‬‬

‫األخش‬

‫‪ -2 ‬ارظبي ث‪١‬بٔبد ‪Data Connection:‬‬

‫‪٠‬زُ إٔشبء ٘زا االرظبي ػٕذ ٔمً اٌج‪١‬بٔبد ث‪ ٓ١‬اٌج‪ٙ‬بص‪ ٓ٠‬أ‪ ٞ‬أْ ٘زا االرظبي ٘‪ ٛ‬ارظبي ِؤلذ‬ ‫‪‬‬

‫‪ِٚ‬شرجظ ثؼٍّ‪١‬خ ٔمً اٌٍّفبد ‪ٕ٠ٚ‬ز‪٘ ٟٙ‬زا االرظبي ثّجشد إرّبَ اٌؼٍّ‪١‬خ اٌّطٍ‪ٛ‬ثخ‪.‬‬

‫*‪*80‬‬
 ‫‪FTP - File Transfer Protocol‬‬

‫رمغ‪ّ١‬بد ٔمً اٌٍّفبد‬ ‫‪‬‬

‫أ‪ٚ‬ال ً ‪ ِٓ :‬د‪١‬ش إٌ‪ٛ‬ع‪.‬‬ ‫‪‬‬

‫‪ٕ٠‬مغُ ٔمً اٌٍّفبد إٌ‪ٛٔ ٝ‬ػ‪:ٓ١‬‬ ‫‪‬‬

‫‪ -1 ‬رٕض‪ ً٠‬اٌٍّفبد ‪Download:‬‬

‫‪ ٛ٘ٚ‬جٍت اٌٍّفبد ِٓ اٌىّج‪ٛ١‬رش اٌّض‪١‬ف ‪Host‬إٌ‪ ٝ‬ج‪ٙ‬بصن اٌّذٍ‪Local. ٟ‬‬ ‫‪‬‬

‫‪-2 ‬سفغ اٌٍّفبد ‪Upload:‬‬

‫‪ ٛ٘ٚ‬إسعبي اٌٍّفبد ِٓ ج‪ٙ‬بصن اٌّذٍ‪Local ٟ‬إٌ‪ ٝ‬اٌج‪ٙ‬بص اٌخبدَ ‪Host.‬‬ ‫‪‬‬

‫*‪*81‬‬
 ‫‪FTP - File Transfer Protocol‬‬

‫صبٔ‪١‬بُ ‪ ِٓ :‬إٌبد‪١‬خ األِٕ‪١‬خ‬ ‫‪‬‬

‫ٕ٘بن ٔ‪ٛ‬ػبْ ٌٕمً اٌٍّفبد‪:‬‬ ‫‪‬‬

‫‪ٔ -1 ‬مً آِٓ " ِذّ‪Secure FTP: "ٟ‬‬

‫رذزبط إٌ‪ ٝ‬اعُ ِغزخذَ ‪ٚ‬وٍّخ ِش‪ٚ‬س ٌٍذخ‪ٛ‬ي إٌ‪ ٝ‬إٌظبَ ‪ٚ‬رذظً ػٍ‪ِ ِٓ ٗ١‬ذ‪٠‬ش إٌظبَ‬ ‫‪‬‬

‫اٌّض‪١‬ف‪.‬‬

‫‪ٔ -2 ‬مً ِج‪ٛٙ‬ي ‪Anonymous FTP:‬‬

‫ال رذزبط إٌ‪ ٝ‬اعُ ِغزخذَ ‪ٚ‬وٍّخ ِش‪ٚ‬س ٌٍذخ‪ٛ‬ي ‪ٚ‬رغزط‪١‬غ غبٌجبً اعزخذاَ ‪guest‬أ‪ٚ‬‬ ‫‪‬‬

‫‪anonymous‬ػ‪ٛ‬ضبً ػٕ‪ّٙ‬ب‪.‬‬

‫*‪*82‬‬
 Lists Elements

 Sometimes it is necessary to itemize information instead of breaking it into

paragraphs. There are three main types of lists in HTML:
 Unordered lists. Collections of items that appear in no particular order.
 Ordered lists. Lists in which the sequence of the items is important.
 Definition lists. Lists that consist of terms and definitions.

‫ثبعزخذاَ ػذح‬ٚ ُ‫ائ‬ٛ‫ ل‬ٟ‫بٔبد ف‬١‫ُ اٌج‬١‫َ اٌخبطخ ثزٕظ‬ٛ‫ع‬ٌٛ‫ػخ ِٓ ا‬ّٛ‫ ِج‬ٍٝ‫ ػ‬HTML ‫ ٌغخ‬ٞٛ‫رذز‬ 

:ُ‫ائ‬ٛ‫اع ِٓ اٌم‬ٛٔ‫ٕ٘بن صالصخ ا‬ٚ .‫بساد‬١‫خ‬

‫خ‬١‫ف‬٠‫ائُ اٌزؼش‬ٛ‫اٌم‬ ‫ش اٌّزغٍغٍخ‬١‫ائُ غ‬ٛ‫اٌم‬ ‫ائُ اٌّزغٍغٍخ‬ٛ‫اٌم‬ 

*83*
 ‫‪Lists Elements‬‬

‫ػٕذ اٌزؼبًِ ِغ اٌم‪ٛ‬ائُ ٔذزبط إٌ‪ٚ ٝ‬ع‪ َٛ‬خبطخ ثزذذ‪٠‬ذ ثذا‪٠‬خ ‪ٙٔٚ‬ب‪٠‬خ اٌمبئّخ ‪ٚ ٚ‬ع‪ َٛ‬رذذد ثٕ‪ٛ‬د‬ ‫‪‬‬

‫٘زٖ اٌمبئّخ‬

‫ثبٌٕغجخ ٌٍم‪ٛ‬ائُ اٌّزغٍغٍخ ٔغزخذَ اٌ‪ٛ‬ع‪َٛ‬‬ ‫‪‬‬

‫<‪>OL< ... >/OL‬‬

‫أِب ثبٌٕغجخ ٌٍم‪ٛ‬ائُ غ‪١‬ش اٌّزغٍغٍخ فٕغزخذَ‬ ‫‪‬‬

‫<‪>UL< ... >/UL‬‬

‫‪ٌٚ‬زؼ‪ ٓ١١‬وً ثٕذ ِٓ ثٕ‪ٛ‬د اٌمبئّخ ٔغزخذَ اٌ‪ٛ‬عُ <‪ٚ ٛ٘ٚ >Li‬عُ ِفشد ‪٠‬ىزت ف‪ ٟ‬ثذا‪٠‬خ اٌغطش‬ ‫‪‬‬

‫اٌخبص ثىً ثٕذ ‪.List Item‬‬

‫*‪*84‬‬
 ‫‪Lists Elements >>> Type‬‬

‫خبط‪١‬خ ‪ Type‬رغزخذَ ِغ اٌم‪ٛ‬ائُ ‪ٚ ٚ‬ظ‪١‬فز‪ٙ‬ب رذذ‪٠‬ذ شىً اٌشِض اٌظب٘ش ِغ ثٕ‪ٛ‬د اٌمبئّخ‪،‬‬ ‫‪‬‬

‫‪ٚ‬ػبدح رغزخذَ ِغ ‪ٚ‬ع‪ َٛ‬ثذا‪٠‬خ اٌم‪ٛ‬ائُ <‪ >UL‬أ‪ٚ >OL< ٚ‬ثزٌه ٔذذد سِضاً ‪ٚ‬ادذاً ٌىً اٌمبئّخ‪.‬‬ ‫‪‬‬

‫‪ٚ‬ثّىٓ اعزخذاِٗ أ‪٠‬ضبً ِغ ‪ٚ‬عُ اٌجٕ‪ٛ‬د <‪ >Li‬إلػطبء رذىُ أوجش ف‪ِ ٟ‬ظ‪ٙ‬ش اٌمبئّخ ِٓ خالي رذذ‪٠‬ذ‬ ‫‪‬‬

‫سِض ِخزٍف ٌىً ثٕذ‪.‬‬

‫فؼٕذ ‪ٚ‬ضؼ‪ٙ‬ب ضّٓ رؼش‪٠‬ف اٌم‪ٛ‬ائُ اٌّزغٍغٍخ رأخز اٌم‪ A, a, I, i :ُ١‬اٌز‪ ٟ‬رغ‪١‬ش سِ‪ٛ‬ص اٌزشل‪ِٓ ُ١‬‬ ‫‪‬‬

‫األسلبَ اٌؼبد‪٠‬خ االفزشاض‪١‬خ (‪ٚ‬اٌز‪ ٟ‬سِض٘ب ‪ )1‬إٌ‪ ٝ‬رشل‪ ُ١‬ثبعزخذاَ األدشف اٌالر‪١ٕ١‬خ اٌىج‪١‬شح أ‪ٚ‬‬

‫اٌظغ‪١‬شح‪ ،‬أ‪ ٚ‬ثبعزخذاَ األسلبَ اٌش‪ِٚ‬بٔ‪١‬خ وّب رش‪ ٜ‬ف‪ ٟ‬اٌجذ‪ٚ‬ي اٌزبٌ‪ٟ‬‬
‫>‪<OL‬‬ ‫>‪<OL‬‬ ‫>‪<OL‬‬ ‫>‪<OL‬‬
‫“ ‪Type = “ i‬‬ ‫“ ‪Type = “ I‬‬ ‫“ ‪Type = “ a‬‬ ‫“ ‪Type = “ A‬‬
‫*‪*85‬‬
 ‫‪Lists Elements >>> Type‬‬

‫‪ ٚ‬ػٕذ اعزخذاِ‪ٙ‬ب ضّٓ رؼش‪٠‬ف اٌم‪ٛ‬ائُ اٌغ‪١‬ش اٌّزغٍغٍخ رأخز اٌم‪ :ُ١‬اٌّشثغ ‪ٚ ،square‬اٌذائشح‬ ‫‪‬‬

‫اٌّفشغخ ‪ٚ circle‬رؼشف ثبٌشىً اٌزبٌ‪ ٟ‬وّب رش‪ ٜ‬ف‪ ٟ‬اٌجذ‪ٚ‬ي اٌزبٌ‪ٟ‬‬

‫>‪<UL‬‬ ‫>‪<UL‬‬
‫“ ‪Type = “ square‬‬ ‫“ ‪Type = “circle‬‬

‫اٌم‪ّ١‬خ االفزشاض‪١‬خ ٌٍم‪ٛ‬ائُ اٌغ‪١‬ش ِزغٍغٍخ ٘‪ ٟ‬دائشح ع‪ٛ‬داء‬ ‫‪‬‬

‫*‪*86‬‬
Lists Elements

*87*
Lists Elements

*88*
Lists Elements

*89*
Lists Elements

*90*
 ‫‪Lists Elements‬‬

‫وّب ‪٠‬ذي االعُ اٌم‪ٛ‬ائُ اٌزؼش‪٠‬ف‪١‬خ ‪ Definition lists‬رغزخذَ ػٕذِب ٔش‪٠‬ذ إدساط لبئّخ ِٓ‬ ‫‪‬‬

‫اٌّظطٍذبد ‪٠‬زجغ وً ‪ٚ‬ادذ ِٕ‪ٙ‬ب ششح أ‪ ٚ‬رؼٍ‪١‬ك ‪.‬‬

‫‪ٔٚ‬ذزبط إلٔشبء ٘زٖ اٌم‪ٛ‬ائُ إٌ‪ ٝ‬صالصخ ‪ٚ‬ع‪:َٛ‬‬ ‫‪‬‬

‫ٌزؼش‪٠‬ف ثذا‪٠‬خ ‪ٙٔٚ‬ب‪٠‬خ اٌمبئّخ‪.‬‬ ‫‪ ‬األ‪ٚ‬ي <‪>/DL< ... >DL‬‬

‫‪ٚ‬اٌضبٔ‪ٛ٠ٚ >DT< ٟ‬ضغ لجً وً ِظطٍخ ٌزذذ‪٠‬ذٖ‪ٚ ٛ٘ٚ ،‬عُ ِفشد‪.‬‬ ‫‪‬‬

‫أِب اٌضبٌش ف‪ٚ ٛ٘ٚ >DD< ٛٙ‬عُ اٌششح أ‪ ٚ‬اٌزؼٍ‪١‬ك ‪ ٛ٘ٚ‬أ‪٠‬ضب ِفشد‪.‬‬ ‫‪‬‬

‫*‪*91‬‬
Lists Elements

*92*
 Lists Elements

<DL>

<DT>HTML <DD>Hyper Text Markup Language

<DT>WWW <DD>World Wide Web

<DT>FTP <DD>File Transport Protocol

<DT>GIF <DD>Graphical Interchange Format

<DT>JPG, JPEG <DD>Joint Photographic Experts Group

</DL>

*93*
 ‫‪Lists Elements‬‬

‫ِغ رغ‪١١‬ش األٌ‪ٛ‬اْ اٌخبطخ ثبٌؼٕب‪ٚ ٓ٠ٚ‬اٌخال‪٠‬ب ‪ٚ‬اعزخذاَ أ‪ٚ‬عّخ إٌظ‪ٛ‬ص اٌغبثكة‬

‫*‪*94‬‬
 Horizontal Rules Elements <hr>

 If you want to add a divider between sections, you can insert a horizontal rule (hr)
element between blocks of text.
 When browsers see an hr element, they insert a shaded horizontal line in its place
by default. Because horizontal rules are block-level elements

. ً‫ اِزذاد اٌظفذخ وبٍِزب‬ٍٝ‫ه خظ ػ‬٠‫ش ٌذ‬ٙ‫ظ‬٠ ‫ف‬ٛ‫ ع‬ٟ‫< ٌشعُ خظ أفم‬HR> ُ‫ع‬ٌٛ‫ٔغزخذَ ا‬ 

:ً ‫اٌغّه ِضال‬
ُ ‫ّضً ٘زا‬٠ ُ‫ب ثشل‬ٙ‫أرجؼز‬ٚ SIZE ‫خ‬١‫عّه ٘زا اٌخظ إرا أضفذ ٌٗ اٌخبط‬
ُ ‫ذ‬٠‫غ رذذ‬١‫رغزط‬ 

<HR SIZE = "5">

*95*
 Horizontal Rules Elements <hr>

‫ّخ‬١‫ ِٓ اٌّّىٓ أْ رأخز ل‬ٟ‫اٌز‬ٚ WIDTH ‫خ‬١‫ذ ػشع اٌخظ ثبعزخذاَ اٌخبط‬٠‫ّىٕه رذذ‬٠ ‫وزٌه‬ 

‫خ‬١‫ ٔغج‬ٚ‫ِطٍمخ أ‬

<HR WIDTH="80%">

ALIGN ‫خ اٌّذبراح‬١‫زا اٌخظ خبط‬ٌٙ ٜ‫ِٓ اٌخظبئض األخش‬ٚ 

center, left, right ُ١‫ رأخز اٌم‬ٟ‫اٌز‬ٚ 

<HR WIDTH="80%" ALIGN="center">

<HR WIDTH="400" ALIGN="left">
<HR SIZE="5" WIDTH="60%" ALIGN="right">

*96*
Horizontal Rules Elements <hr>

*97*
 Addresses Elements

 the address element that is used to provide contact information for the author
or maintainer of the document.
 It is generally placed at the beginning or end of a document or a large section of
a document. You shouldn’t use the address element for all types of addresses

*98*
Web Design - HTML

*99*
Web Design

*100*
Web Design - HTML

o Meta Element o Image Element

o Text Element o Marquee Element
o Font Element o dfn Element
o ADDING LINKS

Let’s start with the first set of slides

*101*
 Meta Element

 HTML also includes a meta element <meta> that goes inside the head element.
 The purpose of the meta element is to provide meta-information about the document

‫ اٌظفذح‬ٍٟ‫ اع‬ٟ‫< ف‬head>…</head> ُ‫س‬ٚ ٓ١‫ىرة ت‬٠ ‫ة‬٠ٌٛ‫ٕذسج ػّٓ طفذاخ ا‬٠ 
, ‫ش٘ا‬١‫غ‬ٚ ‫ اٌّؤٌف‬ٚ ‫ح‬١‫س‬١‫اٌىٍّاخ اٌشئ‬ٚ ٜٛ‫ث اٌّذر‬١‫ اٌظفذح ِٓ د‬ٚ‫لع أ‬ٌّٛ‫طف ا‬ٚ ِٕٗ ‫اٌغشع‬ 
ٌٟ‫ا ورا‬ٙ‫اُ٘ خظائظ‬ٚ ‫ ِذشواخ اٌثذث‬ٟ‫ف ف‬١ٕ‫ح اٌرظ‬١ٍّ‫ ع‬ٟ‫ذ ف‬١‫ذف‬ٚ

*102*
Meta Element

*103*
Meta Element

*104*
 ‫‪Text Element‬‬

‫اسُ اٌعًّ اٌز‪٠ ٞ‬م‪ َٛ‬تٗ اٌى‪ٛ‬د‬ ‫ؽش‪٠‬مح وراتح اٌى‪ٛ‬د‬

‫اٌخؾ اٌغاِك (األس‪ٛ‬د اٌعش‪٠‬غ)‬ ‫>‪ <B‬إٌض >‪</B‬‬
‫>‪ <STRONG‬إٌض>‪</STRONG‬‬
‫اٌخؾ اٌّائً‬ ‫>‪ <I‬إٌض >‪</I‬‬
‫>‪ <EM‬إٌض >‪</EM‬‬
‫اٌخؾ اٌّسطش‬ ‫>‪ <U‬إٌض >‪</U‬‬
‫اٌخؾ اٌّشذفع‬ ‫>‪ <SUP‬إٌض >‪</SUP‬‬

‫*‪*105‬‬
 Text Element

‫د‬ٛ‫َ تٗ اٌى‬ٛ‫م‬٠ ٞ‫اسُ اٌعًّ اٌز‬ ‫د‬ٛ‫مح وراتح اٌى‬٠‫ؽش‬

‫اٌخؾ إٌّخفغ‬ </SUB> ‫< إٌض‬SUB>
‫ش‬١‫خؾ وث‬ </BIG> ‫< إٌض‬BIG>
‫ش‬١‫خؾ طغ‬ </SMALL>‫< إٌض‬SMALL>
‫عرشػٗ خؾ‬٠ ‫ٔض‬ </STRIKE> ‫< إٌض‬STRIKE>
</S> ‫< إٌض‬S>
TeleType ‫ٌح اٌطاتعح‬٢‫ٔض ا‬ </TT>‫< إٌض‬TT>

 Use the quotation (q) element to mark up short quotations, such as “To be or not
to be” in the flow of text, as shown in this example.
 adel says, <q>Welcome To Web Designer.</q>

*106*
Text Element

*107*
Text Element

*108*
Text Element

*109*
Text Element

*110*
Research !!??

*111*
 ‫‪Font Element‬‬

‫اٌ‪ٛ‬سُ اٌخاص تاٌخط‪ٛ‬ؽ ٘‪٠ ٛ٘ٚ >FONT< ... >/FONT< ٛ‬م‪ َٛ‬تاٌرذىُ تاٌخط‪ٛ‬ؽ ِٓ د‪١‬ث‬ ‫‪‬‬

‫إٌ‪ٛ‬ع ‪ٚ‬اٌٍ‪ٚ ْٛ‬اٌذجُ‪ .‬أِا اٌخظائض اٌر‪ٔ ٟ‬سرخذِ‪ٙ‬ا ِع ٘زا اٌ‪ٛ‬سُ ف‪ ٟٙ‬واٌراٌ‪:ٟ‬‬

‫ارا ٌُ ذرعاًِ ِع ا‪ٚ‬سّح اٌخط‪ٛ‬ؽ س‪ٛ‬ف ‪٠‬رُ ذطث‪١‬ك اإلعذاداخ االفرشاػ‪١‬ح‪ٚ .‬تإٌّاسثح فئْ‬ ‫‪‬‬

‫٘زٖ اإلعذاداخ ٘‪ ٟ‬خؾ عاد‪ٛٔ ,ٞ‬عٗ ‪ٚ Times New Roman‬دجّٗ ‪( 3‬تّم‪١‬اس ِرظفذاخ‬

‫اإلٔرشٔد)‪.‬‬

‫*‪*112‬‬
 ‫‪Font Element‬‬

‫اٌخاط‪ٗ١‬‬ ‫عٍّ‪ٙ‬ا‬
‫‪FACE‬‬ ‫ذم‪٘ َٛ‬زٖ اٌخاط‪١‬ح ترذذ‪٠‬ذ ٔ‪ٛ‬ع اٌخؾ اٌز‪ٔ ٞ‬ش‪٠‬ذٖ‪ٚ ,‬لذ ٔم‪ َٛ‬ترذذ‪٠‬ذ أوثش ِٓ‬
‫ٔ‪ٛ‬ع ِعا‪ٚ .‬ف‪٘ ٟ‬زٖ اٌذاٌح إرا ٌُ ‪٠‬ر‪ٛ‬اجذ اٌخؾ اٌّذذد أ‪ٚ‬ال عٍ‪ ٝ‬ج‪ٙ‬اص‬
‫اٌشخض اٌز‪٠ ٞ‬رظفخ اٌّ‪ٛ‬لع ‪٠‬رُ اعرّاد اٌخؾ اٌثأ‪٘ٚ ... ٟ‬ىزا‬
‫‪<FONT FACE="Traditional Arabic, Arabic Transparent,‬‬
‫>"‪Simplified Arabic‬‬
‫إٌض‬
‫>‪</FONT‬‬

‫*‪*113‬‬
 ‫‪Font Element‬‬

‫اٌخاط‪ٗ١‬‬ ‫عٍّ‪ٙ‬ا‬
‫‪SIZE‬‬ ‫ٌرذذ‪٠‬ذ دجُ اٌخؾ ٔسرخذَ ٘زٖ اٌخاط‪١‬ح‪ٚ .‬فمؾ ٕ٘ان سثعح أدجاَ أل‪ٞ‬‬
‫خؾ ذسرط‪١‬ع اٌّرظفذاخ اٌرعشف عٍ‪ٙ١‬ا‪ٔٚ .‬م‪ َٛ‬ترذذ‪٠‬ذ اٌذجُ اٌّطٍ‪ٛ‬ب‬
‫تأسٍ‪ٛ‬ت‪ :ٓ١‬أ‪ٌّٙٚ‬ا اٌّثاشش‪ .‬د‪١‬ث ‪٠‬رُ وراتح سلُ ‪٠‬رشا‪ٚ‬ح ِا ت‪ .7-1 ٓ١‬أ‪ ٞ‬إٔٔا‬
‫ٔخراس اٌذجُ اٌز‪ٔ ٞ‬ش‪٠‬ذٖ ِثاششج‪.‬‬
‫>"‪<FONT SIZE="4‬‬
‫إٌض‬
‫>‪</FONT‬‬
‫عٍّا تأْ اٌذجُ ‪ ٛ٘ 1‬أطغش خؾ ‪ٚ‬اٌذجُ ‪ ٛ٘ 7‬أوثش خؾ ‪ٚ‬اٌذجُ ‪ ٛ٘ 3‬اٌخؾ‬
‫االفرشاػ‪ٟ‬‬

‫*‪*114‬‬
 Font Element

ٗ١‫اٌخاط‬ ‫ا‬ٍّٙ‫ع‬
COLOR ‫ْ اٌخؾ‬ٌٛ ‫ح فرذذد‬١‫٘زٖ اٌخاط‬
<FONT COLOR="#FF0000">
‫إٌض‬
</FONT>

*115*
Font Element

*116*
Font Element

*117*
Font Element

*118*
Research !!??

*119*
 ADDING LINKS <a> </a>

 The content of the anchor element becomes the hypertext link. Simply wrap a
selection of text in opening and closing <a>...</a> tags
 and use the href attribute to provide the URL of the linked page. Here is an example
that creates a link to the O’Reilly Media web site:

<a href="http://www.oreilly.com">Go to O'Reilly.com</a>

*120*
 The href Attribute

 You’ll need to tell the browser which document to link to, right?
 The href (hypertext reference) attribute provides the address of the page (its
URL) to the browser.
 The URL must always appear in quotation marks. Most of the time you’ll point to
other HTML documents; however,
 you can also point to other web resources, such as images, audio, and video
 There are two ways to specify the URL:

*121*
 The href Attribute

Linking within a directory

 The most straight forward

relative URL to write is to

another file with in the same

directory.

 When you are linking to a file

in the same directory, you

only need to provide the name

of the file.

*122*
 The href Attribute

Linking to a lower directory

 But what if the files aren’t in
the same directory? You have
to give the browser directions
by including the pathname in
the URL
 The pathname in the URL tells
the browser to look in the
current directory for a
directory called recipes, and
then look for the file
salmon.html

*123*
The href Attribute

*124*
 The href Attribute

Linking to a higher directory

 So far, so good, right? Here
comes the tricky part.
 This time we’re going to go in
the other direction and make a
link from the salmon recipe page
back to the home page, which is
one directory level up.

*125*
The href Attribute

*126*
The href Attribute

‫ْ اٌشاتؾ‬ٌٛ Link

(ٗ١ٍ‫ْ اٌشاتؾ إٌشؾ (عٕذ اٌؼغؾ ع‬ٌٛ Alink

ٗ‫اسذ‬٠‫ ذُ ص‬ٞ‫ْ اٌشاتؾ اٌز‬ٌٛ Vlink

*127*
The href Attribute

*128*
 The href Attribute

href

6.html Folder 3

71.html

*129*
 The Target Attribute

 The target attribute defines where the linked document will be opened.
 The following code example opens the document in a new browser window:
 You can use the following options for the target attribute

OPTION DESCRIPTION

_blank Opens the linked document in a new window

_self Opens the linked document in the same frame as it was clicked (this is default

_parent Opens the linked document in the parent frameset

_top Opens the linked document in the full body of the window

*130*
 The Name Attribute

 When the name attribute is used, the <a> element defines a named anchor inside an
HTML document.
 Named anchor syntax:

<a name="label">Any content</a>

The link syntax to a named anchor:

<a href="#label">Any content</a>

The # in the href attribute defines a link to a named anchor.
A named anchor inside an HTML document:

*131*
The Name Attribute

*132*
 Mail Links

 the mailto link. By using the mailto protocol in a link, you can link to an email
address.
 When the user clicks on a mailto link, the browser opens a new mail message
preaddressed to that address in a designated mail program.
 A sample mailto link is shown here:

<a href="mailto:[email protected]">Contact with my</a>

 As you can see, it’s a standard anchor element with the href attribute. But the
value is set to mailto:[email protected].

*133*
 Image Element

 In HTML, images are defend with the <img> tag.

 The img tag is empty, which means that it contains attributes only and it has no
Closing tag.
 To display an image on a page, you need to use the src attribute. Src stands for
“source”.
 The value of the src attribute is the URL of the image you want to display on
your page.
 The Syntax of defining an image:
<img src="url">

*134*
 ‫‪Image Element‬‬

‫اٌ‪ٛ‬سُ اٌشئ‪١‬س‪ ٟ‬اٌّسرخذَ ٌرعش‪٠‬ف ط‪ٛ‬سج ِا داخً اٌظفذح ٘‪ٚ ٛ٘ٚ >IMG< ٛ‬سُ ِفشد‪.‬‬ ‫‪‬‬

‫‪٠‬جة أْ ٔذذد اٌظ‪ٛ‬سج اٌر‪ٔ ٟ‬ش‪٠‬ذ٘ا‪ٌ .‬زٌه ٔؼ‪١‬ف اٌخاط‪١‬ح ٌٗ ‪ٌ SRC‬رذذ‪٠‬ذ ِ‪ٛ‬لع ‪ٚ‬اسُ اٌظ‪ٛ‬سج ‪.‬‬ ‫‪‬‬

‫اٌظ‪ٛ‬سج اٌراٌ‪١‬ح إسّ‪ٙ‬ا ‪ٚ thedome.jpg‬عٕذِا لّد تئدساج‪ٙ‬ا‪ .‬وأد اٌش‪١‬فشج اٌخاطح تزٌه ٘‪: ٟ‬‬ ‫‪‬‬

‫>"‪<IMG SRC="thedome.jpg‬‬

‫*‪*135‬‬
Image Element

*136*
Image Element

*137*
Image Element

*138*
Image Element

*139*
 ‫‪Align Attribute‬‬

‫عٕذِا ٔم‪ َٛ‬تئدساج ط‪ٛ‬سج ػّٓ فمشج فئْ ِ‪ٛ‬لع ظ‪ٛٙ‬س٘ا ‪٠‬رذذد تاٌطثع دسة ذشذ‪١‬ة ‪ٚ‬س‪ٚ‬د٘ا ف‪ٟ‬‬ ‫‪‬‬

‫اٌفمشج‪ِ ,‬ثٍ‪ٙ‬ا ِثً أ‪ ٞ‬وٍّح أ‪ ٚ‬عثاسج أخش‪.ٜ‬‬

‫ٔسرخذَ اٌخاط‪١‬ح ‪ٌ ALIGN‬رذذ‪٠‬ذ ِذاراج اٌظ‪ٛ‬سج ِع إٌض اٌّشافك ٌ‪ٙ‬ا أ‪ٌٕ ٚ‬مً تعثاسج أخش‪ :ٜ‬ذذذ‪٠‬ذ‬ ‫‪‬‬

‫ِ‪ٛ‬لع إٌض اٌز‪ٙ١ٍ٠ ٞ‬ا تإٌسثح ٌ‪ٙ‬ا ‪ ٟ٘ٚ‬ذأخز اٌم‪MIDDLE, LEFT, RIGHT ,BOTTOM, TOP :ُ١‬‬

‫*‪*140‬‬
Align Attribute

*141*
Align Attribute

*142*
Width and Height Attribute

*143*
Alt Attribute

*144*
 ‫‪Marquee Element‬‬
‫‪ٚ‬سُ ‪٠ Marquee‬سرخذَ إلػافح ٔض ِرذشوح أ‪ ٚ‬ط‪ٛ‬سٖ ذرذشن داخً اٌّرظفخ‬ ‫‪‬‬

‫*‪*145‬‬
Marquee Element

*146*
Marquee Element

*147*
‫‪Marquee Element‬‬

‫اسرثذي تذي إٌض ط‪ٛ‬سٖ ِع إػافح إؽاس ٌ‪ٙ‬ا‬

‫*‪*148‬‬
 ‫‪Marquee Element‬‬

‫غ‪١‬ش ٌ‪ ٛ‬اٌخؾ إٌ‪ ٝ‬اٌٍ‪ ْٛ‬األصسق اٌغاِك اٌّائً ِع اٌرسط‪١‬ش‬

‫*‪*149‬‬
Marquee Element

*150*
 dfn Element

 It is common to point out the first and defining instance of a word in a document in
some fashion.
 In HTML, you can identify them with the <dfn> element and format them
visually using style sheets.

*151*
Web Design - HTML

*152*
Web Design

*153*
Web Design - HTML

o Table Element
o Div Element
o Form Element

Let’s start with the first set of slides

*154*
 Table Element

 HTML tables were created for instances when you need to add tabular material
(data arranged into rows and columns) to a web page. Tables may be used to organize
calendars, schedules, statistics, or other types of information
 A table cell may contain any sort of information, including numbers, text elements,
even images and multimedia objects.

*155*
 ‫‪Table Element‬‬

‫رؼذ اٌغذا‪ٚ‬ي ِٓ أل‪ ٜٛ‬األد‪ٚ‬اد اٌز‪ ٟ‬رزؼّٕ‪ٙ‬ب ٌغخ ‪ٚ HTML‬غٍت ِ‪ٛ‬لغ ف‪ ٟ‬اإلٔزشٔذ اْ ٌُ ‪٠‬ىٓ‬ ‫‪‬‬

‫اٌىً ‪٠‬غزخذِ‪ٙ‬ب ثظ‪ٛ‬سح أ‪ ٚ‬ثأخش‪ٚ .ٜ‬اٌحم‪١‬مخ أْ ‪ٚ‬ػغ اٌغذا‪ٚ‬ي ف‪ ٟ‬طفحبد اٌ‪٠ٛ‬ت ال ‪٠‬مزظش ػٍ‪ٝ‬‬

‫رٍه اٌم‪ٛ‬ائُ ِٓ اٌج‪١‬بٔبد اٌز‪ٔ ٟ‬حزبط ٌزشر‪١‬ج‪ٙ‬ب ف‪ ٟ‬طف‪ٛ‬ف ‪ٚ‬أػّذح‪،‬‬

‫‪٠‬زؼذ‪ ٜ‬رٌه إٌ‪ ٝ‬اعزخذاِ‪ٙ‬ب ف‪ ٟ‬رظّ‪ ُ١‬اٌظفحبد ٔفغ‪ٙ‬ب ‪ٚ‬رٕظ‪ّٙ١‬ب‪ٚ ،‬اٌزحىُ ثّظ‪ٙ‬ش٘ب ثظ‪ٛ‬سح‬ ‫‪‬‬

‫ل‪٠ٛ‬خ ‪ٚ‬فؼبٌخ ال ‪ّ٠‬ىٓ أداؤ٘ب ِ‪ّٙ‬ب اعزخذِٕب ِٓ ‪ٚ‬ع‪ َٛ‬خبطخ ثزٕغ‪١‬ك اٌظفحبد‪.‬‬

‫إْ اٌزؼبًِ ِغ اٌغذا‪ٚ‬ي ‪ٚ‬إدساع‪ٙ‬ب ف‪ ٟ‬طفحبد اٌ‪٠ٛ‬ت ع‪ ًٙ‬عذاً ِضٍٗ ِضً أ‪ ٞ‬أداح ِٓ أد‪ٚ‬اد‬ ‫‪‬‬

‫‪HTML‬‬

‫*‪*156‬‬
Table Element

*157*
 ‫‪Table Element‬‬

‫٘زٖ ٘‪ ٟ‬اٌ‪ٛ‬ع‪ َٛ‬اٌز‪ٔ ٟ‬جذأ ث‪ٙ‬ب إلدساط عذ‪ٚ‬ي ِى‪ ِٓ ْٛ‬خٍ‪١‬خ ‪ٚ‬احذح أ‪ ِٓ ٚ‬اوضش ِٓ خٍ‪١‬خ‬ ‫‪‬‬

‫<‪>TABLE<...>/TABLE‬‬

‫‪ٚ‬ا‪ ْ٢‬ثؼذ إدساط ٘ز‪ ٓ٠‬اٌ‪ٛ‬عّ‪٠ ،ٓ١‬غت رحذ‪٠‬ذ ػذد اٌظف‪ٛ‬ف اٌز‪ٔ ٟ‬ش‪٠‬ذ٘ب ف‪ ٟ‬اٌغذ‪ٚ‬ي‬ ‫‪‬‬

‫<‪>TR< ...>/TR‬‬

‫‪ ٚ‬ثٕفظ اٌش‪٠ ٟ‬غت رحذ‪٠‬ذ ػذد اٌخال‪٠‬ب اٌز‪ٔ ٟ‬ش‪٠‬ذ٘ب ف‪ ٟ‬اٌغذ‪ٚ‬ي‪٠ .‬زُ وزبثخ ‪ٚ‬عُ أشبء اٌخال‪٠‬ب‬ ‫‪‬‬

‫ث‪ ٓ١‬اٌ‪ٛ‬ع‪ >/TR< ... >TR< َٛ‬ؽبٌّب أْ اٌخال‪٠‬ب ٘‪ ٟ‬عضء ِٓ اٌظف‪ٛ‬ف‪.‬‬

‫<‪>TD< ...>/TD‬‬

‫إٌض اٌز‪ٔ ٞ‬ش‪٠‬ذ إدساعٗ ف‪ ٟ‬اٌخٍ‪١‬خ ‪٠‬ىزت ػّٓ ٘ز‪ ٓ٠‬اٌ‪ٛ‬عّ‪.ٓ١‬‬

‫*‪*158‬‬
Table Element

*159*
 ‫‪Attribute Of Table‬‬

‫‪ BORDER‬‬

‫رم‪٘ َٛ‬زٖ اٌخبط‪١‬خ ثإػبفخ حذ‪ٚ‬د ٌٍغذ‪ٚ‬ي ‪ٚ‬رحذ‪٠‬ذ عّبوز‪ٙ‬ب‪ٚ ،‬اٌم‪ّ١‬خ االفزشاػ‪١‬خ ٌ‪ٙ‬ب ٘‪ ٟ‬طفش‬ ‫‪‬‬

‫أ‪ ٞ‬ال حذ‪ٚ‬د‬

‫> “‪<TABLE BORDER="5‬‬

‫> “‪<TABLE BORDER="0‬‬

‫*‪*160‬‬
 ‫‪Attribute Of Table‬‬

‫‪ WIDTH‬‬

‫ٔغزخذَ ٘زٖ اٌخبط‪١‬خ ٌزحذ‪٠‬ذ ػشع اٌغذ‪ٚ‬ي‪ٕ٘ٚ .‬بن أعٍ‪ٛ‬ث‪ٌ ٓ١‬زحذ‪٠‬ذ اٌؼشع‪:‬‬ ‫‪‬‬

‫اٌّطٍك أ‪ ٞ‬ثىزبثخ اٌشلُ اٌز‪ّ٠ ٞ‬ضً اٌؼشع ثظ‪ٛ‬سح ِجبششح‪.‬‬ ‫‪‬‬

‫إٌغج‪ ٟ‬أ‪ ٞ‬وزبثخ سلُ إٌغجخ اٌّئ‪٠ٛ‬خ ‪٠‬حذد ػشع اٌغذ‪ٚ‬ي حغت ػشع ٔبفزح اٌّزظفح‪( .‬أ‪ٞ‬‬ ‫‪‬‬

‫أْ ػشع اٌغذ‪ٚ‬ي ع‪١‬خزٍف ثبخزالف ػشع ٔبفزح اٌّزظفح)‪.‬‬

‫> “‪<TABLE WIDTH="600‬‬

‫> “‪<TABLE WIDTH="80%‬‬

‫*‪*161‬‬
 ‫‪Attribute Of Table‬‬

‫‪ HEIGHT‬‬

‫ٌزحذ‪٠‬ذ اسرفبع اٌغذ‪ٚ‬ي‪٠ٚ ،‬ى‪ ْٛ‬رحذ‪٠‬ذ ٘زا االسرفبع ِٓ خالي ل‪ّ١‬خ ِطٍمخ رحذد االسرفبع‬ ‫‪‬‬

‫ثبٌج‪١‬ىغً‪ .‬أ‪ ٚ‬ل‪ّ١‬خ ٔغج‪١‬خ رحذد اسرفبع اٌغذ‪ٚ‬ي ثبٌٕغجخ السرفبع طفحخ اٌّزظفح‬

‫> “‪<TABLE HEIGHT="500‬‬

‫> “‪<TABLE HEIGHT="100%‬‬

‫‪ ALIGN‬‬

‫‪ٌ ‬زحذ‪٠‬ذ ِحبراح اٌغذ‪ٚ‬ي أفم‪١‬بً ػٍ‪ ٝ‬اٌظفحخ ‪ٕ١ّ٠‬بً أ‪٠ ٚ‬غبساً‪٠ ٛ٘ٚ .‬أخز اٌم‪left ،right ُ١‬‬
‫> “‪<TABLE ALIGN="Left‬‬
‫> “‪<TABLE ALIGN="Right‬‬

‫*‪*162‬‬
 Attribute Of Table

 BGCOLOR

‫ي‬ٚ‫خ ٌٍغذ‬١‫ْ اٌخٍف‬ٌٛ ‫ذ‬٠‫غزخذَ ٌزحذ‬٠ٚ 

<TABLE BGCOLOR="#00FFFF“ >

 DIR

‫ي‬ٚ‫ذ ِحبراح إٌض داخً اٌغذ‬٠‫رغزخذَ رحذ‬ 

*163*
Table Element

*164*
Table Element

*165*
Table Element

*166*
Table Element

*167*
 ColSpan and RowSpan Attribute

 One fundamental feature of table structure is Cell Spanning

 You make a header or data cell span by adding the following attributes: colspan, or
rowspan
 Column Spans, created with the colspan attribute in the td or th element, stretch
a cell to the right to span over the subsequent columns

ً‫ب‬١‫ب أفم‬ٙ١ٍ‫ ر‬ٟ‫ب اٌز‬٠‫ة ِٓ اٌخال‬ٍٛ‫خ ِغ اٌؼذد اٌّط‬١ٌ‫خ اٌحب‬١ٍ‫َ ثذِظ اٌخ‬ٛ‫م‬٠ 

<TD COLSPAN="n“ >

‫ب‬ٙ‫زُ دِغ‬١‫ ع‬ٟ‫ب اٌز‬٠‫ ػذد اٌخال‬ٛ٘ n ‫ش‬١‫ح‬ 

*168*
 ColSpan and RowSpan Attribute

 Row Spans, created with the rowspan attribute, work just like column spans, but
they cause the cell to span downward over several rows.

)‫ب‬ٍٙ‫ أعف‬ٞ‫بً (أ‬٠‫د‬ّٛ‫ب ػ‬ٙ١ٍ‫ ر‬ٟ‫ب اٌز‬٠‫ة ِٓ اٌخال‬ٍٛ‫خ ِغ اٌؼذد اٌّط‬١ٌ‫خ اٌحب‬١ٍ‫َ ثذِظ اٌخ‬ٛ‫م‬٠ 

<TD ROWSPAN="n“ >

‫ب‬ٙ‫زُ دِغ‬١‫ ع‬ٟ‫ب اٌز‬٠‫ ػذد اٌخال‬ٛ٘ n ‫ش‬١‫ح‬ 

*169*
 ‫‪TH and CAPTION Element‬‬

‫ٕ٘بن ٔ‪ٛ‬ع خبص ِٓ اٌخال‪٠‬ب اٌز‪٠ ٟ‬زُ رؼش‪٠‬ف‪ٙ‬ب ثبعزخذاَ اٌ‪ٛ‬ع‪ٟ٘ٚ >TH< ... >/TH< َٛ‬‬ ‫‪‬‬

‫اخزظبس ‪ Table Header‬أ‪ ٞ‬رش‪٠ٚ‬غخ اٌغذ‪ٚ‬ي‪.‬‬

‫‪ٚ‬اٌفشق اٌ‪ٛ‬ح‪١‬ذ ث‪ٕٙ١‬ب ‪ٚ‬ث‪ ٛ٘ >TD< ... >/TD< ٓ١‬أْ إٌض اٌز‪ ٞ‬رحز‪٠ ٗ٠ٛ‬ظ‪ٙ‬ش ثخؾ أع‪ٛ‬د‬ ‫‪‬‬

‫ػش‪٠‬غ ‪ِٚ‬حبرارٗ ف‪ِٕ ٟ‬زظف اٌخٍ‪١‬خ ثظ‪ٛ‬سح افزشاػ‪١‬خ‪ .‬خبطخ ‪ٚ‬أْ اٌخظبئض اٌّغزخذِخ ِؼ‪ٙ‬ب‬

‫٘‪ٔ ٟ‬فظ خظبئض <‪>TD‬‬

‫اٌ‪ٛ‬ع‪ َٛ‬األخ‪١‬شح اٌّغزخذِخ ف‪ ٟ‬اٌغذا‪ٚ‬ي ٘‪ٟ٘ٚ >CAPTION< ... >/CAPTION< ٟ‬‬ ‫‪‬‬

‫رخزض ثإػبفخ ػٕ‪ٛ‬اْ سئ‪١‬غ‪ٌٍ ٟ‬غذ‪ٚ‬ي وىً‪ٌ .‬زٌه ف‪ ٟٙ‬ػٕذِب رىزت ‪٠‬زُ ‪ٚ‬ػؼ‪ٙ‬ب ِجبششح ثؼذ‬

‫اٌ‪ٛ‬عُ <‪ٚ >TABLE‬ثظ‪ٛ‬سح ِغزمٍخ ‪١ٌٚ‬ظ ػّٓ ‪ٚ‬ع‪ َٛ‬اٌظف‪ٛ‬ف أ‪ ٚ‬اٌخال‪٠‬ب‪.‬‬

‫*‪*170‬‬
ColSpan and RowSpan Attribute

*171*
ColSpan and RowSpan Attribute

*172*
Table Element

*173*
Table Element

*174*
Table Element

*175*
Table Element

*176*
Table Element

*177*
Table Element

*178*
 Div Element

 The HTML <div> tag is used to group the large section of HTML elements together.
ً ِ HTML ‫عّخ‬ٚ‫ػخ ا‬ّٛ‫غ ِغ‬١ّ‫> ٌزغ‬div> َ‫رغزخذ‬
.‫ؼ ب‬ 
 We know that every tag has a specific purpose e.g. p tag is used to specify
paragraph, <h1> to <h6> tag are used to specify headings but the <div> tag is just
like a container unit which is used to encapsulate other page elements and divides the
HTML documents into sections

>h6> ٌٝ‫> إ‬h1> ‫ ُرغزخذَ ػالِخ‬ٚ ، ‫ذ فمشح‬٠‫ ٌزحذ‬p ‫ ِضً ُرغزخذَ ػالِخ‬، ‫دا‬
ً ‫ػب ِحذ‬
ً ‫عُ غش‬ٚ ً‫ٌى‬ 

ٜ‫ف ػٕبطش اٌظفحخ األخش‬١ٍ‫ رُغزخذَ ٌزغ‬ٟ‫خ اٌز‬٠ٚ‫حذح اٌحب‬ٚ ‫> رشجٗ رّبًِب‬div> ٓ‫ٌى‬ٚ ٓ٠ٚ‫ذ اٌؼٕب‬٠‫ٌزحذ‬

.َ‫ ألغب‬ٌٝ‫ إ‬HTML ‫ُ ِغزٕذاد‬١‫رمغ‬ٚ

*179*
 ‫‪Div Element‬‬

‫>‪<div‬‬
‫>‪<p‬‬
‫‪ّ٠‬ىٕه ‪ٚ‬ػغ أ‪ٛٔ ٞ‬ع ِٓ أٔ‪ٛ‬اع اٌّحز‪ٕ٘ ٜٛ‬ب‪ ،‬ثّب ف‪ ٟ‬رٌه اٌغذا‪ٚ‬ي ‪ٚ‬غ‪١‬ش٘ب‬
‫>‪</P‬‬
‫>‪</div‬‬

‫*‪*180‬‬
Div Element

*181*
 ‫‪Form Element‬‬

‫‪ The HTML Forms are added to web pages.‬‬

‫‪‬‬ ‫‪The form element is a container for all the content of the form, including some‬‬
‫‪number of form controls, such as text entry fields and buttons.‬‬

‫إٌّبرط رؼزجش ِٓ اٌّ‪ٛ‬اػ‪١‬غ اٌّزمذِخ ف‪ٌ ٟ‬غخ ‪ HTML‬إال أْ ِؼظُ ِ‪ٛ‬الغ اٌ‪٠ٛ‬ت رىبد ال رخٍ‪ِٓ ٛ‬‬ ‫‪‬‬

‫‪ٚ‬ع‪ٛ‬د٘ب‪،‬‬

‫‪٠‬زُ اعزخذاَ إٌّ‪ٛ‬رط ٌزغّ‪١‬غ اٌّذخالد ِٓ لجً اٌّغزخذَ‪ .‬غبٌجًب ِب ‪٠‬زُ إسعبي إدخبي اٌّغزخذَ‬ ‫‪‬‬

‫إٌ‪ ٝ‬اٌخبدَ ٌٍّؼبٌغخ‪.‬‬

‫ثبإلػبفخ إٌ‪ ٝ‬إِىبٔ‪١‬خ رٕظ‪ِ ُ١‬ى‪ٔٛ‬بد اٌظفحخ ‪ٚ‬رٕظ‪ ُ١‬اٌج‪١‬بٔبد اٌّذخٍخ ِٓ خالٌ‪ٙ‬ب ‪ ٚ‬رغ‪ ًٙ‬رظّ‪ُ١‬‬ ‫‪‬‬

‫طفحبد اٌّ‪ٛ‬لغ ِّب ‪٠‬غ‪ ًٙ‬اٌزفبػً ث‪ ٓ١‬اٌّ‪ٛ‬لغ ‪ٚ‬طبحجٗ ِٓ ع‪ٙ‬خ ‪ٚ‬اٌض‪ٚ‬اس ِٓ ع‪ٙ‬خ أخش‪.ٜ‬‬

‫*‪*182‬‬
 Form Element
 HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as
name, email address, credit card, etc

‫ أصٕبء‬، ‫ً اٌّضبي‬١‫ عج‬ٍٝ‫ ػ‬.‫لغ‬ٌّٛ‫بٔبد ِٓ صائش ا‬١‫ذ عّغ ثؼغ اٌج‬٠‫ ػٕذِب رش‬، ‫ثخ‬ٍٛ‫ ِط‬HTML ‫ّٔبرط‬ 

‫ثطبلخ‬ٚ ٟٔٚ‫ذ اإلٌىزش‬٠‫اْ اٌجش‬ٕٛ‫ػ‬ٚ ُ‫ِبد ِضً االع‬ٍٛ‫ عّغ ِؼ‬ٟ‫ لذ رشغت ف‬، َ‫ً اٌّغزخذ‬١‫رغغ‬

‫ش٘ب‬١‫ غ‬ٚ ْ‫االئزّب‬

 The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.

‫ِشثؼبد‬ٚ ‫خ‬١‫ي إٌظ‬ٛ‫ اٌحم‬:ً‫ ِض‬، ‫اع ِخزٍفخ ِٓ ػٕبطش اإلدخبي‬ٛٔ‫خ أل‬٠ٚ‫> ػجبسح ػٓ حب‬form< ‫ػٕظش‬ 

.‫ش٘ب‬١‫غ‬ٚ ‫ أصساس اإلسعبي‬ٚ ‫بس‬١‫ أصساس االخز‬ٚ ‫بس‬١‫االخز‬

*183*
 The Action Attribute

 The action to be performed when the form is submitted.

 Usually, the form data is sent to a file on the server when the user clicks on the
submit button.

ٚ‫اء وبٔذ طفحخ ا‬ٛ‫خ ع‬١ٌ‫رط ا‬ٌّٕٛ‫بٔبد ا‬١‫زُ اسعبي ث‬٠ ‫ف‬ٛ‫ ع‬ٞ‫اْ اٌز‬ٕٛ‫ذ اٌؼ‬٠‫ب رحذ‬ٌٙ‫زُ ِٓ خال‬٠ ‫خ‬١‫خبط‬ 

ً١ّ٠‫ا‬

.‫ صس اإلسعبي‬ٍٝ‫ٕمش اٌّغزخذَ ػ‬٠ ‫ اٌخبدَ ػٕذِب‬ٍٝ‫ ٍِف ػ‬ٌٝ‫رط إ‬ٌّٕٛ‫بٔبد ا‬١‫زُ إسعبي ث‬٠ ، ‫ػبدح‬ 

‫ ٘زا اٌٍّف‬ٞٛ‫حز‬٠ .“Page12.PHP” ّٝ‫غ‬٠ ‫ ٍِف‬ٌٝ‫رط إ‬ٌّٕٛ‫بٔبد ا‬١‫زُ إسعبي ث‬٠ ، ‫ً اٌّضبي‬١‫ عج‬ٍٝ‫ػ‬ 

:‫رط‬ٌّٕٛ‫بٔبد ا‬١‫ؼبٌظ ث‬٠ َ‫ ِٓ عبٔت اٌخبد‬ٟ‫ ثشٔبِظ ٔظ‬ٍٝ‫ػ‬

*184*
 ‫‪The Action Attribute‬‬

‫رحذد اٌؼٕ‪ٛ‬اْ اٌز‪ ٞ‬ع‪١‬زُ إسعبي ث‪١‬بٔبد إٌّ‪ٛ‬رط إٌ‪ٌ ٗ١‬ززُ ِؼبٌغز‪ٙ‬ب ثبٌظ‪ٛ‬سح اٌّطٍ‪ٛ‬ثخ‪.‬‬ ‫‪‬‬

‫‪ٚ‬ػبدح ‪٠‬ى‪٘ ْٛ‬زا ػٕ‪ٛ‬أبً ٌجش‪٠‬ذ إٌىزش‪ Email ٟٔٚ‬ع‪ٛ‬ف ‪٠‬زُ إسعبي ث‪١‬بٔبد إٌّ‪ٛ‬رط إٌ‪.ٗ١‬‬ ‫‪‬‬

‫ح‪١‬ش ‪٠‬غزمجً ٘زٖ اٌج‪١‬بٔبد ‪٠ٚ‬ؼبٌغ‪ٙ‬ب حغت اٌزؼٍ‪ّ١‬بد اٌّ‪ٛ‬ع‪ٛ‬دح ف‪ ٗ١‬وأْ ‪٠‬ؼ‪١‬ف‪ٙ‬ب ِضال ً إٌ‪ ٝ‬إحذ‪ٜ‬‬ ‫‪‬‬

‫اٌظفحبد (وّب ‪٠‬حذس ػبدح ف‪ ٟ‬دفبرش اٌض‪ٚ‬اس) أ‪٠ ٚ‬زحمك ِٓ طحخ ثؼغ اٌحم‪ٛ‬ي اٌّذخٍخ ‪ِٚ‬طبثمز‪ٙ‬ب‬

‫ٌّؼب‪١٠‬ش ِؼ‪ٕ١‬خ‬

‫>‪<FORM ACTION="mailto:[email protected]" > ... </FORM‬‬

‫*‪*185‬‬
 ‫‪The Method Attribute‬‬

‫خبط‪١‬خ ‪٠‬زُ ِٓ خالٌ‪ٙ‬ب رحذ‪٠‬ذ اٌطش‪٠‬مخ اٌز‪ ٟ‬ع‪١‬زُ ث‪ٙ‬ب اسعبي اٌج‪١‬بٔبد ػٍ‪ ٝ‬اعبط اٌؼٕ‪ٛ‬اْ اٌز‪ ٞ‬رُ‬ ‫‪‬‬

‫رحذ‪٠‬ذٖ ف‪ ٟ‬خبط‪١‬خ ‪Action‬‬

‫‪ٛ٠ ‬عذ ؽش‪٠‬مز‪ٌ ٓ١‬إلسعبي ‪Post ٚ Get‬‬

‫> “‪<form action="page.php12" method="get‬‬

‫>‪</form‬‬

‫*‪*186‬‬
 Input Element

‫> ثؼذح‬input< ‫ّىٓ ػشع ػٕظش‬٠ .‫رط اعزخذاًِب‬ٌّٕٛ‫ أوضش ػٕبطش ا‬HTML ٟ‫> ف‬input< ‫اٌؼٕظش‬ 

ً ‫ اػزّب‬، <type> ‫خ‬١‫ؽشق ثبعزخذاَ خبط‬

:‫ٕ٘ب ثؼغ األِضٍخ‬ٚ .‫ع‬ٌٕٛ‫ عّخ ا‬ٍٝ‫دا ػ‬

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

*187*
Input Element

*188*
Input Element

*189*
Input Element

*190*
Attributes Of Input Element

*191*
Attributes Of Input Element

*192*
Attributes Of Input Element

*193*
Attributes Of Input Element

*194*
Attributes Of Input Element

*195*
Attributes Of Input Element

*196*
Attributes Of Input Element

*197*
 Select Element

‫بس أوضش ِٓ ػٕظش ِٓ اٌمبئّخ‬١‫غ اخز‬١‫رغزط‬ٚ ‫عُ اٌمبئّخ إٌّغذٌخ‬ٚ ٛ٘ <select>…</select> 

ٌٟ‫< وزب‬option> ُ‫ع‬ٚ ٍٗ‫ٓ ثذاخ‬١ّ‫< الثذ ِٓ اٌزؼ‬select> ُ‫ع‬ٚ ًّ‫ؼ‬٠ ً‫ِٓ اع‬ٚ 

<select>
<option> ‫ي‬ٚ‫< اٌؼٕظش األ‬/option>
<option> ٟٔ‫< اٌؼٕظش اٌضب‬/option>
<option> ‫< اٌؼٕظش اٌضبٌش‬/option>
</select>

*198*
 Select Element

 <Select> Attributes

*199*
 Select Element

 <Option> Attributes

*200*
Select Element

*201*
Select Element

*202*
Select Element

*203*
Select Element

*204*
Select Element

*205*
 ‫‪Optgroup Element‬‬

‫‪<optgroup>…</optgroup> ‬‬

‫‪ٚ‬عُ ‪ٚ‬ظ‪١‬فزٗ عؼً اٌمبئّخ إٌّغذٌخ رح‪ ٞٛ‬ػٍ‪ ٝ‬ػذح ِغّ‪ٛ‬ػبد ‪ٌٚ‬ىً ِغّ‪ٛ‬ػخ ػٕبطش‬ ‫‪‬‬

‫ِخزٍفخ >‪ <option‬رخزٍف ػٓ األخش‪ٜ‬‬

‫خبط‪١‬خ ‪٠ Label‬زُ ِٓ خالٌ‪ٙ‬ب رحذ‪٠‬ذ اعُ ٌىً ِغّ‪ٛ‬ػخ‬ ‫‪‬‬

‫‪‬‬

‫*‪*206‬‬
Optgroup Element

*207*
Optgroup Element

*208*
Optgroup Element

*209*
 ‫‪Textarea Element‬‬

‫> ‪<textarea >…</textarea‬‬

‫ثبعزخذاَ ‪( textarea‬ػٕظش رحىُ ‪٠‬غّح ٌٍّغزخذَ إدخبي ٔض ِزؼذد األعطش) ‪ّ٠ ،‬ىٕه‬ ‫‪‬‬

‫وزبثخ ػذد غ‪١‬ش ِحذ‪ٚ‬د ِٓ األحشف‪ .‬لُ ػبد ًح ثزؼّ‪ ٓ١‬خظبئض اٌظف‪ٛ‬ف ‪ٚ‬األػّذح ٌزحذ‪٠‬ذ حغُ‬

‫ِٕطمخ إٌض‬

‫*‪*210‬‬
Textarea Element

<textarea >…</textarea >

*211*
Textarea Element

<textarea >…</textarea >

*212*
Button Element

*213*
 ‫‪Fieldset Element‬‬

‫‪ٚ <fieldset>…</fieldset> ‬عُ ‪٠‬غزخذَ ٌزشر‪١‬ت اٌؼٕبطش اٌّشزشوخ أ‪ ٚ‬اٌّزشبث‪ٙ‬خ ِضً‬

‫ِؼٍ‪ِٛ‬بد اٌذخ‪ٛ‬ي اعُ اٌّغزخذَ ‪ٚ‬وٍّٗ اٌّش‪ٚ‬س ‪٠ٚ‬زُ رغّ‪١‬خ اٌّغّ‪ٛ‬ػخ ثبعزخذاَ اٌ‪ٛ‬عُ‬

‫>‪<legend‬‬

‫*‪*214‬‬
Fieldset Element

*215*
Form Element

*216*
Form Element

*217*
Form Element

*218*
Web Design - HTML

*219*