منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۶ آبا ۱۳۹۳ در طراحی وب | ۰ دیدگاه

آموزش جامع HTML » (قسمت سوم):

 

سلام به همه دوستداران طراحی و برنامه نویسی وب

همانطوری که در آخر پست قبلی به شما قول داده بودم در این پست به عنوان اولین نکته باید به صفت color و روش استفاده اون در صفحات HTML بپدازیم پس شما را به ادامه یادگیری HTML5 دعوت می کنم:

اما چگونه باید از صفت color استفاده کنیم:

دو روش عمده برای استفاده از این صفت پرکاربرد برای تعیین رنگ های المان ها می توان در نظر گرفت

استفاده از نام رنگ ها:

می توان به عنوان مقداری برای این صفت از نام رنگ ها استفاده کرد که تعداد آن ۱۶ عدد می باشد که به قرار زیر است:

Black, silver, gray, white, maroon, red, purple, fushia, green, lime, olive,

yellow, navy, blue, teal, aqua

روش دومی که بسیار پرکاربرد تر می باشد این است که از یک تابع مهم به نام rgb به صورت زیر استفاده می شود که با مقدار دادن به سه آرگومان این تابع می توان اعدادی بین ۰ تا ۲۵۵ قرار داد و با ترکیب این اعداد می توان به رنگ های مختلفی رسید

مثال

مثال

noshade:

معمولا خط هایی که در صفحات HTML ایجاد می کنیم دارای یک خط باریک در زیر خود به عنوان سایه هستند و ما با استفاده از این صفت می توانیم این افکت سایه را برداریم و خط ساده رسم کنیم.

align:

این صفت جزو مواردی است که برای تنظیم چپ و راست و یا مرکز بودن تعیین می گردد که خوب طبق قبل که راجع به این صفت توضیح داده بودم برای مقداردهی می توان سه عبارت left ,right , center را برای این صفت در تگ </hr> قرار داد.

اما هم اکنون به سراغ یکی از مهمترین تگ های HTML می رویم و این تگ درواقع به شدت و حتما در صفحات HTML استفاده می شود و دارای کاربرد بسیار بالایی است پس با دقت به ادامه مطلب توجه کنید:

آشنایی با تگ <font>

صفحه HTML ای را نمی توان پیدا کرد که از این تگ برای ساختار صفحات خود استفاده نکند و وظیفه این تگ همانگونه که از معنی لغت درون آن بر می آید تعیین اندازه و رنگ و نوع نوشتار نوشته ها در بین این تگ است.

این تگ دارای صفتهای مهمی است که به آن می پردازیم:

face:

برای تعیین نوع فونت نوشتار از این صفت استفاده می گردد  به این صورت که نام فونت ها به صورت پشت سر هم به عنوان مقدار همراه با , از هم جدا می شوند و در تگ قرار می گیرند . زمانی که این کد اجرا می شود اگر فونت اول در سیستم کاربر نصب نباشد فونت دوم اجرا می شود و اگر فونت دوم نصب نباشد فونت سوم اجرا می شود و الی آخر …

Color:

این صفت را که در چند خط بالا برایتان مطرح کردم دقیقا می توان در تگ <font> هم استفاده کرد و مقادیر این صفت هم به همان صورت قبل است.

Size:

صفتی است برای تعیین اندازه سایز نوشتار بین تگ <font> است که به دو صورت عمده مقداردهی می گردد:

مقادیر مطلق:

این مقادیر در وقع اعداد از ۱ تا ۷ است که به ترتیب برای سایز به برده می شود و به ترتیب  شروع به بزرگ تر شدن اندازه با افزودن شماره می شود ۱ از همه کوچکتر و ۷ از همه بزرگتر است.

مقادیر نسبی:

اعداد بین -۷ تا +۷ را به خود می گیرند و در واقع اندازه فونت این صفت نسبت به اندازه فونت تگ </basefont> سنجیده می شود به این صورت که اگر عدد به کار برده شده مثبت باشد به همان تعداد به اندازه مشخص شده در </basefont> اضافه می شود.

در مورد این تگ در زیر صحبت می کنیم:

 

تگ</basefont>:

وظیفه این تگ همانگونه که از معنی آن بر می آید تعیین اندازه و رنگ و نوع فونت پایه در صفحات است و حتما هم باید در تگ <head>  از آن استفاده گردد که بیشتر برای این استفاده می شود که اندازه تگ های <font> داخل صفحه نسبت به اندازه این تگ تعیین شود.

این تگ از تمام صفت های گفته شده برای تگ <font> پشتیبانی می کند ولی اگر به عنوان اندازه مقداری برای این صفت اندازه </basefont> تعیین نگردد به صورت خودکار مقدار ۳ درنظر گرفته می شود و این نکته را هم فراموش نکنید که در این تگ فقط می توان از مقادیر مطلق برای تعیین اندازه پایه بهره برد و استفاده از اندازه های نسبی مجاز نیست.

مثال زیر پاسخگوی موارد فوق می باشد:

1

نتیجه در مرورگر به صورت زیر است:

نتیجه کد فوق

نتیجه کد فوق

عناصر بلاکی و درون خطی:

در اینجا یک مفهوم ساده ولی مهم را بررسی می کنیم که دانستن آن خالی از لطف نیست :

عناصر بلاکی در واقع به عناصری گفته می شود که همیشه از یک خط جدید شروع می شوند و خود می توانند شامل عناصر بلاکی و دورن خطی دیگر باشند در واقع منظورم این است که این گونه عناصر همیشه یک خط خالی در ابتدا و انتهای خود ایجاد می کنند تگ هایی چون <h> و <hr/> و <p> از این دسته از عناصر هستند.

اما در مقابل آن عناصر درون خطی برای نمایش یک متن ساده تعیین می شود و هیچ موقع از خط جدید آغاز نمی شوند.

این تگ ها مثل <small><image> و <a> هستند.

تگ <meta>:

فعلا فقط در همین حد بدانید که این تگ در صفحات HTML برای عنوان کردن یکسری اطلاعات صفحه برای ربات های جست و جو گر و خزنده در سطح وب استفاده می شود و معمولا دارای اطلاعاتی از قبیل کلمات کلیدی سایت و چند خط در مورد کل فعالیت سایت و … است.

تگ <marquee>:

یکی از تگ های جالبی که در صفحات HTML می توان به کار برد استفاده از همین تگ <marquee> است که در واقع می تواند عناصر داخل صفحه مثل عکس و متن و … را به حرکت در آورد و به صورت عبوری در صفحه مرورگر نمایش دهد.

صفتهایی که برای این تگ تعیین شده را در زیر بررسی می کنیم:

صفت های width و height

بله همانگونه که متوجه شدید این دو صفت به ترتیب برای تعیین عرض و ارتفاع محدوده حرکت عناصر تعیین می شود که مقدار آن هم بر حسب px (پیکسل) می باشد.

Bgcolor

این صفت دقیقا مانند صفت color عمل می کند و مقداردهی آن هم دقیقا مانند همان صفت است و برای تعیین رنگ محدوده حرکت عناصر است.

Behavior

نحوه رفتار عناصر در داخل تگ <marquee> را تعیین می کند که دارای مقادیر زیر است:

Scroll

نحوه ورود متن که از یک طرف وارد و از طرف دیگر خارج شود.

Slide

متن از یک طرف وارد و در طرف دیگر می ایستد.

Alternate

متن یک حالت رفت و برگشتی در صفحه مرورگر خواهد داشت.

Scrollamount

فرض کنید که حرکت متون و یا تصاویر در صفحه را به راه رفتن و قدم زدن یک فرد تشبیه کنیم با این حساب این صفت حکم تعیین فاصله قدم های حرکت متن را دارد که مقادیر آن بر حسب px تعیین می گردد و با زیاد شدن این عدد طبیعتا متن با پرش بیشتری حرکت می کند.

Scrolldelay

این صفت هم تاخیر زمانی را برای حرکت تایین می کند مثلا اگر عدد این صفت را ۱۰۰۰ در نظر بگیریم تاخیر زمانی ۱ ثانیه ای بین هر قدم را تعیین کرده ایم.

Loop

صفت فوق برای تعیین تعداد تکرار حرکت را معلوم می کند و مقدار آن هم عددی صحیح است . اگر مایل هستید تا حرکت متن بارها ادامه یابد باید عددی منفی برای مقدار این صفت تعیین شود.

Direction

این صفت هم جهت حرکت متون را تایین می کند که مقادیر آن به صورت زیر بیان می شود:

Up

باعث حرکت عنصر مورد نظر به سمت بالا می شود.

Down

باعث حرکت عنصر مورد نظر به سمت پایین می شود.

Left

باعث حرکت عنصر مورد نظر به سمت چپ می شود.

Right

باعث حرکت عنصر مورد نظر به سمت راست می شود.

hspace

تعیین محدوده فاصله حرکت عناصر نسبت به راست و چپ صفحه را تعیین می کند و عددی بر حسب px یا درصد است.

vspcace

همین عمل فوق را برای تعیین فاصله نسبت به بالا و پایین محیط اطراف محدوده بر حسب px یا درصد بیان می کند.

بسیار خوب تا الان تقریبا تگ های مهم در صفحات HTML را مطرح کرده ام اما از اینجا به بعد هم نیاز به دقت و تمرین فراوانی برای یادگیری بهتر دارد پس خواهشا همراه با خواندن این مطالب بلافاصله به تمرین و اجرای کدها و تگ ها بپردازید.

آشنایی با لینک ها :

زمانی که شما در حکم یک کاربر اینترنتی وارد یک وبسایتی می شوید حتما با این موضوع مواجه شده اید که برای چرخیدن در یک سایت و سر زدن به صفحات مختلف آن سایت از کلیک بر روی برگه های مختلف سایت برای هدایت به آن صفحه خاص مثلا تماس با ما استفاده می کنید . وقتی از این لینک ها برای هدایت به صفحه دیگر در همان وبسایت استفاده می کنید درواقع در حال استفاده از لینک های داخلی هستید و هنگامی که روی عبارت و یا آیکونی کلیک کنید که به سایت دیگری منتقل شوید در واقع از لینک های خارجی استفاده کرده اید.

اما باید گفت که لینک های دیگری با عنوان های لینک های دانلود و لینک های لنگری و … در صفحات وب استفاده می شوند که در این درس مهمترین آن ها را مطرح می کنیم.

تگ <a>

در واقع این تگ برای ایجاد یک لینک استفاده می گردد که محتوای بین آن می تواند یک متن و یا یک تصویر و یا حتی ترکیبی از این دو باشد.

مثلا در قطعه کد زیر با کلیک بر روی عبارت TUTS.ir به سایت www.tuts.ir منتقل می شوید:

<a href=”http://www.tuts.ir” target=”_blank” > TUTS.ir </a>

اما این تگ مهم و پرکاربرد دارای صفت هایی می باشد که در ادامه به توصیف آن ها می پردازیم:

href

بله همانگونه که در مثال فوق مشاهده می کنید مقدار این صفت برابر آدرس سایتی است که قرار است با کلیک بر روی محتوای بین تگ <a> به آن جا برویم که می تواند آدرس یک صفحه دیگر و یا آدرس صفحه دیگری از همان سایت باشد و یا اینکه حتی آدرس یک فایل در سرور سایت باشد.

rel : این صفت خاص رابط صفحه مقصد با مبدا لینک را مشخص می کند.

rev: این صفت خاص هم رابط صفحه مبدا با مبدا لینک است.

مقادیر دو صفت فوق به قرار زیر است:

start ,next ,prev ,Content ,Index ,glossary ,copyright ,appendix ,help

hreflang

این صفت زبان به کار رفته در منبعی را که لینک به آن اشاره می کند نشان می دهد که مقادیر آن fa,en,fr و … است.

name

نامی برای لینک مورد نظر انتخاب می کنیم و باید این نام را به صورت منحصر به فرد انتخاب شود و با حروف a-z و یا A-Z آغاز شود.

target

حتما دیده اید که با کلیک بر روی یک لینک ممکن است محتوای آن به صورت یک پنجره مجزا و در صفحه دیگری باز شود و یا اینکه در همان صفحه به صورت پنجره کوچکی باز شود این صفت با مقادیری که به خود می گیرد دقیقا همین اقدام را انجام می دهد.

مقادیر این صفت به قرار زیر است:

_blank : لینک را کاملا در صفحه ای جدید باز می کند.

_self : لینک را در همان صفحه ای که لینک قرار دارد باز می کند.

_top : صفحه ای را در پنجره ای بدون فریم باز می کند.

_parent : لینک را در frameset تگ پدر باز می کند.

بسیار خوب دیگه فکر می کنم که این پست را تا همینجا نگه داریم و در جلسه آینده به ادامه توضیحات مهمی راجع به لینک ها بپردازیم و این را بدانید:

فقط تمرین کردن است که می تواند شما را به یک برنامه نویس حرفه ای تبدیل کند.

با تشکر از استاد احمد بادپی

تا پست بعدی خدا نگهدار

rgb(232,0,0)به رنگ قرمز

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!