آموزش کامل HTML و HTML5: مقدمه ای بر HTML و تگ های آن

آموزش کامل HTML و HTML5: مقدمه ای بر HTML و تگ های آنReviewed by محمدرضا on Jan 15Rating: 5.0

با سلام خدمت دوستان عزیز

از این پس به بعد در سایت فاب تم قصد بر آموزش طراحی وب (HTML5 و CSS3) را بصورت کامل و به زبان ساده داریم تا همه ی عزیزانی که علاقه مند به طراح وب شدن هستند بتوانند از این آموزش ها نهایت استفاده را ببرند.

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

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

حتما بخوانید: آموزش گرافیک

HTML چیست؟

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

یک سند HTML تشکیل شده است از تعدادی تگ، تگ ها در زبان HTML بخش های خاص هر سند را تشکیل میدهند.

تگ ها از سه قسمت تشکیل میشوند:

یک علامت (<) سپس نام تگ و در آخر (>)

<tagname>

دقت داشته باشید تگ بالا تگ باز نامیده میشود و برای بسته شدن تگ دقیقا شبیه بالا عمل میکنیم اما یک (/) قبل از نام تگ باید قرار دهیم که به آن تگ بسته میگویند

</tagname>

و محتویاتی که قرار است در این تگ قرار بگیرد در نهایت بین دو تگ باز و بسته قرار میگیرد

<tagname> محتوای تگ </tagname>

نکته: در رابطه با بسته شدن تگ ها این نکته را به ذهن بسپارید که هر تگی که باز میشود باید در جایی بسته شود و محتوا در نهایت بین دو تگ باز و بسته قرار میگیرد.

برای نوشتن کدهای HTML باید از یک ویرایشگر متنی استفاده کنید، اگر چه از نرم افزار Notepad خود ویندوز هم میتوانید اقدام کنید اما پیشنهاد میکنیم که از نرم افزار Notpad++ استفاده کنید که میتوانید آخرین نسخه از ان را از سایت های دانلود ایرانی دانلود کرده و نصب نمایید، اگرچه برای نوشتن کدهای HTML میتوانید از نرم افزارهای پیشرفته استفاده کنید اما در حال حاضر از نرم افزار Notepad++ استفاده کنید چرا که بسیار سبک بوده و برای شروع کار بسیار مناسب است.

در زیر یک نمونه سند  HTML را مشاهده میکنید:

<!DOCTYPE html>
<html>
<head>
    <title>عنوان صفحه ی وب که در مرورگر نمایش داده میشود</title>
</head>

<body>

    <h1>این یک تگ از نوع عنوان میباشد</h1>

    <p>این یک تگ از نوع پاراگراف میباشد</p>

</body>

</html>

تگ DOCTYPE: نوع سند HTML را معلوم میکند.

تگ HTML: کدهای بین تگ باز و بسته ی HTML کل محتوای یک سند HTML را در بر میگیرد که که همانطور که در سند HTML مشاهده میکنید تمامی تگ ها در بین تگ باز و بسته ی HTML قرار گرفته است.

تگ head: تمامی اطلاعات موجود سند HTML ما در این تگ قرار میگیرد.

تگ title: متن درون این تگ روی زبانه ی مرورگر نمایش داده میشود.

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

تگ h1: از این تگ برای درج عنوان در یک صفحه ی وب استفاده میشود این تگ در حقیقت h1 تا h6 است که به مراتب با زیاد شدن عدد جلوی h محتوای درون این تگ با فونت کوچکتر نمایش داده میشود.

تگ p: این تگ برای نمایش یک پاراگراف است، هر محتوایی که درون این تگ قرار بگیرد به عنوان یک پاراگراف شناخته خواهد شد.

نکته: اگر دقت کرده باشید گفتیم که همه ی تگ ها و محتویات موجود در تگ body در صفحه ی وب نمایان خواهد شد، در سند HTML بالا ما در تگ body دو تگ  h1 و p را داشتیم، پس نتیجه در مرورگر باید هر آنچه که در این دو تگ موجود است باشد.

خب حالا نرم افزار Notepad++ را باز کرده و کدهای بالا را در آن اجرا کنید تا نتیجه را در مرورگر ببینید:

آموزش کامل HTML و HTML5: مقدمه ای بر HTML و تگ های آن

ابتدا بعد از نصب نرم افزار آن را باز کرده و از قسمت Encoding گزینه ی Encode in utf-8 را انتخاب کرده تا در مرورگر با نمایش متن های فارسی به مشکل برنخوریم و بعد از آن از قسمت Language گزینه ی HTML را انتخاب کرده تا کدها با فرمت و رنگ بندی خاص این زبان برای شما نمایش داده شوند و سپس کد را در نرم افزار تایپ کرده و از قسمت فایل گزینه ی Save as.. را انتخاب کرده و فایل را در مکانی در سیستم خود ذخیره کنید.

خب حالا فایل ذخیره شده را با یک مرورگر (موزیلا یا گوگل کروم( باز کرده و نتیجه را در صفحه ی وب باید به صورت زیر ببینید:

آموزش کامل HTML و HTML5: مقدمه ای بر HTML و تگ های آن

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

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

Html Html5 آموزش طراحی رابط کاربری

دیدگاه خود را بیان کنید