انجمن سایت کلیدستان


رتبه موضوع:
  • 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش جامع Html برای تازه کاران

آموزش جامع Html برای تازه کاران

#1
با سلام خدمت دوستان عزیز
این آموزش توسط خودم نوشته می شود و کپی پیست نشده.
در صورت داشتن سوال از من و دیگر دوستان پرس و جو نمایید.
با تشکر
------------------------------------------------------------------------------
[font]فهرست:[/font]
بخش اول: توانایی درک مفهوم وب
بخش دوم: توانایی کار با ابزار مفید و فرمتهای شناخته شده در وب
بخش سوم: طراحی صفحات ساده وب به کمک Notead
بخش چهارم: توانایی کار بامتن و قالب بندی
بخش پنجم: توانایی اضافه کردن تصویر به صفحات
بخش ششم: لینک ها در صفحات وب
بخش هفتم: توانایی طرح بندی کامل صفحه وب
بخش هشتم: موضوعات چند رسانه ای (Multimedia Object)
بخش نهم: توانایی کار با نرم افزار Microsoft FrontPage
بخش دهم: ایجاد وب سایت با استفاده از Wisard و template در Frontpage
بخش یازدهم: توانایی طراحی صفحه وب به کمک منوی Insert و امکانات دیگر Frontpage
بخش دوازدهم: انتشار وب سایت
------------------------------------------------------------------------------
[font]بخش اول[/font]
------------------------------------------------------------------------------
[font]آشنایی با تاریخچه طراحی صفحات وب[/font]
طراحی صفحات وب به صورت های مختلفی شروع شد اما عاقبت در سال 1994 کنسرسیوم جهان گستر وب (World Wide Web Consortiom: WBC) تشکیل شد تا آینده وب را استاندارد سازی نماید. این کنسر سیوم توسط کمپانیهایی نظیر Digital Equipment crop ، HP ، IBM ، Microsoft ، Netscape communication ، Sun microsystem و بسیاری دیگر از شرکت ها پشتیبانی شد.
در طول سال 1995 تگ های تازه Html و در آگوست 1995 نگارش اول Internet Explorer میکروسافت ظاهر شدند و اینترنت اکسپلورر به سرعت در نوامبر 1995 به نگارش 2 ارتقاء یافت. در این ایام شرکت Netscape و میکرو سافت در اجرای تگ های جدید به رقابت پرداختند و در سپتامبر 1995 ، Netscape ایده فریم ها در صفحات وب را معرفی کرد .
همچنین در سال 1995 پیشنهاد استاندارد سازی Html داده شد و در ژوئن 1997 نگارش 3.2 از Html نگارش 4.0 در 24 آپریل سال 1998 پیشنهاد شد.

------------------------------------------------------------------------------
[font]اصول مهم در طراحی صفحات وب[/font]
در طراحی وب باید چندین جنبه را در نظر داشت و بطور کلی می توان طراحی وب را به عنوان یک حرفه بصورت زیر تعریف نمود:
طراحی وب یک حرفه چند جانبی است که به تصمیم گیری و تولید وبسایت های وب می انجامد این جنبه ها می تواند شامل توسعه فنی ، ساختار اطلاعاتی ، طراحی بصری و... باشد.
  • کاربران وب و طراحان یکی نیستند ؛ طراح وبسایت همیشه باید سعی کند تا از دید کاربر به سایت نگاه کند اما کاربران نیز یکی نیستند سایت هایی که برای یک کاربر «معمولی ساخته می شود» ممکن است برای یک کاربر ماهر دارای محدودیت باشد. با این همه گفته ها وب سایت بهتر است برای کاربران معمولی طراحی شود اما تفاوتهای کاربران را نیز در نظر داشته باشد.
  • ارتباط شکل بصری یک سایت با رفتارش: در هنگام طراحی صفحات وب باید در نظر داشت که شکل سایت مستقیما با هدف آن در ارتباط باشد.
  • سایت باید بدون نقص اجرا شود: طراحان وب باید محیط ها را بشناسند و محدودیت و مشخصات آنها را در نظر بگیرند به عبارت دیگر همه چیز را از مرورگر ها و پهنای باند تا برنامه نویسی و پروتکل را بشناسند.

سایر مشخصات طراحی صفحات وب را در هنگام مطالعه فصل های آتی یاد خواهید گرفت که بعنوان یک طراح حرفه ای بهتر است همه آنها را رعایت نمایید.
------------------------------------------------------------------------------
[font]مقدمه ای بر Html[/font]
Html ، مخفف (HyperText Markup Lanquage) رایج ترین زبان مورد استفاده در سند های وب می باشد. Html یک زبان نشانه گزار تعمیم یافته استاندارد به صورت زیر می باشد:
Html زا SGML مخفف (Satandard Generalized Markup Lannquage) مشتق شده می باشد. SGML زبان مخصوصی است که برای قالب بندی سند استاندارد پایه گزاری شده است و امکان به اشتراک گذاشتن سند بر روی اینترنت را فراهم می سازد. شما می توانید از Html برای ایجاد اسناد وب که شامل قالب بندی ، لینک ها ، تصاویر و عناصر چند رسانه ای می باشند ، استفاده کنید.
فایلهای Html اسناد متنی ساده Plain Text هستند که دارای پسوند .htm و یا .html می باشند. اگر چه شما می توانید برای مشاهده و ویرایش کد منبع اچ تی ام ال (Html Source Code) از یک ویرایشگر متنی ساده استفاده کنید ، ولی شما برای مشاهده اسناد قالب بندی شده دارای تصاویر و لینک ها و غیره به یک مرور گر وب نیاز خواهید داشت.
کنسر سیوم صفحه جهان گستر وب World Wide Web Consortiom: W3C تکنولوژی های متعاملی (مشخصات ، دستورالعمل ها و رهنمود ها ، نرم افزار ها و ابزار ها) را تولید می کند تا پتانسیلهای بالقوه صفحه وب (مجموعه اطلاعات ، تجارت ارتباطات و مجموعه مفاهیم) را به سرمنزل خود هدایت کند.
وب سایت کنسر سیوم صفحه جهان گستر وب (www.w3.org) می باشد.
هر دو مرورگر Internet Explorer و Netscape Navigator از مشخصات و ویژگیهای Html یعنی (specification) پشتیبانی می کنند.
------------------------------------------------------------------------------
[font]قانونهای گرامری Html[/font]
  • Elements and tags (عناصر و دستورات)

اسناد Html از عناصر مختلفی مانند Head ، Title ، Body ، Table ، P و... تشکیل شده است .
هر عنصر Html، شامل یک تگ شروع (Openning Tag) ، محتوا (Contenet) و یک تگ پایان (Closing Tag)می باشد.
تگ شروع به وسیله نام عنصر که درون براکت های گوشه دار (angleg brackets) قرار داده شده ، مشخص می شود که به صورت <Head> می باشد.
تگ خاتمه به وسیله یک اسلش (/) و نام عنصر که درون براکت های گوشه دار قرار گرفته اند مشخص می شود.که به صورت <Head/> می باشد و محتوا نیز بین تگ های شروع و خاتمه قرار می گیرد تا عنصر را ایجاد کند.کد:
کد پی‌اچ‌پی:
<p>this is my content.</p
هر عنصر می تواند توسط ویژگی های خودش سفارشی شود. ویژگیهای (attributes) مورد نظر در داخل تگ شروع قرار داده می شوند. در مثال زیر، پاراگراف شامل ویژگی تراز بندی (align) است.کد:
کد پی‌اچ‌پی:
<p align="center">this is my content.</p
------------------------------------------------------------------------------
[font]عناصر تو در تو(Nesting Elements)[/font]
عناصر می توانند به صورت تو در تو قرار داده شوند تا جلوه های مورد نظر شما را تامین کنند. در مثال زیر ما عنصر<B> را درون عنصر پاراگراف <p> قرار دادیم در این صورت اثر bold بر روی محتویات بین تگ شروع و خاتمه پیاده خواهد شد.کد:
کد پی‌اچ‌پی:
<p>you can <b>bold</b>your Text.</p
نکته:برای قرار دادن صحیح یک عنصر درون عنصر دیگر ، شما باید مطمئن شوید که عنصر داخلی قبل از تمام شدن عنصر خارجی تمام شود. در مثال زیر ، عنصر داخلی <b> بعد از عنصر خارجی <p> تمام شده است. بنابراین این مثال نادرست است.کد:
کد پی‌اچ‌پی:
<p>you can <b>bold your Text.</p></b
------------------------------------------------------------------------------
[font]خواندن یک سند Html پایه[/font]
هر سند Html به عناصر <Head> (سرآیند یا تیتر) و Body (بدنه) تقسیم می شود. عنصر Head شامل محتوای صفحه Html می باشد.
یک سند Html پایه شامل عناصر زیر می باشد.
<Html>
تگ های Html آغاز و پایان یک سند Html را مشخص می کند.
<head>
تگ های Head آغاز و پایان قسمت سرآیند سند Html را مشخص می کنند.
<Title>
تگ Title درون Head قرار می گیرند و عنوان صفحه Html را مشخص می کنند.
<Body>
تگ های Body آغاز و پایان قسمت بدنه سند Html را مشخص می کنند.
مثال زیر یک سند Html پایه می باشد.کد:
کد پی‌اچ‌پی:
<html>
<
head>
    <
title>Welcome</title>
</
head>
<
body>
<
h1>Welcome to the my home page</h1>
<
p>This is the body of my home page</p>
</
body>
</
html
------------------------------------------------------------------------------
[font]اطلاعات مربوط به version (نگارش) سند Html[/font]
یک سند Html صحیح و معتبر شامل اطلاعات Version می باشد. اطلاعات Version نوع نگارش Html را که در تهیه سند بکار رفته معین می کند.
عنصر Doctype شامل اطلاعات Version ها می باشد و اولین عنصر یک سند Html می باشد. معمولا این عنصر به صورت اتوماتیک توسط ویرایشگر Html تولید می شود. مثال زیر یک سند معتبر Html 4 را نشان می دهد.کد:
کد پی‌اچ‌پی:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional>
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY>
<H1>Welcome to My Home Page</H1>
<P>This is the body of my home page.</P>
</BODY>
</HTML> 
------------------------------------------------------------------------------
[font]ویرایشگر های Html[/font]
شما می توانید از یک ویرایشگر متن ساده (Plain Text Editor) مانند Notepad برای نوشتن و ویرایش اسناد Html خود استفاده کنید که کار شما را ساده تر کنند.
به طور کلی دو نوع ویرایشگر Html وجود دارد:
1- ویرایشگر های W Y SI W Y G که مخفف (What-you-see-Is-What-you-Get)
این ویرایشگر ها به کاربران تازه کار امکان می دهند تا به طور سریع اسناد Html را ایجاد کرده و آنها را ویرایش کنند. در این ویرایشگرها شما بجای اینکه با کد مرجع Html کار کنید با لی آت (Layout) صفحه کار می کنید.
بعضی از ویرایشگر ها تمپلیت هایی (الگوهایی) را تدارک دیده اند که شما بتوانید به راحتی صفحه مورد نظر خود را ایجاد کنید.
زمانیکه ویرایشگر های WYSIWYG کد مرجع Html را برای شما ایجاد می کنند ، این کد ها ممکن است مشکلاتی را برای سند Html شما ایجاد کنند. به همین دلیل ویرایشگر های معروف و رایج به شما امکان می دهند مستقیما کد مرجع Html را ویرایش کنید.
مشهور ترین ویرایشگر های WYSIWYG عبارتند از:
Adobe Golive ، Adobe Pagemill ، Macromedia Dreamwaver ، Microsoft Front Page و Netobjects Fusion.
2- ویرایشگر های Tag-based
یکی از هدف های عمده ویرایشگر های Tag-based کمک به شما در نوشتن و ویرایش کد مرجع Html می باشد. توسط ویرایشگر های Tag-based شما با کد مرجع Html کار می کنید. بر خلاف ویرایشگر های متن ساده ، ویرایشگر های Tag- based کد های رنگی تدارک دیده اند که به خواناتر شدن سند شما کمک می کند.
برای استفاده از این ویرایشگر ها شما باید از طریق لی آت یک صفحه را توسط Html بلد باشید و کد های Html را نیز درک کنید.
ویرایشگر های Tag-based دارای ابزارهایی می باشند که به شما کمک می کنند تا تگ را سریعا وارد کنید. برای مثال تگ هایی که غالبا استفاده می شوند دارای آیکونهایی می باشند که شما می توانید با کلیک کردن آنها را اضافه کنید.همچنین برای تگ های پیچیده و مشکل ، ویزارد ها و کادر های محاوره ای وجود دارند که به شما در اضافه کردن این تگ با ویژگی های مورد نظرتان کمک می می کنند.
مشهور ترین ویرایشگر Tag-based ویرایشگر های Macromedia Homesite ، HotDog Professional و Web Editor می باشند.
[font]با تشکر های خود ما را در ادامه یاری کنید.[/font]
پاسخ
 سپاس شده توسط admin


پیام‌های این موضوع
آموزش جامع Html برای تازه کاران - توسط ghasemy50 - ۱۳۹۳/۰۱/۰۷, ۰۶:۲۰ ق.ظ
RE: آموزش جامع Html برای تازه کاران - توسط ghasemy50 - ۱۳۹۳/۰۱/۰۷, ۰۷:۴۶ ب.ظ
RE: آموزش جامع Html برای تازه کاران - توسط ghasemy50 - ۱۳۹۳/۰۱/۰۸, ۰۹:۳۵ ق.ظ

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان