HTML ، CSS و Javascript

HTML، CSS و Javascript کارگاه کامپیوتر گروه 4

Head, Body, Title and Meta Tags

HTML

نمایش متن • <br> • <b> <strong> • <i> <em> • <u> • <super> <sub> • <big> <small> • <strike> • < > • <HR> • <img> • <center> • <H1>,<H2>,<H3>,<H4> • <P>

لیست ها

نام گذاری و ارجاع به نقاط دیگر سند

تعیین قلم <FONT FACE=“Arial" size="4" color="#0033FF">

ارجاع به اسناد دیگر • URL سند را به href نسبت می دهیم: • پست الکترونیکی: <ahref="http://www.ComputersofTomorrow.com"> <A HREF= "mailto:faghih@ce.sharif.edu?subject= CW-Assignment"> Send your assignment. </A>

درج تصویر <img src="mycomputer.gif" width="70" height="55" alt="computr73.gif “>

جدول ها <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

قسمت بندی صفحه <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

فرم ها و اجزای آن ها • قسمتی از صفحات وب که داده های وارد شده را نگه می دارند. • اجزای فرم به کاربر اجازه وارد کردن اطلاعات را می دهد. مثل: textarea fields, drop-down menus, radio buttons, checkboxes • این اطلاعات می تواند با فشردن دکمه ی submit به برنامه ای که در سرور اجرا می شود فرستاده شود. <FORM NAME="Order" METHOD="GET" ACTION="order.cgi“>

Textfield <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>

Radio Button <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>

Checkboxes <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" > <br > I have a car: <input type="checkbox" name="vehicle" value="Car" > <br > I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" > </form>

The Form's Action Attribute and the Submit Button <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

Button • type=SUBMIT • Causes the data in the form fields to be sent to the CGI script. • type=RESET • Sets all the form fields back to their default value, or blank. • type=BUTTON • Performs no action on its own, but you can assign it one using JavaScript.

<meta> tags • دادن اطلاعاتی مرتبط با مرورگرها یا موتورهای جست و جو، مثل توصیف محتوای صفحه This meta element defines a description of your page: <meta name="description" content="Free Web tutorials on Excel"> This meta element defines keywords for your page: <meta name="keywords" content=“Excel, Microsoft, tutorial, XML">

Animating text <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=yellow>This is an example of an alternating marquee...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow LOOP=3>This is an example of a scrolling marquee...</MARQUEE></FONT>

Animating text • جهت • سایز <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL DIRECTION=RIGHT BGColor=yellow>This is an example of a marquee scrolling to the right...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE BEHAVIOR=SCROLL HEIGHT=25 WIDTH=300 BGColor=yellow>This is an example of a scrolling marquee</MARQUEE></FONT>

<xmp> و <pre> • <pre> • <xmp> • tag های html در آن نادیده گرفته می شوند. <XMP> <A HREF="http://www.idocs.com">CoolDude</A> </XMP> <PRE> <A HREF="http://www.idocs.com“>Cool Dude</A> </PRE>

CSS • همه ی شما با style ها در Microsoft Word کار کرده اید...

CSS چیست؟ • اسناد HTML می توانند با Style Sheet هایی که نحوه نمایش قسمت های مختلف آن را تعیین می کنند ترکیب شوند. • زبان توصیف این صفحات CSS نام دارد. • نحوه نمایش توسط style ها تعیین می شود. • Style ها در style sheet ارائه می شوند. • استفاده از سبک مناسب نمایش برای کاربران مختلف

نحو CSS

مکان Style Sheet ها <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> • Head (<STYLE></STYLE>) • فایل مجزا • مزیت؟ <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

قوانین Style Sheet های خارجی • باید متن ساده و بدون tag های HTML باشند. • فایل با پسوند .css مرسوم است.

Javascript

Javascript چیست؟ • شبیه جاوا، اما ساده تر • برای ایجاد صفحات وب فعال • خطوطى از کدهاى کامپیوترى قابل اجرا • قابل جاسازی در صفحات HTML با syntax ساده • با قابلیت دسترسی به عناصر صفحه • تعامل با event ها • پس از Loadشدن صفحه یا کلیک توسط کاربر

چرا ساده تر از Java؟ • کامپایل نمی شود، تفسیر می شود. • نیازی به تعریف متغیرها و تعیین نوع آن ها نیست. • اشیا را نمی سازیم، فقط از آن ها استفاده می کنیم. • استفاده آسان از event handler ها

چرا Javascript؟ • محتوای پویا • اعتبارسنجی فرم ها • تعاملی کردن صفحات وب

طرز قراردادن Javascript در HTML • <html> • <head> • <script type="text/javascript"> .... </script> • </head> • <body> • <script type="text/javascript"> .... </script> • </body> • ------------------------------------------------------------------------------------------- • <html> • <head> <script src="xxx.js"></script> </head> • <body> </body> • </html> • برای درج توضیحات: // یا /* */

If…Else <script type="text/javascript"> //If the time is less than 10, //you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date() var time = d.getHours() if (time < 10) { document.write("Good morning!") } else { document.write("Good day!") } </script>

For Loop <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { document.write("The number is " + i) document.write("<br />") } </script> </body> </html>

While Loop <html> <body> <script type="text/javascript"> var i=0 while (i<=10) { document.write("The number is " + i) document.write("<br />") i=i+1 } </script> </body> </html>

Popup Boxes • alert("sometext") • confirm("sometext") • prompt("sometext","defaultvalue") var d = new Date() var time = d.getHours() if (time < 10) { document.write("Good morning!") } else { document.write("Good day!") prompt("current time",d) }

Function • تعریف تابع function prod(a,b) { x=a*b return x } • فراخوانی تابع product=prod(2,3)

Function Example <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!") } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form> </body> </html>

رویدادها و مدیریت آن ها • یکی از نقاط قوت Javascript

event handler <a href="http://ce.sharif.edu" onmouseover="alert('HomePage Of CE department')"> CE! </a> <img src=“a.jpg" width="100" height="30" onmouseover="alert('HomePage Of CE department')">

Timing Events <html> <head> <script type="text/javascript"> function timedMsg() { setTimeout("alert('5 seconds!')",5000) } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onClick="timedMsg()"> </form> </body> </html>

عبارات و عملگرها • انتساب: =، =+ ، =-، =*، =/، =% • محاسباتی: + ، -، *، /، % • رشته ای: + • منطقی: &&، ||، ! • بیتی: &، |، ^، >>، <<، <<< • مقایسه ای: ==، >، <، =>، =< • ++، --

Objects • Window • نشان دهنده پنجره مرورگر • Navigator • حاوی اطلاعاتی راجع به مرورگر مشتری • History • حاوی اطلاعاتی در مورد URL های بازدید شده در صفحه

شیء window

شیء window • دسترسی به فریم های یک پنجره با استفاده از آرایه ی frames امکان پذیر است.

اجزای فرم ها <html> <form name="form1"> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female <br> </form> <script type="text/javascript"> document.form1.sex[0].checked = true; </script> <html>

XML

XML • EXtensibleMarkupLanguage • جایگزینی برای HTML نمی باشد. • XML و HTML برای اهداف متفاوتی طراحی شده اند: • XML برای توصیف داده طراحی شده است. • HTML برای نمایش داده طراحی شده است. • باید نرم افزاری برای کار با آن نوشته شود. • برای نمایش پیغام <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

HTML ، CSS و Javascript