HTML на практике


Содержание

HTML и CSS

Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.

Данный раздел построен по принципу пошагового изучения материала, поэтому перед каждым названием урока по HTML и CSS, стоит цифра соответствующая порядковому номеру урока. Это естественно на тот случай если вы хотите изучить все от самых основ и не сделать себе кашу в голове. Если же вы уже знаете, что-либо о языках HTML и CSS, то вы так же можете найти здесь недостающие вам знания, или же, углубить уже изученное.

В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете как сделать сайт html css.

1. Что такое html и css

Наверное, каждый человек, который хоть раз в своей жизни сталкивался с созданием сайта, безусловно, слышал о такой связке как html и css я могу с уверенностью заявить, что если вы хотите делать сайты самостоятельно, то вам ни как не обойтись без знаний этих двух вещей.

2. Первая страница на html

После того как вы получили общие понятия о том, что такое html у вас в голове, явно сложилась неоднозначная картина, и я думаю это не удивительно. Пора переходить непосредственно к практике и создать-таки свой первый html документ.

3. Оформление CSS таблицы

Как и в языке html, так и в CSS есть свои особенности, правила и структура. В этом уроке я расскажу вам об основных понятиях языка CSS, о его структуре, устройстве и мы сделаем с вами первую CSS таблицу стилей и узнаете, как подключить таблицу стилей к html документу.

4. Селекторы CSS

Селекторы в CSS являются основой самого языка и их изучение и понимание очень важно, поэтому в этом уроке я вам расскажу еще о нескольких видах селекторах и опишу их возможности.

5. html работа с текстом

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

6. CSS работа с текстом (Часть 1)

После того как вы узнали все html теги для работы с текстом, теперь пора перейти непосредственно к CSS работе с текстом, которая уже значительно расширит ваши познания и возможности.

7. CSS работа с текстом (Часть 2)

В CSS огромное количество всевозможных удобных и качественно меняющих внешний вид свойств и мы продолжаем изучать CSS работу с текстом и в этом уроке, мы углубимся в тему работы с текстом и рассмотрим новые свойства текста.

8. Html вставка изображения

Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.

9. CSS свойства изображения

CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.

10. Создание гиперссылок html

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

11. Создание таблицы в html

Таблицы в html это один из достаточно больших разделов, при этом, достаточно интересный, так как их используют достаточно часто, а раньше вообще делали верстку сайта с помощью таблиц.

12. CSS стилизация таблиц

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

Нашли ошибку в тексте.
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

PROG-TIME

Практика вёрстки на языке HTML. Полезные уроки для закрепления выученного ранее материала и получения новых знаний на практике. Здесь мы практикуемся и набираем опыт в области WEB-программирования. Учимся строить грамотные сайты, продающие сайты.

Вы можете предложить тему на нашем форуме, задать свой вопрос или помочь другим начинающим программистам: https://vk.com/prog_time

Так же практикуйте своё знание языков программирования на нашем канале:https://www.youtube.com/channel/UCF_m4pWmG7zor1hHBCf_PqA


Простой калькулятор на HTML + CSS + JavaScript

Всем привет в данной записи мы с вами рассмотрим реализацию простого калькулятора на CSS, HTML, JavaScript. Это простой и очень красивый калькулятор, который вы легко сможете добавить на свой сайт. […]

Добавляем видео с YouTube на сайт через iframe. Дополнительные настройки встраивания видео из Youtube

Здравствуйте, сегодня я вам покажу как можно добавить видео с YouTube на свой сайт. Мы разберем дополнительные настройки которые позволяют регулировать следующее: запуск видео сразу после прогрузки страницы, запуск видео […]

HTML теги для SEO . Как правильно оптимизировать HTML сайт

Всем привет в этой записи мы с вами разберем теги которые используются для SEO оптимизации сайта, то есть оптимизации сайта под поисковые запросы. Мы будем рассматривать HTML теги и разберем, […]

Многоуровневое меню

Сегодня мы научимся создавать многоуровневое меню и подробно разберём как это делается. Многоуровневое меню – это меню которое имеет выпадающие окна с дополнительными пунктами меню. Этот пример подойдёт только для […]

HTML на практике

Всем привет!
Вот и подошли мы к завершению изучения основ HTML.
Сегодня будем учиться использовать на практике знания, которые вы получили на моем курсе и вместе попробуем сделать простой мини сайт на чистом HTML для воспитателя или учителя.

В конце практики, если вы учитель или воспитатель и вам нужен бесплатный мини сайт, вы сможете его скачать бесплатно – подарок от Костаневича Степана (StepkinBLOG.RU).
Итак, что нам нужно сделать?
Составим себе маленькое техническое задание.
Создадим мини сайт учителю либо воспитателю из 4 страниц.

  • 1 страница – « главная » — ( index.html )
  • 2 страница – « обо мне »- ( obo-mne.html )
  • 3 страница – « услуги »- ( uslugi.html )
  • 4 страница – « обратная связь »- ( obratnaja-svjaz.html ).

Структура сайта будет такой:

  1. Создание макета
  2. Фоновое оформление
  3. Создаем меню
  4. Заполняем ячейку « Лого », « Название сайт а», « Контент » и « Футер »
  5. Сохранение и добавление остальных страницы
  6. Проверка работоспособности сайта

1. Создание макета
Открываем блокнот и вставляем стандартный HTML код c кодировкой « windows-1251 »:

Про кодировку сайта можете почитать здесь.
Теперь создадим макет сайта. Макет сайта будем создавать из таблицы.
Ширина таблицы 1200 px.
Вот так будет выглядеть таблица:

В результате у нас выйдет вот такой макет:

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

Во, теперь другое дело:

2. Фоновое оформление

Здесь нам пригодится картинка для заднего фона. Создайте папку « image »и закиньте туда картинку « fon. jpg »:

В результате выйдет вот такой неплохой макетик:

Я думаю, вы помните, что чтобы сделать фоновую картинку, нужно использовать атрибут «background», чтобы закрасит ячейку фоновым цветом, используем атрибут «bgcolor».

3.Создаем меню
Нам нужно создать ссылки на такие страницы, как:

  • 1 страница – « главная » — ( index.html )
  • 2 страница – « обо мне »- ( obo-mne.html )
  • 3 страница – « услуги »- ( uslugi.html )
  • 4 страница – « обратная связь »- ( obratnaja-svjaz.html ).

— спецсимвол пробела, который я поставил между ссылками.

4. Заполняем ячейку « Лого », « Название сайта », « Контент » и « Футер »
В ячейке « Лого » вставим картинку « logo.png »:

Илон Маск рекомендует:  Как завесить windows

Скачайте картинку и залейте в папку « image »
В названии сайта пишем адрес сайта и кратное описание, например, так:

В ячейке « Контент » вставляем текст, заголовок страницы и картинки. Вот что-то подобное:

В ячейке « Футер » пропишем копирайт:


Код будет вот таким:

5. Сохранение и добавление остальных страниц
Для начала сделаем border=»о» для таблицы, мне кажется, так лучше будет. И добавим перед заголовком линию :

Результат будет вот таким:

Сохраните файл как « index.html ».

Теперь внимание.
В ячейке « Контент » замените вот это:

Жмите в блокноте не сохранить , а « Сохранить как… »
И даете файлу название « obo-mne.html ».
Такой процесс делаем к остальным пунктам меню:

« услуги »- ( uslugi.html )
« обратная связь »- ( obratnaja-svjaz.html )

В результате у вас должно получиться 4 файла и папка « image »:

На страницу « обратная связь »- ( obratnaja-svjaz.html ) можно вставить форму:

6. Проверка работоспособности сайта
Можете посмотреть, как получилось.

А те, кто пришел сюда случайно по запросу «создать свой мини сайт бесплатно для воспитателя или учителя», могут скачать результат сегодняшней практики:

Поздравляю всех, кто проходил мои курсы от самого начала до сегодняшнего момента, с окончанием изучения основ HTML. С этой минуты вы уже можете создавать простые мини сайты.
Если вы желаете усовершенствоваться в создании сайтов, рекомендую пройти курс CSS.

HTML 5 практикум в примерах

Самоучитель «HTML 5 практикум в примерах» поможет освоить новые технологии Веб — программирования. Содержит множество практических примеров применения HTML 5, с подробным описанием каждого.
В книге имеется большая коллекция готовых решений с готовым кодом, на примере которого разбирается применение того или иного элемента или технологии
Поэтапный разбор каждого представленного примера кода — лучший метод обучения и для новичков и для опытных веб-программистов

Передовые методы разметки, основы семантики, микроданные и пользовательские данные, аудио и видео на страницах, расширенные возможности HTML 5 и JS, создание форм, применение элементов Canvas — всё это и многое другое с примерами кода

Практика. HTML. Основы гипертекстовой разметки¶

HTML (HyperText Markup Language) — язык разметки гипертекста, используемый для создания документов, независимых от аппаратно-программной платформы. HTML — это не язык программирования, а описательный язык.

Цель работы: В ходе выполнения этой лабораторной работы необходимо освоить базовые приемы использования языка HTML для создания макета веб-страницы.

Задание к работе¶

  1. Спроектировать структуру веб-сайта по теме вашей учебной научно-исследовательской работы (УНИРС) или по любой другой теме, сопоставимой (или бОльшей) по объему с УНИРС.
  2. Разработать эскиз оформления веб-сайта (использовать любой графический редактор).
  3. Выполнить верстку макета страницы с блочной структурой по разработанному эскизу.

Указания к работе¶

Описание тегов здесь и далее дается без привязки к конкретной версии языка HTML, это сделано умышленно, чтобы акцентировать внимание на общих принципах разметки. Это же относится и к атрибутам тегов. Подробные описание возможностей различных версий HTML (на уровне стандартов) всегда доступны на сайте http://www.w3.org.

Типовая структура парного тега:

Типовая структура непарного (одиночного) тега:

Подавляющее большинство тегов HTML — парные, т.е. требуют наличия закрывающего тега.

Теги могут быть вложенными, при этом важно соблюдать порядок соответствия открывающих и закрывающих тегов.

  • Теги HTML не чувствительны к регистру.
  • Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.
  • Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.


Список основных тегов HTML¶

, ячейки —
Тег Обязательные атрибуты Описание
Контейнер HTML-документа.
Блок мета-данных HTML-документа
Название HTML-документа, выводится в заголовке окна программы-браузера.
См. подробное описание мета-тегов Предоставляет дополнительную информацию о документе.
Начальный и конечный тег тела документа.
Параграф, основной текстовый контейнер, закрывающий тег обязателен

. После закрывающего тега браузер выполняет перенос строки и абзацный отступ.

Контейнер, основное предназначение — размещение блоков содержимого на странице
(в XHTML/HTML 5 —
)
Принудительный перенос строки, закрывающий тег не требуется
текст будет отображаться так, как
Неупорядоченный (маркированный) список, элементы списка выводятся тегом
Упорядоченный (нумерованный) список, элементы списка выводятся тегом
href = «URI» Создает в документе гиперссылку, обязательный атрибут href указывает на ресурс или его местонахождение
Заключенный в теги текст будет отображаться курсивом.
Заключенный в теги текст будет отображаться жирным шрифтом.
Заключенный в теги текст будет отображаться моноширинный шрифтом.
Заголовки разделов. Возможные значения — от h1 до h6. Семантически правильная структура заголовков веб-страницы влияет на ее ранжирование в поисковом индексе.
Заключенный в теги текст будет смещен вниз (нижний индекс)
Заключенный в теги текст будет смещен ввверх (верхний индекс).
Заключенный в теги текст будет отображаться шрифтом большего размера.
Заключенный в теги текст будет отображаться шрифтом меньшего размера.
src=»https://iit-web-lectures.readthedocs.io/ru/latest/practice/URI»
alt = «some text»
Непарный тег. Указывает на изображение, загружаемое с адреса, заданного значением обязательного атрибута src. Значение атрибута alt используется, если изображение не может быть загружено или отображено.
Контейнер таблицы. Строки формируются тегом

Мета-теги¶

Основное предназначение мета-тегов ( ), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.

Вся информация, находящаяся в мета-тегах ориентирована на серверы, браузеры и поисковых роботов. Для посетителя веб-страницы информация, которую несут в себе мета-теги, будет не видна.

В документе может находится любое количество тегов . Все они размещаются в блоке . .

Рассмотрим некоторые, часто используемые мета-теги:

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

Автоматическое перенаправление (редирект) через N секунд после открытия с текущей страницы на указанный адрес .

Используется для указания имени автора. Поисковые системы могут найти нужную информацию по имени автора.

В мета-теге keywords указываются ключевые слова и их синонимы, присутствующие в документе. Этот тег изначально был ориентирован на поисковые машины, но был скомпрометирован веб-мастерами, ипользовавшими его для поискового спама.

Этот тег задает фразу, по которой пользователь определяет суть вашей страницы и решает, посещать ли ее. Вписанные выражения в данный meta-тег играют важную роль в рейтинге страницы. Ключевые фразы из описания должны совпадать с основным текстом страницы, это тоже играет большую роль при индексации страницы поисковыми роботами.

Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано “noindex”).

Cпециальные символы¶

В таблице приведены некоторые специальные символы HTML, имеющие особое назначение и собственный способ представления в виде мнемонического или числового кода.

Символ Мнемокод Числовой код Описание
неразрывный пробел
¢ ¢ ¢ цент
£ £ £ фунт стерлингов
¥ ¥ ¥ иена или юань
§ § § параграф
© © © знак copyright
« « « левая двойная угловая скобка
­ ­ место возможного переноса
® ® ® знак зарегистрированной торговой марки
° ° ° градус
² ² ² верхний индекс два (x²)
³ ³ ³ верхний индекс три (x³)
· · · точка по середине
» » » правая двойная угловая скобка
½ ½ ½ дробь – одна вторая
× × × знак умножения
÷ ÷ ÷ знак деления
σ Σ Σ греческая заглавная буква сигма
λ λ λ греческая строчная буква лямбда
μ μ μ греческая строчная буква мю
маркер списка
многоточие .
валюта евро

Немного о верстке¶

Общее форматирование¶

Структура макета веб-страницы¶

Возможности HTML и CSS позволяют создавать гипертекстовые страницы как с линейной, так и с нелинейной структурой. Линейные структуры (где текст отображается последовательно, элемент за элементом) сейчас используются не часто.

Больше возможностей по дизайну представляют макеты веб-страниц с нелинейной структурой, которые создаются:

  • С использованием фреймов.
  • С использованием табличной верстки.
  • С использованием блочных элементов.

Пусть требуется создать документ, логически разделенный на три блока (рис. 2): «head» — верхний блок, «menu» — левый блок, «content» — правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.

Верстка сайта с нуля. Меню навигации. Часть 1.

Начиная с этого урока, мы будем учиться верстке сайта с нуля в популярном flat стиле. Эта тема очень объемная и мы посвятим ей не один урок. Что означает это на практике?

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

Будем исходить из того, что заказчик оказался добрым человеком и предоставил нам вместе с макетом и заранее порезанные картинки. Для создания HTML страницы, нам потребуется: .psd макет, папка с картинками, Photoshop, Notepad++ и браузер.

Мы говорим с вами про макет, но пока это только картинка, из которой нам предстоит сделать полноценную HTML страницу.


Обратите внимание, что наш макет представляет из себя классический пример flat дизайна. Flat дизайн – это значит «плоский», здесь вы не увидите объемных теней, градиентов и других «наворотов».

Открываем макет в фотошопе и берем оттуда всю нужную информацию – цвет, шрифт, размеры и начинаем писать код, первой у нас идет шапка сайта, состоящая из логотипа и меню навигации. Разумеется, что наш сайт будет адаптивным под любые устройства и разрешения экрана, поэтому все размеры указываем в % и em.

Верстка шапки сайта

Создаем HTML страницу и делаем разметку нашей шапки. Содержимое шапки пишем внутри парного тега header.

Без оформления CSS стилями выглядит шапка совсем не так, как надо. В файле style.css, пропишим селекторам соответствующие свойства, чтобы шапка выглядела согласно макету.

Разберем основные моменты. Логотип и меню навигации должны быть в одной строке. Поэтому в блоке div с логотипом задаем обтекание — float: left; Навигационное меню встанет справа от логотипа. Пункты меню должны быть в одной строке — display:inline-block; Отменить обтекание можно вставкой в код пустого дива —

Создание HTML 5 структуры на практике

Статья, в которой рассматривается положение дел, связанных с созданием HTML5-структуры на практике, а также некоторые другие моменты, которые необходимо учитывать во время её разработки.

Уровень поддержки HTML5-структуры пользовательскими агентами

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

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

Чтобы авторы обратили на это внимание, разработчики спецификации опубликовали в стандарте HTML5 следующий абзац.

Основное содержимое вышеприведённого абзаца заключается в том, что они призывают авторов не полагаться полностью на структуру документа, описанной в этой спецификации, по крайне мере до тех пор, пока новая структура не получит широкую поддержку. Стандарт рекомендует авторам, как и прежде, создавать структуру веб-страниц с помощью элементов h1 , h2 , h3 , h4 , h5 и h6 или такую, которая была бы обратно совместимой с заголовочной.

Несмотря на расплывчатую поддержку HTML5 структуры документа пользовательскими агентами, авторам всё равно стоит задуматься о её внедрении. Это позволит сделать документ структурированным, семантическим и логичным с точки зрения HTML5.

Создание HTML5-структуры обратно совместимой с заголовочной (HTML4)

До тех пор пока HTML 5 структура документа, не будет однозначно пониматься пользовательскими агентами, её создание будет обусловлено необходимостью использования обратной совместимости с HTML4. Таким образом, при создании структуры документа авторам следует учитывать то, что она должна быть правильной как в отношении HTML4, так и в отношении HTML5.

Создавать такую структуру не так уж сложно как это может показаться на первый взгляд. Для этого авторам всего лишь необходимо использовать внутри секционных элементов заголовки соответствующего ранга. Определяется ранг по уровню вложенности секционного элемента. Корневой секционный элемент имеет 1 ранг. Секции, которые расположены непосредственно в нём, имеют 2 ранг. Секции, которые расположены внутри секций второго ранга, соответственно имеют 3 ранг и т.д.

Вышеприведенный пример будет иметь следующую структуру (outline):

Рассмотрение процесса проектирования структуры документа на реальном примере

Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) рассмотрим на примере страницы блога, содержащей статью.

Начнём процесс проектирования с рассмотрения основных групп контента, из которых состоит данная страница.

На вышепредставленном рисунке видно, что данная страница состоит из шапки, навигации по блогу, основного блока (статья с комментариями), боковой панели и футера.

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

Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) и оптимизированной под поисковые системы выполним поэтапно.

На 1 этапе разработаем HTML5-структуру страницы, не обращая внимание на то, как она будет выглядеть с точки зрения HTML4 (заголовочной структуры).

Для этого воспользуется элементами article , section , nav и aside из категории sectioning, и элементом h1 из группы heading.

На 2 этапе доработаем структуру, полученную на 1 этапе, таким образом, чтобы она была обратно совместимой с заголовочной.

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

Инструменты для проверки HTML-структуры документа

Проверить разработанную структуру документа можно с помощью следующих инструментов:

Проверка структуры документа с помощью сервиса W3C» title=»>Проверка структуры документа с помощью сервиса W3C»>

Проверка структуры документа с помощью HeadingsMap


Расширение HeadingsMap для браузера Mozilla Firefox — это очень удобный инструмент, который позволяет проверить структуру документа в соответствии со спецификацией HTML5 и HTML4.

Заключение

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

htmllab

Добро пожаловать в квест по основам HTML! Нарушение правил квеста и/или грубые ошибки, приводят к исключению из квеста без уведомления. Письма с содержанием, отличным от простого URL на сайт с результатом остаются без ответа — экономьте время

Задание 1. Создайте сайт агентства недвижимости.

  1. Создайте страницы сайта (index.html — страница «Главная», about.html — страница «О компании» (и сотрудниках), catalog.html — страница «Каталог» с перечнем объектов недвижимости, contact.html — страница «Контакты» с контактными данными, service.html — страница «Услуги» о предоставляемых услугах).
  2. Создайте папки css (style.css, mobile.css), img (изображения должны быть выдержаны в официальном стиле, подобраны по размеру и указываться в коде с альтернативным текстом), js (script.js).
  3. Страницы должны быть заполнены максимально правдоподобным текстом (подсмотрите на существующих сайтах агентств). К каждой странице должен быть привязаны: style.css и mobile.js из папки css, script.js из папки js, а изображения из папки img.
  4. На каждой странице должно быть одинаковое горизонтальное меню в элементе . Ссылки должны корректно вести на соответствующие страницы
  5. На страницах должны быть прописаны title, h1 и
  6. Код каждой страниц должен быть валидным
  7. Результат выполнения задания должен быть прислан как ссылка на общедоступный сайт (ссылка на свой домен или github pages)
  8. Все файлы должны лежать в корне сервера (например, неправильный адрес ссылки — https://myaccount.c9users.io/mysite, правильный — https://myaccount.c9users.io/)

Задание 2. Оформление сайта.

  1. Подберите цветовую гамму страниц по любому из примеров https://www.templatemonster.com/ru/category/real-estate-website-templates (вместе в решением задания, пришлите ссылку на выбранный вариант)
  2. Создайте вёрстку для каждой страницы сайта. Главные блоки внутри body должны иметь класс container. Верхняя часть страницы, меню, основное содержимое, правая колонка и подвал должны содержать: header, nav, main, footer.
  3. На странице каталога квартир, в главной области страницы, вставьте объекты недвижимости с классом «product»: кол-во комнат квартиры (.product-level), описание квартиры (.product-desc), изображение квартиры (.product-img), стоимость квартиры (.product-type-house) и валюта (.product-price-currency), тип дома (.product-type-house) , этаж (.product-level). Изображения квартир можно взять на любом бесплатном стоке изображений, например, http://www.freedigitalphotos.net, по ключевым словам room, flats, apartments и др.) Можно подсмотреть, как всё устроено, у существующих агентств недвижимости.
    Категории у каждой квартиры должны быть гиперссылками с заглушками в виде #.
  • Объекты недвижимости должны быть расположены в табличном виде, но свёрстаны не таблицей — только блочная вёрстка.
  • В правой колонке страницы (.sidebar-right) , где расположены изображения квартир, создайте форму поиска по квартирам: однострочное поле «Общая площадь», два однострочных поля для ценового диапазона (от и до), набор из 5 флажков с указанием сколько комнат нужно (студия, одно-, двух-, трёх- и четырёхкомнатная), поле выбора select («Восток», «Север», «Запад», «Юг»)7.
  • На странице контактов вставьте Яндекс.Карту на адрес агентства.
  • Оформите вертикальное меню при помощи CSS (без маркеров, подчеркивание только при наведении, измените стандартную цветовую гамму, обнулите у ol, li все поля и отступы).
  • Практика HTML/CSS

    29.03.2013, 01:48

    Практика по html и css
    Посоветуйте ,пожалуйста, как можно попрактиковаться,после того как изучил html и css. Может ссылки.

    Старые добрые HTML и CSS или новые HTML 5 и CSS 3?
    Здравствуйте ) Дело собственно вот в чем. Я хочу на лето заняться изучением создания сайтов. .


    css: практика
    Есть у кого-нибудь видеокурс Евгения Попова css:практика, 36 видеоуроков? в инете ищу, бесплатно.

    Как сделать вот такой макет через html и css (div и css)
    Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот.

    Основы HTML для начинающих

    Данная статья не претендует быть исчерпывающим руководством по языку разметки документов 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 редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки
        , редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
      • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
      • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
      • Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

      Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

      Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

      Структура документа HTML

      Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

      Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

      Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

      Обратите внимание, документы HTML имеют расширение .html.

      Итак, по порядку из примера.

      — тип документа (доктайп)

      Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

      Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.

      В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.

      — начало документа

      Первый тег, который мы встречаем после доктайпа, это .

      HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

      Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.

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

      Тег является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

      Далее, мы видим тег , который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

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

      Тег — заголовок документа

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

      Метатег

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

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

      Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

      Фавиконка (favicon)

      Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

      CSS стили документа

      Подключает к документу CSS файл со стилями оформления HTML.

      CSSкаскадные стили оформления HTML документа. У каждого тега, который находится в теге , имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция
      подключает внешние файлы к документу HTML, в том числе и стили CSS.

      Илон Маск рекомендует:  Сайт СДЛ, в чем разница между рядовым сайтом и сайтом для людей
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL