آموزش طراحی سایت جلسه اول

هدف جلسه : معرفی و تولید صفحات وب با HTML5

86
آموزش طراحی سایت جلسه اولReviewed by عباس حبیبی on Jun 20Rating: 5.0آموزش طراحی سایت جلسه اول آموزش طراحی سایت جلسه اول ، به اولین جلسه از آموزش طرحی سایت خوش آمدید در طی این جلسات، طراحی صفحات وب یا طراحی سایت را از صفر تا صد خدمت شما آموزش دهیم

آموزش طراحی سایت جلسه اول : به اولین جلسه از آموزش طرحی سایت خوش آمدید ، قصد داریم در طی این جلسات، طراحی صفحات وب (طراحی سایت) را از صفر تا صد خدمت شما عزیزان آموزش دهیم. امیدوارم که از کیفیت این مطالب راضی باشید. 

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

تولید صفحات وب با HTML : 

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

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

پیشنهاد می کنم اگر با HTML4 کدهای خود را نوشته اید سازگاری با کدهای HTML5 را لحاظ کنید.

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

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

ساختار صفحات وب :

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

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

معرفی HTML و XHTML :

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

نسخه HTML4 در دسامبر سال ۱۹۹۹به بازار آمد و پس از آن یک نسخه سخت گیرانه از HTML به نام XHTML به بازار عرضه گردید که برتری هایی را نسبت به نسخه HTML4 دارد :

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

۲-سبک نمایش و رنگ آمیزی اسناد وب در HTML با کدهای کنترل انجام می شد، اما کدهای XHTML چنین کاری را انجام نمی دهند و آنها را به CSS واگذار می کنند.

کدهای XHTML حتی در Notepad نیز قابل نوشتن بوده و می توان آنها را توسط مروگر نمایش داد اما برخی از نرم افزار ها نیز وجود دارند مانند Adobe Dreamweaver که به برنامه نویس یا طراح کمک می کند که طرح خود را سریعتر پیش ببرد. ذخیره این فایل ها با دو پسوند html. و htm. صورت می پذیرد.

بهتر است فایل های خود را در قالب UTF-8 ذخیره کنید تا کاراکترهای فارسی در مرورگرها به درستی نمایش داده شوند ، برای اینکار می توانید از لیست Encoding در پنجره Save As ساختار مربوطه را انتخاب کنید دقت نمایید که بعد از انتخاب نام نیز از پسوندهای ذکر شده استفاده نمایید.
نکته : به زودی آموزش طراحی سایت جلسه اول به صورت ویدیویی بر روی سایت قرار خواهد گرفت .

 

در HTML برای اینکه بخش های گوناگون را بتوان مشخص کرد از تگ ها استفاده می کنند ، برای مثال برای درج تصویر ، متن ، جدول ، دکمه و … باید از تگ های مربوط به خود استفاده کرد تا مرورگرهایی مانند FireFox , Safari ,Opera,Chrome آنها را خوانده و سپس به شکل مناسب نمایش دهند .امروزه با استفاده از CSS صفحات وب را قالب بندی می کنند.


<html>

<head>

<title>

عنوان سند اینجا قرار می گیرد

</title>

<body>

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

</body>

این یک قالب کلی است از یک سند HTML با دیدن این کدها زیاد نگران نباشید بعد از مدتی با تکرار آنها بسیار ساده خواهند شد و به راحتی به ذهن خواهید سپرد.

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

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

آموزش طراحی سایت جلسه اول از رادین لرن 

شما همچنین ممکن است مانند بیشتر از نویسنده

ترک یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.