آموزش مقدماتی زبان برنامه نویسی HTML

حمایت از سایت

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

شماره کارت بانک سپه

6273-8111-2342-9109

سرفصل مطالب

زبانهای برنامه نویسی هرکدام یک کلید برای حل مشکلات مختلف هستن. زبان HTML مورد استفاده در تمامی صفحات وب میباشد. چیزی که HTML از زبان های دیگر متمایز میکنه ساختار ساده و تگ اون هست. به نظر من هر شخصی با کمی حوصله میتونه HTML یاد بگیره. چون نه حلقه داریم ،نه سینتکس های پیچیده!

HTML کجا بدرد میخوره؟ و تفاوتش با CSS چیه؟

اگر بخوایم یک ساختمان بسازیم؛ HTML ساختار اسکلت و سیمانی هست. CSS نمای بیرونی و گچ های داخل ساختمانه؛ تزئینات بحساب میاد.

HTML مخفف چیست؟

HyperText Markup Language. همانطور که از نامش معلومه یک زبان MarkUp هست.

HTML چیست؟

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

کدهای PHP کجا نوشته میشن؟

با اینکه HTML یک زبان ساده Block به حساب میاد ولی PHP با اون قدرتش داخل HTML نوشته میشه. با تگ <?php —-//////—– ?> البته PHP یک زبان سرور ساید هست، یعنی کدهای PHP توسط سرور وبسایت پراسس میشه و خروجی در مرورگر کاربر نمایش داده میشه. در مقابل HTML کلاینت ساید یا سمت کاربر به حساب میاد. چون شما فقط با مرورگر نیز میتونید کدهای HTML اجرا کنید. برای آشنایی مقدماتی با PHP به این پست مراجعه کنید.

پسوند فایل های HTML

فایلهای HTML با پسوند *.htm یا *.html شناخته میشن. نوع *.html بیشتر مورد استفاده قراره میگیره.اختار پایه HTML

هر تگ که شروع شود باید بسته شود! (بجز چند تگ استثنا) مثلاً تگ <html> که اولین تگ هر داکیومنت هست با </html> بسته میشه. دقت کنید تگ دوم یک بک اسلش هم همراهش داره.
تگ </br> یکی از استثناها هست. با استفاده از این تگ میشه خطو شکست. همانند اینتر زدن داخل Microsoft Word!

Famous HTML Tags

  • <html></html>
  • <head></head>
  • <title></title>
  • <link >
  • <meta>
  • <body></body>
  • <p></p> <h1></h1> <h2></h2> …. <h6></h6>
  • <div></div>
  • <header></header> از HTML5.x تعریف شده
  • <main></main>
  • <aside></aside>
  • <footer></footer>

ساختار زیر یک اصل در این زبانه، کدهای دیگر داخل اینها قرار میگیره.

کد HTML ساده

پدیده HTML 5.x و استفاده از تگ Div

دوران دانشگاه استاد ما هنگام تدریس برای تقسیم کردن Main content و Sidebar و Footer از تگ Div استفاده میکرد! قبل از انتشار HTML 5.x ساختار اینطور بود، برای سایدبار و فوتر و.. تگ مخصوص تعریف نشده بود! هر برنامه نویس با سلیقه خودش تگ Div تعیین میکرد بعد یک ID مخصوص بهش اختصاص میداد با نامی دلخواه. با انتشار HTML 5.x دولوپرهای این زبان خودشون محل های پیشفرض تعریف کردن تا کد برای برنامه نویس بعدی قابل فهم و پراسس کد نوشتن ساده تر بشه. کد کمتر وبسایت سبکتر!

حال برای Header تگ header , قسمت اصلی محتوا تگ Main , قسمت Sidebar تگ aside , و بخش Footer تگ Footer بصورت پیشفرض تعریف شده و نیازی نیست شما همشو از اول بسازید! 🙂

سادگی تگ ها

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

تگ HTML پایه هست و همه کدها داخل اون نوشته میشه. 2 تگ مهم بعدی Head و Body بحساب میاد. Head که معلومه سر صفحه هست البته داخل این تگ کدهای بسیاری قرار میگیره. Body هم بدنه! بسیار ساده! تگ P هم مخفف Paragraph هست. تگ های H1 تا H6 مخفف Heading هستن. در همین پست عنوان زیر مجموعه ها H2 و متن داخلشون P هست.

چیدمان درختی کدهای برنامه نویسی

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

هدف پست “آموزش مقدماتی زبان برنامه نویسی HTML”

این پست یک آموزش دقیق HTML نیست بلکه یک آشنایی سریع و کوتاه برای شماست تا تصمیم به یادگیری بگیرید. شروع آموزش با یک پست بلند و توضیحات عجیب همیشه باعث فرار آموزنده میشه. تنها هدف من نشان دادن سادگی زبان HTML. در شرایط فعلی حتی با نصب یک برنامه ساده اندروید هم میتونید یاد بگیرید. خوشبختانه آموزش خیلی پیشرفت کرده و در دسترس تر از هر زمان دیگر هست! 🙂

یک فکر متفاوت میتواند دنیا را تغییر دهد

حمایت از سایت

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

شماره کارت بانک سپه

6273-8111-2342-9109