Знакомство с HTML
Знакомство с HTML
HTML задаёт структуру веб-страницы: заголовки, абзацы, списки, ссылки, изображения и таблицы.
Ключевые понятия
- HTML
- тег
- заголовок
- ссылка
- изображение
- страница
Страница «Обо мне» может содержать h1-заголовок, абзац, список интересов, изображение и ссылку на полезный ресурс.
Сначала прочитайте конспект, затем выполните практику, проверьте себя по вопросам и только после этого отправляйте работу педагогу.
- Для чего нужен тег h1?
- Чем отличается текст страницы от HTML-разметки?
- Какие элементы делают страницу удобной для чтения?
- есть корректная структура HTML
- страница открывается в браузере
- есть обязательные элементы
- текст и оформление читаемые
Дополнительные материалы
Дополнительные материалы и задания из школьного курса. Они помогают потренироваться по теме, но основной результат урока сдаётся через задание ниже.
📚 Конспект и ресурс · 1
Знакомство с HTML
Знакомство с HTML
Введение
HTML — это специальный язык, который понимают браузеры (такие программы как Google Chrome, Yandex Browser, Opera). Он нужен, чтобы создавать страницы в интернете. Представь, что это каркас или скелет сайта. Мы будем писать команды (теги) в обычном Блокноте, а потом смотреть, что получилось, в браузере.
Шаг 1: Запуск программы и сохранение файла
Цель: Научиться создавать и правильно сохранять файлы с расширением .html .
Подробное объяснение:
Открываем Блокнот. Найди его через Поиск в меню «Пуск» или нажми комбинацию клавиш Win + R , введи notepad и нажми «ОК».
Пишем первую строчку. Это необязательно, но очень правильно. В первой строке файла напиши: <!DOCTYPE html> . Эта команда сообщает браузеру, что мы используем современный HTML.
Создаем основной каркас. Весь наш будущий сайт будет находиться между двумя тегами: <html> и </html> . Внутри него есть две основные части:
<head> ... </head> — «голова» сайта. Здесь хранится служебная информация, которую не видит пользователь (например, заголовок вкладки).
<body> ... </body> — «тело» сайта. Здесь мы будем размещать весь контент, который увидят visitors (текст, картинки и т.д.).
Пока что наш код в Блокноте выглядит так:
html
<! DOCTYPE html >
< html >
< head >
< title > Моя первая страница </ title >
</ head >
< body >
</ body >
</ html >
Обрати внимание, что теги обычно идут парами: открывающий ( <html> ) и закрывающий ( </html> ).
Сохраняем файл ПРАВИЛЬНО. Это самый важный шаг!
Нажми «Файл» → «Сохранить как...».
Выбери удобную папку (например, «Рабочий стол»).
Внимание! В поле «Имя файла» напиши не просто название, а название с расширением .html . Например: index.html .
Важно: В поле «Тип файла» обязательно выбери « Все файлы ( . ) ». Если этого не сделать, Блокнот сохранит файл как index.html.txt , и он не будет работать!
📌 КОНСПЕКТ Шага 1:
Пишем код в Блокноте .
Основные теги: <!DOCTYPE html> , <html> , <head> , <body> .
Сохраняем файл с расширением .html и типом файла « Все файлы ».
✅ ЗАДАНИЕ для Шага 1:
Создай на рабочем столе папку «Мой сайт». Открой Блокнот, напиши каркас из примера выше и сохрани файл с именем index.html внутри папки «…
Шаг 2: Создаем страничку «Привет, мир!»
Шаг 2: Создаем страничку «Привет, мир!»
Цель: Добавить на страницу первый видимый текст.
Подробное объяснение:
Открой свой файл index.html в Блокноте (Файл → Открыть).
Мы будем работать в «теле» сайта — между тегами <body> и </body> .
Напиши там знаменитую фразу всех программистов: Привет, мир! .
Твой код теперь должен выглядеть так:
html
<! DOCTYPE html >
< html >
< head >
< title > Моя первая страница </ title >
</ head >
< body >
Привет, мир!
</ body >
</ html >
Сохрани файл (Ctrl+S). Теперь найди файл index.html в папке «Мой сайт» и дважды щелкни по нему . Он откроется в твоем браузере, и ты увидишь надпись «Привет, мир!» в левом верхнем углу. Поздравляю, твоя первая веб-страница готова!
📌 КОНСПЕКТ Шага 2:
Весь видимый текст мы пишем внутри тегов <body> .
После любого изменения в Блокноте файл нужно сохранять (Ctrl+S) .
Чтобы посмотреть результат, нужно открыть файл .html в браузере .
✅ ЗАДАНИЕ для Шага 2:
Замени текст «Привет, мир!» на «Это мой личный сайт!». Сохрани файл и обнови страницу в браузере (нажав F5 или кнопку «Обновить»). Убедись, что текст изменился.
Шаг 3: Добавляем абзац (например, стишок)
Цель: Научиться структурировать текст с помощью тега абзаца.
Подробное объяснение:
Если мы просто напишем стишок в несколько строк, браузер проигнорирует все переносы и выведет его в одну строку. Чтобы этого не случилось, нужно использовать тег абзаца — <p> .
<p> — это открывающий тег абзаца.
</p> — это закрывающий тег абзаца.
Весь текст между ними будет выглядеть как отдельный абзац с отступами сверху и снизу.
Давай добавим стишок А. Барто:
html
< body >
Привет, мир!
< p > Уронили мишку на пол, </ p >
< p > Оторвали мишке лапу. </ p >
< p > Всё равно его не брошу — </ p >
< p > Потому что он хороший. </ p >
</ body >
Сохрани и посмотри в браузере. Теперь каждая строчка — это отдельный аккуратный абзац.
📌 КОНСПЕКТ Шага 3:
Тег <p> ... </p> создает абзац .
Браузер автоматически делает отступы между абзацами.
✅ ЗАДАНИЕ для Шага 3:
Напиши на своей странице короткий стишок или скороговорку из 4 строк. Каждую строку оформи с помощью тега абзаца <p> .