ما تصاویر را به صفحه وب و همچنین ویدیو و صدا اضافه می کنیم! تصاویر در قالب های HTML Image

قبل از پاسخ به سوال چگونه تصویر را در html وارد کنیم؟"، لازم به ذکر است که ارزش بارگذاری صفحات وب با حجم عظیمی از مطالب گرافیکی را ندارد، زیرا این نه تنها درک بصری منبع توسط کاربر را بهبود می بخشد، بلکه زمان بارگذاری صفحه را نیز افزایش می دهد.

هنگام ایجاد وب سایت ها، فرمت های گرافیکی که معمولاً مورد استفاده قرار می گیرند PNG، GIF و JPEG هستند و برای کار طراحی با تصاویر - ویرایشگر گرافیکی فتوشاپکه دارای ویژگی های غنی برای فشرده سازی و تغییر اندازه تصویر بدون اتلاف است که برای توسعه وب بسیار مهم است.

چگونه یک تصویر را در HTML وارد کنیم؟

برای درج یک تصویر در صفحه HTML، از یک تگ ساده استفاده می شود:

,

که در آن xxx آدرس تصویر است. در صورتی که تصویر در همان دایرکتوری صفحه باشد، تگ به شکل زیر خواهد بود:

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

در زمان در دسترس نبودن، بارگیری یا در حالت "بدون عکس" مرورگر، به جای عکس نشان داده می شود. با استفاده از ویژگی alt تگ اضافه می شود. .

مثالی از افزودن متن جایگزین به یک فایل گرافیکی:

تعیین اندازه تصویر در HTML

برای تغییر ابعاد نمایش یک فایل تصویری، از تگ های ارتفاع و عرض استفاده کنید، که در آن ارتفاع، ارتفاع و عرض، عرض است، با پیکسل اندازه گیری می شود.

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

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

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

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

مثلا:

لازم به یادآوری است که در لحظه ای که اندازه اصلی تصویر را تغییر می دهید، باید نسبت های آن را حفظ کنید.

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

مکان تصویر در HTML

مانند بسیاری از تگ های HTML، از ویژگی align استفاده کنید که تصویر را تراز می کند:

- تصویر در بالای متن قرار دارد.

- تصویر در زیر متن قرار دارد.

- تصویر در سمت چپ متن قرار دارد.

- تصویر در سمت راست متن قرار دارد.

لینک عکس

این کار به صورت زیر انجام می شود:

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

چگونه می توانم یک تصویر را به صورت پس زمینه در HTML بسازم؟

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

برای مثال، بیایید تصویر بافت زیر را به عنوان تصویر پس‌زمینه تنظیم کنیم:

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

پس زمینه با متن.

تصویر پس زمینه در صفحه تنظیم شده است.

سلام به خوانندگان عزیز وبلاگ در این مقاله همه چیز را در این مورد خواهید آموخت نحوه درج تصویر در صفحه html. آیا تعدادی عکس دارید که می خواهید در صفحه خود قرار دهید یا می خواهید یک لوگو در سایت خود قرار دهید؟ همه اینها آسان است. پس از مطالعه این مقاله، قادر خواهید بود تصاویر را بدون هیچ مشکلی در صفحات html خود قرار دهید. برای انجام این کار، در مورد جزئیات صحبت خواهیم کرد تگ imgو ویژگی های آن، اجازه دهید نگاهی گذرا به قالب ها بیندازیم فایل های گرافیکیمانند gif، jpeg و png، و همچنین ویژگی‌های جدید HTML5 که جاسازی ویدیو و صدا را در سایت شما آسان‌تر می‌کند.

چون گرافیک و متن htmlنمی توان در یک فایل ترکیب کرد، رویکرد متفاوتی برای نمایش آنها در سایت نسبت به سایر عناصر صفحات html استفاده می شود. اول از همه، تصاویر گرافیکی و سایر داده های چند رسانه ای در فایل های جداگانه ذخیره می شوند. و برای جاسازی آنها در یک صفحه وب، از برچسب های ویژه ای استفاده می کنند که حاوی پیوندهایی به آن ها است فایل های فردی. به طور خاص، این برچسب است تگ img. مرورگر پس از مواجهه با چنین برچسبی با یک آدرس، ابتدا فایل مربوطه را با تصویر، صدا یا ویدئو از سرور وب درخواست می کند و تنها پس از آن آن را در صفحه وب نمایش می دهد.

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

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

فرمت های تصویری گرافیکی

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

1. فرمت JPEG(گروه مشترک کارشناسان عکاسی). یک فرمت نسبتاً محبوب که برای ذخیره تصاویر استفاده می شود. از رنگ 24 بیتی پشتیبانی می کند و تمام تون های میانی را در عکس ها دست نخورده نگه می دارد. اما jpeg از شفافیت پشتیبانی نمی کند و جزئیات و متن های ظریف را در تصاویر مخدوش می کند. JPEG عمدتا برای ذخیره عکس استفاده می شود. فایل های این فرمت دارای پسوندهای jpg، jpe، jpeg هستند.

2. فرمت GIF(فرمت تبادل گرافیکی). مزیت اصلی این فرمت قابلیت ذخیره چندین تصویر به طور همزمان در یک فایل است. این به شما امکان می دهد فیلم های متحرک کامل بسازید. دوم، از شفافیت پشتیبانی می کند. اشکال اصلی پشتیبانی از تنها 256 رنگ است که برای ذخیره عکس ها خوب نیست. GIF عمدتا برای ذخیره آرم ها، بنرها، تصاویر با مناطق شفاف و حاوی متن استفاده می شود. فایل های این فرمت دارای پسوند gif هستند.

3. فرمت PNG(گرافیک شبکه قابل حمل). این فرمت به عنوان جایگزینی برای GIF منسوخ شده و تا حدی JPEG توسعه داده شد. از شفافیت پشتیبانی می کند، اما اجازه انیمیشن را نمی دهد. این فرمت دارای پسوند png می باشد.

هنگام ایجاد وب سایت ها، معمولاً از تصاویر با فرمت JPEG یا GIF استفاده می کنند، اما گاهی اوقات از PNG استفاده می کنند. نکته اصلی این است که بفهمیم در چه مواردی از کدام قالب بهتر است استفاده کنیم. به طور خلاصه، پس:

JPEG بهترین استفاده را برای ذخیره عکس‌ها یا تصاویری در مقیاس خاکستری که حاوی متن نیستند، می‌شود.

• GIF در درجه اول برای انیمیشن استفاده می شود.
• PNG فرمتی برای هر چیز دیگری (آیکون ها، دکمه ها و غیره) است.

درج تصاویر در صفحات html

بنابراین چگونه می توان یک تصویر را در یک صفحه وب قرار داد؟ درج تصویر اجازه می دهد تا تک تگ img. مرورگر تصویر را در مکانی روی صفحه وب قرار می دهد که با تگ img مواجه می شود.

کد جاسازی تصویر در htmlصفحه به شکل زیر است:

این کد html تصویر ذخیره شده در فایل image.jpg را در صفحه وب قرار می دهد که در همان پوشه با صفحه وب قرار دارد. همانطور که متوجه شده اید، آدرس تصویر در آن مشخص شده است ویژگی src. چیه که قبلا گفتم بنابراین، ویژگی src یک ویژگی مورد نیاز است که برای تعیین آدرس فایل تصویری کار می کند. بدون ویژگی src، تگ img معنایی ندارد..

من چند مثال دیگر از مشخص کردن آدرس یک فایل با تصویر می‌آورم:

این کد html تصویری به نام image.jpg را در صفحه وارد می کند که در پوشه images واقع در ریشه وب سایت ذخیره می شود.

ویژگی src می تواند بیش از پیوندهای نسبی به تصاویر باشد. از آنجایی که تصاویر همراه با صفحات html در وب ذخیره می شوند، هر فایل تصویری دارای URL خاص خود است. بنابراین، آدرس url تصویر را می توان در ویژگی src درج کرد. مثلا:

این کد یک تصویر از mysite.ru را به صفحه وارد می کند. آدرس URL معمولاً اگر به تصویری که در سایت دیگری قرار دارد اشاره می کنید استفاده می شود. برای تصاویر ذخیره شده در سایت شما، بهتر است از لینک های نسبی استفاده کنید.

تگ img یک عنصر درون خطی است، بنابراین بهتر است آن را در داخل یک عنصر بلوک، به عنوان مثال، در داخل تگ "P" - یک پاراگراف قرار دهید:

بیایید تمرین کنیم و یک تصویر از مقالات قبلی html را در صفحه خود قرار دهیم. من یک پوشه "images" در کنار فایل html صفحه خود ایجاد می کنم و فایل تصویر "bmw.jpg" را در آنجا قرار می دهم که به شکل زیر است:

سپس کد html صفحه با تصویر درج شده به صورت زیر خواهد بود:

و ما به نتیجه نمایش در مرورگر نگاه می کنیم:

همانطور که می بینیم، در قرار دادن تصاویر در صفحات وب هیچ چیز پیچیده ای وجود ندارد. در مرحله بعد، اجازه دهید به چند ویژگی مهم دیگر تگ "img" نگاه کنیم.

ویژگی alt - به عنوان یک بازگشت

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

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

و این شکلی است که به نظر می رسد:

ابعاد تصویر را تنظیم کنید

هنوز چند ویژگی تگ img وجود دارد که باید از آنها آگاه باشید. این یک جفت صفت است عرضو ارتفاع. می توانید از آنها برای تعیین ابعاد یک تصویر استفاده کنید:

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

در حال حاضر همه چیز در مورد درج تصاویر در صفحات است، سپس نحوه درج صدا یا ویدیو را در سایت بررسی خواهیم کرد...

جاسازی ویدیو و صدا با HTML 5

مشخصات جدید html5 دارای برچسب های جدیدی است که جاسازی فایل های رسانه ای را بسیار آسان می کند. این در درجه اول برای ویدیو و صدا صدق می کند.

برای درج سمعی HTML5 تگ جفت را ارائه می دهد سمعی. آدرس فایلی که کلیپ صوتی در آن ذخیره شده است با استفاده از ویژگی src از قبل آشنا نشان داده شده است:

تگ "صوتی" در صفحه ایجاد می شود عنصر بلوک. به طور پیش فرض، مرورگر کلیپ صوتی را پخش نمی کند. برای انجام این کار، یک ویژگی خاص باید در تگ صوتی مشخص شود پخش خودکار. خاص چون مهم نیست صرف وجود این ویژگی در تگ برای تاثیرگذاری آن کافی است.

به طور پیش فرض، کلیپ صوتی به هیچ وجه در صفحه وب نمایش داده نمی شود. اما اگر یک ویژگی بدون مقدار در تگ "audio" قرار دهید کنترل ها، مرورگر در محل صفحه وب که تگ صوتی قرار داده شده است، کنترل های پخش کلیپ صوتی را نمایش می دهد. آنها شامل دکمه پخش و مکث، نوار پخش و کنترل صدا هستند.

برای درج تصاویر در HTMLدو فرمت اصلی GIF و JPEG هستند. فرمت GIF می تواند در خود ذخیره شود ساده ترین انیمیشن(بنرهای پویا)، JPEG برای تصاویر با رنگ زیاد، مانند عکس، عالی است. فرمت سوم برای گرافیک های وب، فرمت PNG است، اما در طراحی وب چندان مورد استفاده قرار نگرفته است. هر تصویری با فرمت های GIF یا JPEG با استفاده از برچسب در یک صفحه وب قرار می گیرد < img > ، بدون برچسب پایانی.

ویژگی SRC

بر اساس صفت srcآدرس (URL) فایل با تصویر تنظیم شده است، یعنی. مرورگر تصویر مورد نظر را در فهرست سایت در مسیر (آدرس URL) مشخص شده در این ویژگی پیدا می کند. برای راحتی، تمام تصاویر سایت در یک پوشه جداگانه قرار دارند که معمولاً نامگذاری شده است تصویر. به عنوان مثال، هر تصویر را ترجیحا کوچک بگیرید و در پوشه تصویر ایجاد شده با نام ذخیره کنید primer.jpg. در ادامه برای آموزش به آن اشاره می کنیم.

خوب، بیایید سعی کنیم یک تصویر را در صفحه درج کنیم؟ ما کد را می نویسیم (مسیر یک URL است، بسته به محل پوشه با تصاویر نوشته شده است):

< img src="image/primer.jpg">

متن جایگزین ویژگی ALT

متن جایگزین برای چیست؟ به ترتیب بریم هر مرورگر دارای عملکردی برای غیرفعال کردن تصاویر است، بنابراین کاربر با استفاده از چنین عملکردی می تواند با توضیحات مشخص شده در برچسب مشاهده کند. alt، که یک تصویر است. شاید این امروز بی ربط باشد، زیرا اولویت داده شده است تعرفه های نامحدود، اما همچنان یک قانون شکل خوب در نظر گرفته می شود. بیایید به مثال کد نگاه کنیم:

این را فقط با خاموش کردن نمایش تصاویر در مرورگر می توانید ببینید.

اندازه را تنظیم کنید. ویژگی های WIDTH و HEIGHT

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

ابعاد تصویر را با برچسب ها تنظیم کنید عرض- عرض و ارتفاع- ارتفاع، مقادیر هم بر حسب پیکسل و هم به صورت درصدی از عرض صفحه نمایش (با دقت با درصد) تنظیم می شوند. بیایید به کد نگاه کنیم:

نتیجه

تصاویر برای بازدیدکنندگان سایت جذاب هستند، اطلاعات بصری زیادی را ارائه می دهند، استفاده از آنها آسان است، اما اگر می خواهید یک سایت خوب و محبوب ایجاد کنید، هنوز دستورالعمل هایی وجود دارد که باید از آنها پیروی کنید.

استفاده از اندازه فایل های تصویری خیلی بزرگ ضروری نیست، زیرا این امر بر سرعت بارگذاری صفحه تأثیر می گذارد. باور کنید این آخرین شاخص نیست.

ویژگی ALT بسیار مهم است و باید برای هر تگ IMG اضافه شود. محتوا پیام متنیباید تصویر را بسیار دقیق و مختصر توصیف کند.

تصاویر موجود در یک صفحه وب باید با محتوای متن مطابقت داشته باشند.

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

در زندگی هر کپی رایتری مرحله ای از آشنایی با تگ های html پیش می آید. معمولاً این اتفاق به صورت خودجوش می افتد و شبیه درخواست مشتری برای «آماده کردن متن برای انتشار» است. این بدان معنی است که در مقاله باید سرفصل ها، پاراگراف ها، مکان های قابل توجهو لیست ها، اما نه با قابلیت های Word، بلکه با کدهای خاص زبان html. در این مورد کمک کنید برچسب ها برای کپی رایتر. لیست مورد نیاز برای کار معمولا کوچک است، اما برای قالب بندی متن با الزامات استاندارد کافی است. چه چیزی در تگ های html لازم برای یک کپی رایتر گنجانده شده است؟ (اگر برای خواندن تنبل هستید، به پایین بروید - یک اینفوگرافیک موضوعی ساده و قابل درک در مورد برچسب های html وجود دارد!)

سوالاتی که کپی رایتر می پرسد سنتی هستند. و همه آنها با عبارت شروع می شوند "چه برچسب داده شده است ...":

• عنوان؛
• پاراگراف
• بند انگشتی؛
• حروف کج
• لیست علامت گذاری شده/بدون علامت/

همه اینها به TK تند می بخشد و توسعه دانش جدید را تحریک می کند. وقتی کار استفاده از تگ متن پررنگ برای افزایش جذابیت کلید در PS است، وضعیت بدتر می شود. اما همه اینها بسیار ساده حل شده است که اکنون به آن خواهیم پرداخت.

برچسب هایی برای ایجاد هدر

تگ های عنوان با عناصر h1-h6 نشان داده می شوند. آنها نامه خود را از هدر انگلیسی (هدر) دریافت کردند. برای تنظیم نوع هدر مورد نیاز و تاکید بر اهمیت آن برای PS، از کد زیر استفاده کنید:

عنوان h1

عنوان h2

عنوان h3

عنوان h4

عنوان h5

عنوان h6

در سایت به این شکل خواهد بود.

عنوان h1

عنوان h2

عنوان h3

عنوان h4

عنوان h5

عنوان h6

عنوان h1 بیشترین اهمیت – و دید – را دارد. به عنوان عنوان پست استفاده می شود و یک بار استفاده می شود. برای عنوان های فرعی در متن، h2 و h3 توصیه می شود. آنها به تأکید بر اهمیت مطالب مورد بررسی کمک می کنند و مقاله را به سطوح اطلاعاتی تقسیم می کنند.

سرفصل‌های h4-h6 عملاً استفاده نمی‌شوند، اما برای برجسته کردن بلوک‌های منطقی و قطعات مهم مورد تقاضا هستند.

برای مقالات بزرگ، بهتر است از سرفصل های h1-h3 و برای مقالات کوچک از h1 و h2 استفاده کنید.

لیست ها: علامت گذاری شده و بدون علامت

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

1. علامت گذاری شده - آنها شماره گذاری دارند.
2. بدون علامت - عناصر با نمادها مشخص می شوند.

اما تمام طراحی های Word برای انتشار در سایت مناسب نیستند، بنابراین باید یاد بگیرید که چگونه لیست ها را در تگ های HTML به درستی قالب بندی کنید.
برچسب بزنید لیست گلوله ای به نظر می رسد که:

لیست بدون برچسب را تگ کنیدبنابراین:

علاوه بر این، هر عنصر لیست دارای html-frame خاص خود است:

به نظر می رسد که برای برجسته کردن یک لیست گلوله ای در متن با استفاده از کد html، باید هر دو نوع عنصر مورد استفاده را ترکیب کنید. شبیه این خواهد شد:

1. مورد فهرست
2. مورد فهرست
3. مورد فهرست
4. مورد فهرست

برای یک لیست بدون برچسب، به طور مشابه:

• مورد فهرست
• مورد فهرست
• مورد فهرست
• مورد فهرست

لیست ها مرتب شد می توانید ادامه دهید.

برچسب‌های تاکیدی متن: پررنگ و مورب

با درک اینکه کدام برچسب به شما امکان می دهد متن را به درستی قالب بندی کنید، تقریباً بلافاصله با دو گزینه کد برای هر مورد روبرو می شوید. این باعث سردرگمی در بین غیر برنامه نویسان و این سوال می شود: مشتری به چه نوع برچسبی نیاز دارد.

همه چیز خیلی ساده است! برچسب ها گزینه هایی را برای قالب بندی فیزیکی و منطقی ارائه می دهند. اولی برای کاربران مورد نیاز است، دومی برای موتورهای جستجو. «موتورهای جستجو» با دیدن کد html مناسب برای خود، منطقه انتخابی را در نظر گرفته و از اطلاعات دریافتی در هنگام رتبه بندی استفاده می کنند، بنابراین برجسته کردن متن با استفاده از قالب بندی منطقی خطا نخواهد داشت.

استفاده از تگ های html این امکان را فراهم می کند که موتورهای جستجو را خوشحال کرده و متن را به صورت بصری برای کاربر برجسته کند. تصمیم بگیرید که کدام مهمتر است:

برجسته کردن یک عبارت به صورت پررنگ برای PS و کاربران پررنگ کردن عبارت برای کاربران عبارت کج برای PS و کاربران یک عبارت را برای کاربران به صورت مورب بنویسید

من یک مقاله بزرگ و بسیار بحث برانگیز در مورد برچسب های پررنگ دارم که به نام .

اگر یکی از برنامه نویسان به طور ناگهانی به موضوع نگاه کند، یک بار دیگر عجله می کنم که این بررسی برای کپی رایترها است: نحوه قرار دادن برچسب ها، چه چیزی هستند و چه مواردی در هنگام انتخاب مهم است. و در نهایت، یک کد html محبوب دیگر مورد نیاز است برای برجسته کردن پاراگراف ها. آی تی

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

خوب، چند اینفوگرافیک موضوعی ساده در پایان:

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

بخوانید: 6 687

هر تگ ایجاد می کند خط جدید. بعدی در تودرتو ستون ها ایجاد می شود. می توانید چندین ستون ایجاد کنید. در این مورد، شما باید تعداد ستون های هر سطر را کنترل کنید. به عنوان مثال، اگر ردیف اول 5 ستون داشته باشد، سطرهای زیر نیز باید 5 ستون داشته باشند. در غیر این صورت جدول شناور خواهد شد. امکان ادغام سلول ها وجود دارد.

نحوه ساخت جدول در html

بیایید یک مثال بزنیم، کد html:

مثال جدول

ستون 1

ستون 2

به سلول توجه کنید . ما از ویژگی خاص colspan برای باز کردن سلول ها به صورت افقی استفاده می کنیم. مقدار عددی آن تعداد ستون هایی را که باید ادغام شوند را مشخص می کند. همچنین یک آنالوگ از این ویژگی وجود دارد: برچسب (هدر جدول)، که در آن شما همچنین باید colspan را بنویسید. نتیجه یکسان خواهد بود. اما اغلب از یک td معمولی استفاده می کنند.

حالا بیایید تمام ویژگی های برچسب را با جزئیات بررسی کنیم.

ویژگی ها و ویژگی ها را برچسب گذاری کنید

برای باز کردن برچسب

1. Property align="parameter" - تراز جدول را تنظیم می کند. می تواند مقادیر زیر را بگیرد:

در مثال بالا، جدول را با align="center" در مرکز قرار دادیم.

این ویژگی را می توان نه تنها برای جدول، بلکه برای سلول های جداول نیز اعمال کرد.

مثلا

12. Property width="number" - عرض جدول را به صورت پیکسل یا درصد تنظیم می کند.

13. Property class="class_name" - می توانید نام کلاسی که جدول به آن تعلق دارد را مشخص کنید.

14. Property style="styles" - سبک ها را می توان به صورت جداگانه برای هر جدول تنظیم کرد.

حالا وقت آن است که در داخل جدول شیرجه بزنید و به ویژگی های سلول جدول نگاه کنید. این ویژگی ها باید در تگ افتتاحیه نوشته شوند.