تگ br و تگ های قالب بندی متن در html

تگ های قالب بندی متن در html

تگ های قالب بندی متن در html به زبان ساده تگ p، تگ br، تگ hr و DOCTYPE

DOCTYPE چیست؟

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

قبل از اینکه تگ html را باز کنید و کد های خود را شروع کنید بایستی عبارت

<DOCTYPE  html!>

را بنویسید.

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

تگ های قالب بندی متن

از اینجا به بعد تگ های قالب بندی متن برای شما توضیح داده می شوند.

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

تگ های عنوان

ما در این زبان شش تگ عنوان داریم، که بر اساس مهم بودن و  تاکید بر روی یک متن نوع آنها متغیر است.

یک نکته ی انگیزشی!!

تمامی عناوینی که در این مقاله مشاهده می کنید با استفاده از این تگ های ساخته شده اند این تگ ها به تگ های heading هم مشهورند.

اگر متوجه نشدید نگران نباشید و به خروجی کدی که در ادامه قرار دارد توجه کنید.

تگ های عنوان شامل:

می شوند .

کد html با تگ های عناوین.

کد زیر را در مرورگر خود کپی کنید و خروجی بگیرید.

خروجی:

خروجی با تگ های header

خروجی را مشاهد کنید.

خط اول ما به مرورگر گفته ایم که ما از جدید ترین نسخه ی html استفاده می کنیم.

بعد از آن تگ html باز شده است که به این معنا است که ما از زبان html استفاده می کنیم.

سپس شما می بینید که تگ head بخش اول زبان html باز شده است.

بعد به ترتیب اتفاق های زیر رخ داده است:

بسته شدن تگ head

باز شدن تگ body بخش دوم زبان html

باز و بسته شدن شش تگ عنوان

باز شدن تگ h1:

<h1>

و بسته شدن تگ h1:

</h1>

و باز و بسته شده دیگر تگ ها عنوان هم به هیمن ترتیب است.

وقتی که ما تگ h1 را باز و بسته می کنیم در واقع می گوییم که هر چیزی که در بین این تگ وجود دارد را به صورت سر تیتر 1 نمایش بده.

بسته شدن تگ های body و html

همانطور که در خروجی این کد هم دیدید متن به ترتیت در تگ h1 از همه بزرگتر است و سپس همینطور تا تگ h6 که کوچکترین آنهاست ادامه دارد.

تگ <br>

در جلسه ی قبل گفته شد که، بعضی از تگ ها بسته نمی شوند .

یکی از این تگ ها تگ <br> است، که به این معناست که متن ما به خط بعد برود.

در اچ تی ام ال، وقتی که مرورگر در حال خواندن کد های ما است، اینکه ما به خط بعد رفتیم را در نظر نمی گیرد!

ولی وقتی ما از تگ br استفاده می کنیم.

به مرور گر می گوییم که حتما باید به خط بعد برود. یعنی اینکه به گونه ای متن یا هر پدیده ی دیگری را می شکند و به خط بعدی می رود.

تگ br از پرکاربرد ترین تگ های html است.

البته تگ br فقط برای متن مورد استفاده قرار نمی گیرد در جاهای دیگر هم مورد استفاده قرار می گیرد که در جلسات بعدی به آنها می پردازیم.

دوستان گرامی شما در جای جای html نیازمندید که در درون یک تگ از تگ های دیگر استفاده کنید مثالی که در ادامه زده می شود مثال ساده ای می باشد ولی در همین کد ما از چندین تگ تو در تو استفاده کرده ایم.

مثلا تگ body درون تگ html است. یا تگ br در درون تگ p است. و…

در ادامه ی این آموزش توضیحات بیشتری داده می شود.

مثالی باز تر با تگ br

خروجی :

سلام

دنیا

خروجی بدون تگ br

سلام دنیا

توضیح کد بالا:

تمامی موارد همه موارد تا خط 4 در بالا توضیح داده شد.

در خط 5 ما تگ p را باز کرده ایم که شما تمامی متون خود را در این تگ می نویسید.

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

بعد تگ br نمایان شده که مرورگر را مجبور می کند تا به خط بعد برود.

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

و بعد هم تگ های p و body و html هم بسته شده اند.

تگ <hr>

از تگ hr، برای کشیدن خطوط افقی استفاده می کنیم.

تگ hr هم جایی بسته نمی شود.

مثال برای این تگ:

خروجی :

hello world

______________________________________________________________________________________________________

همانطور که مشاهده کردید تگ hr خطی افقی در زیر hello world ایجاد کرد.

ترکیبی از 3 کدی که در آموزش های امروز یاد گرفتید.

 

خروجی:

سلام دنیا

hello world

___________________________________________________________________________________________________________

توضیح کد بالا:

در این کد اول تگ h3 را بعد body داشتیم که متن را از حالت معمولی به کمی بزرگتر می رساند و کاملا توضیح داده شد.

سپس تگ br وجود دارد که متن ما را به خط بعدی انتقال می دهد. سپس شما می بینید که تگ hr خط افقی زیر hello world ایجاد کرده است.

دیگر تگ های قالب بندی متن.(و یک مثال با تمامی تگ ها تگ br و تگ hr)

در رابطه با هر کدام از دیگر تگ ها اگر بخواهیم به صورت جداگانه توضیح دهیم کمی زمان بر است برای همین مثال زیر را مطالعه کنید

دیگر تگ های قالب بندی متن

خروجی:

این متن bold می شود

همانطور که نوشته اید نمایش داده می شود

مثلا وقتی به خط بعد رفتید
مرورگر هم
به خط بعد
می رود

این متن چشمک زن نمایش داده می شود البته در بعضی از مرورگر ها که استفاده از این تگ پیشنهاد نمی شود


یک خط بلای سر متن است

 

روی این متن یک خط قرار می گیرد
این متن کج می باشد !!
این متن یک واحد بزرگتر است

این متن یک واحد کوچکتر است

 

توضیح کد بالا :

در کد بالا، بعد از تگ body تگ b وجود دارد. هر متنی که بین این تگ قرار گیرد، به صورت bold  نمایش داده می شود.

تگ pre، که کد های ما را به همان صورتی که ما نوشته ایم در مرورگر نمایش می دهد.

یعنی، هر کجا که در ویرایشگر متن خود، به خط بعدی رفتید در مرورگر هم همینطور می شود.

تگ blink که متن را به صورت چشمک زن نمایش می دهد. بیشتر مرورگر ها از جمله کروم و فایر فاکس از این تگ پشتیبانی نمی کنند برای همین استفاده از این تگ اصلا پیشنهاد نمی شود.

تگ hr که یک خط فقی ایجاد می کند و تگ br هم به خط بعد می رود.

تگ strike که متن را به صورت خط خورده نمایش می دهد.

تگ i که متن را کج نشان می دهد.

تگ </big> تگی است که به اندازه ی متن ما یک واحد اضافه می کند.

تگ </small> که از متن ما یک واحد کم می کند.

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

تگ های تو در تو در html

در اولین این مقاله به تگ های تو در تو اشاره کردم و حال قصد دارم مثال هایی برای درک بهتر شما از این موضوع بزنم.

مثلا در کد بالا که ساده ترین کدی است که از آن استفاده می کنید، ما در درون تگ html دو تگ body و head را داریم. چون تگ html به مرورگر می گوید که کد های ما html هستند پس مرورگر هر آنچه را که در  درون این تگ باشد را به عنوان html در نظر می گیرد.

در کد بالا که کمی پیشرفته تر است ما در تگ body دو تگ را قرار دادیم.

تگ اول که تگ b است و هر آنچه در آن نوشته شود به صورت bold نمایش داده می شود. و تگ بعدی هم تگ i است که هر آنچه در آن تگ باشد به صورت کج نمایش داده می شود.(به صورت کامل در بالا توضیح داده شده بود)

همانطور که مشاهده می کنید در تگ b تگ i قرار گرفته مثل مثال بالا هر دو تگ خاصیت خود را حفظ می کنند.

اینگونه در نظر بگیرید که تگ b عمل bold کردن را انجام می دهد. پس چونکه تگ i در درون آن قرار دارد محتویات آن تگ را هم bold می کند. پس خاصیت هر دو تگ حفظ می شود و متنی که قرار گرفته به صورت bold و کج نمایش داده می شود. و به همین راحتی می توانید تگ های تو در تو را تفسیر کنید.

صفت چیست؟

صفت ها در واقع اطلاعات اضافی را برای عناصر html (تگ ها) فراهم می سازند.

به عنوان نمونه هایی از صفت

ما در بالا تگ p را داریم که در آن از صفت style استفاده کرده ایم(لازم نیست این موراد را یاد بگیرید تنها برای درک صفت ها این مثال ها می زنم)

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

صفت align هم یک دیگر از صفات در html

همانطور که در بالا توضیح صفت داده شد قصد داریم به صفت align آشنا شویم از این صفت برای تنظیم محل قرار گیری یک یا چند عنصر استفاده می شود.

این صفت سه مقدار می پذیرد .

left

right

center

منظور از مقدار، همان اندازه یا نوع است.

اگر هر کدام از مقادیر بالا را به عنوان مقدار align قرار دهیم خروجی متفاوتی را به ما می دهد.

اگر مقدار را center قرار دهیم متن ما در وسط صفحه نمایش داده می شود.

اگر left متن ما سمت چپ قرار می گیرد.

و اگر هم right که سمت راست صفحه.

مثال:

در کد بالا متن ما به صورت bold و در وسط صفحه نمایش داده می شود.

مثالی باز تر:

خروجی کد بالا:

این متن به صورت عنوان و در سمت راست قرار خواهد گرفت

این متن وسط چین می شود

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

توضیح کد بالا:

اول از همه به مرورگر گفته ایم که ما از جدید ترین نسخه ی html استفاده می کنیم و سپس تگ html را باز  کرده  ایم بعد سپس تگ head که بخش دوم زبان html است باز شده بعد از آن عنوان صفحه ی خود را نوشته ایم و تگ

head بسته شده است. تگ body را باز کرده ایم.

بعد از تگ body در کد بالا ابتدا ما تگ p را باز کرده ایم و صفت align را با مقدار right در آن قرار دادیم.

بعد هم به ترتیب تگ های p و b هستند که به آنها این صفت را با مقدار متفاوت داده ایم.

 

نوشتهٔ قبلی
آموزش html به زبان ساده و کاملا پروژه محور
نوشتهٔ بعدی
تگ a در html، قرار دادن تصویر با html، لینک گذاری روی عناصر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست