Оформление текста: учебник HTML:
Web-страницы
Свойства текста задаются в виде параметров различных тэгов. Параметры записываются в открывающем тэге внутри скобок. Ниже объясняется использование основных тэгов для оформления текста.
Тэг <BODY>
Тэг <BODY> позволяет задать общие свойства для всей страницы. В параметрах открывающего тэга <BODY> можно задать цвет текста (параметр TEXT) и цвет фона (параметр BGCOLOR). Например, тэг
<BODY TEXT=»#000000″ BGCOLOR=»yellow»>
…
</BODY>
определяет черный цвет текста на желтом фоне для всей страницы.
Тэг <BODY> позволяет изменять также и цвет ссылок, которые в языке HTML называются anchors - якоря. Для этого используют параметры
- LINK — цвет обычных ссылок
- ALINK — цвет активной ссылки, на которой щелкнули мышью
- VLINK — цвет посещенных ссылок
Например, тэг
<BODY LINK=»yellow» ALINK=»red» VLINK=»blue»>
.
..
</BODY>
устанавливает желтый цвет для обычных ссылок, красный — для активных и синий — для посещенных.
Тэг <FONT>
Для того, чтобы изменить цвет, размер и стиль шрифта для части текста, используют тэг <FONT>. Он имеет три основных параметра:
- COLOR — цвет текста
- FACE — начертание (название) шрифта
- SIZE — размер шрифта (принимает целые значения от 1 до 7)
Например, тэг
<FONT COLOR=»yellow» FACE=»Courier» SIZE=»2″>
…
</FONT>
устанавливает для текста внутри области действия тэга
шрифт
size=1
size=2
size=3
size=4
size=5
size=6
size=7
Стили оформления
Существует несколько стандартных стилей оформления текста: жирный,
курсив, зачеркнутый, подчеркнутый, верхний индекс и нижний индекс..ppt/slide_7.jpg)
Вот тэги, которые отвечают за это:
- <B>…</B> (от английского bold), а так же <STRONG> — это жирный текст
- <I>…</I> (от английского italic), а так же <EM> — это курсив
- <S>…</S> (от английского strike out) —
это зачеркнутый текст - <U>…</U> (от английского underline) — это подчеркнутый текст
- <SUP>…</SUP> (от английского superscript) — это верхний индекс
- <SUB>…</SUB> (от английского subscript) — это нижний индекс
- <PRE>…</PRE> (от английского preformatted) — это специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и переходы на новую строку).
Стиль относится к тексту, заключенному между открывающим и закрывающим
тэгами.
Заголовки
Заголовки в тексте рекомендуется оформлять стандартными стилями. Текст будет выглядеть более красиво, если в оформлении его использовать заголовки. Для выделения заголовков используются парные тэги от <h2> до <H6> (от английского header), то есть, уровень заголовка изменяется от от 1 до 6. Страница с кодом
<BODY>
<h2> Заголовок документа</h2>
<h3> Заголовок раздела</h3>
<h4> Заголовок подраздела</h4>
<h5> Заголовок параграфа</h5>
<H5> Комментарий</H5>
<H6> Авторские пометки</H6>
</BODY>
будет показана так:
В заголовках тоже можно указывать тип выравнивания, так же, как для абзацев.
Специальные символы
Существуют некоторые специальные символы, для добавления которых надо
использовать их числовой код или условное обозначение, перед которым
ставится знак &.
| Символ | HTML-код | Название |
|---|---|---|
| ¡ или | неразрывный пробел | |
| ¢ | ¢ | значок цента |
| £ | £ | значок фунта стерлингов |
| ¤ | ¤ | |
| ¥ | ¥ | значок японской йены |
| § | § | параграф |
| © | © или © | символ авторского права |
| « | « или « | левая русская кавычка |
| ® | ® или ® | зарегистрированная торговая марка |
| ° | ° | градус |
| ± | ± | плюс-минус |
| ² | ² | квадрат |
| ³ | ³ | куб |
| » | » или » | правая русская кавычка |
| ¼ | ¼ | четверть |
| ½ | ½ | половина |
| ¾ | ¾ | три четверти |
| × | × | знак умножения |
| ÷ | ÷ | знак деления |
Следующий раздел рассказывает об оформлении абзацев.
Оформление текста для веб
«Вы всегда можете получить то, что хотите, но если постараетесь, то, возможно, это будет то, что вам нужно».
Мик Джаггер
В этом обзоре перечислены основные элементы юзабили (usability) – удобства пользования, – которые мне хотелось бы учесть при разработке своего нового сайта. Материал разбился на две части: на рекомендации, относящиеся к веб-дизайну, и на раздел веб-типографики, то есть оформления текста для веб.
Сделанной в 2003 году первой версии настоящего сайта я благодарен – он помог мне найти новую работу. Но теперь устарел.
Я очень неопытный веб-мастер, но сайт планирую сделать собственноручно – такое хобби. Поэтому в этой статье я не учу, я делюсь.
Обзор, возможно, будет интересен начинающим журналистам, которые решили создать собственный ресурс или модернизировать существующий.
Больше того, я убежден, что познакомиться с азами html и самому сверстать простенький сайт просто необходимо любому молодому человеку, планирующему связать жизнь с журналистикой.
Блоггеры тоже входят в целевую аудиторию статьи, поскольку так или иначе форматируют свои текстовые посты.
Напротив, материал вряд ли пригодится авторам профессиональных сайтов. В дизайн серьезных порталов изначально заложен шаблон оформления текстов и изображений, который журналист не волен изменить, даже если бы захотел.
Мы никогда не сможем изменить первое впечатление о себе
Доказано, что первое впечатление о сайте или блоге у читателя создается практически мгновенно, за доли секунды. Эффект первого впечатления сохраняется затем довольно долго. Люди не любят пересматривать свои оценки, им нравится чувствовать себя правыми.
Большинство посетителей, пришедшее с поисковиков, видит наш ресурс впервые в жизни, поэтому важно не смазать первое впечатление. Ведь человек может покинуть сайт еще до того, как прочтет хотя бы слово.
Вот почему в верхней половине списка сосредоточены сугубо дизайнерские вещи – они первыми попадают в глаза и проникают в сознание.
Что касается веб-типографики, то она становится главной, как только пользователь начинает читать.
25 важнейших элементов юзабилити
Веб-дизайн
01. Стиль
02. Цвет
03. Композиция страницы (верстка)
04. Навигация
05. Единство стиля
06. Скорость загрузки
07. Названия страниц
08. Форматирование изображений
09. Подписи к изображениям
10. Пустота
11. Пиктограммы
Веб-типографика (форматирование текста для экрана)
12. Контрастность текста и фона
13. Длина строки
14. Структурирование текста
15. Оформление заголовков
16. Кегль (размер шрифта)
17. Гарнитура (тип шрифта)
18. Интерлиньяж (межстрочное расстояние)
19. Выключка (выравнивание)
20. Акцентирование фрагментов текста
21. Списки
23. Оформление ссылок
24. Валидность кода
25. Размер текста
Такие компоненты как качество текста, корректность написания его для веб здесь выношу за скобки.
Подробнее об этом смотрите статью «Интернет-журналистика: пишем как умеем, только «хуже».
01. Стиль
Сумма всех элементов дизайна (№№ 02-25). «Одежка», по которой встречают.
Веб-дазайнер Курт Клонингер (Curt Cloninger) в своей недавно вышедшей на русском языке книге «Свежие стили веб-дазайна» анализирует:
- Готический стиль
- Гранж
- Плакатный стиль
- Панк-роковый
- Суперминиатюрный городской
- Минималистский
- Стиль чертежей и моделей
- Стиль 50-х годов
Ясно, что выбор стилей практически безграничен. Сознательный отказ от стиля – тоже стиль. Михаил Мошков, создатель Библиотеки своего имени заявляет на главной странице «С 1994 года библиотека не меняла дизайн. И не планирует».
При самом общем подходе, выбиря стиль, создатель ресурса движется по оси «навороченный – пуританский». Считается, что в моде сейчас лаконичные сайты. Так, например, подчеркнуто аскетичный ресурс поддерживает гуру юзабилити Якоб Нильсен.
Счастливая возможность, даруемая нам интернетом, – соединение на одном сайте текста, изображения, анимации, звука, видео. Очень полезная возможность для теле- и радиожурналистов. Но здесь я бы призвал к целомудрию: видео на сайте, значит видео, подкасты (радиопередачи в Сети), значит подкасты. А не пихать на одну страницу все возможности мультимедиа.
Моему грядущему сайту больше подойдет простой дизайн, поскольку на нем будут преобладать тексты.
02. Цвет
Цвет и освещенность (темный дизайн, светлый дизайн):
- Помогают серферу мгновенно отличать один сайт от другого. Цвет, после названия – самая устойчивая ассоциация с содержанием сайта.
- Вводят посетителя в нужное эмоциональное состояние. Look and feel – «увидел и почувстовал»: официоз или фан, готичная смурь или свет.
- Разделяют интерфейс на смысловые поля. Так, например, зона меню, зона основных текстов, зона комментариев, зона инфографики и т.
д. на сайте могут быть разнообразно раскрашены. - Цвет дифференцирует разделы друг от друга как любят делать на гламурных сайтах
- Цветом маркируют ссылки в активном состоянии и ссылки, по которым уже состоялся переход
Словом, цвет – это индивидуальность, эмоция, узнаваемость, понятность сайта.
Вместе с тем, цвет – это своего рода дресс-код, хорошие манеры в Сети. Дизайнеры рекомендуют применять на сайте 3-4 цвета (не больше). При этом один может быть темным, два средних, четвертый самый открытый, яркий.
Существуют методики подбора гармоничной комбинации цветов для сайта и таблицы базовых цветов, которые помогут в выборе цвета.
Часто встречается совет выбирать непременно из 216-ти так называемых безопасных цветов, которые поддерживаются всеми броузерами. Эта рекомендация во многом устарела. Современные мониторы качественно передают миллионы цветов. Так что мы можем смело назначать любые цвета.
Некоторые газетные сайты любят в Сети воспроизводить традиционный черно-белый стиль бумажного издания.
К примеру, деловая газета «Взгляд». Парадокс, но смотрится свежо.
03. Композиция страницы
Первый вопрос, который приходится решать: фиксированная будет ширина страницы или «резиновая», то есть растянутая на ширину экрана?
Сайт фиксированной ширины лучше сохраняет заданные параметры дизайна. Резиновые сайты дают больше свободы в размещении контента на странице.
О композиции. Начинающему журналисту, по совместительству дизайнеру-чайнику, достаточно соблюдать два правила:
- Принцип золотого сечения
- Принцип верстки «по модулю»
Золотое сечение применяется при назначении высоты header’а (шапки) сайта, ширины колонок и проч. Страницы, сверстанные с соблюдением принципа золотого сечения, выглядят гармонично и уравновешенно.
Модульная сетка представляет собой набор невидимых направляющих, вдоль которых располагаются элементы веб-страницы: тексты, картинки, баннеры и т. д. Верстка по модулю культурно выглядит, облегчает размещение данных в документе, обеспечивает единство стиля всех страниц ресурса.
Типичные композиционные ошибки веб-верстки:
- Нет иерархии и акцентов. На странице все выглядит одинаково, монотонно. Главная задача композиции (верстки) – управление взглядом читателя. Попав на страницу, читатель должен сразу «положить глаз» на главное. Обычно функцию ай-стоппера выполняет фотография-ссылка или заголовок-ссылка, помещенный на самое видное место.
- Симметричная трехколонная верстка. Это когда посередине размещается широкая колонка основного контента, а слева и справа – одинаковые по ширине колонки меню, рекламных баннеров и проч. Смотрится скучно, тесно.
Композиционно бывают полезны такие элементы веб-дизайна как рамки и линейки. Линейки отделяют зоны веб-страницы одну от другой. Рамки притягивают глаз к важным местам вашей страницы, например текстовым рекламным ссылкам.
Поскольку, как читатели, мы воспитаны в эпоху Гутенберга, многие (не все!) правила верстки в оффлайне сохраняют силу и в интернете.
Надеюсь, ряд полезных рекомендаций можно почерпнуть в статьях «Дизайн и верстка: базовые элементы» и «Дизайн и верстка: все начинается с макета».
На практике я, скорее всего, поступлю так: скачаю понравившийся готовый шаблон страницы и изменю его под свои задачи… до неузнаваемости. Благо, бесплатных шаблонов в Сети навалом.
04. Навигация
Основные правила веб-навигации:
- Правило трех кликов. Самый «далеко запрятанный» материал сайта должен лежать на расстоянии не глубже трех кликов от главной страницы.
- Я где? На любой странице ресурса пользователь должен знать, в каком разделе он находится, откуда пришел, куда может пойти. Эту задачу решают, в частности, сквозные меню, текстовые ссылки, баннеры.
- Быстрый возврат. Внизу каждой страницы рекомендуют ставить ссылку «В начало». На каждой странице ставят ссылку «На главную» или пиктограмму-ссылку «Домик».
Логотип сайта на каждой странице по умолчанию является ссылкой на главную (начальную) страницу.
05. Единство стиля
Все страницы ресурса должны выглядеть одинаково. Это относится к цветовой гамме, композициии, шрифтам – ко всему. В противном случае пользователь путался бы (и пугался! :-)) при переходах со страницы на страницу, не смог бы иденцифицировать ресурс, попав через поисковик на одну из вложеннных страниц.
Разумеется, это правило нарушают. Обычно главная страница отличается от вложенных (в рамках принятого стиля). На главной, где читателю важно уловить суть сообщений, а не детали, часто помещают заголовки, лиды, фото. Они ведут на страницы второго и третьего уровней с текстовой конкретикой.
Кроме того, дизайнеры-профи ценят возможность поиграть с оформлением разных разделов сайта.
06. Скорость загрузки
Сегодня проблема не так остра, как в 90-е годы – широкополосный доступ становится все доступнее.
И все равно, страницы должны быть легкими.
Утяжеляют страницы не тексты. Утяжеляют картинки.
Как снизить «вес» изображения:
- Уменьшить его разрешение до сетевого стандарта в 72 dpi
- Уменьшить линейные размеры изображения до оптимально минимальных. При необходимости показать фотографию большой и четкой – выложить ее отдельно и дать на нее ссылку. Особо учтивые сообщают в теге alt, сколько килобайт весит большое фото.
К удобству тех, кто не владеет Photoshop’ом, в Сети в изобилии имеются онлайн-редакторы изображений.
07. Названия страниц
Название страницы постоянно маячит наверху окна броузера. Что важнее, оно выводится в результатах выдачи поисковиков, и, вместе с описанием страницы (тег description), зовет пользователя на нашу страницу (или, увы, не зовет).
В интересах ранжирования в названии страницы – содержании тега title – обязательно должны присутствовать 1-2 ключевых слова.
08. Форматирование изображений
Касательно композиции, ракурса, эмоциональности фото и прочих важных для СМИ вещей смотрите статью «Фото в прессе». Общие правила фотожурналистики продолжают работать в вебе.
Имеются и отличия. На правильной газетной полосе фотографии обязательно разных размеров и пропорций. В Сети наоборот – снимки стандартизованы. Это связано с жесткостью табличного каркаса веб-страниц.
Важно для картинок в вебе:
- Вес (см. 06. Скорость загрузки)
- Наличие подписи (см. 09. Подписи к изображениям)
09. Подписи к изображениям
Снимки на сайте или в блоге, как правило, подписывают в теге alt. Я отброшу лень и стану обязательно делать это по трем причинам:
- Содержание тега alt индексируется роботами и имеет некоторое значение для ранжирования страницы (при условии, что в подпись включено ключевое слово)
- Информацию о теме снимка получит и тот читатель, кто отключил в броузере показ графики
- «Фотография без подписи – деньги на ветер» (Главред «Известий» Владимир Мамонтов, GQ, октябрь 2006, стр.
246). Каждый опубликованный снимок должен быть подписан, таков стандарт журналистики.
10. Пустота
Не нужно бояться пустого пространства на веб-странице! Пустота – это воздух, легкость, стиль. Пустота – это нынче модно.
Если страница сверстана правильно, пустоту иногда «съедает» сам пользователь, увеличивая для удобства чтения размер шрифта.
Любой текст в окружении пустоты выглядит очень значительно!
11. Пиктограммы
Пиктограммы (иконки) – небольшие картинки-символы – помогают идентифицировать сайт или раздел сайта. Разнообразят маркированные списки. Помогают навигации. Оживляют дизайн.
Пиктограмма с расширением .ico отображается рядом с url сайта в адресной строке броузера, в «Избранном» и в «Закладках», улучшая запоминаемость ресурса, повышая трафик.
12. Контрастность текста и фона
Цвет и яркость текста и фона подчиняются одному требованию: чтобы первый легко читался на втором.
Я точно не стану класть зеленые буквы на желтое поле. И наоборот.
Многие считают, что лучше черных букв на белом фоне ничего нет. Другие предпочитают чуть снижать контраст – назначают серенький фон или на белый фон кладут темно-серые буквы.
Я не стану злоупотреблять вывороткой – светлыми буквами на темном фоне. Подобный дизайн часто выглядит внушительно, но большие массивы текста на выворотке неудобочитаемы.
13. Длина строки
Большинство веб-дизайнеров сходится во мнении, что наиболее удобна для чтения строка длиной 9-10 слов или 50-70 знаков (считая пробелы).
Здесь надо сделать оговорку: «При настройках броузера по умолчанию». В интернете пользователь может изменять кегль и гарнитуру (размер и тип шрифта), что сказывается на виде строки.
14. Структурирование текста
Более или менее пространный текст, лежащий в Сети монолитным массивом, – трагическая ошибка. Никто без жгучей необходимости не станет читать опус, от которого рябит в глазах.
Я, как очень многие, тексты разбиваю:
- На главки и подтемы. Каждой предпосылаю собственный подзаголовок.
- На логические абзацы. Абзацы отделяю друг от друга пустой строкой (вместо этой статьи представьте себе неподъемный «кирпич», если бы я этого не делал!)
Один абзац посвящается одной мысли. Пользователь имеет возможность своим орлиным взором выхватить в абзаце ключевые слова.
Структурированный интернет-текст легче читать. Кроме того, его легче насытить ключевыми словами, а именно: ценные для ранжирования подзаголовки.
Разбиение текста на абзацы – простейшая операция, доступная блоггеру при оформлении блога.
15. Оформление заголовков
Заголовки следует выделять тегом h2 &mdash h6, а не тегами для форматирования основного текста. «Заголовочные» теги h* весьма значимы для эффективного индексирования страницы роботами поисковиков.
Выбирая в диапазоне от h2 до h6, будем помнить правило онлайн-журналистики: «Достаточно большой заголовок делает любую новость большой».
И давайте договоримся не набирать заголовки заглавными буквами! Исследования показали, что строки, составленные из заглавных букв читаются медленнее фраз в общепринятом начертании.
16. Кегль (размер шрифта)
Броузеры позволяют увеличить или уменьшить шрифт загруженной веб-страницы. (Проблема в том, что большинство пользователей-новичков об этом не знает.)
Относительно кегля специалисты советуют:
- Воообще не задавать размер шрифта – пусть юзер сам установит величину букв, какая его устроит.
- Задавать размеры шрифтов в относительных единицах (используя оператор em, проценты или слова bigger, smaller)
Второй путь более предпочтителен, поскольку и при растяжениях-сжатиях позволяет сохранить задуманную дизайнером композицию страницы.
Правда, размер знаков зависит от разрешения экрана у пользователя. Буква при 800х600 выглядит в два раза больше, чем при 1600х1200 на том же самом мониторе.
Единственное, что мы знаем – высокие разрешения применяются все чаще, так что ориентироваться лучше на них.
17. Гарнитура (тип шрифта)
В онлайне чаще всего применяются рубленые шрифты (sans serif):
- Arial
- Verdana
- Helvetica
- Tahoma
Считается, что рубленый шрифт выглядит более современно. Якоб Нильсен доказал, что рубленые шрифты лучше читаются при малых кеглях и малом разрешении монитора.
При этом заголовки иногда верстают шрифтами с засечками (serif):
- Times
- Times New Roman
- Georgia
- Сourier
Некоторые ресурсы, желая подчеркнуть свою традиционность, здоровый консерватизм, применяют для всего контента шрифты с засечками. Пример: деловая газета «Взгляд».
Я не слежу пристально за эволюцией веб-шрифтов, но интуиция подсказывает мне, что современные компьютеры позволяют гораздо больше, чем разрешают советчики. Пожалуй, на своем будущем сайте я назначу приоритетным какой-нибудь Bauhaus, или Futura, или Impact, или Lucida.
А то от ариалов-вердан уже тошнит.
18. Интерлиньяж (межстрочное расстояние)
Установка интерлиньяжа больше значения по умолчанию, – например 150%, заметно улучшает удобочитаемость. Межстрочное расстояние связано с длиной строки: чем длиннее строка, тем больше должен быть интерлиньяж.
19. Выключка (выравнивание)
По данным Якоба Нильсена, выравнивание текста по левому краю увеличивает скорость чтения, так как левая выключка помогает глазу найти начало новой строки.
20. Акцентирование фрагментов текста
В Сети принято выделять слово или фразу:
- Полужирным
- Курсивом
- Цветом текста или фона. Нередко цветным «маркером» выделяют лиды статей.
Опытные люди не советуют злоупотреблять при наборе верхним регистом: считается, что слова из заглавных букв в Сети воспринимаются как ОКРИК.
Акцентирование слов и предложений в массиве текста имеет значение.
Пользователи редко читают веб-страницы слово за словом. 79% юзеров (по данным John’а Morkes’а) лишь просматривают страницу, выхватывая отдельные слова и фразы.
«Все исследования нового типа чтения показывают, что электронные тексты читают не целиком, а кусками. Читатель нового века сам выбирает, что именно ему читать» (Роже Шартье, профессор, «Книжное обозрение» № 41, 2006, стр. 3).
21. Списки
Не знаю, хорошо ли это – уметь «мыслить списками», но маркированные и нумерованные списки позволяют изложить материал коротко, в удобной для просмотра форме. Опять же, списки хорошо «цепляют» скользящий взор юзера.
22. Эмотиконы (смайлики)
Для начала – цитата из Владимира Набокова, относящаяся к 1969 году: «Я часто думаю, что необходим специальный знак пунктуации для улыбки &mdash некая вогнутая линия или лежащая на боку круглая скобка».
Мечта автора «Лолиты» сбылась в Сети. Эмотиконы или смайлики широко используются для выражения самых разнообразных эмоций, которые обуревают авторов текстов в момент создания оных.
23. Оформление ссылок
Дизайнеры разработали множество видов ссылок и сценариев их поведения при подводе курсора. Сегодня ссылки не обязательно подчеркнуты линией. Но желательно, чтобы ссылка менялась – активировалась – при наведении на нее курсора. Если это не так, пользователь может счесть ссылку мертвой и – не кликнет по ней!
Вдобавок, должна «измениться в лице» ссылка, по которой состоялся переход. Это удобно: не надо запоминать, где ты был, где еще нет.
24. Валидность кода
Неразрывный пробел &nbsр не позволяет броузеру отрывать слово от слова, знак от знака. Например, чтобы в «и т. д.» буква «д.» ни у кого и никогда не перелетала в следующую строку, в коде ставят неразрывный пробел: «и т.&nbsрд.»
Неразрывный пробел иногда используется, чтобы подвинуть слова и строки на странице (когда других средств не хватает).
Тире – черта более длинная, чем дефис. В коде тире выглядит так: &mdаsh
Существуют два вида кавычек:
- Кавычки-лапки » «.
В html-коде: &quоt - Кавычки-елочки « ». В html-коде пишутся: &laquо (левая) и &raquо (правая).
В русских текстах лучше смотрятся «елочки». Что касается «лапок», то изначально это были вовсе не кавычки, а знак дюйма в английской типографике. И остается им.
Троеточие в коде обозначается не тремя точками, а &hеllip
Знак copyright ©: &coрy
Знак registered ®: &rеg
Больше на тему валидного html-форматирования текста смотрите в статье «Как это пишется в интернете».
И в «Экранной типографике» Артемия Лебедева.
Правильный (валидный) код улучшает индексирование страниц.
25. Размер текста
Мне приходилось встречать рекомендации, что оптимальный текст &mdash на 3-4 экрана. Часто я вынужден игнорировать этот совет. Какого размера надо, такой текст и пишу.
Не случайно этот «элемент» я поставил на последнее место в своем субъективном рейтинге элементов веб-дизайна и веб-типографики для начинающих журналистов.
Вместе с тем желаю (не всегда успешно) себе придерживаться великого правила «Текст должен быть коротким, если он не уникальный».
Базовое форматирование | Форматирование текста HTML, абзацы и разрывы строк
Путь // www.yourhtmlsource.com → Мой первый сайт → ОСНОВНОЕ ФОРМАТИРОВАНИЕ
Росс Шеннон
Итак, вы написали короткую страницу, чтобы доказать, что можете писать HTML. Это замечательно и все такое, но в нем чего-то не хватает, не так ли? Вы хотите, чтобы что-то выделялось больше, хотите пропускать строки и использовать курсив.
Вы хотите отформатировать .
Навигация по страницам:
Форматирование текста
| Отметить вопросы
| Пропуск строк
| Атрибуты
| Заголовки
· Итак, давайте посмотрим на них!
| Линии
| Комментарии
| Разнесены
| Первая проверка
Эта страница последний раз обновлялась 21 августа 2012 г.
- Примечание:
- Во время написания кода у вас должны быть одновременно открыты и редактор, и браузер.
Всякий раз, когда вы вносите изменения в свой html-код, сохраните его, переключитесь в браузер и нажмите , обновить , и страница обновится до самой новой версии.
Форматирование текста
Ну, вы же помните из прошлого туториала, как вам понадобился начальный тег и конечный тег верно? Начните с начального тега, закончите конечным тегом. Простой. Вы уже знаете, что означает жирный шрифт. Давайте обновим.
Привет, меня зовут Росс и я блестящий . Да, верно, я гениальный !
Ах… теперь я чувствую себя хорошо. Кроме того, я хитро замаскировал это под урок HTML. Чтобы сделать жирный текст, я сделал следующее:
гениально
Вот и все. Просто окружите нужный текст этими тегами.
Надеюсь, скоро будет еще интереснее, а? Хорошо, хотите выучить курсив ? Это так же просто.
Код для этого i . Таким же образом:
превосходный материал становится превосходным материалом .
Подчеркивание тоже смехотворно просто — просто используйте
Просто подчеркните меня, мааан
Возвращаясь к дням продуктовых карточек, вы может даже сделать так, чтобы ваш текст выглядел так, будто его напечатали на пишущей машинке — используйте тт .
День двенадцатый. Немцы окружили наш хутор
становится… что в таком тексте.
Во всех приведенных выше примерах используются презентационные теги. Вместо этого вы можете использовать логические теги, которые сделают ваш контент более доступным.
Ваш браузер отображает только один пробел между словами. Если вы добавите больше пробелов в исходный код, они будут проигнорированы. Если вы хотите принудительно добавить дополнительные пробелы, вы можете использовать специальный символ , что означает «неразрывное пространство».
При этом вы можете создавать отступы для вашего текста.
Этот текст будет иметь отступ
Вопросы по тегам
Должны ли теги быть написаны ЗАГЛАВНЫМИ БУКВАМИ?
Нет, не знают. Вы можете использовать или . Я предпочитаю делать все строчными, потому что это выглядит намного аккуратнее, когда вы читаете и редактируете свой код, и подходит для версии HTML, в которой я кодирую, но это не меняет того, как они работают. Тебе решать.
Можно ли смешивать их вместе?
Ты действительно становишься предприимчивым, не так ли? Да, ты можешь. Просто окружите нужный текст обоими наборами тегов — вот так
Следует отметить, однако, что порядок, в котором вы размещаете их в . Если вы начнете с b , вы закончите с b . В приведенном выше примере был последним открытым тегом, поэтому это 9-й тег.
0010 первый один закрытый. Это то, что вы должны помнить, потому что важность синтаксиса вашего тега становится критической позже. Этот стиль открытия и закрытия называется LIFO — «последний пришел, первый ушел».
Такое размещение тегов друг в друге называется вложением .
Пропуск строк
Вы, наверное, уже заметили, что при отображении в браузере ваша страница кажется лишенной всех абзацев и прочего. Ваш браузер игнорирует любые возвраты и отступы. Ну так что ты делаешь? Вы используете , что означает «строка BR eak». Это известно как «пустой элемент» — тег, которому не нужен закрывающий тег — просто введите его, и текст начнется с новой строки.
Или как насчет пропуска строки и создания абзацев? Для этого используйте p . Вы можете просто поместить его в конец абзаца, чтобы пропустить строку и перейти к следующей; или можно поставить
Я предпочитаю последний, потому что он выглядит аккуратнее и дает больше гибкости. Вы должны использовать его слишком. Добро пожаловать на мою страницу.
Надеюсь, вам понравится.
Атрибуты
Теперь я собираюсь сделать немного более продвинутым. Для центрирования текста используется базовый тег выровнять по абзацу. Это включает присвоение тегу атрибута . Тег сам по себе что-то делает, но затем вы можете добавить атрибуты для дальнейшего определения того, что делает тег. Позже вы увидите множество других тегов, имеющих атрибуты — они являются очень важной частью HTML. Структура атрибута:
Затронутый текст Все теги могут иметь несколько атрибутов одновременно, но для определенных тегов работают только некоторые атрибуты. Это просто вопрос их обучения.
Кроме того, не забудьте заключить значение в кавычках .
Таким образом, чтобы добавить значение center к тегу p , структура будет следующей:
Centered Text
Сравните это с примером выше, чтобы увидеть Что к чему. p — тег, align — атрибут, center — значение атрибута.
Обратите внимание, что когда закрывает исходный тег ( p ), все его атрибуты берутся вместе с ним, и все, что вам нужно, это обычный закрывающий тег (т.е. не начинайте вставлять в него атрибуты).
Очевидно, что если его можно выровнять по центру, его можно выровнять и другими способами. Вы можете выровнять по левому краю и по правому краю . Но нет смысла писать 
Заголовки
Вначале тэги заголовков были изобретены как градуированный метод размещения и разделения информации. Вы использовали большие заголовки для основных моментов на странице и спускались по номерам. Существует 6 категорий или уровней заголовков HTML: до . Графически они создают текст с уменьшением размера: h2 — самый большой, а h6 — самый маленький из группы.
Итак, давайте их посмотрим!
О, это моя реплика. Хорошо: вот примеры:
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Вы просто оборачиваете предпочтительный тег заголовка вокруг текста, например:
Заголовок 3
Текст станет жирным и большим. Следует отметить, что заголовки всегда располагаются на расстоянии 90 022 на расстоянии 90 023 от остального текста, как абзац. Это свойство тегов блочного уровня. Вы не можете объединить заголовки и обычный текст.
Если вы хотите, чтобы текст следовал сразу же, вы должны просто изменить размер шрифта и не использовать заголовок.
Название вашей страницы должно быть преобразовано в заголовок первого уровня. Остальная часть вашей страницы должна быть разделена на разделы с дополнительными тегами заголовков, которые постепенно уменьшаются для пунктов и подпунктов. Старайтесь не пропускать уровни (например, переходить с до ).
sourcetip: Заголовки принимают цвет и шрифт окружающего текста, поэтому вы можете изменить цвет заголовков, скажем, обернув цвет шрифта вокруг тега h . Прочтите этот учебник по шрифту и цвету, чтобы узнать больше.
Заголовки также могут быть выровнены по . Значения: по центру , по ширине , по левому краю или по правому краю .
Строки
Некоторые другие очень простые вещи используют линии поперек страницы.
Чтобы сделать их, используйте
Просто поместите это в любом месте на вашей странице (конечный тег не нужен), и текст остановится, и появится большой
, а затем ваш текст продолжится. Красиво, а?
Ими также можно управлять с помощью атрибутов . Они могут быть выровнены по левому и правому краям, как p выше. У них также есть два других атрибута, которые относятся к размеру линии.
ширина ="100">
такого маленького парня. Здесь вы указываете ширину в пикселях или можете использовать проценты, например
Чтобы сделать линии более сильными,
size ="4" noshade>
Вы видели, что noshade немного? Это особый атрибут, уникальный для hr , и ему не нужно значение.
Он останавливает hr с двумя оттенками серого.
Это также показывает, что в одном и том же теге одновременно можно использовать множество различных атрибутов. Немного поэкспериментируйте с ними.
Как только ваши документы начнут заполняться запутанными тегами и разделами, вам нужно будет знать, какая часть какая. Вы используете HTML-комментарии к , добавляете примечания к своему коду , чтобы вы могли легко прочитать его в следующий раз, когда вернетесь, чтобы отредактировать его. Код для комментария немного отличается от кода для других тегов:
Все, что вы поместите между строками , будет полностью пропущено вашим браузером. Вы можете добавить решетку (#), чтобы ваши комментарии выделялись. При прокрутке HTML-кода страницы вы хотите, чтобы ваши структурные комментарии выделялись. Комментарии будут использоваться позже в HTML, чтобы скрыть информацию от старых браузеров.
Они очень полезны — используйте их и помогите себе.
Spaced Out
То, как вы размещаете свой исходный код, в большинстве случаев является делом вкуса. Вы можете сделать отступ для некоторых тегов от левого поля, чтобы их было легко увидеть, и пропускать строки после каждого абзаца. Это не имеет большого значения для вашего браузера, который обычно игнорирует пробелы, табуляции, пустые строки и другие символы пробела при отображении ваших страниц. Однако я должен предупредить вас, что иногда лишние символы пробела могут что-то испортить. Это не серьезно, но строку, подобную приведенной ниже, следует исправить:
Подчеркнутый текст.
Пробел перед закрывающим тегом заставит эффект подчеркивания работать дольше, чем предложение, что выглядит неаккуратно. Позже, особенно с табличными тегами, оставление таких пробелов может испортить макет, добавив промежутки между вашими элементами. Итак, кодируйте плотно, без пробелов между текстом и конечными тегами.
Первая проверка
Вероятно, вы добавили на свою страницу довольно много новых тегов. Проверка — это процесс, с помощью которого вы убедитесь, что за все ваши действия вы не внесли никаких неприятных ошибок в свой прекрасный простой код. Чтобы проверить, действителен ли HTML-файл, вы можете использовать онлайн-валидатор, такой как » W3C-валидатор. Это бесплатная служба, которая сканирует ваш файл (будь то онлайн или любую страницу на вашем компьютере) и возвращает список ошибок, если находит их. Он прост в использовании — введите адрес веб-страницы в форму, и она запустится и проведет необходимые тесты.
Когда ошибка диагностируется, ее обычно легко отследить и устранить с большим предубеждением. Не относитесь легкомысленно к предупреждениям валидатора; это важный процесс, и многие небрежные программисты игнорируют его. Позже они сожалеют об этом. О да, они делают.
Если ваш код действителен, у него гораздо больше шансов работать в каждом браузере , что означает, что больше людей смогут прочитать ваш материал.
Хотя вероятность того, что в вашем коде будет много критических ошибок, на данный момент невелика, если у вас есть целый сайт для обслуживания, гремлины часто могут проникнуть в ваш код, угрожая доступности ваших страниц. Итак, часто проверять . Всякий раз, когда на вашем сайте выполняется какая-либо другая крупная работа, снова запускайте ее через машину, чтобы убедиться, что все в порядке. Это сделает меня счастливым.
А теперь; мы связываем!
Форматированный текст Html –
спросил
Изменено 9 лет, 9 месяцев назад
Просмотрено 47 тысяч раз
Мне нужно отобразить кучу текста на html-странице. Текст выглядит примерно так:
+-001 Это строка 00:12:04 002 ---------------------------------- - 003 Пока все выглядит хорошо ------
Текст «предварительно отформатирован» и содержит много пробелов и тире, каждая строка имеет одинаковую длину (все символы имеют одинаковую ширину).
Есть ли способ отобразить текст в html без потери формата?
- HTML
- текст
- формат
Оберните текст внутри тега
JSFiddle
<пред> +-001 Это линия 00:12:04 002 ---------------------------------- - 003 Пока все выглядит хорошо ------0
Способ HTML заключается в использовании элемента pre , который был разработан для такого использования, но имейте в виду, что
- На всякий случай при форматировании поместите тег
- Вам по-прежнему необходимо избегать вхождения символов
<иив содержимое (в некоторых случаях это не требуется, но проще всего это игнорировать.
Пример (где я добавил строку, содержащую выражение 1 + 1 < 3):
+-001 Это строка 00:12:04 002 ---------------------------------- - 003 Пока все выглядит хорошо ------ - 004 Просто как 1 + 1 < 3 ------
Вы можете избежать экранирования < и и , используя xmp вместо до , но xmp был объявлен устаревшим, устаревшим и т. д. (но на практике он прекрасно работает).
+-001 Это линия 00:12:04 002 ---------------------------------- - 003 Пока все выглядит хорошо ------ - 004 Просто как 1 + 1 < 3 ------
Попробуйте обернуть содержимое тегом PRE. http://www.w3schools.com/tags/tag_pre.asp
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя адрес электронной почты и парольОпубликовать как гость
Электронная почтаТребуется, но не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.
