جلسه دوم : آموزش مفاهیم ابتدایی HTML بخش دوم ( صفحات وب چگونه اند؟ )

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

در ابتدا قصد داریم در خصوص مرورگر ها و نحوه کار انها توضیحاتی را ارائه نماییم .

مرورگر وب چیست ؟

مرورگرها نرم افزارهایی کاربردی هستند که برای نمایش اطلاعات صفحات وب ، دریافت و انتقال اطلاعات در فضای وب طراحی و ساخته شده . اکر شما قصد دارید یک صفحه وب را مشاهده کنید می بایست از مرورگر وب یا (Web Browser) استفاده کنید

ویکی پدیا در تعریف مرورگر یا مرورگر وب می گوید: Web Browser یا مرورگر وب برنامه نرم افزاری است که دیتا را از منابع اطلاعاتی وب جهان شمول دریافت کرده، به نمایش می گذارد و یا باز پس می فرستد. این منابع اطلاعاتی می توانند صفحات اچ تی ام ال و وب پیج، عکس، ویدیو و انواع دیگری از محتوا باشند.

انواع مرورگر ها

کاربران اينترنت به منظور انتخاب يک مرورگر دارای گزينه های متعددی می باشند . اکثر کاربران با مرورگرهائی که از يک رابط کاربر گرافيکی استفاده می نمايند ، آشنا هستند. اين نوع مرورگرها متن ، گرافيک و عناصر متفاوت چندرسانه ای نظير صدا ، تصوير و کليپ های ويدئويی را نمايش می دهند . در مقابل ، برخی مرورگرها از يک رابط کاربر مبتنی بر متن استفاده می نمايند . تعدادی از شناخته ترين مرورگرهای موجود عبارتند از :

• Internet Explorer
• Mozilla
• Firefox
• Opera
• Safari :

هر یک از این مرورگرها فوق دارای ویژگی مخصوص خود هستند همانند یکسان سازی مرورگر ها بین دستگاه های مختلف ، امنیت ، کارائی ، افزونه ها ، اپکلیکشن ها بر روی مرورگر و...

مرورگر وب چگونه کار می کند ؟

یکی از مهم ترین بحث این درس بررسی نحوه کار مرورگر هاست ، ما قصد داریم در این بخش به مورد بپردازیم.

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

در ادامه قصد داریم به نحوه ساختار مرورگر ها بپردازیم

همانطور که در بالا مشاهده می کنید هر مرورگر دارای بخش های متقاوتی است ، همانند رابط کاربری ) همه بخش های یک مرورگر بحز صفحه نمایش وب سایت) ، موتور مرورگر ( در اصل موتور مرورگر پلی است بین رابط کاربری و موتور رندر مرورگر ) و موتور پردازش گر صفحات وب ( در موتور پردازش گر کد های HTMl و CSS تجزیه و پردازش می شوند) ، واخد شبکه ( بخشی از مرورگر ها که ارتباط با پروتکل های HTTPو HTTPS فراهم می سازد) ، واحد مترجم جاوا در این واحد کد های جاوا تجزیه و اجرا می گردد . واحد ماندگاری اطلاعات ( در این بخش همه اطلاعات لوکال مرورگر هماندد کوکی ها ذخیره می گردد)

واحد پردازش صفحات و ب یا به اصطلاح (Rendering Engine) بخش مهمی از یک مرورگر را تشکیل می دهد نام موتور مرورگر کروم و اپرا ، Blink ، نام موتور کروم (برای آیفون ) و سافاری webkit ، نام مرورگرفایر فاکس Gecko و برای اینترنت اکسپلورر trident نام دارد .

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

کلیک کنید

 

ادامه این بخش قصد داریم به ادامه مباحث مفاهیم پایه در HTML بپردازیم

آشنایی با مفهوم تگ (Tag) :

اولین مفهومی که باید در خصوص زبان نشانه گذاری HTML بیاموزید ، مفهوم تگ می باشد ، عناصر یا اِلمان (element) یک صفحه وب مثل متن ، عکس ، فیلم و صدا توسط مفهومی بنام تگ به صفحه وب افزوده می شود مثلا اگر بخواهید یک عکس را به صفحه وب اضافه کنید باید از تگ عکس (img) استفاده کنید

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

همواره عناصر اچ تی ام ال درون دو علامت <> نوشته می شود . فرم کلی این تگ ها بصورت زیر است

<اسم تگ> متن یا هر چیز دیگر <اسم تگ به همراه علامت اسلش(/)>

 

انواع تگ ها:

: عناصری که در اچ تی ام ال که با استفاده از تگ ها به صفحه اضافه می شوند دارای دو نوع می باشند : تگ های تکی و تگ های جفتی

بعضی عناصر می بایست توسط دو تگ به شکل های <> و </> نوشته شوند مانند

این یک متن است

که به <> تگ آغازین یا Opening Tag و به </> تگ پایانی یا Closing Tag گفته می شوند

 

همچنین در HTML عناصری وجود دارد که توسط یک تگ ایجاد می گردد به این نوع از تگ ها ، تگ های تکی می گویند مانند

یا

نکته : وقتی از عناصری که از نوع تگ های جفتی می باشند استفاده می کنید باید این نکته رو به خاطر داشته باشید که هر تگی که باز می شود باید حتما بسته شود

 

عناصر درون هم :

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

عنصر پدر و عنصر فرزند در HTML (Parent element و child element ) :

مفهوم دیگری که در خصوص تگ ها باید بدانید این است که زمانی که عنصری درون عنصر دیگری قرار می گیرد به عنصر داخلی عنصر فرزند (Child Element) و به عنصر خارجی ، عنصر پدر (Parent element) گفته می شود بطور مثال

به عنصر دایو (Div) عنصر پدر و به عناصرimg , span  و p عنصر فرزند می گویند

خواص (Attributes) تگ های HTML

هر تگ اچ تی ام ال دارای مجموعه از خواص است که ويژگی های مختلف آنها را تعيين می کند . هر يک از اين خواص را می توان در درون تگ ابتدايي معرفی و مقدار دهی کرد . خواص تگ ها را با علامت = مقدار دهی میکنیم و مقدار آن خاصیت را داخل " " قرار داده میشود.  بطور مثال عنصر دایو (div) دارای خاصیت ارتفاع با مقدار 100 پیکسل می باشد ( برای مشاهده برروی سربرگ HTML کلیک کنید )

فرم کلی بصورت زیر است :

<تگ اغازین     ویژگی =" مقدار ">    

نکته : در صورت استفاده از خواص برای عناصر HTML این نکات را بخاطر داشته باشید

1. از حروف کوچک انگلیسی (Lowercase) برای نوشتن خواص و مقادیر انها استفاده کنید

2. در مقدار دهی ویژگی ها هم می توانید از دایل کوتیشن ("    ") استفاده کنید و هم می توانید از تک کوتیشن استفاده کنید (‘       ‘)

 خصوصيات استاندارد تگ های HTML

در ادامه مبحث آشنایی با تگ های HTML  قصد داریم در این بخش از جلسه دوم به معرفی یکسری از ویژگی های استاندارد که در همه تگ های اچ تی ام ال ( بجز تگ های که در زیر ذکر می شود ) می توانید از ان استفاده کنید می پردازیم

نکته :  اين خاصيت ها در تگ های base , head , html , meta , param , style , title و script وجود ندارد .

خاصیت id :  مشخص کننده يک شناسه منحصر به فرد برای تگ در درون سند HTML است.  با افزودن آی دی به تگ می توان از عنصر در CSS و جاوا اسکریپت و... را انتخاب و تغییرات مدنظر را اعمال کرد.

خاصیت Class  : مشخص کننده کلاس در نويسی برنامه است . اين کلاس در کدنويسی CSS و زبان های اسکريپتی کاربرد دارد . همانطور که می دانید وقتی عناصر ی دارای یکسری ویژگی ها مشابه باشند ان ویژگی مشابه را به می توان توسط کلاس به عناصر ارجاع داد

خاصیت style  : يک خاصيت چند مقدارِي است که خصوصيات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند .

خاصیت title : متنی است که به صورت tooltip در يک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمايش داده می شود .


در ادامه جلسات اموزشی HTML و CSS به دیگر ویژگی های مربوط به عناصر اچ تی ام ال را بررسی می کنیم