Что такое HTML и CSS и как это выучить?

23.10.2013

Категория: HTML/CSS

Привет. Пора бы что-то по теме написать. Из заголовка понятно, о чем этот пост, но я бы хотел внести немного ясности.

Я не буду из своего блога делать учебник по основам языков, не буду рассказывать о том, что такое класс, селектор, кавычки и точечки. В Сети уже столько материала пережевано, что мне просто нет смысла это повторять. Вести свой блог по пути переписывания статей других сайтов своими словами (как это делает бОльшая часть «блоггеров») я не хочу.

А вот делиться интересными фишками, хитростями да и вообще полезными приемами, которые использую в работе, с удовольствием буду!

Ближе к делу

Возьму определения с Википедии:

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»;) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Вроде бы и так понятно, что такое HTML и CSS, но все равно скажу своими словами.

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

CSS — облицовочный материал, который делает всю красоту.

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

Немного моей истории

То, что я сейчас напишу уже есть на странице Об авторе, но я все равно еще раз напишу и дополню:)

Первый свой сайт я создал в 2008 году. Работает он на системе Ucoz. Не помню точно как, но один мой одноклассник рассказал мне о Ucoz и о том, как легко там можно сделать свой сайт. Мне стало интересно. Не знаю почему, но было типа «прикольно» сделать свой сайт. Вот тогда я и узнал про HTML. Но именно узнал, а не научился:) Кажется, это был 9-й класс школы. Применяя базовые знания по фотошопу и Ucoz, я все же смог сделать сайт.

Сайт на рок тематику. На главной новостная лента и уютненький форум) Стыдно сейчас его показывать, но думаю в будущем наберусь смелости.

Второе в жизни упоминание о тэгах было на первом курсе по информатике. Да, по этому предмету было много абсурдных заданий и лучше бы мы изучали Автокад вместо MS Access (градостроители все же), но за задание сделать сайт из пары страниц HTML я все же благодарен. Поначалу очень плевался на такое, но мне понравилось, когда сел делать.

Взял конспект лекций и начал писать структуру страницы по тегам, что переписал с доски, но…Понял, что ничего того, что я придумал у меня не получается и начал читать в интернете подробнее о html (я тогда еще и не подозревал о css). В итоге моя работа была лучшей в группе, но увы этого почти никто не оценил, так как ставили оценки за наличие работы, а вот если бы был рейтинг по работам…

Ну да ладно, я все равно был доволен собой. Передо мной стала задача разместить элементы на странице так, как я хочу, а не так, как получалось по конспекту лекций. Вся проблема в том, что в HTML нету такой функциональности, благодаря которой можно разместить элемент с отступом в 20 пикселей от правого края окна браузера. И тогда я подумал….а что если я необходимый элемент помещу в таблицу, которую помещу в ячейку главной таблицы, грани которой не видно, но которая занимает всю страницу и задавая размеры ячейкам, я смогу поместить тот элемент с отступом в 20px от правого края??…Попробовал — получилось!

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

Что для этого нужно?

В октябре 2011 года я стал серьезно изучать все это дело, что плавно перетекло в основную деятельность моей жизни. Я хотел делать сайты. Я знал, что для этого нужен HTML. Потом наткнулся на упоминания о CSS. Решил чуток подробнее понять, что это и…это было очень туго! Те сайты, на которые я попадал, давали вроде бы и базовые знания, но не было того момента, который бы подвел полного чайника от незнания к базовым моментам. А потом я случайно наткнулся на бесплатные видео уроки от Евгения Попова. Первым делом меня смутила необходимость вводить свою почту и имя, чтобы получить бесплатный видеокурс. Ну блин, еще заспамят меня, а то и почту взломают, не хочу! Но все же решился)

Но…на мой почтовый ящик так ничего и не пришло (должна была прийти ссылка на скачивание бесплатных курсов по HTML и CSS). Поэтому я пошел на ex.ua и скачал их там:) Рассуждая геройски, подумал, что курс по HTML мне не нужен, я вроде немного знаю его, а вот CSS посмотрю. Посмотрел первый урок — понял, что нужно смотреть и учить HTML сначала.

Что вам сказать, ребята…это лучше, чем все сайты с уроками вместе взятые. Везде автор пишет максимально просто, так как он это видит, но все равно этого не достаточно для чайника. Просто автору даже в голову не может прийти, что «этого» можно не знать. А Е.Попов не только объясняет как для маленьких и тупых, но еще и показывает каждый свой шаг и это именно то, что нужно вам, если хотите научится HTML/CSS!

Так что вот вам ссылки (раз и два) на бесплатные видеокурсы, берите, качайте, не пожалеете.

Выгоды мне никакой от того, что я вам предлагаю этот курс, но вот Евгению скорее всего будет. А мне и не жалко. Благодаря ему мне легче было окунутся в веб-разработку.

Но есть одно маленькое «Но». В своем курсе CSS он ни слова не сказал о CSS3 — основе всех современных эффектов. Но поверьте, зная и понимая, что такое CSS, будет очень легко найти в интернете информацию про CSS3. Ну, а различные техники (как уже выше сказал) я буду описывать в своем блоге.

После изучения тех курсов я создал свой первый настоящий сайт (в плане, что на личном хостинге и т.д.). Да, я еще не подозревал о том, что такое PHP и MySQL, и WordPress, и т.д…

НО это уже совсем другая история…

Есть много в интернете полезных сайтов с уроками, но когда нужно действительно хорошее решение вашего вопроса, то лучше всего искать на habrahabr.ru.

Вначале я часто пользовался шпаргалками: раз и два.

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

На этом все.

Теги: основы html/css

Добавление CSS | htmlbook.ru

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

Таблицы связанных стилей

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

Пример 1. Подключение таблицы связанных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <link rel="stylesheet" type="text/css" href="mysite.css">
  <link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">
 </head>
 <body>
   <h2>Hello, world!</h2>
 </body>
</html>

Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.

Достоинства данного способа

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <style> (пример 2).

Пример 2. Использование таблицы глобальных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <style type="text/css">
   h2 { 
    font-size: 120%; /* Размер шрифта */
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
    color: #336; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <h2>Hello, world!</h2>
 </body>
</html>

В данном примере показано изменение стиля заголовка <h2>. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style, а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
 </head>
 <body>
  <h2>
  Hello, world!</h2>
 </body>
</html>

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

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

Пример 4. Сочетание разных методов подключения стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <style type="text/css">
    h2 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
  </style>
 </head>
 <body>
  <h2>Hello, world!</h2>
  <h2>Hello, world!</h2>
 </body>
</html>

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

CSS

HTML по теме

• Тег <h2>
• Тег <link>
• Тег <style>

CSS по теме

• color
• font-family
• font-size

В чем разница между HTML и CSS

следующий → ← предыдущая HTML HTML — это аббревиатура от «Язык разметки гипертекста», , который используется для создания веб-страниц и веб-приложений. Он прост в использовании и имеет свободный синтаксис. Он почти установлен на каждом веб-сайте и поддерживается каждым браузером. Это легко узнать и кодировать. Это бесплатно для использования и не требует лицензии. Гипертекст означает просто «Текст в тексте». Внутри текста есть ссылка, это гипертекст. Всякий раз, когда мы нажимаем на ссылку, которая ведет нас на новую веб-страницу, мы нажимаем на гипертекст. Гипертекст — это способ связать две или более веб-страниц (HTML-документов) друг с другом. Язык разметки — это компьютерный язык, который используется для применения правил компоновки и форматирования к текстовому документу. Язык разметки делает текст более интерактивным и динамичным. Он может превращать текст в изображения, таблицы, ссылки и т. д. УСБ CSS означает каскадных таблиц стилей . Это язык таблиц стилей, который описывает внешний вид и форматирование документа, написанного на языке разметки. Это помогает нам придать новый вид нашим старым HTML-документам. Внеся некоторые изменения в код CSS, мы можем легко изменить внешний вид веб-сайта. Он предоставляет дополнительную функцию для HTML. CSS упрощает работу, контролируя макет нескольких веб-страниц. CSS прост в обслуживании и имеет хорошую поддержку сообщества. Обычно используется с HTML для изменения стиля веб-страниц и пользовательских интерфейсов. Его также можно использовать с любыми XML-документами, включая обычный XML, SVG и XUL. CSS используется вместе с HTML и JavaScript на большинстве веб-сайтов для создания пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений. И HTML, и CSS являются клиентскими языками веб-скриптов, которые используются для создания веб-страниц. Есть много способов, которые создают разницу между HTML и CSS, например методы реализации, их синтаксическая структура, простота использования и такие функции, как атрибуты. Разница между HTML и CSS представлена ​​в следующей таблице: На базе HTML УСБ Определение HTML — это язык разметки, описывающий структуру веб-страниц. Это язык таблиц стилей, используемый для описания представления и дизайна веб-страниц, включая цвета, макеты и другие параметры. Зависимость Мы не можем использовать формат структуры и синтаксис HTML в таблицах стилей CSS. Он не зависит от HTML и может использоваться с любым языком разметки на основе XML. Реализация Для структуры и содержания веб-страницы. В основном для дизайна и презентации. Архитектура HTML использует теги, окружающие содержимое любого элемента веб-страницы. Он состоит из селекторов, объявленных с использованием синтаксиса блочного оператора. Подход Мы используем его в основном для разработки основного содержания веб-страницы. В основном он используется для форматов стилей страниц, веб-дизайна, макетов и многого другого. Опора HTML имеет большую поддержку сообщества, что помогает использовать различные подходы к структуре веб-страницы. Он также имеет большую поддержку сообщества и огромную резервную копию для постоянных улучшений в веб-дизайне. Другие общие различия между HTML и CSS приведены ниже: HTML легко выучить благодаря понятному синтаксису, в то время как CSS иногда усложняет код и приводит к путанице. Файлы HTML могут включать код CSS, но это не то же самое с CSS, потому что CSS никогда не может содержать коды HTML. HTML использует теги, тогда как CSS использует селекторы. HTML используется для создания веб-страниц, тогда как CSS управляет макетом и стилем веб-страниц. Преимущества и недостатки HTML Преимущества Преимущества HTML перечислены ниже: Легко учиться и программировать. Поддержка нескольких языков. Он не зависит от платформы, поскольку может отображаться на любой платформе, такой как Linux, Windows, Macintosh и т. д. HTML не чувствителен к регистру, поэтому мы можем использовать теги как в нижнем, так и в верхнем регистре, но рекомендуется писать все теги в нижнем регистре для согласованности и удобочитаемости. Большая поддержка сообщества. Он бесплатен для использования и не требует лицензии. Недостатки HTML имеет ограниченные функции безопасности. Медленный технический прогресс. HTML является статическим, поэтому он не может генерировать динамический вывод. Преимущества и недостатки CSS Преимущества Преимущества CSS перечислены ниже: Повышает скорость работы веб-сайта, и страницы загружаются быстрее. Он совместим с несколькими устройствами. Он также имеет хорошую поддержку сообщества. Простота обслуживания. Предоставляет больше атрибутов. Поддерживает автономный просмотр. Недостатки Недостатки CSS перечислены ниже: Иногда CSS может быть запутанным и создавать сложности в коде. В CSS отсутствует взаимодействие с базами данных. В нем отсутствуют соображения безопасности. У CSS есть кроссбраузерные проблемы. Он имеет несколько уровней, таких как CSS1, CSS2, CSS3, , которые иногда сбивают с толку новичков. Next TopicMargin и Padding ← предыдущая следующий →

HTML против CSS | Изучите 6 лучших удивительных сравнений

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

Здесь мы подробно обсудим разницу между HTML и CSS.

HTML — это в основном стандартный язык разметки для описания структуры веб-страниц. Таким образом можно реализовать заголовок и структуру содержимого веб-страницы. Объявление типа документа HHTML — еще один компонент HTML. Он используется для запуска рендеринга в стандартном режиме. Документы HTML обычно состоят из структуры вложенных элементов HTML. Общий формат HTML-элемента можно описать следующим образом:

Примеры HTML и CSS

Пример:   »content». Здесь

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

CSS можно использовать в различных типах устройств, таких как большие или маленькие экраны и принтеры. Он не зависит от HTML и может использоваться с любым языком разметки на основе XML. Консорциум World Wide Web в основном поддерживает спецификации CSS. Набор правил CSS состоит из селектора и блока объявления. Его можно описать следующим образом:

Пример:   h2 { color: white; стиль шрифта: курсив}. Здесь

• Селектор: h2 (указывает элемент HTML, который необходимо стилизовать)
• Свойство: «цвет и стиль шрифта» (определяет аспекты элементов, которые необходимо изменить)
• Блок объявлений: «цвет: белый; стиль шрифта: курсив» (описывает одно или несколько объявлений, разделенных точкой с запятой)
• Значения: «белый и курсив» (Указывает параметры выбранных свойств.

Подобно двум сторонам медали, у HTML и CSS есть свои плюсы и минусы.

Плюсы и минусы

Ниже приведены некоторые плюсы и минусы HTML и CSS:

HTML (Pros)

• Простота обучения и кодирования
• Можно использовать бесплатно, лицензия не требуется
• Правильно интерпретируется браузерами
• Поддерживает несколько языков
• Легкий и поддерживает несколько платформ
• Поддержка крупного сообщества

HTML (против)

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

CSS (Pros)

• Он имеет гораздо более широкий набор атрибутов, чем HTML
.
• Улучшена скорость веб-сайта, и страницы загружаются быстрее
• Поддерживает автономный просмотр
• Совместим с несколькими устройствами
• Простота обслуживания
• Хорошая поддержка сообщества
• Он обеспечивает гораздо лучшие форматы стиля веб-страницы, чем HTML 9.0107

CSS (минусы)

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

Прямое сравнение HTML и CSS (инфографика)

Ниже приведены шесть основных различий между HTML и CSS:

Основные различия между HTML и CSS

Основные различия между HTML и CSS объясняются в следующих пунктах:

1. HTML — это в основном стандартный язык разметки для описания структуры веб-страниц, тогда как CSS — это язык таблиц стилей для описания представления и дизайна веб-страниц. веб-страницы
2. HTML прост в освоении и имеет четкий синтаксис, в то время как CSS иногда может быть запутанным и создавать сложности в коде.
3. CSS не зависит от HTML и может использоваться с любым языком разметки на основе XML, тогда как с HTML 9 дело обстоит иначе.0107
4. Файл HTML может содержать коды CSS, но, с другой стороны, CSS никогда не может содержать коды HTML.
5. HTML предоставляет теги, окружающие содержимое любых элементов веб-страницы, тогда как CSS состоит из селекторов, окруженных блоком объявлений
6. У CSS есть фрагментация, но у HTML таких проблем нет.
7. CSS использует гораздо меньше кода и, следовательно, обеспечивает гораздо меньшее время загрузки веб-страницы, чем HTML
.

Таблица сравнения HTML и CSS

Ниже приведены списки пунктов, описывающих сравнение между HTML и CSS.

.

ОСНОВА ДЛЯ СРАВНЕНИЯ	HTML	КСС
Определение	HTML — стандартный язык разметки для описания структуры веб-страниц	CSS — это язык таблиц стилей для описания представления и дизайна веб-страниц, включая цвета, шрифты и макеты
Реализация	HTML для содержимого и структуры веб-страницы	CSS в основном для презентации и дизайна
Архитектура	Будучи стандартным языком разметки для создания веб-страниц, HTML раньше имел теги, окружающие содержимое.	CSS — это язык таблиц стилей, и здесь в основном селекторы объявляются с использованием синтаксисов блочных операторов
Зависимость	Форматы синтаксиса и структуры HTML нельзя использовать в таблицах стилей CSS	CSS не зависит от HTML и может использоваться с любым языком разметки на основе XML
Подход	HTML в основном используется для разработки основного содержимого любой веб-страницы.	CSS в основном применяется для веб-дизайна, форматов стилей страниц, макетов и других визуальных эффектов.
Опора	Сообщество активно поддерживает HTML, что помогает им использовать различные подходы к структуре веб-страниц в соответствии с текущими отраслевыми стандартами.	CSS также имеет огромную резервную копию и большую поддержку сообщества для постоянного улучшения веб-дизайна в соответствии с текущими стандартами