آموزش HTML – مقدماتی
HTML چیست؟
HTML یا HyperText Markup Language، یک زبان برنامهنویسی است که برای ساختاردهی و نمایش محتوا در وب استفاده میشود. HTML در سال ۱۹۹۳ توسط تیمی به رهبری تیم برنرز لی در CERN ابداع شد و به سرعت تبدیل به زبان استاندارد برای ایجاد صفحات وب شد.
HTML یک زبان خطی است که از تگها و ویژگیها برای توصیف ساختار و محتوای یک صفحه وب استفاده میکند. هر تگ یا عنصر HTML دارای یک نام و ویژگیهای خاص است که توسط برنامههای مرورگر خوانده میشود و سپس به صورت مناسب نمایش داده میشود. تگها میتوانند شامل متن، تصویر، لینک، فرمها و سایر المانها باشند.
HTML از ساختار درختی استفاده میکند که شامل عناصر اصلی مانند ریشه، شاخهها و برگها است. هر عنصر میتواند شامل عناصر دیگری باشد و این شکل ساختاری که به عنوان DOM (Document Object Model) شناخته میشود، به برنامههای تحت وب امکان میدهد تا با صفحات HTML تعامل کنند و آنها را تغییر دهند.
برای نمونه، یک صفحه HTML میتواند شامل سرصفحه، بدنه و پاصفحه باشد. سرصفحه شامل عناصری مانند عنوان صفحه، لینکهای استایلها و لینکهای خارجی است. بدنه صفحه شامل محتوای اصلی صفحه است که میتواند شامل عناصری مانند پاراگرافها، تصاویر، جداول و فرمها باشد. پاصفحه شامل اطلاعات زیر صفحه مثل حق کپیرایت و لینکهای تماس است.
با استفاده از HTML، میتوانیم صفحات وب را به صورت پویا و قابل تعامل بسازیم. میتوانیم لینکها، دکمهها و فرمها را اضافه کنیم تا کاربران بتوانند با صفحه تعامل کنند. همچنین، میتوانیم ساختارهای سمنتیکی را استفاده کنیم تا به موتورهای جستجو کمک کنیم تا بهتر محتوای صفحه را شناسایی و نمایش دهند.
از آنجایی که HTML تنها برای ساختاردهی و نمایش محتوا استفاده میشود، برای اضافه کردن استایلها و افکتهای بصری به صفحات وب نیاز به استفاده از CSS (Cascading Style Sheets) داریم. CSS امکان تغییر استایل و ظاهر صفحات HTML را فراهم میکند و با استفاده از توصیفگرها میتوانیم رنگها، فونتها، حاشیهها و سایر ویژگیها را تنظیم کنیم.
HTML همچنین قابلیت استفاده از اسکریپتها را نیز دارد. با استفاده از اسکریپتها میتوانیم عملکرد صفحات را بهبود بخشیم و عملیاتهای پیچیده تری انجام دهیم. اسکریپتهای جاوااسکریپت بسیار رایج هستند و به صورت مستقیم در صفحات HTML قرار میگیرند.
در نهایت، HTML با استفاده از تگها و ویژگیها به برنامههای تحت وب امکان میدهد تا صفحات وب را ایجاد و نمایش دهند. با استفاده از ابزارهای ویرایش HTML مانند ویرایشگرهای متنی و نرمافزارهای ویژوال، میتوانیم صفحات وب را به راحتی ایجاد و ویرایش کنیم و توسط مرورگرها نمایش دهیم.
چرا باید HTML یاد بگیریم؟
HTML یا Hypertext Markup Language زبان مشخصه ای است که برای ساختاردهی و نمایش اطلاعات در وب استفاده می شود. این زبان اصلی برای ایجاد وب سایت ها استفاده می شود و تمام صفحات وب از طریق HTML ایجاد می شوند. یادگیری HTML مهم است زیرا این زبان اولین قدم برای شروع کار در حوزه توسعه وب است. با یادگیری HTML می توانید به طور مستقل صفحات وب ساده ای ایجاد کنید و به تدریج مهارت های پیشرفته تری مانند CSS و جاوااسکریپت را بیاموزید. همچنین، برای کسب و کارها و سازمان ها نیز بسیار مهم است که دانشجویان و کارمندانی با مهارت های HTML داشته باشند تا بتوانند وب سایت ها و صفحات وب را به طور مستقل مدیریت کنند و به طور موثر با تیم توسعه وب همکاری کنند.
سرفصلها و رئوس مطالب مطرح شده در اين مجموعه آموزشی
درس اول: مقدمات HTML
- معرفی HTML
- شروع کار با HTML
- مفهوم تگ یا نشانه
- تگ html
- تگ head
- تگ body
- تگ meta و استفاده از آن برای تعیین Encoding صفحه
- تگ title و مزایا و نقش آن در SEO
- معرفی مفهوم SEO یا Search Engine Optimization
- تگ p برای ایجاد پاراگراف
- معرفی خصوصیت style و مفهوم آن
- معرفی خصوصیات مهم موجود در Style از قبیل font-size, width, height, color, background-color, background-image, font-weight, text
- align, direction و …
- معرفی تگهای Heading و نقش آن در SEO
- معرفی تگ span
- معرفی موجودیت (Entity) ها در HTML از جمله برای فاصله گذاری
- معرفی تگ br
درس دوم: تگ های Text Formatting
- تگ b
- تگ i
- تگ u
- تگ strong و نقش آن در SEO
- تگ em و مفهوم آن
- اشاره ای به وب معنایی
- تگ های big, small, del, ins, mark, sup, sub, blockquote, q , abbr, address, cite, samp, code, kbd, code, pre, var
درس سوم: Link Building
- معرفی تگ a و خصوصیت href برای ایجاد لینک
- انواع آدرس دهی و تفاوت آن ها
- نکات مربوط به SEO
- خصوصیت title
- خصوصیت target
- ایجاد Bookmark با استفاده از تگ a و خصوصیت name
درس چهارم: عکس ها در صفحه وب
- معرفی تگ img و خصوصیت src
- معرفی خصوصیات title و alt
- گذاشتن عکس در لینک و استفاده از خصوصیات مربوط به border
- استفاده از map به منظور ایجاد چند ناحیه قابل کلیک در یک عکس
درس پنجم: مروری بر CSS
- بررسی اشکالات گذاشتن Style به صورت inline
- معرفی تگ style
- مفهوم انتخاب گر یا selector در CSS و بررسی چند selector از قبیل id و class
- معرفی Style به صورت external و معرفی مفهوم CSS و تگ link
درس ششم: لیست ها
- تگ ol و لیست مرتب
- تگ ul و لیست نامرتب
- معرفی خصوصیات type و start
- تعیین عکس به عنوان bullet برای لیست
درس هفتم: جدول
- معرفی تگ table
- استفاده از تگ های tr و td در جدول
- خصوصیات border, align, valign, width, colspan, row
- تگ های colgroup, tfoot, thead, tbody
درس هشتم: تگ div
- معرفی مفهوم و موارد استفاده تگ div
- کنار هم چیدن div ها برای قالب بندی صفحه
- مفهوم position و مختصات left و top
- مفهوم float
- قالب بندی یک صفحه با div
- مفهوم clear
درس نهم: فرم در صفحه وب
- تگ form
- کنترل های فرم برای برنامه نویسی در html4 و html5
- تگ های input با انواع button, text, checkbox, radio, submit , reset, password, number, color, date, range
- تگ textarea
- تگ select و option برای ایجاد Dropdown
- تگ datalist
درس دهم: مدیا در صفحه وب
- معرفی تگ video و source برای گذاشتن ویدیو در صفحه وب
- معرفی تگ audio
- تگ object
- تگ embed
درس یازدهم: تگ های درون head و مفهوم DOCTYPE
- معرفی انواع تگ های meta
- تگ base
- مفهوم DOCTYPE و معرفی انواع نسخه HTML
دیدگاهتان را بنویسید