ایجاد یک سند HTML

Your browser doesn't support video.
Please download the file: video/mp4

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

ابزارهای مورد نیاز برای طراحی وب:

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

1-  textEditor یا ویرایشگر متن:

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

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

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

2- مرورگر (browser) :

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


 

مرورگرها


مفهوم برچسب یا تگ (Tag) :

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

برچسب ها دو نوع هستند:

1-   برچسب هایی که علاوه بر برچسب شروع دارای برچسب پایانی هم هستند
2-   برچسب هایی که فقط دارای برچسب شروع هستند.
برای مثال برچسب <b> وظیفه Bold یا پر رنگ کردن متن را بر عهده دارد و دارای برچسب پایانی می باشد. یعنی متن مورد نظر بین شروع و پایان این برچسب قرار می گیرد در صفحه وب به صورت پررنگ یا bold  نمایش داده می شود.


 

ساختار تگ در html


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

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

ساختار تگ های html

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

پسوند ذخیره  سازی .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 نیز استفاده کنید)

مراحل ایجاد سند html
4- در پنجره باز شده ابتدا محل ذخیره سازی را مشخص کنید. (سعی کنید پوشه ای ایجاد کنید و تمام سند ها را آنجا ذخیره کنید)
5- از لیست save as type گزینه All files را انتخاب کنید.

مراحل save as type در نوت پد
6- در لیست Encoding گزینه uft8 را انتخاب کنید. ( در آینده درباره این گزینه صحبت خواهیم کرد. در این حد بدانید که برای نمایش کاراکترهای فارسی از آن استفاده می کنیم)

مراحل تعیین encoding در نوت پد
7- در قسمت file name نامی را برای سند انتخاب سپس یک نقطه . و پس از آن پسوند html را وارد کنید. در اینجا ما از نام index  استفاده می کنیم که به اینصورت همراه پسوند می نویسیم
 

 index.html

8- روی دکمه save کلیک کنید.
9- به محل ذخیره فایل بروید و با یکی از مرورگرهای ذکر شده فایل رو اجرا کنید. (معمولا به طور پیشفرض یکی از مرورگرها برای اجرای فایل html انتخاب شده و شما کافی ست فقط فایل رو اجرا کنید.)
تبریک می گم شما اولین صفحه وب خود را ساختید.

 

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

4 سال پیش

زهرا سجادی

عالی بود

4 سال پیش

soheilbandei

بی نظیره

3 سال پیش

Mehdi

ممنون.بسیار عالی

3 سال پیش

امیرحسین رضایی

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

 

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