WITH
MOTIVATION
Регистрация
Дата рождения:



Введите код с картинки:
Вы регистрируетесь на сервисе withMotivation

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

HTML и CSS

Урок 1. Начало начал. Понятие тэга

Для того, чтобы научиться создавать веб-страницы с помощью html следует познакомиться и твёрдо уяснить для себя единственное понятие - это слово тэг. По-английский пишется как tag. В этой статье мы попробуем разобраться что это такое и зачем оно надо.

Итак, смотрите.. Что такое веб-страница? Если не углубляться в тонкости, то веб-страница - это документ, где есть информация. Информация на веб-странице может быть разной, но любая информация состоит из текста, картинок и каких-нибудь аудио-видео вставок. А ещё могут быть кнопки, таблицы, панельки всякие и так далее.. Но если совсем уже упростить всю эту схему, то можно сказать, что подавляющее количество интернет-страниц состоит из текста и картинок, да? Дальше.. Все мы умеем, надеюсь, пользоваться текстовым редактором Word. Давайте представим, как бы мы создавали веб-страницу, только в Word? Уверен, что с этим справился бы любой пионер - тоже мне работа.. Текст оформил как надо (Указал шрифт, размер букв, цвет.. ну ещё разместил где хотим..по центру, слева или справа) и картинки вставил какого надо размера и в то место текста куда хочется. Так вот.. в веб-странице всё точно так-же!

Главная задача языка HTML - это описать правила, где и как должен быть размещён текст и картинки, относительно текста. Если есть какие-то другие объекты, например видеоролик или табличка, это тоже сюда же относится. То есть HTML решает только одну задачу - правильное размещение элементов на странице. Всё! Больше он ничего не делает! Остальные задачи делают другие языки, и до них мы ещё доберёмся.. сейчас наша задача - освоить HTML.

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

Откройте любой текстовый редактор. Можно стандартный блокнот. Желательно попроще (не Word) и напишите в блокноте фразу на английском языке, например "Hello!". Я прошу сначала написать на английской раскладке, потому что с русскими буквами пока что могут быть проблемы - нужно прописать кодировку (мы это сделаем позже), а сейчас просто чтобы понять как это работает напишем латинскими буквами. Есть? Теперь нужно сохранить это дело как файл c любым именем (обязательно на латинской раскладке) и расширением html. В случае с блокнотом это делается очень просто - в меню жмём Файл - сохранить как и набираем имя файла, и после точки - расширение html. В итоге у нас должен получиться файл test.html

Поздравляю, вы создали первую веб-страничку, которую уже можно выложить в интернет, и она будет работать! Но на ней ничего нет, кроме того, что написано Hello!

Зато теперь можно 2 раза кликнуть по этой страничке мышкой и этот наш файл откроется в браузере! Не в блокноте, а в браузере, как самая настоящая веб-страница! Получилось? Супер!

Идём дальше. Теперь нам нужно снова открыть нашу страничку в блокноте (для этого нажмите правой кнопкой мыши и выберите - Открыть с помощью.. выберите блокнот и можете дальше приступать к редактированию нашей страницы. Теперь сделайте следующее: перед нашей фразой добавьте вот такую штуку: <strong> а после нашей фразы такую - </strong>, чтобы получилось вот так:

<strong>Hello!</strong>

Сохраните документ (комбинацией Cntrl+S) и обновите в браузере страничку с нашим документом. Если вы вс сделали верно, фраза должна стать жирной. Получилось? 

Что мы сделали? Мы окружили нашу фразу тэгами, в которых указали, что текст должен стать жирным (слово strong). Итак, что же такое тэг?

Тэги - это специальные как-бы кавычки, или скобки, в которые мы помещаем наши элементы. Все тэги имеют вид открывающейся и закрывающейся угловой скобки, в которых указывается значение. Примеры тэгов: <strong>, <div>, <head>, <span> и так далее. Главное, что надо понять, что есть тэги парные и одиночные! Парные тэги - самые распространённые и их принцип в том, что каждый тэг имеет пару, и вместе они означают начало действия тэга и конец. Они называются открывающим тэгом и закрывающим. Например, сначала мы открываем тэг <strong> потом в него пишем какой-то текст, а потом мы закрываем этот тэг. Закрывающий тэг выглядит так же как и открывающий, но перед словом в тэге стоит наклонная косая черта </strong>, что говорит о том, Что этот тэг закрывающий. Смотрите примеры: 

<div>Привет!</div>, <span>Как дела?</span>, <strong>Вася</strong>

В первом примере мы слово Привет поместили в тэг div (о том, что этот тэг значит, опишем попозже, сейчас поймите саму идею). Во втором примере мы предложение "Как дела?" поместили в тэг span, ну и в третьем - сами понимаете..

Для того, чтобы было ещё понятнее, мы можем переносить строки с тэгами, чтобы читать было удобнее:

<жирный шрифт>
    Вася    
</жирный шрифт>

<наклонный шрифт>
    Как твои дела?    
</наклонный шрифт>

<шрифт Arial красного цвета 10 размера>
    Траляля        
</шрифт Arial красного цвета 10 размера>

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

Тэги могут быть вложенными друг в друга, например

<жирным>
    Привет, 
        <курсив>
            Вася,
        </курсив>
    как дела?      
</жирным>

Тогда вся фраза будет жирным шрифтом, а имя Вася - жирным + курсивом. Понимаете принцип? Это как в русском языке в одни скобки могут быть вложены вторые.. третьи и так далее..

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

Одиночные тэги - это тэги, у которых нет закрывающей пары, то есть в них нет никаких элементов, например, тэг <hr> просто нарисует горизонтальную черту.

Сразу нужно себя приучить к правильному способу программирования: все парные тэги обязательно должны быть закрыты, все тэги пишутся маленькими буквами (несмотря на то, что допустимо их писать в каком угодно регистре). Чуть позже я расскажу о специальном стандарте W3С, который прописывает правила для HTML и не только.

Резюмируем всё вышесказанное так: В языке HTML все правила размещения и отображения элементов осуществляются с помощью тэгов. Тэги бывают парные и одиночные. Одиночные тэги служат для оформления, например перехода на новую строку <br> или рисования горизонтальной черты <hr>, парные тэги включают в себя элементы, к которым они применяют те правила, которые написаны в теле тэга. Закрывающий тэг имеет символ закрывающей косой черты:

<начало действия тэга>
    текст
</окончание действия тэга>

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

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

парные тэги: <strong>, <em>, <b>, <h1>, <h2>, <p>

одиночные тэги: <br>, <hr>

Вы действительно хотите удалить запись?

Действительно