خدمات طراحی سایت و دیجیتال مارکتینگ

آشنایی با آموزش طراحی سایت با html

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

html چیست؟

html مخفف hyper text markup language است که یک زبان نشانه گذاری و پایه طراحی صفحات وب می باشد. در صفحات وبی که در مرورگر ها باز می کنید می توانید با راست کلیک کردن و رفتن به گزینه view source کدهای html را مشاهده کنید.

تاریخچه ای از html و markup language ها

در ابتدابرای اینکه بتوانیم مفهوم آموزش طراحی سایت با html را متوجه شویم به تاریخچه این زبان، اشاره کوتاهی داریم. در زمان پیدایش وب، زبان های مختلفی برای ساختن صفحات وب ظهور کردند که از آن ها به عنوان markup language ها یاد می شوند که تمامی آن ها بر اساس پردازش متن کار می کردند. مدت ها بعد از این دوره، شرکت برنرزلی با الهام گرفتن از این زبان ها، زبانی را تحت عنوان hyper text markup language طراحی و منتشر کرد.

این زبان امروزه به زبانی تبدیل شده است که در تمامی وب سایت ها از آن استفاده می شود. تا کنون پنج نسخه از این زبان عرضه شده است. نسخه پنجم زبان html در سال ۲۰۱۴ توسط سازمان جهانی وب منتشر شد. این نسخه نسبت به نسخه های قبلی امکانات بیشتری برای طراحی صفحات وب دارد.

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

معرفی تگ های html

صفحاتی که با html  نوشته می شوند از قسمت‌هایی تشکیل شده‌اند که به آنها تگ یا برچسب می‌گویند. این تگ ها کلماتی از پیش تعیین شده هستند که بین دو <> قرار میگیرند و هر کدام از آن ها ویژگی های منحصر به فرد خود را دارند. اغلب تگ هایی که در html  نوشته می شوند معمولا به این صورت هستند:   <tag>       </tag>
قسمت سمت چپی را تگ شروع و قسمت سمت راست را تگ پایانی می نامند. این تگ ها در صفحات مرورگر نمایش داده نمی شوند و کارشان تعیین نوع نمایش صفحه است.

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

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

  • html:
    این تگ همیشه در ابتدای کدی که نوشته ایم باید باشد و برای مرورگر مشخص می کند که از چه زبانی استفاده کرده ایم. در پایان کد هایی که نوشته ایم، از تگ پایانی آن استفاده می کنیم.
  • Head:
    این تگ را برای اضافه کردن سر صفحه برای نمایش دادن عنوان استفاده می کنیم و به صورت همان شکل عادی یعنی تگ شروع و تگ پایان استفاده می شود.
  • Title:
    برای عنوان گذاشتن بر روی صفحه از این تگ استفاده می شود. عنوان صفحه از اهمیت زیادی برخوردار است چرا که معرفی کننده محتویاتی است که در سایت خود قرار دادید. شکل استفاده از آن هم به صورت دو تگ قبلی است که قبلا معرفی شد.
  • Body: وقتی می خواهیم بر روی بدنه صفحه خود کار کنیم از این تگ استفاده می کنیم. بخش عمده ای از اطلاعاتی که در صفحه وب قرار می گیرد بین تگ شروع و پایان آن قرار می گیرد. همچنین اضافه کردن رنگ به صفحه و نقل قول ها هم در این تگ صورت می گیرد.
  • P:
    برای نوشتن پاراگراف هایی که قرار است بنویسیم از این تگ استفاده خواهیم کرد.
  • Img:
    برای اضافه کردن تصویر به صفحه وب خود از این تگ استفاده کنید به این صورت:<img src=”URL”></img> که URL مسیرعکسی است که میخواهید از آن استفاده کنید.
  • Ul :
    برای ایجاد لیست های نشانه ای از این تگ استفاده می شود.
  • Ol:
    برای ایجاد لیست های ترتیبی این تگ به کار می رود.
  • Br:
    برای رفتن به خط جدید از این تگ استفاده می کنیم. در واقع کاری مثل enter را انجام می‌دهد.
  • Div:
    برای تقسیم فضا در صفحات وب خود از این تگ باید استفاده کرد.
  • H1 تا h6:
    این تگ ها برای ایجاد انواع تیتر ها در نوشته به کار برده می شود. بهتر است از این تگ‌ها به تعدادی که پیشنهاد شده اند استفاده کنید. به عنوان مثال از تگ h1 فقط یک بار بهتر است استفاده شود.
  • Strong:
    برای درشت تر نمایش دادن متن در صفحه وب این تگ مورد استفاده قرار می‌گیرد.

 

نوع نوشتاری کد html

برای طراحی سایت html را کجا بنویسیم؟

Editor های مختلفی برای این زبان وجود دارد که میتوان به :

  • Microsoft Web Matrix
  • Notepad++
  • Web Storm
  • Brackets

اشاره کرد.

کافیست یکی از این نرم افزار ها را بر روی سیستم خود نصب کنید و در منوی language، زبان مورد نظر خود یعنی html را انتخاب کنید و شروع به کد زنی کنید. فایل هایی که پس از اتمام کار save می کنید دارای پسوند .html مانند web.html است.

در پایان به عنوان آخرین مطلب این را هم بدانید که با  html نمی توان به صفحه وب، ظاهر گرافیکی و جلوه بدهیم و برای این کار باید از زبان دیگری به نام css استفاده کنیم که آن هم تگ های مربوط به خود را دارد و به کمک آن می توانیم به سایت رنگ، استایل، افکت و… اضافه کنیم.

اگر علاقه‌مند به یادگیری زبان html هستید و مشتاقید بیشتر در این زمینه بدانید، به شما پیشنهاد می‌کنم به مدرسه آنلاین udemy نگاهی بیاندازید و آموزش زبان html را فرابگیرید.

خواندن مطالب زیر را نیز به شما پیشنهاد میکنیم:

پرسش و پاسخ، نظر

سوال یا نظری دارید؟ بنویسید و ارسال کنید.

طراحی شده توسط تیم توسعه و طراحی آرنیکاوب
×