×
Ви дійсно бажаєте відкрити доступ до тестування за курсом HTML & CSS на 40 днів?
ВІДЕОУРОК № 2. Введение в HTML
Здравствуйте, дорогие слушатели! Меня зовут Александр и мы с вами приступаем к цыклу лекций по языку HTML. HTML – это аббревиатура от английских слов Hyper Text Markup Language.
На русский это можно перевести как язык разметки гипертекста. Зачем он нужен? Может быть вы слышали, в современном мире есть огромное количество языков программирования. Может быть вы знаете такой язык как Ассемблер, ну, или слышали о нем что-нибудь. На нем можно написать, например, драйверы устройств – программы, которые управляют мобильными телефонами, компьютерами, платами расширения (видеоадаптеры, звуковые адаптеры) и т.д. Вы может быть слышали о таком языке как С++. На нем можно написать также драйверы устройств, игры. На языке С# можно написать, например, консольное приложение, веб-приложение, также можно создать какие-то глобальные решения для бизнеса.
Что же можно сделать с помощью HTML? - Можно создать разметку текста.
Давайте представим ситуацию, что мы с вами являемся собственниками большого издательского дома. И вот наш новый журнал требуется разместить в интернете. Что нам для этого нужно? Наверное нам хотелось бы сохранить аутентичность, т.е. чтобы наш журнал в киосках прессы и в интернете на веб-странице имел одинаковый вид.
Это значит, что заголовки, шрифты основного текста и общее оформление первой страницы должно совпадать как в печатном виде, так и в электронном.
Давайте откроем веб-браузер и представим, чтобы мы хотели увидеть. Допустим, это у нас поэтический журнал. Поэтому где-то в левой части страницы мы бы хотели увидеть один стих, в правой – другой, а где-то внизу – контактная информация нашего издательства.
Давайте откроем блокнот, наберем здесь какой-нибудь стих и попытаемся открыть его с помощью браузера. У меня этот стих сохранен на диске G, поэтому я захожу в браузер, набираю тут G:\ и браузер мне подсказывает, что на диске G у меня есть такой файл G:\стихи.txt. Кликаем левой кнопкой мышки и видим стих в окне браузера.
Давайте сравним. Видите, что здесь получилось: во-первых, шрифт нашего браузера и шрифт блокнота не совпадают. Также видим, что в блокноте у меня шрифт жирный, а в браузере - обычный. Следовательно, форматирование не было перенесено на нашу страницу. Как же решить эту проблему?
Давайте откроем нашу презентацию и немножко поговорим об HTML.
Как я уже говорил, HTML – это язык разметки гипертекста. Здесь, в частности, написано, что это стандартный язык разметки документа во всемирной паутине и большинство веб-страниц создаются при помощи языка HTML. Вот и решение нашей проблемы.
Мы можем, используя язык HTML, в том же блокноте создать разметку нашего документа таким образом, чтобы он отображался в интернет браузере в таком виде, в котором нам хотелось бы.
Давайте перейдем на следующий слайд. Здесь написано, что HTML был разработан Тимом Бернерсом Ли в Церне для общения со своими коллегами. И, как видим, язык прижился и используется не только физиками, а и всеми желающими разместить свою страницу в интернете.
Ну а мы с вами переходим к следующему слайду презентации и рассмотрим основные составляющие языка HTML.
Цельный элемент языка (пункт 5 презентации) состоит из открывающегося тега и закрывающегося тега. Кроме того, каждый тег может содержать в себе какие-то атрибуты. В частности, у нас здесь атрибут align, который в данном случае (указываем значение атрибута – “center”) выравнивает наш текст по центру. Между открывающимся и закрывающимся тегами находится содержание всего элемента.
Давайте теперь поговорим о семантике языка. Первое, что нам нужно сделать при создании HTML документа – это указать одноименный тег, открывающийся (<html>) и закрывающийся (</html>). Следовательно, браузер будет знать, что между этими тегами следует искать инструкции по отображению страницы.
Внутри тега <html> существует еще два очень важных тега: <head> и <body>. В теге <head> содержится вся справочная, или служебная, информация, которую мы не видим, но она очень важна для работы нашей страницы.
В теге <body> находится та информация, которую мы хотим отобразить на странице.
Давайте теперь поговорим о правилах размещения этих тегов. В частности, первое правило – элементы не должны пересекаться. Т.е., если открывающийся тег располагается внутри элемента, то и соответствующий закрывающийся тег должен располагаться внутри этого же элемента.
Блочные элементы могут содержать вложенные блочные и текстовые элементы. О текстовых мы немного позже поговорим.
Текстовые элементы могут содержать вложенные текстовые элементы.
Текстовые элементы не могут содержать вложенные блочные элементы. Это правило мы будем рассматривать глубже при рассмотрении текстовых элементов.
А теперь давайте посетим сайт нашего учебного центра и посмотрим на HTML код этого сайта. Для этого нажимаем комбинацию клавиш Ctrl + u. Открывается дополнительная вкладка и мы видим как много кода содержит наш сайт.
Давайте попробуем найти что-нибудь знакомое. В частности, мы знаем уже тег <html>, тег <head>, а вот и тег <body>.
Давайте теперь закроем и попробуем немного отредактировать наш блокнот. Я уже внес некоторые изменения. Я добавил тег <html>, тег <head>, тег <body> и внизу их закрыл.
Попробуем теперь его открыть. Заходим в браузер, вводим путь к файлу (файл в этот раз я сохранил с расширением .html) и нажимаем Enter.
Теперь у нас пропало минимальное редактирование, которое было, но при этом мы получили очень мощный инструмент, который мы сейчас и рассмотрим.
Давайте откроем нашу презентацию и посмотрим на основные элементы для работы с текстом.
Первый из них – это параграф.
Давайте откроем наш блокнот и попробуем создать здесь тег параграф, т.е. напишем открывающиеся <p> и закрывающиеся </p> теги. Сохраняем, переходим в браузер, нажимаем Ctrl + r. Мы видим, что строка, которую мы обработали в блокноте, отделилась от остального текста.
Давайте в презентации посмотрим на тег <br/>. Он делает перенос на следующую строку. Обратите внимание – этот тег не имеет открывающегося и закрывающегося тегов, т.к. не имеет содержимого.
Посмотрим, как он работает. Откроем блокнот и где-нибудь поставим данный тег. Сохраним, зайдем в браузер и по открытии страницы увидим изменения.
<br/> - аббревиатура от английских слов broken row. Суть его заключается в переводе каретки на новую строку.
С помощью тегов <br/> мы можем создать нашей странице приятный для взгляда вид.
Но данный тег не очень удобен тем, что нужно ставить его вручную на каждой необходимой строке.
Альтернативой тегу <br/> является тег <pre></pre>.
Давайте проверим его работу на нашем стихе.
В результате мы получили полностью отредактированный текст с учетом тега <pre></pre>.
Внутри данного тега мы можем делать с текстом все, что нам необходимо.
Справедливо можно задать вопрос: насколько удобно использовать блокнот для создания веб-сайта.
Если у нас программа небольшая, то блокнот довольно удобен, но, если проект большой, сайт большой, то легко можно потеряться в таком блокноте.
Посмотрим, то может предложить компания Microsoft для веб-разработки. Зайдем на решение под названием Visual Studio.
Visual Studio позволяет удобно работать с программным кодом и создавать большие проекты.
Давайте среди различных версий данной программы посмотрим решение Express for Web.
Visual Studio Express 2013 for Web включает в себя инструменты для веб разработки и для разработки служб.
Если вам интересна не только веб разработка, то я вам рекомендую изначально установить Ultimate решение. В этой версии включено все, что только может понадобиться веб программисту, следовательно, не нужно будет устанавливать дополнительный софт для новых идей.
Я вам рекомендую установить версию Ultimate.
У меня оно уже установлено и давайте посмотрим, как с ним можно работать.
Чтобы создать HTML документ, заходим на вкладку File -> New -> Website, создаем ASP .NET Empty Website, даем ему имя, сохраняем его на диск G.
У нас создался проект. Теперь к нему нужно добавить HTML документ: Add new item -> HTML Page. Даем название по умолчанию, нажимаем Add.
У нас создался HTML документ, в котором не нужно прописывать теги <body> и <html>.
Осталось зайти в блокнот, выделить стих и вставить его в тег <body>. Запустим теперь наш проект. Получился такой же результат, как и в предыдущем примере, когда мы работали с блокнотом.
Обратите внимание, там где мы используем тег <pre> по умолчанию используется так называемый моноширинный шрифт, в котором каждая буква занимает одинаковую ширину.
Откроем теперь Visual Studio и посмотрим на проекты, подготовленные к данному уроку.
Первый пример. Посмотрим на новый тег <title> и посмотрим, где это используется.
Текст, записанный в теге <title> является названием вкладки, которая напоминает корешок книги.
Посмотрим на следующий пример. Браузер по умолчанию игнорирует большие пробелы.
Теперь посмотрим, как создаются комментарии к коду HTML. Отмечу, что комментарии необходимо ставить, чтобы через некоторое время легче было разобраться в уже написанном коде.
Начало комментария в HTML обозначается набором символов <!-- , а конец -->.
Комментарий можно ставить в любом месте – браузер из не видит. Давайте запустим проект и убедимся в этом.
Посмотрим еще раз на использование тега <br/>.
Запустим проект и посмотрим на работу тега <p>.
Идем далее. Теперь поговорим об атрибутах.
Атрибут align. Используется он в теге параграф. Если данному атрибуту присвоить значение “сenter” – это будет способствовать тому, что текст будет расположен по центру страницы. Значение “right” – текст будет выровнен по правому краю страницы, “left” – содержимое будет выровнено по левому краю.
Давайте убедимся, что это так.
Вот эта фраза находится по центру.
Вот эта – выровнена по правому краю.
И третья фраза – по левому краю.
Возвратимся в нашу презентацию и рассмотрим следующий слайд. Здесь нам предлагается посмотреть на заголовки.
Заголовки используются для того, чтобы сделать акцент на каких-то частях Вашего документа.
Заголовки могут быть от h1 до h6.
h1 – это наиболее важные заголовки. Например, название вашего реферата.
h2 – это менее важные, например, разделы вашего реферата.
h3 – это подразделы и т.д.
h6 – самые незначительные, но все же заголовки.
Вот такая вот есть иерархия от h1 до h6.
Давайте теперь откроем Visual Studio и посмотрим, как это используется в реальном HTML документе.
Запускаем пример. Обратите внимание, наш пример открылся в браузере и вот что мы видим.
Вот самый главный заголовок – название вашего реферата.
Вот это, например, раздел вашего реферата.
Это подраздел и т.д.
Давайте рассмотрим следующий пример для закрепления этого материала.
Открою более детальный пример.
Представьте себе, что вы пишете статью об HTML. Давайте запустим и посмотрим.
Название HTML вы выделяете тегом h1. Раздел выделяете тегом h2. Подраздел - тегом h2 и т.д.
Как вы видите, вот так вот формируется HTML документы. Т.е. что-то у вас уже прорисовывается какое-то понимание о том, как это все работает и, думаю, вскоре мы сможем очень просто создавать вот такие HTML страницы.
Давайте опять откроем нашу презентацию и посмотрим на следующий слайд.
Здесь нам предлагается рассмотреть такой тег как </hr>. Этот тег для рисования линий. Обратите внимание, что этот тег имеет несколько атрибутов. Давайте их подробнее рассмотрим.
Значит, атрибут align мы с вами знаем. Это выравнивание. В частности, это будет выравнивание нашей линии. Можно по левому, по правому краям и по центру выравнивать.
Атрибут color – это атрибут тега </hr>, который указывает цвет нашей линии.
Атрибут size указывает ширину прямой, width – толщину, noshade – контролирует тень прямой.
Давайте посмотрим, как это все работает. Открываем Visual Studio и посмотрим на тег </hr>.
Запускаем. Видим, фраза-линия, фраза-линия в соответствии с нашей программой.
Давайте посмотрим более детально на некоторые атрибуты.
Давайте рассмотрим тег color. Если мы пропишем: color = “Red”. Очевидно, что мы увидим нашу линию красного цвета. Если напишем color = “Blue” - линия будет синего цвета и color = “Green”, соответственно, зеленого.
Давайте убедимся в этом.
Да, действительно, смотрите, вот так вот можно делать разноцветные линии. Обратите внимание, линия рисуется от левого края до правого по умолчанию.
Идем далее. Давайте посмотрим на атрибут width. Данный атрибут задает ширину нашей линии. Ширина задается в пикселях. Первую линию мы хотели бы нарисовать шириной 600 пикселей и выровнять по левому краю. Видите, здесь еще добавлен атрибут align.
Вторую линию мы хотели бы увидеть шириной в 300 пикселей и третью линию – шириной в 800 пикселей. Давайте посмотрим, так ли это. Да, смотрите: первая линия выровнена по левому краю, остальные две – по центру, и, соответственно, размеры такие, как мы задавали. Хорошо. Давайте посмотрим дальше.
Атрибут size. Здесь мы указывает цвет линии атрибутом color, а здесь хотим, чтобы первая линия была размером в один пиксель, вторая- 4 пикселя и третья – в 10 пикселей.
Запускаемся, смотрим. Да, действительно. Вот разноцветные линии разной толщины.
Закрываем и идем далее.
И последний атрибут тега </hr> - noshade. Что он делает? Нужно запустить и посмотреть. Приблизим и посмотрим. Обратите внимание, здесь у нас по умолчанию присутствует тень. Видите, вот такая вот серая линия. А здесь ее нет.
Визуально, если мы поставим экран на стандартный размер, то первая линия будет без тени, а вот эти две будут иметь тень. Т.е., задавая атрибут noshade мы явно указываем, что наша линия не должна содержать тени.
Давайте теперь опять откроем нашу презентацию на 10й странице и посмотрим на некоторые теги форматирования текста.
1й – это тег <strong> </strong>. Содержимое, помещенное внутрь этого тега, приобретает жирное очертание. Возможно вложение этого тега в другие теги для работы с текстом. Т.е. – это то же, что мы пытались с вами сделать в блокноте – выделить текст жирные начертанием и отобразить его в браузере. Теперь мы сможем это сделать с помощью тега <strong> </strong>.
Следующий тег – тег <big></big>. Размер содержимого, помещенное внутрь этого тега, увеличивается на единицу. Возможно вложение этого тега в другие теги для работы с текстом. Здесь нужно сказать, что весь текст по умолчанию в HTML равен трем, а вообще от варьируется от единицы до семи. Так вот, тег <big></big> увеличивает на единицу исходный текст.
Следующий тег – тег <small> </small>. Размер содержимого, помещенное внутрь этого тега, уменьшается на единицу. Т.е. если по умолчанию величина текста равна трем, то после применения тега <small> </small> мы его уменьшим на единицу.
Следующий тег - <b> </b>. содержимое, помещенное внутрь этого тега, приобретает жирное очертание (как и тег <strong> </strong>). Отличие между этими тегами в том, что тег <strong> </strong> еще используется для акцентирования текста. Т.е. текст, заключенный в тег <strong> </strong> будет более виден поисковым системам.
Давайте рассмотрим следующие теги. Это тег <i> </i>. содержимое, помещенное внутрь этого тега, приобретает курсивное начертание.
Тег <em> </em>. Содержимое, помещенное внутрь этого тега, приобретает акцентированное состояние. Также оно будет курсивным. По аналогии с тегом <strong> </strong> поисковик будет больше обращать внимание на тег <em> </em>.
Следующий тег <sub> </sub>. Содержимое, помещенное внутрь этого тега, переходит в нижний индекс предыдущего текстового содержимого. Этот тег необходим, например, в случае записи дробных чисел – он перенесет число в нижнюю часть дроби.
Тег <sup> </sup>. Тоже используется для математических функций. Часто встречается такое выражение, например, как икс квадрат. Вот эту двойку мы можем перенести в верхний индекс с помощью тега <sup> </sup>.
А теперь давайте перейдем в Visual Studio.
Первым у нас идет тег <strong> </strong>. Текст заключен в тег <strong> </strong>, а значит мы хотим видеть его в жирном очертании. Давайте в этом убедимся. Ctrl + F5 и вот правда. Этот текст не заключен в тег <strong> </strong>. Видно, что он не имеет жирного очертания. А вот этот текст заключен в данный тег и, соответственно, имеет жирное очертание.
Вот этот пример показывает, что тег заключен в тег <strong> </strong> внутри параграфа. Это значит, что мы можем делать вложенность тега.
Давайте посмотрим на следующий пример.
Тег <big></big>. Давайте сразу же запустим этот пример и посмотрим уже в браузере.
Это текст, не заключенный в тег <big></big> и его размер по умолчанию равен трем.
Это такой же текст, но заключенный в тег <big></big>. Т.е. его размер уже равен 4. Это тег, заключенный в тег <big></big> внутри параграфа дважды.
Давайте в этом убедимся. Вот у нас два тега <big></big> и, соответственно, размер нашего текста по отношению к тексту по умолчанию увеличивается в два раза.
Давайте посмотрим на тег <small>. Запустим этот пример. Обратите внимание – этот текст не заключен в тег <small>, а вот этот текст заключен в тег <small> один раз. Мы можем в этом убедиться – вот у нас этот текст. Теперь давайте посмотрим на текст, который в два раза заключен в тег <small>.
Вот он у нас.
Давайте рассмотрим следующий. Это тег <b>. Вы видите, что результат такой же, как и в теге <strong>.
Следующий тег – тег <i>. Как вы помните из недавно сказанного, он выводит текст курсивом. Давайте в этом убедимся.
Следующий пример – тег <em>. Результат в браузере будет такой же.
И вот здесь вот сравнение тега <i> и тега <em>. Как видите, разницы в браузере у нас никакой. Давайте на следующий посмотрим. Тег <sub>. Запустим. Вы видите, вот у нас просто текст, и вот у нас применяется тег <sub>. Обратите внимание, в коде это у нас вот здесь вот. Мы часть текста из строки заключили в тег <sub> и у нас получилось, что он оказался в нижнем индексе. Вот у нас получается такая «ступенька».
Тег <sup>. Давайте запустим этот проект. Результат аналогичен с предыдущим примером, только «ступенька» уже восходящая.
Давайте посмотрим на тег center. Давайте посмотрим его на примере. Мы используем данный тег и как результат мы увидим, что в браузере наш текст расположен посередине страницы.
Посмотрим, что делает тег MARQUE. Как видим, на экране появилось две бегущие строки. Давайте посмотрим в код. На 11й странице мы используем просто тег MARQUE, а на 13й используем его с атрибутом loop, который равен 3. Текст на 13й строке пробежит по окну браузера всего 3 раза, поскольку loop указывает количество циклов. Как вы видите, тег MARQUE имеет один существенный недостаток – текст по окну браузера перемещается рывками. Для устранения этого недостатка функция прокрутки браузера была перенесена в JavaScript. Там это реализуется намного лучше.
Давайте теперь посмотрим на атрибут style. Он является первой формой использования CSS. О CSS мы будем говорить позже, но сейчас нужно сказать, что атрибут style позволяет нам управлять стилем нашего текста.
Давайте посмотрим на наш атрибут style. На строке 16 нашего кода можно увидеть, что мы хотим, чтобы шрифт данной текстовой строки был verdana. Обратите внимание на 17 строку. Мы также здесь используем атрибут style. Здесь мы указываем еще один параметр – это color, и также указываем frontsize, а это значит, что мы хотели бы размер шрифта увидеть в 20 пикселей. Запустим этот пример и посмотрим, что из этого получилось.
Теперь рассмотрим такую важную особенность, как работа со ссылками.
Принципиально новое слово в практике использования ссылок было сказано в 1991 году с изобретением идеологии World Wide Web.
Давайте посмотрим, как можно реализовать ссылку в языке HTML. Для этого нам понадобится использовать тег <a>. Давайте рассмотрим этот тег более детально. У него есть следующие атрибуты: href, name, target, title.
href - это атрибут, который содержит в себе адрес страницы, на которую ведет ссылка. Ссылка “#” – ссылка на ту же страницу, т.е. на саму себя.
Также у нас есть атрибут name. Это атрибут, который содержит в себе имя данной ссылки.
Атрибут target говорит нам о том, каким образом открывать ссылку. Если мы укажем _self, то ссылка будет открыта в том же окне, где мы находимся. Если укажем _blank, то ссылка будет открыта в новой вкладке.
Атрибут title указывает тултип на ссылку (выскакивающее окошко с подсказкой). Об этом поговорим позже.
Посмотрим теперь на примерах. Запустим наш пример. Переходим по ссылке и попадаем на сайт нашего учебного центра.
Давайте посмотрим следующий пример. Первая ссылка отправляет нас на сайт нашего учебного центра. Давайте посмотрим, куда отправляет нас вторая ссылка. Когда мы нажимаем на вторую ссылку, мы попадаем на первый пример. Третья ссылка отправляет на саму себя.
Рассмотрим следующий пример. Здесь указан новый атрибут name. Результат тот же, а детали данного атрибута рассмотрим позже.
В четвертом примере мы используем атрибут target. Результат тот же благодаря _self и _blank.
Атрибут title. Запускаем пример и смотрим на тултипы. Видите, выскакивает подсказка.
Теперь рассмотрим такой механизм, как отправка почты. Вы наверняка видели когда-нибудь на сайтах кнопку «почта», вы на нее кликаете и отправляете какие-то данные по почте. Давайте посмотрим, как это реализуется.
А атрибуте <a> мы указываем mailto, далее идет адрес электронной почты. Далее мы указываем subject %20 again. На строке 15 раскрыто значение символов %20.
Запустим наш пример и посмотрим, как это работает. В поле to указан имейл, а в поле subject – Hello again.
Рассмотрим такое понятие, как якоря. Якорь – это значение в документе, на которое можно создать ссылку. Очень популярны якоря в Википедии, где вначале статьи идет перечень параграфов, а далее вы кликаете по ним и автоматически на них переадресовываетесь. Для этого в HTML используется <a href= “#C1”> Ссылка №1 </a>. C1 – имя нашего якоря. Далее где-нибудь в документе мы указываем <a name = “C1”> Заголовок </a>. когда мы кликнем на имя Ссылка №1, мы автоматически переместимся на соответствующий заголовок. Давайте посмотрим, как это работает.
