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

عنصرها در اچ تی ام ال

عنصرها در اچ تی ام ال

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

به عبارت دیگر یک عنصر اچ تی ام ال معمولا شامل تگ شروع و پایانی به همراه مطالب میانی آنها است.

مثال های زیر عنصر هستند:

<p>این یک عنصر است</p>

<h1>این یک عنصر است</h1>

<div>این یک عنصر است</div>

به صورت کلی:

<نام تگ شروع>این یک عنصر است</نام تگ پایان>

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

تفاوت میان عنصر و تگ چیست؟

شاید برایتان سوال شده باشد که بین عنصر و تگ چه تفاوتی وجود دارد؟

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

<h1>این یک هدینگ است</h1>

به مثال بالا عنصر هدینگ یا عنصر عنوان گفته می شود. امّا اگر <h1> به تنهایی به کاربرده شود یک تگ نامیده می شود.

عناصر تو در تو

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

با توجه کردن به مثال زیر این موضوع را راحتتر درک می کنید.

<!DOCTYPE html>

<html>

<head>

<title>عناصر تو در تو</title>

</head>

<body>

<p>عناصر تو در تو یعنی یک عنصر در عنصر دیگر نگه داری می شود</p>

</body>

</html>

توضیح:

در مثال بالا عناصر <html>, <head> و <body> درون خود عناصر دیگری را نگه داری می کنند و به این روش عناصر تو در تو گفته می شود.

عنصر <html> شامل عنصرهای <head>…</head>, <title>…</title>, <body>…</body>, <p>…</p> است.

عنصر <head> شامل عنصر <title>…</title> است.

عنصر <body> شامل عنصر <p>…</p> است.

یادآوری:

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

·         همیشه از حروف کوچک استفاده کنید (به غیر از اعلامیه اچ تی ام ال).

·         تگ هایی که شامل محتوا نمی شوند نیز یک عنصر هستند، مانند: <hr />

 جلسه قبل | جلسه بعد

تگ های مقدماتی و عمومی اچ تی ام ال

تگ های مقدماتی و عمومی اچ تی ام ال

معمولا هر صفحه وب با یک سرتیتر (عنوان) یا هدینگ شروع می شود. سرتیترهای اچ تی ام ال با تگ های <h1> تا <h6> تعریف می شود. لازم است بدانید هنگامی که تگ های عنوان در مرورگر نمایش داده می شوند، خود مرورگر یک خط را قبل و یک خط را بعد از آن اضافه می کنند.

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

در اچ تی ام ال هم همینگونه است، جایی که سرتیتر <h1> قرار دارد مهمترین عنوان و جایی که تگ <h6> قرار دارد کمترین اهمیت را نشان می دهد.

تعداد استفاده از این تگ های عنوان در صفحات وب نامحدود است اما باید بسیار در به کاربردن آنها دقت کرد. تگ های <h2>, <h3>, <h4>, <h5> و <h6> هرکدام باید به تعداد مورد نیاز استفاده شوند.

کار و تمرین زبان اچ تی ام ال

کار و تمرین زبان اچ تی ام ال

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

البته لازم به ذکر است که، زبان اچ تی ام ال دارای ویرایشگرهای متنی ویژه همچون کافی کاپ اچ تی ام ال ادیتور است. امّا برای شروع کار تنها یک ویرایشگر متنی ساده مثل نت پد (Notepad) کافیست.

برنامه نت پد به طور پیشفرض برروی سیستم عامل های مایکروسافت ویندوز نصب است و نیاز به دانلود و نصب این برنامه ندارید. همچنین اگر از سیستم عامل های مک استفاده می کنید می توانید از نرم افزار پیشفرض تکست ادیت (Textedit) استفاده نمایید.

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

برای اینکار ابتدا نرم افزار ویراشگر متنی نت پد را باز کرده (اگر نمی دانید این نرم افزار در کجا قرار دارد در قسمت جستجوی ویندوز عبارت "Notepad" را وارد کرده و نرم افزار را باز کنید). سپس تگ ها و مقدار های زیر را وارد می کنیم:

<!DOCTYPE>

<html>

<body>

<h1>این یک سرتیتر است</h1>

<p>آموزش تمرین اچ تی ام ال در نت پد</p>

</body>

</html>

نت پد اچ تی ام ال

در ادامه از سربرگ File گزینه Save as را انتخاب کنید. یک پنجره باز می شود که باید مسیر ذخیره سازی سند خود را مشخص کنید، پس از آن مانند تصویر زیر کادرها را پر و انتخاب کنید و در نهایت فایل را ذخیره کنید:

ذخیره اچ تی ام ال

دقت داشته باشید که: پسوند نام فایل را .htm یا .html بگذارید و در قسمت Encoding گزینه UTF-8 را انتخاب کنید.

در نهایت به محلی که فایل را ذخیره کردید بروید و برروی فایل ایجاد شده دوبار کلیک کنید.

سند شما در مرورگر ویندوزتان اجرا می شود (همانند تصویر زیر).

اچ تی ام ال

جلسه قبل | جلسه بعد

آموزش زبان اچ تی ام ال  - مقدمه

آموزش زبان اچ تی ام ال - مقدمه

مقدماتی از اچ تی ام ال:

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

HTML از چهار حرف تشکیل شده و مخفف چهار کلمه است:

H: Hyper (ابر)

T: Text (متن)

M: Markup (نشانه گذاری)

L: Language (زبان)

HyperText Markup Language | زبان نشانه گذاری ابرمتن

این زبان در اواخر سال 1991 توسط یکی از دانشمندان بریتانیایی علوم کامپیوتر یعنی سر تیموتی جان برنرز-لی ارائه شد. امّا HTML2 که اولین خصوصیات استاندارد HTML را داشت در سال 1995 منتشر شد. و نسخه چهارم HTML در سال 1999 توسعه یافت که بسیار مورد توجه قرار گرفت و به طور گسترده ای مورد استفاده واقع شد اما در حال حاضر از زبان HTML5 که یک پروژه ی گسترش برای HTML4.01 بود و در سال 2012 تکمیل شد، استفاده می شود.

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

قبل از اینکه این آموزش ها را شروع کنید بهتر است دانش مقدماتی درباره ی سیستم عامل ویندوز یا لینوکس وغیره داشته باشید، علاوه برآن آشنایی با موارد زیر نیز بسیار کمک کننده است:

1- تجربه کار با هر ویرایشگر متنی مانند تکست ادیتور، نت پد++ یا ادیت پلاس و غیره.

2- نحوه ایجاد دایرکتوری ها و فایل ها برروی کامپیوتر.

3- آشنایی با فرمت های مختلف چندرسانه ای ها مانند تصاویر، ویدئوها و موسیقی ها مثل mp3, mp4, jpeg, png و غیره.

4- نحوه تایپ یک عبارت متنی در فایل و ذخیره آن برروی کامپیوتر.

5- حرکت در دایرکتوری های مختلف و کار با محتویات آنها.

رپورتاژ آگهی ویژه