نرگس چنگیزی
مطالب مرتبط با طراحی صفحات وب
N<html> or <body style="background-image:url(rat.jpg) ;font-size:20"> n<p style="color: red; margin-left: 50px"> قبل از نسخه جدید اچ تی ام ال (HTML5) به عنوان زبان پایه طراحی وب، تمرکز اصلی این استاندارد بر روی چیدمان صحیح عناصر برای نمایش محتوا به کاربر بود. گسترش ایده وب معنایی که مستلزم بیان جزئیات بیشتری از عناصر صفحه بود همراه با افزایش سرعت اینترنت و مشاهده ویدئو و شنیدن صوت به عنوان نیازهای روزمره زندگی امروز و نهایتاً گسترش برنامه های مبتنی بر وب نیازی اساسی به تغییر در استاندارد اچ تی ام ال احساس میشد که HTML5 پاسخگوی تمام این نیاز ها بود . اگر بخواهیم به طورخلاصه امکانات جید این نسخه از استاندارد طراحی وب را برشماریم به این نکات باید اشاره کنیم : با استفاده از فریم صفحه ای ایجاد کنیم که شامل دو فریم است و دریک فریم لیست عکس ها با اندازه های کوچک وجود دارد که با کلیک کردن بر روی آنها عکس با اندازه ی بزرگتر در فریم دیگر نمایش داده شود. برای این کار به یک صفحه برای ایجاد دو فریم و به ازاء هر عکس یک صفحه نیاز داریم. کد صفحه ی اصلی: n کد صفحات مربوط به هرعکس : n<html> n<html> n<html> n<html> می توان در یک لحظه در یک سند html به چند فایل css لینک داد. اگر چند فایل CSS داشته باشید به جای این که در ابتدای صفحه چند بارآ ن ها را برای بارگزاری صدا بزنید سعی کنید همه را در یک فایل جمع کنید و فقط یک بار این کار را انجام بدهید. ارسال هر Request و دریافت پاسخ آن ، بخشی از زمان بارگذاری صفحه است.هرچه تعداد Request ها کمتر باشد ، زمان بارگذاری صفحه کمتر می شود. بهتر است به جای چند فایل CSS از یک فایل استفاده کنیم! مثال: n<link rel=”stylesheet” type=”text/css” href=”/body.css” /> اکنون که يک مفهومي از زبان جاوااسکريپت را در ذهن داريد، بايد ببينيم که با آن چکار مي توانيم انجام دهيم يا بهتر بگويم که جاوااسکريپت چه کاري براي ما انجام مي دهد و چه قابليتهايي را در مرورگر ايجاد مي کند. تگ اسکريپت اکنون اين فايل را با پسوند htm ذخيره کنيد و سپس آنرا در مرورگر اينترنت اکسپلورر اجرا کنيد که جمله Hello my friends را بايد در صفحه ببينيد. حالا خصوصيت type را حذف کنيد و دوباره فايل را ذخيره و مشاهده کنيد، هيچ متني در صفحه ديده نميشود که با تغيير نسخه 1.5 به 1.3 آن متن دوباره نمايان خواهد شد. نوشتن نسخه جاوااسکريپت اجباري نيست يعني مي توانيد آنرا ننويسيد.
<body style="font-size:20 ">n
HyperText Markup Language (HTML) is the predominant markup language for web
pages. HTML elements are the basic building-blocks of webpages.
</p>
<p style="color: lightgreen; margin-right: 20px">
HTML is written in the form of HTML elements consisting of tags, enclosed in angle
brackets (like <html>), within the web page content. HTML tags most commonly
come in pairs like <h1> and </h1>, although some tags, known as empty elements,
are unpaired, for example. The first tag in a pair is the start tag, the second tag is the
end tag (they are also called opening tags and closing tags). In between these tags
web designers can add text, tags, comments and other types of text-based
content.The purpose of a web browser is to read HTML documents and compose
them into visible or audible web pages. The browser does not display the HTML
tags, but uses the tags to interpret the content of the page.
</p>
<p style="position:fixed;top:150;left:400; color:blue">
This is example
</p>
<p style="border-color:pink; border-style:outset;border-width:15">
HTML elements form the building blocks of all websites. HTML allows images and
objects to be embedded and can be used to create interactive forms. It provides a
means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in
languages such as JavaScript which affect the behavior of HTML webpages.
</p>
<p style="border-color:purple; border-style:inset;border-width:15;padding:15;">
The first publicly available description of HTML was a document called "HTML
Tags", first mentioned on the Internet by Berners-Lee in late 1991.[5][6] It describes
20 elements comprising the initial, relatively simple design of HTML. Except for the
hyperlink tag, these were strongly influenced by SGMLguid, an in-house SGML
based documentation format at CERN. Thirteen of these elements still exist in HTML
4
</p>
<p style="border-color:lightskyblue; border-style:inset;border-
width:25;wigth:100;hieght:100;overflow:scroll">
Hypertext markup language is a markup language that web browsers use to interpret
and compose text, images and other material into visual or audible web pages. Default
characteristics for every item of HTML markup are defined in the browser, and these
characteristics can be altered or enhanced by the web page designer's additional use
of CSS. Many of the text elements are found in the 1988 ISO technical report TR
9537 Techniques for using SGML, which in turn covers the features of early text
formatting languages such as that used by the RUNOFF command developed in the
early 1960s for the CTSS (Compatible Time-Sharing System) operating system: these
formatting commands were derived from the commands used by typesetters to
manually format documents. However, the SGML concept of generalized markup is
based on elements (nested annotated ranges with attributes) rather than merely print
effects, with also the separation of structure and processing; HTML has been
progressively moved in this direction with CSS.
</p>
</body>
</html>N
<html>
<head>
<title>
Table
</title>
</head>
<body text="black">
<p align="center">
<font size="5">
<table border="2" cellpadding="5" width="200" height="200">
<tr>
<td colspan="3">
<img align="right" src="sad_girl2.jpg" alt="Angry face"
width="100" height="100" />
</td>
<tr/>
<tr>
<td>
<video src="Baby.mp4" width="150" height="150"
controls="controls">
Yor browser not suppot! </video></td>
<td>
<ol>
<li>Mozilla</li>
<li>Opera</li>
<li>IE</li>
</ol>
</td>
<td>
<a href="http://www.iranweb3.com"> iranweb3 </a>
</td>
</tr>
</table>
<table border="3" cellpadding="5" width="200" height="200">
<tr>
<td >
<img src="sad_girl2.jpg" alt="Angry face" width="100"
height="100" />
</td>
</tr>
<tr>
<td>
<video src="Baby.mp4" width="150" height="150"
controls="controls">
Yor browser not suppot!
</video>
</td>
</tr>
<tr>
<td >
<ol>
<li>Mozilla</li>
<li>Opera</li>
<li>IE</li>
</ol></td>
<td rowspan="3">
<a href="http://www.iranweb3.com"> iranweb3 </a>
</td>
</tr>
</table>
<table border="4" cellpadding="5" width="200" height="200">
<tr>
<td colspan="3"> <img src="sad_girl2.jpg" alt="Angry face"
width="100" height="100" /> </td>
</tr>
<tr>
<td rowspan="3">
<video src="Baby.mp4" width="150" height="150"
controls="controls">
Yor browser not suppot!
</video>
</td>
<td>
<ol>
<li>Mozilla</li>
<li>Opera</li>
<li>IE</li>
</ol></td>
</tr>
<tr>
<td>
<a href="http://www.iranweb3.com"> iranweb3 </a>
</td>
</tr>
<tr>
<td>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</td>
<tr/>
</table>
</font>
</body>
</html>
افزودن عناصری برای طراحی فرم
از آنجا که رایجترین راه ارتباط با کاربران ، فرمهای آنلاین است در این نسخه از HTML5 عناصر جدیدی به طراحی فرم ها افزوده شده اند که عمدتاً کار گرفتن داده های خاص مانند ایمیل، اعداد، آدرس های اینترنتی ، زمان و مانند آن را ساده تر کرده است . نیز خصوصیاتی به عناصر فرم برای اعتبارسنجی مقادیر وارد شده افزوده شده است.
افزوده شدن عناصر ساختاری
در گذشته برای گروه بندی عناصر صفحه از برچسب Div عمدتاً استفاده می شد که یک برچسب عمومی و همه منظوره بود. یعنی برای منو سایت ، سرصفحه و پانوشت ، مطالب حاشیه ای و متن اصلی همه و همه از این برچسب استفاده میشد. اما در HTML5 برای هر کدام از این بخشها ، برچسب تازه ای تعریف شده است . هر چند از دید کاربر نهایی، تغییری در ظاهر صفحات ایجاد نمی شود اما برای موتورهای جستجو این تمایز بین بخشهای مختلف صفحه بسیار با اهمیت است.
پشتیبانی از صدا و ویدئو
تا قبل از HTML5 تنها عنصری که می توانستیم به راحتی و به صورت استاندارد به یک صفحه وب اضافه کنیم ، تصویر بود . اما در HTML5 برچسبهایی مخصوص صدا و ویدئو نیز به استاندارد وب افزوده شده است.
ترسیمات گرافیکی
یکی از عناصر افزوده شده به صفحات وب عنصر Convas است که به کمک آن می توان تصاویر گرافیکی ایجاد نمود، حرکت داد و حتی انیمیشن تولید کرد . کافیست یک جستجوی ساده انجام دهید تا بازیهای بسیاری را که با این فناوری نوشته شده است ، ببینید ( مانند این بازی ) . از طرفی با این امکان جدید نیاز به فلش در سایتها دیگر احساس نمی شود حتی خود شرکت ادوب برنامه ای برای تبدیل فلش بهHTML5 در اختیار طراحان قرار داده است.
حافظه برنامه
با رواج برنامه های تحت وب، نیاز به ابزاری برای ذخیره سازی اطلاعات بر روی کامیپوتر کاربر احساس میشد . هر چند وجود کوکی ها تا حدودی این امکان را به برنامه نویسان می داد تا اطلاعاتی مانند کلمه رمز و نام کاربری را بر روی سیستم کاربر ذخیره کنند اما این امکان بسیار محدود بود . در نسخه جدید اچ تی ام ال ، می توان اطلاعات مختلفی را بر روی کامپیوتر کاربر (البته با حفظ امنیت) ذخیره و بازیابی کرد . مثلا زمانی که در حال چک کردن ایمیل های خود هستید، یک نسخه از ایمیل ها می تواند در هاردتان ذخیره شود تا اگر به اینترنت هم متصل نبودید بتوانید به ایمیل ها دسترسی داشته باشید.
افزوده شدن خصوصیات جدید به برچسب ها
به بسیاری از برچسب های استاندارد وب، خصوصیات جدیدی در این نسخه افزوده شده است مانند قابلیت ویرایش ، قابلیت کشیده شدن با موس ، منوی زمینه (منویی که با کلیک راست بر روی یک عنصر نمایش داده می شود) ، مخفی بودن و مانند آن .
بهبود سرعت پردازش صفحات
در این نسخه از اچ تی ام ال می توانید بارگذاری بعضی از عناصر مانند کدهای جاوااسکریپت را به بعد از بارگذاری و نمایش صفحه موکول کنید تا صفحات سریعتر به کاربر نمایش داده شوند.
در هر صورت این استاندارد نوید بخش رونق دوباره فضای طراحی وب و حرفه ای تر شدن این حوزه است . برای آشنایی کامل با این استاندارد همراه با مثال سایت W3Schools.Com و برای دیدن مثالهای عملی تر از امکانات جدید آن این آدرس را پیشنهاد می کنم.برای شروع طراحی یک سایت یا برنامه تحت وب ابزارهای مختلف آنلاینی نیز بوجود آمده اند که کار طراحی وب به کمک این استاندارد جدید را ساده تر می نمایند. به شخصه سایت Initializer را توصیه می کنم که با تنظیمات مختلف اسکلت یک سایت HTML5 را در عرض چند دقیقه در اختیارتان می گذارد.
فرم ها از آنجایی که نیاز است اطلاعات صحیحی را دریافت کنند همواره از سیستم های اعتبارسنجی اطلاعات بهره می برند . و این هم حجم کاری طراح را زیادتر می کند و حجم فایل و اسکریپت اعتبارسنجی
در HTML5 سعی شده است تا المان هایی به آن اضافه شود تا بتوان خیلی راحت اطلاعات را بدون نیاز به هیچ اسکریپت خارجی از صحت اعتبار مورد سنجش قرار داد . بر فرض اعتبارسنجی ایمیل ها – کارت اعتباری و غیره .
برای اعتبارسنجی ایمیل ها در این نسخه از HTML بدین صورت عمل می شود :
input type=email
مشاهده می کنید که چقدر خلاصه و راحت می توان در این نسخه کد نوشت .
خصوصیات جدیدی نیز به این ساختار ورودی اطلاعات اضافه شده است مانند required, autofocus, input type=number min=3 max=50 که به سادگی می توان اطلاعات ورودی را کنترل کرد
یا در مورد اطلاعات مربوط به تاریخ پس از پشتیبانی مرورگرها از این نسخه دیگر نیاز به نوشتن خام تاریخ نیست و با استفاده از این کد :
input type=date
می توان یک پاپ آپ به صورت پیش فرض در مرورگر داشت که به سادگی از درون این پنجره کوچک تاریخ مورد نظر را تعیین کرد
یاحتی می توان فاصله زمانی را با استفاده از کد :
input type=range
حتما تا اینجا از راحتی کار برای طراحان لذت بردید اما برای عموم استفاده کنندگان هم راحت تر خواهد بود که طراحان از این نسخه استفاده کنند .
بدون هیچ نیازی به پلاگین خاص می توان ویدئوها را نمایش داد ( مثال ) و یا اشیاء صفحه سایت را کشید و در جایی دیگر رها کرد و خیلی امکانات دیگر که نیاز به پلاگین خاصی ندارد
n<html>
<frameset cols="50%,50%">
<frame src="frame_a.html" noresize="noresize" />
<frame name="showframe" />
</frameset>
</html>n
<head>
<title>frame A</title>
</head>
<body>
<ol type="1">
<li>
<a href="frame_b.html" target="showframe">
<img src="parvaz.jpg" alt="parvaz.jpg" height="100" width="100" />
</a>
</li>
<li>
<a href="frame_c.html" target="showframe">
<img src="mahya.JPG" alt="mahya.JPG" height="100" width="100" />
</a>
</li>
<li>
<a href="frame_d.html" target="showframe">
<img src="masouleh03.jpg" alt="masouleh03.jpg" height="100" width="100" />
</a>
</li>
</ol>
</body>
</html>
nn
<head>
<title>frame B</title>
</head>
<body bgcolor="#E6E6FA">
<img src="parvaz.jpg" alt="parvaz.jpg" height="400" width="400" />
</body>
</html>
N
<head>
<title>frame C</title>
</head>
<body bgcolor="yellow">
<img src="mahya.JPG" alt="mahya.JPG" height="400" width="400" />
</body>
</html> n
<head>
<title>frame D</title>
</head>
<body>
<img src="masouleh03.jpg" alt="masouleh03.jpg" height="400" width="400" />
</body>
</html> n
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: کار کردن,فریم,html,frameset,frame ,noresize,href,target,
<link rel=”stylesheet” type=”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />n
تبدیل کنید به:
<link rel=”stylesheet” type=”text/css” href=”/style.css” />
يكي ديگر از قابليتهاي CSS پايين آوردن حجم صفحات HTML ميباشد. چون با استفاده از CSS شما يك كد را يك بار مينويسيد و در هزار جاي صفحه از اون استفاده ميكنيد.حتي ميتوان يك فايل CSS خارجي ايجاد كرد و از آن در تمام صفحات سايت استفاده كرد. با اين كار هم حجم اطلاعات كم ميشود و هم سرعت كار بيشتر ميشود.
در حقيقت جاوااسکريپت يک ابزار براي طراحان وب و نويسندگان کدهاي HTML مي باشد. جاوااسکريپت داراي ترکيباتي ساده نسبت به زبانهاي برنامه نويسي است که براحتي مي توان آنها را داخل کدهاي اچ تي ام ال يک صفحه قرار داد و از آنها استفاده کرد. يکي از قابليتهاي ويژه جاوااسکريپت رايگان بودن آن است که اگر شما زبان HTML را بدانيد، مي توانيد با کمي دانستن جاوااسکريپت کدهاي آماده که بيش از 2000 نوع از آنها در وب وجود دارد را در صفحات خود بکار گيريد.
با استفاده از اين زبان مي توانيد متنهاي پويا و متحرک در صفحات و در نقاط مختلف مرورگرها مانند نوار وضعيت آنها خلق کنيد. يکي ديگر از قابليتهاي اين زبان عکس العمل نشان دادن به وقايع و اتفاقات مي باشد بطور مثال واکنش نسبت به کليک يکي از دکمه هاي موس يا فشردن يک کليد بر روي کيبورد و يا انجام عملي هنگام بسته شدن صفحه مرورگر.
جاوااسکريپت حتي مي تواند کدهاي اچ تي ام ال را بخواند و يا توليد کند که توسط اين خاصيت مي توانيد در هر زمان خاص يک متني را توليد يا تغيير دهيد و يا در زماني مشخص عکسي را جايگزين عکسي ديگر کنيد.
يکي از بهترين ويژگيهاي جاوااسکريپت، اعتبار بخشيدن به اطلاعات مي باشد مثلاً شما يک فرمي براي ارتباط با کاربر خود ساخته ايد و مي خواهيد قبل از اينکه آن اطلاعات به سرور فرستاده شود، بازبيني شده تا اگر مشکلي وجود داشته باشد به کاربر اطلاع داده شود تا در صدد رفع آن برآيد. چون جاوااسکريپت اصطلاحاً Client side است، يعني در سيستم کاربر اجرا شده و مستقل از وب سرور است مي تواند ترافيک روي سرور را کم کرده که اين موضوع يک امتياز مثبت براي ميزبانان وب محسوب مي شود.
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: جاوااسکريپت,ابزار ,وب,کد, HTML,Client side ,Client side ,قابليت,
جاوااسکريپت هم مانند زبان HTML از يکسري دستور و گرامر خاص خود پيروي مي کند. البته اين زبان به سادگي اچ تي ام ال نيست و بسيار هم حساس است، مثلاً در اچ تي ام ال فاصله بين تگها اهميتي ندارد و مرورگر آنرا ناديده مي گيرد اما در جاوااسکريپت فاصله بايد متناسب باشد که اگر رعايت نشود با پيغام خطا روبرو خواهيد شد. در قسمت بعد با چگونگي پيغامهاي خطا در جاوااسکريپت آشنا مي شويد. همانگونه که اطلاع داريد کدهاي جاوااسکريپت را بايد در ميان تگهاي HTML قرار دهيد. به همين دليل يک تگ براي آن در نظر گرفته شده است:
<script> ... </script>
که کليه دستورات جاوااسکريپت بايد مابين آنها قرار گيرد. اين تگهاي اچ تي ام ال به مرورگر مي فهمانند که در کجا اين زبان آغاز شده تا مفسر جاوااسکريپت مرورگر فعال شود و در کجا پايان مي پذيرد که برنامه مفسر هم کار خود را خاتمه دهد.
language
اما تگ script مانند بقيه تگها داراي خصوصياتي مي باشد، يکي از آنها language است که مقدار آنرا بايد برابر با javascript قرار دهيد،
k<script language="javascript">
</script>n
براي مقدار javascript مي توانيد نسخه آن را هم بنويسيد. اين زبان هم مانند اچ تي ام ال داراي نسخه هاي مختلفي است که هر کدام آنها با قابليتهاي جديدي در وب توسعه يافتند. نسخه هاي اين زبان عبارتند از 1.0 ، 1.1 ، 1.2 ، 1.3 ، 1.4 و آخرين نسخه حال حاضر هم 1.5 مي باشد که هم اکنون اين نسخه با مرورگر مايکروسافت يعني اينترنت اکسپلورر سازگاري ندارد. فعلاً مرورگر اينترنت اکسپلورر از نسخه 1.3 اين زبان پشتيباني مي کند.
type
تگ اسکريپت خصوصيت type هم دارد که براي اين زبان بايد آنرا برابر با text/javascript قرار دهيد. نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 اين زبان را ناديده مي گيرد و کد را اجرا مي کند. شما مي توانيد با اجراي کد زير هم اولين اسکريپت خود را تجربه کنيد و هم خصوصيت type را در IE امتحان کنيد.
خب مانند زبان اچ تي ام ال مي توانيد از يک ويرايشگر متن مانند برنامه Notepad استفاده کرده و کد زير را در آن وارد کنيد:
n<html>
<head>
<title> My JavaScript </title>
</head>
<body>
<script language="javascript1.5" type="text/javascript">
document.write(" Hello my friends ")
</script>
</body>
</html>n
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: تگ,اسکريپت,HTML,script,language,javascript,آغاز,اسکريپت,نويسی,
