HTML
مقدمه HTML :
تمام صفحات وب با نوعی از HTML ساخته می شود و برای ایجاد وب سایت های پیشرفته یادگیریHTML ضروری است.
مقدمه ای بر وب و HTML :
وب گسترده جهانی
وب گسترده جهانی (world with web)www که معمولا فقط وب گفته می شود شبکه ای است که تمام رایانه های متصل به آن را در سراسر جهان به هم وصل می کند و تمام رایانه ها در وب می توانند با هم ارتباط داشته باشند.
WWW چگونه کار می کند؟
اطلاعات وب در فایل هایی به نام web page قرار می گیرند که آنها نیز در رایانه هایی به نام webserver قرار دارند و رایانه ها برای دیدن صفحات وب از استانداردی ارتباطی به نام HTML (hypertext transfer protocol l nsfer protocمانه ها برای دیدن صفحات وب از استانداردانه های متصل به آن را در سراسر جهان به هم وصل می کند و تمام رایانه ها در و) استفاده می کنند رایانه ها متصل به وب اطلاعات موجود در web page ها را از طریق برنامه هایش به نام مرورگرها که مورد استفاده قرار می گیرند. Internet explorer و fire fox می باشند.
چگونه مرورگرها صفحات وب را نشان می دهند؟
همه صفحات وب شامل دستورالعمل هایی برای نمایش توسط مرورگرها هستند و مرورگرها با خواندن این دستورالعمل ها صفحات را نشان می دهند دستورالعمل های نمایش صفحات وب برچسب ها (تگ های) (hypertext markup language l nsfer protocمانه ها برای دیدن صفحات وب از استانداردانه های متصل به آن را در سراسر جهان به هم وصل می کند و تمام رایانه ها در و) HTMLنامیده می شوند مانند:
<p> this is paragraph </p>
یک فایل HTML چیست؟
یک فایل HTML فایل متنی ساده ای شامل برچسب ها (Tags) می باشد که بهتر است پسوند HTML یا HTM داشته باشد و می تواند توسط یک ویرایشگر ساده متن مانند notepad ساخته شود برای بهتر روشن شدن مطلب بهتر است یک فایل HTML بسازیم.
در Windows برنامه notepad را اجرا کنید و متن زیر را بنویسید:
<html>
<head>
<title> title of page </title>
</head>
<body>
This is my frist
</body>
</html>
این فایل را با نام "test.html" ذخیره کنید حال مرورگر اینترنت خود را باز کنید و گزینه open را از منوی file مرورگر انتخاب کنید، یک جعبه محاوره ای باز خواهد شد Browse یا File Choose را انتخاب کنید و فایل "test.html" که هم اکنون ساخته اید را بیابید و انتخابش کنید و روی open کلیک کنید حال شما یک آدرس مانند :
D: my documents Test.html را در جعبه محاوره ای خواهید دید روی ok کلیک کنید مرورگر صفحه ساخته شده تئسط شما زرا نشان می دهد. حال درباره صفحه ای که ساخته ایم صحبت می کنیم.
اولین برچسبدر فایلHTML شما <html> است ، این برچسب به مرورگر می گوید که این شروع یک فایل HTML است، آخرین برچسب در فایل شما </html> است این برچسب به مرورگر می گوید که پایان یک فایل HTML است.
نوشته های بین برچسب <head> و برچسب <head/> اطلاعات سربرگ می باشند در پنجره مرورگر نمایش داده نمی شوند. متن بین برچسب <title> و برچسب </title> عنوان فایل می باشد و در نوار عنوان مرورگر نشان داده خواهد شد متن بین <body> و <body/> توسط مرورگر نشان داده خواهد شد.
برچسب های HTML :
برچسب ها برای مشخص کردن عناصر فایل HTML استفاده می شوند و توسط دو حرف بزرگتر و کوچکتر احاطه می شوند برچسب ها معمولا به صورت جفت استفاده می شوند مانند <b> و </b> برچسب اول برچسب ابتدایی و برچسب دوم برچسب انتهایی نامیده می شود. و متن بین آنها مندرجات عنصر می باشد برچسب ها به بزرگی و کوچکی حروف حساس نیستند مانند <b> و <B>
مشخصه ی برچسب ها:
برچسب <body> عنصر بدنه صفحه شما را تعریف می کند با اضافه کردن مشخصه ی bqcolor شما می توانید به مرورگر بگویید که رنگ پس زمینه شما قرمز باشد مانند:
<body bqcolor = red >
برچسب <Table> یک جدول ایجاد می کند با اضافه کردن مشخصه border می توانید به مرورگر بگویید مثلا جدول شما حاشیه ندارد مانند:
<Table border="0">
باید مشخصه هابین نقل قول " " قرار گیرند.
برچسب های اساسی HTML :
عنوان ها:
عنوان ها توسط برچسب <h1> تا <h6> ایجاد می شوند که <h1> بزرگترین عنوان و <h6> کوچکترین عنوان را ایجاد می کند HTML به طور خودکار یک خط خالی قبل و بعد از عنوان اضافه می کند.
پاراگراف:
پاراگراف ها توسط برچسب <p> ایجاد می شود. عنوان های HTML به طور خودکار یک خط خالی قبل و بعد از عنوان اضافه می کند.
شکست خطوط:
برچسب <br> هنگامی استفاده می شود که شما می خواهید یک خط پایان دهید و ادامه متن به خط بعدی برود ولی پاراگراف جدیدی را شروع نکنید برچسب <br> یک برچسب خالی می باشد و برچسب انتهایی ندارد.
برچسب خط افقی:
برای جداکردن قسمت های از متن می توانید از برچسب <hr> استفاده کنید.
جدول برچسب های اساسی و کاربرد آنها
برچسب ابتدایی
کاربرد
<HTML>
یک فایل HTML را ایجاد می کند
<body>
بدنه فایل را ایجاد می کند
<h1> تا <h6>
عنوان با اندازه یک تا 6 را ایجاد می کند
<p>
پاراگراف را ایجاد می کند
<hr>
یک خط افقی در متن قرار می دهد
<br>
یک خط شکسته در خط قرار می دهد
<…!>
توضیحاتی به فایل اضافه می کند
قالب بندی متن در HTML
جدول برچسب های قالب بندی متن:
برچسب ابتدایی
کاربرد
<b>
یک متن با حروف پررنگ ایجاد می کند
<biq>
یک متن با حروف بزرگتر ایجاد می کند
<em>
یک متن با حروف ایتالیک ایجاد می کند
<i>
یک متن با حروف ایتالیک ایجاد می کند
<small>
یک متن با حروف کوچکتر ایجاد می کند
<strong>
یک متن با حروف پررنگ ایجاد می کند
<sub>
یک متن زیر نویس را ایجاد می کند
<sub>
یک متن بالا نویس ایجاد می کند
<ins>
یک متن زیر خط دار ایجاد می کند
<del>
یک متن با خطی روی آن ایجاد می کند
<body bqcolor = "rqb (0, 0, 0)" >
<body bqcolor = "black" >
در استفاده از رنگ ها بهتر است از شیوه Name استفاده نکنید.
فونت ها در HTML :
برای تعیین نوع فونت و رنگ یا اندازه آن در یک فایل HTML می توان از برچسب <Font> استفاده کرد اگرچه هنوز عده زیادی از این شیوه استفاده می کنند و حتی نرم افزار FrontPage نیز از این شیوه استفاده می کند استفاده از این شیوه توصیه نمی شود در اینجا فقط برای آشنایی با برچسب <Font> به توضیح آن می پردازیم برچسب <Font> دارای سه مشخصه size و Face و color است که در جدول زیر شرح داده می شود:
مشخصه
مثال
کاربرد
Size= "Number"
Size= "2"
اندازه فونت را تعیین می کند
Size= "+ Number "
Size= "+1"
فونت را بزرگتر می کند
Size= "- Number "
Size= "-1"
فونت را کوچکتر می کند
Face= "face-name"
Face= "Times"
نام فونت را تعیین می کند
Color= "color-value"
Color= "≠eeFFoo"
شماره و رنگ را تعیین می کند
Color= "color-name"
Color= "red"
نام فونت رنگ را تعیین می کند
لینک ها در HTML :
برچسب <a> و مشخصه <hreF> HTML از برچسب <a> که a حرف اول کلمه anchor با معنی لنگر می باشد برای ساختن پیوند با دیگر فایل ها استفاده می کند یک لینک می تواند به هر منبعی در وب اشاره داشته باشد یک صفحه HTML دیگر یک تصویر یک موزیک، یک فیلم یا هر چیز دیگری قاعده ساخت یک لینک به صورت
<a hreF = "uil"> text to be displayed </a>
مشخصه hreF برای مشخص کردن آدرس فایلی که می خواهیم به آن لینک ایجاد کنیم به کار می رود و کلمات بین برچسب ابتدایی و انتهایی به شکل پیوند (Hyperlink) نشان داده می شود به عنوان مثال خط زیر یک لینک به سایت Yahoo ایجاد می کند.
<a hreF = "http:// WWW.yahoo.com/"> visit yahoo! </a
تصاویر در HTML :
برچسب <imq> و مشخصه src
تصاویر در فایل های HTML توسط برچسب <imq> قرار داده می شوند این برچسب یک برچسب خالی است یعنی نیازی به برچسب انتهایی ندارد و فقط شامل مشخصه های مربوط به خود می باشد برای مشخص کردن تصویری که باید در صفحه قرار بگیرد نیاز به استفاده از مشخصه suc(source) داریم که به وسیله آن آدرس و نام فایل معرفی می شود.
<imq src = "مسیر عکس .qiF"
اگر فایل HTML و تصاویر در کنار هم قرار داشته باشند می توانیم از <imq src = "product.qiF"> استفاده کنیم و نیازی به ذکر کامل آدرس نیست.
مشخصه :alt این مشخصه برای ایجاد یک متنتوصیفی بروی تصویر به کار می رود.
تصویر پس زمینه:
برای اضافه کردن تصویری به پس زمینه می توانید از ساختار <body Backqround = "imq.jpq">
استفاده کنید که به جای imq.jpq می توانید نام هر فایل رتصویری دیگری را قرار دهید
مشخصه ی aliqn در تصاویر :
این مشخصه طریقه تراز شدن تصاویر و متن را تعیین می کند.
تغییر ابعاد تصاویر:
توسط مشخصه Heiqht و Width می توانید ابعاد تصاویر را تغییر داده و آن را بزرگتر یا کوچکتر کنید.
جدول ها در HTML :
جدول ها در HTML توسط برچسب <Table> ایجاد می شود یک جدول توسط برچسب <Tr> به سطر تقسیم می شود و هر سطر توسط برچسب<Td> به خانه های اطلاعاتی تقسیم می شود و مشخصه border= "1" می تواند ضخامت حاشیه را تعیین کند. و اگر مشخصه border را مشخص نکنید جدول شما بدون حاشیه خواهد بود.
عنوان ها در جدول:
عناوین ستون ها در یک جدول توسط برچسب <Th> مشخص می شود.
<Caption> توسط این برچسب می توانید عنوانی برای جدول خود در نظر بگیرید.
: 8nbsp; برای جلوگیری از به هم خوردن حاشیه باید حرف نهادی 8nbsp; را بکار ببریم.
مشخصه colspan : برای ادغام کردن ستون ها
مشخصه rowspan : برای ادغام کردن سطرها
مشخصه cellpaddinq: برای ساختن فضایی خالی بیشتر بین محتویات هر خانه و حاشیه آن استفاده می شود.
مشخصه cellspacinq : از این مشخصه برای ساختن فضای خالی بیشتر بین خانه ها استفاده می شود.
چند مشخصه دیگر در مورد جدول:
توسط مشخصه bqcolor می توانید رنگ زمینه جدول یا خانه های آن را تعیین کنید.
مشخصه width و heiqht عرض جدول یا ارتفاع جدول را تعیین کنید.
و توسط مشخصه backqround می توانید تصویری در پس زمینه جدول یا خانه ها قرار دهید.
از مشخصه aliqn برای مرتب کردن محتویات خانه های یک جدول در جهت افقی استفاده می شود و از مشخصه های valiqn برای مرتب کردن محتویات خانه های یک جدول در جهت عمودی استفاده می شود.
مشخصه ی دیگری که در جدول ها کاربرد دارد مشخصه frame است که دارای انواع above- void- box- border- rhs- Ihs- vsides- hsides- below می باشد.
فهرست ها در HTML :
فهرست های شماره دار و بدون شماره و فهرست های دارای توضیح .
فهرست های بدون شماره:
اینگونه فهرست ها توسط یک شکل کوچک مشخص می شوند و توسط برچسب <ul> شروع شده و هر مورد آن با برچسب <Li> مشخص می شود.
فهرست های شماره دار:
منظور از فهرست های شماره دار فهرست هایی است که مورد آن توسط عدد شماره گذاری شده اند فهرست های شماره دار توسط برچسب <OL> شروع شده . هر مورد آن با برچسب <Li> مشخص می شود.
اینگونه از فهرست ها دارای شماره یا شکل نمی باشند و برای مواردی که می خواهیم توضیحی در کنارشان باشد به کار می رود فهرست های دارای توضیح توسط برچسب <dl> شروع شده و هر مورد آن با برچسب <dt> مشخص می شود و توضیحات در داخل برچسب <dd> قرار می گیرد.
9