مفاهیم اولیه :
در اولین بخش از آموزش HTML در رابطه با مفاهیم ابتدایی همچون مفهوم Tag،
نحوه نوشتن المان‌های اچ تی ام ال صحبت خواهیم کرد و در نهایت شما خواهید توانست تا
با کمک آموخته‌های خود ، یک صفحه وب ساده و ابتدایی را ایجاد کنید
طراحی وب را اگر درست و اصولی شروع کنید ، میتوانید طی مدت کوتاهی با تلاش و پشتکار و انگیزه ،
تبدیل به طراح وب شوید .
پس اگر جزو افراد علاقمند به یادگیری هستید و اطلاعاتی در این زمینه ندارید یا تازه شروع کرده‌اید ،
آموزشی کامل و قدم به قدم و در عین حال ساده مرا دنبال کنید و نکته مهمتر تمرین زیاد داشته باشید
آزمون و خطاهاست که یادگیری را راحت تر میکند پس نگران اشتباه کردن یا سختی نباشید
بعدا میفهمید چقدر آسان است و خودتان آینده به دیگران آموزش میدید .
امیدواریم این آموزش‌‌ها ، بتواند به شما در فراگیری اصول اولیه طراحی وب یاری کند .
HTML مخفف Hyper Text Markup Language نام زبان نشانه گذاری است که به شما
در ایجاد صفحات وب کمک میکند .
در واقع هر آنچه در مرورگر اینترنت به نمایش در میآید نتیجه این زبان ساده و شیرین است .
زبان html، پایه و اساس ساختار و اسکلت صفحات وب را تشکیل میدهد و اولین قدم
برای شروع طراحی صفحات وب محسوب میشود
برای به حرکت در آوردن این اسکلت و این ساختار بعدا از اتمام این آموزش حتما به یادگیری
زبان CSS بپردازید
" شما با اتمام این آموزش اولین صفحه از وب سایت خودتان رو خواهید ساخت "
آموزش :
روی سیستم خودتون یک ادیتور نصب کنید
( پیشنهاد من نصب ویرایشگر سبک و سریع Notepad++ است )
برای شروع کد نویسی این زبان همه چیز با تگ ها ( نشانه ) ارائه میگردد
همه صفحات وب با تگ html شروع و با تگ html خاتمه پیدا میکنند
مثال :
ادیتور خودتان رو باز کنید و این تگ ها در آن بنویسید :
<html> (به این تگ ابتدایی یا باز میگوییم )
صفحات وب
<html/> ( به این تگ انتهایی یا بسته میگوییم )
و صفحه رو با نام index.html ذخیره نمایید ( نام صفحه اول و اصلی index باشد با پسوند html )
مهم :
الف : تگ ها بین علامت بزرگتر و کوچکتر ( < > ) قرار میگیرند و تگ پایانی همیشه
قبل از آن یک اسلش ( / ) دارد .
ب : تگ هایی که هم تگ ابتدایی و هم تگ انتهایی مجزا دارند المنت یا تگ زوج میگوییم
ج : تگ های فرد تگ های انتهایی مجزا ندارند یک تگ هستند و به این شکل نوشته میشوند مثال : </ meta>
تا اینجا اولین گام رو یاد گرفتید .
گام دوم :
در تگ html مستقیم فقط دو تگ دیگر میتوانید استفاده کنید
تگ هد ( head ) و تگ بادی ( body ) در حقیقت ما در زبان html
یک صفحات وب رو به دو قسمت تقسیم میکنیم :
الف : تگ هد ( head )
ب : تگ بادی ( body )
یعنی هر وب سایت یک سر و یک بدنه دارد .
این تگ ها چون داخل تگ html نوشته میشوند میگوییم آنها فرزندان تگ html هستند
و تگ html والد این تگ هاست
مثال :
<html>
<head>
<head/>
<body>
مکان صفحات قابل مشاهده در وب سایت
<body/>
<html/>
نکته :
بعد از نوشتن تگ html برای نوشتن تگ هد و تگ بادی از روی صفحه کلید
کلید تب ( Tab ) رو یکبار فشار دهید تا یک تو رفتگی ایجاد شود
این باعث میشود کدها منظم تر نوشته شوند و همچنین زمانی تگ ابتدایی مینویسید
همان زمان تگ انتهایی هم بنویسید تا فراموش تان نشود که بعد خطایی رخ دهد
بیاد داشته باشید هر تگ ابتدایی و انتهایی در راستای هم باشد با کلید تب ( Tab ) تنظیم کنید
و همچنین تگ هایی که داخل تگ هد و تگ بادی مینویسید برای نظم بیشتر به ترتیب
با یکبار فشردن کلید تب منظم کنید .
تگ P رو در مثال پایین ببینید کمی جلوتر از تگ body نوشته شده :
<html>
<head>
<head/>
<body>
<p>
صفحات وب
<p/>
<body/>
<html/>
مهم :
بعد از تگ html فقط تگ هد ( head ) و تگ بادی (body) در یک راستا هستند
و یک تب جلوتر از تگ html هستند در مثال بالا میتوانید کامل و با دقت ببینید .
بقیه تگ ها حداقل یک تب از تگ بادی و تگ هد جلوتر نوشته میشوند مثل تگ p در مثال بالا
( اگر منظم کدها ننویسیم مشکلی پیش نمیآید ولی همیشه اصولی و تمیز
با ساختار قابل قبول یاد بگیرید زیرا نظم در مواقع رفع اشکال خیلی به ما کمک میکند )
قانون مهم :
در زبان html اگر برنامه ای اشتباه بنویسید هیچ خطا و اروری نمیده همان برنامه اشتباه رو اجرا و چاپ میکنه
قانون کامپیوتر است اگر ورودی اشتباه دادی خروجی اشتباه به شما نشان میدهد .
تا اینجا گام دوم هم سپری شد .
گام سوم :
یکی از تگ هایی که در تگ هد استفاده میشود تگ متا ( </ meta> ) می باشد
که محتویاتی که در صفحات وب استفاده میکنیم مشخص میکند
تعداد تگ های متا زیاد است مهمترین آن این نوع متا میباشد که حتما باید استفاده کنیم
</" meta charset= "UTF-8 >
زیرا این متا تگ نوع کدینگ و نوع زبانی که استفاده میکنیم در وب سایت مشخص میکند
و از زبان فارسی هم پشتیبانی میکند
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
صفحات وب
</p>
</body>
</html>
متا تگ ها اطلاعات دیگر تگ های وب سایت ما رو به مرورگرها میدهند
دیگر تگی که میتوانیم در تگ هد ( head ) به کار ببریم تگ تایتل ( title ) است
که برای عنوان صفحه به کار میرود که حتما باید استفاده کنیم
زیرا رتبه ما رو در گوگل بالا میبرد که با جستجو کردن در گوگل
وب سایت ما در اولین صفحه گوگل قابل مشاهده میگردد ( بعدا راجب سئو توضیح خواهم داد )
<head>
<meta charset="UTF-8" />
<title>عنوان و نام صفحه</title>
</head>
<body>
<p>
صفحات وب
</p>
</body>
</html>
اگر الآن صفحه در حال تمرین رو ( index.html ) رو مجدد ذخیره کنید ( Ctrl+S )
و روی آن دوبار کلیک کنید مرورگر باز میشود یا کلید ( F12 ) صفحه کلید فشار دهید
با باز شدن مرورگر میتوانید بالای صفحه عنوان سایت خود را که در تایتل نوشته اید ببینید
گام چهارم :
اگر الآن صفحه در حال تمرین رو ( index.html ) رو مجدد ذخیره کنید ( Ctrl+S )
و روی آن دوبار کلیک کنید مرورگر باز میشود میتوانید متن صفحات وب
را ببینید و کل آنچه در صفحه نمایش قابل مشاهده است بین
تگ بادی < body > باز و < body /> بسته ست
<html>
<head>
<meta charset="UTF-8" />
<title>عنوان و نام صفحه</title>
</head>
<body>
صفحات وب
</body>
</html>
مثال : متن صفحات وب که نوشتیم نباید کنترل نشده باشد باید با استفاده از
تگ هایی آنرا کنترل کنیم مثلا بزرگتر یا کوچکتر شدن متن یا رنگی کردن متن یا
محل دقیق متن و ... میتوانیم مشخص کنیم
اینجا از تگ پاراگراف < p > استفاده میکنیم و تغییراتی روی متن انجام میدهیم
با استفاده از خصوصیات و صفت ( Attribute ) ویژگی ( ( Property
در کدهای زیر با رنگ قرمز اتریبیوت ها رو مشخص کردم
یکی برای تگ html که زبان وب سایت رو مشخص کند برای مرورگرها
و یکی برای تگ p که استایل و شکل و ظاهر صفحه یا متن رو مشخص میکند
مهم :
نام انواع تگ ها و اتریبیوت ها و کاربرد آنها و محل قرارگیری آنها رو باید یاد بگیرید
به تعدادی از مهم ترین ها در این آموزش می پردازیم
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>عنوان و نام صفحه</title>
<head/>
<body>
<p style="">
صفحات وب
<p/>
<body/>
<html/>
در اتریبیوت Style در مثال پایین که میبینید مجموعه ای از اتریبیوت های دیگر در آن قرار میگیرد
که بعدا در آموزشCSS بیشتر از آنها خواهیم گفت و از آنها بعنوان CSS خواهید آموخت
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>HTML آموزش زبان</title>
<head/>
<body>
<p style="font-size=25px">
! سلام دنیا
<p/>
<body/>
<html/>
در مثال بالا اگر صفحه رو ذخیره و کلید F5 رو بزنید تا مرورگر ( رفرش ) مجدد بکار بیفتد یا
صفحه وب ذخیره شده آموزشی خود را باز کنید
میبینید اندازه متن شما 25 پیکسل شد و بزرگتر نشان داده میشود
در مثالی دیگر رنگ متن هم تغییر میدهیم
>>>> در حال بروز رسانی هستم >>>> ادامه دارد
مطالب مرتبط :
آموزش زبان CSS
دانلود نرم افزار ++Notepad
