Основы HTML
Большинство браузеров имеют возможность изучения html-источника страниц, которые вы просматриваете. При просмотре источника вы увидите ряд тегов HTML (языка разметки гипертекста), окруженных угловыми скобками(<>), перемежаемыми с текстом.
Приведенные ниже действия используют HTML-теги для создания простой веб-страницы. В этих шагах вы введете обычный текст в файл в Блокнот, внесите несколько изменений, сохраните файл и перезагрузите страницу в браузере, чтобы увидеть изменения.
Создание HTML-файла
- Откройте Блокнот или любой обычный текстовый редактор.
- В меню «Файл» выберите «Создать«.
- Введите следующие строки:
Top HTML Tags HTML is swell. Life is good. Here's the big picture
- One programmer
- Ten SDKs
- Great Internet Apps
Make me an unordered list.
Это должно приступить к работе. Если на веб-странице отображается отличная функция, вы можете узнать, как она была создана, проверив источник HTML. Редакторы HTML, такие как Веб-страница Майкрософт, можно использовать для создания простых и расширенных страниц.
Вот весь HTML-источник для файла, который вы создали:
Полное описание тегов, атрибутов и расширений см. в спецификации языка разметки гипертекста (HTML):
Оформляем html-страницу и форматируем текст.
Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++ (скачать можно, например, на http://www.softportal.com/get-5406-notepad.html . В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.
А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.
Сейчас в ней написана фраза «Привет всем!», она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.
Шаг 1. Меняем фон html-страницы и цвет текста
Для этого добавим в наш код, в тег следующие атрибуты — bgcolor=»blue» text=»yellow». Здесь bgcolor — атрибут, отвечающий за цвет фона страницы, а blue — его значение (в нашем случае — голубой, но можете сделать и красный — red, и зеленый — green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow — желтый.
Теги html которые используются для оформления текстa
Всем привет! В предыдущих статьях мы узнали много нового о ссылках и картинках. Теперь пора переходить к тексту. В этой статье я расскажу про наиболее популярные теги html, которые используются для того, чтобы предать тексту определенный вид.
Итак, для начала создаем в блокноте пустой текстовый документ. После этого меняем его расширение с txt на html. Открываем его с одновременно с помощью браузера и текстового редактора, например, того же блокнота. Я советую использовать для этих целей программу Macromedia Dreamweaver или Notepad++.
С помощью редактора мы будем наш документ редактировать, с помощью браузера просматривать, что у нас получилось.
Для того, чтобы изменения вступили в силу необходимо сначала сохранить изменения в редакторе, нажав на дискетку или комбинацию клавиш Ctr+S, а затем обновить этот же документ в браузере.
Заголовки текста разного уровня
Заголовки это не только важная часть оформления текста, но и один из инструментов внутренней оптимизации. В html тексте заголовки задают теги . Для того, чтобы посмотреть, как они будут выглядеть прописываем в документе следующий код:
Поместите здесь текст, который вы хотите сделать заголовком
Цифра 2 рядом с буквой h означает уровень заголовка. Всего уровней 6. Первый уровень – название статьи. Все остальные – заголовки разделов и подразделов.
Жирный, подчеркнутый текст, курсив
Теги , , легко решают эту проблему
Так в html можно задать жирный текст
Вот так задается курсив
Вот это будет подчеркнутый текст
Если нам нужно применить к тексту одновременно несколько свойств, просто вкладываем теги один в другой.
Жирный курсив
Изменяем размер шрифта
Размер шрифта текста задается в html с помощью тега , у которого есть атрибут «size».
Как поменять цвет текста
Цвет текста задается тем же самым тегом с помощью атрибута «color»
В данном случае, цвет задается с помощью слова. Также его можно задавать в цифровой кодировке. Более подробно об этом можно прочитать в статье палитра цвета в html.
Текст в таком виде как он был набран
У html есть довольно неприятная особенность. Если вы набрали текст, в котором есть несколько пробелов, идущих подряд , друг за другом, то браузер покажет только один пробел. В некоторых случаях необходимо отобразить текст именно в таком виде, как он был набран. Для этого используется тег
Этот текст будет выглядеть так как он набран
Ну вот, пожалуй, и все. Естественно, возможности для видоизменения текста с помощью тегов html довольно ограничены. В большинстве случаев этого не хватает. В этом случае, рекомендуется использовать css. CSS это аббревиатура, которая в переводе на русский означает каскадные таблицы стилей. Подробнее об этом мы поговорим в одном из следующих уроков.
Зачеркнутый текст
Вообще говоря в html можно задать зачеркнутый текст с помощью сразу трех разных тегов. Теги и вполне корректно отображаются во всех браузерах, тем не менее, они не рекомендуются к использованию. Они даже не включены в спецификации XHTML и HTML5. Поэтому для создания зачеркнутого текста я рекомендую использовать тег .
Визуально результат использования этого тега ничем не будет отличаться от первых двух. Тем не менее, он несет в себе несколько иной смысл. Предполагается, что этот тег используется для вычеркивания устаревшей или неправильной информации. У данного тега есть 2 атрибута:
cite — предназначен для того, чтобы содержать ссылку на документ, в котором содержится причина удаления данной информации
datetime — предназначен для того, чтобы хранить время последнего редактирования информации.
Похожие записи
Как самому создать с нуля бесплатный сайт на конструкторе от Яндекс
Автор admin 18 декабря 2012 1 августа 2017
Всем привет. Все знают о том, что Яндекс это самая популярная отечественная поисковая система. Однако, далеко не всем известно, что Яндекс предоставляет также бесплатный хостинг, на котором может создать свой собственный сайта каждый желающий. Этот сервис носит название Narod.ru, или просто «народ».
CMS сайта: что лучше Joomla или WordPress
Автор admin 16 февраля 2013 16 декабря 2016
Всем привет. Прошу прощения за длительное отсутствие. Очень много дел накопилось в офлайне. Совсем не было времени писать статьи для блога. Но вот появилась свободная минута и я снова вернулся к своему любимому Лучшему СЕО Блогу. Очень часто перед начинающими становиться проблема выбора.
META Description – описание страницы Вашего сайта
Автор admin 25 июня 2014 23 декабря 2016
Всем привет! О том, что такое мета-теги и для чего они нужны я уже упомянул в статье про то как создать в блокноте html сайт. Сегодня я решил рассказать о них подробнее, и начну я с тега description. Для чего нужен мета-тег description Как я уже говорил, мета-теги предназначены исключительно для поисковых систем. Содержимое мета-тегов…
Как с помощью html и css можно изменить цвет ссылки и убрать подчеркивание
Автор admin 29 июля 2012 22 декабря 2016
Здравствуйте уважаемые читатели. Сегодня мы поговорим как с помощью html и css изменить ссылку на Вашем сайте: поменять цвет, добавить или убрать подчеркивание. Как изменить цвет ссылки с помощью HTML. Как вы помните, ссылка вставляется следующим образом: По умолчанию ссылка синего цвета с подчеркиванием. Попробуем c помощью html изменить цвет ссылки. Для этого добавляем в…
Как написать хорошую статью для сайта
Автор admin 8 января 2013 16 декабря 2016
Написание статей для сайта дело сложное и специфичное, но, в то же время, очень интересное и прибыльное. Именно этой теме посвящена сегодня статья на Лучшем СЕО Блоге.
Краткий путеводитель по админке WordPress.
Автор admin 22 декабря 2012 16 декабря 2016
Всем привет. Каждый, кто хоть раз посещал форум вебмастеров и оптимизаторов сталкивался с терминами «админка» или «админка WordPress». Сегодня я расскажу, что это такое, и проведу краткую экскурсию по админке wordpress.
3 комментария
Tатьяна (Sarit) :
Спасибо за статью, очень помогла…
Удачи Вам!
Здравствуйте, подскажите пожалуйста как сделать, что бы ссылка в тексте после перехода по ней пользователя была зачеркнута.
Здравствуйте! скажите пожалуйста как задать цвет(например красный) зачеркнутой линии, но так чтобы цифра, которую зачеркнули, заведомо красной линией, была обычного цвета? Спасибо!
Как поместить текст в блок в html
Для размещения текста в блочном элементе, например в тэге можно воспользоваться примером ниже.
Исходный HTML документ:
class="textbox"> Пример текста в блочном элементе. .textbox /* Добавим отступы от текста до краев блока */ padding: 20px; /* Изменим цвет фона */ background: cornsilk; /* Отобразим рамку блока */ border: 2px solid indigo ; > 
Результат: