Кой таг създава абзац в документ. Форматиране на текст в HTML
Прочетете също
Всеки текст има своя уникална структура: книгите са разделени на части, раздели и глави, вестниците и списанията имат отделни заглавия и подзаглавия, които от своя страна включват текстови фрагменти, които също имат своя собствена структура: параграфи, отстъпи и т.н.
Текстът, поставен на уеб страници, не е изключение, той също трябва да има логическа структура, разбираема за всеки потребител. В крайна сметка много зависи от това колко удобен и прост ще се възприема текстът на страницата: на първо място, какво впечатление ще има посетителят за вашия сайт.
За да създадете такива структурни единици на текст като абзаци, етикетът се използва в HTML документи.
, който разделя текстовите фрагменти с вертикален отстъп (добавя се празен ред преди и след параграф).
Забележка: по подразбиране разстоянието между абзаците е 1em (em е мерна единица, равна на височината на шрифта), т.е. разстоянието между абзаците директно зависи от размера на шрифта.
За да промените отстъпите между абзаците, без да променяте размера на шрифта, можете да използвате CSS свойствомарж .
Не забравяйте затварящия етикет
Повечето браузъри ще покажат HTML документправилно, дори ако сте забравили за затварящия етикет.
Параграф
Друг параграф
Този код ще работи в повечето браузъри, но не разчитайте на него. Забравен затварящ етикет може да доведе до неочаквани резултати или грешки.
червена линия
Какво е червена линия? По дефиниция това е началният ред на абзац, който преди е бил маркиран в червено (оттук и името). Преди да бъде изобретен печатът, книгите са били написани на ръка – главата или част от текста, първата дума или буква са били изписвани с червена боя. Така се появи понятието „писане от червената линия“ - това означава началото на нова мисъл, глава или част.
Въпреки това, когато създавате уеб страници, дизайнът на червената линия се използва доста рядко, въпреки факта, че ви позволява да възприемате текста визуално с много по-голямо удобство, което е много важно за традиционния читател - не всеки се чувства удобно да чете електронен вариант на текста.
За да добавите червена линия към абзаците си, трябва да използвате CSS свойството text-indent, което ви позволява да правите отстъп на първото изречение:
Опитвам "
В горния пример първият ред на всеки абзац на страницата ще започва с отстъп от 25 пиксела. Примерът по-долу демонстрира как можете да зададете червената линия само на определен абзац на страница.
Както при всяко истинско изкуство, добри текстовеняма дреболии, към които някои включват червената линия, смятайки, че нейното използване не е толкова важно. Трябва обаче да се разбере, че всяка запетая носи както естетическо, така и семантично натоварване и не е само почит към правилата на граматиката - това важи и за форматирането.
Опитвам "Забележка: не е необходимо да задавате подложката на 25px, можете да изберете оптимален размеротстъпи, също като използвате свойството text-indent е възможно да направите линия, изпъкнала над останалата част от текста, за това трябва да зададете отрицателна стойност за свойството (например: -30px).
В последния урок за документа разгледахме шест нива на заглавия, които една html страница може да включва, научихме правилата за използване на тага „h1-h6“. В този урок ще разгледаме абзац таг, което ще придаде правилния вид на нашия текст на страницата.
В следващата публикация ще ви кажа как да направите сайта си още по-красив (не е за изпускане). Ще научим как да създадем стилен фон. Ще разделя тази публикация на две части, в първата част ще работим с Photoshop, а във втората ще играем с каскадни стилови таблици.
абзац тагили тагът за абзац "p" ви позволява да създадете абзац от текст на страницата на уеб документ. Ако не използвате тага “p”, а просто въведете текст без декорация, ще получите неструктуриран текст с грозен стил.
Когато използвате маркера за абзац, текстът става повече или по-малко четим, което прави страницата по-привлекателна. Нека да разгледаме документ, който не използва маркера абзац:
XHTML
Днес се събудих рано както винаги. Утринното слънце проби моите завеси на прозореца. Протягайки се, отидох до кухнята. Сварих зелен чай остави две лъжици захар и се настани на меко кресло пред кухненския прозорец. Навън беше есен. Харесвам това време от годината, защото смятам, че есента е най-много романтично време на годината. След като допих чая си взех мобилния и се обадих твоята любима, пожелай й добро утро. Както си мислех, тя още спеше. Ние сме сладки разговаряхме и се разбрахме да се видим днес следобед, докато грее слънцето улицата е топла. Времето отлетя незабелязано. И сега сме заедно, обядваме в местен кафене: ядем, чатим, флиртуваме един с друг. Чувстваме се добре заедно. Обичам момиче и аз също. Мисля за създаване на семейство...
|
Ето до какво стигнахме:
Текстът е грозен. Всичко е събрано, без никаква структура. Следващият пример показва използването на тага за абзац "p". Този таг е сдвоен блоков таг, но вътре може да съдържа само тагове с малки букви. Блокиращи тагове в тага "p" не са разрешени, включително самия таг "p":
XHTML
Първи параграф. За да изглежда текстът на страниците ви четим, се използва тагът „p“ абзац. Този текст е рамкиран в таг за двойка"p", което позволява на браузъра да разпознае текста като параграф.
Параграф втори. Това е вторият параграф след първия. Този параграф ще бъде с отстъп от първия параграф. Пример за използване на параграфи може да се види на фигурата по-долу.
Първи параграф. За да направите текста на вашите страници да изглежда четим използва се абзацът "p". Този текст е рамкиран в сдвоен таг "p", което позволява Браузърът ще разпознае текста като параграф. Параграф втори. Това е вторият параграф след първия. Този параграф ще има тире, от първия параграф. Пример за използване на параграфи може да се види на фигура по-долу.
|
Ето какво получихме, кодът, който започнахме да използваме абзац:
Появиха се две съставни части на страницата - два абзаца, разделени с отстъп. И така проблеми с всеки нов параграф. За нашия първи пример, където тагът за абзац не се използва, можем да приложим следното форматиране с помощта на тага "p":
XHTML
Слънчево утро
Днес се събудих рано както винаги. Утринното слънце грееше през завесите на прозореца ми. Протягайки се, отидох до кухнята. Направих си зелен чай, сложих две лъжици захар и се настаних на меко кресло пред кухненския прозорец. Навън беше есен.
Харесвам това време от годината, защото мисля, че есента е най-романтичното време от годината. След като допих чая си, взех мобилния си телефон и се обадих на любимата си, за да й пожелая добро утро. Както си мислех, тя още спеше.
Имахме приятен разговор и се разбрахме да се видим днес следобед, докато грее слънце и е топло навън. Времето отлетя незабелязано. И сега сме заедно, обядваме в местно кафене: ядем, разговаряме, флиртуваме един с друг. Чувстваме се добре заедно. Обичам приятелката си и аз също. Мисля за създаване на семейство...
Слънчево утроДнес се събудих рано както винаги. Утринното слънце грееше през завесите на прозореца ми. Протягайки се, отидох до кухнята. Направих си зелен чай, сложих две лъжици захар и се настаних на меко кресло пред кухненския прозорец. Навън беше есен. Харесвам това време от годината, защото мисля, че есента е най-романтичното време от годината. След като допих чая си, взех мобилния си телефон и се обадих на любимата си, за да й пожелая добро утро. Както си мислех, тя още спеше. Имахме приятен разговор и се разбрахме да се видим днес следобед, докато грее слънце и е топло навън. Времето отлетя незабелязано. И сега сме заедно, обядваме в местно кафене: ядем, разговаряме, флиртуваме един с друг. Чувстваме се добре заедно. Обичам приятелката си и аз също. Мисля за създаване на семейство...
|
Както може би сте забелязали, добавих заглавие към текста. Използвах само три параграфа и тази опция, както винаги, се оказа по-добра от предишната. Сега имаме семантично разделение на текста (отстъпи между абзаците). Като цяло би било правилно да се каже не „параграф“, а „параграф“, тъй като тагът „p“ на английски означава „параграф“. След това ще кажа параграф, така че не се обърквайте.
Това е приблизително това, което трябва да получите след употреба абзац таг:
Абзацният таг, както всички други html тагове, има атрибути. Сега ще разгледаме най-важните атрибути на тага "p".
- id - Указва универсалния идентификатор, използван при писане на свойства във файла с каскаден лист със стилове (обикновено style.css). Името на идентификатора се използва само веднъж в рамките на един и същи документ.
- class - същото като id, но може да се използва многократно в рамките на един и същи документ
- заглавие - подсказка, показвана в прозореца на браузъра, когато курсорът на мишката се задържи върху текста на абзаца
- стил - дефинира набор от каскадни свойства на листа със стилове
- align - определя подравняването на текста на абзаца спрямо прозореца на браузъра (ляво - ляво, дясно - дясно, център - център, ширина - оправдание)
- и т.н. (JavaScript елементи)
Пример за използване на атрибути:
XHTML
Ако преместите курсора на мишката върху този текст, ще се появи подсказка!!!
Този параграф е подравнен вляво
Този параграф е подравнен вдясно
Този параграф е централно подравнен
Този параграф има универсален идентификатор, който се отнася до свойствата, дефинирани в CSS файла, и може да се използва само веднъж на страница.
Този параграф има клас MAIN-P, може да бъде присвоен няколко пъти на страницата, за разлика от ID
Този абзац е подчертан, защото използва каскадни стилове, написани директно в този абзац, използвайки атрибута на тага STYLE. В стойността на атрибута STYLE посочих, че целият параграф трябва да бъде подчертан: UNDERLINE
с
Този абзац е подчертан, защото използва каскадни стилове, написани директно в този абзац, използвайки атрибута на тага STYLE. В стойността на атрибута STYLE посочих, че целият параграф трябва да бъде подчертан: UNDERLINE с |
Здравейте! Нека продължим да разглеждаме основите на програмирането на уебсайтове. Трудно е да си представим поне един от тях, в чийто код да не се среща абзацът. Днес ще разгледаме как да го напишем правилно и описание на няколко допълнителни действия с текста.
Пример
Нека да разгледаме пример как да направите абзац в HTML код.
Една или повече оферти.
Задължително условие е наличието на отварящ и затварящ таг. Между другото, всичко може да се направи директно в Notepad, точно тогава ще трябва да запишете файла в подходящия формат.
Форматиране
Доста често забелязвам, че хората се интересуват от това как да направят червена линия. За конкретен параграф е много просто.
Активирането на тези опции ще отстъпи първия ред с 15 пиксела от левия край. Ако такива промени трябва да се приложат към всички P тагове, тогава в CSS файла, който е свързан към страниците на сайта, можете да напишете кода, показан по-долу.
Лично аз обикновено не правя червени линии, когато редактирам код в Notepad или друг редактор.
Просто включвам подложка между текстовите блокове. За да направите това, в CSS трябва да пишете специални параметри.
p(margin-bottom:25px;)
Ако използвате този дизайн, след всеки параграф ще се появи отстъп от 25 пиксела.
Всъщност има много възможности за работа с HTML и различни стилове. Описах само няколко от тях, много е трудно да се обхване всичко в една статия.
Искате ли да знаете повече? Може да намерите предишните ми публикации по следните теми за полезни:
На това ще завърша статията и мисля, че сега няма да е трудно да правите параграфи в HTML и да ги подреждате красиво с помощта на специални тагове.
Пожелавам ви много успех в изучаването на програмирането. Между другото, мислили ли сте да печелите пари от информационни некомерсиални сайтове? Той просто предостави страхотна информация за своите читатели в.
Нормалната работа и финансите онлайн са основните теми на този блог. Можете да се запознаете с отделните перспективи онлайн точно сега от публикуваните материали. Продължавам да подготвям и публикувам ново, и най-важното, наистина полезно съдържание. Абонирайте се за актуализации на Workip на вашия електронна поща. До комуникация.
Здравейте скъпи читатели на блог! Тази статия ще говори за тагове за форматиране на текст. Видни примери са удебеляване на текста или курсив. Ще разгледаме и влиянието на някои тагове върху вътрешната оптимизация на сайта и правилата за тяхното писане. Можете да прочетете за това в статията по-долу. Между другото, можете да намерите подобни елементи на текстов дизайн в много текстови редактори, например в Word.
Таговете са разделени на 2 вида: блокови и вградени. Когато използвате първите, можете да промените съдържанието на част от текста (редове, отделни фрагменти или думи), а вторите са . Таговете за форматиране, които ще разгледаме в тази статия, са предимно вградени.
Правила и ред на писане на етикети
Вече знаете какво представляват отварящите и затварящите тагове. Ако не, тогава прочетете статията в самото начало на този материал. Накратко, има два вида тагове: единични (например прехвърляне към нова линия) и контейнер (сдвоен). И така, всички тагове за форматиране на текст са сдвоени. Това означава, че всеки елемент има отварящ и затварящ етикет и осветяването трябва да бъде поставено между тях. Например правилният избор на фраза би изглеждал така: Избор
Когато браузърът обработи този фрагмент, ще видите следния текст: Избран фрагмент.Между другото, в RSS каналвсички етикети не се показват ().
Основното нещо, когато пишете етикети, е да не забравяте да ги затворите. В противен случай целият текст на страницата ще бъде удебелен (в примера с тага ). Но има случаи, когато трябва да изберете определен фрагмент едновременно с удебелен шрифт и курсив. Но няма етикет, който да изпълнява това действие. Има само един изход от тази ситуация: използвайте два маркера едновременно. Няма значение в какъв ред ги използвате. Следователно, писане на текста с етикети като този:
Избор
или така:
Избор
Все още получавате Избор курсив и получер едновременно. За предпочитане е обаче да използвате първия вариант, тъй като първоначално той беше единственият и правилен. Също така не забравяйте, че всеки браузър може да обработва тагове по различен начин (), в зависимост от настройките. Сега нека да преминем към самите тагове за форматиране.
Правене на текст удебелен и курсив - тагове , , И
Най-популярните тагове за форматиране на текст - подчертаването му удебеленИ в курсив. Обикновено те се използват, за да се даде значение на всеки фрагмент. Първият случай служи за избор на фрагмент, съдържащ полезна информацияили ключови думи. Курсивът служи за същата цел като удебеления текст, но информацията е по-малко важна, тъй като курсивът е по-малко видим на фона на основния текст, отколкото удебеления текст.Да започнем с удебеляване на текста. За това действие се използват два тагова − И . Разлики в външен видНе. Въпреки че, като се има предвид, че всеки браузър може да интерпретира всеки елемент по различен начин, трябва да можете да видите някои разлики. Ето как изглежда текстът в етикетите И във формата, която вече е обработена от браузъра:
Текст в силни тагове
Текст в b тагове
А ето как изглеждат тези два реда в изходния код на страницата:
Текст в силни тагове Текст в b тагове
Можем да наблюдаваме същата ситуация в случая на наклонени етикети И . Опитайте се да намерите разликите между двата примера:
Текст в em тагове
Текст в тагове I
И тук източник:
Текст в em тагове Текст в тагове I
Така че разглежданите маркери за избор в удебелен шрифт и курсив всъщност не се различават, но защо тогава се нуждаем, например, от етикета ако има ? В края на краищата последният съдържа само един знак (без да броим скобите) и следователно е по-лесен за писане. И работата е там, че етикетите И засягам . Ако оградите ключови думи с тези тагове, това ще има положителен ефект върху популяризирането на сайта.Основното нещо е да не прекалявате - текстът трябва да има максимум 5% удебелен текст в етикета и същото количество курсив в етикета .
Ако просто искате да подчертаете някаква точка в текста, използвайте етикета или . По принцип мисля, че и търсачките смятат текста в тези тагове за по-важен, но нататък вътрешна оптимизацияте все още имат по-малък ефект от И .
Маркирайте текстови етикети с наклонена черта − , И
Сега нека да разгледаме няколко етикета, които използват щрих в украсата на текста. Най-известният за вас текстови редактори — етикет
или подчертаване. Този таг не влияе на класирането (доколкото знам), но ще помогне да се подчертае някакъв текст и да се фокусира върху него. Дадох пример за използване на този етикет малко по-нагоре. Още два подобни етикета - И . И двете изпълняват функцията на зачеркнат текст. Можете да използвате този етикет във всяка ситуация: ако актуализирате документ (или по-скоро част от него), можете да зачеркнете стария и да добавите нов; ако ще пишете нещо, което се отклонява от темата на материала; нещо, което не отговаря на моралните и етични норми.
Разликите между тези два етикета са само в техните писане, в резултат на което е за предпочитане да се използва първият, т.к първо, по-удобно е да пишете и второ, ще има по-малко HTML код на вашата страница и търсачките го харесват.
Етикет и атрибути - настройки на шрифта на текста
Сега помислете за етикет, който не се използва без атрибути. С него можете да задавате параметри за конкретен текст. Като цяло сега е за предпочитане да се използват (каскадни стилови таблици), т.к като ги използвате, можете значително да намалите целия HTML код на страницата. Така че, помислете за същия етикет . За него има всичко три атрибута:
- лице- самият шрифт. Например Arial, Courier или Verdana. Можете да изброите няколко, т.к. не всички потребители имат обширен набор от шрифтове и като напишат няколко в атрибута face, браузърът ще може да избере кой да използва или по-скоро кой присъства в системата;
- размере атрибут, който определя размера на текста. Може да се изрази както в произволни единици, така и в пиксели;
- цвят- цвят на текста. Този атрибут може да се използва както в HTML цветни кодове, така и във вербални. Първите изглеждат като #FFFFFF (където F е произволно число или буква от A до F), докато вторите са написани с прости думи(например червено - червено).
Ето как изглежда текстът в тага използвайки всеки атрибут:
Този текст е 6px
Този текст е червен Този текст е с шрифт Arial Този текст е червен и е с размер 5px.И ето какво ще видите след обработката на писмения код: 
Елементи за проектиране на блоков текст - Заглавия -, параграф
, параграф
Накрая ще разгледаме блоковите елементи, които се използват в почти всеки документ. Това са тагове за заглавие и параграф. Нека разгледаме първото. Заглавията се предлагат в 6 типа и всеки има свой собствен етикет. Всеки вид има само свой сериен номер и се записва с етикети.
, ,..., . Ето как изглеждат всички заглавки при обработка:
. Ето как изглеждат всички заглавки при обработка:
Числото след заглавната дума съответства на числото в тага
Сега нека поговорим за тага за избор на параграф
Функцията на този етикет е да разделя текст между друг подобен текст. празен низ. Ако погледнете изходния код на всеки документ, можете да видите следното:
Зелените правоъгълници съдържат един параграф, червените правоъгълници друг. А ето как изглежда този код след обработка от браузъра (стрелката сочи към празен ред):
В резултат на това получаваме доста забележимо отделяне на един параграф от друг, което е от полза - четенето става по-удобно.
Това е краят на статията за тагове за форматиране на документ. Има много повече, отколкото съм описал в тази статия. Просто на някои трябва да се каже доста, в резултат на което ще им бъдат посветени отделни статии с пълен преглед.!