تبلیغات

شروع قدرتمند HTML – درک HTML

شروع قدرتمند HTML - درک HTML

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


درک بیشتری از HTML

اگر درس اول که مربوط به HTML چیست؟ و تفاوت سایت های استاتیک و دینامیک را مطالعه کرده باشید! به نسبت با اصل موضوع آشنا شده اید ولی واقعا HTML چیست؟

قبل از این که بگوییم واقعا HTML چیست به این نکته توجه کنید که HTML مختص مرورگر وب نمی باشد. بلکه HTML یک زبانی است که از آن برای نشانه گذاری متن استفاده می کنیم. یعنی چه؟ یعنی این که شما یک دفترچه یادداشتی را تصور نمایید که فقط می توانید در آن بنویسید و نه قلم دیگری دارید و نه رنگ و نه چیز دیگری ولی HTML آمده است تا به شما کمک کند در متن خود از رنگ و عکس و … هم استفاده کنید.

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

HTML مجموعه ساختاری است که توسط موتور های رندر (خروجی) گیری که در مرورگرها هم وجود دارد، به محتوای رندر شده تبدیل می شود. بر فرض در HTML تعریف شده است که اگر در متن چیزی بین <b></b> وجود داشت آن را درشت نشان بدهد.

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

خود ساختار HTML نیز قبلا برنامه نویسی شده است و همین گونه به خودی خود به وجود نیامده است، یعنی افرادی آمده اند و به موتور رندر گیری گفته اند که اگر در متن فلان چیز را دیدی آن را بولد یا درشت نشان دهی و .. . و سپس ساختاری را ایجاد کردند و اسم آن را نیز HTML گذاشتند و این ساختار را مورد استفاده قرار دادند. وگرنه شما نیز می توانید یک ساختار طراحی کنید و یک موتور رندر گیری برای تفسیر آن ساختار و نشان دادن آن در حالت رندر شده و وقتی از سمت سرورتان کد را ارسال می کنید در این ساختار ارسال کنید و توسط موتور رندر مختص ساختار شما رندر گیری شده و نشان داده شود. ولی توجه داشته باشید چون HTML دیگر یک ساختار استاندارد می باشد و هر مرورگری نیز آن را پشتیبانی می کند اما شما آیا می توانید به کروم بگویید که ساختار شما را تفسیر کند؟ خب معلومه که نه! علتشم اینه که در کروم موتور رندر گیری ساختار شما وجود ندارد و HTML برای آن تعریف شده است. توسط موتور رندرگیری مرورگر، این کد که ساختار HTML را دارا می باشد، به شکل رندر گرفته شده تفسیر می شود.


بخش اول را با درک بیشتری از HTML تمام کردیم و در این بخش از فول کده به موضوع پایین خواهیم پرداخت.

HTML بر محور تگ پایه گذاری شده است

من اینجا نمیخوام بهتون بگم تگ چیه و چی نیست یا معنیش چیه! میایم و یکی از تگ های HTML رو مورد بررسی قرار می دهیم. تا بفهمیم که تگ چیه!

فرض کنید میخواهیم به یک متن رنگ بدهیم. و نام تگی که برای این کار استفاده می شود font می باشد. اما چگونه از این استفاده کنیم؟

می نویسم:

خب تا اینجا فهمیدیم که تگمون با علامت کوچک تر ریاضی شروع شده و نام تگ در داخل آن نوشته شده و با علامت بزرگتر آن را می بندیم.

سپس می نویسیم:

خب اگر دقت کنید متنمان را که FullKade.Com می باشد بعد از علامت بزرگتر اول نوشتیم!

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

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

نکته: دقت کنید که هر آنچه که بین شروع تگ و پایان تگ قرار بگیرید جزو فرزندان آن تگ به حساب می آید و تگ برروی آن ها تاثیر می گذارد.

سوال: خب یه سوال؟ الآن این جا رنگو کجانوشتیم؟ خب ننوشتیم که هنوز! پس کجا می نویسیم؟

جواب: هرتگی دارای یک سری خصوصیاتی می باشد یا بهتر بگوییم یک سری ویژگی ها، و در این جا یکی از ویژگی های  تگ فونت color می باشد که برای دادن رنگ از آن استفاده می کنیم.


فرم نوشتن ویژگی:

name=”value”

name برابر نام ویژگی و value مقدارش علامت های = و ” که حتما باید باشند.


ویژگی هارا درکجا می نویسیم؟

خب برای فهمیدن من میامو توهمون تگ بالا ویژگی رو می نویسم.

نکته: دقت کنید که بعضی تگا بدون ویژگی عملا هیچ کاریو انجام نمیدن.

نکته: دقت کنید که هر ویژگی ای مقدارهای خاصیو می پزیره و فعلا من تو اینجا درمورد مقدارهایی ویژگیها و انواع ویژگی ها بحث نمی کنم.


نوشتن ویژگی های بیشتر:

خب مثلا این تگ فونت یه ویژگی دیگه هم به اسم size داره و برای نوشتنش میایم:

 خب اگه دقت کنید این رو می تونید بفهمید که بین ویژگی ها فاصله دادیم.

نکته: فرقی نمی کنه که کدوم ویژگی رو اول و کدومو آخر بنویسیم.

نکته: لازم دیدم که اینو بگم بعضی ویژگی ها نیازی به مقدار دهی ندارند و تنها با قرار دادن اسمشون در قسمت ویژگی ها کار می کنند و البته برای مقداردهی هم می تونید اسم  خودشو به عنوان مقدارش بهش بدید که در نسخه های HTML تفاوت کرده است ودر یک نسخه نیازه بدید و در نسخه دیگه نیاز نیست که در آموزش ها ذکر خواهند شد.


تگ های بدون تگ پایانی

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

تگ شکستن خط که برای رفتن به خط بعدی می باشد این گونه است که فقط کافیست بنویسم <br>


قانون های HTML

قانون 1: تگ ها به حروف بزرگ و کوچک حساس نیستندو یعنی font با FONT فرقی نداره.

قانون 2: بیش از یک فاصله در نوشتن محتوا حساب نمی شه و و برای دادن فاصله بیشتر از روش خاص آن استفاده می کنیم و همچنین برای رفتن به خط بعدی با زدن Enter و بردن کد به خط بعدی نمی توانید، عملا هیچ کاربردی ندارد و تنها برای مرتب کردن کد می توان از آن استفاده کردو برای بردن متن به خط بعدی نیز می توان از روش های خود مثل تگ br که در بالا برای شکستن متن ذکر شد استفاده کرد.

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

قانون 4: HTML به تنهایی قدرت لازم را برای استایل دهی زیبا ندارد و برای این کار از CSS استفاده خواهیم کرد.

 قانون 5: HTML کامپایل نمی شود بلکه تفسیر می شود و این باعث می شود که اگر جایی از کد را اشتباه نوشته باشیم، ایرادی نگیرد.

این مقاله رفته رفته بانظرات شما کامل تر خواهد شد.

بخش بعدی نیز به زودی قرار خواهد گرفت.

مقاله اختصاصی از فول کده

HTML چیست؟ و تفاوت سایت های استاتیک و دینامیک
تبلیغات
0
کانال تلگرام فول کده
تبلیغات

پاسخ دهید

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

نظرات ثبت شده بدون دیدگاه