بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

چیدمان هایHTML


طرح بندی HTML مثال

شهرها

لندن

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

لندن که بر روی رودخانه تیمز ایستاده است ، از دو هزار سال پیش ، آبادانی بزرگی بوده است بازگشت به تاسیس آن توسط رومی ها ، که آن را لوندینیم نامیدند.

پاورقی

خودتان آزمایش کنید »

المان چیدمان HTML

HTML دارای چندین المان معنایی است که قسمتهای مختلف یک صفحه وب را تعریف می کند:

المان ها معنایی HTML5
<header> - سرصفحه یک سند یا یک بخش را تعریف می کند
<nav> - مجموعه ای از پیوندهای ناوبری را تعریف می کند
<section> - بخشی را در یک سند تعریف می کند
<article> - محتوای مستقل را تعریف می کند
<aside> - محتوا را جدا از محتوا تعریف می کند (مانند یک نوار کناری)
<footer> - پانویس برای یک سند یا بخش را تعریف می کند
<details> - جزئیات اضافی را تعریف می کند که کاربر می تواند در صورت تقاضا باز و بسته کند
<summary> - عنوان المان <details> را تعریف می کند
المان ها معنایی HTML5
    <header> - سرصفحه یک سند یا یک بخش را تعریف می کند
    <nav> - مجموعه ای از پیوندهای ناوبری را تعریف می کند
    <section> - بخشی را در یک سند تعریف می کند
    <article> - محتوای مستقل را تعریف می کند
    <aside> - محتوا را جدا از محتوا تعریف می کند (مانند یک نوار کناری)
    <footer> - پانویس برای یک سند یا بخش را تعریف می کند
    <details> - جزئیات اضافی را تعریف می کند که کاربر می تواند در صورت تقاضا باز و بسته کند
    <summary> - عنوان المان <details> را تعریف می کند

روش های قرار دادن HTML

پنج روش مختلف برای ایجاد طرح بندی چند ستونی وجود دارد. هر تکنیک مزایا و معایب خود را دارد:

  • جداول HTML (توصیه نمی شود)
  • خاصیت شناور CSS (float)
  • خاصیت flexbox
  • خاصیت CSS framework (چارچوب)
  • خاصیت CSS grid (شبکه)

کدام یک را انتخاب کنیم؟

جداول HTML

عنصر <table> به عنوان یک ابزار طرح بندی طراحی نشده است! هدف از عنصر <table> نمایش داده های جدولی است. بنابراین از جدول ها برای صفحه آرایی خود استفاده نکنید! آنها کد شما را بهم می ریزند. و تصور کنید که طراحی مجدد وب سایت خود در عرض چند ماه چقدر سخت خواهد بود.

نکته : از جدول ها برای طرح صفحه خود استفاده نکنید!


چارچوب های CSS Framework

اگر می خواهید طرح خود را سریع ایجاد کنید ، می توانید از یک فریم ورک CSS مانند W3.CSS یا Bootstrap استفاده کنید. .


CSS Float (شناور )

معمولاً انجام کل طرح بندی وب با استفاده از خاصیت float CSS انجام می شود. شناور شنیدن آسان است - فقط لازم است نحوه عملکرد شناور و خصوصیات شفاف را به خاطر بسپارید. معایب: عناصر شناور به جریان سند متصل می شوند ، که ممکن است به انعطاف پذیری آسیب برساند. در فصل شناور و پاک کردن CSS در مورد شناور بیشتر بدانید.

CSS Float (شناور )

شهر ها

لندن

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

لندن که بر روی رودخانه تیمز ایستاده است ، از دو هزار سال پیش ، آبادانی بزرگی بوده است بازگشت به تاسیس آن توسط رومی ها ، که آن را لوندینیم نامیدند.

پاورقی

خودتان آزمایش کنید »

CSS Flexbox (فلکس باکس)

Flexbox یک حالت طرح بندی جدید در CSS3 است.

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

در بخش CSS Flexbox در مورد flexbox بیشتر بدانید.

مثال Flexbox

شهر ها

تهران

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

پرجمعیت‌ترین شهر و پایتخت ایران، مرکز استان تهران و شهرستان تهران است.

پاورقی

خودتان آزمایش کنید »

CSS Grid (شبکه)

ماژول طرح بندی شبکه CSS یک سیستم طرح بندی مبتنی بر شبکه را با ردیف ها و ستون ها ارائه می دهد ، طراحی صفحات وب بدون استفاده از شناورها و موقعیت یابی را آسان می کند.

معایب : در IE یا Edge 15 یا پایین تر کار نمی کند.

در بخش CSS Grid View اطلاعات بیشتری در مورد شبکه های CSS کسب کنید.






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir