طریقه ساخت سایت - بررسی نحوه ساخت سایت از ابتدا تا انتها

طریقه ساخت سایت

ساخت سایت و داشتن آن، ابزاری مفید برای کسب درآمد شما خواهد بود. نحوه ساخت وب سایت ها آنقدر هم که به نظر می آیند ، دشوار نیستند. شما هم می توانید طریقه ساخت صفحات HTML را یاد بگیرید. HTML به عنوان یک زبان نشانه گذاری (markup) کاربرد گسترده ای در دنیای وب ایفا می کند.

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

مقدمه ای بر HTML

HTML مخفف Hyper Text Markup Language می باشد که به معنی زبان نشانه گذاری ابر متن می باشد.

• ابرمتن (hyper text) متنی است که به عنوان یک لینک عمل می کند.
• زبان نشانه گذاری اطلاعات مربوط به نحوه چیدمان اطلاعات درون یک سند (document) را تعریف می کند.

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

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

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

HTML5

HTML به آخرین نسخه خود ، HTML5 ، که دارای ویژگی های بیشتری نسبت به نسخه های قدیمی تر است ، ارتقاء یافته است ، و اکنون می تواند نمایش ویدیو ها، تصاویر و متن را در صفحه نمایش مرورگر پشتیبانی کند.

HTML5 پیاده سازی پنجم HTML است. قاعده نوشتاری HTML5 سازگار با قاعده نوشتاری پایه ایی HTML4 و XHTML1 است. HTML5 در پشتیبانی صوتی و ویدیویی که به آن افزوده شده است ، از HTML متفاوت است. HTML5 یکی از ابزارهای قدرتمند برای طراحی صفحه وب است. با استفاده از HTML5 ، امکان استفاده از قابلیت stream ویدیوها بدون استفاده از پلاگین های اضافی مانند Flash وجود دارد. HTML5 هم چنین از ذخیره سازی داده ها در سمت سرویس گیرنده (client) پشتیبانی می کند. این قابلیت می تواند برای پشتیبانی از اپلیکیشن تحت وب هنگامی که سرویس گیرنده آفلاین است ، مورد استفاده قرار گیرد.

وب و HTML

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

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

بر اساس نظرسنجی که W3Techs انجام داده است ، HTML توسط 73 درصد از وب سایت ها مورد استفاده قرار گرفته است.

درصد وب سایت هایی که از انواع زبان های نشانه گذاری استفاده می کنند. نکته: یک وب سایت ممکن است از بیش از یک زبان نشانه گذاری استفاده نماید.

 

از میان زیر مجموعه ها ، HTML5 توسط 82.9 درصد از همه وب سایت هایی که از HTML استفاده می کنند استفاده می شود.

درصد وب سایت هایی که از انواع زیرمجموعه های HTML استفاده می نمایند. نکته: یک وب سایت ممکن است از بیش از یک زیرمجموعه HTML استفاده نماید.

 

نحوه ساخت صفحه HTML

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

کدنویسی HTML با یک Text Editor

HTML متن ساده است و امکان کدنویسی دستی یک صفحه وب در HTML وجود دارد. یک سند HTML اساساً یک سند متنی است. Text Editor های بسیاری در دسترس هستند که می توانید برای نوشتن HTML استفاده کنید. دو ویرایشگر متن محبوب Dreamweaver و Sublime Text هستند. ویرایشگرهای رایگان شامل Notepad ++  برای ویندوز و Wrangler متن برای مک است. شما باید از استفاده از Notepad که محبوب تر است ، خودداری کنید ؛ زیرا ویرایشگر متن کامل با ویژگی های پیشرفته نیست. پردازشگرهای ورد نیز نباید استفاده شوند ؛ زیرا اینها کد اضافی و غیر ضروری را به اسناد HTML اضافه می کنند.

برای نمونه های HTML که در اینجا نمایش می دهیم ، از Notepad ++  به عنوان یک ویرایشگر استفاده خواهیم کرد. شما می توانید هر ویرایشگر موردنظر خود را انتخاب کنید.

ساخت و ویرایش صفحه HTML

ساخت یک سند HTML جدید همانند ساخت هر سند دیگری است. برای باز کردن یک سند جدید در Notepad ++ ، قسمت File> New را انتخاب کنید. در سند موردنظر تغییرات را ایجاد کرده و ذخیره کنید.

 

ذخیره کردن صفحه HTML

یک سند HTML فایلی با پسوند .htm یا .html می باشد. برخی از ویرایشگرها ممکن است گزینه “Save As HTML” را فراهم نمایند. برای ذخیره سند HTML برای وب باید از نام های فایل با حروف کوچک استفاده نمایید.

 

قالب بندی صفحه HTML

یک صفحه HTML عمدتاً توسط عناصر ، تگ ها و صفت ها تعریف می شود. این قابلیت ها به ما کمک می کنند محتوای وب سایت را تعریف کنیم. عناصر HTML هم چنین ما را قادر به اضافه کردن جداول ، تصاویر ، ویدئوها ، اصوات و غیره به صفحه وب می سازند.

 

عناصر HTML

عناصر HTML ، ساختار و محتوای صفحه وب را تعریف می کنند. عناصر توسط براکت زاویه دار "<>" در اطراف نام عنصر مشخص می شود. محتوایی که بین "<>" نباشد ، در وب سایت نمایش داده می شود. یک عنصر چیزی شبیه به موارد زیر است:

<element-name>

تگ ها

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

مثال

<div> تگ باز کردن

</div> تگ بستن

محتوای بین تگ باز و بسته ، محتوای عنصر می باشد.

تگ ها به دو روش مورد استفاده قرار می گیرند.

استفاده از یک جفت تگ

تگ ها می توانند به صورت جفتی که شامل تگ باز و بسته می باشد ، بیایند. نحوه استفاده از این روش به صورت زیر می باشد :

<paragraph>This is a text</paragraph>

یک تگ باز (<paragraph>) و یک تگ بسته (<paragraph>) برای نشان دادن پایان پاراگراف وجود دارد. این به این معنی است که هر چیزی که بین این دو تگ قرار دارند ، یک پاراگراف است.

تگ Orphan

تگ های Orphan برای تعریف عناصری با قابلیت خود بسته شدن (self-closing) و برای درج عناصری مانند تصاویر استفاده می شوند. لازم نیست که شروع و پایان این عناصر را تعریف کنید.

عناصر self-closing به صورت زیر نوشته می شوند:

<image/>

اسلش بستن  (/) نیز اجباری نیست. همانند نوشتن <image> می باشد. با این حال ، برای جلوگیری از اشتباه گرفتن آن با یک تگ باز ، بهتر است که اسلش انتهایی اضافه شود.

صفت ها (Attributes)

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

یک تگ نمونه به صورت زیر می باشد :

<html lang=”en-US”/>

تگ “HTML” فوق یک صفت “lang” با مقدار “en-US” دارد.

 

ساختار یک سند HTML

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

• DOCTYPE یا DTD : اعلان نوع سند ، نسخه HTML استفاده شده را مشخص می کند. این تگ در ابتدای سند قرار می گیرد.
• HTML : جفت تگ HTML شروع و انتهای سند HTML را مشخص می کند.
• بخش HEADDER یا <head> : این بخش اطلاعات عمومی را برای صفحه تعریف می کند و معمولاً بسیار کوتاه است. محتوای این عنصر در صفحه نمایش داده نمی شود. Header حاوی تگ TITLE است که عنوان سند نمایش داده شده در نوار عنوان مرورگر را مشخص می کند. Header ممکن است حاوی metadata یا لینک هایی به فایل های خارجی باشد
• بخش BODY : این بخش حاوی بخش اصلی صفحه است. مطالب آن در مرورگر نمایش داده می شود. اکثر کد صفحه HTML در عنصر Body قرار دارد.
• Charset یا Encoding : این تگ ، کدگذاری استفاده شده در سند HTML را نشان می دهد. کدگذاری مشخص می کند که چگونه فایل ذخیره می شود و چگونه کاراکترهای خاص نمایش داده می شوند. مقدار قابل قبول جهانی برای این تگ UTF-8 است که تقریباً تمام نمادهای (symbols) زبان را به درستی نمایش می دهد.

مراحل ساخت صفحه HTML

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

مرحله 1 : خط اول کد HTML اضافه شده ، عنصر DOCTYPE را به عنوان”html” مشخص می کند. این کار بدان معنی است که از آخرین نسخه از HTML استفاده می شود.

<!DOCTYPE html>

مرحله 2 : سپس تگ های شروع و پایان را به سند html اضافه می کنیم. هم چنین زبان را به صورت English (en) تعیین می کنیم.

<!DOCTYPE html>
<html lang=”en”>
</html>

مرحله 3 : در ادامه ، تگ Header را با تگ Title و جزئیات Charset اضافه می کنیم.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Hello World</title>
</head>
</html>

مرحله 4 : در ادامه تگ BODY که کد HTML واقعی را محصور می کند ، اضافه می کنیم.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Hello World</title>
</head>
<body>
</body>
</html>

مرحله 5 : اکنون با یک سند خالی HTML آماده کار هستیم. بیایید کار را با افزودن محتوای متنی برای نمایش ، کار را شروع کنیم. ما یک تگ تیتر <h1> و تگ پاراگراف <p> را اضافه می کنیم. این تگ ها ، یک تیتر سطح اول و یک پاراگراف را به صورت زیر مشخص می کنند.

<!DOCTYPE html>

<html>
<head>
<meta charset=”utf-8″>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>A Simple HTML Page</p>
</body>
</html>

تا اینجا به نحوه ساخت سایت پایه ایی آشنا شدید و صفحه HTML پایه ایی ما آماده است و اکنون می توانیم آن را در پوشه انتخابی خود ذخیره نماییم.

مشاهده صفحه HTML

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

مرورگر صفحه را بارگذاری می کند و ما یک صفحه بسیار ساده را می بینیم. موارد زیر در صفحه نمایش داده می شوند :

• عنوان : “Hello World”
• تیتر سطح اول به صورت “Hello World”
• پاراگراف با محتوای “A Simple HTML Page”

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

قالب بندی متن پیشرفته

HTML عناصر ویژه برای قالب بندی خاص متن فراهم می کند که طریقه ساخت سایت را تسهیل می کنند.

سطوح تیترها را می توان با استفاده از تگ های <h1><h1/> تا <h6><h6/> به صورت سطوح شش گانه تیتر مورد استفاده قرار داد.

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

Bold

<b> </b>

Italic

<i> </i>

Underline

<u> </u>

Font

<font> </font>

افزودن لینک ها

با استفاده از تگ <a> </a>  می توانیم یک لینک به یک صفحه وب دیگر را ایجاد کنیم. URL صفحه وب را با استفاده از صفت href به صورتی که در زیر نشان داده شده است ، اضافه می کنیم.

<a href=”https://www.xyz.com/SimpleHTMLPage”>This is a link. </a>

افزودن تصاویر

تگ<img>  یک تگ Orphan است که نیازی به بستن تگ وجود ندارد. شما می توانید صفت های تصویر را برای اضافه کردن اطلاعات مشخص کنید. صفت src محل تصویر را تعیین می کند. صفت style دارای گزینه های بسیاری از جمله عرض و ارتفاع تصویر به پیکسل است. ویژگی alt شرح مختصری از تصویر ارائه می دهد. اگر تصویر به برخی از دلایل بارگذاری نشود ، از این توصیف استفاده می شود. این صفت در حال حاضر مورد نیاز است ؛ زیرا توسط screen reader ها ، برای بازدیدکنندگان نابینا مورد نیاز هستند.

<img src=http://www.xyz.com/ images/testlogo.png style=”width:324px;height:84px” alt=”Test logo”>

افزودن هدر

تگ <HEADER>  برای HTML5 جدید است و عنصر بالای صفحه وب را مشخص می کند. هدرها معمولاً حاوی لوگو شرکت ، اطلاعات تماس ، لینک های ناوبری و غیره هستند. در یک سند می توان چندین عنصر <header>  را داشته باشیم.

مفاهیم پیشرفته در HTML

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

ما برخی از مفاهیم را برای راهنمایی بیشتر شما ذکر می کنیم. شما می توانید برای جستجوی بیشتر و استفاده از HTML پیشرفته و قابلیت های آن ، مفاهیم را دنبال نمایید.

اعتبارسنجی HTML (validation)
 

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

افزودن تگ های پیشرفته

تگ ها و صفت های HTML بسیار بیشتر از آنچه که در اینجا مورد بحث قرار گرفته اند ، می باشند. دو منبع خوب برای یادگیری آنها ، w3schools و HTML Dog هستند که آموزش های بیشتری دارند و لیست جامعی از تگ ها را ارائه می دهند.

شما هم چنین می توانید گزینه "View Page Source" مرورگر را برای بررسی کد وب سایت های طراحی شده و تکنیک های جدید استفاده کنید.

بارگذاری کردن وب سایت

با یک سرویس میزبانی (hosting) وب ، شما می توانید چندین صفحه HTML را به دامنه وب خود اضافه کنید. شما ممکن است به استفاده از یک نرم افزار آپلود FTP برای انتقال فایل های HTML خود به وب سرور نیاز داشته باشید. سرویس های میزبانی وب بسیاری وجود دارند که قابلیت FTP را ارائه می دهند.

افزودن CSS و جاوا اسکریپت

CSS می تواند مورد استفاده قرار گیرد تا سریعاً جلوه وب سایت شما را افزایش دهد. شما می توانید از CSS برای اضافه کردن رنگ ، فونت و تغییر محل قرارگیری عناصر استفاده کنید. با لینک دادن یک “stylesheet” مربوط به CSS به صفحه HTML ، شما می توانید سبک تمام متن های داخل تگ را تغییر دهید.

جاوا اسکریپت یک زبان برنامه نویسی است و می تواند برای افزودن قابلیت های بیشتر به صفحات HTML استفاده شود. دستورات جاوا اسکریپت بین تگ های <script> </ script>  قرار داده می شوند. این کدها ، می توانند برای اضافه کردن کلید های تعاملی ، انجام محاسبات ریاضی و غیره مورد استفاده قرار گیرند.

 

ایجاد خودکار صفحه HTML و وب سایت ها

طرز ساخت سایت با HTML ساده است ، اما بسیاری از مبتدیان هنوز شاید یادگیری آن را دشوار بدانند. طراحان وب ممکن است وقت نداشته باشند که HTML را یاد بگیرند ، اما ممکن است نیاز داشته باشند که به سرعت وب سایت های دیدنی ایجاد کنند. TemplateToaster یک نرم افزار طراحی وب است که می تواند توسط طراحان تازه کار مورد استفاده قرار گیرد. شما می توانید از آن برای ایجاد وب سایت هایی برای CMS محبوب مانند WordPress ، Joomla، Magento ، Drupal و PrestaShop استفاده کنید.