В этом уроке приведем несколько наиболее распространенных тегов, которые встречаются почти везде.
Для начала рассмотрим теги title и h.
Также сверху html страницы зачастую можно увидеть тег DOCTYPE. Этот тег сообщает любому браузеру в котором html страница была открыта, как отображать html код. Если он не будет указан, то каждый браузер будет отображать страницу как ему вздумается, что может привести к тому, что страница будет отображена не корректно.
Большой заголовок
Заголовок поменьше
Ваше маленький заголовок жесть
Какой-то текст в теге p.
Давайте откроем только что написанную страницу в браузере.
Видим на странице в браузере содержимое разных тегов заголовка.
Также на вкладке можно увидеть текст Page tab text. Этот текст мы писали в теге <title>.
Добавим на страницу таблицу.
Большой заголовок
заголовок поменьше
Еще меньше
Какой-то текст в теге p.
|
Какой-то текст в строке 1 |
Какой-то текст в строке 1 |
Какой-то текст в строке 1 |
|
Какой-то текст в строке 2 |
Какой-то текст в строке 2 |
Какой-то текст в строке 2 |
|
Какой-то текст в строке 3 |
Какой-то текст в строке 3 |
Какой-то текст в строке 3 |
Давайте откроем только что написанную страницу в браузере.
Видим на странице в браузере таблицу.
В ней три строки:
- строка, которая содержит три ячейки с текстом “Какой-то текст в строке 1”,
- строка, которая содержит три ячейки с текстом “Какой-то текст в строке 2”
- и строка, которая содержит три ячейки с текстом “Какой-то текст в строке 3”.
То есть всё соответствует тегам, которое мы писали в файле.
Также можно увидеть рамку в один пиксель. Это мы настраивали, как мы помним, аттрибутом border.
Тегом img можем разместить картинку на странице.
В аттрибуте src указывается путь к картинке на нашем компьютере, которую мы хотим разместить на странице.
Подробнее о том, что такое аттрибуты разберем в следующем уроке.
Большой заголовок
заголовок поменьше
Еще меньше
Какой-то текст в теге р.
|
Какой-то текст в строке 1 |
Какой-то текст в строке 1 |
Какой-то текст в строке 1 |
|
Какой-то текст в строке 2 |
Какой-то текст в строке 2 |
Какой-то текст в строке 2 |
|
Какой-то текст в строке 3 |
Какой-то текст в строке 3 |
Какой-то текст в строке 3 |
Как видим, картинка PatrickLearnsHtml.png действительно храниться в папке C:\\HTML.
Давайте откроем только что написанную страницу в браузере.
Как видим, картинка PatrickLearnsHtml.png из папки HTML успешно была добавлена на страницу.
Тегом br можно перейти на новую строку на странице (типа \n в консоли в Java).
Также важным тегом является тег ссылки – тег <a>.
Этот тег отображает на странице текст по нажатию на который происходит переход по ссылке.
Переход может совершаться совершенно любую ссылку, например на ютуб. Указывается ссылка в href аттрибуте этого тега .
Большой заголовок
заголовок поменьше
Еще меньше
Какой-то текст в теге p.
Кликни на меня и перейди на ютуб
|
Какой-то текст в строке 1 |
Какой-то текст в строке 1 |
Какой-то текст в строке 1 |
|
Какой-то текст в строке 2 |
Какой-то текст в строке 2 |
Какой-то текст в строке 2 |
|
Какой-то текст в строке 3 |
Какой-то текст в строке 3 |
Какой-то текст в строке 3 |
Давайте откроем только что написанную страницу в браузере.
Видим, что отступы с помощью тега br перед ссылкой и после нее были успешно добавлены.
Также видим текст помеченный синим цветом. По нажатию на этот текст произойдет переход по ссылке. Мы задавали ссылке для перехода на ютуб. Давайте нажмем на этот текст для перехода на ютуб.
Переход на ютуб прошел успешно.
Также довольно важно рассмотреть тег form.
С ним по ходу курса мы будем встречаться не однократно.
Он нужен для отправки на сервер данных введенных пользователем в различные поля для ввода, которые находятся в теге form.
Рассмотрим пример.
Давайте откроем только что написанную страницу в браузере.
Видим, что форма содержит три поля, как мы и определяли в html файлике.
Видим также, что сразу при открытии страницы первое поле по умолчанию содержит то, что мы писали в аттрибуте value. Это значение, конечно же, можно изменить.
Если мы напишем какой-либо текст во втором поле, то он будет замаскирован, так как с помощью аттребута type мы установили, что это поле пароля.
Если мы нажмем на кнопку то страница перезагрузиться. При этом данные, которые мы ввели должны отправиться по ссылке в аттрибуте action. Но, как уже было сказано, у нас пока нет сервера.