دیجی اسکریپت

آموزش html Archives | دیجی اسکریپت

معرفی تگ های کاربردی HTML

معرفی تگ های کاربردی html

سلام و درود به شما همراهان دوست داشتنی میهن وردپرس

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

تگ <div> :

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

۱- دیو

۲- دی آی وی

به خودتان بستگی دارد که چه مدلی بخوانیدش! من مدل دوم را ترجیح میدهم!

تگ div

نکته : تگ <div> از نوع block است و inline نیست. یعنی هر وقت از آن استفاده کنیم کل عرض مرورگر را میگیرد. به عبارتی اگر شما سه تگ <div> را پشت سر هم بنویسید ، محتوایشان زیر هم نمایش داده میشود نه کنار هم. راجب مفهوم inline و block بعدا با هم صحبت خواهیم کرد.

نکته : تگ دی آی وی یک تگ بسته است.

 

تگ های عنوان :

<h1/> این یک عنوان است<h1>

<h2/> این یک عنوان است<h2>

<h3/> این یک عنوان است<h3>

<h4/> این یک عنوان است<h4>

<h5/> این یک عنوان است<h5>

<h6/> این یک عنوان است<h6>

تگ های هدینگ

همانطور که از اسمشان معلوم است برای عنوان ها از این تگ ها استفاده میشود. اهمیت عنوان ها از h1 تا h6 به ترتیب کاهش می یابد. این موضوع درباره سئو هم صدق می کند و تگ h1 نسبت به h2 اهمیت بیشتری دارد. تگ h2 نسب به h3 و… به همین ترتیب.

نکته : تگ های عنوان یا همان heading ها مانند تگ div از نوع بلاک هستند. یعنی به صورت زیر همدیگر قرار میگیرند.

نکته : تگ های heading از نوع تگ های بسته هستند.

تگ <p> :

می رسیم به تگ دوست داشتنی p ! با استفاده از این تگ می توانیم پاراگراف ها را به سایتمان اضافه کنیم. بخش عمده ای از هر پست سایت از پاراگراف ها تشکیل شده است. اگر با مرورگرتان از همین متن inspect بگیرید ، متوجه این موضوع میشوید.

نکته : تگ p از نوع block است. حالا شما بگویید : از نوع block است یعنی…

نکته : تگ p از نوع تگ های بسته است.

 

تگ <img> :

با استفاده از تگ img می توانیم در سایتمان از تصاویر استفاده کنیم. این تگ چند اتربیوت(ویژگی) مهم دارد که آن ها را به شما معرفی میکنم.

اتربیوت های تگ img :

src : در این اتربیوت آدرس عکسمان قرار می گیرد.

alt : این اتربیوت یک متن جایگزین برای عکسمان در نظر میگیرد تا اگر عکسمان به هر دلیلی لود نشد ، آن متن نمایش داده شود. احتمالا یک بار اتفاق افتاده است که با چنین سایتی مواجه شده باشید. راستی حتما alt را قرار دهید. حتی اگر شده به صورت خالی چون برای سئو مهم است.

title : این اتربیوت عنوان عکس را نمایش میدهد. به عبارتی وقتی موس را روی عکس ببرید title نمایش داده میشود.

width : عرض تصویر را مشخص میکند.

height : ارتفاع تصویر را مشخص میکند.

در نهایت یک تگ img کامل به این صورت در می آید :

تگ img

خب تا همین جا کافی است. حتما تگ های گفته شده را در فایل html ی که ایجاد کرده اید ، بنویسید و تمرین کنید تا به خوبی ملکه ذهنتان شود. تا جلسه بعدی خدانگهدارتان…



لینک منبع مطلب

ایجاد قالب HTML و آشنایی با ساختار صفحات وب

ایجاد قالب HTML و آشنایی با ساختار صفحات وب

آشنایی با ساختار صفحات وب

درود بر شما. به قسمت سوم آموزش طراحی سایت به زبان ساده خوش آمدید. در قسمت های قبلی بیشتر تئوری صحبت کردیم. در این جلسه به تمرین های عملی ورود می کنیم. آماده باشید!

ایجاد یک سند HTML

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

گام اول : در دسکتاپ خود پوشه ای به نام mihanwp ایجاد کنید.

گام دوم :  ++notepad را باز کنید!

گام سوم : از منوی file گزینه new را بزنید.

گام چهارم : از قسمت منوی بالا encoding را روی utf-8 قرار دهید.

گام پنجم : در نهایت فایل را در پوشه mihanwp که ایجاد کردید ، با پوسند html. ذخیره کنید.

کار تمام است! به همین راحتی یک سند HTML را ایجاد کردید که می توانید در آن کد نویسی انجام دهید.

مفهومی به نام تگ :

یکی از مهم ترین مفاهیمی که باید آن را به خاطر بسپارید ، مفهومی به نام تگ است. با کمک تگ ها یا همان برچسب ها می توانیم ساختار سایتمان را توصیف کنیم. به عبارتی تگ ها برای کد نویسی بخش های مختلف سایت به ما کمک میکنند. مثلا یک تگ برای قراردادن پاراگراف داریم. یک تگ برای قراردادن عکس داریم. یک تگ برای قراردادن عنوان داریم و… هر تگ با یک علامت > شروع میشود و باید یک علامت < به پایان میرسد. کلا دو نوع تگ داریم : ۱- تگ های باز ۲- تگ های بسته.

تگ های باز

تگ هایی که به صورت تنها هستند و محتوا در داخل همان یک تگ قرار میگیرد. برای مثال تگ img که برای قرار دادن یک عکس به کار میرود.

تگ های بسته

تگ هایی که به صورت باز و بسته هستند. میتوانیم بگوییم جفت هستند و محتوا بین دو تگ قرار میگیرد. برای مثال تگ p که برای قرار دادن یک پاراگراف استفاده میشود.

 

پس تا اینجا یاد گرفتیم چطور یک سند html ایجاد کینم و با مفهوم تگ هم آشنا شدیم. خب حالا میرسیم به ساختار اصلی! هر صفحه وب یک ساختار اصلی دارد که تمام وبسایت هایی که در اینترنت وجود دارند شامل این ساختار هستند. در تصویر زیر این ساختار را برای شما مشخص کرده ایم. پیشنهاد میکنم در این جلسه تک تک موارد عکس زیر را به خاطر بسپارید. در جلسه بعدی تمامی موارد را توضیح خواهم داد. اصلا تمرین جلسه بعدتان این باشد:

  •  یک فایل html ایجاد کنید.
  •  کدهای زیر حفظ کنید.
  •  کدها را درون فایل html تان بنویسید و ذخیره کنید.
  •  اگر در مراحل به مشکلی برخوردید از طریق کامنت ها سوال کنید.

تا جلسه بعدی خدانگهدارتان…

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.



لینک منبع مطلب

آموزش طراحی سایت به زبان ساده

آموزش طراحی سایت به زبان ساده - مقدمه

آموزش طراحی سایت به زبان ساده

سلام امیدوارم سال خوبی را شروع کرده باشید.

بی مقدمه خدمتتان عرض کنم html و css واقعا شیرین و لذت بخش هستند! برای طراحی سایت و شروع با هر سیستم مدیریت محتوایی٬ باید ابتدا html و css را یاد بگیرید. در آینده به شما توضیح خواهم داد که هر کدام چه معنایی دارند و چرا استفاده می‌شوند. اما همین را بدانید که در هر صورت برای طراح سایت شدن باید این دو را یاد بگیرید. html و css به قدری ساده اند که بعد از یادگیری آن ها با خودتان می گویید کاش تمام زبان های برنامه نویسی مثل html و css بود! راستی این نکته را هم اضافه کنم : اگر در هنگام یادگیری و یا برنامه نویسی html و css یک فنجان قهوه و یک موزیک پست راک هم کنارتان باشد خیلی می چسبد!

موزیک و فنجان قهوه

 

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

همین ابتدای کار برای راحتی خودمان با هم قرارداد میکنیم به جای html و css بگوییم htss!

در اولین قسمت از آموزش طراحی سایت به زبان ساده ، htss را به صورت مقاله های دنباله دار یاد میگیرید. آماده ی ورود به دنیای طراحی سایت هستید؟

ورود به دوره رایگان آموزش طراحی سایت

 

شروع آموزش ها به زودی…

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.



لینک منبع مطلب