Разработка 3-х страничного сайта

lightning.crimea.edu

Мой трехстраничный сайт содержит четыре страницы.

Первая страница содержит ссылки на другие страницы сайта.

На сайте содержится три раздела, кнопки для разделов были созданы с помощью сайта cooltext.com и сохранены в формате .jpg

Вот так выглядит одна из страниц моего сайта:

В создании сайта я использовал теги HTML и CSS кода. Я использовал теги , а также много других.

Практические знания

Лабораторная работа №1.

Работа с формулами. Нижний верхний индекс. Работа с текстом.
Написать формулу сокращенного умножения. Написать стихотворение, разместить его в виде цитаты, подписи, сделать фон только под текстом, изменить текст на любой другой чем базовый.

Для начала требовалось сделать верхний индекс. Это делается очень просто: …

Лабораторная работа №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 — код нижней части сайта(копирайт и т.д.).

Наша задача с помощью тегов ,, сделать так, чтобы на одной странице отображались сразу 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.

Немного про . Вставка картинок. Добавьте любую картинку. Задайте ширину и высоту сами — 300 на 300. Сделайте ей любую границу в двух сторонах. Сделайте картинку полупрозрачной. Сделайте так, чтобы при наведении на картинку — она меняла свои свойства (например становилась не прозрачной). В- Теперь сделайте иконку сайта, которая будет отображаться в вкладках браузера(favicon). Текст вкладки сделайте пустым. (title).

Задайте любую кодировку.

В данном задании основной проблемой было сделать прозрачной изображение.

За прозрачность отвечает тег: opacity.

Так же добавляли Границы вокруг изображения с помощью тега: border.

Так мы научились добавлять прозрачность и границы изображения.

Что бы сделать изображения определенной высоты и ширины использовали теги: width и height. При наведении на картинку она изменяет свойства и становится не прозрачной

Лабораторная работа №7.

. Свойства текста. Шрифт. Добавьте не большой текст(минимум 5 строк).

С помощью теговнастройте размер текста в каждой строчке(сделать перевёрнутую усеченную пирамиду.) С большего к меньшему. Копируем, что получилось, вставляем под ним. Теперь наша цель на скопированном тексте — сделать полужирным курсивом.

Тексту средней строки добавить подчёркивание.

Тут мы использовали основной тег:(h1-h6)

Так же использовали теги- Для подчеркивания;

ТегЧто бы сделать текст Жирным шрифтом.

ТегДля курсива текста.

Вывод:

Цель и задачи, поставленные в практической работе, выполнены. C большим интересом ходил на практические курсы и более глубоко узнал html и css.

Рандомно подобранные статьи с сайта:

Создание сайта с нуля. Урок #1: Скетч


Похожие статьи:

  • Основные этапы разработки сайта

    Можно выделить шесть основных этапов разработки сайта: 1) составление технического задания; 2) подготовка текстового содержания и иллюстраций; 3)…

  • Структура сайта

    Главных причин популярности HTML три. 1. HTML-программирование очень простое. В нем нет традиционных алгоритмических структур, таких, как развилка, цикл,…

  • Страничная организация памяти. таблицы страниц

    Страничная организация памяти. В наиболее простом и наиболее часто используемом случае страничной виртуальной памяти виртуальная память и физическая…

admin