آموزش مقدماتی HTML

قسمت دوم:

د)تگ های اصلی ( Basic Tags )

تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و در این بخش با عناصر و تگ های پایه و مهم: <hr > , <br > , <h1 > …. <h6 > , <!– Comment –> , <p > آشنا خواهید شد . یکی از بهترین روش های یادگیری تگ های اچتمل دیدن مثالها و تغییر آنها می باشد می توانید به مطالعه و یادگیری مثالها پرداخته، کدهای اچتمل را تغییر داده و به مشاهده نتایج بپردازید.

سر تیترها (Headings)

ادامه مطلب…

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

Start Tag	purpose	کاربرد
Defines a table تعریف جدول Defines a table header تعریف سرستون در جداول Defines a table row تعریف ردیف ها در جداول Defines a table cell تعریف سلول یا خانه های یک جدول Defines a table caption تعریف عنوان جدول مرجع : HTML 4.01 Specification – فهرست عناصر – فهرست شناسه ها

<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>

پاراگرافها (Paragraphs)

پاراگرافها با کمک تگ <p> معرفی میشوند.مرورگر به هنگام نمایش یک پاراگراف بصورت اتوماتیک یک سطر خالی قبل و بعد از آن اضافه خواهد کرد.

سطر جدید (Line Breaks)

برای رفتن سر سطر جدید از تگ <br> استفاده میشود.در اینحالت یک پاراگراف جدید ایجاد نمیشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نمی باشد.

کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضیحات در مورد کدهای اچتمل باید از تگ خاصی استفاده کنید. برای اینکار باید متن و شرحتان را درون علائم <– و –!> قرار دهید. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمایش نخواهد داد و فقط شرح و توضیحات برای برنامه نویس و دیگر افرادی که احتمالا در آینده با کد اچتمل کار خواهند کرد مفید خواهد بود. (به محل نویسه “!” توجه کنید! فقط یکی و آنهم در ابتدا)

چند نکته کاربردی:

◄توجه داشته باشید که بدلیل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکیپ، ..) و به دلیل تفاوت دقت نمایش صفحه نمایش کامپیوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمایش داده میشوند و همیشه سعی کنید که صفحاتتان را نه تنها با اکسپلورر که معروفترین مرورگر است بلکه با نت اسکیپ و حتی مرورگرهای کامپیوترهای مکینتاش چک کرده و همچنین در دقت های نمایش ۸۰۰x600 و ۱۰۲۴X768 آن را امتحان کنید.

◄از نظر فاصله و سطر بندی، متنی که در صفحه ادیتورتان تایپ میکنید با چیزی که مرورگر نمایش خواهد داد متفاوت خواهد بود.همیشه به یاد داشته باشید که فاصله های اضافی (space) و خطهای خالی متن در صفحه ادیتور توسط مرورگر در نظر گرفته نشده و نمایش داده نخواهد شد.

◄برای نمایش بیش از یک فاصله خالی باید از نویسها یا ترکیب کاراکتری خاصی (None Breaking Space) استفاده کنید.

◄فاصله های اضافی بین کلمات در یک متن اچتمل توسط مرورگرها دیده نخواهد شد و در نمایش همیشه تبدیل به یک فاصله (space) خواهد شد. در ضمن یک خط خالی در متن ادیتور بصورت یک فاصله یا space نمایش داده خواهد شد.

◄برای ایجاد یک سطر جدید هیچگاه از یک تگ <p> خالی استفاده نکنید و به جای آن از تگ <br> استفاده کنید.

◄مرورگرها به هنگام نمایش بعضی عناصر بصورت اتوماتیک یک سطر خالی قبل و بعد از آن عنصر نمایش خواهند داد. برای نمونه این گروه از عنصرها میتوان از پاراگراف (<p>) و سرتیترها (<h..>) نام برد.

◄تگ <hr> یا Horizontal Roler سبب نمایش یک خط افقی خواهد شد و در واقع بخش های مختلف مطالب این صفحات با کمک این تگ از هم جدا شده اند.

تگهای اصلی

در جدول زیر عناصر معرفی شده در این فصل به همراه لینکهای مربوطه جهت مطالعه بیشتر آورده شده است. توجه داشته باشید که برای هر عنصر فهرستی از شناسه ها یا Attributes موجود است و همچنین به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آینده اچتمل توجه داشته باشید و سعی کنید که از آنها استفاده نکنید.

ه) فارسی نویسی

در این بخش با فارسی نویسی، فارسی سازی و استاندارد یونیکد و نحوه استفاده از ادیتور آنلاین و فارسی آشنا خواهید شد. همچنین متاتگ http-equiv و شناسه dir نیز معرفی خواهد شد.

◄سؤالات مربوط به فارسی نویسی را میتوان به سه گروه عمده تقسیم کرد:

- چگونه فارسی بنویسم ؟
- چگونه فارسی بخوانم؟
- چگونه صفحات اچتمل فارسی را نمایش دهم؟

دو نکته بسیار مهم در مورد فارسی نویسی:

روش کدگزاری UTF-8

· اکیدا توصیه میشود که برای تایپ و تمایش متون فارسی از استاندارد یونیکد و روش کدگزاری UTF-8 اسنفاده شود و این روشی است که مطالب این سایت و ادیتور آنلاینش از آن استفاده میکند.نکته مهم در نمایش صحیح متون فارسی تعیین نوع کدگزاری یا encoing صفحات فارسی است که برای اینکار باید از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زیر استفاده شود:

در اینصورت مرورگر یا Browser قبل از نمایش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخیص داده و دیگر مثلا نیازی به تعیین دستی (دراکسپلورور ۵ : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازدیدکننده سایت نخواهد بود.

شناسه یا attribute ی به نام dir

جهت نمایش متون لاتین به صورت پیش فرض و default از چپ به راست (ltr) میباشد.در مورد متون و جملات فارسی باید با کمک روشی جهت نمایش پیش فرض را به “راست به چپ” تغییر دهید. شناسه یا attribute ی به نام dir یا همان direction این کار را برای شما انجام میدهد. این شناسه دارای دو مقدار ممکن میباشد :

مثلا برای نمایش جمله فارسی “سلام بر دنیای وب!” با کمک عناصر p یا div کافی است که به یکی از شکلهای زیر عمل شود:

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

و) فرمت دهی formating

وظیفه گروهی از تگ های اچتمل فرمت دهی و تعیین شکل نمایش متون ( مثلا ضخیم و bold بودن و یا مورب و ایتالیک بودن ) میباشد و در این بخش با این گروه از تگهای formating آشنا خواهید شد:

نحوه دیدن سورس کدهای اچتمل (HTML Source)

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

اگر صفحه مورد نظر از مجموعه فریمها (Frameset) استفاده کرده باشد برای دیدن سورس کد اصلی فریمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضیح است که در این حالت فقط تعاریف کلی فریمها قرار دارند.) و سپس برای دیدن کد اچتمل اختصاصی هر صفحه باید پس از “Right Click” روی هر صفحه “View Source” کرده و کد اچتمل هر فریم را جداگانه ببینید.

اگر طراح سایت با کمک Java Script مانع دیدن سورس توسط شما میشود، ابتدا در منوی Tools/Internet Options…/Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکریپت مرورگر را غیر فعال کرده (disable) و سپس مراحل بالا را تکرار کنید!!!

چند نکته کاربردی:

1. در استفاده از Underline دقت کنید چون در اکثر مرورگرها، پیوندها با این خطوط نشان داده می شوند و این مساله میتواند کاربران را دچار اشتباه کند .
2. به کارگیری تگهای EM و STRONG که جایگزین تگهای I و B هستند ، این اطمینان را می دهد که صفحه شما توسط همه مرورگرها بصورت صحیح نمایش داده خواهد شد .
3. به ترتیب بسته شدن تگهای پایانی در مثال زیر دقت کنید، همان گونه که مشاهده می کنید عنصر STRONG بعد از عنصر U شروع شده است ، به همین خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار می گیرد.

:تگهای فرمت دهی متون

ز) نهادها entities

در استاندارد اچتمل گروهی از نویسه ها (Character)دارای معنی خاصی بوده ( مثلا نویسه < شروع یک تگ و نویسه > انتهای یک تگ را نشان میدهد.) و برای نمایش آنها در صفحاتتان مستقیما قابل مصرف نمی باشند. در این بخش با فهرست این نویسه ها آشنا شده و نحوه درج آنها را با کمک Character Entities فرا خواهید گرفت.

Character Entities

در اچتمل بعضی از نویسه ها دارای معنی خاصی بوده و برای نمایش آنها در صفحاتتان باید از character entities ها استفاده کنید. یک character entities از سه قسمت تشکیل میشود:

۱- نویسه ampersand (&)
2- نام entity یا نویسه # و سپس شماره عددی entity
3 – و نهایتا نویسه semicolon (;)
برای مثال برای نمایش نویسه > دو روش وجود دارد، باید از &lt; یا از &#60; استفاده کنید. در این مثال lt نام entity و ۶۰ شماره عددی آن میباشد.

مزیت استفاده از نام entity در مقابل استفاده از شماره عددی آن سهولت یادآوری آن از روی نامش میباشد و عیب آن این است که تمامی مرورگرها نام گذاریهای موجود برای Entity ها را قبول ندارند ولی در عوض همگی شماره های عددی entity ها را بخوبی میشناسند. توجه داشته باشید که entity ها به کوچک و بزرگی حروف حساس هستند و در واقع Case Sensitive میباشند.

پر کاربردترین character entity در اچتمل، نویسه فاصله یا Space یا Blank میباشد و نام رسمی آن non-breaking space میباشد. همانطور که میدانید مرورگرها فاصله های اضافی را در نظر نگرفته (truncate spaces) و مثلا از ۱۰ نویسه فاصله، ۹ تای آنرا نادیده میگیرند و برای نمایش فاصله های اضافی باید از &nbsp; استفاده کنید.

فهرست پرکاربردترین Character Entities ها

چند Character Entitie با کاربردهای کمتر

منبع: article-computer.blogfa.com/