Разработка 3-х страничного сайта
lightning.crimea.edu
Мой трехстраничный сайт содержит четыре страницы.
Первая страница содержит ссылки на другие страницы сайта.
На сайте содержится три раздела, кнопки для разделов были созданы с помощью сайта cooltext.com и сохранены в формате .jpg
Вот так выглядит одна из страниц моего сайта: 
В создании сайта я использовал теги HTML и CSS кода. Я использовал теги <a href>, <img src> а также много других.
Практические знания
Лабораторная работа №1.
Работа с формулами. Нижний верхний индекс. Работа с текстом.
Написать формулу сокращенного умножения. Написать стихотворение, разместить его в виде цитаты, подписи, сделать фон только под текстом, изменить текст на любой другой чем базовый.
Для начала требовалось сделать верхний индекс. Это делается очень просто: <sup><i>…</i></sup>
Лабораторная работа №2.
Изобразить эквалайзер с помощью блоков, верхние блоки эквалайзера изменить высоту на 50%.
Для создания эквалайзера мне потребовалось ввести код в Css.
Использовались теги: width; height; position: absolute; left; top; background; div, bgcolor.
Лабораторная работа №3.
Виды границ, свойства границ. Виды цветов - rgba, hex. Создайте блок div, посередине экрана с отступом 20px от верхнего края страницы, заполните блок произвольным текстом(минимум 4 строки). Задайте отступ текста внутри блока - 10px. Сделайте сплошную границу вокруг блока шириной в 2px, чёрного цвета(методом hex); Под этим блоком создайте ещё один блок(отступ от верхнего 20px). Сделайте точечную границу слева и сверху блока. Цвет границы полупрозрачного красного цвета(rgba); Внутри этого блока создайте произвольную таблицу с свойством - border=1;
Для создания этого сайта потребовалось использовать Css код.
b1{
width:75%;
margin:15px 20% 0 20%;
border: 2px solid #000;
padding: 10px;
}
Лабораторная работа №4.
Box-shadow, text-shadow, border-radius. Создайте блок с шириной - 400px, без границы, с отступом сверху 20px. Добавьте тень вокруг этого блока(box-shadow). Блок заполните произвольным текстом (Не меннее 4 строк). Добавьте тень вокруг текста(text-shadow). Под этим блоком, с отступом - 30px, создайте новый блок. Ширина: 600px; Высота: 400px; Заливаем блок любым цветом(кроме чёрного). Попробуйте сделать тень внутри блока и закруглённые уголки в нижней его части(border-radius);
С помощью тега border-radius мы научились закруглять углы.
С помощью тега text-shadow можно добавить тень вокруг текста.
С помощью тега box-shadow добавили тень вокруг блока.
Использовались теги: width; padding; background; box-shadow; text-shadow; background; float; position; top; border-radius; div.
Лабораторная работа №5.
Фреймы. Frame,Iframe. Создайте свою папку. Внутри этой папки index.html(одна лаба на локалке). Создаём header.html(шапка), main.html(контент) и footer.html(подвал). Заполняем эти файлы - в header.html пишем код шапки(то что будет отображаться в верху экрана). В footer.html - код нижней части сайта(копирайт и т.д.). Наша задача с помощью тегов <-frame>,<-frameset>, сделать так, чтобы на одной странице отображались сразу 3 страницы, в нужном нам порядке. header->main->footer. А в файле main.html мы попрактикуем iframe. Внутри main.html с помощью iframe выводим содержимое внешнего сайта(например http://www.random.org/).
В данной работе пришлось создать сразу 4 файла с названиями: index.html; header.html; main.html; и footer.html.
Узнали новые теги: frame и frameset.
Лабораторная работа №6.
Немного про <head>. Вставка картинок. Добавьте любую картинку. Задайте ширину и высоту сами - 300 на 300. Сделайте ей любую границу в двух сторонах. Сделайте картинку полупрозрачной. Сделайте так, чтобы при наведении на картинку - она меняла свои свойства (например становилась не прозрачной). В <head> - Теперь сделайте иконку сайта, которая будет отображаться в вкладках браузера(favicon). Текст вкладки сделайте пустым. (title). Задайте любую кодировку.
В данном задании основной проблемой было сделать прозрачной изображение.
За прозрачность отвечает тег: opacity.
Так же добавляли Границы вокруг изображения с помощью тега: border.
Так мы научились добавлять прозрачность и границы изображения.
Что бы сделать изображения определенной высоты и ширины использовали теги: width и height. При наведении на картинку она изменяет свойства и становится не прозрачной
Лабораторная работа №7.
<-h1..h5>. Свойства текста. Шрифт. Добавьте не большой текст(минимум 5 строк). С помощью тегов <-h*> настройте размер текста в каждой строчке(сделать перевёрнутую усеченную пирамиду.) С большего к меньшему. Копируем, что получилось, вставляем под ним. Теперь наша цель на скопированном тексте - сделать полужирным курсивом. Тексту средней строки добавить подчёркивание.
Тут мы использовали основной тег: <h*> (h1-h6)
Так же использовали теги <u> - Для подчеркивания;
Тег <b> Что бы сделать текст Жирным шрифтом.
Тег <i> Для курсива текста.
Вывод:
Цель и задачи, поставленные в практической работе, выполнены. C большим интересом ходил на практические курсы и более глубоко узнал html и css.