14.05.2021
Теоретические сведения
Главной называется веб-страница, с которой обычно начинается просмотр сайта. Она открывается при наборе адреса сайта и в каком-то смысле является его «лицом».
Для того, чтобы при вводе адреса сайта в браузере открылась именно главная страница, необходимо, чтобы она имела определённое название. Главную страницу сайта принято называть index.html.
Именно с главной страницы начинается знакомство посетителей с сайтом, поэтому надо сразу передать тематику сайта и обеспечить быстрый доступ к содержанию.
Главная страница обычно состоит из "Шапки", "Основного раздела" сайта и "Подвала".
Стиль главной страницы, а также остальных страниц сайта прописывается в отдельном CSS-файле main.css
Ход выполнения практической работы
1. В текстовом редакторе Notepad++ создать новую страницу. Ввести шаблон веб-страницы, сохраните страницу под именем index.html.
2. В тело документа (внутри элемента <body> - строка 8) добавить заголовок и изображение. Фотографию необходимо сохранить в подкаталоге img под именем photo.png в той же папке, в которой находится наш index.html.
3. Добавим информацию о себе. Для этого используем парный тег <p> и одинарный <br>. Добавьте под тегом img следующий текст:
Должно получиться примерно так:
4.Парный тег <a></a> указывает браузеру, что содержимое элемента (это может быть и текст, и картинка) является ссылкой, и, при щелчке по ссылке (то есть по содержимому), браузер попытается перейти по адресу указанном в атрибуте href:
5. Тег <a> поддерживает атрибут target, который указывает в какой вкладке открыть страницу, указанную в ссылке. Например, target=”_blank” - указание загрузить страницу в новой вкладке: 
6. Добавьте перед тегом <h1> сразу после <body> следующий текст:
Атрибут href=”#” - указание, что при щелчке по этой ссылке никуда переходить не нужно.
<span>
Парный тег <span></span> - это, наверное, самый трудный для понимания тег. Он как бы говорит, что внутри заключен кусочек текста. На самом деле в HTML есть еще теги, которые позволяют задать некоторую логику страницы, span один из них. Он не влияет непосредственно на сам вывод, но позволит в дальнейшем элементам, заключенным в этот тег, придать стиль с помощью CSS. С помощью <span> и CSS мы добавим промежутки между пунктами меню.
7.В нижнюю часть добавим ссылки на будущие веб-страницы и ссылку на группу "ППТ" в соц.сети ВКонтакте.
DIV - разделяй и властвуй
Пока сайт выглядит очень невзрачно. Для того, чтобы он стал более красивым, нужно задать стили оформления, но перед этим нужно задать логику сайта с помощью тегов <div> и атрибутов id.
Сам тег <div>, так же как и <span>, не влияет на вывод информации на экран. Но он позволяет разделить веб-страницу на разделы, на которые можно будет потом влиять с помощью CSS кода.
Атрибут ID дает название разделам, чтобы по ID можно было обратиться к нужному разделу и изменить его стиль оформления.
Подключим CSS
Добавьте в <head> тег загрузки стиля <link rel= "stylesheet" href= "main.css">
В текстовом редакторе Notepad++ создайте новый документ и сохраните его в папке, где размещён index.html под именем main.css. Содержимое CSS-документа можно скопировать тут и вставить в main.css
Если вы всё сделали правильно, веб-страница должна будет выглядеть примерно так:
Самостоятельно замените цвета блоков. Можно пользоваться сервисом https://colorscheme.ru/:
Например назначим:
- Цвет элементов с ID header и footer на #b5b7ba
- Цвет фона веб-страницы на #C8EDF3
- Цвет текстового блока на #D3EFF3
Сохраните css-файл, обновите страницу в браузере:
Комментариев нет:
Отправить комментарий
Жду ваших комментариев, пожеланий или предложений!