آموزش
اچ تي ام ال - Html learning (برنامه نويسي
تحت وب)
در این قسمت شما را
با زبان html -hyper
text markup language به صورت کاملا
ساده و گیرا آشنا می کنم ، تا
به راحتی قادر باشید
تغییرات مورد نظر خود را در
قالبهای وبلاگ و همچنین انواع
کدها انجام دهید ، یادتان
باشد زبان اچ تی ام ال یک زبان
برنامه نویسی نیست بلکه
یک زبان واسط است که اگر شما
بخواهید یک حرفه ای در
زمینه طراحی وب گردید حتما
باید آن را فراگیرید ،
امیدوارم مطالب درج شده در
این قسمت شما را در طراحی وب
یاری نماید.
درس اول (شناختن دستورات
کلی)
در صفحات اینترنتی
هر صفحه از اجزایی تشکلی
شده است ولی مهمترین
پارامترهایی که باید باشند
عبارتند از:
<html>
< head>
<body>
پارامتر <html>
که این دستورات بصورت :
< html>
در شروع دستور و <html/>
در پایان دستر مورد استفاده قرار
میگرند. کلا تمامی دستورات در HTML
با <> شروع
و با </> به
پایان می رسند.
پارامتر <head>
دستور < html>
در شروع صفحه باید باشد و
زمانی که کلیه دستورات تمام
شد باید آن را ببندیم
یعنی دستور <html/>
بعد آن دستور <head>
می باشد که مهمترین صفت هر
صفحه در نتایج موتورهای جستجو
می باشد. حتما شما هم تا به حال
جستجویی در گوگل انجام داده
اید اگر دقت کرده باشید
بیشتر نتایج که در گوگل
لیست می گردند همان عنوان
صفحه ایست که بعد از مراجعه به آن
سایت در بالای پنجره می
بینیم. پس ما باید حتما به
صفحه اینترنتی خود عنوانی
را اختصاص دهیم.
مثال:< head>test<head/>
در این مثال صفحه ما عنوان test
را به خود می گیرد.
البته دستورات
دیگری هم در این قسمت وجود
دارند که من به مهمترین آنها
اشاره می کنم :
کدهای متا : این
دستورات برای شناسایی
بعضی مشخصات سایت شما به
موتورهای جستجوگر به کار می
رود مثل کشور ، زبان ، نویسنده و
قانون کپی رایت سایت و ....
یکی از ملاک های
مهم در موتورهای جستجوگر تراکم
کلمات کلیدی و توضیح مربوط
به سایت می باشد که نقش
تعیین کننده ای در رتبه
بندی شما در گوگل می باشد ، من
ابزاری جهت تولید اتوماتیک
کدهای متا در سایت گذاشته ام ،
از قسمت خدمات سایت می
توانید مراجعه کنید ، و کلمات
کلیدی سایت خود و
توضیحی که می خواهید به
هنگام جستجوی آدرس سایت
اصلی شما به نمایش درآید را
تایپ کنید تا کد تولید گردد
آن را می توانید در قسمت <head>
سایت و یا وبلاگ خود کپی
نمایید.
با استفاده از دستور info:tarah.somee.com
می توانید توضیح (Description)
سایت خود را ملاحظه نمایید.(در
این جا به جای tarah.somee.com
آدرس سایت و یا وبلاگ خود را
تایپ نمایید.)
این ها نکاتی هستند
که متاسفانه در هیچ کتاب و یا
سایتی وجود ندارند ، پس بهتر
است شما اینها را خوب یاد
بگیرید.
پارامتر <Body>
در این پارامتر سگمنت
اصلی صفحه مشخص می شود ، که
محتوای صفحه را در بر دارد صفحات
مشخصه آن عبارت است از:
Background :
تصویری که پشت متن (پس
زمینه) به نمایش در می
آید.
BgColor : رنگی
که در پشت زمینه به نمایش در
می آید.
(صفحت هایی که در
زیذ آمده اند را می توان به
عنوان Style
کلی در صفحات و یا فایل CSS
برای کنترل بیشتر ایجاد
کرد.)
توضیح :
CSS
فایلی می باشد که با قید
دستوری در صفحات می توان نوع
فونت ، رنگ را در تمامی صفحات
تغییر داد. با ویرایش
این فایل می توان به
راحتی یک ویژگی مثلا رنگ
لینک ها را به تمامی صفحات
اعمال کرد.
Text :
رنگ متن
Link :
رنگ پیوند های بازدید نشده
Alink :
رنگ پیوند های فعال
Vlink :رنگ
پیوند های بازدید شده
دستورات کلی:
<P> نشان
یک پاراگراف است و می تواند
دستوراتی همچون aligne
یعنی موقعیت
متن را به خود بگیرد ، حتما شما
با برنامه Word
کار کرده اید در این برنامه
می توان وضعیت متون را مشخص
نمود.(راست چین - وسط چین - چپ
چین)
در این جا هم همانند
برنامه ورد می توانید این
کار را براحتی توسط نرم افزار
فرونت پیج انجام دهید (آموزش
این برنامه در سایت موجود است)
مثال:
کلمه TEST
را در یک پاراگراف در وسط صفحه
قرار گیرد؟
<p align="center">TEST</p>
به جای P
می توانیم از
دستور DIV
هم استفاده کنیم .(فرق این
دستور با P
این است که P
بیشتر برای ایجاد پاراگراف
جدید برای متون و DIV
برای تقسیم بندی متن به
همراه تصویر کاربرد دارد)
همین مثال با دستور DIV:
<Div
align="center">TEST</Div>
دستور BR:
این دستور یک خط جدید
ایجاد می کند.(توجه: این
دستور جزو دستوراتی است که
نیاز به تگ بسته ندارد و تکی
استفاده می گردد)
اندازه های متون :
از جمله دستوراتی که
کاربرد کمتری نسبت به بقیه
دستورات هست دستورات مربوط به دسته
بندی اندازه متون می باشد.
<H1> تا <H6>
این دستور در برنامه ورد هم وجود
دارد استفاده آن برای متون باعث
نمایش دادن متون در همان ادازه
تعریف شده می باشد.
مثال:
کلمه Book را
بصورت سربرگ بزرگ نمایش دهید؟
پاسخ:
<H1>Book</H1>
دستور Font:
این دستور باعث
سفارشی کردن نوع متون ، رنگ
اندازه می گردد.
توجه: بهتر است برای
متون یک Style
تعریف گردد تا اینکه برای
هر متن ما بخواهیم به طور مجزا
تمامی پارامترها را تعریف
کنیم ، این کار باعث حجیم
شدن صفحات و استاندارد نبودن آنها
می شود.
مثال: کلمه Tarah
را با فونت Tahoma
، اندازه 2 و رنگ سرمه ای بر
روی صفحه ایجاد کنید.
پاسخ:
< font
Color="#000080"
face="Tahoma"
size="2">Tarah</font>
درس دوم (استفاده
از دستورات برای اسکریپت
نویسی)
به دلیل زیاد بودن
دستورات و تنوع کاربرد آنها من
سعی کردن دستوراتی که برای
ساخت و ویرایش یک وبسایت
ساده لازم است را به شما آموزش دهم
تا بیش تر به دردتان بخورد.
چگونگی
ایجاد یک فرامتن در صفحات وب (Hyper
link):
برای ایجاد یک
فرامتن کافیست از کد زیر
استفاده نمایید:
<a href="http://tarah.somee.com/"
title="Tarah">Tarah</a>
در این دستور پارامتر
<a
href برای ساخت فرامتن
و همچنین title
برای ایجاد یک متن بصورت
توضیح Tooltip
برای فرامتن می باشد. آدرس
صفحه مقصد که قرار است زمانی که
کاربر کلیک کرد وارد آن شود هم
مابین href=""
قرار می گیرد. متن مورد نظر هم
که قرار ایت بصورت فرامتن
درآید مابین درستورات قرار
می گیرد.
با اجرای دستور بالا
این کد بصورت زیر نمایش
داده می شود.
Tarah
چگونگی قرار دادن
تصویر در یک وبسایت :
سوالی را که اغلب
دوستان از من می پرسند :
چگونه میتوان یک عکس
را در وبلاگ و یا وبسایت خود
قرار دهیم ؟
پاسخ :
این کار به راحتی با افزودن
یک دستور ساده امکان پذیر
می باشد.
<img src="http://tarah.somee.com/FileName.jpg"
border="0" height="100"
width="400">
که در این دستور src
فایل را مشخص می کند ، توجه
کنید که این آدرس همان آدرس
فایل آپلود شده در
اینترنتی باید باشد وگرنه
بصورت یک ضربدر نشان داده خواهد
شد. پارامتر border
هم بهتر است صفر باشد
تا حاشیه آبی رنگ دور عکس
نمایش داده نشود. دستورات height
و width
هم برای ارتفاع و پهنای عکس
برای نمایش دادن می باشد که
به دلخواه قابل تغییر است.
|
