HTML به زبان ساده (قسمت۳: شروع طراحی وب و کار با متن) :: V i R u s Ʒ²

V i R u s Ʒ²

هک و امنیت

V i R u s Ʒ²

هک و امنیت

Virus 32

💢 دوستانم بی دفاع و دشمنانم بی جواب نخواهند ماند 💢

-->
آخرین نظرات
  • ۶ ارديبهشت ۰۳، ۱۶:۱۵ - hidden
    test

سلام دوستان، در پست های قبل با مفاهیم اولیه و آرایش کدهای html آشنا شدید، در این پست قصد داریم تا استارت طراحی وب رو بزنیم و کار با متن رو در این زبان یاد بگیریم. و از وبمون خروجی بگیریم تا اولین وبی که باهم میسازیم رو ببینیم. در واقع برای دوستان آماتور، افتتاحیه طراحی وب محسوب میشه ;) پس تا آخر پست مارو همراهی کنید لطفاً...


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

<!DOCTYPE HTML>  (تابلو مشخص کننده زبان)
<HTML>  (تگ ابتدایی)
<Head>  (تگ ابتدایی بخش سرکدها)
کدهای بخش سرکدها
</Head>  (تگ انتهایی بخش سرکدها)
<Body>  (تگ ابتدایی بخش بدنه)
کدهای بخش بدنه
</Body>  (تگ انتهایی بخش بدنه)
</HTML>  (تگ انتهایی)

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

خوب، حالا ما میخوایم، چند نمونه از کد های بخش سرکد و بدنه رو بنویسیم تا بتونیم یه وبسایت خیلی ساده طراحی کنیم.

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

برای درج عنوان وب، از تگ title استفاده میکنیم.کد زیر رو بین تگ Head مینویسیم.

<title> Virus32 </title>

که به جای Virus32 عنوان خودتون رو میزارید، دقت کنید که کد title هم، تگ ابتدایی و انتهایی داره! خوب بعد از اینکه، این کد رو در قسمت سرکد ها نوشتید، میخوایم از وبمون خروحی بگیریم تا ببینیم که عنوان درج شد یانه؟!؟

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

تبریک میگم، اولین خروجی وبمون رو گرفتیم. :)

حالا میریم سرغ نوشتن متن در وبمون...    متن جزو بخش های نمایشی هست در بدنه وب هست، پس برای همین متن ما باید بین تگ Body قرار بگیرد. در زبان html برای نوشتن متن به صورت خط به خط از تگ <p> استفاده می کنیم و هر تگ <p> شامل یک خط است.. مثال متن زیر 4 خط است پس باید 4 بار از تگ <p> استفاده کنیم. مثلاً متن زیر رو میخوایم در وبمون به نمایش در بیاریم:

Hello World!

i'm Mozahem32.

I Hope You Learn the html and all Programing Language.

this is first Website...

به این صورت عمل میکنیم. (کد زیر رو در بین تگ Body قرار دهید):

<p> Hello World! </p>
<p> i'm Mozahem32. </p>
<p> this is first Website... </p>
<p> I Hope You Learn the html and all Programing Language. </p>

دیدید، این متن در چهار تگ <p> نوشته شد.          حالا میخوایم به چند ویژگی متون اشاره کنیم...


ویژگی 1 :

اگر هر متن رو بین تگ <B> قرار بدین، متن ما به صورت Boldپررنگ در میاد...    مثلاً خط اول رو به این صورت بنویسید:

<p><B> Hello World! </B></p>

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

* نکته بسیار مهم *: دقت کنید که هرتگی که باز میکنید، جای مناسبی اون رو ببندید، هرتگی که زود تر باز شه، دیر تر بسته میشه، در کد بالا تگ <p> زودتر از تگ <B>  باز شد، برای همین باید بعداز تگ انتهایی <B> بسته بشه. مثلاً اگه به شکل زیر باشه، اشتباهه و با مشکل مواجه میشه!!!


<p><B> Hello World! </p></B>   اشتباه


ویژگی 2 :

اگر هرمتنی رو بین تگ <U> قراربدیم به صورت Underline زیرخط دار در میاد...   مثلاً خط دوم رو به این صورت بنویسید:

<p><u> i'm Mozahem32. </u></p>

به نکته بالا توجه کنید تا اون اشتباه ترتیب تگ ها رو انجام ندین!    میبینید که خط دوم به صورت زیرخط دار یا Underline دراومده.

نکته: برای مشاهده تغییرات جدید وب باید، کدهارو سیو کنید و مروگر رو باز و بسته کنید یا با زدن کلید F5 وب رو Refreshرفریش کنید.


ویژگی 3 :

اگر متنی رو بین تگ <i> قرار بدیم، متن ما به صورت Italic کج و مورب درمیاد...    مثلاً خط سوم رو به این صورت بنویسید:

<p><i> this is first Website... </i></p>

نکته های دفعات قبل حواستون هست دیگه :)       میبینید که خط سوم به صورت مورب یا Italic دراومده.


حالا برای این نکته بالا رو خوب متوجه بشید، خط چهارم رو هم پرنگ میکنیم و هم زیرخط دار و هم کج و مورب، یعنی از سه تگ <B> و <U> و <I>  استفاده می کنیم. که میشه:

<p><b><u><i> I Hope You Learn the html and all Programing Language. </i></u></b></p>

حله؟!؟

پس در این پست کمی با ویژگی های متن کار کردیم، انشاالله در پست های بعد بیشتر آشنا میشیم.

کد ما تا الان این شد:

 

<!DOCTYPE HTML>
<HTML>
<Head>
<title> Virus32 </title> 
</Head>
<Body>
<p><b> Hello World! </b></p>
<p><u> i'm Mozahem32. </u></p>
<p><i> this is first Website... </i></p>
<p><b><u><i> I Hope You Learn the html and all Programing Language. </i></u></b></p>
</Body>
</HTML>

 که خروجی بگیریم، میشه این:

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


موفق باشید ...

نظر (۳)

ایوللللل این همون چیزی بود که دوست داشتم

ادامه بدین لطفا عالیهه حاجی ویروس هر روز بهتر از دیروز :)

راستی دوتا سوال :
1. متنهای بولد و کج تلگرام هم به این شکل ، بولد و کج میشن دیگه؟
2.میشه یه صفحه وب ساده به این شکل ساخت؟ اگه میشه یه هاست رایگان معرفی کنین مرسی
Virus32 MR_C0D3R ‌ :
نمیدونم منظورت از اینکه تلگرام متناش کجه و اینجور چیزا چیه
چون تا جایی که میدونم اگه به تلگرام فونت ندیم متنامون رو کج و کله در نمیاره
ولی در کل ما با استفاده از تگ <i> و <b> که تو پست گفته شد
میتونیم متنای خاص خودمون رو کج تر و کلفت ترش کنیم...
هاست رایگان هم سراغ ندارم...
الان به لطف سایتایی که هاست ارائه میدن
با ده تومن میتونی هاست و دامنه خودتو فعال کنی
بخاطر همین زیاد سراغ هاست رایگان نمیرم :(
البته تو نت بگردی ....
هستن سایتایی که هاست مفتی بدن....
سلام 
تا اینجا ک اسون بوده :) 
امیدوارم ادامه بدین 
ممنون واسه زحمتاتون
Virus32 Attacker 32 :
سلام، بله حتما، از مقدماتی تا سطح پیشرفته ادامه میدیم، حتی وارد Css و JavaScript هم میشیم...

سلام

یه سوال داشتم

بزرک و کوچیک بودن حروف و فاصله ها هم نقشی دارن؟ ینی مثلا اکه یه جا که باید فاصله بزاریم نزاریم با مشکل مواجه میشیم؟

Virus32 ولم کنید (: :
خیر مشکلی نیست.
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی