فیلم آموزش HTML

عناصر در HTML

• تگ چیست؟ در این قسمت از فیلم آموزش HTML به تعریف تگ در HTML پرداخته ایم، در واقع تگ یا عنصر، یک کلمه کلیدی است که مابین علامت بزرگتر (>) و کوچکتر (>) قرار می گیرد. بطور معمول تمام تگ ها در HTML یک قسمت باز و یک قسمت بسته دارند. تگ باز را همان تگ شروع و تگ بسته را تگ پایان نیز می نامند. 
• عنصر تهی: عنصری که فقط تگ باز دارد را تگ تهی می نامیم، از تگ های تهی می توان BR و تگ HR را نام برد.

خصوصیت ها در HTML

• ویژگی (Attribute) چیست: در این فیلم آموزشی به توضیح درباره ویژگی ها یا همان Attributeها پرداخته ایم. در واقع ویژگی ها اطلاعات بیشتری را در مورد یک عنصر در اختیار قرار میدهد.
• بعنوان مثال در تگ a با استفاده از ویژگی Href مقصد لینک را مشخص می کنیم و یا در تگ img برای مشخص کردن آدرس عکس از ویژگی Src استفاده می شود.

عنوان یا سرتیتر در HTML

• تگ H1 تا H6: در این قسمت از آموزش HTML، با تگ های H1 تا H6 برای ایجاد عنوان ها آشنا می شویم. به ترتیب H1 اندازه ی بزرگتر و H6 اندازه کوچکتری دارد
• بهینه سازی سایت: استفاده مناسب از تگ های H1 تا H6 برای قرار گرفتن در صفحه نخست گوگل
• تگ Hr: استفاده مناسب از تگ Hr برای ایجاد خطوط افقی و تقسیم بندی یک متن  

پاراگراف ها در HTML

•  تگ p: با استفاده از تگ p می توانید یک پاراگراف دلخواه را در صفحه HTML وارد کنید.
• تگ br: همان طور که می دانید تگ p یک عنصر Block است و تمام طول یک سطر را اشغال می کند. اما اگر در حین تایپ کردن یک پاراگراف نیاز باشد که نیمی از یک خط را تایپ کنیم و سپس به ابتدای خط بعد برویم، در اینجاست که تگ br به ما کمک خواهد کرد. در ضمن br مخفف Break است.
• تگ pre: همان طور که می دانید فاصله ها و Enterهای اضافی در بین یک پاراگراف بصورت اتوماتیک حذف خواهد شد، اما در بعضی از مواقع مثل نمایش اشعار نیاز هست که فاصله های حفظ شود، بنابراین در این حالت می توانیم از تگ pre که مخفف PreFormated هست استفاده کنیم و به این ترتیب فاصله ها و Enterهای اضافی بین متن را می توانیم در خروجی نمایش دهیم.

فرمت دهی در HTML

•  تگ Strong: با استفاده از این تگ می توان قسمتی از متن را بصورت ضخیم یا Bold شده نمایش داد.
• اهمیت تگ Strong از نظر Google: با توجه به کلمه کلیدی در نظر گرفته شده برای صفحه، باید سعی کنیم چند بار آنرا با استفاده از تگ Strong تکرار کنیم.
• تگ i: با استفاده از این تگ می توان متن را بصورت italic یا مورب نمایش داد.

فونت ها در HTML

•  تگ Font: این تگ جزو تگ هایی است که در نسخه های جدید HTML منسوخ شده و البته برای تنظیم فونت و اندازه آن استفاده می شود.
• استفاده از CSS برای تنظیم فونت: خصوصیت های CSS جایگزین مناسبی است برای تگ Font و در این قسمت با خصوصیت های Font-family و font-size و ... آشنا خواهید شد.

لینک ها در HTML

•  تگ a: برای ایجاد لینک ها در صفحه می توان از تگ a استفاده کرد.
• ویژگی target: با استفاده از این ویژگی می توانید نحوه باز شدن مقصد لینک را مشخص کنید.
• ویژگی id: ویژگی id که مخفف identity است یک شناسه منحصر بفرد برای عنصر تعریف می کند و از طریق آن می توانیم به عنصر دسترسی داشته باشیم و محتوا و استایل آنرا از جاوااسکریبت و CSS تغییر دهیم.

تصاویر در HTML

• تگ img: با استفاده از این تگ می توان تصاویر را در صفحات وب نمایش داد.
• ویژگی Src: با استفاده از این ویژگی می توان آدرس عکس را تنظیم نمود.
• آدرس دهی نسبی و مطلق: برای آدرس دهی عکس از دو روش نسبی و مطلق می توان استفاده نمود.

استفاده از css در HTML

• CSS چیست؟: CSS سرنام واژگان Cascading Style Sheet است و برای طراحی ظاهر صفحات وب از آن استفاده می شود.
• روش های اعمال CSS روی عناصر HTML: در این فیلم آموزشی سه روش برای اعمال CSS روی HTML معرفی شده است و بصورت کامل با آنها آشنا خواهید شد.

جداول در HTML

• تگ Table: برای ایجاد جداول در HTMl از تگ table استفاده می شود. همچنین برای ایجاد ردیف ها از تگ tr و برای ایجاد سلول ها از تگ td استفاده می شود.
• ویژگی Border در CSS: برای ایجاد حاشیه در جدول از این خصوصیت استفاده می شود.
• ویژگی border-collaps: همان طور که می دانید لبه های جدول در HTML بصورت دو خطی است که ظاهر خوبی در خروجی ایجاد نمی کند، اما با استفاده از خصوصیت مذکور می توانید لبه های دوخطی را به تک خطی تبدیل کنید.

لیست ها در HTML

• تگ UL: برای ایجاد لیست های نامرتب از این تگ استفاده می شود البته ul مخفف Unordered List است.
• تگ OL: برای ایجاد لیست های مرتب از این تگ استفاده می شود البته ol مخفف Ordered List است
• تگ DL: برای ایجاد لیست های تعریفی از این تگ استفاده می شود البته DL مخفف Definition List است.

عناصر block و inline در HTML

• عنصر Div در HTML: یکی از استفاده های بسیار مهم این عنصر، قرار دادن مجموعه ای از عناصر داخل این عنصر است. در واقع عنصر div ظرفی است برای دیگر عناصر و به این شما می توانید ظرف کلی را استایل دهی کنید، تا دیگر عناصر داخل آن نیز به شکل ظرفشان درآیند.
• عنصر Span در HTML: اگر قسمتی از متن را بخواهید با یک استایل متفاوت نمایش دهید، بعنوان مثال رنگ و اندازه آنرا نسبت به کاراکترهای کناری متمایز کنید، براحتی می توانید آنرا در بین تگ Span محصور کنید و حالا استایل مورد دلخواهتان را روی Span اعمال نمایید.

صفحه بندی در HTML

• صفحه بندی دو ستونه در HTML: در این قسمت با استفاده از عنصر Div و Table یک صفحه دو ستونه را طراحی می کنیم. البته قبل از هر چیز برای اینکه Divها در کنار هم قرار بگیرند و از حالت Block خارج شوند شما باید با خصوصیت Float آشنا شوید.
• صفحه بندی سه ستونه در HTML: در این قسمت تنها با استفاده از عنصر Div یک صفحه سه ستونه طراحی می شود.

فرم های ورود اطلاعات در HTML

• تگ form در HTML: برای ارسال اطلاعات وارد شده توسط کاربر به سرور، از تگ form استفاده می شود، یکی از مهمترین ویژگی های این تگ، action است و با آدرس یک فایل روی سرور تنظیم می شود، فایل مذکور وظیفه پردازش اطلاعات ارسالی را دارد.
• تگ input از نوع text در HTML: یک فیلد متنی را تعریف می کند.
• تگ input از نوع radio در HTML: یک فیلد انتخابی از نوع رادیو باتن را تعریف می کند. در این نوع فیلد ما امکان فقط انتخاب یک گزینه را داریم، مانند زمانی که جنسیت سوال می شود.
• تگ input از نوع checkbox در HTML: یک فیلد انتخابی از نوع چک باکس را تعریف می کند. تفاوت این فیلد با قبلی در این است که ما امکان انتخاب چند گزینه را داریم.
• تگ input از نوع submit در HTML: یک دکمه را تعریف می کند. بمحض اینکه روی دکمه کلیک شود فرم باصطلاح Submit می شود و اطلاعات به سرور ارسال خواهد شد.
• مثال های عملی از انواع فرم ها در HTML: در این قسمت بیش از 10 مثال مختلف را با هم مرور خواهیم کرد.

iframe چیست؟

• عنصر iframe در HTML: با استفاده از این عنصر می توان یک سایت دیگر را داخل یک صفحه نمایش داد.
• ویژگی frameborder: با تنظیم این ویژگی با مقدار "0" می توان حاشیه اطراف فریم را حذف نمود.

رنگ ها در HTML

• روش های مختلف تنظیم رنگ در HTML: در HTML و CSS برای مقدار دهی خصوصیت هایی مثل Background-color سه روش وجود دارد. 1- مقدار دهی بر مبنای هگزا دسیمال 2- مقدار دهی با استفاده از متد rgb و تنظیم هر کدارم از رنگ های قرمز، سبز و آبی 3- مقدار دهی بر اساس نام رنگ
• استفاده از نرم افزار فتوشاپ: برای تولید رنگ های مختلف می توان از فتوشاپ برای این کار استفاده نمود. بعد از اینکه از طریق پنل انتخاب رنگ، رنگ مورد نظرمان را ایجاد کردیم، می توانیم مقدار هگزا دسیمال رنگ مورد نظر را کپی کرده و داخل صفحه HTML از آن استفاده کنیم.

مروری بر مطالب بخش 1

خلاصه مطالب HTML: در این قسمت از فیلم آموزش HTML بطور خلاصه تمام مواردی که در بالا به آن پرداختیم را یکبار دیگر مرور می کنیم. 

DOCTYPE چیست؟

• نسخه های مختلف HTML: اولین نسخه HTML در سال 1991 ارائه شد. همچنین نسخه HTML5 در سال 2012 با امکانات گسترده تری به بازار وب وارد شد.
• اعلان Doctype در HTML: همان طور که می دانید تا این لحظه از HTML نسخه های فراوانی ارائه شده است، با استفاده از اعلان DOCTYPE به مرورگر می فهمانیم که از کدام نسخه HTML استفاده کرده ایم.

عنصر head در HTML

• بخش Head در HTML: در این قسمت از فیلم آموزش HTML بخش های مختلف یک صفحه HTML مانند بخش Head و بخش Body را توضیح می دهیم.
• تگ Title در HTML: یکی از مهمترین تگ هایی که در بخش Head ذکر می شود عنصر Title است که یک عنوان دلخواه را برای صفحه تنظیم می کند.
• بررسی تگ Title از نظر SEO: برای قرار گرفتن در صفحه نخست گوگل باید در انتخاب Title دقت کنیم.
• تگ meta در HTML: با استفاده از تگ meta یکسری اطلاعات در مورد سند HTML مانند نویسنده و تاریخ ویرایش و ... به کاربر می دهیم.
• بررسی اهمیت تگ meta از نظر SEO: با تنظیم صحیح description و keyboard در تگ meta می توانیم شانس خود را برای قرار گرفتن در صفحه نخست گوگل بالا ببریم.

استفاده از javascripts در HTML

• عنصر Script در HTML: اگر قصد دارید کدهای جاوا اسکریبت را بصورت مستقیم در بین کدهای HTML قرار دهید می توانید از این تگ در قسمت Body استفاده کنید و کدهای جاوااسکریپت را بین تگ Script باز و بسته محصور کنید. البته از تگ مذکور می توانید در قسمت Head صفحه نیز استفاده کنید.
• عنصر noscript در HTML: اگر کاربری، جاوااسکریبت را در قسمت تنظیمات مرورگرش غیرفعال کرده باشد در اجرای کدهای جاوااسکریپت دچاره مشکل خواهیم شد. بنابراین بهترین کاری که در این مواقع می شود انجام داد نمایش یک پیغام مناسب به کاربر است. در اینجاست که عنصر noscript به کمک ما خواهد آمد و می توانیم پیغام مورد نظرمان را در آن قرار دهیم ...!

کاراکترهای رزرو شده در HTML

• کاراکترهای رزروی در HTML: همان طور که می دانید برخی از کاراکترها مثل علامت کوچکتر، بزرگتر و یا علامت کپی رایت را بصورت مستقیم نمی توانیم در بین کدهای HTML استفاده نماییم. بعنوان مثال اگر قرار باشد جمله "با استفاده از تگ <img> در HTML می توان تصاویر را در صفحه به نمایش گذاشت" را بخواهیم نمایش دهیم چون از علامت کوچکتر و بزرگتر استفاده شده است با مشکل مواجه می شویم ...! در اینجاست که می توانیم بجای مثلا علامت بزرگتر از ;gt& استفاده کنیم.
• نمایش فاصله های پشت سرهم در HTML: اگر در میان یک متن نیاز باشد که بیشتر از یک فاصله را بین کلمات بکار ببریم آن موقع است که نمی توان از دکمه Space روی کیبورد استفاده نمود، در واقع شما باید از ;nbsp& برای نمایش هر عدد فاصله استفاده کنید.

url چیست؟

• IP چیست؟ IP مخفف Internet Protocol است و از چهار عدد (192.56.98.4) مختلف تشکیل شده است و با استفاده از آن می توان وسایل داخل شبکه را شناسایی نمود.
• DNS چیست؟ DNS سروی روی اینترنت است که وظیفه تبدیل IP به دامین را دارد.
• URL چیست؟ URL آدرس یک صفحه یا فایل روی اینترنت است و شامل بخش های مختلفی است که در این فیلم آموزشی توضیح کامل در این داده شده است.

رمزنگاری url در HTML

استاندارد کردن URL هایی که دارای کاراکتر فارسی اند: زمانی که شما از کاراکترهای فارسی در URL استفاده می کنید، سرور مورد نظر قادر به پاسخ گویی نمی باشد، بنابراین باید تمام URL ها از یک استاندارد واحد پیروی کنند و در واقع باید کاراکترهای فارسی را طوری تغییر دهیم که استاندارد شوند. استاندارد مذکور، استاندارد ASCII نام دارد.

میزبانی وب سایت چیست؟

• Hosting چیست؟ Hostring در لغت بمعنی میزبانی و مهمان داری است. در واقع شما باید پروژه یا سایتی که روی کامپیوترتان آماده کرده اید را در اختیار یک شرکت فروش هاست و دامنه قرار دهید تا از سایت شما میزبانی بکند.
• IranServer یک پیشنهاد برای خرید هاست: ایران سرور یکی از شرکت های فروش هاست و دامنه است که در سال های اخیر با پشتبانی خوب از مشتریانش توانسته اعتماد کاربران را بخود جلب کند. بنابراین اگر قصد خرید هاست و دامنه دارید، پیشنهاد می شود از سایت مذکور خرید نمایید.