Задание №1
Оформите стихотворение, как показано на рисунке:
Евгений Евтушенко
— 1955 —
Бывало, спит у ног собака,
костер занявшийся гудит,
и женщина из полумрака
глазами зыбкими глядит.
Потом под пихтою приляжет
на куртку рыжую мою
и мне,задумчивая,скажет:
«А ну-ка, спой!..» —
и я пою.
Задание №2
Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1. Вверху показана исходная ссылка, внизу ссылка после наведения курсора.
Задание №3
Исправьте ошибки в приведенном коде:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <title>Glossary<title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <body> <a href="glosstop.html"><h1>Glossary of Terms</h1></a> <span> <h2><p>Algorithmic Oriented Language.</h2></p> </span> <span> <h2><p>Creates new project</p></h2> </span> </body> </html>
Задание №4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-1"> <body> <h11 align="justify">Галион</h1> <p align="justify"><strong>Галион</b> — большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией.</br> Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу.</p> <hr> <blockquote>Флагманский корабль был мощным <i>галионом</i>, вооруженным сорока Восьмью большими пушками и восьмью малыми.</blockquote> </hr></p> </body> </html>
Задание №5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251&q.
вные противники Александра Македонского: татаро-монголы, Дедал и Цезарь;</p> <p>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</p> </ul> </body> </html>
Задание №6
Сделайте страницу с изображением флага Японии, как показано на рис. 1. Размер 300х200 пикселей, диаметр круга 120 пикселей. Любые картинки применять запрещено, всё надо сделать с помощью CSS. Страница должна корректно отображаться во всех современных браузерах.
*Для круга следует использовать свойствоbackground: radial-gradient(circle, #bc002d 58px, #fff 60px);
Задание №7
С помощью стилей создайте текст в рамке, как показано на рис. 1.
Задание №8
С помощью тегов <ol> и <li> постройте списки, показанные на рис. 1. При этом у вас должен быть валидный XHTML и CSS. Списки должны корректно отображаться в браузерах IE8, Firefox 6, Safari 5, Opera 11, Chrome 8 и в их старших версиях.
Сделать 2 варианта: 1 – с помощью html, 2 – с помощью CSS.
Задание №9
Напишите код XHTML, чтобы получить результат, приведенный на рис. 1.
Задание №10
Измените стиль для таблицы, чтобы она получилась, как показано на рис. 1. Вносить изменения в код таблицы нельзя, всё оформление должно делаться только через стили.
Задание №11
Сделайте текст, как показано на рис. 1. В качестве шрифта укажите Impact.
Задание №12
Сверстайте форму регистрации, показанную на рис. 1. Ширина формы и её полей фиксирована.
life-prog.ru
Задание HTML
Для выполнения задания по HTML понадобится:
1. Текстовый редактор Блокнот (установлен на любом компьютере).
2. Шпаргалка — таблица тегов, которые будут использованы при выполнении задания:
|
Тег |
Описание |
|
<html>…</html> |
Указывает программе просмотра страниц что это HTML документ. Открывающий тег ставится в самом начале документа, закрывающий — в самом конце. |
|
<head>…</head> |
Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. В основном содержит служебные команды, которые не видит обычный пользователь. Открывающий тег обычно расположен сразу после тега <html>, закрывающий — после указания всех служебных слов заголовка. |
|
<title>…</title> |
Определяет заголовок документа. Отображается вверху браузера, располагается в теге <head>…</head> |
|
<body>…</body> |
Предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри этого тега. Открывающий тег ставится после тега </head>, закрывающий — перед концом документа (перед </html>) |
|
bgcolor=»?» |
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB. Пишется внутри открывающего тега <body>, с двух сторон отделяется пробелами. |
|
text=»?» |
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB. Пишется внутри открывающего тега <body>, с двух сторон отделяется пробелами. |
|
<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>… </h5> , <h6>…</h6> |
Применяет к тексту, помещенному между открывающим и закрывающим тегом, стиль заголовка. <h1> — заголовок самого большого размера, <h6> — самого маленького. |
|
<b>…</b> |
Применяет к тексту, помещенному между открывающим и закрывающим тегом, полужирный стиль начертания. |
|
<i>…</i> |
Применяет к тексту, помещенному между открывающим и закрывающим тегом, курсивный стиль начертания. |
|
<p>…</p> |
Создает новый параграф (не требует обязательного использования закрывающего тега) |
|
align=»?» |
Параметр, который отвечает за выравнивание текста по левой (left), правой (right) стороне, или по центру (center). Может писаться внутри различных открывающих тегов, например, тегов заголовка <h…>, или тега <p>. Внутри тега, отвечающего за вставку изображения, дополнительно могут использоваться значения bottom, top, middle. |
|
<img src=»name»> |
Добавляет в документ изображение, которое находится по адресу, записанному вместо name. Не требует закрывающего тега. |
|
height=»?» , width=»?» |
Параметр, который отвечает за высоту и ширину изображения. Используется внутри тега <img>, отделяется пробелами. |
|
<table>…</table> |
Создает таблицу. Внутри тега надо указать количество строк и ячеек в каждой строке. |
|
<tr>…</tr> |
Определяет строку в таблице. Используется внутри тега создания таблицы. Дополнительно внутри тега следует указывать количество и содержимое ячеек. |
|
<td>…</td> |
Определяет отдельную ячейку в таблице. Внутри тега может находиться содержимое различных типов — текст, рисунки и пр. Используется внутри тега для создания строк в таблице. |
|
colspan=»число» |
Используется внутри тега создания ячейки. Устанавливает число ячеек, которые должны быть объединены по горизонтали. |
|
rowspan=»число» |
Используется внутри тега создания ячейки. Устанавливает число ячеек, которые должны быть объединены по вертикали. |
|
<a href=»URL»>…</a> |
Создает гиперссылку на другую страницу или сайт. Внутри тега может быть помещен текст, рисунок или другой объект, при нажатии на который пользователь будет уходить на заданную страницу. |
<HTML>
<HEAD>
<TITLE> Первая страница </TITLE>
</HEAD>
<BODY> Это моя первая страница </BODY>
</HTML>
3. Цветовая схема с кодами цветов для HTML, которые будут использованы при выполнении задания:
Задание 1. Создаем Веб-страницы
Цель: создать несколько веб — страниц, связанных друг с другом посредствам гиперссылок, посвященных Вашему колледжу/специальности/придуманной фирме/любому другому выбранному объекту/интересной истории с альтернативными концовками, которые будут отвечать заданным ниже условиям и составлять единый проект.
Замечание 1: для того, чтобы Ваши веб — страницы стали едиными проектом, все страницы необходимо хранить в одной папке, вместе с картинками.
Замечание 2: для того, чтобы Вам было проще, названия выбранных картинок лучше будет поменять на 01, 02, 03 и т.д или на 1, 2, 3 и т.д.
Структура проекта представлена на схем:
1. Страницы 00.htm
Первая страница Вашего проекта (страница — приветствие)
Условия оформления страницы:
-
страница должна иметь цветной фон;
-
заголовок на странице должен быть отцентрировав с использованием тегов HTML;
-
страница должна содержать небольшой тематический рассказ — введение о выбранном объекте/истории. Рассказ должен быть отцентрирован при помощи тегов HTML;
-
страница должна содержать две отцентрированных при помощи тегов HTML картинки — ссылки небольшого размера с подписями. Ссылки с картинок которые ведут на страницы 10.htm и 20.htm соответственно;
-
титл в шапке должен совпадает с заголовком страницы.
Содержание страницы: возможны варианты
-
Классический вариант — рассказ о своем колледже/специальности/о чем-либо еще близком к Вашей профессии. В таком варианте должны присутствовать две составляющие (например, для проекта о Вашем колледже можно выбрать две разных специальности, о которых Вы расскажете в проекте).
-
Альтернативный вариант — история о катастрофе/о приключении/о детективе/о чем-либо еще, что Вам интересно, где присутствуют два героя с альтернативными действиями (за которых можно пройти).
2. Страницы 10.htm и 20.htm
Условия оформления страниц:
-
страница должна иметь цветной фон;
-
титл страницы содержит имя героя или название специальности;
-
страница содержит несколько фраз, описывающих Вашу историю/приключение/выбранный объект, которые отцентрированы при помощи тегов HTML;
-
страницы содержит созданную при помощи тегов HTML таблицу следующего вида, в которой в левом столбике или слова, или картинки являются гиперссылками на страницы:
11.htm, 12.htm, 13.htm для страницы 10.htm
21.htm, 22.htm, 23.htm для страницы 20.htm
|
Заголовок столбца 1 |
Заголовок столбца 2 |
|
Общее свойство |
|
|
Другое общее свойство |
|
Содержание страницы — возможны варианты:
-
Классический вариант — Вы продолжаете рассказ о колледже/специальности/о том, что выбрали. Например, если Вы выбрали рассказа о колледже, то таблицы будет содержать в себе: выпускники этой специальности будут обладать такими-то навыками, знаниями, умениями.
Таблица в таком случае может содержать, например, названия предметов, которые изучают выпускники специальности(столбик один — название предмета) и краткое описание содержания данного предмета (столбик 2 — описание предмета, общее свойство — допустим, общенаучные и профессиональные). Тогда названия предметов будут являться одновременно и гиперссылками для перехода на страницы:
11.htm, 12.htm, 13.htm для страницы 10.htm
21.htm, 22.htm, 23.htm для страницы 20.htm
-
Альтернативный вариант — содержит сюжет развития вашей истории (например, спасти мир, разгадать тайну, разгадать загадку приключения при помощи специальных способностей или специальных приборов, тогда столбец 1 — название способностей или приборов, столбец 2 — описание как работает способность или прибор, общее свойство — например, магия льда, магия огня, или оптический и электронный). Тогда, в данном случае, названия способностей, приборов будут являться одновременно и гиперссылками для перехода на страницы
11.htm, 12.htm, 13.htm для страницы 10.htm
21.htm, 22.htm, 23.htm для страницы 20.htm
3. Страницы 11.htm, 12.htm, 13.htm, 21.htm, 22.htm, 23.htm
Условия оформления страниц:
-
страница должна иметь цветной фон;
-
титл страницы содержит название предмета или навыка, способности или прибора;
-
страница содержит несколько фраз, описывающих продолжение и окончание Вашей истории/приключения/выбранного объекта, которые отцентрированы при помощи тегов HTML;
-
cтраница содержит картинку и гиперссылку на страницу — приветствие (00.htm).
Содержание страницы — возможны варианты:
-
Классический вариант — содержит более подробное описание предмета, с названия которого будет осуществляться переход на страницы, картинку, с хотя бы отдаленно подходящей тематикой и слово/словосочетание — гиперссылку для перехода на главную страницу (00.htm).
-
Альтернативный вариант — содержит описание концовки сюжета Вашей истории (концовки должны быть разыми для каждой страницы). Возможны хорошие и/или плохие концовки истории. Страница содержит картинку, с хотя бы отдаленно подходящей тематикой и слово/словосочетание — гиперссылку для перехода на главную страницу (00.htm), например «Начать сначала».
После того, как Ваш проект будет готов необходимо проверить его полную работоспособность и наличие ошибок (если есть ошибки — исправить их).
Готовый проект сохранить в Вашей папке на диске :F и показать результаты работы преподавателю.
studfiles.net
С чего начинается продвижение сайта, старт работ по поисковому продвижению и раскрутке сайта в компании «Пиксель Плюс». Базовые понятия продвижения сайтов
Начало работ по поисковому продвижению сайта в компании «Пиксель Плюс». Базовые понятия.
Необходимость ежемесячной оплаты работ по поисковому продвижению сайта. Основные работы по сайту для его эффективной раскрутки и себестоимость работ
Я бы хотел заплатить за продвижение своего сайта 1 раз и быть высоко в выдаче по конкурентным запросам всегда, возможно ли такое?
Продвижение по трафику: вопросы клиентов и ответы на них
Ряд вопросов по продвижению сайта по трафику. Нюансы тарификации, расчёта стоимости работ, абонентской оплаты.
Часто задаваемые вопросы по веб-аналитике (FAQ)
Вопросы, которые часто задаются заказчиками услуги по веб-аналитике и оказанию самой услуги. Что такое веб-аналитика? Зачем проекту нужна веб-аналитика? Зачем нужно определять KPI и какие они бывают? И так далее.
Какие работы НЕ входят в SEO в случае продвижения в «Пиксель Плюс»?
Поисковое продвижение включает в себя большой перечень работ, необходимый для получения максимальных результатов… Но какие же работы не входят в платеж на SEO?
Наличие текстов для продвижения сайта, оптимизация SEO-текстов под поисковые запросы
Зачем нужен текст на сайте? Его же никто не читает!
Время продвижения и внесения изменений в результаты продвижения сайта, скорость реагирования Яндекса (Yandex) на внесение изменений на сайте
Я оплатил услуги продвижения сайта на месяц. Прошло уже 10 дней и позиции в Яндексе не улучшились, вы там работаете или нет?
pixelplus.ru
§1. Введение в HTML
1.1. Попробуйте написать по памяти код нашей первой веб-страницы. Показать решение.
1.2. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Используйте элемент ‘br’. Не забывайте про ‘title’. Показать решение.
1.3. Создайте веб-страницу, используя код второго примера, но сделайте так, чтобы второе предложение не отображалось в окне браузера. Используйте для второго предложения элемент ‘span’ и атрибут hidden. Показать решение.
1.4. Создайте веб-страницу, состоящую из двух абзацев, в которых будет по два коротких предложения, расположенных в разных строках. Цвет текста первого абзаца должен быть красным, а второго – синим. При наведении курсора на первый абзац, должна появляться подсказка «Я первый абзац», а при наведении на второй – «Я второй абзац». Используйте атрибут style, а в качестве его значения свойства CSS: «color: red» и «color: blue». Также воспользуйтесь атрибутом title, не путая его с аналогичным элементом. Показать решение.
1.5. Создайте веб-страницу, содержащую предложение: «Я открывающий тег <span>.». Используйте атрибут style и синий цвет шрифта. Не забывайте про мнемоники и коды символов. Показать решение.
1.6. Создайте веб-страницу, содержащую предложение: «Чтобы вывести мнемонику ‘&’ на экран, необходимо в коде знак амперсанда заменить на его мнемонику!». При наведении курсора на мнемонику, должна появляться подсказка «Мнемоника». Используйте атрибут style и значение цвета green, а также атрибут title. Не забудьте указать в заголовке документа элемент ‘title’. Показать решение.
§2. Форматирование текста.
2.1. Воссоздайте код представленной на рис. 2.1a html-страницы. Используйте элементы ‘pre’, ’em’, ‘address’, ‘hr’ и значения цветов: orange и green. Показать решение.
Условие задачи №2.1
2.2. Воссоздайте код представленной на рис. 2.2a html-страницы. Используйте элементы ‘dfn’, ’em’, ‘strong’, ‘br’. Вспомните про мнемоники символов ‘<' и '>‘. Показать решение.
Условие задачи №2.2
2.3. Воссоздайте код представленной на рис. 2.3a html-страницы. Используйте маркированный список и цвета green, red и orange. Показать решение.
Условие задачи №2.3
2.4. Усложните список задачи №3, создав вложенные списки и перечислив в них месяцы, как показано на рис. 2.4a. Используйте для внешнего списка атрибут style=»background-color: yellow». Показать решение.
Условие задачи №2.4
2.5. Воссоздайте код таблицы, представленной на рис. 2.5a. Чтобы границы у таблицы были слитные, используйте в элементе ‘table’ атрибут style=»border-collapse: collapse». Для объединения ячеек используйте атрибут colspan. Все ‘жирные’ ячейки являются заголовочными. Показать решение.
Условие задачи №2.5
2.6. Создайте на локальном сервере Xampp в папке htdocs тестовую папку test, в ней папку doc_1, в которой создайте папку doc_2 и в ней еще одну папку doc_3. Затем в папке doc_2 создайте пустые веб-документы page_2.html и page_2_1.html, в папке doc_3 – page_3.html, в папке doc_1 – page_1.html и в корневой папке test – index.html. На каждой из страниц создайте относительные ссылки, ведущие на другие страницы. В результате вы должны спокойно перемещаться между страницами. Затем замените все ссылки на абсолютные. В результате вы по прежнему должны свободно перемещаться между страницами. Для абсолютных ссылок не забудьте правильно указывать адресацию, начиная ее с http://localhost/. Показать решение.
§3. Служебные теги.
3.1. Создайте веб-страницу, указав базовый адрес http://belarusweb.net/, и пропишите в теле документа ссылку на файл page_5.html, который находится в папке по адресу http://belarusweb.net/doc_5/. Показать решение.
3.2. Создайте веб-страницу, указав базовый адрес http://belarusweb.net/, и пропишите в теле документа ссылку на файл page_6.html, который находится в папке по адресу http://belarusweb.net/doc_5/doc_6/. Также подключите к странице две внешние таблицы стилей CSS: style_3.css и style_4.css. Будем считать, что они находятся по адресу http://belarusweb.net/css/. Показать решение.
3.3. Создайте веб-страницу, указав базовый адрес http://belarusweb.net/, и пропишите в теле документа ссылку на файл page_7.html, который находится в корневой папке. Также подключите к странице внешнюю таблицу стилей CSS style_3.css. Будем считать, что она находится по адресу http://belarusweb.net/css/. В заголовке документа создайте элемент ‘script’, который выполнится после полной загрузки страницы, а в теле документа создайте элемент ‘script’, который будет выполняться параллельно загрузке страницы (асинхронно). Будем считать, что элементы ссылаются, соответственно, на скрипты http://localhost/
§4. Использование графики в html-документе.
4.1. Создайте на локальном сервере Xampp в папке htdocs тестовую папку test. Если вы ее уже создавали и не удалили, то и не нужно. Мы будем ее еще не раз использовать. В папке создайте пустой ‘html’-документ page_1.html. Скопируйте какое-нибудь изображение в папку test. Вставьте изображение в документ. Не забудьте указать атрибут alt. Используйте также атрибут title. Показать решение.
4.2. Очистите папку test. Создайте в ней три пустые ‘html’-страницы: page_1.html, page_2.html, page_3.html. Скопируйте изображение 4.7 в папку test. Вставьте во вторую и третью страницы абзацы, содержащие строки, соответственно, «Был выбран красный прямоугольник.» и «Был выбран синий прямоугольник.». Используйте скопированное изображение в качестве клиентской карты изображения: клик по красному прямоугольнику должен загружать вторую страницу, а клик по синему – третью страницу. Исходите из того, что разрешение рисунка 401х144 пикселя и он разделен примерно пополам. Для примерного определения координат оси X, Y направьте из верхней левой вершины рисунка вправо и вниз. Это поможет примерно задать координаты для активных зон в виде прямоугольников. Добавьте на вторую и третью страницы ссылки возврата на первую страницу. Показать решение.
Условие задачи №4.2
§5. Вставка в документ медиафайлов и других объектов
5.1. Создайте в папке test на локальном сервере Xampp папку music. Поместите туда два любых аудиофайла (песни). Создайте в корневой папке страницу page_music.html и разместите на ней данные аудиозаписи. Путь к первой аудиозаписи укажите в открывающем теге элемента ‘audio’, а ко второй – в атрибуте src элемента ‘source’. Поэкспериментируйте с атрибутами элемента ‘audio’. Показать решение.
5.2. Очистите папку test, а затем создайте в ней папку video. Поместите туда два каких-нибудь видеофайла. Создайте в корневой папке страницу page_video.html и разместите на ней данные видеоролики. Путь к первому видеофайлу укажите в открывающем теге элемента ‘video’, а ко второй – в атрибуте src элемента ‘source’. Поэкспериментируйте с атрибутами элемента ‘video’. Показать решение.
5.3. Очистите папку test, а затем создайте в ней папку advertising. Создайте в ней две страницы advertising_1.html и advertising_2.html. Первая страница должна содержать абзац с текстом «Хотите узнать скидку на сосиски?», а вторая – с текстом «30%». Создайте в корневой папке страницу page_1.html, содержащей абзац с текстом «Реклама», затем фрейм с именем fr_1, в который будет загружаться страница advertising_1.html. В конце создайте еще один абзац, содержащий гиперссылку на страницу advertising_2.html, которая будет загружаться при активации ссылки в окно фрейма. В качестве текста гиперссылки используйте слово «узнать». Показать решение.
§6. Формы
6.1. Наберите код пустой html-страницы. В качестве базового адреса укажите http://localhost/
6.2. Усложните код первой задачи. Добавьте поле выбора пола, использовав радиокнопки, а затем поле выбора владения языками, используя три элемента ‘input’ в виде флажков для русского, белорусского и английского языков. Не забудьте связать подписи к кнопкам с самими кнопками при помощи элемента ‘label’. Добавьте кнопку сброса формы. Внешний вид страницы показан на рис. 6.2a. Показать решение.
Условие задачи №6.2
6.3. Продолжим усложнять форму, код которой был написан в задачах №1 и №2. Добавьте в форму поля выбора страны проживания и загрузки фотографии для профиля. Используйте для этого, соответственно, элементы ‘select’ и ‘input’. Внешний вид страницы показан на рис. 6.3a. Показать решение.
Условие задачи №6.3
6.4. Добавьте в код формы, написанный в задачах №1-№3, автозаполнение в поле ввода имени, а также поля ввода логина и пароля. Используйте для этого, соответственно, элементы ‘datalist’ и ‘input’. Объедините все поля формы, кроме кнопок сброса и отправки, при помощи элемента ‘fieldset’ и укажите заголовок, как показано на рис. 6.4a. Поэкспериментируйте с атрибутами элементов формы. Показать решение.
Условие задачи №6.4
6.5. Восстановите код страницы, представленной на рис. 6.5a. Используйте элемент ‘form’ из предыдущих задач, а также элемент ‘button’ для создания кнопки отправки данных на сервер. Кнопка должна быть неактивной. Показать решение.
Условие задачи №6.5
§7. Подробнее о структуре html-документа
7.1. Посмотрите еще раз на пример кода, представленного на рис. 7.1, и попробуйте набрать его самостоятельно, включая текст и комментарии.
<!DOCTYPE html> <html> <head> <!-- Служебная информация --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Главная страница</title> <link href="css/style_1.css" rel="stylesheet"> <script src="javascript/script_1.js"></script> </head> <body> <!---------------- Шапка -------------------------> <!-- Организуем шапку сайта: меню, логотип и т.д. --> <header class="header_1"> <!-- Организуем шапку сайта: меню, логотип и т.д. --> <nav class="nav_1"> Ссылки на разделы сайта (панель навигации по сайту). </nav> Логотип, поисковая панель и др. информация </header> <!------------------ 1-я секция ---------------------------> <!-- Условно выделяем вводный раздел домашней страницы --> <section class="section_1"> Краткая информация по тематике сайта. <!-- Здесь расположим боковую панель --> <aside class="aside_1"> Небольшой блок для сопутствующей рекламы. </aside> </section> <!----------------- 2-я секция -------------------------> <!-- Условно выделяем раздел новостей сайта --> <section class="section_2"> <!-- Отрывки из новостей, включающие ссылки --> <!-- на страницы с полным текстом новости --> <article class="articles_1">1-я статья</article> <article class="articles_1">2-я статья</article> <article class="articles_1">и так делее</article> </section> <!------------ 'Подвал' сайта -------------------------> <footer class="footer_1"> <address>Информация об авторе</address> и другая информация 'подвала'. </footer> </body> </html>
Условие задачи №7.1
belarusweb.net
Задания по основам работы с HTML и CSS
Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.
Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.
Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.
Задания по углубленной работе с HTML и CSS
Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.
Задания по CSS-селекторам. Селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов. Задания на CSS-селекторы.
Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.
Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.
Задания по верстке форм
- Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в панели навигации Bootstrap.
- Сверстайте форму диспетчера на сайте
- Подключить jQuery-плагин для выбора даты/месяца из поля
- Создайте чекбокс по аналогии с социальной сетью.
- Создайте форму регистрации посетителя сайта
- Создайте форму подобной той, что сортирует товары в Яндекс.Маркет
Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Задания на кроссбраузерность.
Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию.
Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.
htmllab.ru
Данная статья не претендует быть исчерпывающим руководством по языку разметки документов HTML. В ней описываются основы HTML — базовые принципы, понятия и определения данной технологии, освоив которые, можно без труда двигаться дальше в изучении HTML кодинга.
Для изучения урока, скачайте архив с необходимыми файлами.
HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.
Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.
Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.
Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.
HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.
Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?
На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.
Этакий Word для HTML. Такие визуальные редакторы называются:
WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.
Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.
Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:
- Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
- HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
- Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
- Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
- Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.
Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.
Структура документа HTML
Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.
Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?
Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:
<!doctype html> <html> <head> <title>Заголовок</title> <meta charset="UTF-8"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <script src="script.js" type="text/javascript"></script> </head> <body> Тело документа </body> </html>
Обратите внимание, документы HTML имеют расширение .html.
Итак, по порядку из примера.
<!doctype html> — тип документа (доктайп)
<!doctype html>
Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.
Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.
В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.
<html> — начало документа
<html>
Первый тег, который мы встречаем после доктайпа, это <html>.
HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.
Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.
Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.
Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Тег <head>
<head>
Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:
<тег> содержание или другие теги </тег>
Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.
Тег <title> — заголовок документа
<title>Заголовок</title>
Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.
Метатег <meta charset=»UTF-8″ >
<meta charset="UTF-8" >
Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.
Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.
Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.
Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >
Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.
CSS стили документа
<link rel="stylesheet" href="style.css">
Подключает к документу CSS файл со стилями оформления HTML.
CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.
Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.
Тег <script>
<script src="script.js" type="text/javascript"></script>
Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.
В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.
Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.
</head>
Закрываем тег <head> и шагаем дальше.
Тело aka body
<body>
Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.
Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.
Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.
Тег |
Описание |
<a> |
Тег для создания ссылок в документе. Пример: <a href="http://webdesign-master.ru">текст ссылки</a> Атрибут href указывает документ, на который будет вести данная ссылка. |
<em>, <strong> |
Делает текст курсивом или жирным (акцентируемым). Пример: <em>текст курсивом</em> <strong>жирный (акцентируемый) текст</strong> |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа. Примеры: <h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> ... и т. д. |
<ol>, <ul> |
Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li> Примеры: <ul> <li>Элемент маркированного списка 1</li> <li>Элемент маркированного списка 2</li> </ul> <ol> <li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> </ol> |
<p> |
Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример: <p>Внешний вид HTML разметки во многом определяется CSS стилями.</p> <p>Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.</p> |
<img> |
Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся». Пример: <img src="путь_до_картинки.jpg" alt="Текст"> |
<form> + <input> + <textarea> |
Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер. Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: <form action="ссылка_на_скрипт_обработки_формы"> <input type="text" name="name"> <input type="text" name="email"> <textarea name="text"> Текст сообщения <textarea> <input type="submit" value="Написать"> </form> |
<span> |
Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример: Изучение HTML, в большинстве случаев, не вызывает <span>ни каких сложностей</span> у новичков. |
<video>, <audio> |
Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры: <video src="rolik_chuma.mp4" controls></video> <audio src="muzichka.mp3" controls></audio> Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере. |
<div> |
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>. Пример: <div> <div> Текст во вложенном блоке </div> </div> Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>. |
<iframe> |
Данный тег загружает внешнюю страницу в документ. Пример: <iframe src="http://rtfm.org.ru"></iframe> |
Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.
Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.
Например, не:
<video src="ролик чума.mp4" controls></video>
а:
<video src="rolik_chuma.mp4" controls></video>
Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.
Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.
Практическое задание по HTML верстке
Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.
- Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
- Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
- Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.
На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.
До новых встреч, друзья!
webdesign-master.ru