آموزش طراحی وب

HTML چیست؟

آن چیزی که شما هنگام بازدید از یک صفحه وب می بینید، نتیجه تفسیر مرورگر شما از کد های html است.

HTML چیست؟

فصل اول (معرفی کامل HTML4)

جلسه اول ( HTML چیست؟ )

مقدمه

صفحات اینترنتی شامل اطلاعاتی است که حاوی متن ، تصویر ، ویدئو ، صوت و… می باشد . این محتوا توسط سه لایه به کاربر نمایش داده می شود .

سه لایه به شرح زیر است :

–         لایه محتوا (Content ، به وسیله  HTML ایجاد می شود .)

–         لایه نمایش (Presentation  ، به وسیله Css ایجاد می شود .)

–         لایه رفتار (Behavior  ، به وسیله  JavaScript ایجاد می شود.)

لایه محتوا

 این لایه همیشه وجود دارد ، حاوی محتوایی می باشد که سازنده قصد دارد آن را به کاربر نمایش دهد . این محتوا بصورت کدهای اچ تی ام ال مابین دو تگ <html></html> قرار میگیرد .

لایه نمایش

 وظیفه این لایه تبدیل کدهای اچ تی ام ال به تصاویر و متونی است که کاربر بتواند بصورت شکیل آن را مشاهده نماید ؛ کدهای اچ تی ام ال توسط انواع مرورگرها ترجمه می شوند و به تصاویر و متونی تبدیل می شود که به وضوح برای کاربران قابل نمایش می باشد .

 لایه رفتار

در این لایه برخی از رفتارهایی که توسط جاوااسکریپت کدنویسی شده است نمایش داده می شود . به عنوان مثال : اسلایدر جهت نمایش بنرهای تبلیغاتی در صفحه وب . کدهای جاوا اسکریپت بین دو تگ <script type=”text/javascript”></script> قرار میگیرد.

HTML چیست؟

عبارت HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است.  اچ تی ام ال زبان استاندارد طراحی صفحات وب است . آن چیزی که شما هنگام بازدید از یک صفحه وب می بینید، نتیجه تفسیر مرورگر شما از کد های html است. برای دیدن کدهای یک صفحه  به سادگی می توانید بروی view از منوی بالای مرورگر کلیک کنید، و گزینه source را انتخاب کنید.

عموما تمامی زبانهای برنامه نویسی تحت وب، به نوعی وابسته به اچ تی ام ال می باشند. بعنوان مثال،PHP، جاوا اسکریپت و برنامه نویسی دات نت ، علاوه بر داشتن قوانین و استانداردهای خود، از  HTML کمک می گیرند بطوریکه کدهای نوشته شده در قالب خاصی، در بین کدهای اچ تی ام ال قرار داده می شود.

در یک صفحه HTML می توان از انواع عناصر از قبیل متن ، تیتر ، عکس ، جدول  و …  استفاده نمود ، که برای هر عنصر باید از تگ  <> … </> مربوط به آن استفاده کرد.

به عنوان مثال : برای نمایش تیتر اصلی یک متن از تگ <H1> …… </H1> استفاده می نماییم .

چگونه یک صفحه  HTML ایجاد کنیم؟

یک سند اچ‌تی‌ام‌ال، یک پرونده ی مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را برای کاربر نمایان‌سازی (Render) می‌کنند.

جهت نوشتن کدهای اچ تی ام ال شما می توانید از HTML editor software های متفاوت استفاده نمایید به عنوان مثال :
NotePad , NotePad++ , Adobe Dreamweaver , Microsoft Expression Web , CoffeeCup HTML Editor , ، Nuspher PhpED و … .

ما در این مقاله از Notepad++ استفاده می نماییم .  پس از نصب نرم افزار آن را باز کرده از منوی Encoding گزینه  Convert to UTF_8 را (جهت نمایش صحیح کاراکترهای فارسی) انتخاب نمایید ، سپس به منوی Language رفته و گزینه  H و سپس  HTML را انتخاب کنید ، تا تنظیمات مربوطه صورت پذیرد .

سپس کدهای مورد نظرتون رو داخل این فایل بنویسید (در فصل های آینده با تمامی کدها آشنا خواهید شد) و فایل رو با پسوند  html. ذخیره کنید. حالا شما یک صفحه ی وب ایجاد کردید که میتونید با دابل کلیک با مرورگر ها نتیجه رو ببینید.

نکته : نمایش کدها و شکل خروجی آنها بعضا در مرورگرهای مختلف یکسان نمی باشد و یکی از هنرهای برنامه نویسان وب ، نوشتن کدهایی با اجرای یکسان در مرورگر های مختلف است که در این سلسله آموزش های طراحی وب سایت این امر آموزش داده می شود.

تهیه شده در مدرسه آنلاین ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۱

  • با سلام
    من سایت شما را ازطریق یکی از دوستان پیدا کردم که به نظرم جالب امده و اگه بتونم نحوه برنامه نویسی به زبان اج تی ام ال را یاد بگیرم بسیار از شما سپاسگذارم

    • سلام دوست عزیز
      اگر تمامی جلسات رو به ترتیب مطالعه کنید حتما کدنویسی با html رو یاد میگیرید.
      موفق و پاینده باشید .

  • با سلام
    ممنون از شما واقعا وبسایت عالی و مفیدی دارید و لنگه ی انجارو تا به حال تو سایتای فارسی ندیدم
    امیدوارم که به این زودی ها همه ی آموزش هاتون رو پولی نکنید یا اگر میکنید ارزون باشن

    • من با سیستم رزبلاگ کار نکردم دوست عزیز و از کدهای این سیستم خبر ندارم .

  • سلام . ممنون از سایت خوب و مفیدتان. من زبان برنامه نویسی یا گرافیک چیزی بلد نیستم و تازه شروع کردم. انشااله که سایتتون اونقدر روان تدریس کنه تا بنده مبتدی بتونم کامل درک کنم. ممنون از زحمات شما.

  • سلام ‘ مدتیست که به دنبال منابع خوب برای یادگیری طراحی وب هستم و سایت شما یکی از بهترین هاست و به شدت علاقه مند امیدوارم از مطالبتون خوب استفاده کنم’

  • سلام آقای همت یار من یک سایت با html و flash با مدیریت وردپرس برای تقدیم کردن به کسی طراحی کردم نظرتون برام مهمه لطفا بیایید و نظر بذارید و هر پیشنهادی که میتونه به بهتر شدنش کمک کنه حتما عنوان کنید.خیلی ممنون
    http://www.nicemaryam.ir

  • سلام
    من چند جلسه از آموزش ها رو خوندم کاملا مفید و اصولی بودن و خیلی ساده و رون توضیح دادید
    اما اگر امکانش بود کل جلسات رو در قالب یه کتاب به صورت pdf قرار بدید خیلی بیشتر ممنون میشدم

  • عالی بود. با این که هیچ پیش زمینه ای در این مورد نداشتم کاملا برام راحت و قابل فهم بود. آفرین به این کلام رساتون.

    • سلام

      خواهش میکنم دوست عزیز ، خوشحالم که تونستیم به شما دوستان کمکی کرده باشیم.

      موفق و پاینده باشید

  • با سلام و احترام
    از مطالب مفید و خوبتون ممنونم.
    لطفا به این رویه ادامه بدید و بیشتر مطالب بذارید.

    تشکر

  • سلام
    چرا نمیتونم از منوی encoding آیتم Convert to UTF_8 رو انتخاب کنم ؟
    با تشکر
    قاسمی

    • سلام دوست عزیز

      نباید مشکلی وجود داشته باشه. دقت کنید.

      موفق باشید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین