سلام دوستان، در پست های قبل با مفاهیم اولیه و آرایش کدهای 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>
که خروجی بگیریم، میشه این:
تمرین کنید، با تگ ها بازی کنید ، جاهاشونو عوض کنید، خطاهارو ببینید تا بهتر درکشون کنید.
موفق باشید ...
MR_C0D3R :
Attacker 32 :
ولم کنید (: :