PDA

توجه ! این یک نسخه آرشیو شده می باشد و در این حالت شما عکسی را مشاهده نمی کنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش کامل کار با Html


sunyboy
09-30-2008, 03:42 AM
از اونجایی که کار با اچ.تی.ام.ال ساده است و فقط نیاز به تمرین زیاد داره..تصمیم گرفتم یه آموزش بزارم ...
sunyboy
09-30-2008, 03:43 AM
درس 1 - ایجاد اولین سند HTML


بعد از خواندن این درس توانائیهای زیر را در ساخت صفحات وب بدست می آورید:
1- آشنایی و درک تگهای HTML
2- باز کردن محیط کاری متناسب برای ایجاد یک سند HTML
3- استفاده از یک Editor (ویرایشگر متنی )
4- وارد کردن مطالبی به عنوان توصیه بطوریکه در صفحه نشان داده نشود
5- باز کردن سند در Browser برای نمایش آن تحت وب

1- تگ های HTML

وقتی یک مرورگر وب صفحه ای مانند صفحه فوق که شما مطالعه می کنید را نشان می دهد، صفحه از یک فایل متنی خوانده میشود.
کدهای ویژه اي بکار برده شده اند که با علامات <> نشانه گذاری شده اند. قالب عمومی تگ های HTML بصورت فوق می باشد :
< نام تگ / >رشته کاراکتری < نام تگ >
(البته بعضی تگها بصورت فرد عمل می کنند )

مانند:

<h2> What are HTML tags </h2>


این تگ بیان می کند که مرورگر وب متنی را بصورت زیر نمایش می دهد :
What are HTML tags
- بعدا در مورد تگهای < Hn > توضیح بیشتری خواهیم داد.

تذکر :

مرورگر وب نسبت به استفاده از حروف بزرگ یا کوچک حساسیت ندارد.بر خلاف برنامه های کامپیوتر ، اگر شما ایرادی در HTML داشته باشید ، کامپیوتر شما دچار هنگ نمی شود و ایراد بسادگی با رفتن در داخل سند HTML بر طرف میشود. مرورگر شما ، دارای یک سند لغات کوچک می باشد . یکی از جنبه های جذاب HTML ، این است که اگر Browser شما نداند که تگی که در آن نوشته شده چیست ، آن را نادیده می گیرد. برای مثال :

<wiggles><h3> What are HTML tags?</wiggles></h3>

مثلا تگ < H3 > < /H3 > مورد حمایت مرورگر قرار می گیرند . ولی با مرورگرهای فعلی < wiggle /> و < wiggle > حمایت نمی شوند . اگر ما برنامه نویس یک مرورگر وب بودیم عملکردی برای تگ < wiggle > در نظر می گرفتیم .

2- باز کردن محیط کاری

برای کامل کردن این بحث ، از ابتدا بهتر است که یک پنجره جدید ایجاد کنید. برای اینکه به شما اجازه می دهد که ضمن نگهداری پنجره فعلی ، پنجره ای جدید برای کار خودداشته باشید. شما خیلی راحت می توانید بین پنجره ها و اطلاعات مختلف گردش داشته باشید . مراحل ایجاد محیط کاری را در اینجا بیان می کنیم :
1- از منوی File مرورگر خود ، گزینه New Window را انتخاب کنید . پنجره دوم ظاهر می شود . اولین پنجره کتاب شماست و پنجره دوم محیط کاری برای تکمیل دروس HTML
2- فایل متنی خود را باز کنید
3- ایجاد سند HTMl
یک سند HTML شامل دو قسمت می باشد ( قسمت های تیتر و بدنه )
- قسمت تیتر ، شامل اطلاعاتی در مورد سندی که نشان داده می شود است .
- بدنه ، شامل کلیه مواردی می باشد که در یک صفحه وب نشان داده می شود .

نمونه یک سند HTML
[SIZE=+2]
<! doc type>
<html><head>


استفاده از مطالبی که توضیح راجع به سند باشد و در صفحه نشان داده نمی شود

..header
<head>
<body>


هر آنچه در صفحه نشان داده می شود

<!...>
<body/>
<html/>
<!doctype html public "// w3 c/dtd html 3.l//en">


این تگ توضیحاتی دارد مبنی بر اینکه برای نوشتن این صفحه از کدام ورژن HTML استفاده شده است . تمامی مندرجات صفحه بین 2 دو تگ < HTML> و < html /> نوشته می شود . ابتدا < Head > و < head / > و سپس < body > و < body / > < ! …… > متنی که ما بین تگ فوق نوشته می شود ، در صفحه وب نمایش داده نمی شود، ولی این اطلاعات در اختیار کسی قرار می گیرد که Source یک صفحه وب را که در پشت صفحه وب قرار دارد می بیند .
وقتی صفحه وب شما دچار پیچیدگی می شود، این مطالب و کدها می تواند برای به روز کردن صفحه وب شما مفید باشد . اینجا به ذکر مراحل ایجاد سند HTML می پردازیم :
1- Editor متنی خود را باز کنید
2- و مطالب زیر را در آن وارد کنید :


<DOC TYPE HTML public "_//usc//DTD HTML 3.L//EN">
<HTML>
<head>
<title> Lesson 1 </title>
<body>
Lesson 1
<body/>
<html/>



موقعیت تگ < title > و < title /> داخل دو تگ < head > و < head /> می باشد و این که در صفحه نشان داده نمی شود پس کار آن چیست ؟
تگ < html > شناسه یگانه ای است برای هر سند HTML و در قسمت Title bar بار مرورگر شما نمایش داده می شود .
در درس 3 شما می آموزید که چگونه رشته کاراکتر را برای Title اضافه کنید و در صفحه وب شما ظاهر شود . ذکر این نکته ضروری است که دراین تگ توضیح اسم نویسنده و تاریخ ایجاد سند HTML ذکر می شود و شما می توانید هر نکته ای را درون این تگها نمایش دهید . ولی فقط در سند HTML قابل رویت می باشد و در صفحه وب شما قابل مشاهده نیست.
3- سند خود را به نام Lesson1.html ذخیره کنید و آن را در فولدر خاص مورد نظر خود نگهداری کنید .





تذکر( برای استفاده کنندگان ویندوز 3.1 ) :

شما باید سند HTML خود را با نام HTM .نام فایل ذخیره کنید . بنابراین نام فایل شما در این مثال Lesson1.htm خواهد بود . نگران نباشید مرورگر شما به اندازه کافی هوشمند می باشد و می داند که آخر نام فایل شما HTM می باشد . HTM نیز یک فایل HTML می باشد .
استفاده کنندگان ویندوز 95 به بالا می توانند نام فایل را Lesson1.html قرار دهند . طبق مثال فوق با استفاده از این اسم و پسوند مرورگر فایل شما را مانند یک فایل HTML می خواند و آن را بصورت صفحه وب نشان می دهد .

نمایش سند در یک صفحه وب

1- بر گردید به مرورگر وب که برای محیط کاری از آن استفاده می کنید . از منوی File گزینه Open را انتخاب کنید .
2- از کادر محاوره ای که باز می شود ، سند مورد نظر ایجاد شده را باز کنید .
3- حال در Title bar مرورگر خواهید دید Lesson 1

چک کردن فایل

سند خود را با صفحه وبی که در پیش رو داریدمقایسه کنید، بعد از نگاه کردن نمونه از دکمه Toolbar back استفاده کنید تا مرورگر شما دوباره به این صفحه باز گردد . اگر سند شما با سند نمونه تفاوت داشت دوباره مروری بر مطالبی که وارد کردید داشته باشید . از اشتباهات معمولی که وجود دارد عدم مشاهده Titlebar می باشد . متنی که بین تگ های < title > و < title /> قرار داده شده در Title بار نشان داده نمی شود . از اشتباهات معمول دیگر برای کسانی است که از برنامه های پردازشگر لغات برای Type HTML استفاده می کنند و نمیتوانند آن را در مرورگر باز کنند .در این صورت صفحه آنها پر از کاراکترهای اضافی است .
اگر شما به دنبال یک Editor ساده و ارزان هستید پیشنهاد ما به شما Notepad می باشد

مرور عناوین

1- تگ های HTML چه هستند ؟
2- متن تگ Title در کجا قرار می گیرد؟
3- چه مراحلی را برای ایجاد یک سند HTML باید دنبال کرد ؟
4- چگونه یک تگ توضیح ایجاد می شود ؟
5- چگونه می توانید سند HTML خود را در مرورگر نمایش دهید ؟
sunyboy
09-30-2008, 03:44 AM
درس 2 - ویرایش یک سند HTML

شما اولین سند HTML خود را ایجاد کردید . در این درس خواهید آموخت که چگونه با سرعت ، تغییراتی در سند خود ایجاد کنید و تغییرات را در مرورگر خود ببینید. بعد از آموزش این درس توانائیهای زیر را خواهید داشت :
1- ایجاد یک محیط کاری
2- تغییرات در سند HTML
3- اجرای سند مرورگر برای دیدن تغییرات

ایجاد دوباره محیط کاری

برای تکمیل این درس شما نیاز به ایجاد یک پنجره مرورگر دوم و پنجره Editor متنی که در درس 1 استفاده کردید دارید.
1- یک پنجره جدید از مرورگر. به وسیله انتخاب گزینه New Window از منوی File .
2- از گزینه Open برای باز کردن سند HTML که در قبل ایجاد کردید استفاده کنید.
3- Editor متنی خود را دوباره باز کنید .


انجام تغییرات در سند HTML
1- وارد شدن در پنجره Edit ویرایشگر متنی
2- متن زیر را در درس قبل وارد کنید .
"در اینجا شما با یک سایت آموزشی – آموزش از را دور روبرو هستید
امیدواریم از این سایت لذت ببرید "
نکته :
این متن بالای تگ < body / > و < html / > باشد.
بین < body > و < body / > نوشته می شود .
3- از منوی فایل ، با انتخاب گزینه Save تغییرات خود را ذخیره کنید .






باز کردن سند در مرورگر

به محیط کاری مرورگر خود بازگردید . جایی که فایل قبلی شما نمایش داده شده است . توجه داشته باشید که متون جدیدی که شما وارد کردید، هنوز قابل رویت در پنجره شما نیست . برای دیدن این تغییرات از کلید Refresh استفاده کنید . در این صورت هر تغییری که ایجاد کرده اید را مشاهده می کنید .
ذکر این نکته ضروری است که مرورگر وب از کلیه فاصله ها و کاراکترهای خالی که در سند وارد کردید چشم پوشی می کند .
البته مشخص است که زمانی می رسد که شما نیاز دارید که جاهای خالی در سند خود را مابین پاراگرافها استفاده کنید که در درس 4 این مطلب را می آموزید . شما می توانید فایل خود را در Desktop ذخیره کنید و از همانجا به اجرا در آورید .

آزمایش

سند ایجادی خود را با سند نمونه مقایسه کنید، اگر صفحه شما با نمونه متفاوت بود دوباره مروری بر مطالبی که در ویرایشگر متنی وارد کردید داشته باشید.

مروري بر مطالب

1- چگونه محیط کاری را باز کردید.
2- چه مراحلی را برای ایجاد تغییر دنبال کردید.
3- چگونه تغییرات را در سند خود مشاهده کردید.