بعد از این که از تگ خط جدید یا اینتر استفاده کردیم دیدی که چه تغییردر نتیجه ایجاد شد. حالا وقتی به محتوایم نگاه می کنم می بینم
محتوایم خیلی طولانی هست به همین خاطر فکری یا طراحی دیگری به نظرم می رسد که این صفحه را به چند قسمت تقسیم کنم باز چون طراحی جدید به نظرم رسید
یا درفکر قرار گرفت از تگ های اچ تی ام ال استفاده کنم و طراحی ام را کامل می کنم یا یک طراحی دیگری را روی محتواییم
مثل همین ک من قرار دادم یا تغییر دادم یا ایجاد کردم شما هم می توانید هر طراحی به نظرتان رسید یا برنامه نویسی کنید یا طرح به کد تبدیل کنید .
مثلا انهایی که توضیح دارند از دو تگ استفاده کردم یعنی عنوان
<h5></h5>
یکی پاراگراف یا پی
<p></p>
اگر عنوان خیلی مهم باشد از تگ های
<h1></h1>
<h2></h2>
براساس اهمیت تا اچ 6 می رود.می خواستم این فاصله را کم کنم ولی تفاوتی در تگ اش نداشت .در این قسمت از ترکیب تگ هد و پاراگراف استفاده کردیم اما چون که
از دوزبان استفاده شده است فارسی و انگلیسی باز خوانایی نتیجه مشخص نیست برای این کار باز ازتگ خط جدید یا اینتراستفاده می کنیم اگر خواستیم که هر زبان در یک خطی
باشد می توانیم از تگ خط جدید بیشتری استفاده کنیم هر کدام یک طراحی است بر مبنای سلیقه خودتان می توانید استفاده کنید (طراحی می تواند خیلی پیچیده تر ازاین
ها باشد ولی خوب این ابتدایی ترین حالت می تواند وقتی مفهوم را بدانیم و بدانیم چه کار کنیم و از چه راه هایی استفاده کنیم سخت و ساده و پیچیده تفاوتی ندارد)
در این قسمت مشاهده کردید که تگ پاراگراف دارای چندین تگ خط جدید یا اینترشد.حالا تگ پاراگراف را حذف می کنیم ببینیم تغییر در طراحی ایجاد می شود یانه
خوانایی اش کمتر شد.چون عنوان خودش دارای فضا هست نشان نمی دهد و قسمت انتهایی تگ پاراگراف مشخص است .یک قسمتی هم شاید اصلا ربطی به
طراحی نداشته باشدمی اییم برای این یک قسمتی از متن مشخص باشد و جلوی دید باشد ان را طوری طراحی می کنیم که مشخص تر از بقیه قسمت ها باشد.
حالا می خواهیم یک قسمتی از متن نسبت به بقیه مشخص تر باشد یا پررنگ تر باشد یا فکر کنم شنیده باشید بولد باشد در برنامه نویسی تحت وب هم چنین چیزی وجود دارد
یعنی چه؟ متنی را می خواهیم به همه دنیا نشان دهیم و ان را می خواهیم روی فضای مجازی یا اینترنت قرار بدهیم چی کار کنیم از زبان برنامه نویسی اچ تی ام ال
استفاده می کنیم برای این که قسمتی از متن را دستکاری کنیم از تگ های اچ تی ام ال استفاده می کنیم حالا اگر بخواهیم یک کلمه یا کاراکتر را روشن تر نشان دهیم یکی از ان تگ ها
تگ
<b>
هست و برای مشخص شدن یا اموزش بیشتر می توانید از این قسمت استفاده کنید .حالت های دیگر را ببینید.تگ بی را اعمال می کنیم حالا در نتیجه مشاهده می کنیم
این هم استفاده کاربردی از یکی دیگر از تگ های اچ تی ام ال در این تگ فرقی ندارد کجا استفاده کنید در عنوان که نتوانستیم استفاده کنیم اما مشاهده می کنیم درتگ
p,body
می توانیم ازش استفاده کنیم.حالا می آییم نتیجه را بایک مروگر دیگر بررسی می کنیم ببینیم چه تفاوت هایی با هم دارد. بعضی مرورگرها یکسری از چیزها راپشتیبانی نمی کنند
بعضی یکسری ها راپشتیبانی می کنند (یعنی بعضی تگ ها)
مثلا تگ
<b>
را مشاهده می کنید که کدام مرورگر پشتیبانی می کند و کدام پشتیبانی نمی کند تگ پاراگراف را مشاهده می کنیم
بریم ادامه طراحی صفحه مان .اینجا امدم به جای این که مثل قبل از دوتا تگ برای دو خط استفاده کنم از یک تگ برای دوخط استفاده کردم از روش های دیگری برای
طراحی هم می توان استفاده کرد تا جایی پیش می رویم که از تگ هایی که یاد می گیریم استفاده می کنیم
ساختار عنوان و توضیحی که ت اینجا ساختیم با دوتگ عنوان و پاراگراف یک تگ دیگری وجود دارد مقاله یا ارتیکل که این ساختار را به ما می دهد.
حال طراحی را به سبک دیگری انجام می دهیم . می بینید که طول مقاله یا محتوا یا متن انقدر زیاد است که پیدا کردن ان بخشی که کدنویسی می کنیم سخت می شود
در اینجا از اچ 2 استفاده کرده است ولی ما از اچ 5 استفاده می کردیم و همانطور که ما از پاراگراف استفاده می کردیم اینجا هم از پاراگراف استفاده می کند خوب ببینیم
چه تغییری می کند حال یک کار دیگری می کنیم تگ ها اینتر یا خط جدید را پاک می کنیم ببینیم تگ
<article></article>
نیاز دارد به این که اینترداشته باشد یا اگر متنی از قبل اینتر داشته باشد انها را نگه می دارد.پس نیاز به اینترها دارد حالا چه تفاوتی با تگ پاراگراف دارد؟منابع
کاربردش را اینجا معرفی کرده است ولی ما در مثال مان چطوری ازش استفاده کنیم پس نیاز هست که اینتر هار اوارد کنیم فعلا درحال حاضر
چنین طراحی به نظرمان می رسد.اگر طراحی بهتری به نظرم رسید دوباره تغییرش می دهم . هدفم هدفمان این است که از تگ های اچ تی ام ال در فایل اچ تی ام ا
استفاده کنم و ان را روی اینترنت بگذارم .یکی دیگر از تگ های پرکاربرد دایو یا
<div>
یا تقسیم کننده می باشد می خواهیم تاثیر تگ دایو را در این قسمت مشاهده کنیم.
پاراگراف برای متن استفاده می شود ولی دایو برای همه موارد استفاده می شود.
پس تا اینجا با تگ های زیر اشنا شدیم و از انها استفاده کردیم
html,body,head,title,h1,..,h6,p,b,br,article,div
با این تگها من توانستم این طراحی را کنم شما می توانید طراحی بهتری داشته باشید.
چرا مثل اول کار از تگهای اینتر استفاده نمی کنید و همه را پشت سرهم نمی نویسید و ازتگ های تو در تو استفاده می کنید که شکل و شمایل شبیه هم می شود خیلی تفاوت نداری
در اینده تفاوتش را متوجه می شوید وقتی بخواهید طراحی تان را تغییر بدهید یا حرفه ای تر کنید یا پیشرفته تر کنید یا بخواهید از زبان های دیگری برای کامل
تر کردن اش استفاده کنید از این های استفاده می کنید درسته شاید در ظاهر تگ ها تاثیر شبیه به هم داشته باشند اما در ترکیب با زبان های دیگر تغییراتش مشخی می شود.
یعنی مثلا یکی از کاربردهایش این است که اگر بخواهیم یک محتوایی را در یک جایی از صفحه وب پیدا کنیم از این تگ ها استفاده می کنیم .
و نکته بعدی اگر طراحی بهتری به ذهنم امد می اییم و می گویم این طراحی را اگر انجام می دادیم بهتر بود .
تا اینجا می توانیم ساختار درختی کدهای اچ تی ام الی که نوشتیم را در قسمت
inspect
ببینیم .حالا سبک نوشتاری این قسمت را هم کمی تغییر می دهیم استفاده از تگ آی یا ایتالیک
<i></i>
پس نکته ی مهمی که وجود دارد اول باید طراحی بدانیم و چگونه طراحی کردن را بدانیم بعد برنامه نویسی اچ تی ام ال را یاد می گیریم بعد می توانیم
طراحی را با برنامه نویسی تحت وب اچ تی ام ال روی فضای مجازی به دیگران منتقل کنیم این هم کاربرد کاری که انجام می دهیم به غیر از آموزش های دیگر .
تغییراتی هم می توانیم در زمان اجرا بدهیم بعد ان را روی کدهایمان اجرا کنیم مثلا می خواهیم فونت را تغییر بدهیم حالا سوال این است که
فونت کدام قسمت از صفحه را می خواهیم تغییر بدهیم
فیلم آموزشی:
فایل های مورد نیاز:
موفق باشید
به امید خدا
