| 12+ Свидетельство СМИ ЭЛ № ФС 77 - 70917 Лицензия на образовательную деятельность №0001058 |
Пользовательское соглашение Контактная и правовая информация |
 | Роман17 Ставропольский край |
Основы языка HTML
Игнатов Роман Николаевич,
студент 3 курса ГБПОУ «Ставропольский колледж связи имени Героя Советского Союза В. А. Петрова»
ОСНОВЫ HTML
Введение
HTML (HyperText Markup Language) - язык разметки гипертекста, предназначенный для создания Web-страниц. Гипертекст – текст, организующий перемещение по частям документа, либо между документами.
Если коротко – HTML описывает структуру страницы и свойства ее элементов. Мне очень уж нравится сравнение веб-страницы с человеком, где HTML выступает в роли скелета.
История
С историей языка разберемся буквально в двух словах. Кто вообще любит читать нудятину? Правильно – никто!
Создателем HTML является Тим Бернерс-Ли, тот же человек, что предложил идею World Wide Web. Да, немного не в том виде как она представлена сейчас. Изначально 3W должна была объединить информационным ресурсы ЦЕРН.
Разработан язык был на основе стандарта языка разметки печатных документов и своей теговой системой предоставил огромный простор для оформления. Возможности работать со шрифтами, создавать заголовки различных уровней и таблицы были и остаются функционалом, позволяющим красиво и грамотно организовать интерфейс страницы.
На момент публикации статьи последней является версия HTML 5.3, которая была представлена 24 декабря 2018 года. На протяжении жизни языка было предостаточно версий, постоянно наращивающих свой функционал.
Самые что ни на есть основы
Для разработки в HTML используются «теги».Теги – заключенная в угловые скобки команда с атрибутами (параметрами), позволяющим настроить элемент. Общий вид тега - <"имя тега" "атрибуты"> содержание </"имя тега">.
Теги заправляют балом на HTML странице, но остаются невидимы как текст в коде страницы (все что заключено в угловые скобки «<>» будет скрыто и обработано в соответствии с назначением тега). Если уж честно – вся страница заключена в один огромный тег.
Как раз разберемся с внешним видом HTML страницы «изнутри». Самый простой вид страницы, который сможет нас поприветствовать –
<!doctype html>
<html>
<head>
</head>
<body>
Здравствуй, добрый друг!
</body>
</html>
А теперь разбираемся чего это мы тут понаписали.
<!doctype html> - предназначен для указания типа текущего документа (чтобы браузер понимал с какой версией HTML он работает).
<html></html> - собственно тот тег, в который «обернута» вся страница. И именно в нем пишется все.
<head></head> - дословно «голова». Ее можно запомнить как часть страницы, которая все держит в уме. Нужна для прописывания всевозможной информации для браузера (кодировка, заголовок страницы, иконка).
<body></body> - дословно «тело». Именно оно будет представлено пользователю, бесстыдно отображая все свое содержимое.
Давайте добавим немного Дизайна. Простите, ох уж эти приступы… Собственно, преобразуем наш текст в курсив, зная что теги курсива - <i></i>. Исходя из наших знаний поставим открывающий тег (<i>) перед началом текста, который будет выделен и закрывающий (</i>) после оного. Все новые теги будут выделены одинарным подчеркиванием:
…
Здравствуй, <i>добрый друг</i>!
…
Вот мы и получили выделенное курсивом обращение. С помощью тега жирного текста (<b></b>) выделим друга:
…
Здравствуй, <i>добрый <b>друг</b></i>!
…
Существуют и более самостоятельные теги не привязанные к содержимому. <hr> - один из таких, он просто рисует горизонтальную линию. <br> - разрыв строки (переход на след. строку). Давайте встроим их в наше приветствие:
…
<hr>
Здравствуй, <br><i>добрый <b>друг</b></i>!
<hr>
…
И вот примерно на этом моменте вы можете сказать: «И чо мне теперь, учить все теги?». Нет, учить их не надо. Просто потому что не получится (если ты – сумасшедший и смог выучить все теги не написав ни одной страницы – напиши мне. Я твою фотку у себя повешу и восхвалю твой подвиг в веках. «Прогеру заплатите чеканной монетой…»). Тегов слишком много и я не думаю что знаю десятую часть. Все это познается в момент создания своего первого сайта (по крайней мере я учил именно так и считаю практический подход самым эффективным), и теги запоминаются сами по себе когда ты напишешь их достаточное количество раз. Откуда брать новые теги? Google тебе в помощь. «подчеркнутый текст html», «таблицы html» и т.д.
Теги – дело, конечно, хорошее, но надо оговориться что это только некоторая часть.
Вторая, но не менее важная вещь в HTML – атрибуты. Если теги – объекты языка, то атрибуты – свойства этих объектов.
Рассмотрим для примера уже использовавшийся нами <hr>, создающий линию. Линия – это прелестно, но чего-то она не там, не той толщины и цвета, которые нам бы хотелось. Будем править положение атрибутами. Атрибуты <hr>: align - Выравнивание линии; color - Цвет линии; size - Толщина линии; width - Ширина линии. Так, вроде понятно, но куда и как все это прописывать? Прямо в тег. Отредактируем нижнюю линию из примера выше:
…
<hr>
Здравствуй, <br><i>добрый <b>друг</b></i>!
<hr width=”90%” color=”red” align=”center” size=”5px”>
…
Теперь пытаемся прочесть: width=”90%” – ширина линии в 90% от размера блока где она лежит. Лежит она в <body>. <body> занимает весь экран. Получается линия будет шириной в 90% ширины экрана.
color=”red” – цвет линии красный.
align=”center” – расположение линии по центру.
size=”5px” – тут уже другое измерение, нежели в width. Здесь задана толщина в 5 пикселей на экране и они в зависимости от размера экрана меняться не будут.
Как можно увидеть атрибуты могут крайне серьезно менять свойства элемента. «Ну и где мне искать эти атрибуты?». Да на тех же самых сайтах. Лично я рекомендую: - отличный справочник по HTML со всеми тегами, их описанием и атрибутами. - самоучитель с описанием тегов. Этими двумя сайтами я часто пользовался во время написания своих сайтов и вам рекомендую.
Статья эта - лишь самый первый шажок в изучении HTML. Зато в ней мы уже рассмотрели теги и их атрибуты. В дальнейшем изучении материала советую вам поизучать такие темы как мета-теги и организация страницы (расположение элементов на странице).
