Изучаем HTML - первый шаг
Понимание основ html
Всего четыре идеи и можно с уверенностью заявлять, что мы понимаем, что такое html.
1) HTML - это расставление прямоугольников по экрану.
Прямоугольники (блоки) могут быть картинкой, видеороликом, заголовком или содержать в себе целый текст. С помощью html мы их располагаем гармонично друг относительно друга на экране монитора, мобильного телефона или даже на печатном листе.
2) Прямоугольники (информационные блоки) описываются текстом (тегами).
К примеру в предложении ДВА СЛОВА надо выделить жирным шрифтом. "ДВА СЛОВА" - надо сделать блоком со свойством "жирный шрифт". Подбираем нужный тег (в данном случае это <strong></strong>) и код html с выделением будет выглядеть так:
К примеру <strong>ДВА СЛОВА</strong> надо выделить жирным.
С помощью открывающего тега <strong> мы указали в тексте начало блока, а закрывающего тега </strong> - конец блока. Закрывающие теги отличаются от открывающих тем, что содержат слеш (наклонную палку после треугольной скобки).
3) У информационных блоков есть свойства.
Блок может быть большой/маленький, вытянутый, с цветной рамочкой или без, белым фоном или в крапинку, на переднем/заднем плане, относительно других блоков - и с множеством других нужных свойств. Так же и содержание блока - тоже обладает свойствами размера, цвета, положения внутри блока и т.п. Свойства блока указываются в открывающем теге, к примеру вот так:
<div style="color:green;">этот текст зеленый</div>, а этот нет
Всего три простых идеи, а наверняка уже возникла путаница. Чтобы все уложить по полочкам надо сделать первую html-страничку своими руками. Это быстро и совершенно не сложно.
ШАГ 1) Откройте обычный блокнот и сохраните его как файл с расширением .html (к примеру: page.html) - единственное, при сохранении внизу надо выбрать тип файла, не (*.txt), а "Все файлы (*.*)"
ШАГ 2) Скопируйте туда этот шаблон (пусть это будет единственная сложная часть, просто поверьте мне на слово)
<html> <head></head> <body> </body> </html>
ШАГ 3) Готово! Можно вставлять первый прямоугольник! И это будет тег <div>тут текст</div>. Вставляем его вот так:
<html> <head></head> <body> <div>тут текст</div> </body> </html>
ШАГ 4) Сохраняем файл. Дважды кликаем на сохраненном файле и он должен открыться в интернет-браузере. Что мы видим? Просто фраза "тут текст", а где же прямоугольник? Но наш прямоугольник там есть! Просто мы же не сказали какой он должен быть, вот он и показывается белый на белом, хотя и отображает текст, который мы в него записали, а именно фразу "тут текст".
У прямоугольника есть свойства, к примеру: синий, узкий, непрозрачный, с красной рамочкой. Их там много и просто надо иметь под рукой справочник, чтобы найти, как правильно указывать нужное свойство. Или в поисковике задайте вопрос: "CSS ширина блока" и получите нужную подсказку. Можно спросить и "CSS цвет рамочки" и так далее - любые свойства, которые хотите.
Но давайте для начала сделаем синий, квадратный и с красной рамочкой.
ШАГ 5) Синий - значит фон прямоугольника должен быть залит синим цветом. Фон синего цвета будет выглядеть так:
background-color:#0000FF;
Это две части, первая про фон (background-color:), вторая про цвет (#0000FF). Хотите другой цвет? Задайте в поисковике вопрос "css кодировка цвета" - и найдете коды других цветов. Итак вставляем нужную фразу в наш код так:
<html> <head></head> <body> <div style="background-color:#0000FF;">тут текст</div> </body> </html>
ШАГ 6) Квадратный - значит надо задать ширину и высоту в точках (пикселах). Квадрат - это когда ширина равна высоте. Пусть ширина будет 100 пикселей:
width:100px;
И высота - 100 пикселей:
height:100px;
Теперь заносим эти свойства в наш блок вот так:
<html> <head></head> <body> <div style="background-color:#0000FF;width:100px;height:100px;"> тут текст </div> </body> </html>
ШАГ 7) Принцип понятен? Между кавычками в style="" мы прописываем нужные свойства прямоугольника в нужном количестве. Давайте сделаем простой документ из трех блоков: заголовок, картинка, текст. Базовый код будет такой:
<html> <head></head> <body> <div> заголовок </div> <div> картинка </div> <div> текст </div> </body> </html>
ШАГ 8) Вот! Теперь мы и подошли к главному предназначению html - расположение блоков на экране. Начнем с заголовка. Он должен быть отцентрован по-середине страницы? Пожалуйста! Сначала растягиваем блок на все 100% ширины страницы:
widht:100%;
а затем центруем содержимое блока по-середке.
text-align:center;
Получился вот такой блок:
<div style="widht:100%;text-align:center;"> заголовок </div>
Сохраняем файл, обновляем браузер, любуемся результатом.
ШАГ 9) Картинка должна быть слева, а текст должен ее обтекать по правой стороне. Вносим дополнение к картинке:
float:left;
Вот такой блок получается:
<div style="float:left;"> картинка </div>
ОЙ! А чего это они прилипли друг к другу? Надо вокруг картинки сделать отступы во все стороны, ну... к примеру по десять точек - добавляем:
margin:10px;
Итак, с первыми тремя важными знаниями о сути html мы разобрались и у нас осталось еще одно, очень важное! Признаюсь, что для большей понятности я сильно упростил реальность. На самом деле HTML - это разметка информации, где мы нарезаем всю нашу информацию на блоки с помощью тегов. А уже то, как будут выглядеть и располагаться блоки - это CSS (стили). Как разметка html, так и стили css могут содержаться в одном файле, но могут быть и разнесены по нескольким файлам (в профессиональных проектах для соблюдения порядка так и делается).
Итак подходим к заключительной из четырех самых важных знаний о html. Назвается она заумно -
4) Cемантическая верстка.
Смысл сводится к следующему вот код:
<div>тут текст</div><div>бла-бла</div><div>гыхр</div><div>лошадь</div><div>роща</div><div>ляпц</div><div>тут текст</div><div>тут текст</div><div>тут текст</div>
ОЙ! Умри мой мозг! Намного удобнее и понятнее было бы создавать, изменять и поддерживать такой код:
<тут заголовок></конец заголовка> <это картинка></конец картинки> <это текст></конец текста> <это ссылка></конец ссылки>
Ведь правда? Четко и понятно что это такое. Вот и придумали в html вместо одного тега <div></div> использовать множество тегов с названиями, говорящими о своем назначении. Конечно же на английском. А за частую и вообще сокращения, но понятные, к примеру заголовок - это <h1></h1> (от слова Header), картинка - <img> (от слова IMaGe), ссылка - <a></a> (от слова Anchor), а абзац текста - <p></p> (от слова Paragraph). Вот и получается, что настоящий html код выглядит примерно так:
<h1>текст заголовка</h1> <img src="http://www.papin.ru/kartinka.jpg"> <p>первый абзац текста</p> <p>второй абзац текста</p> <p>а в третьем абаце есть <a href="/">ссылка</a></p>
Там еще много разных тегов, но важно понимать - суть у них одинаковая - это прямоугольники со свойствами, которые можно менять по замыслу автора. И запросто можно делать такие вредные вещи, как свойствами переназначить заголовок <h1></h1> и превратить его в ссылку или картинку. Но это бессмысленно. И сам запутаешься и поисковую систему с толку собьешь - она то робот и действует прямолинейно, как научили.
А теперь еще немного практики для усвоения:
Задание: а ведь мы не сделали блок с красной рамочкой! Надо исправить! Сделайте пожалуйста любой блок с красной рамочкой. Помните подсказку? Запрос "css рамочка".
Задание: выделите любые несколько слов в тексте жирным шрифтом. Подсказка - спросите Яндекс: "css выделение жирным шрифтом"
Еще задание: вставьте в полученный блок другую картинку (запрос в Яндексе: "html вставить картинку")
ВСЕ! Теперь вы знаете в чем суть html. Начните реализовывать свои задумки, мучать поисковую систему уточняющими запросами и вы постигните еще кучу нюансов, которые бесполезно растолковывать в отдельно взятой статье, но они неминуемо приходят с опытом.