آموزش برنامه نویسی سایت - شروع برنامه نویسی سایت با HTML

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

این که آیا تازه کار هستید و امیدوارانه می خواهید وارد دنیای برنامه نویسی سایت شوید و یا این که یک وب مستر با تجربه می باشید که مایل به بهبود مهارت های خود هستید ، آموزش های آنلاین ما ، همه آن چیزی می باشند که شما برای برنامه نویسی سایت خود به آنها نیاز دارید.

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

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

ما شما را در عرض چند دقیقه ، نه چند ساعت ، برای ساخت وب سایت جدیدتان مهیا خواهیم کرد.

HTML برای مبتدیان مطلق

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

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

HTML چیست؟

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

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

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

تاریخچه HTML

HTML در ابتدا توسط Tim Berners-Lee ، Robert Cailliau و سایرین از سال 1989 شروع به کار نمود. HTML اختصار Hyper Text Markup Language می باشد که از آن به عنوان زبان نشانه گذاری یاد می کنیم.

Hypertext به این معنی است که سند حاوی لینک هایی است که خواننده را قادر می سازد تا به مکان های دیگری در سند و یا سند دیگری مراجعه نماید. آخرین نسخه آن به عنوان HTML5 شناخته شده است.

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

تگ ها و صفت های آنها چه چیزی هستند؟

تگ ها و صفت ها اساس HTML می باشند.

آنها با هم کار می کنند، اما عملکرد متفاوتی دارند.

تگ های HTML

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

بیشتر تگ ها بسته به کارکرد باید باز شده ، مانند: <h1>  و بسته شوند ، مانند </h1>.

صفت های HTML

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

مثالی از یک صفت:

<img src="mydog.jpg" alt="A photo of my dog.">

در این مثال، منبع تصویر (src)  و متن جایگزین (alt)  صفت های تگ <img>  هستند.

قوانین طلایی

• اکثریت قریب به اتفاق تگ ها باید باز شده(<tag>)   و با اطلاعات عنصر مانند عنوان یا متن بین تگ ها بسته شوند(<tag/>)  ،

• هنگام استفاده از چندین تگ ، تگ ها باید به ترتیب باز شدن ، بسته شوند. به طور مثال:

<strong><em>This is really important!</em></strong>

ویرایشگر های HTML

در حال حاضر ما در خصوص مفاهیم تئوری پایه به اندازه کافی صحبت کرده ایم. زمان یادگیری نحوه ساختن اولین وب سایت ماست.

ابتدا باید مطمئن شویم که ابزارهای مناسب را داریم. مهم تر از همه ، ما به یک ویرایشگر HTML نیاز داریم.

گزینه های زیادی برای انتخاب در بازار وجود دارند. در اینجا تعدادی از محبوب ترین ها را معرفی می کنیم:

Sublime Text 3

در این آموزش ، ما از Sublime Text 3 که رایگان می باشد ، استفاده خواهیم کرد و هم چنین پشتیبانی cross-platform را برای کاربران ویندوز ، مک و لینوکس فراهم می کند.

نقاط قوت :

• به راحتی قابل تنظیم است
• برای مبتدیان مناسب است
• طرح هایی با رنگ دلخواه را برای انتخاب دارد.

نقاط ضعف:

• نمی توان اسناد و یا کدها را چاپ کرد
• هیچ نوار ابزار یا داشبورد وجود ندارد

Notepad ++

یکی دیگر از گزینه های رایج برای HTML و کدنویسان سایر زبان ها ، Notepad ++  است. Notepad ++ یک برنامه کوچک برای دانلود است و عملکردهای مورد نیاز برای کدنویسی تمیز را در بر دارد.

نقاط قوت:

• رابط کاربری بدون ابهام
• ویژگی Auto-completion
• آپشن های پلاگین برای امکانات پیشرفته.

نقاط ضعف:

• کار با آن برای مبتدیان ممکن است دشوار باشد.
• پشتیبانی از Mac ندارد.

Komodo Edit

Komodo Edit یکی از دو ویرایشگری است که با label همسان منتشر شده اند. آنها یک ویرایشگر ساده و متن باز با انواع برنامه های افزودنی و پشتیبانی از زبان ها را ارائه می دهند.

دانلود آنها رایگان است.

نقاط قوت:

• رابط کدنویسی قابل درک
• در دسترس برای Mac ، Windows و Linux
• پشتیبانی از زبان عالی

نقاط ضعف:

• بدون قابلیت پیش فرض auto completion
• پیدا کردن و تغییر تنظیمات بصری دشوار است.

از چه چیزی باید اجتناب کرد

هنگام نوشتن کد HTML از استفاده از Microsoft Word یا هر پردازنده کلمه دیگری اجتناب کنید ، تنها یک ویرایشگر HTML یا حداقل notepad داخلی سیستم خود ، مناسب برای این کار است.

ثانیاً، اطمینان حاصل کنید که تعدادی از مرورگرهای مختلف مانند Chrome و Firefox را نصب کرده باشید تا پیش نمایش آیتم های در دست ساخت خود را مشاهده کنید.

ساخت اولین صفحه وب HTML خود

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

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

اساس ساخت یک صفحه HTML

این تگ ها باید در بالای هر صفحه HTML ایجاد شده ، قرار گیرند.

<!DOCTYPE html> - این تگ زبانی را که در صفحه با آن کدنویسی خواهید کرد ، مشخص می کند. در این مورد ، زبان مورد استفاده HTML 5 است.

<html>   - این تگ علامت می دهد که از اینجا ما قصد داریم کد HTML خود را بنویسیم.

<head> - جایی است که در آن تمام metadata  ها برای صفحه قرار می گیرند - چیزهایی که عمدتاً برای موتورهای جستجو و سایر برنامه های کامپیوتری مورد استفاده قرار می گیرند.

<body> - این جایی است که محتوای صفحه در آن قرار می گیرد.

تگ های بیشتر

در داخل تگ <head>  ، یک تگ وجود دارد که همیشه باید نوشته شود : <title> ، اما موارد دیگری هم وجود دارند که به همان اندازه مهم هستند:

<title>

در این جا نام صفحه که در بالای پنجره مرورگر ظاهر می شود ، وارد می گردد.

<meta>

در این جا اطلاعات مربوط به سند ذخیره می شود: character encoding ، name (page context) ، description.

بیایید بخش اصلی <head>  را امتحان کنیم:

<head>
 <title>My First Webpage</title>
 <meta charset="UTF-8">
 <meta name="description" content="This field contains information about your page. It is usually around two sentences long.">. 
<meta name="author" content="Conor Sheils"> 
</head>

افزودن محتوا

در ادامه ، تگ <body>  را ایجاد خواهیم کرد.

بخش<body>  ، جایی است که ما محتوا را اضافه می کنیم و طوری طراحی شده است که قابل مشاهده توسط انسان می باشد.

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

نحوه اضافه کردن عناوین HTML به صفحه وب خود

در HTML ، عنوان ها (headings) در عناصر زیر نوشته می شوند:

• <h1>
  • <h2>
    • <h3>
      • <h4>
        • <h5>
          • <h6>

همان طور که ممکن است حدس زده باشید ، <h1>  و <h2>  باید برای مهم ترین عناوین مورد استفاده قرار گیرند ، در حالی که باقی مانده تگ ها باید برای زیر عنوان ها و متن  های دارای اهمیت کمتر استفاده شوند.

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

ایجاد عناوین

بیایید این کار را امتحان کنیم. در یک خط جدید در ویرایشگر HTML تایپ کنید:

<h1>Welcome to My Page</h1>

و آن را ذخیره کنید. ما این فایل را با عنوان “index.html"  در یک پوشه جدید به نام " my webpage" ذخیره خواهیم کرد.

خوب بیایید دور نرویم؛ هنوز تعداد زیادی از قابلیت های فوق العاده ایی را که می توانیم به صفحه خود اضافه کنیم ، مطرح نکرده ایم.

چگونه متن را در HTML اضافه کنیم

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

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

این برچسب ها باید در اطراف متن مورد نظر ، باز و بسته شوند.

بیایید آن را امتحان کنیم در یک خط جدید در ویرایشگر HTML ، کد HTML زیر را تایپ کنید:

<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>

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

نحوه اضافه کردن لینک ها در HTML

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

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

لینک ها در یک صفت که با تگ <a>  باز می شود ، قرار می گیرد. به نظر می رسد متفاوت با تگ هایی باشد که قبلاً ذکر شده است.

تگ Anchor

تگ باز کردن <a> در قالب زیر نوشته می شود:

<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>

قسمت اول صفت ، اشاره به صفحه ایی دارد که پس از کلیک روی لینک ، باز خواهد شد.

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

اگر شما در حال ایجاد وب سایت خود هستید، به احتمال زیاد تمام صفحات خود را در میزبانی حرفه ای وب میزبانی خواهید کرد. در این صورت، لینک های داخلی در وب سایت شما به صورت <a href=”mylinkedpage.html”>Linktle Here</a>  خواهد بود.

ایجاد تگ Anchor

بیایید آن را امتحان کنیم. کدی را که در صفحه index.html فعلی دارید ، تکثیر کنید. آن را کپی کرده و در یک پنجره جدید در ویرایشگر HTML خود paste کنید.

این صفحه جدید را به عنوان “page2.html"  ذخیره کنید و مطمئن شوید که آن را در پوشه مشابه صفحه index.html ذخیره کنید.

در page2.html ، کد زیر را اضافه کنید:

<a href="http://www.google.com"> Google </a>

این کار یک لینک به گوگل در صفحه 2 ایجاد خواهد کرد. تغییرات را ذخیره کرده و به صفحه index.html خود بازگردید.

در خط جدید در index.html کد زیر را اضافه کنید:

<a href="*folder(s)*/page2.html"> Page2 </a>

اطمینان حاصل کنید که مسیر پوشه به فایل (page2.html)  درست باشد. تغییرات را ذخیره کرده و پیش نمایش صفحه index.html خود را در مرورگر مشاهده کنید.

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

در مقاله بعدی ما ، نحوه اضافه کردن امکانات و قابلیت های بیشتر به وب سایت خود را دنبال کنید.