طراحی وب سایت | خدمات سئو حرفه ای | بازاریابی اینترنتی

طراحی وب سایت -زبان html چیست؟

طراحی وب سایت را چگونه شروع کنیم؟

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

ساختار وب در طراحی وب مدرن

  • HTML: ساختار
  • CSS: ارائه
  • جاوا اسکریپت: رفتار
  • PHP یا مشابه: Backend
  • CMS: مدیریت محتوا

در این مقاله ما به شما زبان html را آموزش خواهیم داد.زبان htmlچیست؟
اگر بخواهیم به طور خلاصه به شما بگوییم می شود اینگونه بیان کرد:

  • HTML زبان استاندارد نشانه گذاری برای ایجاد صفحات وب است.
  • HTML مخفف Hyper Text Markup Language می باشد.
  • برخلاف زبان اسکریپتی یا برنامه نویسی که از اسکریپت برای انجام عملکردها استفاده می کند، یک زبان نشانه گذاری از تگ ها برای شناسایی محتوا استفاده می کند.
  •  HTML ساختار صفحات وب را با استفاده از نشانه گذاری توصیف می کند.در اینجا یک مثال از تگ HTML برای شما قرار می دهیم.

 

تگ در html در طراحی وب سایت

  • عناصر HTML با تگ نمایش داده می شوند.
  •  تگ های HTML تکه هایی از محتوا مانند “عنوان”، “پاراگراف”، “جدول” و غیره را شامل می شوند.
  • مرورگر تگ های HTML را نمایش نمی دهد، بلکه از آنها برای چگونه نمایش دادن محتوای صفحه استفاده می کند.

برای شما در ادامه تکه کدی از html را قرار دادیم تا با آن بیشتر آشنا شوید و در ادامه عناصر مهم در این مثال را برای شما توضیح می دهیم.

طراحی سایت با زبان html

تگ های مهم html در طراحی وب سایت

۱تگ-<DOCTYPE html!>:

این تگ مشخص می کند که این سند  از کدام نسخه html استفاده می کند.استفاده از این تگ اختیاری است.و به حروف کوچک و بزرگ حساس نمی باشد.

۲-تگ<html>:

در طراحی سایت این تگ عنصر اصلی صفحه html  می باشد و حتما باید از آن استفاده شود.

۳-تگ<head>:

این تگ تمام اطلاعات  لازم برای سند html  را در اختیار دارد . وجود این تگ الزامی است. یکی از اطلاعات مهم سند نام آن می باشد که در تگ <title> مشخص می شود همانطور که در این شکل می بینید بعد از استفاده از تگ < head> تگ معرفی نام سند<title> استفاده شده است.

۴-تگ<title>:

طراحی  وب سایت برای قرار دادن یک عنوان در برگه توصیف صفحه وب، عنصر <title> را به قسمت head سایت خود اضافه کنیداین تگ همانطور که گفته شد عنوانی برای سند در نظر می گیرد.عنصر عنوان مهم است زیرا صفحه را توصیف می کند و توسط موتورهای جستجو استفاده می شود.

۵-تگ<body>:

این تگ بعد از تگ <head> قرار می گیرد.همه عناصر بصری ساختاری در داخل تگ body قرار میگیرند.عنوان، پاراگرافها، فهرستها، نقل قول ها، تصاویر و لینک ها فقط تعداد کمی از عناصر است که می تواند در تگ body موجود است. وجود این تگ الزامی می باشد.

تگ body در طراحی وب سایت

۶-تگ<h1>:

این تگ یک از مهمترین تگ های موجود در html می باشد.با استفاده از این تگ نوشته ای که از این تگ استفاده می کند برجسته می باشد.

۷-تگ<p>:

در طراحی وب سایت با استفاده از این تگ شما می توانید یک پاراگراف تعریف کنید.برای ایجاد یک پاراگراف، به سادگی با عناصر <p> تگ های باز و بسته آن را تایپ کنید(مانند شکل).

مرورگر به طور خودکار یک خط خالی را قبل و بعد از یک پاراگراف اضافه می کند.این نکته را هم به شما در اینجا متذکر شویم که برای شکستن خط به شکل زیر عمل می کنیم.از برچسب <br /> برای اضافه کردن یک خط از متن بدون شروع یک پاراگراف جدید استفاده کنید:مثل شکل زیر

تگ br در طراحی وب سایت

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

نمایش تگ br در طراحی وب سایت

نکته مهم :عنصر <br /> یک عنصر HTML خالی است. هیچ تگ پایان ندارد

نکته مهم:

تگ های html به شکل زیر تعریف می شوند.

تگ ها در طراحی وب سایت

 

<tagname>:نام تگ در <> قرار می گیرد.این تگ شروع می باشد

</tagname> با قرار دادن / تگ مورد نظر بسته می شود.

نکته  های مهم:

تگ های HTML معمولا به صورت جفت  مثل <p></p>قرار می گیرند.

محتوای مورد نظر در بین تگ باز و بسته قرار می گیرد.

مرورگر وب

مرور گر های وب مختلفی وجود دارد مثل(Chrome, IE, Firefox, Safari) اما همه این مرورگر ها یک یک هدف واحد دارند و آن هم نمایش دادن صفحه وب با عناصر html می باشد.

البته این نکته را هم باید ذکر کنیم که:

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

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

طراحی وب سایت با کد html

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

قیمت طراحی وب سایت

فقط قسمت سفید که در تگ <body>  قرار دارد در مرورگر وب نمایش داده می شود.

نمایش فایل HTML در طراحی وب سایت

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