مفاهیم پایه ای html و نکاتی که همه ی کاربران اینترنت باید بدانند!
همانطور که می دانید کد های html بخش مهمی از پروسه طراحی سایت را تشکیل میدهند. با توجه به این که برنامه نویسان صفحات را با html طراحی می کنند، یادگیری مفاهیمی که در کد های html بکار می رود می تواند به شما بسیار کمک کند. ما در این مقاله، بسیاری از مفاهیم پایه ای html، ساختار اصلی html و نحوه برخورد html با سایر زبان ها را بررسی می کنیم.
معرفی html :
Html مخفف Hypertext Markup Language است و جز زبان های نشانه گذاری بشمار می روند. درصورتی که بسیاری از افراد، فکر می کنند html جزو زبان های برنامه نویسی است. اگرچه html بسیار ساده است ولی پایه و اساس بسیاری از صفحات وب است.
شما می توانید روی اکثر صفحات وب در مرورگر خود راست کلیک کنید و گزینه ی view page source را انتخاب کنید تا کد هایی که برای طراحی آن صفحه استفاده شده است به شما نشان داده شود. البته صفحات را فقط با html طراحی نمی کنند ولی به راحتی می توانید کد های html را در بین آن ها مشاهده کنید.
حتی اگر شما طراح سایت نیستید و به آن علاقه ای ندارید، با خواندن این مقاله و یادگیری مفاهیم پایه ای html، حداقل اطلاعاتی که یک کاربر به آن نیاز دارد را یاد میگرید. در ادامه، نحوه ی عملکرد کد های html را با هم بررسی می کنیم.
گام اول : درک مفهوم برچسب ها (tags)
Html از سیستم برچسب گذاری برای طبقه بندی عناصر (elements) مختلف document ها استفاده می کند. اکثر برچسب ها بصورت جفت در کدها ظاهر می شوند و روی محتوایی که بین آن ها قرار دارد تاثیر می گذارند. به مثال زیر توجه کنید.
<strong>This is some bold text</strong>
به این نکته توجه کنید که برچسب انتهایی با (/) شروع می شوند که نکته بسیار مهمی است. بعنوان مثال اگر در مثال بالا ما برچسب را نمی بستیم تمامی متن هایی که بعد از برچسب شروع قرار دارند bold میشوند.
همانطور که گفتیم همه برچسب ها بصورت جفت ظاهر نمیشوند، همینطور برچسب هایی هستند که هیچ محتوایی درون آن ها قرار نمیگیرد مثل تگ <br> که برای رفتن به خط بعد استفاده می شود.
گام دوم : اسکلت اصلی بدنه ی html
همه ی کد های html که به خوبی کار می کنند شامل تگ های زیر می شوند. وجود تمامی این تگ های ضروری اند.
- همه کد های html باید با تگ <DOCTYPE html!> شروع شوند تا بعنوان یک فایل html شناخته شوند. همینطور در آخر کد ها باید از تگ <html/> استفاده کنید تا تگ ابتدایی بسته شود.
- بعد از آن تگ <head> قرار می گیرد که شامل اطلاعات صفحه می شود مثل تیتر اصلی صفحه، اطلاعات فایل های scripts که استفاده می شود و … . همانطور که از اسم این تگ مشخص است، این تگ بلافاصله بعد از <html> قرار می گیرد.
- در نهایت تگ <body> قرار می گیرد که شامل محتویات صفحه می شود که بازدید کنندگان سایت، آن ها را می بینند که در آن متن ها، لینک ها و … قرار می گیرد.
با توجه به این که بسیاری از محتویات در تگ <body> قرار دارد ما در ادامه ی این مقاله به بررسی محتویات داخل این تگ می پردازیم.
گام سوم : برچسب های مختلف html برای قالب بندی صفحات
تگ های بسیار زیادی برای قالب بندی صفحات وجود دارد، طبیعتا ما نمی توانیم همه آن ها را پوشش دهیم. بنابراین ما سعی می کنیم مهم ترین و پر کاربردترین آن ها مرور می کنیم. همینطور اگر این تگ ها بسیار ساده و پیش پا افتاده بنظر می رسند به این نکته توجه کنید که این تگ ها در سال 1993 طراحی شده اند.
تگ هایی برای تغییر ظاهر متن ها استفاده می شوند:
Html مثل word سبک های مختلف برای تغییر ظاهر متن ها را پوشش می دهد.
- تگ <strong> که متن ها را bold میکند. همینطور می توانید از تگ <b> برای انجام این کار استفاده کنید.
- تگ <em> که برای italic کردن متن ها استفاده میشود. همینطور می توانید از تگ <i> برای انجام این کار استفاده کنید.
البته به این نکته توجه کنید که تگ های ابتدایی بیشتر روی مفهوم متن تمرکز دارند در صورتی که تگ های انتهایی روی ظاهر تمرکز دارند.
تگ هایی که به پاراگراف ها و سایر بخش های محتوا مربوط می شوند:
- تگ <div> به شما این امکان را می دهد که محتویات خود را بخش بندی کنید. در ادامه با کمک css می توانید به یک بخش خاص از محتوا ظاهر دلخواه تان را بدهید.
- تگ <p> به شما این امکان را می دهد که محتویات را پاراگراف بندی کنید. علاوه براین مرورگر ها بطور خودکار از نظر نوشتاری فاصله گذاری ها را رعایت می کند.
- شما می توانید در محتوای خود از تیتر های مختلف استفاده کنید تا ساختار منظم تری داشته باشید و به کاربر این اجازه را بدهید که آسان تر محتوای شما را دنبال کند. این کار را می توانید با استفاده از تگ های <h1> تا <h6> استفاده کنید. که به ترتیب برای مهمترین تیتر تا کم اهمیت ترین تیتر استفاده میشود.
- شما برای رفتن به خط بعد در محتوای خود نمی توانید از enter استفاده کنید به جای این کار باید از تگ <br> استفاده کنید.
برای درک بهتر از مفاهیم این تگ های html به مثال های زیر توجه کنید.
<“div class=”example>
<h2>Example Heading</h2>
<p>This is one paragraph.</p>
<p>This is a second<br>paragraph split between two lines.</p>
<div/>
گام چهارم : اضافه کردن تصاویر
تصاویر بخش مهمی از صفحات وب را تشکیل می دهند. شما به راحتی می توانید تصاویر را به صفحات تان اضافه کنید و ویژگی های مختلفی به آن ها اختصاص دهید. شما برای بارگذاری تصاویر باید از تگ <img> استفاده کنید. در ادامه attribute های مختلف این تگ را بررسی می کنیم.
- برای وارد کردن آدرس تصویری که می خواهید بارگذاری کنید باید از Src استفاده می شود.
- Alt : این attribute به شما اجازه می دهد تا برای تصویرتان متن جایگزین بنویسید تا زمانی که به هر دلیلی تصویر نمایش داده نشد، این متن جایگزین به کاربر نمایش داده شود.
- همینطور می توانید با استفاده از width و height اندازه تصویری که نمایش داده می شود را مشخص کنید.
برای درک بهتر مفاهیم مربوط به تصاویر به مثال زیر توجه کنید:
<“img src=”https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg” alt=”Dr. Phil” width=”1280>
گام پنجم : لینک ها
دنیای وب بدون لینک ها هیچ مفهمومی ندارد و بدون آن ها ارتباط مختلف بین صفحات قطع می شود. شما می توانید با استفاده از تگ <a> به محتوای خود لینک اصافه کنید.
نحوه عملکرد این تگ این گونه است که شما متن یا تصویری که می خواهید لینک داشته باشد داخل تگ قرار می دهید و با استفاده از attribute های href و title به ترتیب محلی که به آن لینک می شوید و متنی که موقع عبور موس به کاربر نمایش داده می شود را وارد کنید.
برای درک بهتر نحوه ی استفاده از لینک ها به مثال زیر توجه کنید:
<a href=”https://www.google.com/” title=”Click here to search the web”>Visit Google</a>
چگونه html به css و js متصل می شود؟
ما تا این جا مفاهیم پایه ای html را با هم مرور کردیم ولی در دنیای مدرن امروز تصور فایل های html به تنهایی خیلی سخت است. امروزه اگر سایت شما ظاهر خوبی نداشته باشد کاربران جذب سایت شما نمی شوند و شما سریعا به مشکل بر می خورید.
Css :
امروزه با استفاده از css و فریمورک های مختلفی که در اختیار شما قرار می دهد، شما می توان ظاهر محتویات html خود را شخصی سازی کنید. تگ <div> را به یاد دارید؟ با استفاده از این تگ شما می توانید محتویات را بخش بندی کنید و برای هر بخش یک class قرار دهید. سپس با استفاده از css می توانید هر بخش را به طور جداگانه طراحی کنید. برای آشنایی بیشتر با فریمورک های css می توانید این مطلب را مطالعه کنید.
برای متصل کردن کردن فایل های css باید تکه کد زیر را در قسمت <head> فایل html اضافه کنید که در قسمت href باید آدرس فایل css را وارد کنید.
<“link rel=”stylesheet” href=”filename.css>
Javascript :
ما دیدیم که چطور به کمک مفاهیم html محتویات مدنظرمان را تولید کنیم و بعد از به کمک css ظاهر محتویات را زیبا تر کنیم. آخرین عضو این سه گانه برای طراحی صفحات Javascript است که به شما این امکان را میدهد تا صفحات responsive داشته باشیم و کاربر برای انجام کار های مختلف نیاز نداشته باشد تا به صفحه ی جدیدی لینک شود. فابل های js که می خواهید اضافه کنید را باید داخل تگ <script><script> در داخل تگ head اضافه کنید.
برای مثال فرض کنید شما در سایت تان یک فرم برای ثبت نام دارید و پسوردی که کاربر وارد می کند باید حداقل 8 کاراکتر داشته باشد. به کمک زبان برنامه نویسی Javascript شما می توانید قبل از ثبت شدن اطلاعات به کاربر اخطار دهید که پسوردی که وارد کرده مشکل دارد و یک پیغام برای او نمایش داده شود.
این کوچک ترین کاری است که می توانید با js انجام دهید و این زبان به کمک فریمورک های قدرتمندی که دارد اختیارات بسیار زیادی در اختیار شما قرار می دهد. برای آشنایی بیشتر با فریمورک های js می توانید این مطلب را مطالعه کنید.
در آخر
به این نکته توجه کنید که html یک زبان ثابت نیست و همواره تغییرات و اصلاحات زیادی کرده است. آخرین ورژن این زبان نشانه گذاری HTML5 است که امکانات جدیدی به آن اضافه شده است. در این مقاله سعی کردیم شما را با مفاهیم پایه ای html و همینطور با بخش های پرکاربرد آن آشنا کنیم. اگر علاقه مندید تا با جزئیات بیشتری از html آشنا شوید و آموزش ببینید، می توانید از ویدئو های کوتاه ما دیدن کنید.
1 Comment
Join the discussion and tell us your opinion.
امتیاز بینندگان:5 ستاره