-
مدیر بازنشسته
آموزش گام به گام Html
HTML مخفف Hyper text mark up language ( زبان کد گذاری ابر متن ) می باشد .
HTML در واقع زبان ساخت صفحات وب می باشد . این صفحات می تواند حاوی متنهای آرایش شده ، Link ، تصاویر ، جدول ، Plug – in و ... باشند . استقبال زیاد از این زبان و همچنین کمبود کتابهایی که در این زمینه وجود دارند ما را بر آن داشت تا بدون پرداختن به جزئیات بسیار ریز و غیر ضروری ، منبعی ساده و در عین حال کلی ارائه دهیم که مطالعه آن برای خوانندگان خالی از لطف نخواهد بود .
جهت کد نویسی و طراحی صفحات وب نیاز به یک Text Editor ساده مانند Notepad که در تمامی ویندوزها قابل دسترسی می باشد و نیاز به نصب Text Editor جدید نیست .
برای مطالعه ی این دوره ی آموزشی نیاز است کاربران محترم آشنایی با اینترنت داشته باشند .
-
-
مدیر بازنشسته
-
-
مدیر بازنشسته
ویرایش یک سند 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- چگونه تغییرات را در سند خود مشاهده کردید.
تمرین :
با توجه به مطالبی که در آموزش دیدید سندی که در درس قبل ایجاد کردید تغییر داده و سپس تغییرات خود را مشاهده کنید .
-
-
مدیر بازنشسته
نشانه گذاری 6 درجه
اهداف این درس :
1- شناسایی درجات مختلفی از نشانه گذاری در HTML و تگهای مربوط به آن
2- گذاشتن درجات مختلف نشانه گذاری در سند و مشاهده تغییرات در مرورگر
شروع درس
نشانه گذاری عنوانگذاری HTML
< hn / > متن شما به این سایز ظاهر می شود < hn >
n عددی است از 1 تا 6
مثال
در اینجا این نوشته 6 درجه مختلف دارد . درجات این نشانه گذاری مابین درجات 1 تا 6 می باشد و در خارج از این رده تناقض دارید ،
جایگذاری عنوان ها در سند HTML
تذکر : اگر محیط کاری ندارد طبق آدرس قبل ایجاد کنید .
1- محیط کاری باز کنید ( اگر هنوز باز نشده است )
2- به پنجره ویرایشگر متنی بروید .
3- پنجره HTML که در درس 2 ایجاد کردید را باز کنید .
4- این تگها را برای بزرگترنمایش دادن titlebar استفاده می کنیم .
< h1 > lesson1 < / h1 >
5- مطالب زیر را وارد کنید
6- تغییرات خود را ذخیره کنید .
7- به پنجره مرور گر باز گردید و سند را باز و Refresh کنید .
آزمایش
سند خود را با سند نمونه مقایسه کنید اگر بعضی ازنشانه گذاری ها اعمال نشده بود دوباره تگهای مربوط را اصلاح کنید .
از اشتباهات معمولی که در هنگام کار عملی در این درس پیش می آید عدم استفاده از در نشانه گذاریها است .
< h1 > lesson1 < h1 > علامت اسلش فراموش شده است اگر / در تگ فراموش شود . مرور گر آن متن را با این درجه نشان نمی دهد و برای اصلاح دوباره باید به سند باز گردید .
مروری بر مطالب
1- درجه های مختلف نشانه گذاری حروف چه هستند ؟
2- تگهای مرتبط با این درجات نشانه گذاری چه هستند ؟
3- چه مراحلی را بایدبرای ایجاد متون با سایزهای مختلف دنبال کنید .
4- اگر / را فراموش کردید چه باید کنید ؟
تمرین :
در سند HTML خود از 3 درجه نشانه گذاری استفاده کنید.
-
-
مدیر بازنشسته
شکستن پاراگراف
اهداف این درس
1- شناختن تگهایی که ایجاد پاراگراف می کند .
2- کپی کردن متن از یک صفحه وب و انتقال آن به سند دیگر
3- شکستن پاراگرافها در سند HTML خود و مشاهده تغییرات
شروع درس :
در درس قبل گفتیم که مرورگر وب شما از تمامی فضاهای خالی که در ویرایشگر در هنگام ایجاد سند وارد نمودید ، چشم پوشی می کند . اما هنگامی که مرورگر تگ زیر را مشاهده کند مجبور به ایجاد یک پاراگراف می شود .
< 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 > متن را مجبور به ظاهر شدن در خط جدید می کند . شما از این تگ در هنگام نوشتن اشعار و غیره استفاده می کنید .
مروری بر مطالب
1- تگهای HTML برای شکستن خط و ایجاد پاراگراف چه هستند ؟
2- چه مراحلی را برای ایجاد تگها دنبال خواهید کرد ؟
3- چگونه می توانید تغییرات خود را ببینید ؟
تمرین
از تگهای < Br > < hr > < p > در سند خود استفاده کنید .
-
-
مدیر بازنشسته
سبکهای مختلف نوشتاری
< b >< I >< tt >
HTML می تواند به مرورگر بفهماند که قسمتهایي از متن را بصورت ضخیم و یا ایتالیک درآورد .
اهداف این درس
بعد از آموزش این درس
1- تگهای ضخیم و یا ایتالیک و .... به شما شناسانده خواهد شد
2- متون خود را در سند HTML به سبک های مختلف وارد کنید و سپس آن را در مرورگر مشاهده کنید .
شروع درس
HTML طرحهای مختلفی را در ارتباط با سبک های مختلف نوشتاری به شما می دهد، به مثالهای زیر توجه کنید .
HTMLRESULT < b > this is bold - < /b > < I > this is italic < /I > < tt > this is typewriter < /tt > this is bold - this is italic this is typewriter < I >< b >this is bold and italic< /b > < /I > < b >< I > and so is this < /I >< /b > this is bold and italic and so is this Blah < h2 >< I >< new >< /I > and < tt >improved Blah Blah < /tt >< /h2 > blah blah Blah and improved Blah Blah
blah blah
سبک های مختلف متن را در سند HTML خود وارد کنید .
اگر محیط کاری ندارید باز کنید مراحل زیر را دنبال کنید .
1- محیط کاری خود را دوباره باز کنید .
2- سند خود را که به نام lesson1.html ذخیره کردید باز کنید .
3- لغت آموزش را از درون آن پیدا کنید حال می خواهیم آن را ضمیمه کنیم .
4- تگ مرتبط با عمل فوق را وارد کنید . < b / > آموزش از راه دور < b >
5- حالا پاراگراف دوم را با صورت ضخیم و ایتالیک درآورید.
برای اینکه تاکید بیشتری روی قسمتی از متن داشته باشید بوسیله تگ های < I > < /b > < b > می توانید این تاکید را انجام دهید .
6-برای اشاره به قسمت خاصی از متن مثل نام نویسنده ، می توانید از تگ
< tt > < / tt > استفاده کنید .
7- تغییرات خود را ذخیره کنید و مجددا مرورگر خود را باز کنید .
آزمایش
عملیات خود را تست کنید
مروری بر مطالب
1- تگهای سبک های نوشتاری چه هستند ؟
2- انواع تگهای مختلف برای سبکهای مختلف
3- مراحلی که برای ایجاد این سبکهای متنی دنبال می کنید چیست ؟
تمرین
1- از تگهای bold و italic و دیگر تگها در جملات خود استفاده کنید .
-
-
مدیر بازنشسته
-
-
مدیر بازنشسته
قالب بندی فایلهای گرافیکی و استاندارد های مورد استفاده در صفحات وب
در دهه های گذشته در صفحات وب فقط از متن استفاده می شد ، ولی امروزه از تصاویر گرافیکی استفاده می شود که در اینصورت پیام شما بسیار آموزنده خواهد بود .
اهداف این درس
1- شناسایی فایلهای گرافیکی شبکه www
2- بحث کلیدی در مورد استفاده از گرافیک در سندهای وب
3- انتقال فایل گرافیکی از وب به کامپیوتر شخصی خود
4- استفاده از قالب صحیح برای تصاویر در صفحات وب
شروع درس
همانطور كه مي دانيد تعداد بسیار زیادی از قالب بندیهای گرافیکی وجود دارند .مثل pict hif : tiff png حالتی که مرورگر وب گرافیکها را در شکل ، HTML نشان می دهد بیان کننده محل فایل گرافیکی در یک قالب دستوراتی است که می تواند توسط انواع مختلفی از کامپیوترها تفسیر شود .
برای مثال :
هنگامی که اطلاعات در آن قالب به کامپیوتر مکینتاش می رسد مرورگر آن را در قالب دستور برای مکینتاش نشان می دهد و برای کامپیوترهای معمولی وضع به همین منوال است.gif اطلاعات تصویر را فشرده می کند ( کاهش حجم فایل) و اطلاعات را به کدهای دودوئی قابل ارسال برروی اینترنت تبدیل می کند. gif فشرده موثر ترین فایل گرافیکی است که ناحیه یکپارچه رنگی متصل به حجمی دارد و فشردگی آن قابل تنظیم است . هنگامی که رنگ به طور متوالی در یک جهت افقی باشد فایلهای gif خاصیت شفافی دارند ، بنابراین فایلهای gif با درجه خلاصه سازی ذخیره می شوند و در صفحات وبی که از gif برای تصاویر استفاده شده ، تصاویر به زودی دیده می شوند. ابتدا تصوير به صورت تیره ظاهر مي شود تا در نهايت تصویر نهایی ظاهر گردد .
از فرصتهای دیگر تصویر jpg می باشد که مخفف کلمات Joint photo graphic expert group در اوایل شروع تصاویر jpeg در صفحه نشان داده نمی شدند و در پنجره ای جداگانه به نمایش درمی آمدند . اما مرورگرهای امروزی از فایلهای jpeg پشتیبانی می کنند و آنها را در صفحه نمایش می دهند .
اگر تنوع رنگ در فاصله کمی زیاد باشد ، برای فایلهای با قالب jpeg می توان به درجه خلاصه سازی تعریف کرد. فایلهای jpeg قابلیت تحرک و انیمیشن سازی ندارند .
را با پسوند gif ذخیره کنند . امروزه برنامه های image ready از شرکت adobe طرح مشخصی برای ایجاد تصاویر گرافیکی دارند .
نکاتی که هنگام استفاده از تصاویر گرافیکی باید در نظر گرفت . هنگامی که در صفحه وب از عکس استفاده می کنید، به نکات زیر توجه کنید .
• تصاویر بزرگ و بیشماری که کل صفحه کامپیوتر را در بر می گیرد برای کاربری که در انتظار ظاهر شدن آن عکس می باشد ، خسته کننده می شود . پیشنهاد این است که کل سایز عکس را بیشتر از 100kb نکنید .
• همه کاربران از مانیتور 21 اینچ استفاده نمی کنند طول تصاویر بکار برده شده را بیشتر از pix 480 و عرض آنها را بیشتر از pix 300 نکنید که کاربر مجبور می شود برای دیدن تمام عکس از Scroll استفاده کند .
• شیب رنگ برای فایلهای gif ممکن است زیاد به نظر برسد اما فایلهای gif نمی توانند این ناحیه رنگ یکپارچه را فشرده کنند . بعضی برنامه های گرافیکی این اختیار را به شما می دهند كه ، هنگام برگردان فایل به gif ، لبه های تصویر هموار شود و از اختلالات تصویر کاسته شود .
بهتر است اول تصاویر کوچک استفاده شود و سپس این تصاویر به تصاویر با سایز بزرگتر اتصال پیدا کنند .
یک تصویر خاص که شما در صفحه اینترنت می بینید ، ممکن است هر بار در یک بازه زمانی ، برای شما ظاهر شود .
• بیشتراوقات ، مرورگر تصاویر را از hard disk شما cash می کنند. یعنی هنگامی که یک عکس بارگزاری می شود ،از hard شما آورده می شوند . شما ممکن است که صفحه زیبا طراحی کنید که عکسهای بزرگی در آن بار گزاری شوند اما برای یک مودم با سرعت کم و شبکه شلوغ کار مشقت باری است .
مروری بر مطالب
1- دو قالب معمول مورد استفاده تصاویر در صفحات وب چیست ؟
2- چگونه یک تصویر گرافیکی در کامپیوترهای مختلف نشان داده می شود ؟
3- نکاتی که هنگام استفاده از تصاویر وب باید در نظر گرفت چیست ؟
-
-
مدیر بازنشسته
-
-
مدیر بازنشسته
-
کلمات کلیدی این موضوع
مجوز های ارسال و ویرایش
- شما نمیتوانید موضوع جدیدی ارسال کنید
- شما امکان ارسال پاسخ را ندارید
- شما نمیتوانید فایل پیوست کنید.
- شما نمیتوانید پست های خود را ویرایش کنید
-
مشاهده قوانین
انجمن