HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper...

HTML

HTML

Fonts

ImagesLinks

TABLES

LISTS

FRAMES

FORMS

CSS

JavaScript

JavaScript

ArraysFunction

مقدمة إلى االنترنت

لمحة عن اإلنترنت

Internet "

International network "

PPrroottooccoollss

ملكية الشبكة

تاريخ االنترنت

.

1969 .

1972 Email.

.

Web Wide Word العالمية الويب شبكة

www w3 (web)

Hypertext

HTTPالمصطلح Hyper Text Transfer Protocol

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).

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

:

http://www.google.com.sa/

http://www.google.com.sa/

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)

لغات برمجة اإلنترنت

‘

:

Client Side Programming Languages

) Client Side(

HTML ,Java script ,VBScript

Server Side Programming Languages

ASP(Active Server Pages).

PHP(Personal Home Page).

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

Tags الوسوم األساسية لصفحة الويب

وسم النهاية وسم البداية

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

HTMLالعناصر األساسية في لغة

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

<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>


</TITLE>

</HEAD>

<BODY>

I'm Writing My First Web Page

</BODY>

</HTML>

BR

BR

<HTML>

<HEAD>

<TITLE>


</TITLE>

</HEAD>

<BODY>

<BR> I'm Writing My First <BR>

Web Page

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>


</TITLE>

</HEAD>

<BODY>

I'm <P> Writing My <P>

My First Web Page

</BODY>

</HTML>

Non Breakable Space

إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي:<HTML>

<HEAD>

<TITLE>


</TITLE></HEAD>

<BODY>

Hello,

I'm Writing

My Ffirst

Web Page

</BODY>

</HTML>

التنسيق

HTMLاأللوان و أنماط الخطوط في لغة

Colorsاأللوان

BODYخصائص الـ

<BODY>

.

<BODY> ...</BODY>

Attribute

<BODY BGCOLOR = "FFFFFF">

...

</BODY>

BGCOLOR <BODY>

FFFFFF

CC

-تالحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:

.

FFFFFF

A,B,C,D,E,F

FF

FF FF

FF

CC

التعامل مع اسم اللون بشكل صريح

<BODY BGCOLOR="#FFFFFF "

BACKGROUND="image path">

.. ………………………..

</BODY>

BACKGROUND

image path

BODYبعض خصائص الوسم

Links

لي: التا لجدولسنوضح الخصائص التي تقوم بالتحكم في ألوان النصوص با

TEXT="#rrggbb"

LINK="#rrggbb"

VLINK="#rrggbb" visited links

ALINK="#rrggbb" active links

نماط الخطوطأ

<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

<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

TT/TT

مثال يجمع بين عدة تنسيقات<B><I><U>

This is a Bold, Italic and Underlined Text

</U> </I> </B>

This is a Bold, Italic and Underlined Text

HTMLفي لغة التنسيق Fontsالخطوط

محتويات المحاضرة

–– FFoonnttss

•• FFoonntt SSiizzee

•• FFoonntt CCoolloorr

•• FFoonntt FFaaccee

••

––

••BBAASSEEFFOONNTT

•• HHRR

•• mmaarrqquueeee

Fontsالخطوط

Times New Roman

/FONTFONT

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>

+

-

+5 .-

+

FONTأمثلة توضح كيفية استخدام الوسم

<FONT FACE="Traditional Arabic" SIZE="6"

COLOR="#FF0000">

Traditionalخط من نوع

Arabic ولون الخط أحمر 6بحجم

</FONT>

الناتج

<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

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">

<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

-مثال:

<<mmaarrqquueeee bbeehhaavviioorr ==""ssccrroollll"" ddiirreeccttiioonn ==““lleefftt"" lloooopp==““33""

bbggccoolloorr==""##00006666CCCC"">>

IInn TThhee NNaammee OOff AAllllaahh

<<//mmaarrqquueeee>>

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

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">

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))

..

Links الروابط

EE--mmaaiill

<A> …………………</A>

Anchor

ية الخاصHREF (Reference Hypertext ) UURRLL

HHRREEFF::

<<aa hhrreeff=="" UURRLL "" >>

<<//aa>>

انواع االرتباطات

http://www.ksu.edu.sa

<A HREF=" http://www.ksu.edu.sa ">

King Saud University

</A>


.

</A ... >

<A>

<A href="http:\\www.ksu.edu.sa">

<img src="Image Path">

</A>

Image Path .

:

/AA

http://www.ksu.edu.sa/

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>>

http://www.khayma.com/HPINARABIC/index.html

mailto:[email protected]

والفيديو الصوت

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

يوضح كيفية استخدام خصائص العرض للفيديو -مثال:<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>

<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">

يوضح كيفية تشغيل الفالش -مثال:

<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

"" "" "" "" "" "" "" "" "" ""

–– wwiiddtthh

–– hheeiigghhtt

–– hhssppaaccee

–– vvssppaaccee

object يوضح كيفية استخدام الوسم -مثال:<html dir ="rtl" >

<body>

<html>

<body>

<object data=" computer-intro_exam.swf " width="90%"

height="90%" >

</object>

</body>

</html>

الجداول

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>

طريقة التعامل مع الجداول

..

..

)على <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

<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>

<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

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>

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>

<TR>

<TD> Data </TD>

</TR>

</TABLE>

CCAAPPTTIIOONNCCAAPPTTIIOONN

TTAABBLLEE

مثاًل: <TABLE BORDER="5">

<CAPTION> Table Caption </CAPTION>

القوائم

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>

</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

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

مثال علي قوائم التعريف

<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


WWW

World Wide Web

FTP

File Transport Protocol

( Headingsالعناوين )

HH11 HH66

مثال

<H1>Heading 1</H1> Heading 1






.

مثال علي العناوين

<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


WWW

World Wide Web

FTP

File Transport Protocol

االطارات

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

لخاصية :امثلة توضح هذه ا

<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

ية :امثلة توضح هذه الخاص

<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

االن سنقوم بإتمام الشيفرة لبعض األمثلة المذكورة أعاله.المثال األول:

<FRAMESET COLS="50%,50%">

<FRAME SRC="frame1.html">


</FRAMESET>

المثال الثاني:

<FRAMESET COLS="200,400,*">




</FRAMESET>

ثال الثالث: الم <FRAMESET ROWS="50,*,15%,20%">





</FRAMESET>

المثال الرابع: <FRAMESET COLS="*,2*">



</FRAMESET>

<FRAME

SRC><IMG SRC>



<FRAME SRC="Jellyfish.jpg">

</FRAMESET>

كيفية تقسيم الصفحة الى اطارات افقية وعمودية معًا

<FRAMESET ROWS="100,*">



</FRAMESET>

HTML

<FRAMESET>



<FRAMESET>

</FRAMESET>

</FRAMESET>



<FRAMESET COLS="200,*">



</FRAMESET>

</FRAMESET>

<FRAMESET>خصائص اضافية للوسم

<FRAMESET ROWS="50,*,15%,20%"

FRAMEBORDER="0">





</FRAMESET>

BORDER

BORDER="n"

BORDERCOLOR

BORDERCOLOR="rrggbb"

FRAMESPACING

FRAMESPACING="n"

<FRAME>خصائص الوسم

MARGINHEIGHT

MARGINHEIGHT="n"

MARGINWIDTH

MARGINWIDTH="n"

SCROLLING

yesnoauto

Windows

SCROLLING="yes"

SCROLLING="no"

SCROLLING="auto"

NORESIZE

>frame<امثلة عل خصائص الوسم


<FRAME SRC="Jellyfish.jpg"

MARGINHEIGHT="40">


</FRAMESET>


<FRAME SRC ="Jellyfish.jpg"

MARGINHEIGHT="40" MARGINWIDTH="30">


</FRAMESET>



MARGINHEIGHT="40" MARGINWIDTH="30"

SCROLLING="yes">


</FRAMESET>



MARGINHEIGHT="40" MARGINWIDTH="30"

SCROLLING="yes" NORESIZE>


</FRAMESET>

<NOFRAMES> ... </NOFRAMES>الوسم

Netscape, MS

Explorer

<HTML>

<HEAD>

<TITLE>Main File</TITLE>

</HEAD>

<FRAMESET ROWS="50,*,15%,20%"

FRAMEBORDER="0">





</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>

</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>

<font face="Traditional Arabic" size="5" >

:-

</font>

</pre>

</body>

</html>


<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>


<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">

<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>

</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>


bgcolor=#56A5EC >

<td >


<a href="frame3.html" >

</a>

</font>

</td>

</tr>


bgcolor=#56A5EC >

<td >


<a href="frame4.html">

</a>

</font>

</td>

</tr>

</table>

</body>

</html>

–– ffrraammee11..hhttmmll

–– NNAAMMEE

<<AA< ... >< ... >//AA>>

TTAARRGGEETT

–– 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">


<frame src="frame2.html" SCROLLING="yes" >


</frameset>




</frameset>

</frameset>

</html>

المرحلة االخيرة

TARGET

frame5.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>


bgcolor=#56A5EC >

<td>


<a href="frame2.html" target="mainwindow">

</a>

</font>

</td>

</tr>


bgcolor=#56A5EC >

<td >



</a>

</font>

</td>

</tr>


bgcolor=#56A5EC >

<td >



</a>

</font>

</td>

</tr>

</table>

</body>

</html>

النماذج

FROMS

HTML

––

––

––

––

––

JavaScript

ادراج النماذج في صفحات الويب يتم باستخدام الوسوم <FORM /FORM>

FORMخصائص الوسم :

ACTION

Email

CGIServer

<FORM ACTION="mailto:[email protected]">

...

</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

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">

<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 ...>



Riyadh, Saudi Arabia" SIZE="40">

</FORM>

size

.

<FORM ...>



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="hidden" NAME="my forms"

VALUE="form1">

Please enter your passwod :



</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">

my forms=form1 my forms=form2 my forms=form3

<FORM ...>

<TABLE BORDER="0">

<TR>

<TD>Please enter your name : </TD>

<TD>



</TD></TR>

<TR>

<TD>Please enter your password :</TD>

<TD>



</TD></TR>

</TABLE>

</FORM>

الحقول الخاصة باالختيار من متعدد

Radioالنوع االول زر الخيار

-مثال :

Internet Explorer 5.0




:

<FORM>

<INPUT TYPE="radio"> <BR>




</FORM>

:

NAME

browser

<FORM>

<INPUT TYPE="radio" NAME="browser"> <BR>




</FORM>

:

<FORM>

<INPUT TYPE="radio" NAME="browser" > Internet

Explorer 5.0 <BR>


Explorer 6.0 <BR>


Explorer 7.0 <BR>


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 " >

<BR>

</FORM>

Radio CheckBox

RADIOCHECKBOX

RADIOCHECKBOX

.

النوع الثالث قوائم االختيارINPUT

<SELECT>

<OPTION>

<OPTION>

<OPTION>

.....

.....

</SELECT>

SELECTSELECT

OPTION

SELECT

NAMESIZE

-مثال :

<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 الحقل

<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

a virtual


ROWS="6" WRAP="virtual">

</TEXTAREA>

b physical


ROWS="6" WRAP="physical">

</TEXTAREA>

c off


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

reset, submit

<INPUT TYPE="button" VALUE="This is a sample

button">

CSSأوراق األنماط المتعاقبة

Cascading Style Sheets

.ھ

:

––

––

––

––

––

––

––

مثالP { color : blue }

يمكن الجمع بين أكثر من محدد وذلك بالفصل بينهما بفاصلة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" >


</p>

<b style="background: yellow; color: green">

Teachers College

</b>

<br>

<h1 style=" background-image:url(Desert.jpg);

color:green">

Computer Department

</h1>

</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>

<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

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>

< 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>


.bb {color : red}

</style>

</head>

<body>

<b class="bb"> </b>

<br>

<u class="bb"> </u>

</body>

</html>

توريث الخصائص

مثال<html>

<head>


i {color : red}

b {background: yellow}

</style>

</head>

<body>

<i> Cascading <b> Style </b> Sheets </i>

</body>

</html>

JavaScriptمدخل الى لغة

و لغة الفرق بين لغة ––

––

––

––

كتابة برامج لغة JavaScriptHTMLhead

bodyHTML

HTMLJavaScript

HTML

JavaScript

طرق كتابة كود

<script type = " text/javascript">

Write Code Here

</script>

<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 + " ");

(document.writeln)

(document.write)

(<br >) .

document.write(" Computer <br >Department ");

كتب بها وهي خاصة في كائنات يروج نافذة للمستخدم نحدد نحن ما خ .2 مثل النافذة التالية النوافذ

alert

window.alert("Welcome to My Web Site");

بعض االوامر التي تستخدم داخل كود الـــــ

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");

المتغيرات في الــ

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>

</head>

<body> </body>

</html>

المثال الثاني

<html>

<head><title> Java Script</title>

<script type = "text/javascript" >

window.alert( "Welcome");

</script>

</head>

<body></body>

</html>

أنواع المؤثرات في لغة : المؤثرات الحسابية .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 <

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

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 (" );

</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>

- -

.

.

صيغتها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)


else if (degree>=80)






else


}

</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

break

default[value1-------value

n]

<html dir="rtl">

<head>


var country ;

country=window.prompt( " ");

switch ( country )

{

case " " :

document.writeln("<h3> </h3>") ;

break ;

case " " :


break;

case " " :


break ;

case " " :


break ;

default :

document.writeln("<h3>

</h3>") ;

}

</script>

</head>

<body></body>

</html>

Iteration Statements الحلقات التكرارية )جمل التكرار(

الحلقات التكراريةانواع

for

صيغتها

for(counter=initial value;condition;step)

condition

Step

10الى 1اكتب برنامج لطباعة االعداد من -مثال :<html dir="rtl">

<head>


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 ;

statement n ;

}

10الى 1اكتب برنامج لطباعة االعداد من -مثال :

<html >

<head>


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 ;

} while(condition)

10الى 1كتب برنامج لطباعة االعداد من ا -مثال :

<html >

<head>


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 السنة

<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" >


for(i=1;i<=31;i++)

document.writeln("<option value=i>" + i +

"</option>");

</script>

</select> ,

Month

<select name="Month" size="1" >


for(i=1;i<=12;i++)


"</option>");

</script>

</select> ,

Year

<select name="Year" size="1" >


for(i=1960;i<=2013;i++)


"</option>");

</script>

</td>

</tr>

</table>

</form>

</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"]

الطريقة الثالثة

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>


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]

برنامج إلدخال عناصر مصفوفة ثنائية مكونة من اربعة صفوف -مثال :

وأربعة اعمدة ثم طباعتها على شكل المصفوفة الثنائية

<html>

<head>


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)

</html>

-مثال : م واالسم والعنوان من الموظفين تشمل الرق nبرنامج إلدخال بيانات

على شكل جدول والراتب ثم طباعتها

<html dir="rtl">

<head>


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)


else if(j==2)


else if(j==3)


}

}

document.write("<table width='50%' bgcolor='green'

border='4'>");

document.write("<tr><td align='center' colspan='4'>

</td></tr>");

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

o return expression

-مثال :

من قبل دخلينمين برنامج يحتوي على دالة تقوم بإيجاد حاصل جمع عدد المستخدم

<html>

<head>


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>

-مثال : ا( داخلهبله برنامج يحتوي على دالتين )دالة تقوم باستدعاء دا

لتي تقوم ا خرى اال الدالة االولى تقوم بإدخال عدد ثم استدعاء الدالة بحساب مكعب العدد

<html>

<head>


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

هر ندها تظع يقوم المستخدم بتعبئة النموذج و الضغط على زر "اعرض" .2

:لي ما بالشكل التاالبيانات المدخلة في النموذج على جدول ك

بل من ق رفةعلمًا بان البيانات المدخلة في النموذج تقوم دالة مع

المستخدم بتخزينها في الجدول نص البرنامج :

<html dir="rtl">

<head>


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'>");

document.writeln("<caption><h3>

</h3></caption>");

document.writeln("<tr><td width='30'><b>

:</b></td><td>" + name + "</td></tr>");


:</b></td><td> " + job + "</td></tr>");


:</b></td><td> " + add + "</td></tr>");


:</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>

<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>

Date post:	12-Jul-2020
Category:	Documents
Upload:	others
View:	2 times
Download:	0 times

HTML - KSU Facultyfac.ksu.edu.sa/sites/default/files/hqyb_brmj_lntrnt.pdfHTML +لطصملا Hyper...

Documents