آموزش HTML
فصل اول
مقدمه
درس 1 – ایجاد اولین سند HTML
درس 2 – ویرایش یک سند HTML
درس 3 – نشانه گذاری 6 درجه
درس 4 – شکستن پاراگراف
فصل دوم
درس 5 – سبکهای مختلف نوشتاری
درس 6 – < ul >, < ol > لیستها
درس 7 – قالب بندی فایلهای گرافیکی و استاندارد های مورد استفاده در صفحات وب
درس -٧-ب – قرار دادن تصاوير در اسناد
فصل سوم
درس 8 – LINK ( اتصال )
٨-ب – لينك به سايت ديگر
٨-ج اتصال به یک سایت دیگر از اینترنت
٨-د – اتصال به قسمتی از همان صفحه
٨-ه – اتصالات ابر متن و تصویرهای لینک شده
درس 9 – به رديف در آوردن متن
فصل چهارم
درس 10 – کاراکترهای ویژه
درس 11 – لیستهای تعریف
درس 12 – آدرسهای زیر نویس و اتصالات email
درس 13 – وارد کردن یک توده متن بطوریکه از بقیه متن متمایز باشد .
درس 14 – گذاشتن بافت براي صفحه
درس 15 – عدم استفاده از تگهای blink و Marquee
فصل پنجم
درس 16 – زیبا کردن متن
درس 17 – ايجاد خط
درس 18 – Extra Alignment
درس 19 – آرایش در جدول
درس 20 – نقشه های تصویری
فصل ششم
درس 21 – Meta tag
درس 22 – پنجره Target
درس 23 – فریم کردن صفحه
درس 24 – اضافه کردن فرم به صفحات وب
درس ٢٤-ب – بوجود آوردن فرم ها
درس 25 – چند رسانه ای در صفحات شما
25 -ب – اضافه کردن فیلم و صوت -multimedia
درس 25 – ج – قالبهاي صوتي مورد استفاده
………………………………………………………………….……………………………………………………………………..
مقدمه
HTML مخفف Hyper text mark up language ( زبان کد گذاری ابر متن ) می باشد .
HTML در واقع زبان ساخت صفحات وب می باشد . این صفحات می تواند حاوی متنهای آرایش شده ، Link ، تصاویر ، جدول ، Plug – in و … باشند . استقبال زیاد از این زبان و همچنین کمبود کتابهایی که در این زمینه وجود دارند ما را بر آن داشت تا بدون پرداختن به جزئیات بسیار ریز و غیر ضروری ، منبعی ساده و در عین حال کلی ارائه دهیم که مطالعه آن برای خوانندگان خالی از لطف نخواهد بود .
جهت کد نویسی و طراحی صفحات وب نیاز به یک Text Editor ساده مانند Notepad که در تمامی ویندوزها قابل دسترسی می باشد و نیاز به نصب Text Editor جدید نیست .
برای مطالعه ی این دوره ی آموزشی ( آموزش HTML ) نیاز است کاربران محترم آشنایی با اینترنت داشته باشند .
در پایان از کاربران محترم خواهشمند است در صورت داشتن هر گونه انتقاد ، پیشنهاد و ارائه سوالات احتمالی با نویسنده ازسایت www.on5.ir تماس حاصل نمایند .
پیروز و سربلند باشید
علی آخرتی
…………………………………………………………………………………………………………..
درس 1 – ایجاد اولین سند HTML
1 – تگ های HTML
وقتی یک مرورگر وب صفحه ای مانند صفحه فوق که شما مطالعه می کنید را نشان می دهد، صفحه از یک فایل متنی خوانده میشود.
کدهای ویژه اي بکار برده شده اند که با علامات <> نشانه گذاری شده اند. قالب عمومی تگ های HTML بصورت فوق می باشد :
< نام تگ / >رشته کاراکتری < نام تگ >
(البته بعضی تگها بصورت فرد عمل می کنند )
مانند:
<h2>what are HTML tags</h2>
این تگ بیان می کند که مرورگر وب متنی را بصورت زیر نشان میدهد:
What are HTML tags
بعدا در مورد تگهای < Hn > توضیح بیشتری مدهیم.
تذکر :
مرورگر وب نسبت به استفاده از حروف بزرگ یا کوچک حساس نیست.بر خلاف برنامه های کامپیوتر ، اگر شما ایرادی در HTML داشته باشید ، کامپیوتر شما دچار هنگ نمی کند و ایراد بسادگی با رفتن در داخل سند HTML بر طرف میشود. مرورگر شما ، دارای یک سند لغات کوچک است . یکی از جنبه های جذاب HTML ، این است که اگر Browser شما نداند که تگی که در آن نوشته شده چیست ، آن را نادیده می گیرد. برای مثال :
<wiggles><h3>what are HTML tag?</wiggles></h3>
مثلا تگ < H3 > < /H3 > مورد حمایت مرورگر قرار می گیرند . ولی با مرورگرهای فعلی < wiggle /> و < wiggle > حمایت نمی شوند . اگر ما برنامه نویس یک مرورگر وب بودیم عملکردی برای تگ < wiggle > در نظر می گرفتیم .
2 – باز کردن محیط کاری
برای کامل کردن این بحث ، از ابتدا بهتر است که یک پنجره جدید درست کنید. برای اینکه به شما اجازه می دهد که ضمن نگهداری پنجره فعلی ، پنجره ای جدید برای کار خودداشته باشید. شما خیلی راحت می توانید بین پنجره ها و اطلاعات مختلف گردش کنید. مراحل ایجاد محیط کاری را در اینجا بیان می کنیم :
1 – از منوی File مرورگر خود ، گزینه New Window را انتخاب کنید . پنجره دوم ظاهر می شود . اولین پنجره کتاب شماست و پنجره دوم محیط کاری برای تکمیل دروس HTML
2 – فایل متنی خود را باز کنید
3 – ایجاد سند HTMl
یک سند HTML شامل دو قسمت می باشد ( قسمت های تیتر و بدنه )
– قسمت تیتر ، شامل اطلاعاتی در مورد سندی که نشان داده می شود است .
– بدنه ، شامل کلیه مواردی می باشد که در یک صفحه وب به نمایش درآورده می شود .
نمونه یک سند HTML
<! Doc type>
<html><head>
استفاده از مطالبی که توضیح راجع به سند باشد و در صفحه به نمایش در آورده نمی شود.
. . header
< head>
<body>
هر آنچه در صفحه نشان داده می شود
<!–>
</body>
</html>
<!doctype hyml public “// w3 c/dtd html 3.1//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>lesson1</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 می باشد.
و همچنین notepad++ با امکانات بیشتر و راحتی کار با آن.
درس 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 ذخیره کنید و از همانجا اجرا کنید .
درس 3 – نشانه گذاری 6 درجه
نشانه گذاری عنوانگذاری HTML
< hn / >متن شما به این سایز ظاهر می شود < hn >
n عددی است از 1 تا 6
مثال :
در اینجا این نوشته 6 درجه مختلف دارد . درجات این نشانه گذاری مابین درجات 1 تا 6 می باشد و در خارج از این رده تناقض دارید ،
جایگذاری عنوان ها در سند HTML
تذکر : اگر محیط کاری ندارد طبق آدرس قبل ایجاد کنید .
1- محیط کاری باز کنید ( اگر هنوز باز نشده است )
2 – به پنجره ویرایشگر متنی بروید .
3 – پنجره HTML که در درس 2 ایجاد کردید را باز کنید .
4 – این تگها را برای بزرگترنمایش دادن titlebar استفاده می کنیم .
< h1 > lesson1 < / h1 >
5 – مطالب زیر را وارد کنید
درس 3 :
<h2> lesson3 </h2>
</h2> آموزش از راه دور<h2>
</h3> در اینجا با فنون HTML آشنا میشوید<h3>
6 – تغییرات خود را ذخیره کنید .
7 – به پنجره مرور گر باز گردید و سند را باز و Refresh کنید .
درس 4 – شکستن پاراگراف
در درس قبل گفتیم که مرورگر وب شما از تمامی فضاهای خالی که در ویرایشگر در هنگام ایجاد سند وارد نمودید ، نادیده میگیرد. اما هنگامی که مرورگر تگ زیر را ببیند مجبور به ایجاد یک پاراگراف می شود .
< p />این تگ باعث ایجاد پاراگراف جدید می شود
< p > در درسهای بعدی خواهید دید که چرا باید از تگ < p /> نیز استفاده کرد .
همچنین < br > یک خط خالی ایجاد می کند . بنابراین نیازی نیست که تگ برسی شود .
وارد کردن پاراگراف جدید و شکستن خط
1 – باز کردن محیط کاری
2 – رفتن به پنجره ویرایشگر متنی
3 – باز کردن سند (lesson1.html)
4 – برای انتقال دادن جملات از موس استفاده کنید .
شما در این قسمت سایت آموزش از راه دور (Training the web) را دنبال خواهید کرد و در این درس می آموزید که چگونه پاراگراف جدید ایجاد کنید یا فاصله ای ایجاد کنید .
5 – حال به سند html خود باز گردید و این متن را در آنجا منتقل کنید .
6 – تغییرات خود را دخیره کنید .
7 – به مرورگر خود باز گردید .
8 – اگر سند کاری شما باز نیست می توانید از منوی File ، گزینه Open استفاده کنید . (طبق قبل)
9 – پنجره جاری را برای دیدن تغییرات Refresh کنید .
10 – به سند ویرایشگر متنی بروید .
11 – دوباره تگهای زیر را به جملات اضافه کنید .
< h2 / > آموزش از راه دور < h2 >
شما در این قسمت از سایت آموزش از راه دور را دنبال خواهید کرد . < P > در این درس می آموزید که چگونه یک پاراگراف جدید و فاصله ایجاد کنید .
12- تغییرات خود را ذخیره کنید .
13- به مرور گر خود باز گردید و Refresh کنید و نتایج تغییرات را ببینید.
صورتهای دیگر شکستن پاراگراف
از روشهای دیگرایجاد پاراگراف استفاده از خطوط افقی یا تگ hr می باشد .
شما می توانید یک خط راست و مستقیم ایجاد کنید . قالب عمومی html برای ایجاد خط تگ < hr > می باشد .
در آخر تگ < Br > مجبور می شود که متن شکسته شود مانند < p > بدون اینکه نیاز به وارد کردن خط خالی داشته باشید . تگ < br > مانند تگ < p > متن را مجبور به ظاهر شدن در خط جدید می کند . شما از این تگ در هنگام نوشتن اشعار و غیره استفاده می کنید .
