5 نکته برای آشنایی بیشتر با کد های HTML

  • 1389/1/8
  • سپهر خيري
  • 8

HTML کلمه کوچک شده HyperText Markup Language هست.HTML در واقع یکی از مهمترین قسمت های یک سایت را تشکیل میدهد و احتمالا اسم آن را زیاد شنیده اید. HTML به عنوان یک زبان برنامه نویسی محسوب میشود ، که این زبان در سبک خود شگفت انگیز و در عین حال بسیار ساده هست ، به همین دلیل HTMLیک زبان محبوب در بین مردم شناخته شده است.

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

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

قسمت اول – مفهوم کلمه تگ یا همان Tag

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

با قرار گرفتن این تگ ها در اطراف این متن فقط این قسمت از متن تحت تاثیر قرار میگیرد

با گذاشتن یک تگ متفاوت با قبلی میتوانید یک قسمت دیگر از متن را تحت تاثیر قرار بدید

به طور کلی اگر بخواهیم مثال بالا را شفاف تر کنیم ، یعنی با گذاشتن تگ در اطراف متن میتوانیم یک قسمت از متن را انتخاب کنیم و بعد روی آن تغییرات انجام میدهیم ، مثلا اول با تگ یک قسمت از متن را انتخاب میکنیم و بعد برای آن قسمت یک رنگ انتخاب میکنیم ، که نتیجه اش رنگی شدن قسمتی از متن هست.به جزء رنگی کردن یک قسمت از متن میتوانیم به متن لینک بدهیم ، آنرا bold کنیم ، فونت آن را بزرگتر کنیم و چنیدن کار دیگر.

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

نکته: تگ های , و یک معنی را میدهند و فقط شکل شان فرق دارد.

در مثال زیر میبینید که با گذاشتن این تگ ها هم میتوان کار کرد:

با قرار گرفتن این تگ ها فقط این قسمت تحت تاثیر قرار میگیرد

همانطور که در قبل گفتیم با تگ ها استفاده های زیادی میتوان کرد ، مثله رنگ گرفتن متن ، بزرگ کوچک کردن متن ، مایل کردن متن ، لینک دادن به متن ، نمایش دادن یک عکس به وسیله آدرس عکس ، و غیره. ما در بعضی وقت ها که میخواهیم با یک بار Tag گذاشتن چندین کار را روی متن انجام دهیم ، بعد از نوشتن Tag یک value هم مینویسیم ، مثلا 1 value یا 2 value ، یعنی با گذاشتن value دستور را از دستور قبلی جدا میکنیم ، مثلا میخواهیم هم متن بزرگ شود و هم رنگی شود.

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

قسمت دوم – دسته بندی HTML ، HEAD و BODY

HTML ، HEAD و BODY یکی از معروف ترین تگ ها هستند که میتوان آنها را به اتاق خواب ، آشپزخانه و نشیمن تشبیه کرد. در واقع کار اصلی این تگ ها جدا کردن قسمتی از متن از دیگر قسمت های برنامه نویسی هست.

با استفاده از این تگ میتوانید قسمتی از متن را فقط به کد های HTML اختصاص دهید. این کد در مواقعی به کار می آید که برنامه نویسی اصلی شما مثلا PHP هست و میخواهید در آن از HTML هم استفاده کنید.

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

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

قسمت سوم – زیبا سازی و ویرایش نوشته ها با

،
و

همانطور که میدانید زبان HTML به خودی خود نمیتواند به نوشته ها و متن ها رنگ و لعاب دهد ، و برای همین کار باید از کد های مخصوص استفاده کنیم. به یاد داشته باشید وقتی که اینترنت به وجود آمد خیلی به اصطلاح text-y بود ، یعنی تمام پایه و اساس اینترنت نوشته ها بودند و شما هیچ زرق و برق یا ویژگی مهمی نمیدید ، ولی الان با پیشرفت این زبان شما گسترش سایت های مثله یوتیوب را میبینید ، و همه اینها به خاطر تگ های جدید و تگ های زیبا سازی هستند.
حال ما در اینجا برخی از پر کاربرد ترین تگ های زیبا سازی را به شما نشان میدهیم:

ضخیم کردن نوشته ها

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

خط زیر نوشته گذاشتن

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

ایجاد یک خط جدید ، رفتن به سر خط

ایجاد یک فضای خالی زیاد ، رفتن به پاراگراف بعدی

با این تگ ها شما میتوانید یک سند درست کنید ، به طور مثال میتوانید در سایت خود یک سند و متن مرتب و منظم داشته باشید ، ولی امروزه با زدن چند تا دکمه این تگ ها به صورت خودکار اضافه میشوند و لازم نیست که شما دستی اینکار را انجام دهید.

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

به طور مثال شما نتیجه این کد را نوشته آبی رنگ میبینید smurfs.

تا

به وسیله این کد میتوانید بزرگی و کوچکی نوشته را تنظیم کنید ، H1 یعنی بزرگترین اندازه و H6 یعنی کوچک ترین اندازه. به طور مثال در سایت MakeUseOf مطالب با H3 نوشته میشوند.

امروزه اغلب پوسته های سایت ها با فرمت CSS ساخته میشوند و با این نوع فرمت اجرا میشوند. اکثر تگ های که در این نوع پوسته ها به کار میروند div هست. به طور مثال اینگونه نوشته میشوند

sometext

. این کد در HTML کار نمیکند ولی اگه آن را به CSS تبدیل کنید نتیجه کار را headermakeuseof میبینید.

قسمت چهارم – گذاشتن عکس با

برای جاسازی عکس در HTML شما احتیاج به اضافه کردن یک کد دارید که آن کد فقط از دو تگ تشکیل میشود ، با گذاشتن این تگ میتوانید یک عکس را به نمایش بگذارید. البته با تغییر این کد ها میتوان کاری کرد که کسی نتواند عکس ها را در کامپیوتر خود ذخیره کرد ، مانند آن را در سایت Flickr دیده ایم. در اینجا ما نمیخواهیم وارد جزئیات شویم و فقط میخواهیم با آن آشنا شوید.

در اینجا برخی از کد های مربوط به عکس را نشان میدهیم

src=”http://site.com/image.jpg/”

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

گاهی اوقات فقط قسمتی از URL نمایش داده میشود. و URL واقعی در داخل فایل HTML قرار گرفته است ، و به همین خاطر نمیتوانید آدرس دقیق عکس را پیدا کنید. به این کار به اصلاح میگویند relative address یا “آدرس نسبی” میگویند. این در مواقعی مفید هست که نمیخواهد آدرس عکس شما فاش شود. به طور مثال میتوانید یک آدرس به اینگونه درست کنید : http://site.com/dir1/dir2/dir3/page.html و بعد در داخل این آدرس یک عکس با نام image.jpg جاسازی کنید. برای اینکار کافیست یک عکس در همان فولدری که page.html قرار دارد قرار دهید. و آدرس کامل به طور مثال اینگونه میشود : http://site.com/dir1/dir2/dir3/image.jpg.

اگر شما با آدرس نسبی یا آدرس relative مثله dir4/image.jpg رو به رو شدید ، احتمالا آدرس کامل آن http://site.com/dir1/dir2/dir3/dir4/image.jpg میباشد.

height=”200″ width=”50%”

این کدی که در بالا هست ، مشخص کننده اندازه تصویر هست. با این کد میتوانید سایز و اندازه تصویر را تغییر دهید ، به اینصورت که اگر عکس واقعی کوچک هست میتوانید با این کد آن را بزرگ کنید و یا بالعکس. این اندازه را میتوانید بر حسب “درصدی” یا “پیکسلی” بنویسید (به طور مثال اگر میخواهید عرض عکس 200 بر حسب پیکسل باشد باید بنویسید 200px ). همانطور که میبینید یک قسمت height وجود دارد و یک قسمت width که با افزایش مقدار width فقط عرض تصویر تغییر میکند. البته هر دو این قسمت ها را میتوانید با تگ stretch هم تغییر دهید.

Alt= “نام های جایگزین”

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

کد کامل این کار اینگونه میباشد : ”example”

قسمت پنجم – ساخت لینک با تگ

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

href=”http://www.makeuseof.com”

یکی از پر کاربرد ترین کد ها متن میباشد. شما با این کد میتواید به راحتی هر لینکی را به هر نوشته ای بدهید. در قسمت اول که نوشته شده است “آدرس سایت” باید آدرس مورد نظر را وارد کنید و در قسمتی که نوشته شده است “متن” نوشته ای که میخواهید به آن لینک دهید را بنویسید.

name=”neverwhere”

این کد و تگ به وسیله نام صفحات کارمیکند. با استفاده از این تگ میتوانید از ویژگی anchor استفاده کنید. با ویژگی anchor میتوانید از لینک بازگشت یا همان back در صفحات اینترنتی استفاده کنید. آدرس این لینک میتواند نسبی یا متعلق باشد ، یعنی اینکه اگر لینک مورد نظر شما در سایت خودتان هست دیگر لازم نیست آدرس کامل آن را بنویسید و فقط کافیه نام صفحه را بنویسید. به طور مثال میتوانید از این دو نوع کد استفاده کنید و .

نتیجه گیری

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

اگر شما به دنبال یک تگ خاص مانند ، تگ عکس یا لینک هستید میتوانید در همین صفحه با زدن دکمه Ctrl+F و تایپ کلمه مورد نظر تگ خود را پیدا کنید. البته فعلا تعداد تگ ها در این صفحه کم هست و بعدا احتمالا بیشتر میشوند.

آیا این اولین برخورد شما با کد ها و تگ های HTML بود؟ لطفاً نظرات خود و هرچه که فکر میکنید در مورد این مطلب ربط دارد را در بخش نظرات به ما اطلاع دهید.

منبع: makeuseof

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 8 دیدگاه
  1. مرسی خوب بود
    دمتون گرم
    سایتتون خیلی خوب پیشرفت کردن (حداقل تو این چند روزه که من میشناسم)

    1. سلام خواهش ميكنم نظر لطفتون عزيز… موفق باشيد… .

  2. salam
    ghalebe weblage man ye moshkel dare har kari mikonam dorost nemishe lotf mikonid rahnamaem konad???????????
    matalebe akhare man gay ke man neveshtam nemiran ghesmate balay weblagam miran
    lotfan be man begi chikar bayad bokonam

  3. سلام
    من یه راهنمایی میخواستم.
    میخواستم ببینم کدی هست که اندازه ی عکس رو به یه اندازه ی خاص کوچیک کنه.
    یعنی عکس هایی که از یه مقدار خاص بیشتر هستند اندازشون کوچیک بشه ولی عکس هایی که از اون اندازه ی خاص کوچیکتر هستند با اندازه ی واقعی نشون داده بشن.
    مثلا اگه اندازه دلخواه 500 هست، عکس که اندازه ش 600 هست بشه 500 ولی عکس که 400 اندازشه، تغییری نکنه.
    ممنون

  4. سلام مطالبتون خیلی مفید بود یادت باشه به ولاگ مذهبی فرهنگی من یک سر بزنی و با خط درشت در نظر بدهید ها حک کنی این نظر منو

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