آموزش رایگان HTML – جلسه 2

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

مطالبی که در هر جلسه ارائه می کنیم به صورت پشت سر هم هستند, پس اگر هنوز جلسه ی اول را نخوانده اید🤨 این جلسه را شروع نکنید.🙄

ویرایشگرها در HTML چه کاربردی دارند؟

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

اما به تازه کارها توصیه می کنیم تا از notepad استفاده کنند.چرا؟ چون کار کردن با آن بسیار ساده است و پیچیدگی خاصی ندارد. فقط کافی است دستورات HTML را در این ویرایشگر بنویسید و با پسوند .html یا .htm ذخیره کنید.

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

انواع ویرایشگرها

ویرایشگرهای HTML را می توان به دو دسته ی زیر تقسیم کرد؛

•  ویرایشگرهای متن
•  ویرایشگرهای (WYSIWYG)

برای داشتن یک ویرایشگر مناسب انتخاب های زیادی وجود دارد که محبوب ترین آنها مواردی است که در ادامه به آن خواهیم پرداخت.

1.   Sublime Text 3

در ادامه برای این جلسه ما از ویرایشگر Sublime Text 3 استفاده کرده ایم که رایگان است و قابل استفاده در سیستم های ویندوز, مک و لینوکس است.

 

همانطور که در تصویر مشاهده می کنید این ویرایشگر در سمت راست یک پنجره پیش نمایش کوچک دارد.
از مزایای این ویرایشگر میتوان به موارد زیر اشاره کرد؛

•  به راحتی قابل تنظیم است
•  مورد پسند افراد تازه کار است
•  و وجود طرح های رنگی دلپذیر

قطعا در کنار مزایا باید از معایب نیز گفت. از جمله اینکه ؛

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

2. ++Notepad

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

یک برنامه ی کوچک و محبوب که برای بارگیری و اجرای توابع مورد نیاز برای نوشتن کد, مورد استفاده قرار می گیرد.

 

 

تصویری که مشاهده می کنید فضای برنامه ی ++Notepad  است. دور از زرق و برق, ساده و بی آلایش 😊

اما مزایای این سادگی در چیست؟

•  رابط کاربری ساده و آسان
•  امکان تکمیل خودکار
•  قابلیت توسعه و افزودن امکانات بیشتر

از معایب موجود هم باید بگیم که؛

•  شروع به کار برای مبتدیان کمی دشوار است
•  از Mac پشتیبانی نمی کند 😒

ویرایشگر Komodo

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

 

 

Komodo رابط کاربری گرافیکی بالایی ندارد اما کار با آن ساده است.

مزیت این ویرایشگر چیست؟

•  درک رابط برنامه نویسی آسان
•  موجود بودن برای مک ، ویندوز و لینوکس
•  پشتیبانی قابل قبول از زبان ها

معایب

•  تکمیل خودکارپیش فرض وجود ندارد
•  یافتن تنظیمات بصری و تغییر دادن آنها دشوار است

 

از برخی چیزها دوری کنید!!!!!!

هنگام نوشتن کد HTML از Microsoft Word یا پردازنده های مشابه استفاده نکنید. فقط از ویرایشگرهای HTML یا حداقل از notepad استفاده کنید.
در مرحله ی بعد لازم است تا پیش نمایشی از آنچه نوشته اید را در مرورگرهای مختلف مشاهده کنید. برای این کار مطمئن شوید انواع مرورگرها را در سیستم خود نصب کرده اید, مرورگرهایی مانند Chrome و Firefox و … .
اما چرا اصرار داریم که از مرورگرهای مختلف برای پیش نمایش استفاده کنید. دلیل این است که نمای کدهای شما از مرورگری به مروگر دیگر متفاوت است. البته درباره این موضوع در بحث مرتبط با CSS ها بیشتر صحبت خواهیم کرد.

ایجاد اولین صفحه وب HTML

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

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

تگ هایی که در ادامه معرفی میکنیم, باید در زیر یکدیگر در بالای هر صفحه HTML که شما ایجاد کرده اید قرار داده شوند.

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

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

<head> ؛ در این بخش متاداده های صفحه قرار می گیرند, مواردی که بیشتر برای موتورهای جستجو و سایر برنامه ها لحاظ شده اند. حاوی اطلاعاتی درباره خصوصیات یک صفحه وب و پیوند به پرونده های مربوط به خارج است.مثلا پیوند فایل های css ، جاوااسکریپت ، متاها و… در این قسمت نوشته می شوند.

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

 

 

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

تگ های بیشتر

در کنار تگ <head> ، همیشه یک تگ <title> نیز وجود دارد. اما در کنار همه ی اینها تگ های دیگری نیز وجود دارند که به همان اندازه مهم اند؛
<title>
در این بخش نام صفحه قرار میگرد. نامی که در بالای پنجره یا برگه مرورگر ظاهر می شود.
<meta>
اطلاعات مربوط به سند در این تگ ذخیره می شود. مثل رمزگذاری کاراکتر ، نام (متن صفحه) ، توضیحات و… .
بیایید یک نمونه ی پایه از تگ <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>
<header/>

اضافه کردن محتوا

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

 

نحوه افزودن متن به HTML

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

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

سایر عناصر کلیدی

 

هدف	معنی	عنصر
برجسته کردن اطلاعات مهم	بولد(برجسته, پررنگ)	<b>
مانند بولد عمل می کند, برای برجسته کردن متن های کلیدی	قوی	<strong>
برای نشان دادن متن	ایتالیک(مورب)	<i>
معمولاً به عنوان توضیحات تصویراستفاده می شود	متن تأکید شده	<em>
برجسته کردن پس زمینه متن	متن علامت گذاری شده	<mark>
برای کوچک کردن متن	متن کوچک	<small>
برای قرار دادن یک خط افقی روی متن	متن خط خورده	<strike>
برای پیوندها یا متن ها نشان گذاری شده, استفاده می شود	متن زیرخط دار	<u>
با زیرخط نمایش داده می شود تا متن درج شده نشان داده شود	متن درج شده	<ins>
انتخاب سبک تایپوگرافی	متن زیرنویس	<sub>
یک سبک تایپوگرافی دیگر	متن بالانویس	<sup>

 

برای استفاده از این تگ ها, لازم است تا آنها دراطراف متن مورد نظر باز و بسته شوند.

اگر قصد دارید که آنها را استفاده کنید, در یک خط جدید در ویرایشگر ، کد HTML زیر را تایپ کنید:

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

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

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

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

تگ Anchor

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

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

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

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

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

در اینجا قصد داریم یک تگ Anchor ایجاد کنیم.

در ابتدا از صفحه index.html فعلی خود یک کپی از کد تهیه کنید و آن را در یک پنجره جدید در ویرایشگر HTML کپی / جایگذاری کنید.

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

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

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

با این کار پیوندی به Google در صفحه 2 ایجاد می شود. ذخیره را انجام داده و به صفحه index.html خود بازگردید.

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

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

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

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

اضافه کردن تصاویر به HTML وب سایت

در دنیای دیجیتال امروزه تصاویر همه چیز هستند. تگ <img> هر آنچه برای نمایش تصاویر در سایت خود نیاز دارید را داراست. دقیقاً مانند عنصر لنگر <a> ، <img> هم دارای ویژگی هایی است.

عنصر لنگر (ancher): تگ لنگر HTML پیوندی را تعریف می کند که یک صفحه را به صفحه دیگر پیوند می دهد. این می تواند پیوند به صفحه وب دیگر و همچنین پرونده ها ، موقعیت مکانی یا هر URL دیگر باشد.

این ویژگی ها اطلاعات مربوط به منبع ، ارتفاع ، عرض و متن تصویر را برای رایانه شما ارائه می دهند.

استایل و فرمت ها

 

نوع فایل تصویر را میتوانید با کلیک راست روی مورد و انتخاب “Properties” بررسی کنید.
با استفاده از مشخصه کلاس نیز می توانید مرزها و سبک های دیگری برای تصویر تعریف کنید که در جلسات بعد به آن می پردازیم.

فرمت هایی که به صورت آنلاین برای تصاویر استفاده میشود عبارتند از: .jpg ، .png و gif.

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

تگ <img> بصورت زیر نوشته می شود:

<img src=”yourimage.jpg” alt=”Describe the image” height=”X” width=”X”>

ایجاد تصویری به همراه متن Alt

تصویری انتخاب کنید وآن را در پوشه ای ذخیره کنید که قبلا index.html و page2.html را ذخیره کرده اید. این تصویر را “testpic.jpg” نام گذاری کنید.

در یک خط جدید در ویرایشگر HTML , کد زیر را وارد کنید:

<img src=”testpic.jpg” alt=”This is a test image” height=”42″ width=”42″>

حالا صفحه index.html را در مرورگر خود ذخیره و پیش نمایش آن را مشاهده کنید.

چگونه یک لیست HTML بسازیم؟

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

1.لیست مرتب شده(Ordered List)

اولین مورد <ol> است که یک لیست مرتب شده از محتوا است. مثلا:

1.  یک آیتم
2.  مورد بعدی
3.  و بعدی اینجا قرار میگیرد

در تگ <ol> ما هر مورد را در لیست داخل تگ <li> </li> قرار میدهیم.

برای مثال:

<ol>
<li> یک آیتم </li>
<li> مورد بعدی</li>
<li> و بعدی اینجا قرار می گیرد</li>
</ol>

 

2.لیست نامرتب(Unordered List)

نوع لیست دومی که میتوانید از آن استفاده کنید، لیست <ul> مرتب نشده است. در این لیست عددی وجود ندارد و موارد لیست شده با گلوله هایی (bullet) مشخص میشوند.

مثالی از این لیست به صورت زیر است:

<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>

3.لیست تعریف (Definition List)

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

 

HTML
زبان نشانه گذاری Hypertext یک زبان برنامه نویسی است که برای ایجاد صفحات وب استفاده می شود و توسط مرورگر وب ارائه می شود.

 

کد استفاده شده برای این لیست به صورت زیر است:

<dl>
<dt>تیتر <dt/>
<dd> توضیحات اینجا قرار میگیرد </dd>
</dl>

حالا وقت امتحان کردن آن است🧐. index.html را باز کنید و در یک خط جدید ، HTML زیر را وارد کنید:

 

<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>

حالا تغییرات را ذخیره کنید و نتیجه ی کار را بررسی کنید. اگر همه چیز درست باشد, یک جدول گلوله ای با اطلاعات بالا نمایش داده میشود✌.

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

 

یک روش پر استفاده ی دیگر برای مرتب شدن وب سایت ها, استفاده از جدول است.
شاید توضیح این قسمت سخت ترین بخش این جلسه باشد اما به یادگیری و استفاده از آن می ارزد 😊  چون جداول راهی مناسب برای انتقال و ارائه ی مفاهیم به بازدید کننده ها هستند.

جدول ها شامل چه بخش هایی هستند؟

هنگام ترسیم جدول باید عنصری را با تگ باز <table> شروع کنیم. در داخل این تگ، جدول را با استفاده از سطرها <tr> و ستون ها <td> ترسیم می کنیم.

یک مثال از جدول HTML به شرح زیر است:

<table>
<tr>
<td>Row 1 – Column 1</td>
<td>Row 1 – Colunm 2 </td>
<td>Row 1 – Column 3 </td>
<tr/>
<tr>
<td>Row 2 – Column 1</td>
<td>Row 2 – Column 2</td>
<td>Row 2 – Column 3</td>
</tr>
<table/>

این کدها یک جدول 2 در 3 تولید می کنند.

تگ های جدول

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

 

موقعیت	معنی	تگ جدول
بالای جدول	سر جدول(Table Head)	<thead>
محتوای جدول	بدنه جدول(Table Body)	<tbody>
قسمت پایین جدول	(Table Foot)	<tfoot>
درون جدول	گروه ستون(Column Group)	<colgroup>
محتوای هدر جدول	هدر جدول(Table Header)	<th>

 

بیایید یک جدول درست کنیم ✌

در ویرایشگرتان به یک خط جدید, در صفحه index.html بروید. کد HTML زیر را وارد کنید:

<table>
<tr>
<td>Row 1 – Column 1</td>
<td>Row 1 – Column 2 </td>
<tr/>
<tr>
<td>Row 2 – Column 1</td>
<td>Row 2 – Column 2</td>
<tr/>
<table/>

تغییرات را ذخیره کنید و در پیش نمایش آنچه نوشته اید را مشاهده کنید.

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

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

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

<body/>
<html/>

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

آموزش بعدی چیه 🧐؟؟؟؟

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

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

 

😊✌ از بقیه‌ی جلسات  آموزش رایگان HTML جا نمونید✌😊

 

منبع؛ www.html.com