Продължаваме изучаване на HTML. В този урок ще разгледаме заглавките на HTML страниците, какво представляват заглавките, как да ги използвате правилно и кога могат да се използват. Ние също така ще анализираме абзаците, така че вече да можете да запълните страницата си с текст, но най-важното - направете го правилно.

Ако не сте чели първата статия, можете да я намерите тук:

Тъй като сте на този урок, искате да проучите допълнително темата за изграждане на сайт. И с помощта на тези уроци ще имате основно разбиране какво е това.

Ами ако имате нужда от повече знания и искате може би дори да работите в тази област? По-добре е да намерите специализирани курсове. В RuNet няма толкова много добри, където се обучават разработчици на Front-end. Хареса ми програмата за обучение, която Netology има в курса "". Skillbox също има добра програма в курса „“.

Ако изучавате уеб разработка, тогава при професионалисти.

Теория и практика - Параграфи и заглавия на HTML страница

Днес ще говорим за параграфи и заглавия. Нека започнем просто - с параграфи и къде се прилагат.

Параграфи на страница

Сега ще дам пример за код, в който ще присъства тагът абзац.

Вече си спомняте основната структура от първия урок. Там разглобихме основите и разгледахме какво е HTML. Затова ще се съсредоточим върху това, което е между таговете. .

Когато пишете какъвто и да е текст на страница, независимо дали е просто абзац или малък обяснителен ред под изображението, трябва да поставите този текст вътре в тага.

В следващите уроци ще видите процеса на форматиране на тези параграфи. Сега трябва да разберете, че не можете да поставите етикет на страница без никакъв етикет. Защото в бъдеще ще бъде трудно да се прилагат някои индивидуални стилове за тази конкретна част от текста.

Опитайте се да напишете няколко параграфа. Поставете някои параграфи в етикета и оставете някои без него. И веднага ще видите разликата. Защото, ако напишете параграф вътре в този таг, той веднага ще има отстъпи. Сега нека да преминем към HTML заглавията на страницата.

HTML заглавия на страница

IN HTML документима семантика. Не говоря за технологията HTML5 и нейните нови тагове. Тук ще анализираме само най-основните, за да можете бързо да овладеете основите на HTML. Семантиката означава, че заглавия, параграфи, таблици и т.н. не трябва да се създават с помощта на един и същи етикет. Може да се направи, но HTML технологията е по-разнообразна и има подходящи тагове за различни ситуации. И просто трябва да овладеете основните тагове, за да работите свободно с HTML код.

Написах това малко въведение към факта, че за параграфи е необходимо да използвате вече познатия ви маркер. Но за заглавия се използват етикети, които започват с английската буква "H".

Ето целия списък със заглавки, които можете да използвате:

Някои от тези тагове се използват много по-често. Това са тагове като h1, h2 или h3. Ако някой вече е запознат с CSS, тогава разбира, че HTML заглавието Заглавието на страницата h3 може да бъде стилизирано по такъв начин, че да изглежда също като h1 или h2. Но значенията, които носят, макар и само за SEO оптимизация, са драстично различни. По правило тези числа, вътре в таговете, трябва да се разбират като ниво на важност на това или онова HTML заглавие. Ето защо е необходимо внимателно да се проучат тези елементи и след това търсачкивашите статии ще бъдат забелязани.

Докато стигнем до CSS, ще видите стилове на заглавия, които са зададени по подразбиране в браузърите. Ако вмъкнете тези тагове един по един и напишете някакъв текст вътре, ще видите следното:

За роботите за търсене използването на заглавия на страницата също е важно. Има определени правила, които можете да прочетете в нашата книга -.

След като сме проучили всичко, веднага влизаме в кода и се опитваме да напишем всичко със собствените си ръце. Това е най-бързият начин да овладеете всеки език за програмиране. Но HTML технологията е много по-лека от всеки език за програмиране, така че всеки може да я разбере. Така ще запомните етикетите по-добре.

Видео урок - заглавие на HTML страница? (практика)

Визуално видео на примера за работа с тези тагове:

Домашна работа

D/W:като пример, напишете кратък текст, който ще се състои от 5-7 параграфа и 2-3 различни заглавия.

Много текстови елементи на уеб страница трябва да бъдат центрирани. Предимно заглавия. Нека да видим как се прави в css подравняванецентрален текст.

свойство за подравняване на текст

Свойството text-align е отговорно за това и има четири стойности:

• Ляво - подравняване на текста спрямо левия край на елемента, в който се намира
• Вдясно - дясно подравнено, но посоката на текста остава същата
• Център - в центъра. Това е, което ни трябва. Нито един допълнителни опцииняма нужда от настройка - самият браузър ще постави текста точно в центъра на различни разделителни способности на екрана
• Justify - оправдание, когато думите във всеки ред са разтегнати така, че да заемат цялата му ширина

Например, имаме произволен текст със заглавие:

заглавка

За да подравним нашето заглавие (h1) към центъра, трябва да напишем това:

H1(
Подравняване на текст: център
}

Свойството подравнява не само обикновен текст, но и всички вградени елементи. Например едно изображение е вграден елемент по подразбиране, така че то също ще бъде засегнато от това правило.

Text-align не действа като свойство float. Ако подравняването на текста се приложи към блоков елемент с текст, тогава блокът няма да загуби своето поведение. Ще се натисне текстът в него, а не самият блок. Имайте предвид, че това е различно от свойството float, което изпраща целия елемент надясно или наляво.

Както обещах по-рано, в този урок ще научите как да подравнявате хоризонтално съдържанието на всеки HTML таг на страница, без да използвате остарелия атрибут за подравняване. Както може би се досещате, отново ще използваме стилове (CSS) или по-скоро любимия ни стилов атрибут.

Така че, за да подравните съдържанието на HTML елемент, трябва да присвоите една от следните стойности на атрибута style:

• подравняване на текст: център- Подравнете всеки ред към центъра на елемент, като например параграф.
• текст-подравняване: ляво- Всеки ред е изравнен с лявата страна на елемента (това е по подразбиране).
• подравняване на текст: надясно- Всеки ред е притиснат правилната страна.
• text-align:justify- Подравняване непосредствено към лявата и дясната страна на елемента. Ще обясни. Обикновено елемент, като абзац, има една страна на текста винаги плоска, а другата страна е „разкъсана“, тъй като дължините на редовете са малко по-различни. И когато използваме стойността text-align:justify, тогава всеки ред е равномерно разпределен по ширина. Ако е необходимо, браузърът добавя допълнителни интервали между думите, а първата и последната дума от реда винаги се притискат към съответните страни, така че блокът да е равен и от двете страни.

Пример за подравняване на съдържанието на етикета

Централно заглавие.

Централен параграф.

Резултат в браузъра

Централно заглавие.

Текстът на абзаца се натиска вдясно.

Централен параграф.

По принцип хоризонталното подравняване се прилага само за блокови тагове и клетки на таблици (повече за това по-късно). Въпреки че, от друга страна, дори и да опитате, няма да можете да го приложите на вграден (inline). Защо? Помните ли, че наскоро научихме, че ширината на вграден елемент е равна на съдържанието му? Съответно се оказва, че това съдържание просто няма къде да се подреди и браузърът просто ще игнорира вашето „изкуство“. :)

Домашна работа.

1. Създайте заглавие за статията, два от нейните раздели и един подраздел в първия раздел. И нека заглавието на статията се намира в центъра на страницата.
2. Задайте шрифта за цялата страница на Arial и всички заглавия на Times и ги оставете да бъдат в курсив.
3. Задайте цвета на текста на заглавието на статията на #FF6600, разделите на #6600FF и оставете подраздела непроменен.
4. Напишете по един параграф под всяко заглавие, като текстът на всяко от тях трябва да заема поне три реда, когато се гледа в браузър.
5. Подравнете втория параграф към центъра, третия вдясно и четвъртия към двата.

Продължаваме да изучаваме HTML. В този урок ще разгледаме заглавките на HTML страниците, какво представляват заглавките, как да ги използвате правилно и кога могат да се използват. Ние също така ще анализираме абзаците, така че вече да можете да запълните страницата си с текст, но най-важното - направете го правилно.

Ако не сте чели първата статия, можете да я намерите тук:

• Урок 1. Какво е HTML?

Теория и практика - Параграфи и заглавия на HTML страница

Днес ще говорим за параграфи и заглавия. Нека започнем просто - с параграфи и къде се прилагат.

Параграфи на страница

Сега ще дам пример за код, в който ще присъства тагът абзац.

Вече си спомняте основната структура от първия урок. Там разглобихме основите и разгледахме какво е HTML. Затова ще се съсредоточим върху това, което е между таговете. .

Когато пишете какъвто и да е текст на страница, независимо дали е просто абзац или малък обяснителен ред под изображението, трябва да поставите този текст вътре в тага.

В следващите уроци ще видите процеса на форматиране на тези параграфи. Сега трябва да разберете, че не можете да поставите етикет на страница без никакъв етикет. Защото в бъдеще ще бъде трудно да се прилагат някои индивидуални стилове за тази конкретна част от текста.

Опитайте се да напишете няколко параграфа. Поставете някои параграфи в етикета и оставете някои без него. И веднага ще видите разликата. Защото, ако напишете параграф вътре в този таг, той веднага ще има отстъпи. Сега нека да преминем към HTML заглавията на страницата.

HTML заглавия на страница

Има семантика в HTML документ. Не говоря за технологията HTML5 и нейните нови тагове. Тук ще анализираме само най-основните, за да можете бързо да овладеете основите на HTML. Семантиката означава, че заглавия, параграфи, таблици и т.н. не трябва да се създават с помощта на един и същи етикет. Може да се направи, но HTML технологията е по-разнообразна и има подходящи тагове за различни ситуации. И просто трябва да овладеете основните тагове, за да работите свободно с HTML код.

Написах това малко въведение към факта, че за параграфи е необходимо да използвате вече познатия ви маркер. Но за заглавия се използват етикети, които започват с английската буква "H".

Ето целия списък със заглавки, които можете да използвате:

Някои от тези тагове се използват много по-често. Това са тагове като h1, h2 или h3. Ако някой вече е запознат с CSS, тогава разбира, че HTML заглавието Заглавието на страницата h3 може да бъде стилизирано по такъв начин, че да изглежда също като h1 или h2. Но значенията, които те носят, поне за SEO оптимизацията, са коренно различни. По правило тези числа, вътре в таговете, трябва да се разбират като ниво на важност на това или онова HTML заглавие. Ето защо е необходимо тези елементи да се изработят много внимателно и тогава търсачките ще започнат да забелязват вашите статии.

Докато стигнем до CSS, ще видите стилове на заглавия, които са зададени по подразбиране в браузърите. Ако вмъкнете тези тагове един по един и напишете някакъв текст вътре, ще видите следното:

За роботите за търсене използването на заглавия на страницата също е важно. Има определени правила, които можете да прочетете в нашата книга − PDF книга за популяризиране на сайта.

След като сме проучили всичко, веднага влизаме в кода и се опитваме да напишем всичко със собствените си ръце. Това е най-бързият начин да овладеете всеки език за програмиране. Но HTML технологията е много по-лека от всеки език за програмиране, така че всеки може да я разбере. Така ще запомните етикетите по-добре.

Видео урок - заглавие на HTML страница? (практика)

Визуално видео на примера за работа с тези тагове:

Домашна работа

D/W:като пример, напишете кратък текст, който ще се състои от 5-7 параграфа и 2-3 различни заглавия.

Практикувайте повече в параграфи и заглавия на HTML страници!

www.sitehere.ru

Как да направите таблица в HTML

Всяка таблица съдържа редове и колони. Те от своя страна могат да съдържат текст и изображение.

За да добавите таблица към страницата, използвайте етикета

. Това е основният и основен контейнер, в който се поставят елементите на таблицата (редове и колони). И този контейнер трябва да бъде затворен -.

Редовете и колоните се дефинират с помощта на тагове И , докато вместо можете безопасно да използвате . разлика от в това, че браузърът показва текста в клетката като получер и също го подравнява към центъра на клетката - т.е. може да се използва в заглавки на таблици без допълнително форматиране. Иначе няма разлика между тях, можете да използвате всякакви.

Редове на таблицата ( ) трябва да се поставят строго между

. И колоните на таблицата ( ) от своя страна се поставят строго между таговете .

Нека създадем практична таблица, която ще се състои от един ред и четири колони. Трябва да маркираме началото на таблицата (

), начало на ред ( ), четири клетки ( ), края на таблицата (

), края на реда (

).

Резултат:

Сега нека използваме етикета да не се връща отново към него.

Резултат:

Зададох ширината на таблицата на 400 и както можете да видите, първата и третата клетка са удебелени и подравнени в центъра. Останалите са от лявата страна. Препоръчвам ви винаги да отделяте достатъчно време за форматиране на кода си, за да не се объркате. В малка маса това може да не играе голяма роля, но в голяма ...

Нека поговорим малко повече за ширината, след като я споменах. Ширината на таблицата се задава от атрибута width, височината - височина. По този начин можете да промените не само ширината и височината на таблицата, но и размерите на клетките (всички те трябва да се поберат в таблицата, в противен случай браузърът няма да разбере какво искате от него).

Тези стойности (ширина и височина) са посочени в пиксели, проценти. Можете да го оставите така, не пишете нищо, браузърът ще си помисли, че сте били твърде мързеливи да напишете „px“ и ще приемете числото като пиксели.

Е, ако искате да подравните съдържанието на една или повече клетки на таблицата, използвайте атрибута за подравняване със стойностите ляво, централно, дясно. Това е хоризонтално подравняване, но има и вертикално подравняване и то има свой отделен атрибут - valign, който може да приема следните стойности: baseline (вертикално подравняване точно по основната линия), bottom (по долния ръб), middle (клетка стойностите ще бъдат подравнени вертикално в средата), отгоре (по горния ръб). По подразбиране браузърите подравняват клетките към центъра (средата).

Увеличете рамката (границите) на таблицата и променете цвета й

Може би сте забелязали, вече ви показах как да работите с рамката и ширината на масата. По принцип по подразбиране таблицата винаги се показва в браузъра без рамка и това не винаги е удобно. Ето защо:

Съгласете се, някак си не много. Но това не е проблем за тези, които вече са запознати с HTML атрибута border, който използвах в примерите в началото на публикацията.

Добавяйки само 1 атрибут и става по-добре:

Това е като Excel! Представете си, че няма да има разделяне на клетките с линии (решетка)? Ами ужас. Но какво се случва, ако зададете границата на 10.

Както можете да видите, границата засяга само външната граница и рамката на таблицата, като променя ширината на външната рамка, като същевременно оставя границите между клетките на таблицата същите.

Нека променим цвета на тази рамка, защото има и атрибут за това - bordercolor. Задайте стойността му на "d3d3d3". Резултат:

Как да направите отстъп на таблица

Отстъпите в таблицата също са необходими за увеличаване на "четимостта", както и границите на клетките. За да създадем подложка, се нуждаем от атрибута "cellspacing". Ще продължа да работя с нашата таблица 4x4, прилагайки този атрибут към нея. Ще актуализирам кода вместо вас (включвам само един ред, за да не претрупвам публикацията):

Резултат:

Това бяха вдлъбнатините от външната страна на клетките. Но има подобен атрибут за задаване на отстъпи вътре в клетките - cellpadding, сега също ще го направя равен на 10 и ще видите как се е увеличило разстоянието от съдържанието на клетката до нейните граници (трябваше да направя броя на клетките по-малък, така че масата да не расте прекомерно). Код:

Резултат:

Сега ще премахнем "cellspacing" и ще оставим само "cellpadding". Резултат:

Така че разбрахме как да създаваме отстъпи в таблицата и да ги управляваме. Страхотен! Ако се интересувате как да направите прекъсване на ред, тогава това е написано тук.

Как правилно да обедините клетки в таблица

Има и специални атрибути за обединяване на клетки във вашата таблица. Това са "colspan" и "rowspan". Първият (colspan) комбинира клетки по колони (хоризонтално), вторият (rowspan) - по редове или вертикално. Нека присъединим нещо към нашата маса.

Тук внимателно! Когато обединявате клетки, трябва да намалите техния брой с числото (минус едно), което сте посочили в параметрите на атрибута. Ако създадете таблица в HTML, обедините клетки, без да изтривате ненужните, тогава сайтът ще отиде. Обединяваме две - изтриваме една. Обединяваме три - изтриваме две. И така нататък.

При обединяване на клетки в колони или колони трябва да се изтрие една клетка! И направете това толкова пъти, колкото броя клетки обединявате. Сега ще ви покажа един пример.

При обединяване на клетки в колони или колони трябва да се изтрие една клетка! И направете това толкова пъти, колкото броя клетки обединявате.

Сега ще ви покажа един пример. Ето нашата текуща таблица:

Нека обединим клетките с числата "1 и 2", "5 и 9", "4, 8, 12", "6 и 7". Вижте колко готино се оказа, аз самият не очаквах!

Принципът на асоцииране е следният.

Когато хоризонтално обединявате клетки номер 1 и 2, трябва да напишете „colspan =” 2 ″ в първата, да поставите съдържанието на втората в първата (ние се сливаме) и да изтриете втората клетка (или да я скриете от HTML, както аз направих - ще го покажа по-късно.)

Когато вертикално обединявате клетки номер 4, 8, 12, трябва да напишете „rowspan =” 2 ″ ”в първата клетка (номер 4) и да изтриете съдържанието на останалите, след като ги поставите в обединената клетка.

Ето кода, който измислих. Скрих клетките за по-голяма яснота (за да ви е по-лесно да разберете), но можете също да ги изтриете.

Надявам се, че обясних ясно и дадох добър пример.

Как да направите заглавка за таблица

За да дадете заглавие на таблица - използвайте тагове след началото на масата (

), но преди началото на маркера . Ето какво се случва:

Е, малко HTML хак за тези, които трябва да поставят заглавката на таблицата под самата таблица. Използвайте атрибута align със стойност bottom като тази:

И тогава заглавката на таблицата ще се премести под таблицата.

И така, покрихме почти всичко с изключение на... фона!

Как да направите красив фон за клетка или цяла маса

HTML ви позволява да зададете цвета не само за целия фон на таблицата, но и за всяка отделна клетка (ако има такава нужда). Задава цвета на фона на таблица или клетка към атрибута "bgcolor".

Нека първо задам фона за цялата маса. Това ще бъде цветът ""lightgreen"" (като цяло можете да го зададете така - "" # 90EE90 ""). Ето как започва моята таблица сега:

Резултат:

Леле, цветът на фона на клетките стана много "светлозелен". Сега ще оцветя една от клетките на таблицата обратно в бяло, давайки й същия атрибут, само с различен цвят:

Тада! Резултат:

Мисля, че е готино! Ако участвах в състезание по креативни електронни таблици (или HTML обучение на деца в предучилищна възраст), определено щях да спечеля.

Исках също да напиша как да вмъкна изображение като фон на таблица в HTML, но вече споменах това в другата ми статия на връзката по-горе.

Успех и късмет в изучаването на HTML.

blogwork.ru

Оформлението и подравняването спрямо центъра на страниците на сайта е творчески въпрос и често създава затруднения на начинаещите. Така че нека да видим как да го направим. Да предположим, че искаме да направим страница със следната структура:

Нашата страница се състои от четири блока: заглавка (header), меню (menu), съдържание (content) и долната част на сайта (footer). За да подравним към центъра на страницата, ще поставим тези четири блока в един основен блок (главен): На примера на тази структура ще разгледаме няколко опции.

Оформление и центриране на гумената площадка

При полагане на гумена площадка основната използвана единица за измерване е %, тъй като площадката трябва да се простира на ширина и да заема цялото свободно пространство.

Следователно ширината на блоковете "header" и "footer" ще бъде 100% от ширината на екрана. Ширината на блока "меню" трябва да бъде 30%, а блокът "съдържание" трябва да бъде разположен до блока "меню", т.е. трябва да има ляво поле (margin-left) с ширина, равна на ширината на блока "меню", т.е. тридесет%.

За да могат блоковете "меню" и "съдържание" да бъдат разположени един до друг, нека направим блока "меню" плаващ и го натиснете до левия ръб. Ще зададем и фоновите цветове за нашите блокове. Сега нека напишем всичко това в лист със стилове (в страницата style.css)

Височината на блоковете беше зададена условно, така че резултатът да е видим. Вижте нашата страница в браузър:

Ако преоразмерите прозореца на браузъра, ширината на всички блокове ще се промени. Това не винаги е удобно, т.к. когато блокът на менюто е разтегнат, празно място. Ето защо по-често ширината на блока "меню" се прави фиксирана, нека го направим. За да направите това, нека заменим стойностите на съответните свойства в листа със стилове: Сега нашата страница се простира по-естествено. При плавно оформление страниците заемат цялата ширина на екрана, така че не е необходимо центриране на страницата.

Но ако искате, можете да се уверите, че вашата страница има равни отстъпи отляво и отдясно на екрана. За да направим това, трябва да добавим стил към "главния" блок, който е контейнер за всички останали блокове: Сега нашата страница изглежда така:

Оформление и центриране на сайта, фиксирана ширина

В този случай ще трябва да зададем фиксирани размери за нашите блокове: Нашата страница вече е фиксирана към левия край на екрана.

В този случай подравняването към центъра на страниците на сайта може да се извърши по следния начин. Спомнете си, че нашата страница има таг "body", на който също може да се даде ширина и малко подложка.

Нека направим това: задайте ширината на тага "body" на 800 пиксела (като "main" блок) и левия отстъп (padding-left) на 50%. След това цялото съдържание на „основния“ блок ще се покаже от дясната страна на екрана (т.е. от средата надясно):

За да може нашият „главен“ блок да бъде разположен в средата на екрана, средата му трябва да съвпада със средата на тага „body“. Тези. трябва да изместим „основния“ блок наляво с половината от неговия размер. Ширината на „основния“ блок е 800 пиксела, така че трябва да зададете свойството „margin-left: -400px“ към него. Да, това свойство може да приема отрицателни стойности, в който случай лявото поле се намалява (т.е. измества се наляво). И точно това ни трябва.

Сега стиловият лист изглежда така: И нашата страница в браузъра се намира точно в средата:

Разгледахме два варианта за центриране на страниците на сайта, всъщност те не са догма. Можете да експериментирате и да измислите своя собствена версия, просто проверете нейната работа различни браузъри. За съжаление, това, което се показва добре във FireFox или Opera, може да бъде напълно неразбираемо в IE и обратното. И това трябва да се помни.

Успех в творческите търсения!

www.site-do.ru

Как да центрирам текста в html?

В HTML има две опции, които не изискват използването на CSS.

1. 1.Етикет
   Много лесен за използване таг, който центрира всички вградени елементи, които са в него, а именно:
   • текст,
   • снимки,
   • връзки,
   • както и тагове , , , и някои други.
     2. Използване на атрибута HTML подравняване с центъра на стойността.
     Трябва да добавим този атрибут вътре в тага block, който съдържа текста, който трябва да центрираме.
     Може да е етикет

     ,

     ,

     …

     и някои други.

     Атрибутът align има и други стойности:

     • align='"left'- подравняване на текста вляво
     • align='right'- дясно подравняване
     • align='justify'- подравнете текста

     Как да центрирам текст с CSS?

     Лично аз смятам, че използването на HTML тагове и атрибути в централния текст не е най-доброто решение. Ако трябва да подравните текст само на едно или две места и не ви се бърка в CSS, можете да се справите със силата на HTML, но ако искате центриране на няколко места на страницата, по-добре е използвайте CSS.

     За това имаме специално свойство подравняване на текст, което също има няколко значения:

     • подравняване на текст: център;- за централно подравняване
     • подравняване на текста: ляво;- отляво
     • подравняване на текст: надясно;- от дясната страна
     • подравняване на текста: оправдаване;- по ширината на блока или страницата.

     За да го приложите към нашия текст, можете да използвате една от предложените опции:

     1. 1. Задайте CSS клас на блоковия етикет (заглавие, формуляр, параграф или друг блоков елемент):

        И след това в CSS файла на вашия сайт пишем:

        Вместо блок-текстможе да бъде всяко друго име на клас.

        Ако трябва да центрирате подравняването на текста за всички параграфи или заглавия на сайта наведнъж, тогава не е необходимо да пишете това CSS свойство за всички. Достатъчно е да зададете или дефинирате класа или идентификатора на блока, в който се намират тези параграфи или заглавия, и след това да добавите следния запис в CSS файла:

        В този случай подравняването на текста към центъра ще бъде приложено към всички тагове

        Които са вътре в тага с блоковия клас:

        За да подравните заглавия вътре в блок с класа на блока, нотацията ще бъде малко по-различна:

     2. 2. Можете да добавите необходимите CSS свойства в самия таг, като използвате атрибута style:

        Този метод, както и атрибутът подравнетеили етикет център, е полезно само в случаите, когато трябва да се направи подравняване на едно или повече места. За групово подравняване на текст не препоръчвам да го използвате.

     Това е всичко за мен! Благодаря ви, че посетихте сайта ми! Много ще се радвам да видя вашите коментари! Успех и просперитет!

     С уважение, Юлия Гусар

     impuls-web.ru

     Атрибути в HTML

     Какво е атрибут? Атрибутът е параметър, който дава на таговете определена информация. Може да има много от тези параметри. Например с помощта на атрибути можем да подравним текста на абзац по ширина, да зададем стила и размера на шрифта, да зададем необходимите отстъпи и т.н. Атрибутите се записват вътре в таговете, последвани от знак за равенство, след което стойностите на атрибутите се посочват в двойни кавички. Атрибутите са разделени един от друг с точка и запетая.

     Примери за атрибути

     Помислете за работа с атрибути върху примери. Най-простият пример - вземете тага абзац

     С атрибута "подравняване". нека напишем:

     Пример за параграф с ляво подравняване

     Атрибутът "подравняване" казва на браузъра да подравни параграфа вляво на екрана.

     Атрибутите могат да се прилагат и към тага на параграфа:

     • align="center" - подравняване към центъра на екрана;
     • align="right" - дясно подравняване;
     • align="justify" - подравнете текста спрямо ширината на екрана.

     Сега нека усложним задачата - ще създадем HTML страница, използвайки няколко различни атрибута. Пример за такава страница ще има следния код:

     Атрибути в HTML

     Цветният атрибут "bgcolor" ни позволява да зададем цвета на фона на страницата. Атрибутите "center" и "justify" подравняват текста в себе си, съответно в центъра и по ширина.

     Заглавия в HTML

     с индекс. Има само шест такива индекса - от 1 до 6, те показват размера на заглавката (

     е най-голямата титла,

     - най-малкият). Например, нека създадем уеб страница, която има няколко заглавки. Кодът за тази страница ще изглежда така:

     Атрибути в HTML

     Какво е атрибут? Атрибутът е параметър, който дава на таговете определена информация. Тези параметри могат да бъдат неограничени.

     Заглавия в HTML

     За да създадете заглавие на страницата, се използва специален таг. с индекс. Има само шест такива индекса - от 1 до 6, те показват размера на заглавката...

     В този пример имаме две заглавия - заглавието от първо ниво няма атрибути тук, заглавието от второ ниво има атрибут за централно подравняване. След заглавията идват параграфи, които също имат свои собствени атрибути.

     Ето как работят с атрибути и заглавия в HTML. Тук няма нищо сложно. Не забравяйте да се упражнявате върху собствените си примери, за да консолидирате информацията, получена в този урок.

     siteblogger.com

     Поздрави на всички. Забелязали ли сте, че заглавието на блога, заглавието на публикацията и заглавията на притурките са извън центъра при проектиране?

     Може би някой е доволен от тази опция. Но ако искате да ги подравните, тогава тази публикация е за вас. Обикновено ние създаваме своя собствена уникална заглавка на блога с помощта на Photoshop или друг редактор. Тук, разбира се, името е разположено точно там, където искаме да бъде. Но не всеки първоначално знае как да направи това и се задоволява само с настройките, които ни се предлагат. В резултат на това заглавието на блога се измества вляво.

     Нека да видим как можем да поправим това с CSS в шаблона на блога. Нека поставим всички заглавия строго в центъра и да добавим малко уникалност към тях.

     Както обикновено, отидете в раздела шаблон и не забравяйте да направите резервно копие. Ако нещо се обърка, можете да изтеглите шаблона обратно от вашия компютър. И би било по-добре, ако засега правите всички експерименти върху тестове на блогове. Създайте друг блог за това въз основа на същия шаблон.

     Как да центрирате заглавието на блога.
     
     Раздел Шаблон - Редактиране на HTML. В горната част на шаблона щракнете върху черния маркер (стрелка) вляво.

     И тук всички CSS кодове бяха отворени пред нас. Слизаме бавно и намираме линията .Заглавие h1 (
     
     

     Веднага след скобите напишете стойността

     подравняване на текст: център;

     По този начин името на блога е разположено строго в центъра. Кликнете върху преглед на шаблона, за да видите резултата. Всичко се получи. Щракнете върху запазване.

     Но за да подправим малко нещата, нека да разгледаме още няколко CSS стила, които могат да бъдат добавени към тези скоби. Дали имате нужда или не зависи от вас. Тук има много опции. Променете стойностите на цвета.

     background:#e9967a; - цвят на фона.
     или background:url (http://www.fonstola.ru/large/201310/134392.jpg); картина вместо фон.
     височина:50px; — стойност на ширината на заглавния блок.
     текстова сянка: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); - задайте сянката на текста
     радиус на границата: 15px; - заоблени ъгли.
     -moz-box-shadow:0 0 30px #a28b53 вмъкване;
     box-shadow:0 0 30px #a28b53 вмъкване;
     -webkit-box-shadow:0 0 30px #a28b53 вмъкване;

     Маркирана в синьо е вътрешната сянка на полето за заглавие. Просто бъди внимателен. Ако промените цвета, тогава само това #e9967a(хеш и шестцифрено число). Двоеточие, скоби, тире, точка и запетая - всичко е много важно в кода.

     Как да центрирате заглавието на притурката в страничната лента.

     Ние също слизаме долу и намираме този ред
     
     .sidebar .widget h2 (
     
     

     В скоби пишем text-align: center; В този случай обаче е необходимо да зададете ширина, размер на шрифта, отстъпи. Тук използвах изображение вместо фон и зададох сянка за текста и блока.

     фон:url(http://www.fonstola.ru/large/201310/134392.jpg); фон или изображение
     височина:20px;
     ширина: 200px
     радиус на границата: 13px;
     margin-left: 0px;
     padding-top:0px; /разстояние от ръба на рамката/
     размер на шрифта: 16px; /размер на шрифта/
     подравняване на текст: център; /позиция на текста/
     текстова сянка: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /сянка за текст/
     кутия-сянка: 0 4px 6px rgba(0, 0, 0, .2); /блок сянка/
     

     www.spargalochki.ru

     Вертикално и хоризонтално центриране в CSS ниво 3

     Можем да разширим и двата метода, за да центрираме хоризонтално и вертикално едновременно.

     Страничен ефект от абсолютното позициониране на абзаца е, че абзацът става точно толкова широк, колкото трябва да бъде (освен ако изрично не посочим ширина). В примера по-долу това е точно това, което искаме: центрираме абзац от една дума („Център!“), така че ширината на абзаца трябва да е равна на тази дума.

     Жълтият фон ясно показва, че абзацът наистина е със същата ширина като съдържанието му. Предполагаме, че маркирането остава същото:

     Център!

     По отношение на вертикалното центриране този стилов лист е подобен на този в предишния пример. Но сега ние също преместваме елемента по средата на контейнера с правилото „left: 50%“ и в същото време го изместваме наляво с половината от собствената му ширина в трансформацията „translate“:

     div.container4 (височина: 10em; позиция: относителна) div.container4 p (марж: 0; фон: жълт; позиция: абсолютна; горна: 50%; ляво: 50% поле-дясно: -50%трансформиране: превод( -50%, -50%) }

     Следният пример обяснява защо е необходимо правилото „margin-right: -50%“.

     Когато форматиращият CSS поддържа "flex", нещата стават още по-лесни:

     с този стилов лист:

     Div.container6(височина: 10em; дисплей: гъвкав; подравняване на елементи: център; justify-content: център) div.container6 p (поле: 0)

     тези. единственото допълнение е 'justify-content: center'. Точно както 'align-items' дефинира вертикалното подравняване на съдържанието на контейнера, 'justify-content' дефинира хоризонталното подравняване по същия начин. (Всъщност е малко по-сложно, както подсказват имената им, но в прост случай това е как работи.). Страничен ефект от използването на свойството 'flex' е, че дъщерният елемент, P в нашия случай, автоматично става възможно най-малък.