В чем отличие css от html

Лекция 1. HTML и CSS

Скринкаст второй части лекции в этот раз записать не удалось.

Введение

Дальше мы будем писать скринкасты, поэтому если вы сейчас что-то упустите или если ваши друзья сегодня не пришли, то, возможно, они всё наверстают.

Представлюсь. Меня зовут Виталий Павленко, я учусь на пятом курсе ФИВТа, на первом году магистратуры в Сколтехе, и ещё учусь в ШАДе. Я стажировался в Гугле и в Интеле.

О чём будет курс. Я покажу, что я сам руками делал, поэтому представляю, как оно работает. Примерно до уровня этих проектов мы сумеем за полтора семестра дойти.

Этот сайт — учебник по Питону. Тут есть уроки, уроки имеют текст и код, причём этот код можно выполнять. Этот питоновский код реально выполняется так: он отдаётся на сторону сервера, дальше он там выполняется, все кадры исполнения записываются в отладочном режиме. Дальше они передаются на клиента, и на клиенте они умеют отрисовываться. Далее, здесь есть задачки. Можно писать решения задач, можно их тестировать на тестах. Со временем сайт оброс разными штуками. Например, тут есть система комментариев. Или например, Владимир Соломатин прикрутил вход через социальные сети, как это сейчас модно.

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

На самом деле, этот сайт не целиком написан мной. Когда я его писал, я начинал с визуализатора Питона. Это сайт, который умеет визуализировать исполнение питоновского кода. Если туда ввести код, то он умеет показывать исполнение кода по шагам и показывать, что при этом происходит с объектами в памяти. Я эту часть скопировал, поскольку она распространяется по свободной лицензии, и попытался написать вокруг неё на фреймворке Джанго, который я к тому моменту знал, систему проверки задач и систему регистрации пользователей, чтобы визуализатор был встроен в учебник языка программирования. Логику всю вокруг я писал сам, а логику визуализации я копировал. Сейчас она частично взята из другого места и переписана, но я всё ещё в целом понимаю, что в ней происходит.

Есть более простой сайт. Мы делали проект на инновационном практикуме. Идея проекта была такая: мы думали, что есть такие пользователи, которые часто читают длинные тексты, и при этом они не хотят всегда тратить время на чтение очень длинного текста целиком. Поэтому если мы научимся выделять главное в тексте, подкрашивать его жёлтым и давать пользователям возможность сначала прочитать главное, а потом, по мере того, как текст им становится интересным, помогать им читать ещё предложения. Или же помогать им быстро понять, что этот текст им не интересен.

Выделение главного в текстах — это большая область в машинном обучении, по ней написаны статьи, и мы решили, что мы просто заимплементим алгоритмы, вокруг этого сделаем веб-морду, поднимем сервер, который будет запускать эти алгоритмы, отдавать пользователю ответ и красить текст. Ещё у сервиса есть API, т. е. сторонние сайты могут коннектиться к нам, отдавать нам данные в формате JSON и получать на выходе размеченный текст, чтобы использовать у себя на сайте. Например, нам писали админы одного сайта с рефератами, которые хотели выделять в рефератах главное, чтобы показывать его в превьюшке.

Обвязка сервиса — веб-часть, та часть, которая не связана с алгоритмами, которые крутятся на сервер — это то, что я писал и понимаю. То, что происходит у нас на клиенте — эту версию клиентской части писал не я, а другой человек, но я следил за ним и примерно понимаю, что у нас там написано.

Вот на такого уровня вещи мы будем ориентироваться. Я вас прошу думать, где вы можете применить знания, которые вы можете у нас получить, и что вы можете сами для себя закодить. Если вы освоите веб-программирование, то дальше вы можете сделать что угодно. Вы можете написать свою социальную сеть, если вам покажется, что какой-то социальной сети в мире ещё нет. Вы можете сделать портал, который позволяет быстро клепать демотиваторы и быстро ими обмениваться. Такие порталы, конечно же, существуют, но если вы придумаете, портала с какой ключевой фишкой ещё не существует, то вы можете закодить его самостоятельно. Если вам придёт ещё какая-то идея, то после нашего курса вы сможете написать для неё веб-морду, серьёзную серверную логику. Мы попробуем этому научить.

Я думаю, что знаний для того, чтобы начинать писать, у вас будет хватать через два месяца.

Технологии на вебе

Какие на вебе вообще есть технологии? На стороне браузера, то, что всегда видно людям, набор очень ограничен. Всё делается на трёх языках: HTML, CSS и JavaScript, причём каждый делает свое:

• HTML распологает элементы
• CSS настраивает их стили, то, как они выглядят, уточняет расположение элементов, шрифты, отступы
• JavaScript накручивает логику, которая позволяет динамически менять содержимое, делать запросы к серверу, получаь ответ и создавать какие-то теги

Так устоялось, что на вебе используются эти технологии. Лет 20-25 назад на вебе было примерно то же самое. Так случилось, что новые языки браузеры особо не поддерживают. Они поддерживают улучшенные версии этих языков. Например, недавно появился стандарт HTML5, в котором добавились разные теги, появился стандарт CSS3, в котором тоже добавили функциональности. Но на клиентской части ни с чем другим работать не получится: бразуер пользователя умеет воспринимать и интерпретировать только эти языки.

За первое занятие сегодня мы поговорим про HTML и CSS — это вёрстка, т. е. как сайт выглядит. Мы в общих чертах поймем, как что-то верстать. Вёрстка — это сложная тема, и я не смогу её рассказать в деталях, хотя бы потому что я сам очень плохо верстаю. Но нам это не нужно. Нам нужно понять, что вообще происходит в мире, и научиться решать наши задачи хотя бы одним способом. Есть такой способ, называется CSS-фреймворки: это когда вы говорите: я программист, я не верстальщик, я возьму готовую библиотеку, там уже есть красивые кнопочки и разметка. И пусть мой сайт будет выглядеть так же, как и остальные сайты, использующие эту библиотеку, но зато это будет работать.

На следующем занятии мы поговорим про JavaScript. Мы научимся анимировать то, что происходит на клиенте.

А дальше мы будем разбираться с тем, что происходит на сервере. А на сервере может происходить уже всё, что вы захотите, потому что с браузером вы общаетесь по специфицированному протоколоу — HTTP. Протокол специфицирует, какие текстовые данные вы передаете, если браузер коннектится к конкретному сокету на удалённом сервере. Но какая программа сидит на сервере и общается по этому сокету, на каком языке написана эта программа — это решать целиком вам. Поэтому серверную логику можно писать вообще на всех языках, из которых доступны сокеты. Просто на некоторых языках доступно огромное количество библиотек, которые упрощают это занятие. Вы можете найти библиотеки под Паскаль, которые реализуют протокол HTTP, и писать серверную логику на нём. А даже если под язык есть сокеты, но нет библиотек, реализующих HTTP (Фортран?), то вы всё равно можете реализовать протокол HTTP и начать писать на них веб-приложения.

Если вы начнёте смотреть на языки, для которых существует много веб-фреймворков и много инфраструктуры для упрощения работы программистов, то окажется, что таких языков очень много, и мир делится на очень много категорий. Некоторые люди пишут на стейке Майкрософта: ASP.NET, на языке C#. Некоторые люди пишут серверную логику на Джаве, причём по-разному. Мы будем писать на Питоне, потому что, во-первых, язык довольно популярный сейчас, а во-вторых, я довольно хорошо разбираюсь в питоновском фреймворке Джанго. Джанго — большой фреймворк, поэтому если вы его освоите, то вы сможете решать свои проблемы с его помощью очень легко: в нём уже много функционала встроено. Другие фреймворки бывают меньше по объёму, и вам иногда не хватает их мощи, и приходится добирать функционал сторонними библиотеками.

То, что находится на сервере, мы будем называть бекендом. То, что крутится на клиенте, мы будем называть фронтендом. Люди пишут бекенд на чём угодно: например, пишут на Джаваскрипте: есть такой фреймворк Node.js. Хотя он больше популярен на западе: среди моих знакомых на Node.js никто не пишут. Люди пишут на PHP и на Питоне.

Из всех этих технологий мы выбрали Питон и будем осматривать два фреймворка: простой фреймворк Flask, чтобы начинать с простых вещей, и фреймворк Django, который мы посмотрим очень подробно. Когда мы его освоим, то у вас появится впечатление, что вы можете реализовать то, что хотите.

HTML, CSS и JavaScript

Давайте я сначала за три минуты объясню, что такое HTML, CSS и JavaScript, и что они делают. Мы посмотрим очень простой пример. Он мало похож на сайты, которые вы видели, но он всё равно исполняется в браузере. Что здесь происходит: если кликать по квадратам, то они меняют свой цвет: с красного на синий и обратно.

В браузере вы всегда можете посмотреть исходный код страничке — правый клик мыши, “Просмотр исходного кода”. Весь код этого примера помещается в один файл длиной в 38 строчек, в нём содержится код на трёх языках:

Текст на языке HTML состоит из тегов. HTML — это не язык программирования, это язык разметки. Исходная идея интернета была в следующем: мы просто будем делать набор текстовых документов, которые будем соединять между собой ссылками. Для ссылок тоже есть свой тег. Например, чтобы поставить ссылку на сайт Гугла, мы пишем

Тег записывается в угловые скобки. Он имеет название (в примере — a ), и дальше тег имеет список атрибутов, которые записываются как ключ=»значение» . Внутри тега может быть текст, могут быть вложены другие теги. Тег закрывается через слэш-название: </a> . Тег меняет свойства того, что записано внутри него.

Для просмотра свойств содержимого страницы в браузерах предусмотрены “Инструменты разработчика”.

Тег <div> — это просто коробка, которой можно задать произвольный размер, границы, стили, цвета. Современная вёрстка — это набор дивов, которые друг относительно друга расположены, им присвоена некоторая ширина, в них накладывается содержимое, и оно показывается пользователю. Расположение дивов ещё можно менять в зависимости от того, мобильное устройство у пользователя, или же компьютер.

В примере с тремя квадратиками <div > — это розовая коробка, а <div > — это чёрный квадратик, у которого есть есть отступ снизу.

Что такое Html и Css?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвет

Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML#

Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML — элементы, теги и атрибуты.

Элементы#

Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6> ) и абзацев (определены как <p> ); в список можно включить элементы <a>, <div>, <span>, <strong> и <em> и многие другие.

Элементы идентифицируются с помощью угловых скобок <> , окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Теги Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div> .

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div> .

Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a> и закрывающий тег </a> . Что находится между этими двумя тегами будет содержимым ссылки.

Так, теги ссылок будут выглядеть примерно так:

Атрибуты#

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id, который идентифицирует элемент; атрибут class, который классифицирует элемент; атрибут src, который определяет источник встраиваемого содержимого; и атрибут href, который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a> с атрибутом href будет выглядеть следующим образом:

• Синтаксис HTML в виде схемы включает элемент, атрибут и тег

Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь — мы расшифруем всё по ходу.

Настройка структуры документа HTML#

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html>, <html>, <head> и <body> .

Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html> . После этого идёт элемент <html> означающий начало документа.

Внутри <html> элемент <head> определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента <head> не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.

Всё видимое содержимое веб-страницы будет находиться в элементе <body> . Структура типичного HTML-документа выглядит следующим образом:

Этот код показывает документ, начиная с объявления типа документа, <!DOCTYPE html> , затем сразу идёт элемент <html> . Внутри <html> идут элементы <head> и <body> . Элемент <head> содержит кодировку страницы через тег <meta charset="utf-8"> и название документа через элемент <title> . Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р> . Поскольку и заголовок и абзац вложены в элемент <body> , они видны на веб-странице.

Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html> . Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body>

На практике#

В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!

Откройте текстовый редактор, создайте новый файл с именем index.html и сохраните его в место, которое не забудете. Я собираюсь создать папку на рабочем столе с именем styles- conference и сохранить этот файл в ней; не стесняйтесь делать то же самое. В файле index.html добавим структуру документа, в том числе тип документа <!DOCTYPE html> и элементы <html>, <head> и <body> .

Внутри элемента <head> добавим элементы <meta> и <title> . Элемент <meta> должен включать в себя правильные атрибуты charset и значение, в то время как элемент <title> должен содержать название страницы, скажем «Styles Conference».

Внутри элемента <body> добавим элементы <h1> и <p> . Элемент <h1> должен включать в себя желаемый заголовок — давайте снова воспользуемся «Styles Conference», а элемент <р> должен включать в себя простой абзац для представления нашей конференции.

Пришло время взглянуть на то, что мы сделали! Отыщем наш файл index.html (у меня он находится в папке styles-conference на рабочем столе). Дважды щёлкнув по этому файлу или перетащив его мы получим такую картину

• Наши первые шаги при создании сайта Styles Conference

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

Основные термины CSS#

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

Селекторы#

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

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р> .

В CSS селекторы сочетаются с фигурными скобками <>, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <p> .

Свойства#

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок <> и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background, color, font-size, height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size, применяемые ко всем элементам <p> .

Значения#

Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p> и устанавливаем значение свойства color как orange, а значение свойства font-size как 16 пикселей.

Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.

Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.

• Структура синтаксиса CSS включает селектор, свойства и значения

Знание нескольких основных терминов и общего синтаксиса CSS — это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.

Работа с селекторами#

Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.

Селекторы типа#

Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div . Следующий код показывает селектор типа для элементов <div> , а также соответствующий HTML.

Классы Классы позволяют выбрать элемент на основе значения атрибута class. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.

Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.

В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class, включая элементы <div> и <p> .

Идентификаторы#

Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class, идентификаторы используют значение атрибута id в качестве селектора.

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

В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id. Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe.

Дополнительные селекторы#

Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.

Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.

Подключение CSS#

Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.

Другие варианты добавления CSS#

Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.

Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением .css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.

Внутри элемента <head> применяется элемент <link> , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.

Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.

Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.

На данный момент наши страницы начинают оживать, медленно, но верно. Вы не сможете все запомнить , вам нужно узнать правила и синтаксис а далее делая заглядывать в гугл

Что такое header?#

HTML тег <header> содержит вводное или навигационное содержимое для раздела документа. Он обычно располагается в верхней части раздела, но это не является обязательным. Его название — "header" (в переводе с анг. заголовок или шапка) может подразумевать положение в верхней части раздела, но так как он представляет собой введение, то на самом деле может располагаться в любом месте в рамках этого раздела.

Термин "header" также часто относится к общей шапке веб-сайта, где обычно располагается имя и логотип сайта, меню, форма поиска и так далее. Когда элемент header относиться к любому элементу, разделяющему страницу на разделы, он семантически подразумевает заголовок или введение для содержимого своего родительского элемента.

Элемент <header> всегда должен иметь закрывающий тег и может содержать любые HTML-элементы, за исключением элемента <footer> или другого элемента <header> .

Что такое footer?#

HTML тег <footer> представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.

Difference between HTML and CSS

HTML HTML stands for Hyper Text Markup Language and it is the language that is used to define the structure of a web page. HTML is used along with CSS and Javascript to design web pages. HTML is the basic building block of a website. It has different attributes and elements with different properties. Each element has an opening and a closing tag. We can also add images with the help of HTML.

Example:

Output:

CSS: CSS stands for Cascading Style Sheets and it is used to style web documents. It is used to provide the background color and is also used for styling. It can also be used to style the font and change its size. We can also style many different web pages with the same specifications with the help of CSS. CSS is also recommended by World Wide Web Consortium (W3C). It can also be used along with HTML and Javascript to design web pages.

Example:

Output:

Features of HTML:

• Structure: HTML provides the basic structure of a webpage, defining the layout and hierarchy of content using elements such as headings, paragraphs, and lists.
• Content: HTML is used to add various types of content to a webpage, including text, images, videos, and audio.
• Links: HTML is used to create links between different pages and websites, allowing users to navigate the web.
• Forms: HTML is used to create forms that allow users to input data, such as contact information or search queries.

Features of CSS:

• Style: CSS is used to define the visual style of a webpage, including fonts, colors, backgrounds, and layout.
• Layout: CSS allows for complex layouts, with the ability to position elements on a page and adjust their size and spacing.
• Responsiveness: CSS allows for responsive design, where the layout and style of a webpage can adapt to different screen sizes and device types.
• Animations: CSS can be used to create animations and transitions on a webpage, making it more interactive and engaging.

Similarities between HTML and CSS:

• Syntax: Both HTML and CSS use a similar syntax, with the use of tags and selectors to define elements on a webpage.
• Separation of Concerns: Both HTML and CSS follow the principle of separation of concerns, where HTML defines the structure and content of a webpage, while CSS defines the style and layout.
• Cascading: The “C” in CSS stands for “Cascading”, which means that styles can be inherited and overridden based on the order of the style rules and the specificity of the selectors.
• Integration: HTML and CSS are often used together, with CSS being used to style the elements defined in HTML.

Difference between HTML and CSS:

S.NO.	HTML	CSS
1.	HTML is a markup language used to define a structure of a web page.	CSS is a style sheet language used to style the web pages by using different styling features.
2.	It consists of tags inside which text is enclosed.	It consists of selectors and declaration blocks.
3.	HTML doesn’t have further types.	CSS can be internal or external depending upon the requirement.
4.	We cannot use HTML inside a CSS sheet.	We can use CSS inside an HTML document.
5.	HTML is not used for presentation and visualization.	CSS is used for presentation and visualization.
6.	HTML has comparatively less backup and support.	CSS has comparatively higher backup and support.
7.	HTML doesn’t allow animations and transitions.	CSS allows animation and transitions which helps to improve the UI.
8.	HTML files are saved with .htm or .html extension.	CSS files are saved with .css extension.

Conclusion:

HTML and CSS are both essential tools for building websites, but they serve different purposes. HTML provides the structure and content of a webpage, while CSS provides its presentation and layout. While they are often used together, it’s important to understand the differences between these two languages to create effective and visually appealing websites. With a strong understanding of HTML and CSS, web designers can create websites that are both functional and visually engaging.

В чем отличие между HTML и CSS?

И HTML, и CSS являются ключевыми столпами современной веб-разработки. Давайте узнаем, в чем основное различие между ними.

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

Теперь давайте углубимся в технический жаргон.

Термин HTML означает язык разметки гипертекста. Это стандартный язык разметки, используемый для отображения веб-сайтов в браузерных приложениях. Браузеры получают HTML-документы (файлы) с веб-сервера, обрабатывают и отображают их на экране. Теги и атрибуты HTML помогают отображать на веб-страницах текстовое содержимое, изображения, видео и многое другое.

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

Рассмотрим простой пример, и давайте начнем с фрагмента HTML, который отображает сообщение «Hello World».

Если бы вы сохранили эту строку в HTML-файле и открыли его в своем любимом браузере, вы бы увидели на экране сообщение «Hello World».

Чтобы изменить стиль, вам нужно применить правила CSS. Например, вы можете поменять цвет текста на «красный».

В приведенном выше примере мы использовали HTML-тег <p> для отображения абзаца на веб-странице. Затем мы добавили правило CSS с помощью style=»color: red» , чтобы изменить внешний вид содержимого.

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