طراحی قالب وردپرس

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

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

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

html چیست؟

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

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

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

آمزش طراحی سایت

معرفی تگ های 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  را کجا بنویسیم؟

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

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

اشاره کرد.

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

 

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

 

 

 

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

دیدگاهها و نظرات کاربران عزیز

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