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

البته امروزه ساخت سایت به لطف وجود نرم افزارهای مختلف و سیستم های مدیریت محتوا (CMS) و البته سایت سازها کار بسیارراحتی شده است.اما اگر شما نیاز دارید که سایت خود را به صورت کاملا دقیق بسازید نیازمند یادگیری زبان هایی مثل HTML و CSS هستید.

اما چیزهایی که شما نیاز دارید عبارتند از :

  • یک ویرایشگر متن برای نوشتن کدهای HTML
  • یک مرورگر برای تست کدهای نوشته شده توسط HTML
  • یک طراح برای افزایش دانش شما در طراحی

یک ویرایشگر متن ساده

ویرایشگرهای متن زیادی هستند که شما می توانید از آنها به صورت رایگان استفاده کنید یک نمونه ویندوزی آن ++ Notepad می باشد. این ویرایشگرها عموما دارای ابزارهای پیچیده ویرایش متن نیستند و کار با آنها بسیار آسان می باشد همچنین برای نوشتن کدها بسیار مناسب هستند.

یک سند HTML چیست؟

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

تگ ها چه چیزی هستند؟

tag

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

<img src=”image.jpg”  width=”200”  height=”300” />

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

نکته دیگری که شما باید در مورد تگ ها بدانید این است که آنها خصیصه یا attribute دارند. مانند ”” =srcکه این عناصر برای ایجاد اطلاعات اضافی در مورد تگ مورد استفاده قرار می گیرد. وقتی که ما برای مقدار خصیصه این تگ فقط نام عکس مورد نظر را قرار می دهیم به مرورگر گفته ایم که عکس مورد نظر در همان جایی که سند وب ما هست قرار دارد. اما به صورت اصولی بهتر است که شما از یک پوشه مستقل برای نگهداری عکس های خود استفاده کنید. بطور مثال اگر شما نام پوشه مربوط به عکس های خود را images قرارداده اید آنگاه مقدار آن به صورت ” scr=”images/image.jpgقرار دهیم و با علامت / به مروگر گفته ایم که برای دسترسی به عکس ونمایش آن باید به سراغ پوشه images برود.

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

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

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

اما style و css چه چیزهایی هستند؟

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

چگونگی اعمال خصوصیات css به عناصر وب

سه روش کلی برای اعمال آنها وجود دارد :

  • استایل های درون خطی :

<p style="color:red;">The text inside this paragraph tag will be red.</p>

  • استایل های داخلی

<code><style type="text/css">

        h3 {

              ;color:red

               ; font-family:Helvetica

               ; font-size:20px

        }

</style>

  • استایل های خارجی : در این روش شما یک فایل css جداگانه مثلا با نام css تهیه می کنید. سپس آن را به صورت یک لینک معرفی می نمایید.

< / "link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css>

حال که شما با مفاهیم اولیه این دو زبان آشنا شدید می توانیم نحوه استفاده از آنها را در طراحی سایت آموزش دهیم.

ساخت یک سایت فقط محدود به کد نویسی نمی شود و شما باید کمی هم دانش طراحی داشته باشید. همچنین شما باید بدانید که چطور باید گرافیک سایت خود را آماده نمایید.

طراحی سایت

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

 

برای دسترسی به ادامه مقاله می توانید به بخش مقالات لیوسایت ساز مراجعه نمایید.