طراحی سایت با HTML

تا چند دهه ی پیش که اینترنتی وجود نداشت، وب سایتی هم وجود نداشت و منبع اصلی اطلاعات کتاب های چاپ شده بر روی کاغذ بودند و برای یافتن اطلاعات دقیق می بایست تلاش زیادی صورت می گرفت.

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

در ادامه ی این مقاله به بررسی اینکه طراحی سایت چیست و چگونه با زبان برنامه نویسی HTML راه اندازی می شود، می پردازیم.

طراحی سایت چیست؟

طراحی وب به طراحی وب سایت هایی که در اینترنت نمایش داده می شود، اشاره دارد. این امر معمولاً به جنبه های تجربه ی کاربر در توسعه ی وب سایت و نه در توسعه ی نرم افزار اشاره دارد. طراحی وب متمرکز بر طراحی وب سایت برای مرورگر های دسک تاپ بود. با این حال، از اواسط سال 2010، طراحی برای مرورگر های تلفن همراه و تب لت ها به طور ویژه ای اهمیت یافت.

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

وب سایت ها با زبان های برنامه نویسی متفاوتی راه اندازی می شوند که یکی از پرکاربردترین آنها زبان برنامه نویسی HTML می باشد.

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

HTML مخفف Hyper Text Markup Language است.

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

درک اصطلاحات متداول HTML

سه اصطلاح رایج HTML که با آنها باید شروع به کار کنید عبارتند از: عناصر، برچسب ها و ویژگی ها.

• عناصر

عناصر طراحانی هستند که ساختار و محتوای اشیاء را در یک صفحه تعریف می کنند. برخی از عناصری که بیشتر مورد استفاده قرار می گیرند دارای عنوان سطح های چندگانه هستند ( شناخته شده به عنوان <h1> تا <h6> ) و پاراگراف ها به عنوان <p> . عناصر با استفاده از براکت های زاویه دار در اطراف عنصر شناخته می شوند. به عنوان مثال <a> یک عنصر است.

• برچسب ها

استفاده از براکت های زاویه دار اطراف یک عنصر، برچسب را ایجاد می کند. برچسب ها معمولاً به صورت برچسب های باز و بسته هستند.

یک برچسب باز نشانگر آغاز یک عنصر است. به عنوان مثال <div> یک برچسب باز است و </div> یک برچسب بسته است. برچسب بسته مانند برچسب باز نوشته می شود با این تفاوت که یک برش روبه جلو قبل از نام تگ داخل براکت گذاشته می شود.

• ویژگی ها

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

<a href=http://shayhowe.com/>shah howe</a>

کد متن بالا در صفحه ی وب shay howe را نمایش می دهد و کاربران با کلیک بر روی shay howe به /http://shayhowe.com/ منتقل می شوند. در این کد a یک عنصر است و </a> یک برچسب است و http://shayhowe.com” یک ویژگی هست.

اکنون که می دانید عناصر، برچسب و ویژگی های HTML چیست، بیایید در مورد طراحی وب با HTML صحبتی داشته باشیم.

تنظیم ساختار اسناد HTML

اسناد HTML اسناد متنی ساده هستند که با پسوند فایل .html ذخیره می شوند. برای شروع نوشتن HTML ابتدا به یک ویرایشگر متن ساده مانند ++Notepad نیاز دارید. متأسفانه از word نمی توانید استفاده کنید،زیرا یک ویرایشگر غنی است.

تمام اسناد HTML از ساختاری برخوردار هستند که شامل عناصر و بیانیه های زیر می باشد:

<html> , <body> , <DOCTYPE html> , <head> .

اعلان نوع سند یا <!DOCTYPE html> به مرورگر های وب اطلاع می دهد که نسخه ی HTML در آن استفاده می شود و در همان ابتدای سند HTML قرار می گیرد. پس از اعلام نوع سند، عنصر <html> نشانگر آغاز سند است.

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

کلیه ی محتوای قابل مشاهده در صفحه ی وب در عنصر <body> قرار می گیرد. یک ساختار سند معمولی HTML مانند ساختار زیر می باشد:

<!DOCTYPE html>

<html Long=”en”>

<head>

<meta charset=”utf-8”>

<title>Hello World</title>

<head/>

<body>

<h1>Hello World</h1>

<p>This is a web page. </p>

</body>

</html>

کد قبل، شروع سند را با اعلان نوع سند <!DOCTYPE html> شروع می کند و به طور مستقیم با عنصر <html> ادامه پیدا می کند. در داخل عنصر <html> عناصر <head> و <body> می آیند. عنصر <head> شامل رمزگذاری کاراکتر صفحه از طریق برچسب <”charset=”utf-8> و عنوان صفحه از طریق عنصر <title> است.

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

مزایا و معایب طراحی وب سایت با HTML

مزایا

• طراحی وب سایت با HTML ساده و آسان است.
• در مدت زمان کوتاهی می توان ظاهر یک وب سایت را راه اندازی کرد

معایب

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