با سلام خدمت شما بازديدكننده گرامي ، خوش آمدید
به سایت من . لطفا براي هرچه بهتر شدن مطالب اين
وب سایت ، ما را از نظرات و پيشنهادات خود آگاه سازيد
و به ما را در بهتر شدن كيفيت مطالب ياري کنید.
براي اطلاع از آپيدت شدن وبلاگ در خبرنامه وبلاگ عضو شويد تا جديدترين مطالب به ايميل شما ارسال شود
درباره ما
به وبلاگ من خوش آمدید
دو اشتباه بسیار بزرگ یکی این است که قبل از موعد اقدام به عمل کنیم و دیگری این است که فرصت مناسب را از دست بدهیم ،بدبختی آن نیست که می توان از آن بر حذر بود ، بلکه آن است که گریزی از آن نیست . با عمل است كه انسان از دنياي تكراري روزانه ، جايي كه همه شبيه يكديگرند ، بيرون مي آيد، با عمل است كه انسان خود را از ديگران متمايز مي كند و فرد مي شود.
هرکسی که بداند که نداند از همه داناتر است یک چیز را خوب می دانم و آن این است که هیچ نمی دانم، هر که بداند درست چیست، دست به نادرست نمی زند .
دانشگاه تمام استعدادهای افراد،ازجمله بی استعدادی آنها را آشکار میکند...
شكسپير گفت:
من هميشه خوشحالم، مي دانيد چرا؟
براي اينكه از هيچكس براي چيزي انتظاري ندارم،
انتظارات هميشه صدمه زننده هستند...
اگر شما می خواهید دیگران صفحات شما را ببینند باید آنها را publish کنید
برای publish کردن کارتان شما باید فایل هایتان را در یک وب سرور کپی کنید
رایانه خودتان اگر به یک شبکه متصل است می تواند بعنوان یک وب سرور عمل کند
اگر شما win98 را اجرا می کنید می توانید از PWS استفاده کنید
PWS در پوشه PWS در CD ویندوز است
وب سرور شخصی PWS
PWS هر کامپیوتر ویندوز را به یک سرور تبدیل می کند. PWS نصب آسانی دارد و برای اجرا برنامه های کاربردی وب ایده آل است. PWS برای ایستگاه های کاری بهینه می باشد اما نیازمند یک وب سرور کامل است .آن همچنین ASP را مانند برادر بزرگتر خود IIS اجرا می کند.
چگونه یک وب سرور pws نصب کنیم
نصب ویندوز را مرور کنید تا ببینید pws را نصب کرده اید یا نه
اگر نصب نکرده اید آن را از پوشه pws ویندوز نصب کنید
با توجه به دستورالعمل رفتار کنید و آن را نصب کنید
نکته: نسخه های win xp home edition گزینه pws برای نصب ندارند.
Internet Information Services(IIS)
وب سرور IIS در win2000 ساخته شد که ساختن برنامه های کاربردی بزرگ برای وب را آسان ساخت. IIS و PWS هردو شامل ASP هستند. یک اسکریپت نویسی استاندارد سمت سرور که می تواند برای ساخت صفحات پویا و برنامه های فعل و انفعالی استفاده شود. IIS اکنون برای WIN NT آماده است.
قدم بعدی یک وب سرور حرفه ای
اگر شما نمی خواهید از PWS یا IIS استفاده کنید ، شما باید پروفایلتان را در یک سرور عمومی آپلود کنید.بیشتر ISP ها پیشنهاد میزبانی صفحات وب را به شما خواهند داد
اگر کارمند شما یک سرور اینترنت دارد می توانید از او بخواهید تا میزبان وب سایت شما شود.
اگر شما واقعا در این مورد جدی هستید باید سرور اینترنت خودتان را نصب کنید.
در زیر یک منبع از کاراکترهای اسکی در فرم url-encoding آمده است.مقادیر مبنای 16 می توانند برای نمایش حروف غیر استاندارد و کاراکترهای در مرورگرها و plug-in استفاده شوند.
چیزی که در HTML4.0 جدید است توانایی انجام رویدادهای HTML در یک مرورگر است، مثل شروع یک جاوا اسکریپت وقتی که یک کاربر روی عنصر HTML کلیک می کند.در زیر یک لیست از موجودیتهاست که برای تعریف عملیات یک رویداد می توانند در یک برچسب وارد شوند.
رویدادهای پنجره
فقط در body,frameset معتبر است.
موجودیت
مقدار
توضیحات
onload
script
وقتی که پرونده بارگیری شود اسکریپت اجرا خواهد شد.
onunload
script
وقتی که پرونده بارگیری نشود اسکریپت اجرا خواهد شد
رویدادهای عناصر فرم
فقط در فرم معتبر است.
موجودیت
مقدار
توضیحات
onchange
script
هنگامی که عنصر تغییر کند اسکریپت اجرا می شود
onsubmit
script
هنگامی که فرم ارسال می شود اسکریپت اجرا می شود
onreset
script
هنگامی که فرم reset می شود اسکریپت اجرا می شود.
onselect
script
هنگامی که عنصر انتخاب می شود اسکریپت اجرا می شود.
onblur
script
هنگامی که تمرکز از عنصر برداشته می شود اسکریپت اجرا می شود.
onfocus
script
هنگامی که روی عنصر متمرکز می شویم اسکریپت اجرا می شود.
رویدادهای صفحه کلید
موجودیت
مقدار
توضیحات
onkeydown
script
هنگامیکه کلید فشرده می شود چه کاری انجام شود
onkeypress
script
هنگامی کلید زده می شود چه کاری انجام شود.
onkeyup
script
هنگامی که کلید آزاد می شود چه کاری انجام شود
رویدادهای ماوس
موجودیت
مقدار
توضیحات
onclick
script
با کلیک ماوس چه کاری انجام شوى
ondblclick
script
با دوبار کلیک کردن ماوس چه کاری انجام شود
onmousedown
script
هنگامی که دکمه ماوس فشرده می شود چه کاری انجام شود
onmousemove
script
هنگامی که اشاره گر ماوس جابجا می شود چه کاری انجام شود
onmouseout
script
هنگامی که اشاره گر ماوس از یک عنصر خارج می شود چه کاری انجام شود
onmouseover
script
هنگامی که اشاره گر ماوس روی یک عنصر قرار می گیرد چه کاری انجام شود
برچسب های HTML می توانند موجودیت داشته باشند.موجودیت های خاص هر برچسب در زیر لیست شده . موجودیت های فوق هسته هستند و موجودیت زبان برای همه برچسب ها استاندارد است.
اسکریپت بالا این خروجی را خواهد داشت: Hello world!
چگونه مرورگرهای قدیمی را راه بیندازیم
یک مرورگر که نمی تواند برچسب <script> را تشخیص دهد ، آن را بعنوان متن در صفحه نمایش خواهد داد. برای جلوگیری از مرورگر از انجام این کار شما باید script را در برچسب های توضیح مخفی کنید. یک مرورگر قدیمی که نمی تواند script را تشخیص دهد توضیحات را نادیده خواهد گرفت و محتویات آن برچسب را نشان نخواهد داد.درحالیکه یک مرورگر جدید می فهمد که اسکریپت ها باید اجرا شوند حتی اگر با برچسب توضیحات محدود شده باشند.
در مجموع برای مخفی کردن اسکریپت درون توضیحات شما می توانید یک برچسب <noscript > اضافه کنید.این برچسب برای نشان دادن یک متن درصورتیکه اسکریپت اجرا نشود بکار می رود.این برچسب برای مرورگرهایی بکار می رود که برچسب script را تشخیص نمی دهند و اسکریپت های درون را پشتیبانی نمی کنند. بنابراین این مرورگرها بجای آن ، متن داخل برچسب <noscript > را نشان می دهد.
JavaScript: <script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> <noscript>Your browser does not support JavaScript!</noscript>
VBScript: <script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script> <noscript>Your browser does not support VBScript!</noscript>
هنگامی که شما در یک پرونده HTML بر روی یک پیوند کلیک می کنید برچسب <a> یک موجودیت به نام href دارد که آدرس آن صفحه در وب در آنجا قرار می گیرد ، مثل این: <a href= "lastpage.htm"> Last Page </a>
URL
چیزی که URL نامیده می شود درwww برای آدرس دهی یک پرونده استفاده می شود.یک آدرس کامل وب مثل این
شما (scheme) نوع سرویس اینترنتی را تعریف می کند . بیشتر انواع متداول ، http است. domain نام دامنه اینترنتی را تعریف می کند مثل html.ir host نیز میزبانی دامنه را تعریف می کند. اگر حذف شده باشد میزبان پیش فرض برای http , www است. port شماره پورت در میزبان را معرفی می کند. شماره پورت بطور عادی از قلم می افتد. شماره پورت پیش فرض برای http ، 80 است. path یک مسیر را در سرور معرفی می کند.اگر مسیر حذف شده باشد منابع باید در پوشه ریشه وب سایت باشند. filename نام یک پرونده را معرفی می کند. نام فایل پیش فرض ممکن است default.asp , index.asp , index.html یا چیز دیگری وابسته به تنظیمات وب سرور باشد.
نوع سرویس های اینترنتی
تعدادی از مثال های متداول شماها را می توان در پایین یافت:
نوع سرویس اینترنتی
دسترسی
file
فایلی در کامپیوتر محلی
ftp
یک فایل در یک FTP server
http
یک فایل در یک WWW Server
gopher
یک فایل در یک Gopher server
news
یک استفاده اینترنتی از یک newsgroup
telnet
یک ارتباط Telnet
WAIS
یک فایل در یک WAIS server
دسترسی به گروه های خبری
کد HTML زیر یک پیوند به یک گروه خبری می سازد: <a href="news:alt.html">HTML Newsgroup</a>
دانلود با FTP
کد html زیر یک پیوند برای دانلود فایل می سازد ، مثل این:
توضیحات صفحه اطلاعاتی که در قسمت meta نوشته می شوند، شرحی درباره صفحه می دهند. موتورهای جستجو توجه خواصی به این توضیحات دارند.
کلیدواژه های صفحه کلیدواژه های معرف صفحه، در قسمت meta می آیند. این کلیدواژه ها، شناسه های اصلی متن صفحه می باشند. موتورهای جستجو به کمک این کلید واژه ها، صفحه مناسب را برای ما می یابند.
ارجاع کاربر در صورتیکه محل سایت شما جا به جا شده، چگونه کاربر را مطلع می کنید؟ این مثال را ببینید.
عنصر meta
همانطور که در بخش قبل توضیح دادیم عنصر head حاوی اطلاعات کلی درباره پرونده است. html همچنین حاوی یک عنصر به نام Meta است که در داخل عنصر head قرار می گیرد.هدف عنصر Meta فراهم کردن اطلاعات کلی درباره یک پرونده است. در بیشتر مواقع عنصر Meta برای فراهم کردن اطلاعاتی که برای مرورگرها یا موتورهای جستجو مناسب است استفاده می شود، مثل توضیح محتویات پرونده.
کلمات کلیدی برای موتورهای جستجو
تعدادی از موتورهای جستجو در www از موجودیت های Name , Content در برچسب Meta برای اندیس کردن صفحات خود استفاده خواهند کرد. این عنصر Meta یک توضیح برای صفحه شما فراهم خواهد کرد.
<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" >
این عنصر Meta کلمات کلیدی برای صفحه شما تعریف می کند.
هدف موجودیت های Name,Content توضیح محتویات صفحه است. هرچند از زمانی که تعداد زیادی از توسعه دهندگان وب از برچسب های Meta برای spamming استفاده کردند مثل تکرار کلمات کلیدی برای بالا بردن صفحات، تعدادی از موتورهای جستجو استفاده کامل از آن را متوقف کردند.
موجودیت های ناشناخته Meta
گاهی اوقات شما موجودیت هایی از Meta را می بینید که برای شما ناشناخته اند، مثل این:
<meta name="security" content="low">
سپس شما باید قبول کنید که این یک چیز یکتا در سایت و یا در تالیف سایت است و شاید هیچ ارتباطی به شما ندارد.
عنوان صفحه اطلاعات عنوان، که در داخل برچسب head نوشته می شود، در مرورگر نمایش داده نمی شود.
یک هدف برای تمام پیوندها با تنظیم هدف پایه در قسمت head، هدف پیش فرض تمام پیوندهای صفحه، تعیین می شود.
عنصر head
عنصر head حاوی اطلاعات اصلی که همچنین meta-information نیز نامیده می شود در یک پرونده است.
اطلاعات داخل عنصر head
عناصر داخل عنصر head نباید توسط مرورگر نشان داده شوند. مطابق HTML استاندارد فقط برچسب های کمی بطور قانونی داخل بخش head هستند که عبارتند از , <script> <style> , <title> , <meta> , <link> , <base> به ساختار ناصحیح زیر دقت کنید
<head> <p>This is some text</p> </head>
در این حالت مرورگر دو گزینه دارد:
نمایش متن ، چون داخل عنصر پاراگراف قرار دارد
مخفی کردن متن ، چون داخل برچسب head قرار دارد
اگر شما یک عنصر HTML مثل <h1> و <p> را داخل عنصر head قرار دهید مرورگر باید آن را نمایش دهد هرچند غیر متعارف باشد.
با HTML4.0 همه قالب بندی ها می تواند به یک CSS جداگانه به خارج از پرونده HTML برده شود.
مثالها
ُStyleها در Html این مثال چگونگی آرایش یک html به کمک styleی که به قسمت <head> اضافه شده است را نشان می دهد.
فراپیوند، بدون زیرخط این مثال روش ساخت یک فراپیوند، که زیر خط ندارد را به کمک موجودیت های style نشان می دهد.
استفاده از style خارجی این مثال روش استفاده از برچسب <link> را نشان می دهد. با این روش، style موجود در یک فایل خارجی، به عنوان style صفحه در نظر گرفته می شود.
چگونه از style استفاده کنیم
هنگامی که یک مرورگر CSS را می خواند، پرونده را بر طبق آن قالب بندی خواهد کرد. 3 راه برای وارد کردن یک CSS وجود دارد.
CSS خارجی:
یک CSS خارجی زمانی ایده آل است که آن style در بیشتر صفحات استفاده شود. با یک CSS خارجی شما می توانید ظاهر یک سایت را با تغییر دادن یک فایل تغییر دهید.هر صفحه باید با استفاده از برچسب <link> به CSS پیوند داده شود. برچسب link در داخل بخش head قرار می گیرد.
یک CSS داخلی باید هنگامی استفاده شود که یک تک پرونده یک style واحد دارد. شما style داخلی را با برچسب style در قسمت head می توانید معرفی کنید.
<head> <style type="text/css"> {body {background-color: red {p {margin-left: 20px </style> </head>
style درون خطی
یک style درون خطی باید هنگامی استفاده شود که واحد برای یک رویداد عنصر واحدی خواسته شود. برای استفاده از style درون خطی شما از موجودیت های style در برچسب های مناسب استفاده کنید. موجودیت style می تواند حاوی هر خاصیت CSS باشد. مثال نشان می دهد که چگونه رنگ و چپ چین بودن پاراگراف را تعیین کنید.
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
HTML اصلی هرگز قصد نداشت که حاوی برچسب هایی برای قالب بندی یک پرونده باشد.برچسب های HTML قصد داشتند محتویات یک پرونده را قالب بندی کنند. مثل:
<p> This is a paragraph </p> <h1> this is a heading </h1>
هنگامی که برچسب هایی از قبیل font و موجودیت های رنگ به HTML3.2 اضافه شدند یک کابوس برای توسعه دهندگان وب آغاز شد.توسعه وب سایت های بسیار بزرگ که اطلاعات فونت و رنگ باید به هر صفحه آن اضافه شود یک روند بلند ، گران و بی جهت دردناک شد.
چه چیز در مورد HTML4.0 بسیار عالیست؟
در HTML4.0 همه قالب بندی ها می تواند از فایل HTML حذف شده و در یک CSS جداگانه قرار گیرد. چون HTML4.0 ارائه را از ساختار پرونده جدا می کند ، ما باید چیزی را که همیشه نیاز داریم بگیریم: کنترل نهایی ظاهر بندی ارائه بدون از دست دادن محتویات پرونده.
شما در آن مورد چه باید انجام دهید؟
از موجودیت های ارائه در میان برچسب های HTML استفاده نکنید، اگر می توانید از آن اجتناب کنید.از برچسب هایی که توصیه نمی شوند استفاده نکنید.
خودتان را برای XHTML آماده کنید
XHTML همان HTML جدید است. مهمترین چیزی که شما می توانید انجام دهید این است که نوشتن صحیح XHTML4.0 را آغاز کنید. همچنین شروع به نوشتن برچسب ها با حروف کوچک کنید. همیشه عناصر برچسب را ببندید. هرگز یک پاراگراف را بدون <p/> نبندید. نکته: HTML4.01 رسمی استفاده از برچسب ها با حروف کوچک را توصیه می کند.
برچسب font در HTML دیگر توصیه نمی شود و گمان می شود که از نسخه های بعدی HTML حذف شود. هرچند تعداد زیادی از مردم از آن استفاده کنند ، شما باید سعی کنید که از آن اجتناب کنید وبجای آن از style استفاده کنید.
برچسب font در HTML
با کد های HTML مثل این شما می توانیداندازه و نوع خروجی مرورگر را تعیین کنید:
<p> <font size="2" face="Verdana"> This is a paragraph. </font> </p> <p> <font size="3" face="Times"> This is another paragraph. </font> </p>
برچسب font در آخرین نسخه های HTML توصیه نمی شود (HTML4.0,XHTML). W3C برچسب font را از لیست توصیه هایش حذف کرده است.در نسخه های آینده HTML از CSS برای ظاهر بندی ونمایش موجودیت های اجزا HTML استفاده خواهد شد.
هرکجا در وب شما صفحاتی خواهید یافت که مانند صفحات روزنامه قالب بندی شده اند ، این صفحات از ستون های HTML استفاده می کنند.
ظاهر بندی HTML - استفاده از جداول
یکی از تمرین های متداول با HTML استفاده از جداول برای ظاهر بندی یک صفحه است.
یک بخش از این صفحه مانند صفحات روزنامه به دو ستون قالب بندی شده است
همانطور که شما در این صفحه می بینید یک ستون چپ و یک ستون راست وجود دارد. این متن در ستون راست نشان داده خواهد شد
برای تقسیم کردن بخشی از این صفحه به دو ستون از جداول HTML استفاده کرده ایم. حقه استفاده شده در اینجا استفاده از جدول بدون حاشیه است وشاید مقدار کمی cellpadding.
مهم نیست که چقدر متن به این صفحه اضافه می کنید، آن در ستون خودش قرار خواهد گرفت.
همان ظاهر بندی - رنگ اضافه شده
یکی از تمرین های متداول با HTML استفاده از جداول برای ظاهر بندی یک صفحه است.
یک بخش از این صفحه مانند صفحات روزنامه به دو ستون قالب بندی شده است
همانطور که شما در این صفحه می بینید یک ستون چپ و یک ستون راست وجود دارد. این متن در ستون راست نشان داده خواهد شد
برای تقسیم کردن بخشی از این صفحه به دو ستون از جداول HTML استفاده کرده ایم. حقه استفاده شده در اینجا استفاده از جدول بدون حاشیه است وشاید مقدار کمی cellpadding.
مهم نیست که چقدر متن به این صفحه اضافه می کنید، آن در ستون خودش قرار خواهد گرفت.
مثال
برای ظاهربندی صفحه، می توان از سطرها و ستونهای یک جدول استفاده کرد و محتوا را در محل مناسب قرار داد. به کمک این مثال، یک نمونه از این ظاهربندی را می بینید.
در این صفحه شما یک جدول از اسامی رنگ هایی پیدا خواهید کردکه با بیشتر مرورگرها پشتیبانی می شوند. توجه: فقط 16 نام رنگ با استاندارد W3C HTML 4.0 پشتیبانی می شوند. برای بقیه رنگ ها باید از مقادیر مبنای 16 آنها استفاده کرد.
رنگ ها با ترکیب نورهای قرمز و سبز آبی نمایش داده می شوند.
مقدار رنگ ها
رنگ های HTML با استفاده از نوشتن یک عدد مبنای 16 از ترکیب مقدار رنگ های قرمز و سبز وآبی معرفی می شود. کمترین مقداری که می توان به یکی از منابع نوری داد صفر است (hex#00)بیشترین مقدار هم 255 است (hex#ff)
قرمز را خاموش کنید
اگر شما رنگ قرمز را بطور کامل خاموش کنید، 65536 رنگ متفاوت از ترکیب آبی و سبز وجود خواهد داشت. برای دیدن تعداد بیشتری از این ترکیب ها اینجا را کلیک کنید
قرمز را روشن کنید
با تنظیم کردن پارامتر قرمز به بیشترین مقدارش ، 65536 رنگ متفاوت از آبی و سبز وجود خواهد داشت. برای دیدن تعداد بیشتری از این ترکیب ها اینجا را کلیک کنید
16 میلیون رنگ متفاوت
ترکیب مقادیر قرمز و سبز آبی از صفر تا 255 بیش از 16 میلیون رنگ متفاوت (256*256*256) می دهد. بیشتر نمایشگرهای مدرن قادر به نمایش 16384 رنگ متفاوت هستند.اگر شما به جدول رنگ پایین نگاه کنید، شما نتایج مختلف تغییرات رنگ قرمز از صفر تا 255 را در حالی که سبز و آبی صفر هستند خواهید دید. برای دیدن لیست کامل 16384 رنگ متفاوت که بر پایه قرمز از صفر تا 255 هستند بر روی یکی از مقادیر مبنای 16 یا rgb زیر کلیک کنید.
رنگ های خاکستری با استفاده از مقادیر برابر منابع رنگی نمایش داده می شوند.برای آسان تر ساختن آن برای شما برای آنکه رنگ خاکستری را درست انتخاب کنید ما یک جدول از سایه های خاکستری برای شما جمع آوری کرده ایم.
رنگ ها با ترکیب منابع نوری قرمز ، سبز و آبی معرفی می شوند.
محتوای رنگ ها
رنگ ها با استفاده از نشان گذاری مبنای 16 برای ترکیب مقدار رنگ قرمز و سبز آبی معرفی می شوند. پایین ترین مقدار رنگی که می توان به یک منبع رنگی داد صفر است (hex #00) و بالاترین مقدار 255 است(hex #ff).
این جدول حاصل ترکیب منابع نوری قرمز و سبز و آبی را نشان می دهد:
رنگ
مبنای 16
rgb
#000000
rgb(0,0,0)
#FF0000
rgb(255,0,0)
#00FF00
rgb(0,255,0)
#0000FF
rgb(0,0,255)
#FFFF00
rgb(255,255,0)
#00FFFF
rgb(0,255,255)
#FF00FF
rgb(255,0,255)
#C0C0C0
rgb(192,192,192)
#FFFFFF
rgb(255,255,255)
نام رنگ ها
یک کلکسیون از نام رنگ ها بوسیله بیشتر مرورگرها پشتیبانی می شود. توجه: فقط 16 رنگ توسط استاندارد W3C HTML4.0 پشتیبانی می شود ( aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white , yellow ). برای تمام رنگ های دیگر ، شما باید از مقدار شما باید از مقدار مبنای 16 رنگها استفاده کنید.
رنگ
مبنای 16
نام رنگ
#F0F8FF
AliceBlue
#FAEBD7
AntiqueWhite
#7FFFD4
Aquamarine
#000000
Black
#0000FF
Blue
#8A2BE2
BlueViolet
#A52A2A
Brown
رنگ های ایمن وب
چندین سال پیش که کامپیوترها فقط 256 رنگ متفاوت را پشتیبانی می کردند ، لیستی از 216 رنگ ایمن وب بعنوان استاندارد وب پیشنهاد شد. دلیل این پیشنهاد آن بود که سیستم عامل های مایکروسافت و Mac از 40 رنگ ثابت از پیش تعیین شده سیستمی استفاده می کردند.
جدول متقاطع 216 رنگ
این جدول متقاطع 216 رنگ ایمن وب در اصل برای اطمینان از اینکه همه کامپیوترها ، همه رنگ های آن را هنگامی که پالت رنگ 256 تایی اجرا می شود ، دقیق نشان خواهند داد ساخته شد.
یک پس زمینه خوب می تواند ظاهر یک سایت را واقعا عالی کند.
مثالها
رنگ زمینه و متن خوب مثالی از رنگ زمینه و رنگ متن خوب که خواندن متن را آسان می کند.
رنگ زمینه و متن نامتناسب این مثال نشان می دهد که اگر رنگ زمینه و متن صفحه نامناسب انتخاب شوند، خواندن آن چه اندازه مشکل می شود.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
پس زمینه ها
برچسب <body> دو موجودیت دارد که شما می توانید با استفاده از آن پس زمینه را تعیین کنید. پس زمینه می تواند یک رنگ یا تصویر باشد.
Bgcolor
موجودیت Bgcolor ، رنگ پس زمینه یک صفحه HTML را تعیین می کند.محتوای این موجودیت می تواند یک عدد مبنای 16 ، یک مقدار RGB یا نام یک رنگ باشد:
< body bgcolor="#000000" > < body bgcolor="black" > < body bgcolor="rgb(0,0,0)" >
خطوط بالا رنگ پس زمینه را به رنگ مشکی ست می کنند.
پس زمینه
موجودیت Background یک تصویر را برای پس زمینه یک صفحه HTML تعیین می کند . محتوای این موجودیت url تصویری است که شما می خواهید از آن استفاده کنید. اگر تصویر کوچکتر از پنجره مرورگرتان است ، تصویر خودش را تکرار می کند تا پنجره مرورگرتان را پرکند.
< body background="./content/fa/home/background/clouds.gif" > < body background="http://www.html.ir/clouds.gif" >
url می تواند مرتبط باشد (مثل خط اول) ویا کامل باشد(مثل خط دوم). توجه: اگر شما می خواهید از یک تصویر در پس زمینه استفاده کنید باید به خاطر داشته باشید:
آیا تصویر پس زمینه زمان بارگیری را بهبود می بخشد؟
آیا تصویر پس زمینه با تصاویر دیگر در صفحه خوب به نظر می رسد؟
آیا تصویر پس زمینه با رنگ متن ها خوب به نظر می رسد؟
آیا تصویر پس زمینه هنگامی که در صفحه تکرار می شود ، خوب به نظر می رسد؟
آیا تصویر پس زمینه مرتبا تمرکز را از متن می گیرد؟
نکات پایه ای-اطلاعات مفید
bg color, background و موجودیت های متن در برچسب <body> در آخرین نسخه HTML بد دانسته شده است. کنسرسیوم شبکه گسترده جهانی(w3c) این موجودیت ها را از نظریه های خود حذف کرده. به جای آن از CSS باید استفاده کرد(برای معرفی طرح بندی و نمایش خواص عناصر).
مثالهای بیشتر
عکس زمینه خوب در این مثال، مناسب بودن عکس زمینه و رنگ متن، که باعث خواناتر شدن متن شده، نشان داده شده است.
عکس زمینه خوب 2 این مثال نیز مانند مثال پیش نمونه دیگری از این تناسب خوب را نشان می دهد.
عکس زمینه نامناسب نامناسب بودن عکس و رنگ متن، باعث سختی خواندن متن می شود. مثال را ببینید.
نمایش عکس این مثال چگونگی نمایش عکس را نشان می دهد.
نمایش عکس از محلی دیگر در صورتیکه عکس مورد نظر در محلی دیگر باشد(آدرسی در شبکه)، می توانید برای نمایش آن، از این مثال کمک بگیرید.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
برچسب Images و موجودیت Src
در HTML عکس ها با برچسب <img > معرفی می شوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیت هاست و برچسب پایانی ندارد. برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویر:
<"img src="url >
url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در دایرکتوری "images" در "www.html.ir" دارای این url است:
http://www.html.ir/images/boat.gif
مرورگر تصویر را جایی قرار می دهد که بر چسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.
موجودیت Alt
موجودیت Alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است:
<"img src="url" alt="Big Boat>
اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.
نکات پایه ای - اطلاعات مفید
اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این بهترین توصیه من اینست که از تصاویر به دقت استفاده کنید.
مثالهای بیشتر
عکس زمینه این مثال، روش نمایش عکسی به عنوان زمینه را نشان می دهد.
محل نمایش عکس به کمک این مثال می توان محل نمایش عکس، نسبت به متنی که عکس درون آن قرار دارد، را تعیین کرد.
تعیین محل نمایش عکس در پاراگراف می خواهید عکسی را درون یک پاراگراف نمایش دهید. برای تعیین محل آن نسبت به متن پاراگراف، به این مثال توجه کنید.
تغییر اندازه عکس این مثال روش تعیین اندازه عکس را برای نمایش، نشان می دهد.
نمایش متن جایگزین چگونه می توان برای یک عکس متن جایگزین انتخاب کرد. زمانیکه عکس داخل صفحه کامل بار نشده و یا زمانیکه کاربر علاقه ای به دیدن عکسهای صفحه ندارد، به کمک تعیین متن جایگزین، شرحی درباره ی عکس به کاربر داده می شود. به این مثال توجه کنید.
نقشه این مثال، روش تقسیم یک عکس به نواحی مختلف(همانند یک نقشه) را نشان می دهد. هر یک از این نواحی، یک فراپیوند هستند.
نقشه (2) در این مثال، باز هم عکس تبدیل به یک نقشه می شود. با این تفاوت که ما آدرس تک تک نقاط عکس را در اختیار داریم. در صورتی که اشاره گر را روی نقشه حرکت دهید، موقعیت آن روی میله وضعیت نمایش داده می شود.
فرم های HTML به منظور انتخاب انواع مختلف ورودی های کاربر استفاده می شوند.
مثالها
فیلد متنی این مثال طریق ساخت یک فیلد متنی را نشان می دهد. کاربر می تواند اطلاعات خود را در این فیلد بنویسد.
فیلد رمزعبور گاهی نیاز است که مقداری که کاربر وارد می کند، دیده نشود. برای ایجاد چنین فیلد ورودی، از فیلد رمز عبور استفاده می کنیم. این مثال روش ساخت این فیلد را نشان می دهد.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
فرم ها
یک فرم ، منطقه ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی می شود.
<form> <input> <input> </form>
input
در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می شود.انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند.
فیلدهای متنی
فیلد متنی هنگامی استفاده می شود که شما می خواهید کاربر ، حروف ، اعداد و... را تایپ کند.
First name:
Last name:
<form> First name: <input type="text" name="firstname" > <br> Last name: <input type="text" name="lastname" > </form>
توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است.
دکمه های رادیویی
دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی انتخاب، یکی را انتخاب کند.
<form> First name: <input type="radio" name="sex" value="male"> male <br> Last name: <input type="radio" name="sex" value="female" > femail </form>
توجه کنید که فقط یک گزینه می تواند انتخاب شود.
چک باکس ها (check boxes)
چک باکس ها زمانی استفاده می شوند که شما بخواهید کاربر از میان تعداد محدودی انتخاب ، یک یا چند گزینه را انتخاب کند.
<form> <input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car" > I have a car </form>
عنصر Action فرم و دکمه Submit
هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر فرستاده می شوند. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی انجام می دهد.
اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد.آن صفحه به شما ورودی های دریافتی را نشان خواهد داد.
مثالهای بیشتر
چک باکس ها روش ساخت فیلد چک باکس(انتخاب) در این مثال توضیح داده شده است. کاربر می تواند موارد مورد نظر خود را انتخاب کند.
دکمه رادیویی دکمه های رادیویی مانند این مثال ساخته می شوند. از این دکمه ها برای انتخاب یک مورد از چند مورد استفاده می شود.
انتخاب کرکره ای ساده این فیلد انتخابی، همانند دکمه رادیویی، برای انتخاب یک مورد از چند مورد، به کار می رود. با این تفاوت که فهرست عناصر بصورت کرکره، باز و بسته می شوند؛ و عنصر انتخابی فقط دیده می شود.
فیلد کرکره ای (2) این مثال نیز فیلد کرکره ای را نمایش می دهد. با این تفاوت که برای این فیلد، یکی از مقادیر فهرست انتخابف به عنوان مقدار پیش فرض تعیین شده است.
ناحیه متنی تفاوت این فیلد با فیلد متنی این است که در این فیلد، خطهای نا محدودی می توان وارد کرد. یک ورودی چند خطی. روش ساخت این فیلد در این مثال آمده است.
دکمه این مثال روش ساخت دکمه را توضیح می دهد. نوشته روی دکمه را می توانید خودتان تعیین کنید.
مجموعه فیلدها به کمک این سازه می توان حاشیه و عنوانی را برای یک یا چند فیلد ورودی تعیین کرد. این دسته بندی به کاربر کمک می کند که مجموعه اطلاعات مرتبط با هم را بهتر تشخیص دهد.
HTML از لیست های مرتب ، نامرتب و تعریفی پشتیبانی می کند.
مثالها
لیست بدون ترتیب این مثال لیستی که در آن ترتیب اهمیت ندارد را نمایش می دهد.
لیست با ترتیب در این مثال شما لیستی، دارای ترتیب می بینید.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
لیست های نامرتب
یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشان گذاری می شوند (معمولا یک دایره سیاه کوچک).یک لیست نامرتب با یک برچسب <ul> آغاز می شوند.هر کدام از اقلام لیست با برچسب <li> آغاز می شوند.
<ul> <li> Cofee <ul> <li> Milk <ul> </ul>
Cofee
Milk
داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
لیست های مرتب
یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشان گذاری می شوند.یک لیست مرتب با برچسب <ol> آغاز می شود.هرکدام از اقلام لیستبا برچسب <li> آغاز می شوند.
<ol> <li> Cofee <ul> <li> Milk <ul> </ol>
Cofee
Milk
داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
لیست های تعریفی
یک لیست تعریفی ، لیستی از اقلام نیست. این لیست ، لیستی از عبارات و توضیحات آن عبارات است.یک لیست تعریفی با برچسب<dl> آغاز می شود.هر کدام از اقلام لیست تعریفی با برچسب <dt> آغاز می شود.هر تعریف در لیست تعریفی با برچسب <dd> آغاز می شود
<dl> <dt> Cofee </dt> <dd> Black hot drink </dd> <dt> Milk </dt> <dd> White cold drink </dd> </dl>
Cofee
Black hot drink
Milk
White cold drink
داخل تعاریف یک لیست تعریفی (برچسب <dd>)شما می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
جدولها این مثال به ما نشان می دهد که چگونه می توانیم یک جدول بکشیم.
حاشیه جدول این مثال حاشیه های مختلف جدول را نشان می دهد.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
جدول ها
جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.
اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (border) استفاده کنید.
این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.
عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.
به وسیله قابها شما می توانید بیش از یک صفحه وب را در یک پنجره مرورگر نشان دهید.
مثالها
قابهای عمودی دراین مثال شما سه قاب عمودی با محتوای مختلف، می بینید.
قابهای افقی این مثال، قابهای افقی را نمایش می دهد.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
قابها
هر پرونده HTML یک قاب نامیده می شود ، و هر قاب نیز مستقل از دیگر قاب هاست. بدی استفاده از قاب ها این است که :
توسعه دهنده وب باید پیوسته رد بیشتر پرونده های HTML را داشته باشد.
چاپ کردن کل صفحه مشکل است
برچسب Frameset
برچسب <frameset> معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.
برچسب Frame
برچسب <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.
در مثال پایین یک frameset با دو ستون داریم. ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است. پرونده "HTML "frame_a.html در ستون اول قرار گرفته و پرونده "HTML "frame_b.html در ستون دوم قرار داده شدهاست.
اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید "noresize="noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند. مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.
مثالهای بیشتر
برچسب noframes در صورتیکه مرورگر، امکان نمایش قابها را نداشت، به کمک این برچسب، می توان نمایش مناسبی را ارایه کرد.
قاب محتوا این مثال روش ساخت یک قاب محتوایی را نشان می دهد. صفحه از دو قاب اصلی ساخته شده که یکی ازآنها، فهرست و دیگری محتوای سرفصل انتخابی را نمایش می دهند. در قاب فهرست، سه فراپیوند به صورت زیر تعریف شده که موجودیت traget هر فرا پیوند به نام قاب محتوا اشاره می کند.
قاب محتوا، محتوای هر یک از این فراپیوندها را نمایش می دهد.
قاب درجا این مثال روش استفاده از قابهای درجا را نشان می دهد(این قابها را می توان به طور مستقیم، داخل html استفاده کرد و دیگر نیازی به قاب بندی کل صفحه نیست).
پرش به قسمت خاصی در داخل یک قاب به کمک این روش می توان به قسمتی از محتوای قاب، در هنگام نمایش پرش کرد. برای این منظور پس از آدرس محتوای قاب، فراپیوند محل مورد نظر را قرار می دهیم. به مثال توجه کنید.
HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... . دستورالعمل ساخت یک Anchor
<a href="url"> متنی که نمایش داده می شود </a>
در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود. این Anchor یک پیوند به html.ir را معرفی می کند:
<a href="http://www.html.ir"> html.ir را ملاقات کنید </a>
با موجودیت هدف شما می توانید معرفی کنید که پرونده های پیوند داده شده کجا باز شوند. خط زیر پرونده ای را در یک پنجره مرورگر جدید باز خواهد کرد.
<a href="http://www.html.ir/" target="_blank"> html.ir را ملاقات کنید </a>
برچسب Anchor و موجودیت نام
موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. هنگامی که ما از یک Anchor نام دار استفاده می کنیم، می توانیم پیوندهایی بسازیم که مستقیما بتواندبه یک بخش خاص در صفحه برود. در ست به جای آنکه بگذاریم کاربر در صفحه بگردد. در پایین طریقه نوشتن یک Anchor نام دار آمده است.
<a name="lable">متنی که نوشته می شود</a>
از موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. نام یک Anchor می تواند هر متنی که شما بخواهید باشد.خط زیر یک Anchor نام دار را معرفی می کند.
<a name="tips"> بخش اطلاعات مفید </a>
شما باید توجه کنید که یک Anchor نام دار، در یک حالت خاص نشان داده نمی شود. برای پیوند مستقیم به بخش "Tips" یک علامت "#" و نام آن Anchor را به انتهای آن url اضافه کنید:
<a href="http://www.html.ir/links.html#Tips"> پرش به بخش اطلاعات مفید </a>
یک فرا پیوند به بخش نکات مفید از میان فایل "Links.html" شبیه به این خواهد بود
<a href="#Tips"> پرش به بخش نکات مفید </a>
نکات پایه ای - اطلاعات مفید
همیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید
href="http://www.html.ir/links.html"
شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:
href="http://www.html.ir/links.html/"
از Anchor نام دار معمولا برای ساخت یک جدول از محتویات در ابتدای یک پرونده بزرگ استفاده می شود. به هر بخش در میان پرونده یک Anchor نام دار داده شده و پیوند به هرکدام از این Anchor ها در بالای پرونده قرار داده شده است. اگر یک مرورگر نتواند Anchor نام داری را که مشخص شده است را پیدا کند به ابتدای آن پرونده رفته و هیچ خطایی اتفاق نمی افتد.
مثالهای بیشتر
ارجاع به فراپیوند، در پنجره جدید در این مثال، روش ساخت فراپیوندی نشان داده می شود، که در آن، کاربر پس از کلیک روی فراپیوند، صفحه فعلی را از دست نداده و پنجره جدیدی برای نمایش صفحه پیوندی، برای او، باز می شود.
پیوند به محلی در همین متن فرض کنید در ابتدای متن، فهرستی از محتوای متن نوشته اید. اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه عمل می کنیم؟ فراپیندهای این مثال، چگونگی این کار را نشان می دهند.
شکستن حصار قاب اگر صفحه شما، داخل یک قاب نمایش داده می شود، فرا پیوندهای آن، محتوای قاب را تغییر می دهند. برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال عمل کنید.
فراپیوند Email در صورتیکه آدرس فراپیوند شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.
تعدادی از کاراکترها مثل کاراکتر ">" یک معنی خاص در HTML دارندو از این رو نمی توان از آنها در متن ها استفاده کرد. برای نشان دادن علامت کوچکتر از ">" ما باید از یک موجودیت کاراکتر استفاده کنیم.
موجودیت های کاراکتر
تعدادی از کاراکترها یک معنی خاص در HTML دارند.مثل علامت کوچکتر از ">" که شروع یک برچسب HTML را معرفی می کند.اگر ما بخواهیم که مرورگر عملا این کاراکتر ها را نشان بدهد باید در منبع کد HTML موجودیت های کاراکتر را وارد کنیم. یک موجودیت کاراکتر سه بخش دارد: یک علامت "&" ، یک موجودیت اسم یا یک علامت "#" و یک موجودیت عددو در نهایت یک ";". برای نمایش یک علامت کوچکتر از در یک پرونده HTML ما باید بنویسیم: ;lt& یا ;60#& . فایده استفاده از یک نام بجای یک عدد این است که به خاطر سپردن یک نام آسان تر است و اشکال آن این است که همه مرورگر ها موجودیت کاراکترها را پشتیبانی نمی کنند در حالی که تقریبا همه مرورگرها خیلی خوب از موجودیت عددها پشتیبانی می کنند. توجه کنید که موجودیت ها حساس به حروف کوچک و بزرگ هستند.
فاصله بدون شکست
یکی از موجودیت کاراکترهای پر استفاده در HTML فاصله بدون شکست است. بطور عادی HTML فاصله ها را در متن شما کوتاه خواهد کرد ، اگر شما ده فاصله در متن خود بگذارید HTML 9 تای آن را از بین خواهد برد. برای اضافه کردن فاصله در متنتان ، از موجودیت کاراکتر ;nbsp& استفاده کنید.
آیا شما تا حالا صفحه ای را دیده اید که از دیدن آن شگفت زده شده با شید وبگویید چگونه این کار را انجام داده اند؟ برای پیدا کردن آن بسادگی بروی گزینه view روی نوار ابزار کلیک کنید وگزینه source یا page source را انتخاب کنید.آن یک پنجره ای را باز خواهد کرد که به شما HTML واقعی آن صفحه را نشان خواهد داد.
مهمترین برچسب در HTML برچسب هایی هستند که سر تیتر ها ، پاراگراف ها و پرش به خط بعد را معرفی می کنند. بهترین راه یادگرفتن HTML کار کردن با مثال هاست.
مثالها
ساده ترین Html این مثال ساده ترین نمونه html است که در آن، از کمترین برچسب ممکن، استفاده شده است. در این مثال جمله نوشته شده درون برچسب body، نمایش داده می شود.
پاراگراف ساده این مثال نشان می دهد، که نوشته داخل برچسب پاراگراف، چگونه نمایش داده می شود.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
سر تیتر ها
سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از سر تیترها اضافه می کند.
<h1> This is a heading </h1> <h2> This is a heading </h2> <h3> This is a heading </h3> <h4> This is a heading </h4> <h5> This is a heading </h5> <h6> This is a heading </h6>
پاراگراف ها
پاراگراف ها با برچسب <p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.
<p> This is a paragraph </p> <p> This is another paragraph </p>
پرش به خط بعد
برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.
توضیحات در HTML
برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.
<!--This is a comment-->
توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز ندارید.
نکات پایه ای - اطلاعات مفید
هنگامی که شما یک متن HTML می نویسید هرگز نمی توانید مطمئن باشید این متن در یک مرورگر دیگر چطور نشان داده می شود.تعدادی از مردم صفحه نمایش بزرگ کامپیوتر دارند و تعدادی کوچک. هر بار که کاربر اندازه پنجره را تغییر دهد متن دوباره قالب بندی خواهد شد. هرگز سعی نکنید که با اضافه کردن خطوط خالی و فاصله در متن آن را در ویرایشگرتان قالب بندی کنید. HTML فاصله ها را از متن حذف می کند، هر تعدادی از فاصله ها تنها به یک فاصله تبدیل می شوند.
مقداری اطلاعات اضافی
در HTML یک خط جدید بعنوان یک فاصله حساب می شود. استفاده کردن از برچسب خالی پاراگراف
برای وارد کردن یک خط خالی یک عملکرد بد است.بجای آن از برچسب <br>استفاده کنید.(اما از <br> برای ساخت لیست خالی استفاده نکنید ، صبر کنید تا در مورد لیستهای HTML یاد بگیرید) شما ممکن است متوجه باشید که پاراگراف ها می توانند بدون بستن برچسب <p/> نوشته شوند.نسخه بعدی HTML اجازه نخواهد داد که هیچ برچسب پایانی را جا بیندازید.HTML بطور خود کار یک خط خالی اضافی قبل و بعد از برخی عناصر اضافه می کند مثل قبل و بعد از پاراگراف و قبل و بعد از سر تیتر ها.ما از یک خط افقی (برچسب<hr>) برای جدا کردن بخش های مختلفدرسمان استفاده کرده ایم.
مثالهای بیشتر
پاراگرافهای بیشتر این مثال رفتار برچسب پاراگراف را با نمایش چند نمونه از آن، نشان می دهد.
سر خط با استفاده از برچسب سر خط، به ابتدای خط بعد می رویم. این مثال رفتار این برچسب را نشان می دهد.
مشکلات نمایش با این مثال، متوجه می شوید، در صورتی که از برچسبها استفاده نکنید، صفحه بندی شما، نادیده گرفته می شود.
سر فصل در این مثال طریق متمایز کردن جملات سر فصل را می بینید.
سر فصل در وسط خط این مثال نشان می دهد که چگونه می توان،محل نمایش جمله، در خط را تعیین کرد.
خط افقی این مثال روش نمایش یک خط افقی را نشان می دهد.
توضیحات مخفی گاهی، نیاز به نوشتن توضیحی درباره html خود دارید. این توضیح باید در حالت نمایش دیده نشود. این مثال روش نوشتن چنین متن هایی را، داخل html، نشان می دهد.
رنگ زمینه می توانید رنگ زمینه html خود را تعیین کنید. این مثال را ببینید.
پرونده های HTML فایل های متنی هستند که با عناصر HTML ساخته شده اند.عناصر HTML با استفاده از برچسب های HTML تعریف می شوند.
برچسب های HTML
برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند
بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند
این کاراکتر های محاط کننده قلاب نامیده می شوند
بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>
اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است.
عناصر HTML
مثال HTML در صفحه قبل را بخاطر بیاورید. این یک عنصر HTML است:
<b>This text is bold</b> عنصر HTML با یک برچسب شروع ، آغاز می شود:<b> محتوای عنصر HTML: This text is bold عنصر HTML با یک برچسب پایانی تمام می شود:<b/> هدف برچسب <b> این است که تعریف کند عناصر HTML باید بصورت برجسته نشان داده شوند این نیز همچنین یک عنصر HTML است:
<body> This is my first homepage.<b>This text is bold</b> </body>
این عنصر HTML با برچسب آغازین <body> شروع و با برچسب پایانی <body/> تمام می شود. هدف برچسب <body> این است که عناصر HTML را که محتوای بدنه HTML هستند تعریف کند.
چرا ما از برچسب هایی با حروف کوچک استفاده می کنیم؟
ما فقط گفتیم که برچسب های HTML حساس به حروف کوچک و بزرگ نیستند و <B>همان معنی <b>را می دهد.هنگامی که شما به وب گردی می پردازد، متوجه خواهید شد که بیشتر آموزش ها در مثال هایشان از حروف بزرگ برچسب های HTML استفاده می کنند.ما همیشه از برچسب های حروف کوچک استفاده می کنیم. چرا؟ اگر شما می خواهید خود را برای نسل های بعدی HTML آماده کنیدشما باید شروع کنید و از برچسبهای حروف کوچک استفاده کنید.کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.
عناصر برچسب:
برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند: <body> با اضافه کردن عنصر <bgcolor>شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:<"body bgcolor="red> این برچسب یک جدول HTML را معرفی می کند:<table>. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد: <"table border="0> عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار" عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند
حالتهای کتیشن ، 'قرمز' یا "قرمز"؟
محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند لازم است که از تک کتیشن استفاده کنیم: 'Name='john "shotgun" Nelson
با آموزش HTML شما یاد خواهید گرفت چگونه از HTML در ساخت صفحات وب خودتان استفاده کنید. یادگیری HTML بسیار ساده است و شما از آن لذت خواهید برد.
یک فایل HTML چیست؟
HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
یک فایل HTML باید دارای پسوند html. یا html. باشد
یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود
آیا می خواهید یکبار امتحان کنید؟
اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.
<html> <head> <title>title of page </title> </head> <body> This is my first home page.<b> This text is bold </b> </body> </html>
فایل را تحت عنوان "mypage.htm"ذخیره کنید. مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.
مثال تشریح شده
اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است. متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد. متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد. متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد.
پسوند htm. یا html. ?
هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.
به ویرایشگر های HTML توجه کنید:
شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill. اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.
پرسش و پاسخ:
س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟ ج:اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل"C:mypage.htm". همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید. س:من سعی کردم فایل HTMLام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟ ج:مرورگر صفحه را کاشه(cach) کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر آن را نمی داند. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند. س:از چه مرورگری باید استفاده کنیم؟ ج:شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer, Netscape,Mozilla و Opera. هر چند که تعدادی از مثال های مادر کلاس های پیشرفته به آخرین نسخه مرورگرها نیاز دارند.
کتاب زبان عمومی پارسه در ۹۶ صفحه تمامی مباحث پیرامون زبان عمومی را به طور جامع پوشش می دهد در این کتاب در مورد انواع اسم ها، انواع ضمایر، انواع افعال و زمان هایشان، انواع صفات، حروف اضافه و… به طور کامل بحث شده است. این کتاب برای داوطلبین آزمون ارشد جهت آموزش، جمع بندی و تست توصیه می شود...
این پروژه مدیریت بیمارستان درس پایگاه داده می باشد.این پست شامل فایل پی دی اف این پروژه و همچنین شامل نمودار مراحل احداث بیمارستان ، چارت کلی سازمان ، نمودار ER ، روابط موجود در بین انواع موجودیت ها و شرح نحوه انتقال کلید ها بین جدول ها ، جداول در پایگاه داده و غیره برای شما عزیزان گردآوری شده است.
پیش نمایش پروژه
مشخصات:
حجم فایل:1.12 مگابایت رمز فایل: www.softroz.com منبع: سافت روز
روبات ساخته شده با استفاده از قطعات لگو و همچنین گلکسی S4 به‌عنوان مغز متفکر،
رکورد مرتب‌سازی مکعب روبیک را شکست
در صورتی که با مکعب روبیک آشنا باشید، با نحوه‌ی ساخت و کار با آن آشنا هستید. دو مهندس انگلیسی موفق به ساخت روباتی با استفاده از قطعات پلاستیکی شده‌اند که قادر است در عرض 3.253 ثانیه یک مربع روبیک را به شکل اول آن بازگرداند. نکته‌ی جالب توجه در مورد این روبات، استفاده از یک دستگاه گلکسی S4 سامسونگ به‌عنوان مغز متفکر آن است.
این روبات که Cubestormer 3 نام گرفته، قادر است تا در عرض 3.253 ثانیه یک مربع روبیک به‌هم خورده را به حالت اول آن بازگرداند که رکورد ثبت شده توسط آن نسبت به نسل دوم از این روبات به میزان 62 درصد بهبود یافته است. این روبات علاوه بر بهبود زمان مورد نیاز توسط نسل پیشین، رکورد مربوط به سریع‌ترین انسان را که قادر به مرتب‌سازی این مکعب است، از آن خود کرده است. متز والک هلندی قادر است تا این عمل را در عرض 5.55 ثانیه به انجام برساند.
این روبات پلاستیکی از قطعات لگو ساخته شده است، اما این مساله به معنای استفاده‌ی صرف از قطعات لگو نبوده و دو مهندس انگلیسی از بازوها، محرک‌ها و یک دستگاه گلکسی S4 نیز بهره برده‌اند. این تلفن‌هوشمند اندرویدی قادر است تا به واسطه‌ی یک اپلیکیشن اختصاصی توسعه داده شده در این اکوسیستم با تحلیل حالات مختلف، یک مکعب روبیک را در زمان ذکر شده مرتب کند. دیویدگیلدی که یکی از کارمندان کمپانی ARM است در کنار مایک‌دوبسون در زمانی به طول 18 ماه و فقط در زمان‌های بیکاری این روبات را توسعه داده‌اند.
براساس گزارش منتشر شده در مورد روند ساخت این روبات که به نقل از گیلدی نگاشته شده است، سخت‌ترین و پیچیده‌ترین قسمت از ساخت این روبات، مربوط به بخشی است که به ایجاد رابطه بین موتورهای محرک و تلفن‌هوشمند مربوط است. طراحی این سیستم به چند بخش اصلی تقسیم شده است که شامل یک اپلیکیشن که قادر به حل یک مکعب بوده و آن را مرتب کند، بخشی از مساله است. انتقال دستورات لازم در جهت مرتب‌سازی به بازوها در زمان مناسب نیز یکی از چالش‌های اساسی به شمار می‌‌رود. این انتقال باید به‌گونه‌ای باشد که نه روبات آسیب ببیند و نه ترتیب حرکات دچار اختلال شود.
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
آمار
وب سایت:
