378.45K
Category: internetinternet

Создание Web - страниц с помощью языка гипертекстовой разметки HTML и каскадной таблицы стилей CSS

1.

Проект на тему «Создание Web – страниц с помощью языка
гипертекстовой разметки HTML и каскадной таблицы стилей
CSS»
Выполнил: Соловкин Алексей Сергеевич
учащийся 9 класса «В»
Гимназии №26
Руководитель: Слепухова Алена
Валерьевна,
учитель информатики.
1

2.

Актуальность проекта
В 2024 году создание сайтов с помощью гипертекстовой разметки HTML и дизайна с помощью CSS
может дать начало в IT сфере, и безусловно поможет в изучении языков программирования.
Сегодня веб-сайты являются неотъемлемой частью жизни. Поэтому важно иметь навыки в создании
сайтов, даже если ты не связан с этим напрямую.
2

3.

Цели проекта
1. Научиться составлять структуру в HTML.
2. Узнать функции основных тегов HTML.
3. Создать дизайн сайта с помощью каскадной таблицы стилей CSS.
4. Закончить итоговую работу и сделать выводы.
3

4.

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

5.

Структура в HTML
Для начала создаём файл index (как обозначение главной
страницы) с расширением HTML. Откроем его с помощью
простого текстового редактора.
Дадим понять что мы пишем на HTML введя: <!doctype html>
Откроем основу сайта с помощью тега: <html></html> (Этот
элемент оборачивает весь контент на всей странице, и иногда
известен как корневой элемент.)
Создадим контейнер для информации о сайте: <head></head> ( К
ним относятся такие вещи, как ключевые слова и описание
страницы, которые будут появляться в результатах поиска,
CSS стили.)
Итоговый код:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Моя тестовая
страница</title>
</head>
<body>
</body>
</html>
Чтобы написать заголовок сайта напишем внутри контейнера
обозначение кодировки и тег заголовка: <meta charset="utf-8" />
<title>Моя тестовая страница</title> (здесь вы можете написать
название своего сайта в поиске)
И наконец откроем элемент всего последующего контента на
сайте: <body></body>
5

6.

HTML Теги
Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из
имени, за которым может следовать список атрибутов. <body> является открывающим тегом, а </body>
закрывающим. Между ними и будут располагаться последующие элементы. Например тег <P> с
помощью которого можно написать текст. И тег заголовка — <h>. Также существует большое
множество других полезных тегов, с помощью которых можно в полной мере осуществить весь
функционал на сайте. Для начала напишем главную информацию и вставим изображение в папке с
index.html с помощью тега <img src=»»>
Напишем заголовок текста на главной странице: <h1>Тестовая информация</h1>
Добавим текст: <p>Веб-сайт это совокупность программных, информационных, а также медийных средств, логические
связанных между собой.</p>
Вставим изображение с компьютера на сайт: <img src=»image.png»>
6

7.

Тестовый результат:
Как мы видим у нас получился самый примитивный сайт с информацией. Такие
сайты были типичны для 90х годов сети интернет. Чтобы придать сайту современный
дизайн нужно научиться использовать и применять CSS.
7

8.

Дизайн сайта на CSS
Внедрим CSS в <head> с помощью тега <style>:<style></style>
Сделаем текст более приятным и ровным: p { font-family: arial; text-align: center; } h1 { text-align: center; font-family:
arial; font-size: 150%; } (Тег font-family позволяет менять шрифт, font-size задавать размер, а text-align
выровнять по центру)
Создадим универсальный блок в котором будут располагаться элементы: testblock { display: block;
background-color: seashell; border: solid black; border-radius: 10px; Width: 50%; Margin: 1%; margin-left: auto; margin-right: auto;
padding: 1% }
Уберём отступы тела сайта для блоков: body { margin: auto; }
Центрируем изображение: IMG.displayed { display: block; margin-left: auto; margin-right: auto } <IMG
class="displayed" src="image.png"> (В данном случае создаётся ещё один блок который центрируется, а
изображению присваивается класс)
Сделаем заголовок сайта: h2 { text-align: center; font-family: arial; font-size: 200%; }
Внедряем в блоки все элементы в <HTML>
8

9.

Итоговый результат
Получился простой сайт содержащий в себе одну страницу с оглавлением и информацией.
9

10.

Итоговый код (50 строк)
10

11.

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

12.

Спасибо за внимание.
12
English     Русский Rules