آموزش طراحی وبسایت با HTML و CSS: ایجاد یک قالب ساده و کاربردی % sep% آموزش طراحی قالب وردپرس

اساساً، HTML به عنوان نوعی طرح اولیه عمل می‌کند و مرورگر وب قادر است با استفاده از آن صفحه وب را هنگام وارد کردن URL به وسیله کاربران، به آن‌ها نمایش دهد. مرورگر صفحه را بر اساس عناصر تعریف شده در کد HTML می‌سازد و به همراه شیوه‌نامه CSS برای استایل بخشیدن به این عناصر کار می‌کند. معماری وب‌سایت‌ها اساساً به وسیله HTML شکل می‌گیرد که در پشت‌صحنه با «Cascading Style Sheets (CSS)» و همچنین زبان برنامه نویسی جاوا اسکریپت کار می‌کند. این اجزا با هم، وب‌سایت‌های بصری جذاب و تعاملی را برای کاربران ایجاد می‌کنند. فقدان آن اشتراک‌گذاری متن با بازدیدکنندگان وب‌سایت را غیرممکن می‌کند. حتی می‌توان در زمینه بهبود سئو و امنیت سایت و کلیه مواردی که در طراحی و ساخت وب‌سایت‌ها مورد نیاز و استفاده است، دوره‌هایی را در این مجموعه آموزشی یافت.

امکان قرار دادن همه نوع چندرسانه مثل عکس، جدول و موارد دیگر در‌ یک صفحه وب، به وسیله تگ‌های HTML وجود دارد. تنها لازم است آنچه که مرورگر باید در صفحه رندر (Render | پردازش) کند را تعیین و مشخص کرد. «[+] General Assembly Dash» نوعی منبع آموزشی HTML خارجی بوده که برای مبتدیان طراحی شده است و پروژه‌های عملی را برای زبان آموزان در طراحی وب ارائه می‌دهد.

سوال مهم دیگری که امکان مطرح شدن آن از طرف کاربران وجود دارد در مورد فایل‌های HTML است و در این مطلب از مجله فرادرس آن را بررسی می‌کنیم. اما فایل HTML چیست و شامل چه مواردی خواهد شد؟ این فایل‌ها که به آن‌ها اسناد HTML نیز گفته می‌شود، به عنوان اجزای سازنده وب‌سایت‌ها عمل می‌کنند. هر سند HTML با پسوند فایل «html.» یا «htm.» ذخیره می‌شود و تمام محتوای متنی و تگ‌های ضروری برای انتقال اطلاعات ثابت به مرورگر وب را در بر می‌گیرد. هر صفحه وب دارای انواع عناصر درون صفحه و خارج از صفحه است که همه به دقت در اسناد HTML ساختار یافته‌اند. تکامل شیوه‌های توسعه وب، به ویژه با ظهور CMS، رویکردی پویاتر و ساده‌تری را برای مدیریت و تولید صفحات وب ایجاد کرده است.

تفاوت بین HTML و CSS چیست؟

برای نمونه می‌توانید به ماژول Backgrounds and Borders (+) وب‌سایت MDN سر بزنید تا با هدف این ماژول و مشخصه‌ها و قابلیت‌های مختلف آن آشنا شوید. همچنین لینک‌هایی به مشخصه‌های CSS که این فناوری را تعریف می‌کنند خواهید دید. با این حال وب در صورتی که وب‌سایت‌ها این گونه بودند جای بسیار خسته‌کننده‌ای محسوب می‌شد. با استفاده از CSS می‌توان کنترل کرد که همه عناصر HTML دقیقاً چگونه در مرورگر ظاهر می‌شوند. همچنین می‌توان هر نوع طراحی مورد نظر را روی markup اعمال کرد.

این مسئله، به طور بالقوه‌ای XML را تبدیل به یک زبان نشانه‌گذاری بسیار قدرتمند کرده است. به همین دلیل، جای تعجبی ندارد که W3C  یک نسخه XML از HTML‌ بسازد (که XHTML نامیده می‌شود). XHTML در سال 1380 تبدیل به یک استاندارد رسمی و در سال ۱۳۸۲ به‌روزرسانی شد. XHTML بسیار مشابه HTML است اما،‌ قوانین سفت و سخت‌تری دارد.

پیش‌نیاز مطالعه این مقاله داشتن سواد عمومی رایانه، داشتن نرم‌افزارهای پایه روی سیستم، دانش مقدماتی از طرز کار با فایل‌ها و همچنین آشنایی ابتدایی با HTML است. این یعنی آن کلمه باید به صورت درشت و تأکید شده نمایش داده شود. همچنین، JavaScript برای ساخت وب‌سرورها، توسعه کاربردهای مرتبط با سرور و توسعه بازی‌های کامپیوتری نیز به کار گرفته می‌شود. یک HTA‌ بدون محدویت‌های مدل امنیتی مرورگر اینترنت اجرا می‌شود.

ویژگی های XHTML

این رندر نوعی فرآیند ساخت و ساز واقعی است که هر بار که شخصی به صفحه خاصی در سایت هدایت می‌شود، رخ می‌دهد. هر گونه مشکل در سند HTML یا فایل‌های مرتبط با آن می تواند روند رندرینگ را مختل کند. آخرین نسخه این فناوری یعنی HTML5، قابلیت‌های HTML را گسترش داده و امکان ادغام ویدیو، صدا، صفحات گسترده و برنامه‌های مختلف را مستقیماً در وب‌سایت‌ها فراهم کرده است. این بهبود و پیشرفت به ویژگی‌های پویا و تعاملی که کاربران تجربه می‌کنند کمک می‌کند. علاوه بر این، HTML امکان پیمایش یکپارچه را در وب‌سایت‌ها به وسیله لینک‌ها تسهیل می‌کند. همچنین طراحان وب‌سایت از HTML برای ایجاد فرم‌های استفاده کرده و اطلاعات مهمی مانند ایمیل‌ها و اطلاعات دیگر کاربران را جمع‌آوری می‌کنند.

• زبان برنامه نویسی HTML به عنوان یک زبان کامپیوتری، برای ایجاد صفحات وب ابداع شده است.
{
• قابلیت‌های جدید CSS از سوی گروه کاری CSS توسعه یافته و توصیف می‌شوند.
|}
• از فریم‌وُر‌ک‌های متعدد جاوا اسکریپت برای ساخت اپلیکیشن‌های وب و موبایل استفاده می‌شود.
{
• این مجموعه، شامل ۵۵ دوره آموزشی مختلف است که مدت زمانی آن‌ها در مجموع نزدیک به ۱۲۰ ساعت است.
|}
• در این بخش با مشکلات float آشنا میشویم و همچنین طریقه حل مشکلات را بررسی میکنیم با کمک مفهوم clear و کلاس clearfix .
{
• بسیاری از بخش‌های آن شناخته شده خواهند بود و عناصر جدید، صفت‌ها و قابلیت‌های هیجان‌انگیز متعددی برای آن ارائه شده و خواهد شد.
|}

به همین جهت بهتر است همواره امکان پیاده‌سازی قابلیت‌ها را بررسی کنیم. در وب‌سایت MDN در هر صفحه مربوطه به مشخصه‌ها می‌توانید وضعیت آن مشخصه را روی مرورگرهای مختلف بینید و از این رو می‌توانید در مورد استفاده از آن در وب‌سایت خود تصمیم‌گیری کنید. برای نمونه نمودار داده‌های سازگاری قابلیت‌های CSS را روی مرورگرهای مختلف در این آدرس (+) ملاحظه کنید. ابتدای پاراگراف‌ها از خط جدید آغاز می‌شود و بین پاراگراف‌ها فاصله وجود دارد. لینک‌ها رنگی هستند و زیرخط دارند تا از بقیه متن متمایز باشند. با توجه به موجود بودن منابع متعدد، یادگیری زبان برنامه نویسی HTML بسیار ساده است.

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

عناصر HTML

از آن‌جا که صفحات اینترنتی از فونت‌های مختلف، تصاویر پس‌زمینه رنگی و چندین قالب‌ متفاوت استفاده می‌کردند، فرایند بازنویسی کدهای آن‌ صفحات بسیار طولانی، پُر زحمت و هزینه‌بر بود. CSS از طریق افزودن شکل و ظاهر به عناصر صفحات اینترنتی کار می‌کند. قوانین مربوط به ظاهر عناصر در فایل CSS جداگانه‌ای نوشته شده و بعدا به فایل HTML متصل می‌شوند. جدا بودن ساختار اسکلت اصلی سایت و ظاهر آن کار توسعه‌دهندگان را ساده‌تر کرده‌ است. از ۳ دهه قبل HTML به عنوان زبان پیش‌فرض برای اسناد و وب‌سایت‌های مبتنی بر وب مورد استفاده قرار می‌گیرد. وظیفه اصلی این فناوری محبوب همکاری با مرورگرهای وب و کمک به درک ساختار و سبک وب‌سایت‌ها به وسیله این مرورگرها است.

در نهایت یک مثال عملی از لایه بندی اصلی یک سایت انجام میشود. با استفاده از CSS ، HTML و جاوا اسکریپت می‌توان به تجربه کاربری بسیار خوبی دست یافت و قابلیت‌های پیشرفته‌ای را پیاده‌سازی کرد. همان‌طور که بیان شد، اکثر عنصرهای HTML دارای یک تگ ابتدایی و انتهایی هستند که از نحو تبعیت می‌کنند. در این بخش، یک مثال از نحوه سازمان عناصر HTML ارائه شده است. در سطح ابتدایی از کاربردهای HTML می‌توان کوئری‌هایی (Query) را برای استفاده از تصاویری تنظیم کرد که به طور طبیعی واکنش‌گرا باشند. با استفاده از صفت srcset در عنصر img و ترکیب آن با عناصر Picture، یک توسعه‌دهنده می‌تواند به طور کامل نحوه رندر کردن یک تصویر توسط مرورگر در سمت کاربر را کنترل کند.

عنوان سطح اول در ابتدای سند باید اینک به رنگ قرمز درآمده باشد. اگر این اتفاق افتاد نشان می‌دهد که با موفقیت توانسته‌اید CSS را روی سند HTML اعمال کنید. اگر این اتفاق نیفتاده است باید با دقت بررسی کنید که آیا همه چیز به درستی نوشته شده است یا نه. پس از HTML 4.01 و XHTML 1.0 افرادی که جهت‌دهی HTML را در اختیار داشتند، مشغول کار روی طرح پیشنهادی جدیدی برای XHTML 2 بودند.

کتاب آموزش سریع زبان PHP معماری MVC همراه با MySQL کاملا پروژه محور

همچنین، مجموعه‌ای از مرتب‌سازی‌ها و اصلاحات تگ‌های قدیمی، تمرکز بر جهانی‌سازی و پشتیبانی از پدیده جدید صفحات پیاپی مشبک (Cascading Style Sheet | CSS) انجام شدند. در زمان معرفی HTML 3.0 افراد بیش‌تری وارد عرصه زبان برنامه نویسی HTML شده بودند. در حالی که استانداردهای قبلی قابلیت‌های مناسبی در اختیار مدیران سایت‌ها قرار می‌دادند، همچنان نیاز به امکانات و تگ‌های بیش‌تری احساس می‌شد. مدیران و گردانندگان سایت‌ها می‌خواستند وضعیت ظاهری سایت‌های خود را بهبود دهند.

سال ۱۳۷۷ (1999 میلادی) توسعه «HTML4.01» به وقوع پیوست که از گزینه‌های چندرسانه‌ای، شیوه‌نامه‌ها، امکانات چاپ و زبان‌های برنامه نویسی اضافی پشتیبانی می‌کرد. با گذشت زمان، HTML5 به استاندارد تبدیل شد و از سال ۱۴۰۱، «HTML5.2» در حال استفاده است. HTML5.2 به عنوان آخرین نسخه این فناوری وب تأکید زیادی بر سیاست امنیت محتوا دارد و نیازهای عصر معاصر را به خوبی برطرف می‌کند. برای مثال، محتوا ممکن است در قالب یک دسته از پاراگراف‌ها، لیست‌های نشانه‌دار (Bullet Points) یا استفاده از تصاویر و جداول داده باشد. جاوا اسکریپت (JavaScript |‌ JS) یک زبان برنامه نویسی است که امکان پیاده‌سازی ویژگی‌های پیچیده را در صفحات وب فراهم می‌کند.

CSS وضعیت ظاهری عناصر HTML را در صفحه نمایش، کاغذ یا سایر رسانه‌ها توصیف می‌کند. صفحات پیاپی مشبک برای قالب‌بندی آرایش صفحات وب استفاده می‌شوند. از آن‌ها می‌توان برای تعریف استایل‌های متنی، اندازه جدول‌ها و سایر مؤلفه‌های صفحات وب استفاده کرد. می‌توان گفت نیمی از طراحی یک وب‌سایت خوب مهارت و نیمه دیگر آن استعداد است.

کوئری های SQL – معرفی ۷۰ کوئری پر کاربرد با نمونه و مثال

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

یک نمونه تگ ساده HTML در ادامه به عنوان مثال ارائه شده است. HTML‌ سرنامی برای عبارت HyperText Markup Language به معنی زبان نشانه‌گذاری ابرمتن است. مفهوم دو کلمه HyperText و Markup ممکن است در ابتدا پیچیده و گنگ به نظر برسد، بنابراین، در ادامه این بخش توضیحات بیش‌تر درباره هر کدام ارائه شده است. در نخستین بخش از این سری مطالب، به مبانی مقدماتی HTML پرداخته و عناصر، خصوصیت‌ها و همچنین دیگر اصطلاح‌های مهم که ممکن است شنیده باشید را توضیح می‌دهیم. همچنین شیوه سازمان‌دهی عناصر HTML، چگونگی سازمان‌دهی صفحه HTML و دیگر ویژگی‌های مهم زبان HTML را توضیح داده‌ایم. در این مسیر با برخی مفاهیم HTML نیز در عمل کار می‌کنیم تا انگیزه یادگیری شما را حفظ کنیم.

این پلتفرم از مثال‌ها، تمرین‌ها و منابع مختلف برای یادگیری مؤثر استفاده می‌کند. «[+] Coursera» دوره‌های عمیق HTML را با نمونه‌های دنیای واقعی ارائه می‌دهد. دوره‌های آموزش این پلتفرم با پرداخت هزینه دلاری در ماه همراه در دسترس است و همچنین کاربران می‌توانند یک هفته به صورت آزمایشی از محتوای آن استفاده کنند.

فیلم‌های آموزش طراحی سایت در قالب یک مجموعه آموزشی گردآوری شده‌اند. این مجموعه، شامل ۵۵ دوره آموزشی مختلف است که مدت زمانی آن‌ها در مجموع نزدیک به ۱۲۰ ساعت است. تاکنون، بیش از ۱۰۰ هزار دانشجو از محتوای دوره‌ها و عناوین این مجموعه استفاده کرده‌اند. HTML 2.0 به عنوان دومین نسخه از زبان برنامه نویسی HTML همه مشخصات نسخه اولیه HTML 1.0 را داشت و علاوه بر آن‌، چند ویژگی جدید را نیز به این مجموعه اضافه کرد.

بخش اول: معرفی HTML

اگر برای یادگیری مباحث جذاب و پرکاربرد طراحی صفحات وب آماده هستید با ما تا آخر مسیر همراه باشید. وقتی که زبان HTML در سال ۱۹۹۰ میلادی ساخته شد، تمام هدفش نمایش اطلاعات بر روی صفحه وب بود. بعدها توسعه‌دهندگان شروع کردن به افزودن ویژگی‌های گرافیکی ساده‌ای مانند فونت‌های مختلف و رنگ‌ها. اما با مرور زمان و بزرگ‌تر شدن سایت‌ها دیگر امکان مدیریت تمام عناصر موجود در صفحه به صورت مجزا وجود نداشت. بنابراین CSS برای دادن شکل و ظاهر زیبا به فایل‌های HTML به وجود آمد. در ادامه مطلب زبان برنامه نویسی HTML‌ به این مهم پرداخته شده است.

به جای استفاده از Flash Player می‌توان به راحتی فایل‌های صوتی و ویدئویی را با استفاده از تگ‌های و در صفحات وب قرار داد. همچنین، HTML5 از تصاویر گرافیکی برداری مقیاس‌پذیر (Scalable Vector Graphics | SVG) و MathML برای فرمول‌های ریاضی و علمی پشتیبانی می‌کند. این دوره برای افرادی که به طراحی صفحات وب علاقه‌مند هستند ارائه شده است.

پیش نیازهای دوره آموزش HTML و CSS:

علاوه بر این، دیگر زبان‌های برنامه نویسی صفحات وب از این دو ابزار استفاده می کنند. با تمام ویژگی های ذکر شده مشخص است که برنامه نویسی و طراحی صفحات وب با HTML و CSS همچنان کارآمد و قدرتمند می باشد. فناوری‌های دیگری از قبیل CSS و جاوا اسکریپت نیز به این منظور به کمک آن آمده‌اند. در این مقاله به جمع‌بندی مجموعه مقالات آموزش HTML مجله فرادرس می‌پردازیم. برخی از عناصر در زبان برنامه نویسی HTML محتوایی ندارند که به آن‌‌ها عناصر خالی گفته می‌شود.

قوانین سختگیرانه برای تمام زبان‌های XML‌ضروری است چرا که، بدون آن هم‌کنش‌پذیری (Interoperability) میان برنامه‌ها امکان‌پذیر نبود. در ادامه مطلب زبان برنامه نویسی HTML چیست تاریخچه HTML‌ به طور کامل و به ترتیب برای هر نسخه شرح داده شده است. این تگ های HTML‌ است که یک متن معمولی را از کد HTML‌ تفکیک می‌کنند. تگ‌ها یا برچسب‌های HTML بین یک علامت کوچک‌تر و یک علامت بزرگ‌تر یا در واقع در داخل پرانتز گوشه‌‌دار (Angle-Bracket) مثل قرار می‌گیرند.

همچنین، هر عنصر دیگری که دارای همین مقدار class‌ یعنی editor-note باشد را نیز می‌توان هدف گرفت. مرورگر فایل HTML را می‌خواند و متن داخل آن را به یک قالب و فرم دیداری ترجمه می‌کند. انتظار می‌رود این پردازش (رندر | Render) صفحه مربوطه، به نحو مورد انتظار خالق سایت انجام شود. در خصوص ابزار مورد استفاده برای تولید صفحات HTML، می‌توان از یک ویرایش‌گر کد ابتدایی گرفته، تا یک محیط توسعه گرافیکی قدرتمند را به کار گرفت. HTML فناوری پایه توسعه وب است و نقش محوری در دنیای آنلاین امروزی به عهده دارد.

در حالت عادی وب‌سایتی با ۱۵۰ صفحه، ۱۵۰ فایل HTML جداگانه دارد. از طرفی دیگر، شیوه‌های معاصر در تولید صفحات وب بسیار تکامل یافته است. با رواج «سیستم‌های مدیریت محتوا» (CMS) که در حال حاضر بسیار مورداستفاده قرار می‌گیرند و کار با آن‌ها آسان بوده، حجم تولید این صفحات بسیار افزایش یافته است. سند HTML به عنوان نوعی راهنما برای مرورگر وب کاربر عمل می‌کند و مرورگر به کمک آن صفحات را به کابران به نمایش در می‌آورد.

نشانه‌گذاری (Markup) کاری است که تگ‌های اچ‌تی‌ام‌ال (برچسب اچ‌تی‌ام‌ال | HTML Tag) با متن داخل‌شان انجام می‌دهند. تگ‌ها متن را به عنوان یک نوع متن خاص نشانه‌گذاری می‌کنند (مثل نوع ایتالیک). در ادامه، برای آشنایی بیش‌تر با زبان برنامه نویسی HTML دو مفهوم مهم تگ HTML و صفت HTML معرفی شده است. کسب مهارت در HTML برای افرادی که مایل به دنبال کردن توسعه وب هستند بسیار مهم است. توسعه‌دهندگان وبی که HTML را یاد بگیرند فرصت‌های شغلی متعددی را پیش روی خود می‌بینند. از کار به صورت فریلنسری گرفته تا پیاده‌سازی پروژه‌های شخصی و کار برای شرکت‌های برنامه نویسی و طراحی سایت همه و همه فرصت‌های شغلی مناسبی هستند.

برای نمونه اگر بدانید که یک مشخصه خاص می‌تواند در میان موارد مشابه در فلان ماژول پیدا شود و از این رو مشخصات مشابهی دارد هنگام کار با قواعد مختلف کارتان آسان‌تر خواهد بود. در ادامه این بخش، برخی از مزایای HTML5 به همراه توضیحاتی پیرامون هر یک از این مزایا، بیان شده است. HTML و CSS هر کدام کاربردهای خاصی دارند که باعث استفاده راحت‌تر از این دو ابزار می شود. از جمله مفاهیم مهم CSS می‌توان به موارد فهرست پایین اشاره کرد.

هر صفحه، حاوی مجموعه‌ای از تگ‌های HTML، شامل ابَرلینک‌ها (Hyperlink) است. هر صفحه‌ای که در وب دیده می‌شود،‌ با استفاده از یکی از نسخه‌های HTML نوشته و تولید شده است. تا اینجای کار با اینکه HTML چیست و تاریخچه آن به کجا و کی بازمی‌گردد آشنا شدیم و انواع نسخه‌های منتشر شده از این فناوری را مرور کردیم. اما سوالی که امکان مطرح شدن آن برای کاربران بسیار زیاد خواهد بود در مورد کاربردهای این فناوری است.

مفاهیم مهم CSS شامل مواردی است که برای کار با CSS باید بلد باشیم. یکی از بهترین منابع برای آموزش CSS فیلم آموزش رایگان طراحی وب با CSS، سریع و آسان در ۱۲۰ دقیقه است. همین‌طور که در جدول بالا نشان دادیم، می‌توانیم عنصری را با استفاده از کلاس یا شماره شناسایی ID نیز هدف قرار دهیم. برای نوشتن سلکتور Class ابتدا نقطه‌ای نوشته شده و بعد از آن نام کلاس قرار می‌گیرد. CSS می‌تواند برای استایل‌بندی کاملاً ابتدایی متن اسناد مورد استفاده قرار گیرد.

وظیفه اصلی CSS این است که ظاهر و نمای وب‌سایت را به شکل بسیار زیباتری طراحی کند. برای این کار تمام المان‌های موجود در صفحه از متن‌ها و تیتر‌ها گرفته تا تصاویر و دکمه‌ها را CSS طراحی می‌کند. اندازه این عناصر، رنگ و چیدمان آن‌ها حتی حرکت آن‌ها در صفحه وابسته به کدهای CSS است. CSS از زمان تولد در سال ۱۹۹۶ با هدف برآورده کردن احتیاجات رو به تغییر اینترنت به صورت دائم ارتقا داده شده است. با این کار، CSS به ثابت بودن ظاهر وب‌سایت بر روی مرورگر‌ها و وسایل مختلف کمک کرده است. با اینکه بعضی از ویژگی‌های CSS شاید زیادی پیچیده باشند، اما هدف اصلی آن جدا کردن محتوی وب‌سایت از کدهای مربوط به شکل و ظاهر آن است.

این دوره برای افرادی که به حوزه برنامه‌نویسی و طراحی وب علاقه‌مند هستند مناسب بوده و برای تبدیل شدن به یک توسعه دهنده حرفه‌ای صفحات وب (فرانت اند) به شما کمک میکند. برنامه نویسان فرانت اند، توجهی به بهینه سازی سورس ندارند و این یکی از مهمترین بخش‌های برنامه‌نویسی و طراحی صفحات وب است. این دوره شما را با چالش‌‌های موجود در حوزه برنامه‌نویسی و طراحی وب آشنا کرده و کمک میکند این چالش‌ها برطرف کنید.

در تصویر بالا و مثالی که در اینجا ارائه شد، این محتوا تنها شامل متن است. به وسیله سازه‌های HTML امکان به کارگیری تصاویر و سایر اشیاء، همچون فُرم‌های تعاملی در صفحه رندر شده وجود دارد. در ادامه، عنصر (تگ) پاراگراف را که در بخش‌های قبلی این مطلب معرفی شد، تجزیه و به این ترتیب، ساختار HTML و اجزاء آن شرح داده شده است. در ادامه، تصویری از اجزاء و ساختار عنصر HTML به نمایش گذاشته شده است. HTML کاربرد گسترده‌ای در ایجاد صفحاتی دارد که در تارنمای جهان‌گستر (World Wide Web) یا همان وب (Web) به نمایش گذاشته می‌شود.

سلکتور دسته‌بندی، شامل نام دو یا چند عنصر می‌شود که با استفاده از کاما از یکدیگر جدا شده‌اند. در دسته‌بندی سلکتورها ترتیب قرارگرفتن نام آن‌ها اهمیتی ندارد. دستور تعریف شده بر روی تمام عناصر دسته‌بندی شده اعمال می‌شود.

کار با آیکون ها

بسیاری از تگ‌های بین‌متنی برای قالب‌بندی متن استفاده می‌شوند. برای مثال، یک تگ یک عنصر را به صورت درشت (بولد | Bold) رندر می‌کند، درحالی‌که، تگ‌های آن را به صورت مورب (ایتالیک) نمایش خواهند داد. HTML 4.01 در اواسط ۱۳۷۶ توسط W3C ارائه و در ابتدای سال ۱۳۷۷ تبدیل به استاندارد رسمی شد. پشتیبانی از HTML 4.01 در مرورگر اینترنت اکسپلورر به طور شگفت‌آوری توسط مایکروسافت جدی گرفته شد. و نسخه IE5 که پیشتاز بازار بود (و به دنبال آن نسخه IE6)، پشتیبانی فوق‌العاده‌ای برای همه تگ‌ها و صفت‌ها (Attribute) ارائه می‌کرد. وقتی صفحه از طریق مرورگر مشاهده می‌شود، تگ‌ها دیده نمی‌شوند اما تأثیری که تگ‌ها ایجاد می‌کنند قابل ملاحظه است.

آشنایی تگ img

در جدول زیر، انواع ویژگی‌های مربوط به مدیریت ظاهر متن و کاراکترهای نویسه‌ای یا CSS Typography را معرفی کرده و یک به یک توضیح داده‌ایم. بعد از سلکتورها نوبت به بلوک اعلان‌ها یا همان Declaration-ها می‌شود. یعنی یک جفت آکولاد باز و بسته که شامل یک یا چند اعلان CSS هستند. اعلان‌های CSS به مرورگرها می‌گویند که عناصر انتخاب شده را چگونه نمایش دهد.

محتوای ویدیویی و صوتی در HTML – راهنمای کاربردی

وقتی مرورگرهای وب داده‌ها را از سرور وب شما بازیابی می‌کنند، HTML نقشی اساسی در تولید وب‌سایت‌هایی که روزانه کاربران با آن‌ها مواجه می‌شوند، ایفا می‌کند. بررسی HTML به شکل خام، آرایه‌ای از نمادها و براکت‌ها را نشان می‌دهد که ممکن است خیلی برای کاربران عادی قابل درک نباشد. با این وجود، هر عنصر از اجزای سازنده HTML به ارائه محتوای نهایی داخل صفحات وب کمک زیادی می‌کند. از سوی دیگر، جاوا اسکریپت نوعی زبان برنامه نویسی است که عملکردهای پویا از جمله ویژگی‌هایی مانند گالری عکس، پاپ آپ و اسلایدر را ایجاد می‌کند. جاوا اسکریپت که در عصر حاضر به طور گسترده پذیرفته شده است به وسیله ۹۷ درصد وب‌سایت‌ها در سراسر جهان استفاده می‌شود. مرورگرهای وب اصلی مجهز به موتورهای اختصاصی جاوا اسکریپت هستند که اجرای عملکردهای پویا را ساده کرده و کارایی وبسایت‌ها را افزایش می‌دهند.

سوال HTML چیست ممکن است برای افراد بسیاری مطرح باشد؛ چرا که HTML را می‌توان پایه و اساس وب و حتی اینترنت در نظر گرفت. در این مطلب سعی شده است تا مفاهیم ابتدایی HTML به طور کامل معرفی و راهنمایی لازم برای شروع و یادگیری زبان برنامه نویسی HTML ارائه شود. کلمه CSS مخفف «Cascading Style Sheets» است و به نام زبان برنامه‌نویسی اشاره می‌کند که برای توصیف نحوه نمایش و طراحی صفحات وب استفاده می‌شود. اگر بخواهیم به طور خلاصه بگوییم هدف از ساختن CSS چیست، باید یادآور شویم که زبان HTML برای پشتیبانی از تگ‌های مربوط به طراحی ظاهری صفحات ساخته نشده است. با استفاده از HTML فقط می‌شود عبارت‌های نشانه‌گذاری شده‌ای را در صفحات اینترنتی نوشت. وجود همین‌ تگ‌ باعث ایجاد مشکلات بسیار زیادی برای توسعه‌دهندگان صفحات اینترنتی شد.

یک استایل‌شیت CSS شامل قواعد زیادی از این دست است که یکی پس از دیگری نوشته می‌شوند:

به طور کلی هر صفحه وب دارای دو بخش Client Side و Server Side است. دوم شکل، شمایل و رنگ و لعاب صفحه است که باید در CSS تعیین شود و سوم منطق برنامه در سمت کلاینت است که با زبان‌های برنامه نویسی مانند JavaScript نوشته می‌شود. در زبان برنامه نویسی HTML‌ می‌توان عناصر را در داخل عناصر دیگر قرار داد. به عنوان مثال، اگر لازم باشد یکی از کلمات در یک جمله با فونت درشت نمایش داده شود، می‌توان آن کلمه را در داخل یک تگ قرار داد. صفت‌ها حاوی اطلاعات بیش‌تر در مورد یک عنصر هستند که قرار نیست در محتوای خروجی نمایش داده شوند. در اینجا، class نام یک صفت است و editor-note مقدار این صفت است.

پرکاربرترین تگ های HTML

این عناصر یک سلسله مراتب ایجاد می‌کنند که به محتوا در قالب بخش‌ها (Sections)‌، پاراگراف‌ها،‌ سربرگ‌ها و سایر اجزاء سازمان می‌دهند. پیش از ظهور HTML5 توسعه بازی تحت وب محدود به Flash و Silverlight بود. چون مرورگرها از ملزومات جدید برای HTML5 مثل CSS3 و موتور سریع و سبک جاوا اسکریپت برای ایجاد تجربه مطلوب پشتیبانی می‌کنند،‌ HTML5‌ می‌تواند امکان توسعه بازی را به واقعیت تبدیل کند. بلکه، می‌توان از ویژگی‌های مناسب و مطلوب استفاده کرده و سایر آن‌ها را حذف کرد. در ادامه مطلب زبان برنامه نویسی HTML چیست، نوبت به کاربردهای زبان برنامه نویسی HTML‌ می‌رسد. در این آموزش، یک قالب وبسایت ساده و کاربردی با استفاده از HTML و CSS ایجاد کردیم.

ایجاد وب‌سایتی جذاب و متمایز برای به جا گذاشتن تأثیری ماندگار بر کاربران بسیار مهم است. این زبان نشانه‌گذاری به عنوان مجموعه‌ای از دستورالعمل‌ها برای مرورگرهای وب عمل کرده و نمایش بصری را هنگام ورود بازدیدکنندگان به وب‌سایت‌ها را امکان‌پذیر خواهد کرد. در مطلب پیش رو از مجله فرادرس اطلاعات کاملی از این که HTML چیست و چه کاربردی دارد و چطور باید از آن استفاده کرد و غیره ارائه خواهد شد. در پایان مطالعه این مطلب کاربران درک اولیه نسبتاً خوبی از HTML به دست خواهند آورد و با اطمینان بیشتری تصمیم به یادگیری آن خواهند گرفت. در اصل، HTML قرار دادن متن و تصاویر را در صفحه وب به درستی تضمین کرده و امکان پیمایش یکپارچه آن را برای کاربران تسهیل می‌کند.

جالب است بدانید، میزان سطح دانش مخاطبین دوره مهم نیست و هیچ محدودیتی برای یادگیری وجود ندارد. مخاطبین دوره میتوانند از بین افراد مبتدی و حتی افراد متخصص نیز باشند. همچنین دوره HTML و CSS برای افرادی که به دنبال آموزشی اصولی و پایه هستند نیز مناسب می باشد. درک مفاهیم مربوط به عملکرد CSS در عین ساده بودن، به دلیل وجود تنوع زیاد نیازمند تمرکز و تمرین زیاد هم هست. به این منظور بهتر است که از مطالب آموزشی معتبر و با کیفیت استفاده کنیم. در صورت تمایل به دانستن اینکه بهترین منابع آموزش CSS چیست می‌توانید از فیلم‌های آموزشی فرادرس استفاده کنید.

جاوا اسکریپت به کاربران اجازه می‌دهد با صفحات وب تعامل داشته باشند. از فریم‌وُر‌ک‌های متعدد جاوا اسکریپت برای ساخت اپلیکیشن‌های وب و موبایل استفاده می‌شود. اساساً CSS ظاهر اسناد HTML را شکیل‌تر و کاربرپسندتر می‌کند و به طراحان وب انعطاف‌پذیری و کنترل بیشتری بر جنبه‌های بصری وب‌سایت ارائه می‌دهد. یکی از مزایای کلیدی CSS توانایی آن در اعمال قالب‌بندی ثابت در چندین صفحه وب به وسیله فایل‌های «css.» است. این شیوه‌نامه‌ها نیاز به تکرار قالب‌بندی برای هر صفحه را از بین می‌برند و می‌توانند در حافظه پنهان ذخیره شوند و سرعت بارگذاری صفحاتی که فرمت یکسانی دارند را افزایش می‌دهند. HTML، مخفف «Hypertext Markup Language» است و زبان ساده‌ای محسوب می‌شود که در ایجاد صفحات وب استفاده می‌شود.

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

در اصل، این ترکیب عناصر HTML است که یک صفحه HTML کامل را به وجود می‌آورد. در این بخش از آموزش مقدماتی زبان برنامه نویسی HTML نحوه ادغام عناصر HTML‌ برای تشکیل یک صفحه کامل HTML ارائه شده است. برای ایجاد یک صفحه HTML ابتدا باید یک فایل متنی با نام دلخواه ایجاد شود. زبان برنامه نویسی HTML به عنوان یک زبان کامپیوتری، برای ایجاد صفحات وب ابداع شده است.

در آن زمان، شرکتی به نام Netscape با محصولی به نام Netscape Navigator، به وضوح به عنوان پیشتاز و پرچم‌دار در بازار مرورگر شناخته می‌شد. برای پاسخگویی به نیازهای کاربران HTML، این شرکت تگ‌های اختصاصی را در مرورگر Netscape Navigator معرفی کرد. این قابلیت‌های جدید، تگ‌های افزوده نت‌اسکیپ (Netscape extension tags) نام‌گذاری شدند. HTML 2.0 تا اواسط سال ۱۳۷۵ استاندارد طراحی وب محسوب می‌شد و ویژگی‌های کلیدی بسیاری را برای نخستین بار معرفی کرد. مجموعه آموزشی طراحی سایت با HTML و CSS علاوه بر دوره‌هایی که در بالا معرفی شدند، دارای ۹ عنوان آموزشی دیگر نیز هست.