Новости

Previous Next

Немного об HTML и CSS

 

HTML и CSS – это основополагающие понятия в web-разработке. Все те, кто планируют изучать web-программирование, в первую очередь столкнутся именно с этими языками. Так зачем же они нужны и что конкретно позволяют делать?

HTML – это язык гипертекстовой разметки (HyperText Markup Language). Язык нужен для того, чтобы разместить все необходимые элементы в нужном порядке на web-странице. То есть HTML – это каркас нашей страницы. Используя основные элементы языка – теги, мы описываем в нужной последовательности то, что хотим видеть на странице. Эти теги считываются браузером, и мы получаем заготовку нашей страницы, с заголовками и картинками, ссылками и списками, поделенную на логические части (меню, контент, футер, сайдбары и пр.). Пример простейшей странички выглядит следующим образом:

<html>

    <head>

    </head>

    <body>

        <h1>Hello</h1>

        <p>World</p>

    </body>

</html>  

Можете скопировать себе этот код в блокнот и сохранить файл под названием test с расширением html: test.html. Теперь, открыв этот файл через браузер вы сможете увидеть web-страничку.

CSS – это формальный язык описания внешнего вида документа (Cascading Style Sheets) или каскадные таблицы стилей. То есть это язык, который отвечает за то, как будут выглядеть те элементы, которые мы создали в файле html. CSS позволяет менять фон элемента, цвет текста, размеры объектов, их границы и даже прописывать простейшие анимации для появления и исчезновения блоков.

Используется CSS только в связке с определенным файлом HTML. Он либо прописывается в самом файле, либо подключается к нему в виде отдельного файла с расширением .css. Например, если мы хотим модернизировать нашу страничку из примера, то мы можем добавить в него тег style и написать туда свойства для тега h1 следующим образом:

<html>

    <head>

        <style>

            h1{color: red;} /* это язык CSS */

        </style>

    </head>

    <body>

        <h1>Hello</h1>

        <p>World</p>

    </body>

</html>

Можете протестировать этот код и посмотреть, что изменится на страничке. Не забывайте после изменений сохранить файл и перезагрузить страницу в браузере.

Этот пример явно демонстрирует, за что отвечает каждый из языков. При этом стоит отметить, что очень часто их называют языками программирования. Это не верное определение, поскольку язык программирования – это средство для реализации алгоритма конкретных действий, которые должна совершить программа. HTML и CSS не предполагают никаких действий внутри сайта, они просто создают статичную страницу. А вот для того, чтобы вдохнуть в нее жизнь, уже понадобятся языки программирования.

На курсе WEB-программирование мы с ребятами первого года обучения до января-февраля плотно изучаем HTML и CSS, создаем простые и достаточно сложные страницы, с особенностями в дизайне и исполнении. И только вторую часть года посвящаем непосредственно программированию, поскольку без знаний HTML и CSS наполнять сайты функциональностью невозможно. 

 

Справка:

Бийский Центр Молодёжного Инновационного Творчества «Политех» (ЦМИТ «Политех») создан 23 ноября 2015 года в рамках целевой федеральной программы Министерства экономического развития РФ при софинансировании Правительства Алтайского края.

Основные цели работы ЦМИТ «Политех» – вовлечение как можно большего количества молодых людей в научно-техническое творчество с использованием современного оборудования быстрого прототипирования, для проверки ими своих технических идей, ранняя профориентация, создание материально-технической основы для вдохновения, способствование формированию духа изобретательности и инновационного предпринимательства.

В ЦМИТ «Политех» работают кружки: Первая Техническая Школа, робототехника, программирование на С++, программирование web-приложений, инновационное моделирование. За год ЦМИТ посещают более 500 школьников.

Подробнее о деятельности ЦМИТ «Политех»:

http://cmit22.ru/

https://vk.com/cmit_politeh

https://www.facebook.com/cmit.politeh

https://www.instagram.com/cmit.politeh/

https://www.youtube.com/channel/UC3gdzkyOzGmSIn4BSsEa..