وبلاگ دانشجویان مهندسی فناوری اطلاعات دانشگاه اصفهان

وبلاگ دانشجویان it ورودی 90 دانشگاه اصفهان

وبلاگ دانشجویان مهندسی فناوری اطلاعات دانشگاه اصفهان

وبلاگ دانشجویان it ورودی 90 دانشگاه اصفهان

آشنایی با HTML

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

مقدمه :

آنچه که قبل از یادگیری HTML لازم است بدانید:
برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است:

1) شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید.
2) نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.
3) شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.
4) بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.
5) شما به جایی برای ذخیره کردن متن خود دارید. البته شما برای استفاده از HTML نیاز ندارید حتماً به اینترنت متصل باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید.
برای ذخیره کردن فایلی که با Notepad نوشته اید و ایجاد یک صفحه HTML کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html یا htm بنویسید. (مانند Mypage.html) در آخر هم دکمه بر روی Save کلیک کنید.

HTML چیست ؟

»    HTML یک زبان برای نشانه گذاری فرا متنی است که کارش توصیف وب است.
»    HTML برگرفته از عبارت Hyper Text Markup Language است.
»    HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است.

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

» یک فایل HTML باید دارای پسوند htm. یا html. باشد

» یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده مانند NotePadساخته شود.

به دستورالعمل هایی که بین دو علامت <> قرار میگیرند تگ (Tag) یا برچسب گفته می شود.

اصول نوشتن صفحات HTML

یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر < به پایان می رسد.

مثلاً تگی که باعث ایجاد زیرخط کلمات می شود اینطور نوشته می شود:

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

به این تگ ، تگ ابتدایی (Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: /> بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید:

This is an example

اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آن را مطابق کد زیر در ویرایشگر متن خود بنویسید:

This is an example

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

This is an example

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

البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً که برای رفتن به خط بعدی استفاده می شود، <hr> که برای ایجاد یک خط افقی به کار می رود و که برای رفتن به پاراگراف بعدی استفاده می شود.

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

نکته : فضای خالی بین تگها تأثیری ندارد. مثلاً :

متن زیرخط دار 

کد بالا همان نتیجه ای را می دهد که کد زیر دارد:
متن زیرخط دار

به این طریق هم اگر نوشته شود فرقی نمی کند:

متن زیرخط دار

قالب پایه ای یک فایل HTML بصورت زیر است :

ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟

<html>
<head>
<title>Page title</title>
</head>
<body>
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
</body>
</html>

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

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

تگ بعدی <head> است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با <head/> به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.

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

در مثال بالا عنوانی که برای صفحه نشان داده می شود Page title است.

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

هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است

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

در مطالب بعدی در مورد چگونگی کار کردن با متنها بحث می کنیم ...

علیرضا جمعه 19 اسفند 1390 ساعت 16:24