Разработка 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.