html - ksu facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfhtml +لطصملا hyper...
TRANSCRIPT
![Page 1: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/1.jpg)
![Page 2: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/2.jpg)
HTML
HTML
Fonts
ImagesLinks
TABLES
LISTS
FRAMES
FORMS
CSS
JavaScript
JavaScript
ArraysFunction
![Page 3: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/3.jpg)
مقدمة إلى االنترنت
لمحة عن اإلنترنت
Internet "
International network "
PPrroottooccoollss
ملكية الشبكة
تاريخ االنترنت
.
1969 .
1972 Email.
.
Web Wide Word العالمية الويب شبكة
www w3 (web)
Hypertext
HTTPالمصطلح Hyper Text Transfer Protocol
![Page 4: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/4.jpg)
URLالمصطلح Uniform Resource Locator
.
HTMLالمصطلح
Hyper Text Markup Language
خدمات االنترنت
Web
E-Mail Chatting Conferencing Video
FTP NNTP(Network News Transfer Protocol)
Browsing Searching Entertainment
E-commerce Internet Radios
.
mail-Eاإللكتروني البريد
Electronic Mail
FileTransfer Protocol (FTP) نقل الملفات والبرامج
FTP (Upload)
(Download).
![Page 5: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/5.jpg)
Webالويب
Entertainmentالترفيه
Internet Radio Stationsاإلنترنت إذاعات
االتصال باالنترنت :
(Transmission Control Protocol/Internet Protocol)
TCP/IP
.
Modem
.
ISP (Internet Service Provider).
.
العنوان االلكتروني
(Uniform Resource
Locator - URL).
النطاقات
wwwwww..ggooooggllee..ccoomm..ssaa
o www .
o google .
o com
:
![Page 6: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/6.jpg)
edu
gov
com
mil
net
org
sa
:
sa
ae
sd
jo
uk
صفحات الويب HTML
HTTP .
أنواع الصفحات.
HTML. (htm, html)
. (gif, jpeg, png)
. (ram, mid, wav, swf, avi, mpeg, mpg, mpe)
. (txt) ( ASCII)
![Page 7: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/7.jpg)
لغات برمجة اإلنترنت
‘
:
Client Side Programming Languages
) Client Side(
HTML ,Java script ,VBScript
Server Side Programming Languages
ASP(Active Server Pages).
PHP(Personal Home Page).
![Page 8: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/8.jpg)
HTMLأساسيات لغة
HTMLلغة Hyper Text Markup Language
HTMLتاريخ SGML
Standard Generalized Markup Language
بالمراحل التالية HTMLوقد مرت لغة o HTML
o HTML
o HTML2.0HTML
o HTML3.0
o HTML3.2
o HTML4.0
o HTML4.01
HTML5
HTMLخصائص لغة HTML
Notepad
![Page 9: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/9.jpg)
Tags الوسوم األساسية لصفحة الويب
وسم النهاية وسم البداية
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
HTMLالعناصر األساسية في لغة
![Page 10: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/10.jpg)
HtmlHTML/HTML
HEAD
TITLE/TITLE/HEAD
BODY
/BODY
فكرة امج المسنبدأ بتطبيق هذه المعلومات بصورة عمليه؟ قم بفتح برن واكتب ما يلي:
<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
I'm Writing My First Web Page
</BODY>
</HTML>
HTMLhtmhtml
OpenFile
بعض المالحظات عند كتابة صفحات الويب
UPPERCASE
lowercase
![Page 11: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/11.jpg)
<HTML><HEAD><TITLE> This is a Test Web Page
</TITLE></HEAD><BODY>
I'm Writing My First Web Page</BODY></HTML>
أو بالشكل التالي: <HTML>
<HEAD>
<TITLE>
This
is a
Test
Web Page
</TITLE>
</HEAD>
<BODY>
I'm
Writing
My First
Web Page
</BODY>
</HTML>
أو حتى بهذا الشكل: <HTML> <HEAD> <TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
I'm Writing My First Web Page
</BODY>
</HTML>
![Page 12: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/12.jpg)
BR
BR
<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
<BR> I'm Writing My First <BR>
Web Page
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>
I'm <P> Writing My <P>
My First Web Page
</BODY>
</HTML>
Non Breakable Space
![Page 13: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/13.jpg)
إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي:<HTML>
<HEAD>
<TITLE>
This is a Test Web Page
</TITLE></HEAD>
<BODY>
Hello,
I'm Writing
My Ffirst
Web Page
</BODY>
</HTML>
![Page 14: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/14.jpg)
التنسيق
HTMLاأللوان و أنماط الخطوط في لغة
Colorsاأللوان
BODYخصائص الـ
<BODY>
.
<BODY> ...</BODY>
Attribute
<BODY BGCOLOR = "FFFFFF">
...
</BODY>
BGCOLOR <BODY>
FFFFFF
CC
-تالحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:
![Page 15: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/15.jpg)
.
FFFFFF
A,B,C,D,E,F
FF
FF FF
FF
CC
التعامل مع اسم اللون بشكل صريح
![Page 16: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/16.jpg)
<BODY BGCOLOR="#FFFFFF "
BACKGROUND="image path">
.. ………………………..
</BODY>
BACKGROUND
image path
BODYبعض خصائص الوسم
Links
لي: التا لجدولسنوضح الخصائص التي تقوم بالتحكم في ألوان النصوص با
TEXT="#rrggbb"
LINK="#rrggbb"
VLINK="#rrggbb" visited links
ALINK="#rrggbb" active links
![Page 17: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/17.jpg)
نماط الخطوطأ
<B> ... </B>
<STRONG> ... </STRONG>
<B> Bold Text </B> This is Bold Text
<STRONG> Strong Text
</STRONG>
This is Strong
Text
Italic
<I> ... </I>
<EM> ... </EM>
<I> Italic Text </I> This is Italic Text
<EM> Emphasized Text
</EM>
This is Emphasized
Text
Under line
<U> ... </U>
<U> Underlined Text </U> nderlined UThis is
Text
<SUP> ... </SUP>
<SUP> Superscript Text
</SUP> Superscript TextThis is
<SUB> ... </SUB>
<SUB> Subscript Text
</SUB> Subscript TextThis is
![Page 18: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/18.jpg)
<BIG> ... </BIG>
<BIG> Big Text </BIG> This is Big Text
<SMALL> ... </SMALL>
<SMALL> Small Text
</SMALL>
This is Small
Text
<STRIKE> ... </STRIKE>
<S> ... </S>
<del> ... </del>
STRIKE> Striked Text
</STRIKE Striked TextThis is
<S> Striked Text </S> Striked Texthis is T
< del > Striked Text </ del > Striked TextThis is
TeleType
<TT> ... </TT>
<TT> Tele Type Text </TT> This is Tele Type
Text
Monospaced Text
m,i
mi
iiiiiiiiii
mmmmmmmmmm
![Page 19: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/19.jpg)
TT/TT
مثال يجمع بين عدة تنسيقات<B><I><U>
This is a Bold, Italic and Underlined Text
</U> </I> </B>
This is a Bold, Italic and Underlined Text
![Page 20: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/20.jpg)
HTMLفي لغة التنسيق Fontsالخطوط
محتويات المحاضرة
–– FFoonnttss
•• FFoonntt SSiizzee
•• FFoonntt CCoolloorr
•• FFoonntt FFaaccee
••
––
••BBAASSEEFFOONNTT
•• HHRR
•• mmaarrqquueeee
Fontsالخطوط
Times New Roman
/FONTFONT
![Page 21: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/21.jpg)
Face <FONT FACE="Traditional Arabic, Arabic
Transparent,
>"Simplified Arabic
... Text ...
</FONT>
Color
<FONT COLOR="#FF0000">
... Text ...
</FONT>
Size
<FONT SIZE="4">
... Text ...
</FONT>
<FONT SIZE="+4">
... Text ...
</FONT>
![Page 22: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/22.jpg)
+
-
+5 .-
+
FONTأمثلة توضح كيفية استخدام الوسم
<FONT FACE="Traditional Arabic" SIZE="6"
COLOR="#FF0000">
Traditionalخط من نوع
Arabic ولون الخط أحمر 6بحجم
</FONT>
![Page 23: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/23.jpg)
الناتج
<FONT FACE="Times New Roman" SIZE="5"
COLOR="#0000FF">
This font is Times New Roman, Size is 5, Color is Blue
</FONT>
الناتج
This font is Times New Roman, Size is 5, Color is Blue
) (
<font size="7" color="red"> C </font> ustomize your font
الناتج Customize your font
<BASEFONT>الوسم
BODY
FONT
NameFace
مثال<BASEFONT Name="Arial" COLOR="#FF0000"
SIZE="5">
Arial
FontFont
BASEFONT
![Page 24: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/24.jpg)
TextBody
ColorBASEFONT
BASEFONT .
HR> Horizontal Rule(HR)> وسم المسطرة األفقية
SIZE
<HR SIZE="5">
<HR SIZE="1">
<HR SIZE="10">
WIDTH
<HR WIDTH="80%">
<HR WIDTH="400">
<HR SIZE="5" WIDTH="60%">
ALIGN
center, left, right
<HR WIDTH="80%" ALIGN="center">
<HR WIDTH="400" ALIGN="left">
![Page 25: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/25.jpg)
<HR SIZE="5" WIDTH="60%" ALIGN="right">
NOSHADE
NOSHADE
<HR SIZE="5" WIDTH="60%" ALIGN="center"
NOSHADE>
COLOR
Internet Explorer
<HR SIZE="5" WIDTH="60%" ALIGN="center"
COLOR="#FF0000" NOSHADE>
marqueeوسم تحريك النص
mmaarrqquueeee
<< mmaarrqquueeee >>……tteexxtt……<<// mmaarrqquueeee >>
behavior
ssccrroollllaalltteerrnnaattee ,,sslliiddee,,
direction
uupp,, ddoowwnnrriigghhtt ,, lleefftt,,
scrolldelay
scrollamount
loop
![Page 26: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/26.jpg)
-مثال:
<<mmaarrqquueeee bbeehhaavviioorr ==""ssccrroollll"" ddiirreeccttiioonn ==““lleefftt"" lloooopp==““33""
bbggccoolloorr==""##00006666CCCC"">>
IInn TThhee NNaammee OOff AAllllaahh
<<//mmaarrqquueeee>>
![Page 27: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/27.jpg)
Links والروابط Imagesالصور
Imagesالصور
––
––
–– IIMMGG
SSRRCC
––
–– jjppgg ggiiff ppnngg
أمثلة <img src="win.gif">
HHTTMMLL
<img src="images/win.gif">
HHTTMMLL
iimmaaggeess
<img src="http://www.images.com/win.gif">
خصائص الصور IImmaaggee HHeeiigghhtt aanndd WWiiddtthh
aa hheeiigghhtt
b) WWiiddtthh
-مثال: <img src="sunset.jpg" height="50" width="100">
AALLIIGGNN
![Page 28: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/28.jpg)
BOTTOM, TOP, MIDDLE, LEFT, RIGHT
aa
BOTTOM
<IMG SRC="image.jpg" ALIGN="BOTTOM">
b TOP
<IMG SRC="image.jpg" ALIGN="TOP">
cc MIDDLE
<IMG SRC="image.jpg" ALIGN="MIDDLE">
dd LEFT
<IMG SRC="image.jpg" ALIGN="LEFT">
ee RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
![Page 29: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/29.jpg)
VVSSPPAACCEE
مثال:مثال: <<IIMMGG SSRRCC==""iimmaaggee..jjppgg"" AALLIIGGNN==""TTOOPP""
VVSSPPAACCEE==""2200"" >>
HHSSPPAACCEE
مثال:مثال: <<IIMMGG SSRRCC==""iimmaaggee..jjppgg"" AALLIIGGNN==""RRIIGGHHTT"" SSPPAACCEE==""2200"">>
BBOORRDDEERR
مثال:مثال:
<IMG SRC="image.jpg“ BORDER="5">
AALLTT
<<iimmgg ssrrcc==""iimmaaggee11..jjppgg"" aalltt==""wweellccoommee ttoo mmyy wweebb ssiittee "">>
أنوع الصور المستخدمة في صفحات الويب.
GGrraapphhiicc IInntteerrnneett FFoorrmmaatt ((GGIIFF))
JJooiinntt PPhhoottooggrraapphhiicc EExxppeerrttss GGrroouupp ((JJPPEEGG))
PPoorrttaabbllee NNeettwwoorrkk GGrraapphhiiccss ((PPNNGG))
..
![Page 30: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/30.jpg)
Links الروابط
EE--mmaaiill
<A> …………………</A>
Anchor
ية الخاصHREF (Reference Hypertext ) UURRLL
HHRREEFF::
<<aa hhrreeff=="" UURRLL "" >>
<<//aa>>
![Page 31: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/31.jpg)
انواع االرتباطات
http://www.ksu.edu.sa
<A HREF=" http://www.ksu.edu.sa ">
King Saud University
</A>
King Saud University
.
</A ... >
<A>
<A href="http:\\www.ksu.edu.sa">
<img src="Image Path">
</A>
Image Path .
:
/AA
![Page 32: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/32.jpg)
HTML
HREF
a HTML
index.html
> /AA HREF="index.html">Main Page<<
Main Page
b
<a
href="http://faculty.ksu.edu.sa/images/logo.gif">
</a>
MAILTOHREF
EMAIL .
<A HREF="MAILTO:[email protected]">
My Email
> /A<
Email My
الخاصيةtarget
__sseellff
_blank
<<aa hhrreeff==""hhttttpp::////wwwwww..ttccrr..eedduu..ssaa"" ttaarrggeett==""__sseellff "">>
TTeeaacchheerrss CCoolllleeggee
<<//aa>>
![Page 33: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/33.jpg)
والفيديو الصوت
Voice & Video
لصفحات الويب والفيديو الصوت تضمين
–– eemmbbeedd
..
–– ssrrcc
<embed src="alarifi.wmv " >
htmlيوضح كيفية ادراج الفيديو في صفحة مثال
<html dir ="rtl" >
<head>
<title> </title>
</head>
<body>
<embed src=" Wildlife.wmv">
<p>
</p>
</body>
</html> بطريقة العرض المتعلقة Embed الوسم خصائص
wwiiddtthh
hheeiigghhtt
hhiiddddeenn
![Page 34: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/34.jpg)
يوضح كيفية استخدام خصائص العرض للفيديو -مثال:<html dir ="rtl" >
<head>
<title> </title>
</head>
<body>
<embed src=" Wildlife.wmv " width="300" height="350"
>
<p>
</p>
</body>
</html>
بعمل الفيديو المتعلقة Embed الوسم خصائص
aauuttoossttaarrtt
lloooopp
vvoolluummee
يوضح كيفية استخدام خصائص عمل الفيديو -مثال:
<html dir ="rtl" >
<head>
<title> </title>
</head>
![Page 35: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/35.jpg)
<body>
<embed src=" Wildlife.wmv " autostart="true"
volume="50">
<p> </p>
</body>
</html>
يوضح كيفية تكرار تشغيل الفيديو -مثال:
<html dir ="rtl">
<head>
<title> </title>
</head>
<body>
<embed src=" Wildlife.wmv " loop="true">
<pre>
Loop
</pre>
</body>
</html>
<pre>
HTML
br
ة الفالشإضاف–– ..
مثال<embed src="flashname.swf" width="360" height="135">
![Page 36: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/36.jpg)
يوضح كيفية تشغيل الفالش -مثال:
<html dir ="rtl">
<head>
<title> </title>
</head>
<body>
<embed src="computer-intro_exam.swf" height="90%"
width="80%">
</body>
</html>
إضافة الصوت كخلفية <bgsound> الوسم
lloooopp
<bgsound src="Al-Fatihah.mp3" loop="2">
<object>اضافة ملفات الوسائط باستخدام الوسم
–– ddaattaa
–– ttyyppee
""iimmaaggee//jjppeegg"",,""iimmaaggee//ggiiff""
""aauuddiioo//wwaavv"",,""aauuddiioo//bbaassiicc""
""vviiddeeoo//mmppeegg"",,""vviiddeeoo//qquuiicckkttiimmee""..
–– aalliiggnn
![Page 37: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/37.jpg)
"" "" "" "" "" "" "" "" "" ""
–– wwiiddtthh
–– hheeiigghhtt
–– hhssppaaccee
–– vvssppaaccee
object يوضح كيفية استخدام الوسم -مثال:<html dir ="rtl" >
<body>
<html>
<body>
<object data=" computer-intro_exam.swf " width="90%"
height="90%" >
</object>
</body>
</html>
![Page 38: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/38.jpg)
الجداول
Tables
HHTTMMLL
الوسوم األساسية الخاصة بالجداول
<TABLE>...</TABLE>
<TR>...</TR>
<TD> Cell Data </TD>
انشاء جدول مكون من ثالثة صفوف وعمودين -مثال:<TABLE>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
طريقة التعامل مع الجداول
![Page 39: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/39.jpg)
..
..
)على <TABLE>...</TABLE> الخصائص التي تستخدم مع الوسوم .1 مستوى الجدول ككل(
BORDER <TABLE BORDER="5">
<TABLE BORDER="0">
WIDTH <TABLE WIDTH="600">
<TABLE WIDTH="80%">
HEIGHT <TABLE HEIGHT="500">
<TABLE HEIGHT="100%">
CELLSPACING <TABLE CELLSPACING="10">
CELLPADDING
<TABLE CELLPADDING="10">
ALIGN right ,left ,center
![Page 40: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/40.jpg)
<TABLE ALIGN="Left">
<TABLE ALIGN="Right">
BGCOLOR <TABLE BGCOLOR="#00FFFF">
)على مستوى الصف( <TR>...</TR> الخصائص التي تستخدم مع الوسوم .2
ALIGN Right, Left, CenterLeft
VALIGN Middle, Bottom, Top
BGCOLOR TABLE
... مثال يوضح استخدام خصائص الوسوم
<TABLE BORDER="5" HEIGHT="300">
<TR ALIGN="Left " BGCOLOR="#808080" >
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR ALIGN="Right " BGCOLOR="#C0C0C0" >
<TD> Data </TD>
<TD> Data </TD>
</TR>
![Page 41: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/41.jpg)
<TR ALIGN="Center">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>
على مستوى ( <TD> …. </TD>الخصائص التي تستخدم مع الوسوم .3 ) الخلية
ALIGN Left, Center, Right
VALIGN Top, Middle, Bottom
WIDTH
HEIGHT
BGCOLOR
COLSPAN <TD COLSPAN="n">
n
ROWSPAN <TD ROWSPAN="n">
n
![Page 42: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/42.jpg)
BGCOLOR
BODY
WIDTH, HEIGHT
TABLE
<TABLE BORDER="5">
<TR>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
</TABLE>
![Page 43: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/43.jpg)
CCOOLLSSPPAANN,, RROOWWSSPPAANN
واالن نعيد كتابة شفرة الجدول السابق مع خاصيتي الدمج
<TABLE BORDER="5">
<TR>
<TD COLSPAN="2"> Data </TD>
</TR>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD COLSPAN="2"> Data </TD>
</TR>
</TABLE>
مثال آخر: لنقم بدمج الخاليا الموجودة في العمود األول
<TABLE BORDER="5">
<TR>
<TD ROWSPAN="3"> Data </TD>
<TD> Data </TD>
</TR>
<TR>
<TD> Data </TD>
</TR>
![Page 44: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/44.jpg)
<TR>
<TD> Data </TD>
</TR>
</TABLE>
CCAAPPTTIIOONNCCAAPPTTIIOONN
TTAABBLLEE
مثاًل: <TABLE BORDER="5">
<CAPTION> Table Caption </CAPTION>
![Page 45: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/45.jpg)
القوائم
Lists
HHTTMMLL
OOrrddeerreedd LLiissttss
UUnnoorrddeerreedd LLiissttss
<<OOLL>> ...... <<//OOLL>>
<<UULL>> ...... <<//UULL>>
LLII
LLiisstt IItteemm
مثال علي القوائم المتسلسلة
<html dir="rtl">
<body>
<OL>
<LI>
<LI>
<LI>
<LI>
<LI>
</OL>
</body>
![Page 46: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/46.jpg)
</html>
مثال علي القوائم غير المتسلسلة )غير المرتبة( <html dir="rtl">
<body>
<UL>
<LI>
<LI>
<LI>
<LI>
< UL>
</body>
</html>
TTYYPPEE
UULLOOLL
LLII
AAaaIIii
<OL
TYPE="A">
<OL
TYPE="a">
<OL
TYPE="I">
<OL
TYPE="i">
<UL
TYPE="circle">
<UL
TYPE="square">
A
B
C
D
E
a
b
c
d
e
I
II
III
IV
V
i
ii
iii
iv
v
o
o
o
o
![Page 47: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/47.jpg)
SSttaarrtt
<<OOLL SSTTAARRTT==""55"">>
//UULLUULL
<DIR> ... </DIR>
<MENU> ... </MENU>
مثال علي القوائم غير المتسلسلة )غير المرتبة(
<html dir="rtl">
<body>
<DIR>
<LI>
<LI>
<LI>
</DIR>
</body>
</html>
DDeeffiinniittiioonn LLiissttss
//DDLLDDLL
DDTT
DDDD
![Page 48: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/48.jpg)
مثال علي قوائم التعريف
<html >
<body>
<DL>
<DT>HTML <DD>Hyper Text Markup Language
<DT>WWW <DD>World Wide Web
<DT>FTP <DD>File Transport Protocol
</DL>
</body>
</html>
-والنتيجة هي :HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transport Protocol
( Headingsالعناوين )
HH11 HH66
مثال
<H1>Heading 1</H1> Heading 1
<H2>Heading 2</H2> Heading 2
<H3>Heading 3</H3> Heading 3
![Page 49: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/49.jpg)
<H4>Heading 4</H4> Heading 4
<H5>Heading 5</H5> Heading 5
<H6>Heading 6</H6> Heading 6
.
مثال علي العناوين
<html >
<body>
<html >
<body>
<DL>
<DT><H1>HTML</H1> <DD><H3>Hyper Text Markup
Language</H3>
<DT><H1>WWW</H1> <DD><H3>World Wide
Web</H3>
<DT><H1>FTP</H1> <DD><H3>File Transport
Protocol</H3>
</DL>
</body>
</html>
-والنتيجة هي :
HTML
![Page 50: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/50.jpg)
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transport Protocol
![Page 51: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/51.jpg)
االطارات
Frames
––
––
ffrraammee11..hhttmmll,, ffrraammee22..hhttmmll,, ffrraammee33..hhttmmll ,, ffrraammee44..hhttmmll,,
ffrraammee55..hhttmmll
––
<<FFRRAAMMEESSEETT>> ......
<<//FFRRAAMMEESSEETT>>
<<BBOODDYY>> ...... <<//BBOODDYY>>
BODY
<HTML>
<HEAD>
<TITLE>Master File</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
FRAMESETخصائص الوسم COLS
![Page 52: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/52.jpg)
لخاصية :امثلة توضح هذه ا
<FRAMESET
COLS="50%,50%">
</FRAMESET>
<FRAMESET
COLS="20%,50%,30%">
</FRAMESET>
<FRAMESET
COLS="200,300,*">
</FRAMESET>
<FRAMESET
COLS="200,*,15%,20%">
</FRAMESET>
<FRAMESET
COLS="150,*,2*">
</FRAMESET>
ROWS
![Page 53: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/53.jpg)
ية :امثلة توضح هذه الخاص
<FRAMESET
ROWS="50%,50%">
</FRAMESET>
<FRAMESET
ROWS="20%,50%,30%">
</FRAMESET>
<FRAMESET
ROWS="50,120,*">
</FRAMESET>
<FRAMESET
ROWS="50,*,15%,20%">
</FRAMESET>
<FRAMESET COLS="*,2*">
</FRAMESET>
<FRAME>الوسم <IMG>
<FRAMESET>SRC
![Page 54: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/54.jpg)
االن سنقوم بإتمام الشيفرة لبعض األمثلة المذكورة أعاله.المثال األول:
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
المثال الثاني:
<FRAMESET COLS="200,400,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
ثال الثالث: الم <FRAMESET ROWS="50,*,15%,20%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
المثال الرابع: <FRAMESET COLS="*,2*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
<FRAME
SRC><IMG SRC>
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
![Page 55: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/55.jpg)
<FRAME SRC="Jellyfish.jpg">
</FRAMESET>
كيفية تقسيم الصفحة الى اطارات افقية وعمودية معًا
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
HTML
<FRAMESET>
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET COLS="200,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
</FRAMESET>
![Page 56: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/56.jpg)
<FRAMESET>خصائص اضافية للوسم
<FRAMESET ROWS="50,*,15%,20%"
FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
BORDER
BORDER="n"
BORDERCOLOR
BORDERCOLOR="rrggbb"
FRAMESPACING
FRAMESPACING="n"
<FRAME>خصائص الوسم
MARGINHEIGHT
MARGINHEIGHT="n"
![Page 57: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/57.jpg)
MARGINWIDTH
MARGINWIDTH="n"
SCROLLING
yesnoauto
Windows
SCROLLING="yes"
SCROLLING="no"
SCROLLING="auto"
NORESIZE
>frame<امثلة عل خصائص الوسم
<FRAMESET COLS="50%,50%">
<FRAME SRC="Jellyfish.jpg"
MARGINHEIGHT="40">
<FRAME SRC="frame2.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC ="Jellyfish.jpg"
MARGINHEIGHT="40" MARGINWIDTH="30">
<FRAME SRC="frame2.html">
</FRAMESET>
![Page 58: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/58.jpg)
<FRAMESET COLS="50%,50%">
<FRAME SRC ="Jellyfish.jpg"
MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes">
<FRAME SRC="frame2.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC ="Jellyfish.jpg"
MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes" NORESIZE>
<FRAME SRC="frame2.html">
</FRAMESET>
<NOFRAMES> ... </NOFRAMES>الوسم
Netscape, MS
Explorer
<HTML>
<HEAD>
<TITLE>Main File</TITLE>
</HEAD>
<FRAMESET ROWS="50,*,15%,20%"
FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
![Page 59: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/59.jpg)
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>
</HTML>
<frame>للوسم nameالخاصية FRAME
قبل تطبيق هذه الخاصية نستعرض شفرات الملفات السابقة التى قمنا بإنشائها وهي كما يلي
شفرة الملف الرئيسي الذي أسميته <html >
<head>
<title>Master File</title>
</head>
<frameset rows="40%,30%,30%" frameborder="1"
border="5"
bordercolor="green" >
<frame src="frame1.html" >
<frameset cols="25%,25%" frameborder="1">
<frame src="frame2.html" SCROLLING="yes" >
<frame src="frame3.html">
</frameset>
<frameset cols="25%,25%" frameborder="1">
![Page 60: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/60.jpg)
<frame src="frame4.html" >
<frame src="frame5.html">
</frameset>
</frameset>
</html>
شفرة الملف <html dir="rtl" >
<head>
<title> </title>
</head>
<body>
<p align="center">
<b>
<font color="blue" size="6">
</font>
</b>
</p>
<body>
</html>
شفرة الملف <html dir="rtl">
<head>
<title> </title>
</head>
<body bgcolor="aqua">
<basefont size="5" >
<marquee behavior ="scroll" direction ="right" loop="5"
bgcolor="sky blue">
</marquee>
<pre>
![Page 61: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/61.jpg)
<font face="Traditional Arabic" size="5" >
:-
</font>
</pre>
</body>
</html>
شفرة الملف <html dir="rtl">
<head>
<title> </title>
</head>
<body bgcolor="aqua">
<basefont size="5" >
<b>
<font face="Andalus" size="6" >
<center>
img
<br>
<img src="Jellyfish.jpg" border="2" height="50%"
width="40%">
</center>
</font>
</b>
</body>
</html>
![Page 62: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/62.jpg)
شفرة الملف <html dir="rtl">
<head>
<title> </title>
</head>
<body >
<font face="Simple Indust Shaded" size="6" color="red">
<b>
<p align="center">
<u>
</u>
</p>
</font>
<font face="Traditional Arabic" size="5" color="blue">
<ol>
<li>
<font color="red">
<ol type="a">
<li>
<li>
<li>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<font color="green">
<ol type="circle">
![Page 63: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/63.jpg)
<li>
<li>
</ol>
</font>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<li>
</ol>
</font>
<li>
<font color="red">
<ol type="a">
<li>
<li>
<li>
</ol>
</font>
</ol>
</font>
</b>
![Page 64: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/64.jpg)
</body>
</html>
شيفرة الملف الذي يحتوي على الوصالت التشعبية والذي أسميته
<html>
<body>
<table border="10" align="center" bgcolor="white"
width=500
bordercolor="#3574EC">
<tr height=60 align="CENTER" valign="middle"
bgcolor=#56A5EC >
<td bgcolor="white" align="CENTER" valign="middle"
colspan="3">
<font face="Segoe Print" color=black size=4><b>
</b></font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td>
<font face="Traditional Arabic"color="black" size="5">
<a href="frame2.html" >
</a>
</font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
![Page 65: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/65.jpg)
<a href="frame3.html" >
</a>
</font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
<a href="frame4.html">
</a>
</font>
</td>
</tr>
</table>
</body>
</html>
–– ffrraammee11..hhttmmll
–– NNAAMMEE
<<AA< ... >< ... >//AA>>
TTAARRGGEETT
![Page 66: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/66.jpg)
–– NNAAMMEE
mmaaiinnwwiinnddooww
هي: إذن تصبح شفرة الملف األساسي <html >
<head>
<title>Master File</title>
</head>
<frameset rows="40%,30%,30%" frameborder="1"
border="5"
bordercolor="green" >
<frame src="frame1.html" name="mainwindow">
<frameset cols="25%,25%" frameborder="1">
<frame src="frame2.html" SCROLLING="yes" >
<frame src="frame3.html">
</frameset>
<frameset cols="25%,25%" frameborder="1">
<frame src="frame4.html" >
<frame src="frame5.html">
</frameset>
</frameset>
</html>
المرحلة االخيرة
TARGET
frame5.html
![Page 67: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/67.jpg)
<html>
<body>
<table border="10" align="center" bgcolor="white"
width=500
bordercolor="#3574EC">
<tr height=60 align="CENTER" valign="middle"
bgcolor=#56A5EC >
<td bgcolor="white" align="CENTER" valign="middle"
colspan="3">
<font face="Segoe Print" color=black size=4><b>
</b></font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td>
<font face="Traditional Arabic"color="black" size="5">
<a href="frame2.html" target="mainwindow">
</a>
</font>
</td>
</tr>
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
<a href="frame3.html" target="mainwindow">
</a>
</font>
</td>
</tr>
![Page 68: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/68.jpg)
<tr height=30 align="right" valign="middle"
bgcolor=#56A5EC >
<td >
<font face="Traditional Arabic"color="black" size="5">
<a href="frame4.html" target="mainwindow">
</a>
</font>
</td>
</tr>
</table>
</body>
</html>
![Page 69: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/69.jpg)
النماذج
FROMS
HTML
––
––
––
––
––
JavaScript
ادراج النماذج في صفحات الويب يتم باستخدام الوسوم <FORM /FORM>
FORMخصائص الوسم :
ACTION
CGIServer
<FORM ACTION="mailto:[email protected]">
...
![Page 70: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/70.jpg)
</FORM>
<FORM ACTION="name_and_address_of_CGI_script">
...
</FORM>
CGI Common Gateway Interface
.
METHOD
ACTION
a GETServer
b Post
<FORM ACTION="mailto:[email protected]"
METHOD="post">
...
</FORM>
<FORM ACTION="name_and_address_of_CGI_script"
METHOD="get">
...
</FORM>
a application/x-www-form-urlencoded
b text/plain
![Page 71: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/71.jpg)
MIMEail Mnternet Ipurpose -ultiM
xtentionsE
أشكال البيانات
INPUT
inputخصائص الوسم
<input type="text">
<input
type="password">
<input type="hidden">
<input type="radio">
<input
type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
![Page 72: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/72.jpg)
<FORM >
Please enter your address
<INPUT TYPE="text" NAME="address">
</FORM>
Please enter your address
NAME
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address" VALUE="
Riyadh, Saudi Arabia">
</FORM>
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address" VALUE="
Riyadh, Saudi Arabia" SIZE="40">
</FORM>
size
![Page 73: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/73.jpg)
.
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address" VALUE="
Riyadh, Saudi Arabia" SIZE="40"
MAXLENGTH="30">
</FORM>
passwordالحقل
text
******
<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password"
VALUE="" SIZE="40" MAXLENGTH="30">
</FORM>
hiddenالحقل
والمثال التالي يوضح الحقل المخفي<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
![Page 74: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/74.jpg)
<INPUT TYPE="hidden" NAME="my forms"
VALUE="form1">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password"
VALUE="" SIZE="40" MAXLENGTH="30">
</FORM>
تي أطرح لك مثااًل أو حالة قد تواجهك ولكي أجيب على هذا السؤال دع كمصمم صفحات ويب...
في النموذج األول ...<INPUT TYPE="hidden" NAME="my forms"
VALUE="form1">
في النموذج الثاني ...<INPUT TYPE="hidden" NAME="my forms" VALUE="
form2">
في النموذج الثالث ...<INPUT TYPE="hidden" NAME="my forms" VALUE="
form3">
![Page 75: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/75.jpg)
my forms=form1 my forms=form2 my forms=form3
<FORM ...>
<TABLE BORDER="0">
<TR>
<TD>Please enter your name : </TD>
<TD>
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
</TD></TR>
<TR>
<TD>Please enter your password :</TD>
<TD>
<INPUT TYPE="password" NAME="the password"
VALUE="" SIZE="40" MAXLENGTH="30">
</TD></TR>
</TABLE>
</FORM>
الحقول الخاصة باالختيار من متعدد
Radioالنوع االول زر الخيار
-مثال :
Internet Explorer 5.0
Internet Explorer 6.0
Internet Explorer 7.0
Internet Explorer 8.0
![Page 76: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/76.jpg)
:
<FORM>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
</FORM>
:
NAME
browser
<FORM>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
</FORM>
:
<FORM>
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 5.0 <BR>
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 6.0 <BR>
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 7.0 <BR>
![Page 77: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/77.jpg)
<INPUT TYPE="radio" NAME="browser" > Internet
Explorer 8.0 <BR>
</FORM>
CHECKBOXالنوع الثاني مربع االختيار
CHECKBOXRADIORADIO
checkboxTYPE [TYPE="checkbox"]
NAME
-مثال :
<FORM>
<INPUT TYPE="checkbox" NAME="speed" >
<BR>
<INPUT TYPE="checkbox" NAME="thickness " >
<BR>
<INPUT TYPE="checkbox" NAME="non flexibility " >
<BR>
<INPUT TYPE="checkbox" NAME="accuracy " >
![Page 78: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/78.jpg)
<BR>
</FORM>
Radio CheckBox
RADIOCHECKBOX
RADIOCHECKBOX
.
النوع الثالث قوائم االختيارINPUT
<SELECT>
<OPTION>
<OPTION>
<OPTION>
.....
.....
</SELECT>
SELECTSELECT
OPTION
SELECT
NAMESIZE
![Page 79: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/79.jpg)
-مثال :
<FORM>
Department:
<SELECT NAME="browser" SIZE="1">
<OPTION> Computer
<OPTION> Mathematics
<OPTION> Science
<OPTION> English
</SELECT>
</FORM>
MULTIPLE
SIZE
<FORM>
Department:
<br>
<SELECT NAME="browser" SIZE="4" MULTIPLE >
<OPTION> Computer
<OPTION> Mathematics
<OPTION> Science
<OPTION> English
</SELECT>
</FORM>
)صندوق الرسائل( TEXTAREA الحقل
![Page 80: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/80.jpg)
<TEXTAREA> ... </TEXTAREA>
ومن خصائصه NAME
<TEXTAREA> ... </TEXTAREA>
<TEXTAREA NAME="comments">
Hello, please write your comments here :-)
</TEXTAREA>
a COLS
b ROWS
<TEXTAREA NAME="comments" COLS="30"
ROWS="4">
Hello,please write your comments here
</ TEXTAREA >
WRAP
![Page 81: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/81.jpg)
a virtual
<TEXTAREA NAME="comments" COLS="30"
ROWS="6" WRAP="virtual">
</TEXTAREA>
b physical
<TEXTAREA NAME="comments" COLS="30"
ROWS="6" WRAP="physical">
</TEXTAREA>
c off
<TEXTAREA NAME="comments" COLS="30"
ROWS="6" WRAP="off">
</TEXTAREA>
Submitالحقل
<INPUT TYPE="submit" VALUE="Press here to send the
form">
Resetل الحق
submit
<INPUT TYPE="reset" VALUE="Forget about it">
buttonالحقل
JavaScript
![Page 82: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/82.jpg)
reset, submit
<INPUT TYPE="button" VALUE="This is a sample
button">
![Page 83: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/83.jpg)
CSSأوراق األنماط المتعاقبة
Cascading Style Sheets
.ھ
:
––
––
––
––
––
––
––
مثالP { color : blue }
![Page 84: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/84.jpg)
يمكن الجمع بين أكثر من محدد وذلك بالفصل بينهما بفاصلةSELECTOR1, SELECTOR2 { property : value }
مثالH1,P { color : blue }
يمكن الجمع بين أكثر من تصريح وذلك بالفصل بينهما بفاصلة منقوطةSELECTOR { property1 : value1 ; property2 : value2 }
مثال: B { color : green ; text-align: center }
األنماط المباشرة .Style
مثال<html>
<body>
<p style="background:blue; color: white; font-size:30
;font-family:Impact" >
King Saud University
</p>
<b style="background: yellow; color: green">
Teachers College
</b>
<br>
<h1 style=" background-image:url(Desert.jpg);
color:green">
Computer Department
</h1>
![Page 85: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/85.jpg)
</body>
</html>
األنماط الداخلية <style></style> .
مثال<html dir rtl >
<head>
<style type text css >
B { background yellow; color green}
A link { color red ; text decoration none }
UL { margin right 75px ; color #ff0000 }
UL UL { margin right 15px ; color #0000ff }
< style>
< head>
<body>
<b> < b>
<br> <a href http\\www ksu edu sa >
< a> <br>
<ul>
<li>
<li>
<li>
<ul>
<li>
<li>
< ul>
<li>
![Page 86: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/86.jpg)
<li>
< ul>
< body>
< html>
األنماط الخارجية
CSS CSS
.
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
style.css CSS
مثال
css css style.cssالملف االول
em { font-size : 25 ; font-weight : bold }
a:link { color: yellow ; text-decoration: none }
ol{ margin-right: 75px ; color : green }
p{background: blue; color: white}
b{color:aqua;text-decoration: underline}
marquee{background: red; color: yellow}
body{ background-image:url(Desert.jpg);background-
position: center right;
background-repeat: no-repeat}
الملف الثاني <html dir rtl >
<head>
<link rel stylesheet type text css
![Page 87: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/87.jpg)
href style css >
< head>
<body>
<marquee> < marquee>
<br>
<b> < b>
<br>
<a href http \\www ksu edu sa >
< a>
<br>
<p> < p>
< body>
< html>
page1.html
الملف الثالث <html dir rtl >
<head>
<link rel stylesheet type text css
href style css >
< head>
<body>
<em> < em>
<br>
<ol>
<li>
<li>
<li>
![Page 88: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/88.jpg)
< body>
< html>
page2.htmlDesert.jpg
مع الفئة تطبيق class
: H1
:كما يلي<html dir="rtl">
<head>
<style type="text/css">
H1.one {color : green}
H1.two {color : red}
</style>
</head>
<body>
<h1> </h1>
<h1 class="one"> </h1>
<h1 class="two"> </h1>
</body>
</html>
الفئات العامةCSS html
كالمثال التالي<html dir="rtl">
<head>
![Page 89: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/89.jpg)
<style type="text/css">
.bb {color : red}
</style>
</head>
<body>
<b class="bb"> </b>
<br>
<u class="bb"> </u>
</body>
</html>
توريث الخصائص
مثال<html>
<head>
<style type="text/css">
i {color : red}
b {background: yellow}
</style>
</head>
<body>
<i> Cascading <b> Style </b> Sheets </i>
</body>
</html>
![Page 90: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/90.jpg)
JavaScriptمدخل الى لغة
و لغة الفرق بين لغة ––
––
––
––
كتابة برامج لغة JavaScriptHTMLhead
bodyHTML
HTMLJavaScript
HTML
JavaScript
طرق كتابة كود
<script type = " text/javascript">
Write Code Here
</script>
![Page 91: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/91.jpg)
<script language="JavaScript">
Write Code Here
</script>
اوامر لغة أمر الطباعة html
document.write(" ");
( html )
document.write("<h </h1>");
htmlstyle
document.write("<h1 style=\"color : red\">
</h1>");
document.write( sum );
document.write sum );
document.write(": " + sum + " ");
![Page 92: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/92.jpg)
(document.writeln)
(document.write)
(<br >) .
document.write(" Computer <br >Department ");
كتب بها وهي خاصة في كائنات يروج نافذة للمستخدم نحدد نحن ما خ .2 مثل النافذة التالية النوافذ
alert
window.alert("Welcome to My Web Site");
![Page 93: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/93.jpg)
بعض االوامر التي تستخدم داخل كود الـــــ
n\ n \window.alert("hi
");all
t\ t \window.alert("hi
");all
r\ r \window.alert("hi
");all
\\ \\window.alert("hi
");all
"\ " \lert("hi window.a
");all
'\ ' \window.alert("hi
");all
كتب بها " اي نافذة قراءة من لوحة يحدد هو ما يخروج نافذة للمستخدم .3 " وهي خاصة بكائنات النوافذ يحالمفات
( prompt )
window.prompt("Please Write Your Name","Name");
![Page 94: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/94.jpg)
المتغيرات في الــ
JavaScriptvar
مثالvar name ;
( integer Or float )
.
التحويل لألعداد الصحيحة
parseInt ( );
مثالvar number = 55 ;
parseInt (number) ;
التحويل لألعداد ذات االرقام العشرية
parseFloat( );
مثالvar number = 5.4 ;
parseFloat (number) ;
.
مثلةأ االول المثال
<html>
<head><title> Java Script</title>
<script>
var name ;
name = window.prompt ( "Please Write Your Name"," Your
Name");
document.write( " Welcome : " + name ) ;
</script>
![Page 95: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/95.jpg)
</head>
<body> </body>
</html>
المثال الثاني
<html>
<head><title> Java Script</title>
<script type = "text/javascript" >
window.alert( "Welcome");
</script>
</head>
<body></body>
</html>
![Page 96: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/96.jpg)
أنواع المؤثرات في لغة : المؤثرات الحسابية .1
JavaScript
a+b a+b c=a+b
a-b a-b c=a-b
b
a a/b c=a/b
aXb a*b c=a*b
a%b c=a%b
مؤثرات المقارنة .2
TrueFalse
x == y ==
x != y ! =
x > y >
x < y <
![Page 97: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/97.jpg)
x >= y >=
x <= y <=
المؤثرات المنطقية .3
& & and
|| or
! not
مؤثرات التعيين المركبة .4
(=,*=,/=,%=-+=, )
JavaScript
b=b+cb+=c
b=b-cb- =c
b=b*cb*=c
b=b/cb/=c
b=b%cb%=c
مؤثرات التزايد و التناقص .5
++JS : مثال
JS
JS +=1
JS = JS +1
![Page 98: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/98.jpg)
JavaScriptجمل التحكم في لغة
––
––
––
Conditional Statementsالجمل الشرطية
(True
False
انواع الجمل الشرطية
if
if ……. statement
.
صيغتهاif (condition)
statement;
-مثال :
<html dir="rtl">
<head>
<script type ="text/javascript">
var pass_2="omar";
var user_pass;
user_pass = window.prompt(" );
if (pass_2 == user_pass)
document.write (" );
![Page 99: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/99.jpg)
</script> </head>
<body></body>
</html>
if ……. else statement
صيغتهاif(condition)
statement1;
else
statement2;
-مثال :<html dir="rtl">
<head>
<script type ="text/javascript">
var pass_2="omar";
var user_pass;
user_pass = window.prompt(" );
if (pass_2 == user_pass)
document.write (" );
else
document.write (" ");
</script> </head>
<body></body>
</html>
![Page 100: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/100.jpg)
- -
.
.
صيغتهاif (condition1)
statement1;
else if(condition2)
statement2;
else if(condition3)
statement3;
:
else if(condition n)
statement n;
else
statement;
-مثال :
<html dir="rtl">
<head>
<script type = "text/javascript">
var degree;
degree = window.prompt(" ");
if (degree>100 || degree<0 )
document.write(" ") ;
else
{
if (degree>=90)
document.write(" ") ;
![Page 101: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/101.jpg)
else if (degree>=80)
document.write(" ") ;
else if (degree>=70)
document.write(" ") ;
else if (degree>=60)
document.write(" ") ;
else
document.write(" ") ;
}
</script> </head>
<body></body>
</html>
Switch
close condition
الصيغة العامة للجملة :switch(variable)
{
case value 1: statement; break;
case value 2: statement; break;
:
:
case value n: statement; break;
default :statement;
}
}
variable [value1-------
value n]
case
![Page 102: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/102.jpg)
break
default[value1-------value
n]
<html dir="rtl">
<head>
<script type = "text/javascript">
var country ;
country=window.prompt( " ");
switch ( country )
{
case " " :
document.writeln("<h3> </h3>") ;
break ;
case " " :
document.writeln("<h3> </h3>") ;
break;
case " " :
document.writeln("<h3> </h3>") ;
break ;
case " " :
document.writeln("<h3> </h3>") ;
break ;
default :
document.writeln("<h3>
</h3>") ;
}
</script>
</head>
<body></body>
![Page 103: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/103.jpg)
</html>
Iteration Statements الحلقات التكرارية )جمل التكرار(
الحلقات التكراريةانواع
for
صيغتها
for(counter=initial value;condition;step)
condition
Step
10الى 1اكتب برنامج لطباعة االعداد من -مثال :<html dir="rtl">
<head>
<script type = "text/javascript">
document.write(" <br>");
for (var i = 1 ; i <=10; i++ )
document.write(i+"<br>") ;
</script>
</head>
<body></body>
</html>
أي بشكل ( 1الى 10تدريب عدل البرنامج اعاله لطباعة االعداد من )تنازلي
while
صيغتها
while (condition)
{
statement 1 ;
![Page 104: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/104.jpg)
statement n ;
}
10الى 1اكتب برنامج لطباعة االعداد من -مثال :
<html >
<head>
<script type = "text/javascript">
var i = 1 ;
while (i <= 10 )
{
document.write ( i+"<br>") ;
i++ ;
}
</script>
</head>
<body></body>
</html>
do-while
while
do while
صيغتها do
{
statement 1;
statement n ;
![Page 105: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/105.jpg)
} while(condition)
10الى 1كتب برنامج لطباعة االعداد من ا -مثال :
<html >
<head>
<script type = "text/javascript">
var i = 1 ;
do {
document.write( i+"<br>" ) ;
i++ ;
}
while ( i <= 10 )
</script>
</head>
<body></body>
</html>
JavaScriptو htmlمستخدمًا لغتي -:مثال
لي :التا شكلانشي نموذج إلدخال تاريخ الميالد كما بال
علمًا بان 31الى 1ن القيم ميأخذ Day اليوم 12الى 1يأخذ القيم من Month الشهر
2013الى 1960 يأخذ القيم من Year السنة
![Page 106: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/106.jpg)
<html>
<body>
<form>
<table border="1 align="center" bgcolor="aqua">
<tr>
<td ><b>Date of Birth :</b></td>
<td>
Day
<select name="Day" size="1" >
<script language="JavaScript">
for(i=1;i<=31;i++)
document.writeln("<option value=i>" + i +
"</option>");
</script>
</select> ,
Month
<select name="Month" size="1" >
<script language="JavaScript">
for(i=1;i<=12;i++)
document.writeln("<option value=i>" + i +
"</option>");
</script>
</select> ,
Year
<select name="Year" size="1" >
<script language="JavaScript">
for(i=1960;i<=2013;i++)
document.writeln("<option value=i>" + i +
"</option>");
</script>
</td>
</tr>
</table>
</form>
![Page 107: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/107.jpg)
</body>
</html>
Functionsوالدوال Arraysالمصفوفات
Arraysالمصفوفات
االحادية تعريف المصفوفة
var name =new Array(size)
namesize
n n -1
-بناء المصفوفة :
الطريقة األوليvar family = new Array (4)
family [0] = "father"
family [1] = "mother"
family [2] = "brother"
family [3] = "sister"
الطريقة الثانيةVar family = new Array (4)
family = ["father","mother",borther","sister"]
الطريقة الثالثة
![Page 108: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/108.jpg)
var family = new Array ("father", "mother", "borther",
"sister")
-: طباعة عناصر المصفوفة( )document.write
-مثال :
<html>
<head>
<script type="text/javascript">
var family = new Array (4);
family [0] = "father";
family [1] = "mother";
family [2] = "brother";
family [3] = "sister";
for(i=0;i<4;i++)
document.write(family[i]+"<br>");
</script>
</head>
<body>
</body></html>
document.write(family);
من العناصر في مصفوفة ثم طباعتها على nاكتب برنامج إلدخال -مثال : الشاشة
<html>
<head>
<script type="text/javascript">
![Page 109: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/109.jpg)
var i,n;
n=window.prompt(" ");
var x=new Array(n);
for(i=0;i<n;i++)
{
var y=i+1;
x[i]=window.prompt(" "+y);
}
for(i=0;i<n;i++)
document.write("<b>"+x[i]+"</b><br>");
</script>
</head>
<body>
</body>
</html>
الثنائية تعريف المصفوفة
var arr=new Array(4)
var arr =new Array(4)
for (i=0; i <4; i++)
arr [i]=new Array(4)
arr
arr[0] arr [1]
arr[2]
arr[3]
![Page 110: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/110.jpg)
برنامج إلدخال عناصر مصفوفة ثنائية مكونة من اربعة صفوف -مثال :
وأربعة اعمدة ثم طباعتها على شكل المصفوفة الثنائية
<html>
<head>
<script type="text/javascript">
var arr = new Array(4);
var i,j;
document.writeln("<h2> </h2>");
for (var i = 0; i < 4; i++)
{
arr[i] = new Array(4);
for (var j = 0; j < 4; j++)
{
arr[i][j]=window.prompt(" ","");
}
}
for (i=0 ;i< 4;i++)
{
for (j=0 ;j< 4;j++)
document.writeln(arr[i] [j] + " ");
document.writeln("<br>");
}
</script>
</head>
<body>
</body>
arr
arr [0] arr [1]
arr[2]
arr [3]
arr (4) arr (4) arr (4) arr (4)
![Page 111: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/111.jpg)
</html>
-مثال : م واالسم والعنوان من الموظفين تشمل الرق nبرنامج إلدخال بيانات
على شكل جدول والراتب ثم طباعتها
<html dir="rtl">
<head>
<script type="text/javascript">
var i,j,n;
var employee = new Array(n);
n=window.prompt(" ","");
for (var i = 0; i < n; i++)
{
var x=i+1;
window.alert(" "+x);
employee[i] = new Array(4);
for (var j = 0; j < 4; j++)
{
if(j==0)
employee[i][j]=window.prompt(" ","");
else if(j==1)
employee[i][j]=window.prompt(" ","");
else if(j==2)
employee[i][j]=window.prompt(" ","");
else if(j==3)
employee[i][j]=window.prompt(" ","");
}
}
document.write("<table width='50%' bgcolor='green'
border='4'>");
document.write("<tr><td align='center' colspan='4'>
</td></tr>");
![Page 112: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/112.jpg)
document.write("<tr><td > </td><td > </td>");
document.write("<td > </td><td > </td></tr>");
for (i=0 ;i< n;i++)
{
document.write("<tr>");
for (j=0 ;j< 4;j++)
document.write("<td>"+employee[i] [j]+"</td>");
document.write("<tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
Functionsالدوال
الفائدة من استخدام الدوال
الصيغة العامة للدالةfunction function _ name (par1,par2,….)
{
function statements;
return(expression);
}
o function
o : function name
o (par1,par2…
o function statements
![Page 113: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/113.jpg)
o return expression
-مثال :
من قبل دخلينمين برنامج يحتوي على دالة تقوم بإيجاد حاصل جمع عدد المستخدم
<html>
<head>
<script type = "text/javascript">
var x,y,z ;
x=parseInt(window.prompt(" x",""));
y=parseInt(window.prompt(" y",""));
document.write ( x ) ;
document.write ( "<br>" + y ) ;
z = summation ( x , y ) ;
document.write ( " <br> " + z ) ;
function summation ( a , b )
{
var sum = 0 ;
sum= a + b ;
return sum ;
}
</script>
</head>
<body></body>
</html>
-مثال : ا( داخلهبله برنامج يحتوي على دالتين )دالة تقوم باستدعاء دا
![Page 114: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/114.jpg)
لتي تقوم ا خرى اال الدالة االولى تقوم بإدخال عدد ثم استدعاء الدالة بحساب مكعب العدد
<html>
<head>
<script type = "text/javascript">
function output ( )
{
var x,t ;
x=parseInt(window.prompt(" x",""));
t = cube (x) ;
document.writeln ( t ) ;
}
function cube ( y )
{
return y*y*y ;
}
</script>
</head>
<body onload = " output ( ) " ></body>
</html>
onload = " output ( ) "
body output ( )
Java Scriptربط النماذج مع لغة -مثال :
تطبيقي يحتوي على برنامج نموذج بالشكل التالي : .1
![Page 115: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/115.jpg)
هر ندها تظع يقوم المستخدم بتعبئة النموذج و الضغط على زر "اعرض" .2
:لي ما بالشكل التاالبيانات المدخلة في النموذج على جدول ك
بل من ق رفةعلمًا بان البيانات المدخلة في النموذج تقوم دالة مع
المستخدم بتخزينها في الجدول نص البرنامج :
<html dir="rtl">
<head>
<script type="text/javascript">
function information( )
{
var name=info.name.value;
var job=info.job.value;
var add=info.address.value;
var comm=info.comments.value;
document.writeln("<table cellpadding='5' border='1'
width='80%' align='center'");
document.writeln("dir='rtl' bgcolor='sky blue'
bordercolor='red'>");
![Page 116: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/116.jpg)
document.writeln("<caption><h3>
</h3></caption>");
document.writeln("<tr><td width='30'><b>
:</b></td><td>" + name + "</td></tr>");
document.writeln("<tr><td width='30'><b>
:</b></td><td> " + job + "</td></tr>");
document.writeln("<tr><td width='30'><b>
:</b></td><td> " + add + "</td></tr>");
document.writeln("<tr><td width='30'><b>
:</b></td><td> " + comm + "</td></tr>");
document.writeln("</table>");
}
</script>
</head>
<body >
<form name="info" action="">
<table bgcolor="green" border="3" width="50%"
align="center">
<tr>
<td> : </td>
<td><input type="text" name="name" value=""
size="31"></td>
</tr>
<tr>
<td> :</td>
<td> <input type="text" name="address" value=""
size="45"></td>
</tr>
<tr>
<td> :</td>
<td><input type="text" name="job" value=""
size="20"></td>
</tr>
![Page 117: HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper Text Markup Language تنرتنلاا تامدخ Web Conferencing Video Chatting E-Mail](https://reader034.vdocuments.site/reader034/viewer/2022050100/5f3fd07b7e8ad17a000b9cab/html5/thumbnails/117.jpg)
<tr>
<td> :</td>
<td>
<textarea name="comments" rows="4"
cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="show" value=" "
onclick="information( )">
<input type="reset" name="del" value=" " >
</td>
</tr>
</table>
</body>
</html>