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

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

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. ذخیره کنید. حالا شما یک صفحه ی وب ایجاد کردید که میتونید با دابل کلیک با مرورگر ها نتیجه رو ببینید.

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

تهیه شده در مدرسه مجازی ایرانیان

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • sara

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

    • میترا رحیمی

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

  • حسین

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

  • مهدی رحیمی

    با سلام خسته نباشید بنده میخوام تو وبلاگم که کسی ثبت نام میکنه و پست میزاره میخوام عکس آواتارش هم تو پست بیاد
    اگه همچین کدی هست لطفا به ایمیلم ارسال کنید goldstare156@yahoo.com
    ممنون

    • میترا رحیمی

      سلام دوست عزیز
      سیستم وبلاگتون چیه ؟

  • مهدی رحیمی

    رزبلاگ هست

    • میترا رحیمی

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

  • مهران یاری

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

  • hadisan majdi

    نرم افزار مانند ادوبی و ایکسپرشن آدم تنبل می کنند.

  • ali rezaii

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

  • نازمحمد گری

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

  • Sina

    سلام
    شما فکر نمیکنید که دیگه اچ تی ام ال کاربرد زیادی نداره؟

  • مهدی

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

  • سید محسن

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

  • mehrnaz

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

    • میترا رحیمی

      سلام

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

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

  • طراحی سایت

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

    تشکر

  • ghasemi

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

    • میترا رحیمی

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

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

      موفق باشید

  • payam

    سایت خوبیه، ظاهرا کامل به نظر میاد. مرسی

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟