آموزش html css فرادرس2022-08-30
HTML چیست؟ از کاربرد تا مفاهیم اولیه + مثال فرادرس مجله
این مسئله به وضوح نشان میداد که نیاز به وضع یک استاندارد جدید وجود دارد. بنابراین، ائتلاف شبکه جهانی وب (World Wide Web) که به اختصار W3C خوانده میشود، در سال ۱۳۷۲ تاسیس شد. هدف این سازمان، استانداردسازی زبان برنامه نویسی HTML و هدایت بهروزرسانیهای آن در مسیر درست است. اولین نسخه ارائه شده توسط W3C ابتدا WILBUR نامگذاری و بعدها به نام HTML 3.2 شناخته شد. لازم است به این مسئله توجه داشت که HTML زبان برنامه نویسی نیست، بلکه یک زبان نشانهگذاری (Markup) است که ساختار محتوا را تعیین میکند.
بسترکاری زیادی برای برنامه نویسان و طراحان وب وجود دارد و در آینده این روند پیشرفت خواهد کرد. کامنتها توسط مرورگرها نادیده گرفته شده و با هدف تعریف هدف کد و کاری که میکند، توسط توسعهدهنده برای خودش یا دیگران نوشته میشود. ویژگی به مرورگر میگوید که کدام صفت مربوط عنصر مورد نظر باید تغییر کند. از ویژگیها برای کنترل چیزهایی مانند رنگ، اندازه، فونت، شکل و موقعیت قرارگیری عنصر در صفحه استفاده میبرند. با استفاده از دستهبندی سلکتورها میتوانیم، دستور یکسانی را برای چندین عنصر مختلف به کار ببریم.
همانطور که در ابتدا نیز بیان شد، عناصر HTML میتوانند دارای تعدادی صفت باشند. سه تگ سطح بلوکی که هر سند HTML به آن نیاز دارد، شامل تگهای ، و است. در ادامه این بخش، توضیحاتی در خصوص کدهای بالا ارائه شده است. اگر هدف این باشد که جمله بالا به تنهایی و به صورت مستقل نشان داده شود، میتوان به صورت زیر با قرار دادن آن در داخل یک تگ پاراگراف مشخص کرد که جمله بالا یک پاراگراف است. نزدیک به آغاز قرن بیست و یکم، W3C نسخه اولیه XHTML 1.0 را منتشر کرد.
برای نمونه اگر بدانید که یک مشخصه خاص میتواند در میان موارد مشابه در فلان ماژول پیدا شود و از این رو مشخصات مشابهی دارد هنگام کار با قواعد مختلف کارتان آسانتر خواهد بود. در ادامه این بخش، برخی از مزایای HTML5 به همراه توضیحاتی پیرامون هر یک از این مزایا، بیان شده است. HTML و CSS هر کدام کاربردهای خاصی دارند که باعث استفاده راحتتر از این دو ابزار می شود. از جمله مفاهیم مهم CSS میتوان به موارد فهرست پایین اشاره کرد.
CSS وضعیت ظاهری عناصر HTML را در صفحه نمایش، کاغذ یا سایر رسانهها توصیف میکند. صفحات پیاپی مشبک برای قالببندی آرایش صفحات وب استفاده میشوند. از آنها میتوان برای تعریف استایلهای متنی، اندازه جدولها و سایر مؤلفههای صفحات وب استفاده کرد. میتوان گفت نیمی از طراحی یک وبسایت خوب مهارت و نیمه دیگر آن استعداد است.
در این بخش از مطلب زبان برنامه نویسی HTML چیست درک ساده و ابتدایی از HTML و کاربردهای آن ارائه شده است. به همراه HTML و برای تکمیل آن، میتوان از فناوریهایی مانند CSS و زبانهای اسکریپتنویسی مثل جاوا اسکریپت برای ایجاد وبسایتها کمک گرفت. اما، با توجه به اینکه استفاده از عبارت «زبان برنامه نویسی HTML» در میان عموم رایج است و توسط اکثر افراد از این اصطلاح استفاده میشود، در این مطلب نیز همین عبارت به کار برده شده است. توسعه صفحات وب یکی از پرطرفدارترین حوزه های برنامه نویسی میباشد.
عنصر HTML
این نسخه جدید به نام HTML 4.01 آخرین نسخه با این مشخصه بود. در مثال دوم از Padding هم استفاده کرده و متن نوشته شده را نیز کمی جابهجا کردهایم. در این بخش با خاصیت های table-layout و padding و نحوه نمایش hover در جداول آشنا میشویم.
اصول واکنشگرایی سایت ها ( پایان فصل اول )
برای تبدیل فایل متنی به فرمت HTML باید پسوند آن را به «html.» تغییر داد. به عنوان مثال و برای نمایش ساختار یک صفحه HTML کدهای زیر باید در فایل ایجاد شده کپی شوند. در این بخش از مطلب زبان برنامه نویسی HTML برخی از شاخصترین کاربردهای HTML ارائه شده است. یکی از ویژگیهای پیشبینی شده HTML5 پشتیبانی بومی آن برای تعبیه صوت و ویدئو در سند HTML است.
همچنین، مجموعهای از مرتبسازیها و اصلاحات تگهای قدیمی، تمرکز بر جهانیسازی و پشتیبانی از پدیده جدید صفحات پیاپی مشبک (Cascading Style Sheet | CSS) انجام شدند. در زمان معرفی HTML 3.0 افراد بیشتری وارد عرصه زبان برنامه نویسی HTML شده بودند. در حالی که استانداردهای قبلی قابلیتهای مناسبی در اختیار مدیران سایتها قرار میدادند، همچنان نیاز به امکانات و تگهای بیشتری احساس میشد. مدیران و گردانندگان سایتها میخواستند وضعیت ظاهری سایتهای خود را بهبود دهند.
phpMyAdmin چیست و چه کاربردی دارد؟ – هر آنچه باید بدانید
از آنجا که صفحات اینترنتی از فونتهای مختلف، تصاویر پسزمینه رنگی و چندین قالب متفاوت استفاده میکردند، فرایند بازنویسی کدهای آن صفحات بسیار طولانی، پُر زحمت و هزینهبر بود. CSS از طریق افزودن شکل و ظاهر به عناصر صفحات اینترنتی کار میکند. قوانین مربوط به ظاهر عناصر در فایل CSS جداگانهای نوشته شده و بعدا به فایل HTML متصل میشوند. جدا بودن ساختار اسکلت اصلی سایت و ظاهر آن کار توسعهدهندگان را سادهتر کرده است. از ۳ دهه قبل HTML به عنوان زبان پیشفرض برای اسناد و وبسایتهای مبتنی بر وب مورد استفاده قرار میگیرد. وظیفه اصلی این فناوری محبوب همکاری با مرورگرهای وب و کمک به درک ساختار و سبک وبسایتها به وسیله این مرورگرها است.
تگ های معنایی Semantic Elements
مفاهیم مهم CSS شامل مواردی است که برای کار با CSS باید بلد باشیم. یکی از بهترین منابع برای آموزش CSS فیلم آموزش رایگان طراحی وب با CSS، سریع و آسان در ۱۲۰ دقیقه است. همینطور که در جدول بالا نشان دادیم، میتوانیم عنصری را با استفاده از کلاس یا شماره شناسایی ID نیز هدف قرار دهیم. برای نوشتن سلکتور Class ابتدا نقطهای نوشته شده و بعد از آن نام کلاس قرار میگیرد. CSS میتواند برای استایلبندی کاملاً ابتدایی متن اسناد مورد استفاده قرار گیرد.
اگر برای یادگیری مباحث جذاب و پرکاربرد طراحی صفحات وب آماده هستید با ما تا آخر مسیر همراه باشید. وقتی که زبان HTML در سال ۱۹۹۰ میلادی ساخته شد، تمام هدفش نمایش اطلاعات بر روی صفحه وب بود. بعدها توسعهدهندگان شروع کردن به افزودن ویژگیهای گرافیکی سادهای مانند فونتهای مختلف و رنگها. اما با مرور زمان و بزرگتر شدن سایتها دیگر امکان مدیریت تمام عناصر موجود در صفحه به صورت مجزا وجود نداشت. بنابراین CSS برای دادن شکل و ظاهر زیبا به فایلهای HTML به وجود آمد. در ادامه مطلب زبان برنامه نویسی HTML به این مهم پرداخته شده است.
از طرف دیگر، IndexDB یک سرویس ذخیره داده بزرگتر و بهتر برای سمت کلاینت است. در گذشته، این امکان وجود نداشت که بتوان دادههای مرورگر یک کاربر را در طول جلسهها (Session) ذخیره کرد. برای دستیابی به چنین نیازمندی، باید زیرساختهای سمت سرور فراهم میشد و یا از Cookieهای کاربران استفاده میشد. اما اکنون در HTML5 با استفاده از localStorage و IndexDB میتوان ذخیرهسازی سمت کلاینت را انجام داد. بخشی از کاستیهای HTML 3.0 را که منجر به کنار گذاشته شدن آن شد، میتوان در ارتباط با حجم HTML 3.0 دانست. خوشبختانه، افراد مسئول متوجه این نارسایی شدند و در نتیجه، بهروزرسانیهای بعدی، مطابق با الگوی ساختار یافته (ماژولار | Modular) طراحی شدند.
این رندر نوعی فرآیند ساخت و ساز واقعی است که هر بار که شخصی به صفحه خاصی در سایت هدایت میشود، رخ میدهد. هر گونه مشکل در سند HTML یا فایلهای مرتبط با آن می تواند روند رندرینگ را مختل کند. آخرین نسخه این فناوری یعنی HTML5، قابلیتهای HTML را گسترش داده و امکان ادغام ویدیو، صدا، صفحات گسترده و برنامههای مختلف را مستقیماً در وبسایتها فراهم کرده است. این بهبود و پیشرفت به ویژگیهای پویا و تعاملی که کاربران تجربه میکنند کمک میکند. علاوه بر این، HTML امکان پیمایش یکپارچه را در وبسایتها به وسیله لینکها تسهیل میکند. همچنین طراحان وبسایت از HTML برای ایجاد فرمهای استفاده کرده و اطلاعات مهمی مانند ایمیلها و اطلاعات دیگر کاربران را جمعآوری میکنند.
تمام اعلانها با استفاده از علامت نقطهویرگول به پایان میرسند. با اینکه الزامی نیست اما معمولا هر اعلان را در خط جداگانهای مینویسند. این مسئله باعث سادهتر شدن خواندن کدهای CSS برای همه افراد میشود. وقتی عنصری را به عنوان والد و عنصر دیگری را به عنوان فرزند تعریف کردیم، برای هدف گرفتن عنصر فرزند ابتدا باید سلکتور را به عنوان والد بنویسیم. برای رسیدن به این هدف، باید با دو مولفه اساسی تشکیل دهنده CSS آشنا شویم. همان طور که پیشتر اشاره کردیم، CSS زبانی برای تعیین شیوه عرضه اسناد به کاربران است و روش استایلبندی، طرحبندی و موارد دیگر را تعیین میکند.
کار با آیکون ها
امکان قرار دادن همه نوع چندرسانه مثل عکس، جدول و موارد دیگر در یک صفحه وب، به وسیله تگهای HTML وجود دارد. تنها لازم است آنچه که مرورگر باید در صفحه رندر (Render | پردازش) کند را تعیین و مشخص کرد. «[+] General Assembly Dash» نوعی منبع آموزشی HTML خارجی بوده که برای مبتدیان طراحی شده است و پروژههای عملی را برای زبان آموزان در طراحی وب ارائه میدهد.
نشانهگذاری (Markup) کاری است که تگهای اچتیامال (برچسب اچتیامال | HTML Tag) با متن داخلشان انجام میدهند. تگها متن را به عنوان یک نوع متن خاص نشانهگذاری میکنند (مثل نوع ایتالیک). در ادامه، برای آشنایی بیشتر با زبان برنامه نویسی HTML دو مفهوم مهم تگ HTML و صفت HTML معرفی شده است. کسب مهارت در HTML برای افرادی که مایل به دنبال کردن توسعه وب هستند بسیار مهم است. توسعهدهندگان وبی که HTML را یاد بگیرند فرصتهای شغلی متعددی را پیش روی خود میبینند. از کار به صورت فریلنسری گرفته تا پیادهسازی پروژههای شخصی و کار برای شرکتهای برنامه نویسی و طراحی سایت همه و همه فرصتهای شغلی مناسبی هستند.
بنابراین پیشنهاد میکنیم فیلم آموزش طراحی وب سایت با CSS دوره مقدماتی را در فرادرس مشاهده کرده و همراه با تمرینات آن به پیش بروید. برای کمک به مخاطبان مجله، لینک مربوط به این فیلم را در پایین نیز قرار دادهایم. زیرا این صفحات از لحاظ ظاهری کاملا بیروح و بدون جذابیت هستند. به همین دلیل طراحان وب باید از CSS در کنار HTML استفاده کنند. در این مطلب از مجله فرادرس، توضیح دادهایم که CSS چیست و فایده استفاده از آن را در کنار مفاهیم مطرح شده در این حوزه بیان کردهایم. در بخشهای بعدی این سری مقالات این موضوع را بیشتر مورد بررسی قرار میدهیم.
HTML و CSS، در کنار هم برای ساخت صفحات اینترنتی مشهور و زیبا کار کردهاند. هر چند که این دو زبانهای مجزایی هستند و درک هدف اصلی از ایجاد آنها بسیار مهم است. اگر طراحی صفحات را فقط با کمک کدهای HTML انجام دهیم و از پرداختن به ظاهر وبسایت دوری کنیم، مخاطبان سایت به میزان آموزنده بودن و ارزشمندی مطالب سایت توجه نخواهند کرد.
در جدول زیر، انواع ویژگیهای مربوط به مدیریت ظاهر متن و کاراکترهای نویسهای یا CSS Typography را معرفی کرده و یک به یک توضیح دادهایم. بعد از سلکتورها نوبت به بلوک اعلانها یا همان Declaration-ها میشود. یعنی یک جفت آکولاد باز و بسته که شامل یک یا چند اعلان CSS هستند. اعلانهای CSS به مرورگرها میگویند که عناصر انتخاب شده را چگونه نمایش دهد.
پیاده سازی سایت مشابه دیوار با Laravel & React & Next js 14
این مسئله، به طور بالقوهای XML را تبدیل به یک زبان نشانهگذاری بسیار قدرتمند کرده است. به همین دلیل، جای تعجبی ندارد که W3C یک نسخه XML از HTML بسازد (که XHTML نامیده میشود). XHTML در سال 1380 تبدیل به یک استاندارد رسمی و در سال ۱۳۸۲ بهروزرسانی شد. XHTML بسیار مشابه HTML است اما، قوانین سفت و سختتری دارد.
کاربرد اصلی HTML این است، که با استفاده از تگها(Tag) قالب اصلی صفحات وب را پیاده سازی میکند. در اصل اسکلت اولیه صفحات وب با استفاده از تگهای HTML صورت میگیرد. هر کدام از این تگها کاربردهای خاص خود را دارند و باعث نمایش دقیق عناصر در صفحات وب می شوند. برای ساخت یک وبسایت حرفهای باید از زبانهای برنامه نویسی مختلفی استفاده كرد، اما برای همه مرورگرها HTML قابل مفهومتر است، باید عناصر و کدها در HTML تعریف شود.
مثالی برای تگ HTML
وظیفه اصلی CSS این است که ظاهر و نمای وبسایت را به شکل بسیار زیباتری طراحی کند. برای این کار تمام المانهای موجود در صفحه از متنها و تیترها گرفته تا تصاویر و دکمهها را CSS طراحی میکند. اندازه این عناصر، رنگ و چیدمان آنها حتی حرکت آنها در صفحه وابسته به کدهای CSS است. CSS از زمان تولد در سال ۱۹۹۶ با هدف برآورده کردن احتیاجات رو به تغییر اینترنت به صورت دائم ارتقا داده شده است. با این کار، CSS به ثابت بودن ظاهر وبسایت بر روی مرورگرها و وسایل مختلف کمک کرده است. با اینکه بعضی از ویژگیهای CSS شاید زیادی پیچیده باشند، اما هدف اصلی آن جدا کردن محتوی وبسایت از کدهای مربوط به شکل و ظاهر آن است.
این عناصر یک سلسله مراتب ایجاد میکنند که به محتوا در قالب بخشها (Sections)، پاراگرافها، سربرگها و سایر اجزاء سازمان میدهند. پیش از ظهور HTML5 توسعه بازی تحت وب محدود به Flash و Silverlight بود. چون مرورگرها از ملزومات جدید برای HTML5 مثل CSS3 و موتور سریع و سبک جاوا اسکریپت برای ایجاد تجربه مطلوب پشتیبانی میکنند، HTML5 میتواند امکان توسعه بازی را به واقعیت تبدیل کند. بلکه، میتوان از ویژگیهای مناسب و مطلوب استفاده کرده و سایر آنها را حذف کرد. در ادامه مطلب زبان برنامه نویسی HTML چیست، نوبت به کاربردهای زبان برنامه نویسی HTML میرسد. در این آموزش، یک قالب وبسایت ساده و کاربردی با استفاده از HTML و CSS ایجاد کردیم.
سلکتور دستهبندی، شامل نام دو یا چند عنصر میشود که با استفاده از کاما از یکدیگر جدا شدهاند. در دستهبندی سلکتورها ترتیب قرارگرفتن نام آنها اهمیتی ندارد. دستور تعریف شده بر روی تمام عناصر دستهبندی شده اعمال میشود.
این بخش شامل تنظیمات پایهای مانند زبان صفحه، کدگذاری UTF-8 و اتصال به فایل CSS است. اگر ترجیح میدهید این آموزش را به صورت ویدیویی و با توضیحات تصویری دنبال کنید، میتوانید از لینک زیر اقدام کنید. در این ویدیو، تمامی مراحل طراحی قالب وبسایت به صورت گامبهگام و با جزئیات کامل توضیح داده شده است. این ویدیو به شما کمک میکند تا به راحتی مفاهیم را درک کرده و آنها را در پروژههای خود پیادهسازی کنید.
به طور کلی هر صفحه وب دارای دو بخش Client Side و Server Side است. دوم شکل، شمایل و رنگ و لعاب صفحه است که باید در CSS تعیین شود و سوم منطق برنامه در سمت کلاینت است که با زبانهای برنامه نویسی مانند JavaScript نوشته میشود. در زبان برنامه نویسی HTML میتوان عناصر را در داخل عناصر دیگر قرار داد. به عنوان مثال، اگر لازم باشد یکی از کلمات در یک جمله با فونت درشت نمایش داده شود، میتوان آن کلمه را در داخل یک تگ قرار داد. صفتها حاوی اطلاعات بیشتر در مورد یک عنصر هستند که قرار نیست در محتوای خروجی نمایش داده شوند. در اینجا، class نام یک صفت است و editor-note مقدار این صفت است.
همچنین، هر عنصر دیگری که دارای همین مقدار class یعنی editor-note باشد را نیز میتوان هدف گرفت. مرورگر فایل HTML را میخواند و متن داخل آن را به یک قالب و فرم دیداری ترجمه میکند. انتظار میرود این پردازش (رندر | Render) صفحه مربوطه، به نحو مورد انتظار خالق سایت انجام شود. در خصوص ابزار مورد استفاده برای تولید صفحات HTML، میتوان از یک ویرایشگر کد ابتدایی گرفته، تا یک محیط توسعه گرافیکی قدرتمند را به کار گرفت. HTML فناوری پایه توسعه وب است و نقش محوری در دنیای آنلاین امروزی به عهده دارد.
- {
- در تصویر بالا و مثالی که در اینجا ارائه شد، این محتوا تنها شامل متن است. |}
- اگر طراحی صفحات را فقط با کمک کدهای HTML انجام دهیم و از پرداختن به ظاهر وبسایت دوری کنیم، مخاطبان سایت به میزان آموزنده بودن و ارزشمندی مطالب سایت توجه نخواهند کرد. {
- همچنین، HTML5 از تصاویر گرافیکی برداری مقیاسپذیر (Scalable Vector Graphics | SVG) و MathML برای فرمولهای ریاضی و علمی پشتیبانی میکند. |}
- در حالی که استانداردهای قبلی قابلیتهای مناسبی در اختیار مدیران سایتها قرار میدادند، همچنان نیاز به امکانات و تگهای بیشتری احساس میشد. {
- در داخل دو تگ ابتدایی و انتهایی در یک عنصر HTML محتوای مورد نظر قرار داده میشود. |}
- بعدها توسعهدهندگان شروع کردن به افزودن ویژگیهای گرافیکی سادهای مانند فونتهای مختلف و رنگها.
پیشنیاز مطالعه این مقاله داشتن سواد عمومی رایانه، داشتن نرمافزارهای پایه روی سیستم، دانش مقدماتی از طرز کار با فایلها و همچنین آشنایی ابتدایی با HTML است. این یعنی آن کلمه باید به صورت درشت و تأکید شده نمایش داده شود. همچنین، JavaScript برای ساخت وبسرورها، توسعه کاربردهای مرتبط با سرور و توسعه بازیهای کامپیوتری نیز به کار گرفته میشود. یک HTA بدون محدویتهای مدل امنیتی مرورگر اینترنت اجرا میشود.
یک نمونه تگ ساده HTML در ادامه به عنوان مثال ارائه شده است. HTML سرنامی برای عبارت HyperText Markup Language به معنی زبان نشانهگذاری ابرمتن است. مفهوم دو کلمه HyperText و Markup ممکن است در ابتدا پیچیده و گنگ به نظر برسد، بنابراین، در ادامه این بخش توضیحات بیشتر درباره هر کدام ارائه شده است. در نخستین بخش از این سری مطالب، به مبانی مقدماتی HTML پرداخته و عناصر، خصوصیتها و همچنین دیگر اصطلاحهای مهم که ممکن است شنیده باشید را توضیح میدهیم. همچنین شیوه سازماندهی عناصر HTML، چگونگی سازماندهی صفحه HTML و دیگر ویژگیهای مهم زبان HTML را توضیح دادهایم. در این مسیر با برخی مفاهیم HTML نیز در عمل کار میکنیم تا انگیزه یادگیری شما را حفظ کنیم.
۱.۳. محتوای اصلی
سال ۱۳۷۷ (1999 میلادی) توسعه «HTML4.01» به وقوع پیوست که از گزینههای چندرسانهای، شیوهنامهها، امکانات چاپ و زبانهای برنامه نویسی اضافی پشتیبانی میکرد. با گذشت زمان، HTML5 به استاندارد تبدیل شد و از سال ۱۴۰۱، «HTML5.2» در حال استفاده است. HTML5.2 به عنوان آخرین نسخه این فناوری وب تأکید زیادی بر سیاست امنیت محتوا دارد و نیازهای عصر معاصر را به خوبی برطرف میکند. برای مثال، محتوا ممکن است در قالب یک دسته از پاراگرافها، لیستهای نشانهدار (Bullet Points) یا استفاده از تصاویر و جداول داده باشد. جاوا اسکریپت (JavaScript | JS) یک زبان برنامه نویسی است که امکان پیادهسازی ویژگیهای پیچیده را در صفحات وب فراهم میکند.
به جای استفاده از Flash Player میتوان به راحتی فایلهای صوتی و ویدئویی را با استفاده از تگهای و در صفحات وب قرار داد. همچنین، HTML5 از تصاویر گرافیکی برداری مقیاسپذیر (Scalable Vector Graphics | SVG) و MathML برای فرمولهای ریاضی و علمی پشتیبانی میکند. این دوره برای افرادی که به طراحی صفحات وب علاقهمند هستند ارائه شده است.
قوانین سختگیرانه برای تمام زبانهای XMLضروری است چرا که، بدون آن همکنشپذیری (Interoperability) میان برنامهها امکانپذیر نبود. در ادامه مطلب زبان برنامه نویسی HTML چیست تاریخچه HTML به طور کامل و به ترتیب برای هر نسخه شرح داده شده است. این تگ های HTML است که یک متن معمولی را از کد HTML تفکیک میکنند. تگها یا برچسبهای HTML بین یک علامت کوچکتر و یک علامت بزرگتر یا در واقع در داخل پرانتز گوشهدار (Angle-Bracket) مثل قرار میگیرند.
{مایکروسافت چطور به رشد HTML 4.01 کمک کرد؟
|}در مجموع جاوا اسکریپت، CSS و HTML با یکدیگر همکاری میکنند تا صفحات وب کامل و تعاملی را که روزانه در پلتفرمهای دسکتاپ و موبایل با آنها مواجه میشویم، به نمایش بگذارند. زبان برنامه نویسی HTML در اصل «زبان نشانهگذاری» استاندارد برای ایجاد صفحات وب است. HTML یک زبان ساده با ساختاری شفاف به حساب میآید و آموزش آن حتی برای افرادی که به تازگی قصد شروع یادگیری ساخت وبسایت را دارند، بسیار ساده است.
در تصویر بالا و مثالی که در اینجا ارائه شد، این محتوا تنها شامل متن است. به وسیله سازههای HTML امکان به کارگیری تصاویر و سایر اشیاء، همچون فُرمهای تعاملی در صفحه رندر شده وجود دارد. در ادامه، عنصر (تگ) پاراگراف را که در بخشهای قبلی این مطلب معرفی شد، تجزیه و به این ترتیب، ساختار HTML و اجزاء آن شرح داده شده است. در ادامه، تصویری از اجزاء و ساختار عنصر HTML به نمایش گذاشته شده است. HTML کاربرد گستردهای در ایجاد صفحاتی دارد که در تارنمای جهانگستر (World Wide Web) یا همان وب (Web) به نمایش گذاشته میشود.
بسیاری از تگهای بینمتنی برای قالببندی متن استفاده میشوند. برای مثال، یک تگ یک عنصر را به صورت درشت (بولد | Bold) رندر میکند، درحالیکه، تگهای آن را به صورت مورب (ایتالیک) نمایش خواهند داد. HTML 4.01 در اواسط ۱۳۷۶ توسط W3C ارائه و در ابتدای سال ۱۳۷۷ تبدیل به استاندارد رسمی شد. پشتیبانی از HTML 4.01 در مرورگر اینترنت اکسپلورر به طور شگفتآوری توسط مایکروسافت جدی گرفته شد. و نسخه IE5 که پیشتاز بازار بود (و به دنبال آن نسخه IE6)، پشتیبانی فوقالعادهای برای همه تگها و صفتها (Attribute) ارائه میکرد. وقتی صفحه از طریق مرورگر مشاهده میشود، تگها دیده نمیشوند اما تأثیری که تگها ایجاد میکنند قابل ملاحظه است.
{CSS چیست؟ – کاربرد، مفاهیم پایه و راهنمای شروع یادگیری
|}سوال مهم دیگری که امکان مطرح شدن آن از طرف کاربران وجود دارد در مورد فایلهای HTML است و در این مطلب از مجله فرادرس آن را بررسی میکنیم. اما فایل HTML چیست و شامل چه مواردی خواهد شد؟ این فایلها که به آنها اسناد HTML نیز گفته میشود، به عنوان اجزای سازنده وبسایتها عمل میکنند. هر سند HTML با پسوند فایل «html.» یا «htm.» ذخیره میشود و تمام محتوای متنی و تگهای ضروری برای انتقال اطلاعات ثابت به مرورگر وب را در بر میگیرد. هر صفحه وب دارای انواع عناصر درون صفحه و خارج از صفحه است که همه به دقت در اسناد HTML ساختار یافتهاند. تکامل شیوههای توسعه وب، به ویژه با ظهور CMS، رویکردی پویاتر و سادهتری را برای مدیریت و تولید صفحات وب ایجاد کرده است.
{با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
|}در دوره آموزش رایگان HTML و CSS تمامی مباحث از مقدماتی تا پیشرفته به صورت تخصصی و حرفهای توضیح داده می شود. بعد از آن، همه مواردی که برای HTML و CSS مهم است را به طور جداگانه و کامل شرح می دهیم. در کنار توضیحات تمرینها، پروژه هایی داده می شود که باعث آشنایی شما با چالش های برنامه نویسی وب می شود.
HTML به طور مداوم در حال بازبینی و تحول است تا بتواند تقاضا و نیازمندیهای روزافزون مخاطبان اینترنت را تحت مدیریت کارگروه W3C برآورده کند. W3C سازمانی است که مسئولیت طراحی و نگهداری زبان برنامه نویسی HTML را برعهده دارد. آنها خود را کارگروه تعیین تکنولوژی نحوه استفاده از ابرمتن وب (Hypertext Application Technology Working Group | WHATWG) نامیدند و یک نسخه جدید توسعه دادند. پس از بررسی و واکاویهای متعدد، W3C به این نتیجه رسید که HTML همچنان آینده وب به حساب میآید. پروژه XHTML 2 متوقف و HTML5 تبدیل به نسخه جدیدی شد که تلاش و کوشش همگان باید به آن معطوف میشد. HTML5 نسخهای است که برای مدتها مورد استفاده قرار گرفته و خواهد گرفت.
در اصل، این ترکیب عناصر HTML است که یک صفحه HTML کامل را به وجود میآورد. در این بخش از آموزش مقدماتی زبان برنامه نویسی HTML نحوه ادغام عناصر HTML برای تشکیل یک صفحه کامل HTML ارائه شده است. برای ایجاد یک صفحه HTML ابتدا باید یک فایل متنی با نام دلخواه ایجاد شود. زبان برنامه نویسی HTML به عنوان یک زبان کامپیوتری، برای ایجاد صفحات وب ابداع شده است.
{ویژگی های HTML و CSS:
|}فیلمهای آموزش طراحی سایت در قالب یک مجموعه آموزشی گردآوری شدهاند. این مجموعه، شامل ۵۵ دوره آموزشی مختلف است که مدت زمانی آنها در مجموع نزدیک به ۱۲۰ ساعت است. تاکنون، بیش از ۱۰۰ هزار دانشجو از محتوای دورهها و عناوین این مجموعه استفاده کردهاند. HTML 2.0 به عنوان دومین نسخه از زبان برنامه نویسی HTML همه مشخصات نسخه اولیه HTML 1.0 را داشت و علاوه بر آن، چند ویژگی جدید را نیز به این مجموعه اضافه کرد.
هر صفحه، حاوی مجموعهای از تگهای HTML، شامل ابَرلینکها (Hyperlink) است. هر صفحهای که در وب دیده میشود، با استفاده از یکی از نسخههای HTML نوشته و تولید شده است. تا اینجای کار با اینکه HTML چیست و تاریخچه آن به کجا و کی بازمیگردد آشنا شدیم و انواع نسخههای منتشر شده از این فناوری را مرور کردیم. اما سوالی که امکان مطرح شدن آن برای کاربران بسیار زیاد خواهد بود در مورد کاربردهای این فناوری است.
برای نمونه میتوانید به ماژول Backgrounds and Borders (+) وبسایت MDN سر بزنید تا با هدف این ماژول و مشخصهها و قابلیتهای مختلف آن آشنا شوید. همچنین لینکهایی به مشخصههای CSS که این فناوری را تعریف میکنند خواهید دید. با این حال وب در صورتی که وبسایتها این گونه بودند جای بسیار خستهکنندهای محسوب میشد. با استفاده از CSS میتوان کنترل کرد که همه عناصر HTML دقیقاً چگونه در مرورگر ظاهر میشوند. همچنین میتوان هر نوع طراحی مورد نظر را روی markup اعمال کرد.
این مسئله موجب سردرگمی و خشم پیشگامان عرصه نشانهگذاری (Markup) شد. همانطور که در کد بالا ملاحظه میشود، صفت href در داخل تگ آغازین تعریف شده است. این آدرس اینترنتی در داخل متن «Visit FaraDars» تعبیه شده و در خروجی به صورت یک لینک آبی رنگ با یک خط در زیر آن، نمایش داده خواهد شد. ابرمتن (HyperText) یعنی متنی که دارای ارجاع (لینک) به سایر متنها است. با استفاده از ابرمتن، کاربران میتوانند بلافاصله به صفحات دیگر دسترسی پیدا کنند.
عنوان سطح اول در ابتدای سند باید اینک به رنگ قرمز درآمده باشد. اگر این اتفاق افتاد نشان میدهد که با موفقیت توانستهاید CSS را روی سند HTML اعمال کنید. اگر این اتفاق نیفتاده است باید با دقت بررسی کنید که آیا همه چیز به درستی نوشته شده است یا نه. پس از HTML 4.01 و XHTML 1.0 افرادی که جهتدهی HTML را در اختیار داشتند، مشغول کار روی طرح پیشنهادی جدیدی برای XHTML 2 بودند.
وقتی مرورگرهای وب دادهها را از سرور وب شما بازیابی میکنند، HTML نقشی اساسی در تولید وبسایتهایی که روزانه کاربران با آنها مواجه میشوند، ایفا میکند. بررسی HTML به شکل خام، آرایهای از نمادها و براکتها را نشان میدهد که ممکن است خیلی برای کاربران عادی قابل درک نباشد. با این وجود، هر عنصر از اجزای سازنده HTML به ارائه محتوای نهایی داخل صفحات وب کمک زیادی میکند. از سوی دیگر، جاوا اسکریپت نوعی زبان برنامه نویسی است که عملکردهای پویا از جمله ویژگیهایی مانند گالری عکس، پاپ آپ و اسلایدر را ایجاد میکند. جاوا اسکریپت که در عصر حاضر به طور گسترده پذیرفته شده است به وسیله ۹۷ درصد وبسایتها در سراسر جهان استفاده میشود. مرورگرهای وب اصلی مجهز به موتورهای اختصاصی جاوا اسکریپت هستند که اجرای عملکردهای پویا را ساده کرده و کارایی وبسایتها را افزایش میدهند.
آموزش html css javascript رایگان