آموزش HTML

آموزش HTML جلسه اول : مقدمه

آموزش HTML جلسه اول : مقدمه و مفاهیم ابتدایی

پیش گفتار :

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

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

اچ تی ام ( HTML ) چیست :

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

پیش نیاز ها :

برای شروع آموزش آموزش اچ تی ام ال نیاز به هیچ پیش زمینه ای در زمینه ی طراحی وب ندارید. برای ایجاد اسناد و یا کد نویسی اچ تی ام به هیچ نرم افزار خاصی نیاز ندارید و با تمامی نرم افزار های ویرایشگر متن هم میتوانید این کار را انجام دهید؛ اما پیشنهاد می شود از برای راحت تر نوشتن کد ها و فهم بهتر مطالب آموزشی از نرم افزار هایی مانند ++Notepad و یا JetBrains PhpStorm و هر نرم افزاری که مد نظر خود دارید استفاده کنید.

نکته : بهتر است از Word و Wordpad استفاده نکنید.

ساخت یک سند HTML :

در این بخش ما ایجاد اولین سند اچ تی ام ال را در نرم افزار ++Notepad آموزش می دهیم. توجه داشته باشید در سایر نرم افزار ها هم با کمی تغییر به همین روش این فایل ایجاد می شود.

۱- پس از نصب و اجرای نرم افزار با استفاده از دکمه ی New در منو File و یا کلید های ترکیبی Ctrl+N سند جدیدی ایجاد می کنیم.

۲ – پس از ایجاد سند از منوی Encoding گزینه ی Encode in UTF-8 را انتخاب می کنیم. سپس از منوی Language و زیر منوی H گزینه ی HTML  را انتخاب می کنیم. پس از این مرحله می توانید کدهای خود را به راحتی در سند وارد کنید.

۳ – پس از کد نویسی به مرحله ذخیره فایل می رسیم. از منوی File بر روی Save As کلیک و یا از کلید های ترکیبی Ctrl+S کلیک کنید. محل ذخیره فایل را مشخص و یک نام برای آن در نظر بگیرید. اگر توجه کنید مقابل Savs As Type فرمت ذخیره فایل برروی HTML قرار دارد زیرا شما در مرحله قبل زبان برنامه نویسی خود را HTML انتخاب کردید. با کلیک بر روی دکمه SAVE فایل شما ذخیره می شود.

اجرای یک سند HTML : 

شما با تمامی مرورگر های موجود مانند FireFox, Chrome , Opera , Safari و … فایل ایجاد شده ی خود را اجرا کنید.

اولین کدها :

در زیر نمونه ی ساده از کد نویسی HTML برای شما آورده شده است. اگر با توضیحات در انتهای کدها متوجه مفهوم کد های و یا کاربرد آنها نشدید نگران نباشید ما به مرور زمان آن ها را به شما یاد خواهیم داد.

راهنمای کدها :

این توضیحات برای آشنایی اولیه شما ارائه شده است.

DOCTYPE : نشان دهنده نوع سند میباشد .

<html> : محتوای سند در بین <html> و </html> قرار دارد .

<title> : عنوان صفحه را نشان میدهد .

<body> : کد ها در بین <body> و </body> باید قرار بگیرد تا نمایش داده شوند .

<h1> : برای سربرگ به کار میرود .

<p> : برای ایجاد پاراگراف میباشد .

برچسب ها معمولا به صورت جفت می ایند. مثلا <p> و </p>

اولین برچسب (tag) برچسب شروع و دومین برچسب ، برچسب پایانی میباشد .

برچسب پایانی نیز همانند برچسب اول میباشد با این تفاوت که قبل از نام برچسب اسلش ( / ) گذاشته میشود .

نمونه برچسب : <tagname>محتوا</tagname>

اطلاعات

نظرات

دیدگاه شما

( الزامي )
( الزامي )
( الزامي )