ایجاد یک سند HTML

1395/9/24 علیرضا حاتمی نیا 12280

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

از آنجایی که طراحی و برنامه نویسی خود یک هنر هستند پس برای خلق یک اثر هنری ما نیاز به یک سری ابزارها داریم که در اینجا به معرفی این ابزار ها می پردازیم .

ابزارهای مورد نیاز برای طراحی وب :
1-  textEditor یا ویرایشگر متن:
برای نوشتن کدها و برچسب های html و css  نیاز به محیطی داریم که در آن کدها را وارد کرده و ذخیره کنیم. به این محیط ها textEditor  یا ویرایشگر متن می گویند. ویرایشگرهای زیادی برای این منظور به صورت رایگان و غیر رایگان عرضه شده است. اما به این نکته توجه کنید که برای شروع کار به هیچ عنوان از ویرایشگرهای حرفه ای استفاده نمی کنیم . چون این ویرایشگرها هوشمند بوده و به محض وارد کردن ابتدای یک کد ادامه کد خواسته شده را برای شما می نویسد. بنابراین قدرت کد نویسی را از شما گرفته و شما در کد نویسی تنبل می شوید.
پس در این آموزش از ساده ترین و در دسترس ترین ویرایشگر متن یعنی notepad که به صورت پیشفرض در ویندوز موجود است استفاده می کنیم.
شما می توانید از منوی start موجود در ویندوز notepad را جستجو کنید.

محیط نرم افزار notepad نوت پد

 تصویری از  محیط  notepad


2- مرورگر (browser) :
برای اجرای کدهای html و css از مرورگرهای وب استفاده می کنیم . مرورگرهای مطرح و قدرتمند و رایگان زیادی وجود دارد که معروفترین آنها IE (ویندوز)، firefox و chrome هستند. در این آموزش از مرورگر پیشفرض ویندوز IE به علت ضعف های موجود استفاده نمی کنیم و پیشنهاد می کنم برای اجرای کدها از firefox و chrome استفاده کنید. این مرورگرها رایگان بوده و به راحتی می توانید آنها را دانلود کنید. (نام آنها را در گوگل جستجو کنید)


 

firefox chrome IE


مفهوم برچسب یا تگ (Tag) :
برای اینکه کمی با ساختار برچسب های HTML آشنا شوید کمی در مورد برچسب ها و انواع آنها فقط برای آشنایی صحبت می کنم.
همانطور که در گذشته گفته شد، HTML یک زبان برچسب گذاری ست و متشکل از مجموعه ای از برچسب ها (tags) می باشد که هر کدام عناصر صفحه را تحت تاثیر  خود قرار می دهند.
مثلا یک برچسب وظیفه ایجاد پاراگراف در صفحه را دارد و برچسب دیگر وظیفه  پر رنگ کردن یا Bold کردن متن را به عهده دارد یا برچسبی وجود دارد که امکان درج جدول در صفحه را برای شما فراهم می کند و برچسب دیگر تصاویر را نمایش میدهد.
هر برچسب با علامت < شروع و با علامت > پایان می یابد.
برچسب ها دو نوع هستند.
1-   برچسب هایی که علاوه بر برچسب شروع دارای برچسب پایانی هم هستند
2-   برچسب هایی که فقط دارای برچسب شروع هستند.
برای مثال برچسب <b> وظیفه Bold یا پر رنگ کردن متن را بر عهده دارد و دارای برچسب پایانی می باشد. یعنی متن مورد نظر بین  شروع و پایان این برچسب قرار می گیرد در صفحه وب به صورت پررنگ  یا bold  نمایش داده می شود.


 

ساختار تگ در html


نکته : در نظر داشته باشید که بر چسب پایانی دارای یک کاراکتر / قبل از نام برچسب می باشد.

برخی از برچسب ها علاوه بر نام برچسب دارای attribute یا خصوصیاتی هستند که این خصوصیات با value ها یا مقدارهایی که می گیرند ویژگی های برچسب را تعیین می کنند. مثلا برچسب <a> که برای لینک دار کردن متن به کار می رود دارای خصوصیتی به نام href  است که مقدار آن  آدرس لینک مورد نظر را مشخص می کند.


 

آموزش طراحی وب


نگران نباشید. در جلسات آینده به معرفی کامل این برچسب ها می پردازیم.

پسوند ذخیره  سازی .html  و .htm :
پس از نوشتن برچسب ها در ویرایشگر notepad،  سند ایجاد شده بایستی با یک نام و با یکی از پسوند های html یا htm ذخیره شوند تا بتوانید سند ذخیره شده را توسط مرورگر اجرا کنید. در این آموزش ما  سند ها را با پسوند html ذخیره می کنیم.
تمرین:
درباره تفاوت جزیی پسوندهای   .html و .htm تحقیق کنید.

شروع کد نویسی:
بسیار عالی تا به اینجای کار نکات و مفاهیم جدیدی یاد گرفتیم. اگر درک مطالب گفته شده برای شما کمی سخت است اصلا نگران نباشید. در ادامه کار آنقدر تمرین و تکرار می کنیم تا مطالب خوب روشن شوند.
در این قسمت یک سند html ایجاد می کنیم و کدی ساده می نویسیم، ذخیره و بعد از آن اجرا می کنیم.
1-  ویرایشگر notpad را از طریق منوی start ویندوز جستجو کرده و اجرا کنید.
2-  کدهای زیر را داخل ویرایشگر بنویسید. (کاری به جزییات نداشته باشید فقط سعی کنید خودتون کدها را بنویسید)

<html>
<head>
<title> اولین صفحه وب </title>
</head>
<body>
<p>
<b> this is bold text </b>
<br>
<i> this is italic text </i>
</p>
</body>
</html>

کدها رو کپی نکنید. تمرین کنید و بنویسید

3- پس از وارد کردن کدها از طریق منوی file در بالای پنجره گزینه save را انتخاب کرده تا پنجره ذخیره سازی نمایان شود. (می توانید از کلید ترکیبی ctrll +s نیز استفاده کنید)
4- در پنجره باز شده ابتدا محل ذخیره سازی را مشخص کنید. (سعی کنید پوشه ای ایجاد کنید و تمام سند ها را آنجا ذخیره کنید)
5- از لیست save as type گزینه All files را انتخاب کنید.
6- در لیست Encoding گزینه uft8 را انتخاب کنید. ( در آینده درباره این گزینه صحبت خواهیم کرد. در این حد بدانید که برای نمایش کاراکترهای فارسی از آن استفاده می کنیم)
7- در قسمت file name نامی را برای سند انتخاب سپس یک نقطه . و پس از آن پسوند html را وارد کنید. در اینجا ما از نام index  استفاده می کنیم که به اینصورت همراه پسوند می نویسیم
Index.html
8- روی دکمه save کلیک کنید
9- به محل ذخیره فایل بروید و با یکی از مرورگرهای ذکر شده فایل رو اجرا کنید. (معمولا به طور پیشفرض یکی از مرورگرها برای اجرای فایل html انتخاب شده و شما کافی ست فقط فایل رو اجرا کنید.)
تبریک می گم شما اولین صفحه وب خود را ساختید.

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

دانلود ویدیو

 

 

کانال تلگرام

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت