سربرگ HTML
در این جلسه به آموزش سربرگ HTML در زبان کد نویسی HTML خواهیم پرداخت. لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.
Document declaration tag <html> <head> Document header related tags <head> <body> Document body related tags <body> <html>
سربرگ HTML
این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب <head> نمایش داده می شود. برچسب <head> حاوی برچسب های مهمی می باشد که عبارتند از meta و title و script و style و base و link و noscript.
برچسب <title> در HTML
این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.
<!DOCTYPE html> <html> <head> <title>HTML Title Tag Example<title> <head> <body> <p>Hello, World!<p> <body> <html>
ین مثال نتیجه ی زیر را تولید خواهد کرد.
Hello, World!
برچسب <meta> در HTML
این برچسب برای ارائه ی متا دیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گرد آورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد. در ادامه استفاده های مهم برچسب <meta> در داکیومنت HTML ارائه شده اند
<!DOCTYPE html> <html> <head> <title>HTML Meta Tag Example<title> <!-- Provide list of keywords --> <meta name="keywords" content="C, C++, Java, PHP, Perl, Python"> <!-- Provide description of the page --> <meta name="description" content="Simply Easy Learning by Tutorials Point"> <!-- Author information --> <meta name="author" content="Tutorials Point"> <!-- Page content type --> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- Page refreshing delay --> <meta http-equiv="refresh" content="30"> <!-- Page expiry --> <meta http-equiv="expires" content="Wed, 21 June 2006 142527 GMT"> <!-- Tag to tell robots not to index the content of a page --> <meta name="robots" content="noindex, nofollow"> <head> <body> <p>Hello, World!<p> <body> <html>
این مثال نتیجه ی زیر را تولید می کند.
Hello, World!
برچسب <base> در HTML
این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد. به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد.
<!DOCTYPE html> <html> <head> <title>HTML Base Tag Example<title> <base href="http://www.learnparsi.com/" /> <head> <body> <img src="/images/logo.png" alt="Logo Image" /> <a href="/html/index.htm" title="HTML Tutorial" />HTML Tutorial<a> <body> <html>
برچسب<link> در HTML
این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل sheet style خارجی موجود در مسیر css با یک root web.
<!DOCTYPE html> <html> <head> <title>HTML link Tag Example<title> <base href="http://www.learnparsi.com/" /> <link rel="stylesheet" type="text/css" href="/css/style.css"> <head> <body> <p>Hello, World!<p> <body> <html>
این مثال نتیجه ی زیر را تولید خواهد کرد.
Hello, World!
برچسب <style> در HTML
این برچسب برای تعیین sheet style برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین sheet style در داخل برچسب <style>
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example<title>
<base href="http://www.learnparsi.com/" />
<style type="text/css">
.myclass {
background-color: #aaa;
padding :10px;
}
<style>
<head>
<body>
<p class="myclass">Hello, World!<p>
<body>
<html>
این مثال نتیجه ی زیر را تولید خواهد کرد.
Hello, World!
برچسب <script> در HTML
این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوا اسکریپت استفاده می کنیم.
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example<title>
<base href="http://www.learnparsi.com/" />
<script type="text/javascript">
function Hello() {
alert("Hello, World");
}
<script>
<head>
<body>
<input type="button" onclick="Hello();" name="ok" value="OK" />
<body>
<html>
ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری آموزش سربرگ HTML پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت.
پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها