Это обычный текст, а это курсивный текст.

Так код будет выглядеть в браузере:

Блок . Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки . Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

Списки создаются с помощью тега

, внутри которого обязательно должны идти теги
• . Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:
  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

  Так код будет выглядеть в браузере:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

  Списки, созданные через тег ul , называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег

  , а пункты таких списков также создаются через теги li .

  Давайте сделаем упорядоченный список, используя тег ol :

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

  Так код будет выглядеть в браузере:

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

  Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).

  Блок . Ссылки

  Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другу. Если бы их не было - интернет был бы просто набором страниц, никак не связанных друг с другом.

  Ссылка на сайт phphtml.net.

  Так код будет выглядеть в браузере:

  Ссылки бывают абсолютные и относительные , кроме того, они могут вести как на ваш сайт, так и на чужой. Эти сложные моменты лучше показывать, а не описывать текстом, поэтому я снял для вас следующее видео. Посмотрите его и только потом переходите к дальнейшему чтению:

  Блок . Картинки

  Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег , имеющий обязательный атрибут src , в котором хранится путь к файлу картинки.

  Как это работает, посмотрим на следующем примере:

  

  Так код будет выглядеть в браузере:

  Обратите внимание на то, что тег не требует закрывающего тега.

  Блок . Ссылки в виде картинок

  Ссылкой может быть не только текст, но и картинка - для этого достаточно тег вложить в тег , как это сделано в следующем примере. Нажмите на картинку - и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку - нажмите кнопку "назад" в браузере):

  

  Так код будет выглядеть в браузере:

  Блок . Разрыв строки

  Вспомните, что будет, если сделать, к примеру, два абзаца рядом - в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.

  Давайте убедимся в этом на следующем примере:

  Это первый абзац.

  Это второй абзац.

  Так код будет выглядеть в браузере:

  Это первый абзац.

  Это второй абзац.

  Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.

  Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег
  . Учтите, что этот тег особенный и не имеет закрывающего.

  Давайте посмотрим на его работу на следующем примере:

  Это первая строка текста,
  а это вторая.

  Так код будет выглядеть в браузере:

  Это первая строка текста,
  а это вторая.

  Блок . Комментарии HTML

  Практически во всех языках программирования есть такое понятие как "комментарии".

  Чтоб наша WEB страничка смотрелась более презентабельно, разделим текст на абзацы и выделим заголовок. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заглавия объявляются парой тегов с номерами, надлежащими уровню, к примеру,

  - заголовок раздела первого уровня, а
  - заголовок раздела шестого уровня. От обычного текста заглавия отличаются размером и шириной букв. Заголовок первого уровня h1 отображается обычно очень большим шрифтом, в то время как заголовок шестого уровня h6 - очень маленьким.

  Заглавия

  Не следует путать заглавия разделов документа с рассмотренным ранее заголовком документа, определяемым элементом .

  В качестве заголовка текста используем первое предложение - Для этого довольно ограничить его тегами

  и

  .

  Воткните в текст файла other.html теги

  и

  так, чтоб они ограничивали первое предложение текста, и этот кусок кода принял последующий вид:

  Добро пожаловать на страницу компании SD!

  Просмотрим приобретенный итог.

  Сохраните файл, выбрав команду меню программки Блокнот (Notepad) Файл - Сохранить (File - Save).

  Операцию сохранения нужно всегда делать перед просмотром документа, потому что открывает файл для просмотра, загружая его в оперативку компьютера с диска. Если после редактирования кода HTML вы не сохраните файл, то никаких конфигураций в браузере не увидите.

  Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).

  Нажмите кнопку F5 либо кнопку Обновить (Refresh) на панели инструментов рабочего окна программки . Файл other.html будет перезагружен, и вы увидите в окне браузера, как смотрится заголовок первого уровня.

  Просмотрите, как будут смотреться заглавия других 5 уровней, изменяя в тегах номера: h2, h3 и так далее После каждого конфигурации не забывайте сохранять файл и обновлять изображение в окне браузера.

  Когда вы закончите опыты, опять восстановите в файле other.html теги

  .

  Используя 6 уровней заголовков, которые предоставляет в ваше распоряжение язык HTML, можно сделать просто читаемый документ с интуитивно ясной структурой. Помните, что ваш документ всегда будет читаться существенно лучше, если в нем будет точное разделение на разделы и подразделы.

  Выравнивание заголовков

  По умолчанию заголовок выравнивается по левому краю странички. Но его можно также выровнять по правому краю либо центрировать. Для правостороннего выравнивания в теге

  употребляется атрибут align="right", а для центрирования - align="center". Допускается также очевидное указание левостороннего выравнивания - align="left".

  Добавьте в тег

  атрибут align="center", чтоб центрировать заголовок. Этот элемент должен принять последующий вид:

  Добро пожаловать на страницу компании SD!

  В предстоящем мы не будем припоминать для вас о необходимости перед просмотром сохранять файл с начальным кодом и обновлять изображение в браузере.

  Как в HTML сделать текст выделенным (жирным)

  Сейчас займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания употребляются парные теги .

  Воткните в файле other.html открывающий и закрывающий теги так, чтоб они ограничили текст Тут вы узнаете… Этот элемент должен принять последующий вид:

  Как в HTML сделать текст курсивом

  Курсивное начертание устанавливается при помощи тегов .

  Воткните в начальный код HTML тег и так, чтоб отредактированный элемент принял последующий вид:

  Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим

  Элементы разметки могут быть вложенными, как в данной структуре, где элемент … вложен в элемент …. Современные браузеры способны верно обрабатывать вложенные теги. Потому для вас нужно смотреть за тем, чтоб не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. К примеру, такая запись будет неверной: …. Соблюдение вложенности - очень принципиальная часть общей культуры написания HTML кода.

  Как в HTML сделать текст подчеркнутым

  При помощи пары тегов можно установить подчеркнутое начертание текстового куска, ограниченного данными тегами, а при помощи пары тегов - показать текст телетайпным шрифтом.

  Необходимо отметить, что с недавнешних пор тег упрознен и подчеркивание делается с помощью стилей. эквивалент . Да новый аналог выглядет более громозким, но к огорчению это вернее. Основное в эту пользу гласит, то что громозкий варинат является кросбраузерным, другими словами подходит для всех браузеров, когда как поддерживают далековато не все браузеры.

  Как в HTML прирастить текст

  Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.

  Теги наращивают размер шрифта текста, заключенного меж ними.

  Добавьте в начало и конец вышеуказанного куска кода соответственно теги и так, чтоб элемент принял последующий вид:

  Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим

  При помощи тегов вы сможете уменьшить размер шрифта текста по сопоставлению с начальным.

  Другой метод указания размера шрифта - при помощи тегов с атрибутом size. В качестве значений этого атрибута употребляются целые числа от 1 до 7. При этом значение 1 соответствует наименьшему размеру шрифта, а значение 7 - наибольшему.

  Используя заместо тегов теги вида , просмотрите как меняется размер шрифта текста при различных значениях атрибута size - от 1 до 7.

  В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) либо - (минус). В данном случае размер шрифта соответственно возрастает либо миниатюризируется, по сопоставлению с начальным, к примеру, теги прирастят размер шрифта, по сопоставлению с текущим, на один уровень. Проверьте.

  Установите 5 в качестве значения атрибута size для рассматриваемого куска текста: . HTML код этого куска должен быть таким:

  Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим .

  В тегах может употребляться также атрибут color для указания цвета шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста документа.

  По умолчанию абзац с текстом Тут Вы узнаете… выровнен налево. Центрируем его по горизонтали при помощи тегов

  . Вы сможете также выровнять абзац по правому краю странички при помощи тегов либо по левому - при помощи тегов .

  Воткните теги

  ограничив ими обозначенный абзац.

  Направьте внимание, что для центрирования абзаца мы использовали теги

  , в отличие от атрибута align="center", который применен нами в тегах
  .

  Внимание ! На 2010 год теги ,

  , , числятся устаревшими и потому требуется использовать аналоги из стилей. Это не означает, что использовать их нельзя, но при способности пытайтесь от их избавляться.

  =

  =

  =

  =

  =огромное количество расширенных характеристик;">

  Также существует огромное количество других устаревших тегов, которые не обрисовать в этой статье, потому лучше сходу ознакомиться на специализированных WEB сайтах по данному вопросу. Но главные я выложил тут чуток выше

  Коды выделения

  Язык HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на неком участке текста может быть полужирным либо курсивным, другими словами очевидно указать начертание шрифта текста, как мы это делали в данном опыте. С другой стороны, можно пометить хоть какой кусок текста, как имеющий некоторый, хороший от обычного, логический стиль, предоставив интерпретацию этого стиля браузеру. Таким макаром, логический стиль показывает роль текстового куска, к примеру, огромную значимость по сопоставлению с обыденным текстом либо то, что данный кусок является цитатой. В собственной работе вы сможете использовать последующие теги, определяющие логические стили. Проверьте, как они работают в различных браузерах.

  - применяется для определения слова. Текст выводится курсивом по умолчанию.

  - для выделения слов и усиления. Текст отображается курсивом по умолчанию.

  - для выделения заглавий книжек, кинофильмов, спектаклей и так далее выводится курсивом по умолчанию.

  - для фрагментов кода программ. Показывается на дисплее шрифтом фиксированной ширины.

  - употребляется для текста, который пользователь вводит с клавиатуры. В различных браузерах может отображаться различными шрифтами. Тег устаревший .

  - служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины. Тег устаревший .

  - для особо принципиальных фрагментов. Обычно выделяется полужирным начертанием.

  - употребляется для указания, что часть текста либо слово является символьной переменной, другими словами текстом, который может быть заменен разными выражениями. Отображается курсивом по умолчанию. Тег устаревший .

  Спецификация HTML 4.0 предлагает более прогрессивный метод указания стилей текста и других частей - при помощи специального языка каскадных таблиц стилей CSS (Cascading Style Sheets). Таблицы стилей - это огромное достижение в области WEB дизайна, расширяющее способности улучшения внешнего облика страничек. Таблицы стилей упрощают определение интервалов меж строчками, отступов, цветов, применяемых для текста и фона, размера и стиля шрифтов и так далее Стиль большинства частей HTML может описываться при помощи атрибута style, который размещается внутри открывающего тега элемента. В качестве значения атрибута style употребляются пары вида «свойство: значение». К примеру, во куске кода, описывающего заголовок раздела,

  атрибут style="color: blue" определяет, что свойство color (цвет) имеет значение blue (голубой), другими словами текст заголовка первого уровня должен отображаться голубым цветом.

  Выравнивание стилями

  Поглядим, как при помощи языка каскадных таблиц стилей указать стиль текстового куска, который начинается словами Тут Вы узнаете…

  Для указания толщины шрифта употребляется свойство font-weight со значениями lighter (узкий), bold (полужирный), bolder (жирный), к примеру, style="font-weight: bold".

  Для определения курсивного начертания применяется свойство font-style со значением italic. Потому, чтоб придать тексту полужирное курсивное начертание, следует атрибут style найти так: style="font-weight: bold; font-style: italic". Направьте внимание: характеристики могут размещаться в любом порядке и непременно обязаны делиться точкой с запятой.

  Если требуется указать размер шрифта, то следует пользоваться свойством font-size, значения которого можно указать в относительных либо абсолютных величинах. Относительные величины - это проценты, а в качестве абсолютных величин употребляются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). К примеру:

  style="font-size: 200%"

  style="font-size: 16pt"

  style="font-size: 100px"

  Указывая абсолютные, а не относительные размеры, вы лишаете пользователей, разглядывающих ваши странички, способности наращивать либо уменьшать размер шрифтов при помощи команды меню браузера в согласовании с их зрением и разрешением монитора. Шрифты будут отображаться только такового размера, который вы указали. Потому лучше указывать размер шрифта в процентах. В данном случае размер шрифта будет меньше либо больше на обозначенное количество процентов, чем при оформлении его при помощи HTML тега по умолчанию.

  Для определения метода выравнивания текста по горизонтали употребляется свойство text-align со значениями left (налево), right (на право), center (по центру), justify (по ширине). Таким макаром, чтоб указать, что текст Тут Вы узнаете… должен быть оформлен полужирным курсивным начертанием с размером 150% от начального и выровнен по центру, следует его стиль найти последующим образом:

  style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"

  Этот атрибут мы применим в тегах <р>, которые позволяют представить текст в виде отдельного абзаца.

  Отредактируйте элемент HTML, включающий текст Тут Вы узнаете… удалив теги

  , , , и вставив теги <р> и с атрибутом style так, чтоб этот элемент принял последующий вид:

  <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим

  Видите ли, язык HTML позволяет использовать различные методы стилевого дизайна. Совместно с тем, применение языка каскадных таблиц стилей CSS является более желаемым.

  Другие варианты выравнивания и использования стилей

  Мы разглядели только один вариант использования языка таблиц стилей, когда определение стиля размещается конкретно внутри тега элемента, который вы описываете.

  Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

  В стандартном HTML, без внедрения таблиц стилей, для присвоения какому-либо элементу определенных параметров, таких как цвет, размер, положение на страничке и тому схожее, приходится всякий раз обрисовывать эти характеристики для каждого элемента, даже если на одной страничке обязаны размещаться 10-ки таких частей, не отличающихся один от другого. Приходится 10-ки раз вставлять один и тот же кусок HTML кода в страничку, увеличивая размер файла и время его загрузки из сети.

  Таблицы стилей действуют другим, более комфортным и экономным методом. Для присвоения какому-либо элементу определенных черт вы обязаны один раз обрисовать этот элемент и найти это описание как стиль, а в предстоящем просто указывать, что элемент, который вы желаете оформить подходящим образом, должен принять характеристики стиля, описанного вами. Комфортно, не правда ли?

  Более того, вы сможете сохранить описание стиля не в тексте вашей WEB странички, а в отдельном файле - это дозволит использовать описание стиля на любом количестве WEB страничек. И очередное, связанное с этим преимущество - возможность поменять оформление хоть какого количества страничек, исправив только описание стиля в одном отдельном файле.

  Не считая того, язык таблиц стилей позволяет работать со шрифтовым оформлением страничек на еще более высочайшем уровне, чем стандартный HTML.

  В текущее время язык CSS насчитывает достаточно огромное количество параметров частей HTML, которыми он может управлять. Применяя «безопасные», другими словами совместимые с наибольшим количеством браузеров элементы CSS - характеристики шрифта, цвета частей и фона, характеристики текста и границ - вы сможете существенно облегчить свою работу и сделать ваши WEB странички более симпатичными в плане дизайна текста.

  Тег в HTML используется для выделения фрагмента текста курсивом.

  HTML тег относится к тегам физического форматирования. Изменение начертания шрифта с помощью тега носит стилистический характер.

  Сделать HTML текст курсивом можно также с помощью тега . При этом текст будет считаться, выделенным логически (по смыслу), "подчеркнутым".

  Спецификация HTML5 рекомендует отдавать приоритет тегам логического форматирования: важные фрагменты текста - тег , акцентирование внимания - тег , подзаголовки - теги , подсветка текста - тег . Выделять текст курсивом с помощью тега следует только если характер выделения не соответствует ни одному тегу логического форматирования.

  Все виды выделения текста описаны в статье: .

  Синтаксис

  текст выделенный курсивом

  Отображение в браузере

  Пример использования в HTML коде

  
  
  
  
  
  
  

  Простой текст, который может быть расположен на любом сайте. А вот текст выделенный курсивом{