Архив рубрики: HTML,CSS

Задание по HTML к седьмому уроку

Пример работы 7 урок http://ot7.ru/html/7   Работа с иконками Чтобы вставить иконки на сайт,необходимо подключить их, для этого перейдите по ссылке http://fortawesome.github.io/Font-Awesome/get-started/, скопируйте тег линк и разместите его в контейнер head Все иконки здесь: http://fortawesome.github.io/Font-Awesome/icons/.   Эффекты для фото. Попробуйте создать собственную галерию на странице galereya.html с фотографиями. 1. Переходи к эфектам первый эффект увеличение. Стиль: /*GROW*/ .grow… Читать далее »

Задание по HTML к пятому уроку

Содержание: Верстка 1  http://ot7.ru/html/51 Верстка 2 http://ot7.ru/html/urok5 Верстка 1 Создайте меню и фон как на  примере http://ot7.ru/html/51 Код html <html> <head> <meta charset=»utf-8″> <title>Блочная верстка</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <div id=»header»> <div class=»center»> <div class=»row»> <div class=»logo»> <h3> <a href=»index.html»>IWebmaster.kz</a> </h3> </div> <div class=»menu»> <ul> <li><a href=»index.html»>Главная</a></li> <li><a href=»»>О нас</a></li> <li><a href=»»>Услуги</a></li> <li><a href=»#»>Контакты</a></li> </ul> </div>… Читать далее »

Задание по HTML к четвертому уроку. Блочная верстка

В своей рабочей папке с уроками, создайте html документ index.html  и сверстайте страницу по шаблону или по лабораторной работе 4 урок Лекционная часть Пропишите основную структуру документа В контейнере Body — создайте 6 блоков div: 1 оберточный блок wrapper, отвечаeт за общую ширину рабочего пространства и расположения страницы по середине. 5 остальных блоков — ячейки, каждый из них… Читать далее »

HTML урок 10. Виды и свойства блоков. Псевдоклассы и псевдоэлементы

Как вы помните, элементы могут быть блочными и строчными. По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a — строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений. Рассмотрим все четыре на примерах. display:block Это значение… Читать далее »

HTML урок 9. тег FORM
…

Описание Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. Документ может содержать любое количество форм, но одновременно на сервер может быть… Читать далее »

HTML урок 4. Ссылки

Блочные и строчные тэги Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,…,<h6>, <hr>,<ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент,… Читать далее »

HTML урок 5. Псевдоклассы и background (фон)

Содержание: Ссылки Псевдоклассы фон Ссылки HTML тег a С помощью html тега <A> создаются ссылки на сайте. Причем как внешние, так и внутренние. Тег a встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать вручную. Синтаксис тега <A>… Читать далее »

Задание к уроку 9 php. Сжатие изображений

Задание: Используя функцию сжатия изображений из урока 9  и форму загрузки изображений из задания к уроку 5(исключить отправку уведомления на почту), выполнить сжатие загружаемого изображения и в ответе об успехе вывести все 3 размера изображения s_my_first_uploaded_image.jpg l_my_first_uploaded_image.jpg my_first_uploaded_image.jpg [spoiler title=»Решение»] index.php <!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Загрузка файла</title> </head> <body> <form action=»upload.php» method=»post» enctype=»multipart/form-data»> <input type=»file»… Читать далее »

HTML урок 8. Анимация

<html> <head> <meta charset=»utf-8″> <link rel=»stylesheet» href=»style.css»> <title>Блочная верстка</title> </head> <body> <div class=»wrapper»> <div id=»header»> <div class=»logo»><a href=»index.html»>Ikurs</a></div> </div> <div id=»nav»> <nav> <ul> <li><a href=»index.html»>Главная</a></li> <li><a href=»#»>Услуги</a></li> <li><a href=»#»>Контакты</a></li> </ul> </nav> </div> <div id=»content»> <div class=»col-4″><img class=»blur» src=»images/webmaster.jpg»></div> <div class=»col-4″><img class=»op» src=»images/webmaster.jpg»></div> <div class=»col-4″><img src=»images/webmaster.jpg»></div> <div class=»col-4″><img src=»images/webmaster.jpg»></div> <div class=»col-3″><img src=»images/webmaster.jpg»></div> <div class=»col-3″><img src=»images/webmaster.jpg»></div> <div… Читать далее »

Задание по HTML к третьему уроку

Задание к  третьему уроку HTML Cверстать на выбор веб-дизайн или порода Японская Хаски Скопируйте «2urok.html» и переименуйте его на 3urok.html. В title замените 2 урок на 3 урок В самом конце документа создайте таблицу Плюсы и минусы профессии. В таблице создайте 4 строки и 2 столбца <table> <tr> <th>1 строка 1 заголовок столбца</th> <th>1 строка 2 заголовок столбца</th>… Читать далее »