Предварительный просмотр презентации
Web-сайты и Web-страницы
Структура Web-страницы Теги - это инструменты разметки текста. Тэги заключаются в угловые скобки. Они могут прописываться как строчными, так и прописными буквами, разницы никакой нет. Теги бывают: 1) одиночные 2) парные (контейнеры)
Содержание Web-страницы Порядок расположения тегов в HTML документе: <html> <head> <title>Название вашей страницы</title> </head> <body> Тело вашего документа </body> </html>
Текстовые Web-страницы
Заголовки <h1> – заголовок документа <h2> – заголовок раздела <h3> – заголовок подраздела <h4> – заголовок параграфа <h1>Глава 1. Информация</h1> <h2>1.1 Что такое информация?</h2> Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...
Выравнивание заголовков <h1 align="center">Глава 1. Информация</h1> атрибут (свойство) left, center, right
Абзацы (параграфы) <p>И вечный бой! Покой нам только снится</p> <p>Сквозь кровь и пыль...</p> <p>Летит, летит степная кобылица </p> <p>И мнёт ковыль...</p> paragraph – абзац интервал
Выравнивание абзацев <p align="justify"> Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как прокравшейся на кухню молекулой водорода. Кто быстрей отлетел? </p> left, center, right, justify
Переход на новую строку И вечный бой! Покой нам только снится <br>Сквозь кровь и пыль... <br>Летит, летит степная кобылица <br>И мнёт ковыль... break – разрыв
Маркированные списки <ul> <li>Вася</li> <li>Петя</li> <li>Коля</li> </ul> unordered list (неупорядоченный список) list item (элемент списка)
Нумерованные списки <ol> <li>Вася</li> <li>Петя</li> <li>Коля</li> </ol> ordered list (упорядоченный список)
Гиперссылки Переход на <a href="newpage.html">новую страницу</a> anchor (якорь) hyper reference (гиперссылка)
Стилевое оформление CSS
Стилевые файлы CSS (Cascading Style Sheets) – каскадные таблицы стилей. Стилевой файл - простой текстовый файл, в котором задаются свойства тэгов.
Стилевые файлы body { color: white; background: #FF6600; } R = FF16 = 255 G = 6616 = 102 B = 0 селектор название тэга свойство значение test.css
Подключение стилевого файла qq.html <html> <head> <title>Страница с файлом стилей</title> <link rel="stylesheet" href="test.css"> </head> <body> Привет, Вася! </body> </html> таблица стилей body { color: white; background: #0000E0; } test.css