هر چه بیشتر یاد بدی بیشتر یاد می گیری.مجله آموزشی آسان بود

طراحی صفحات وب سایت ، جلسه اول

طراحی صفحات وب سایت ، جلسه اول

تهیه و تنظیم:خاقانی

  • مقدمه:

هاست
وقتی شما یک فایل را در کامپیوترتان باز می کنید این فایل در کجا قرار دارد ؟ به طور مثال این فایل در درایو D و فولدر ۵ قرار دارد . حالا شما وقتی فایلها را در اینترنت مشاهده می کنید این فایلها در کجا قرار دارند ؟ این فایلها نیز در کامپیوتر هایی که همیشه به اینترنت وصل هستند و به اصطلاح به آنها سرور گفته می شوند قرار دارند . حالا برای اینکه شما اطلاعات سایتتان را برای همه به نمایش بگذارید باید این اطلاعات را در سرور قرار دهید پس مقداری فضا (هاست) از یک سرور تهیه می کنید.
دامنه : حالا اطلاعاتتان را در فضای مورد نظر قرار داده اید ، چگونه کاربرانتان آن اطلاعات را مشاهده می کنند ؟ شما یک دامنه را ثبت می کنید و به هاستتان وصل می نمایید تا با وارد کردن آن آدرس اطلاعات سایتتان را مشاهده فرمایید.
مثال برای دامنه: www.asanbood.ir
دامنه در واقع آدرس وب سایت شما در اینترنت است و کاربران وب سایت شما را توسط همین نام می شناسند، لذا لازم است این نام را با دقت انتخاب کنید.
هر آدرس اینترنتی از سه بخش تشکیل شده است.
۱-www
۲-نامی که برای سایت خود انتخاب کرده اید.asanbood
۳-پسوند نام سایت،مانند:.ir ,.com,.org

  • شروع طراحی صفحات سایت

زبان برنامه نویسی تمامی صفحات وب ازنوع HTML است.

  • آشنایی با زبان نشانه گذاری HTML :

زبان HTML یک زبان نشانه گذاری است و به هر کدام از این نشانه ها که در واقع، دستورالعمل چگونگی نمایش محتوای صفحه هستند،برچسب (tag) می گویند.

(در نوشتن بر چسب ها ازحروف کوجک استفاده کنید) زبان XHTMLکه نسخۀ جدیدتر HTML است . در آن برای نوشتن برچسب ها از حروف کوجک استفاده میشود . البته تفاوت هایی دیگری نیز دارندکه میتوانید به کتاب مراجعه کنید.

Tag یا برچسب ها از سه قسمت درست شده است.

۱- یک علامت کوچکتر (>)

۲ – نام تگ

۳ – یک علامت بزرگتر (<)

ساختار استاندارد برچسب ها در HTML به صورت زیراست.

<برچسب انتهایی/> محتویات <برچسب آغازین>

مهم ترین و اصلی ترین برچسب در صفحات وب <html> است،مرورگر با دیدن این برچسب در میابد که فایل مورد نظر حاوی کد های XHTML است.

در انتهای فایل نیز باید از بر چسب </html> استفاده کنیم.

  • ایجاد اولین صفحه وب

ویرایشگر Notepad را باز کنید ، و دستور زیر را در آن تایپ کنید:

<html>

<head>

<title> welcome </title>

</head>

<body>This is My First Web Page!</body>

</html>

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

برای مشاهده صفحۀ از یکی از مرورگر های کامپیوتر مانند IE استفاده کنید. نتیجۀ کار باید بصورت زیر باشد.

 

برای مشخص کردن بدنۀ اصلی ازبرچسب <body> استفاده می شود.متن هایی که در مرورگر نمایش داده میشود.بین برچسب <body> و انتهای آن یعنی برچسب </body> قرارمیگیرد.

مثال:

<html>

<head> <title>Title of page</title>

</head>

<body> This is my first html page. <b>This text is bold</b>

</body>

</html>

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

توضیح مثال بالا

انتهای متن </html> میباشد. از روی این تگ، مرورگر نوع متن یعنی اچتمل بودنش را یافته و از روی <html> اولین تگ مثال بالا تگ

اچتمل را میبابد.

متن اچتمل بوده و نمایش داده نخواهند شد. “Header information” اطلاعات شناسنامه ای یا </head> و تگ <head> متن بین تگ

میباشد در “Title of page” صفحه که در این مثال عبارت Title تیتر و یا </title> و <title> در این مثال با کمک تگهای

بالای مرورگر نمایش داده خواهد شد.

تنها اطلاعاتی است که توسط مرورگرنمایش داده خواهند شد. </body> و انتهای آن یعنی تگ <body> متن بین تگ

و یا توپر نمایش داده خواهند شد.. Bold بصورت </b> و انتهای آن یعنی تگ <b> متن بین تگ

تمرین:

  • قراردادن یک تصویر ساده درپس زمینۀ صفحۀ وب

دریکی از درایوهای کامپیوتر،مثلا” درایو D ، فولدر جدیدی باز کنید وآن را نام خود قرار دهید.

تصویری رابه درون این فولدر کپی کنید. نام آن را dorset بگذارید.

ویرایشگر Notepad را باز کنید ، و دستور زیر را در آن تایپ کنید:

<html>

<head> <title>Title of page</title>

</head>

<body background=”dorset.jpg”> This is my first html page. <b>This text is bold</b>

</body>

</html>

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

  • بعضی از خواص برچسب های <body>

تگ یا برچسب background آدرس عکس را به عنوان پس زمینه صفحه قرار میدهد.

تگ bgcolor رنگ پس زمینه را تعیین میکند.

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

این روش ها عبارتند از:

-۱ تعیین رنگ توسط درج نام رنگ:

blue ،black، red

مثال:

<body bgcolor=”blue”>

امتحان کنید.

۲- رنگ های سیستم: برای تعیین رنگ می توانید از رنگ های سیستم استفاده کنید. این ساختار شامل ۲۸ رنگ است که توسط Microsoft برای توسعه نرم افزارها طراحی شده اند.

۳- تعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ (هگزا دسیمال) می دانیم که از ترکیب سه رنگ

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

با علامت # شروع می شوند، این کار را انجام می دهیم. دو رقم اول بعد از # نشان دهنده میزان غلظت رنگ

بیشترین میزان) باشد. به ( FF قرمز در مبنای هگزا دسیمال است که می تواند از ۰۰(کمترین میزان) تا

همین ترتیب دو رقم بعدی نشان دهنده میزان رنگ سبز و دو رقم آخر نیز نشان دهنده رنگ آبی در مبنای

هگزا دسیمال (مبنای ۱۶ ) هستند.

مثال: برچسب زیر نشان دهنده آبی بودن رنگ زمینه صفحه وب است زیرا دو مقدار قرمز و سبز ۰۰ هستند.

<body bgcolor=” # 0000 FF”>

مبنای ۱۶ RGB نام رنگ
FF0000 ۲۵۵,۰,۰ red
۰۰FF00 ۰,۲۵۵,۰ green
۰۰۰۰FF ۰,۰,۲۵۵ blue
FFFFFF ۲۵۵,۲۵۵,۲۵۵ white
۰۰۰۰۰۰ ۰,۰,۰ black
  • بر چسب <head>

این برچسب اطلاعات کلی درباره سند را نشان می دهد و به نحوه نمایش اطلاعات در مرورگر کمک م یکند. برچسب های متعددی وجود دارند که به نحوه نمایش محتویات صفحه کمک می کنند، برخی از آنها درون بخش <head> قابل استفاده هستند.

مانند:<meta> ,< title> , <script>

برچسب <meta>

این برچسب اطلاعات کلی در مورد صفحه وب، توضیحات ضروری و واژه های کلیدی مرتبط با موضوع مطالب مندرج در صفحه به منظور استفاده موتورهای جستجو را شامل می شود.

ساختار کلی برچسب <meta> به شکل زیر است.

<meta name =” نویسنده “ Content=“ خاقانی “/>

این برچسب برای امکانن مشاهدۀ متن فارسی در صفحات وب نیز کار برد دارد .

برای فارسی نویسی در صفحات وب باید برچسب زیررا در برچسب <head> اضافه کنید.

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8/”>

  • برچسب <title>

نوشته می شود و برای مشخص کردن عنوان صفحه به کار برده می شود.<head> این برچسب درون قسمت

عنوان صفحه ارتباطی به نام فایل ندارد و بهتر است تعداد حروف آن را کمتر از ۱۵ کاراکتر تعیین کنید.

<html>

<head>

<title>welcome</title>

</head>

<body> This is my first web page </body> </html>

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

موفق باشید.

در صورت استقبال ادامه دارد.

جلسه اول آشنایی با زبان نشانه گذاری HTML

جلسه دوم برچسب های قالب بندی متن

جلسه سوم آشنایی با نرم افزارDreamweaver CS

جلسه چهارم  پیوندها(Link)

 

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

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

  • 0
  • 434
  • 95
  • 499
  • 103