در بخش 2 تگ را معرفی کردیم که به صورت باز و بسته نمایش داده می شوند. برای هر تگ چنین نمایشی وجود دارد:
<tagname> محتوا </tagname>
بنابراین:
متن های بین <html> و </html> توصیف یک سند HTML
متن های بین <head> کار و </head> اطلاعات در مورد سند فراهم می کند
متن های بین <title> و </title> فراهم می کند یک عنوان برای سند
متن های بین <body> و </body> توصیف محتوای صفحه قابل مشاهده
هر محتوایی که در بین تگ ها تعریف شود، در صفحه مرورگر نمایش داده می شود اما خود تگ ها قابل نمایش نیستند و تنها اثرات آن ها که نمایش محتویات می باشد، قابل رویت هستند. استفاده درست و تکنیکی از دانش تگ ها شما را به یک طراحی سایت حرفه ای سوق می دهد.
از این آموزش به بعد با تگ های کاربردی بسیاری آشنا خواهید شد و می توانید از قابلیت های آن ها استفاده زیادی ببرید. اولین تگی که با آن آشنا می شوید، تگ <a> است. که امکان کلیک کردن را در صفحات وب مقدور می سازد و به صورت زیر به کار می رود.
برای هر تگ امکانات بسیاری از پیش تعریف شده است که بر قابلیت تگ ها می افزاید. به این امکانات attribute گفته می شود. href یکی از امکانات تگ ها می باشد که همراه آدرس یک صفحه یا محتوا (متن، عکس، فیلم یا داکیومنت) به کار می رود و ما را با یک کلیک در <a> به لینک مورد نظر هدایت می کند.
در صفت href می توان آدرس یک فایل مانند عکس را برای نمایش به کاربرد یا آدرس صفحه HTML دیگر را وارد کرد. به کد زیر و خروجی آن توجه کنید.
در استفاده از تگ ها تنها یک صفت به کار نمی رود و می توان از چند صفت استفاده کرد، صفتی به نام title بعد از href یک تولتیپ (tooltip) همراه با اشاره گر موس ایجاد می کند.
یکی دیگر از تگ های پرکاربرد HTML تک <q> است که برای متنی که درون آن قرار می گیرد، ایجاد نقل قول می کند.
تگ دیگری مشابه با تگ <q> وجود دارد که به تگ <blokquote> معروف است با این تفاوت که برای نقل قول های کوتاه از تگ <q> و برای نقل قول های طولانی از <blokquote> تگ استفاده می شود.
ضمن یادگیری تگ ها ایده های خود را برای یک طراحی سایت حرفه ای و پیشرفته ترسیم و یادداشت کنید و طرح خود را روی کاغذ ترسیم کنید. در تمامی مراحل یادگیری HTML با تگ های بسیاری آشنا خواهید شد که در هر کدام دانش و تکنیک های کاربردی زیادی قرار دارد.
برای طراحی سایت با HTML به ادامه آموزش ها می رویم و تگ های دیگر را بررسی می کنیم. تگ های HTML انواع مختلفی دارند و دسته های متفاوتی تقسیم می شوند. توجه به این تقسیم بندی و به خاطر سپردن آن ها برای یادگیری کامل HTML و طراحی سایت ضروری است. پیشنهاد ما این است، هر تگ را به طور کامل یادبگیرید سپس به بررسی و یادگیری تگ های بعدی بپردازید.
یکی از دسته بندی تگ ها براساس نمایش محتویات درونی آن هاست:
Block elements: تگ هایی هستند که همیشه محتویات در نمایش یک خط فاصله با خط قبل و بعد از خود دارند. مانند <p>
Inline elements: تگ هایی هستند که محتویات به صورت پشت سر هم نمایش داده می شوند. مانند <a>. اگر بین محتویات نیاز به فاصله باشد از تگ <br> استفاده می کنیم که معادل Enter می باشد.
تگ <p> جهت ایجاد پاراگراف به کار می رود. برای نمایش پاراگراف ها از این تگ استفاده می شود.
به تگ <br> توجه کنید <br> تگی هست که تگ بسته یا به اصطلاح تگ پایانی ندارد. تگ ها براساس اینکه محتویات می پذیرند یا خیر به دو دسته تقسیم می شوند:
Normal elements: تگ هایی که تگ آغازین و تگ پایانی دارند و می توان بین آن ها محتویات قابل نمایش قرار داد. مانند <p>، <a>
Empty elements: تگ هایی که تنها یک تگ آغازین دارند و بعد از آن ها محتویاتی قرار نمی گیرید و تگ پایانی ندارند. مانند <br>
به این نکته توجه کنید تگ هایی که Normal elements هستند، هرگز نمی توانند به صورت Empty elements به کار روند.