1.1. HTML. Начало
Приветствую всех! С этого момента уже начинается то, что может впоследствии пригодиться в работе — непосредственная практика. Как можно понять из заголовка, сейчас дело будет касаться HTML.
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — это основа любого сайта или web-приложения, он присутствует как в самых простейших, так и в сложнейших проектах. С его помощью, страницы, которые вы открываете в интернете, разделены на различные блоки, имеют поля для ввода текста, кнопки, ссылки, картинки и т. д. Сам по себе, этот язык разметки (это не язык программирования) не считается сложным, ну, по крайней мере, большая его часть. Чтобы это было показательно, постараюсь на простых примерах сделать понятный переход к принципам этого языка.
Допустим, у нас есть текст, как этот:
Очень простой текст
И мы хотим какие-то его части как-то преобразовать, например, поменять цвет какого-то слова, или увеличить размер букв и т. д. Каковы могут быть наши идеи? Где должна храниться информация о настройках преобразования текста?
Возможно, кому-то в голову придет идея, что есть текст, и мы можем приложить инструкцию к нему, где будет сказано, что слово «Очень» красное, а слово «простой» — написано жирным шрифтом. Кто-то придумает некие кодовые слова прямо в тексте, которые бы давали понять, что в этом тексте нужно покрасить красным цветом и т. д.
В принципе, выше описано два подхода, до которых можно было дойти логически, не зная об HTML и, новое слово, CSS, однако, именно подобным образом все и устроено: HTML — это когда мы прямо в тексте применяем кодовые слова, а CSS — как отдельная инструкция к тексту. Также, CSS можно использовать и прямо в HTML, но это менее распространенная практика. CSS мы рассмотрим в следующей статье. Вернемся к нашему примеру:
Очень простой текст
Делаем слово «Очень» красным, а слово «простой» — жирным:
<span style="color: red;">Очень</span> <b>простой</b> текстТеперь разберемся. Это уже HTML, поэтому теперь мы будем называть кодовые слова тегами, так как именно так они и называются в HTML. Тег «span», в переводе с английского, означает «охватывать», что хорошо отражает его назначение, ведь он как бы охватывает область текста собой, с помощью своего открытия (<span>) и закрытия (</span>). Стоит отметить, что это охватывание делает большое количество тегов, но, в отличие от остальных, «span» охватывает не изменяя свойства содержимого, а остальные еще как-то модифицируют свое содержимое, например как тег «b» (от англ. bold, «жирный»), сделавший наше слово «простой» жирным, а если бы мы до закрытия тега «b» (</b>) добавили бы еще слова, то и они бы были жирными, так как они вошли бы в область его действия, находясь после открытия и перед закрытием тега «b».
Остался вопрос — если «span» никак не модифицирует то, что находится в его области действия, то как он должен сделать наше слово «Очень» красным? Ответ виден в коде, продублирую тот участок:
<span style="color: red;">Очень</span>Тут мы как бы пользуемся только тем, что в рамках «span» заключен нужный нам участок текста, и мы его стилизуем с помощью CSS, внедренного в атрибут «style» открывающего тега «span».
Остался еще один вопрос — все примеры выше являются кодом разметки на языке HTML, но а как увидеть результат его выполнения? Тут есть много вариантов, один из них, это открыть программу «Блокнот», скопировать туда HTML-код, и сохранить файл с произвольным названием, но со специальным расширением «.html», например «неоткрывать.html». Далее можно открыть этот файл с помощью любого браузера, и полюбоваться результатом.
Есть еще один способ — воспользоваться онлайн сервисами, например https://jsfiddle.net/. Там экран разделен на 4 прямоугольных области, одна из них для HTML-кода, там они подписаны. Вставляете туда HTML-код, и нажимаете на кнопку с треугольничком «Run», после чего будет виден результат выполнения кода в прямоугольной области с результатом.
Далее в программе у нас будет CSS, который уже несколько раз был упомянут в этой статье. К HTML мы будем возвращаться постоянно, и конца этому не будет, так что это было лишь первое знакомство с ним.
Благодарю за прочтение!
Следующая статья цикла — 1.2. CSS. Более подробно
Предыдущая статья цикла — 1.0. Введение в web-разработку
Содержание