Создание простой статьи
В этом уроке создадим простую статью, состоящую из заголовка и текста. Для удобства работы я рекомендую скачать текстовый редактор Notepad++, и, если у вас еще не установлен, скачать и установить браузер Google Chrome. Все примеры я буду показывать в этих программах.
Открываем наш файл index.html при помощи текстового редактора Notepad++:
Выставляем кодировку UTF-8(без BOM)
Удаляем строку “Привет, Мир!", и записываем html код:
Дальше между тегами <head>...</head> пропишем заголовок страницы, например, “Моя первая статья". Заголовок страницы задается при помощи тега <title>...</title>:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая статья</title>
</head>
<body>
</body>
</html>
Сохраняем изменения. Открываем наш файл index.html в браузере и смотрим результат:
Как видно из рисунка, вместо названия заголовка страницы у нас вылезли какие то непонятные символы. Если бы мы оставили кодировку UTF-8, которая была изначально, то строка отображалась бы нормально. Но так как большинство разработчиков рекомендуют выставлять кодировку UTF-8(Без BOM), то данная проблема решается путем добавления еще одной строки в контейнере:
<head>
<title>Моя первая статья</title>
<meta charset="utf-8">
</head>
Метатеги используются для хранения различной информации для браузеров и поисковых систем. В данном случае метатег задает кодировку документа, с помощью атрибута charset и его значения utf-8. Метатеги прописываются в контейнере <head>...</head>.
Итак, сохраняем изменения, открываем браузер, нажимаем f5, и смотрим результат:
Теперь все так, как нужно.
А дальше между тегами <body>...</body> нужно написать нашу статью. Я буду брать шаблонный текст, и работать с ним, вы можете написать свой.
С чего начинается любая статья, материал? С названия, т.е. с заголовка. В html заголовки обозначаются следующими парами тегов:
Заголовок первого уровня предназначен для названия раздела страницы, заголовок второго уровня предназначен для названий подразделов страницы. Заголовок третьего уровня предназначен для второстепенных разделов на странице, таких как новости, статьи и т.д. Все это мы рассмотрим на конкретных примерах позже. А для нашего урока понадобиться заголовок первого уровня <h1>...</h1>. Запишем его между тегами <body>...</body>:
<body>
<h1>Моя первая статья</h1>
</body>
Дальше запишем первый абзац. Абзацы в html обозначаются при помощи пары тегов <p>...</p>, кстати данный тег при нашем типе документа (<!DOCTYPE html>), не требует закрывающего, но я все же буду закрывать его в примерах:
Сохраняем изменения. Открываем шаблон в браузере, обновляем страницу и смотрим:
В следующем уроке немного приукрасим нашу маленькую статью при помощи атрибутов тегов.
Видеоматериал по этому уроку:
Источник: http://psd-html-css.ru/html/sozdanie-prostoy-stati
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.