Здравствуйте, Дорогие друзья! Сегодня мы с Вами поговорим о программировании. Стереотипы, которые сложились в народе о том, что программировать могут только избранные в корне неверны. Я полагаю, что для Вас проще будет начать изучение ЯП (языков программирования) с самого простого, на мой взгляд языка: html. Думаю, многие из Вас видели тип .html при загрузке странички какого-либо сайта в адресной строке. Всё верно: сегодня мы будем писать небольшую страницу для большого сайта.
Команды или ключевые слова в HTML называются дескрипторами (это просто для справки, можно не запоминать). А теперь то, что запомнить нужно. Любой html-файл начинается дескриптором <html>. Видя этот дескриптор, браузер начинает читать и прорабатывать Ваш код. Большинство дескрипторов требуют завершающий, аналогичный себе дескриптор, содержащий наклонную черту, например: </html>. Код html можно писать где угодно, даже в Блокноте или в NotePad, но наиболее удобно пользоваться специальными приложениями наподобие Brackets (ПО распространяется бесплатно и не занимает много места на диске). Но, вернемся к нашим баранам, точнее дескрипторам. Следующий дескриптор, без которого наш код корректно не отработает – это <head>. Этот дескриптор содержит «служебную» информацию о нашей странице, в том числе название странички и фавикон (фавикон – та самая маленькая картинка в углу вкладки, если кто не знал). Этот дескриптор также требует наличие закрывающего дескриптора </head>. Итак, мы создали страницу, назвали её и указали информацию о ней, но она совершенно пустая:
Вы видите, что по умолчанию вкладке присвоилось название файла. Это произошло потому, что мы не указали в <head>никакой информации. Давайте это исправим: в <head>вводим название, которое будут отображаться на вкладке. Для этого используется дескриптор <title>. Назовём нашу страничку, допустим «Самый лучший блог». Сразу сделаю оговорку: <title>требует закрывающего дескриптора. Ну чтож, делаем заголовок для нашей страницы:
Отлично: мы сделали название для вкладки. Но наша страница по-прежнему пуста. Давайте добавим фон. Всё, что нам понадобится для описания нашей странички вносим в дескриптор <style> </style>. «Тело» кода страницы пишется в дескрипторе <body> </body>. Код включает в себя дескрипторные конструкции и теги, а также значения тегов. Для того, чтобы добавить фон страницы в body указываем тег background-color. Делаем это как бы в общем описании дескриптора, то есть в фигурных скобках в дескрипторе <style>. Пусть фон у нас будет синего цвета:
Итак, мы создали страницу, назвали её, сделали фон. Давайте добавим на нашу страницу какой-нибудь текст. А теперь запоминайте: текст можно вносить разными способами, например применяя дескриптор <p> </p> мы получим последовательность строчек:
Текст на страницу добавился, но он мало воспринимается, так как он не табулирован, слишком маленького размера и не контрастирующего с фоном цвета. Давайте это исправим. За размер, цвет и прочие параметры шрифта отвечает тег font. У этого тега много атрибутов, но в данное время нас интересуют только те, которые устанавливают размер и цвет шрифта. За размер отвечает атрибут size, а за цвет – атрибут color. Установим размер нашего текста 32 кегль, а цвет, пусть будет белый:
Уже лучше. Давайте сделаем ориентацию текста по центру. Для этого существует тег <center> </center>. Попробуем?
Чего-то не хватает… Давайте добавим нашу эмблему. Самым простым образом картинка добавляется на страницу с помощью атрибута srcтега <img>. В этой статье мы разберем тот случай, когда файлы для страницы все лежат в одной директории (в одной папке).
Не пугайтесь того названия, которое у меня записано в качестве значения атрибута src – это всего лишь замена кириллицы на машинную абракадабру (запомните: называйте файлы латиницей, хотя, как по мне, так лучше создавать и развивать русскоязычные ЯП). Итак, файл лежит в той же директории, что и страница, поэтому мы указали только название рисунка. Что же у нас получилось?
Давайте и логотип расположим по центру. Для этого можно применять различные атрибуты, а можно поступить проще: вносим наш тег <img>под тег <center>. Также, думаю Вы уже заметили, что дескриптор <img>не требует закрывающего тега.
Молодцы! Теперь сделаем последний штрих: добавим ссылку на наш канал. Сделать это очень просто (даже проще очень простого). Используем тег <a> </a>. В первом теге указываем адрес странички, на которую указывает ссылка. Для этого воспользуемся атрибутом href.
Проверим? Жмём ссылку:
На сегодня, пожалуй, хватит. В следующих статьях мы разберемся со всеми деталями более подробно. Сегодняшняя статья – вводная, но в ней мы с Вами сумели сделать небольшую страничку и, к тому же проработали основные аспекты по работе с html. Если эта статья была вам полезна и интересна, то поставьте палец вверх, я пойму, что работаю не зря) Спасибо, что читаете, удачи!
