Лекция 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 > — это чёрный квадратик, у которого есть есть отступ снизу.
Popovses blog
Я занимаюсь разработкой сайтов на WordPress. Решаю различные технические вопросы.
Ускорить блог, помочь с версткой, починить плагин?
Свежие новости
Следить за новыми статьями блога можно через:
Или получать их по почте:
Поиск по блогу
Категории
HTML/CSS
WordPress
Linux
Блоггинг
Инструменты
Разное
Что такое 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 .
Вначале я часто пользовался шпаргалками: раз и два .
Возможно еще добавлю сюда каких-то полезных ссылок, или выпущу вторую часть этой статьи, поэтому рекомендую подписаться на новости в форме ниже.
What is HTML?
HTML or HyperText Markup Language is a markup language created by Tim Berners-Lee in the year 1991. After 1991, there were various versions of HTML being developed. During this time, besides the change of versions, the publishers have also changed. On May 28th in 2019, Web Hypertext Application Technology Working Group (WHATWG) became the HTML publisher.
The latest release of HTML is the Living Standard version published by WHATWG. According to the official WHATWG website, the HTML’s Living Standard was last updated on November 20th in 2020.
HTML files have the extension of .html and .htm, containing the structure of a web page. HTML files are text-based and designed to be analyzed and rendered by a web browser.
With the use of CSS and JavaScript, it is possible to create appealing and interactive websites.
What is CSS?
Several years after HTML became a thing, the co-worker of HTML’s author has proposed CSS or Cascading Style Sheets. It was proposed by Hakon Wium Lie on October 10 of 1994 to style the content shown in a web browser. After several years of work, Hakon Wium Lie and Bert Bos released CSS1 in 1996.
Though stylesheets like DSSSL and FOSI were existing, CSS was a winner because of its ability to “cascade” the styles. According to MDN’s definition of the word cascade, it “is an algorithm that defines how to combine property values originating from different sources.” Thus said, it can rank style definitions based on the source type.
The latest release of CSS is version 3, published by CSS Working Group (CSSWG). CSS files have only one extension, which is .css. Like HTML files, CSS files are text-based and are designed to be analyzed by a web browser. Instead of displaying content, they are used to change existing content created from HTML files.
Are HTML and CSS considered programming languages?
There are many programming languages, such as C, C++, Java, Python, etc. But does HTML and CSS considered programming languages? The answer is yes and no.
On the one hand, a markup language is a document annotation that is different from the text and not a formal language that contains a set of instructions used to produce various kinds of output. But on the other hand, a markup language is Turing complete, which means that it has certain rules that can be recognized and interpreted by a computer. This means that you can side with either position and be correct!
Why should you learn HTML and CSS?
Besides being able to create websites, HTML and CSS also helpful because:
— They equip you with basics and help you learn more advanced programming languages easier.
— The knowledge of these languages is essential not only for web developers but also for marketing specialists, designers, content creators, etc. Because “these jobs frequently require you to optimize landing pages and web pages” (HyperionDev).
— These languages can help you by enhancing your emails. Besides sending regular emails with boring text, you can use HTML and CSS to send someone an email looking like a website.
Common Editors
Since HTML and CSS are text-based files, you can view these files without any special programs. You can even use Windows’ Notepad or TextEdit if you are a Mac user. And though these programs can open markup and stylesheet files, they lack some of the most important features.
One of the features being code listing, and another feature is syntax highlighting. These two tools are handy when you need to find an issue in your code. Here are some great editors who are equipped with code linting, syntax highlighting, and more:
VS Code
VS Code or Visual Studio Code is a free code editor developed by Microsoft and is available to download for Windows, Linux, and macOS. According to the official VS Code’s GitHub page, the program is built using TypeScript, JavaScript, and CSS. Some default tools available upon installation include debugging, syntax highlighting, intelligent code completion, and more.
In addition to the variety of available tools, users can also change themes, keyboard shortcuts and manage extensions that add additional functionality to the editor. One of the popular extensions for web developers is Live Server, allowing an automatic browser refresh after applying changes to the code. Another popular extension is Prettier that formats the code upon saving.
Brackets
Brackets is a free and open-source code editor developed and maintained by Adobe Systems. It is available to download for Windows, Linux, and macOS. Based on the official Bracket’s GitHub page, the program is built using JavaScript, HTML, and CSS.
Besides code linting and syntax highlighting, Brackets also provides a Live Preview feature out of the box. Live Preview allows the developer to see changes done to the file in the browser without needing to refresh the page.
Since HTML and CSS can run in the browser, there are also some editors available online without the need for any downloads, such as:
CodePen
CodePen is an online code editor founded in 2012 by Alex Vazquez, Tim Sabat, and Chris Coyier. It acts as an online platform that allows users to create and showcase their HTML, CSS, and JavaScript. Besides supporting standard HTML, CSS, and JS, it also supports various preprocessors such as Pug, SCSS, jQuery, etc. It also automatically updates the output as a developer applying changes to his/her code.
What should every HTML file have?
HTML uses tags in its code to help browsers output the content in a certain way. There are two types of tags, an opening tag and a closing tag. The opening tag is presented by a less than sign, followed by the name of the tag, and ending with a greater than sign (For example: “<p>”). The closing tag is similar to an opening tag but has a forward slash after a less than sign (For example: “</p>”).
All of the tags are considered optional and are based on the needs of the website. So, even if you open an empty HTML file in a browser, the browser would not show any error. But there are certain tags required for a browser to know exactly what you are trying to accomplish. These include:
Document Type Definition
A Document Type Definition or DTD is a tag that “defines the structure and the legal element and attributes of an XML document” (w3schools). In other words, since there are various versions of HTML, DTD is used to tell the browser which version to use. To use the latest version of HTML, <!DOCTYPE html> should be appended to the top of the file. The DTD is one of the tags which only has an opening tag.
HTML Tag
After telling a browser the HTML version being used, HTML's opening and closing tags are coming afterward. The HTML tag is used to wrap all of the content and information about a website.
Head Tag
Inside of HTML's tag, first goes the head tag. Head tag is used to store all of the information about the website, such as keywords, authors, descriptions, etc. Search engines are using that information to let the user find your website.
Title Tag
One of the information head tags holds the title of a website. The content being placed inside of a title tag will be shown in the browser’s title bar and as the name of a tab. Search engines also use it to find your website after uploading it on the server.
Body Tag
After the head tag goes to the body tag, the body tag is used to hold all of the content that appears in a browser window. All of the text, buttons, images you see when you open a website are stored in the body tag.
HTML Content
There are a variety of tags available that display the content in the browser window. Besides, it is not required to be placed in a particular order, nor limitations on how many times each tag could be used. There is only one requirement: to place the tags that display content inside a body tag. Some of the basic HTML tags include:
Headings
HTML provides six types of headings, each having a slight difference in a default font size. In addition to changing the font size of the text wrapped by heading tags, it also makes the content bold by default.
All heading tag names begin with the letter “h” and proceed with the number, 1 being the largest heading and 6 being the smallest. For example, an opening tag <h1> and a closing tag </h1> would output the largest (or the main) heading. Heading tags can contain either plain text or other tags, such as an anchor tag described later.
Paragraphs
Besides headings, HTML also has a paragraph tag which is used to wrap large chunks of text. Compared to six different heading tags, only one paragraph tag is named “p.”
Anchors
In contrast to the previous tags described, anchor tags also add a click functionality to the content. When an anchor tag is clicked, it can direct a user to another page. Anchor tags are named with the letter “a” and require at least one additional piece of information.
The information anchor tags link to the page a user will be redirected to after clicking the tag’s content. To provide this information, the developer must enter a space in the opening tag, followed by src=””, with a link being placed between “”. For example, <a src=”https://google.com”></a> would direct a user to “https://google.com” after clicking an anchor.
Images
As the DTD tag only has an opening tag, an image tag also does not have a closing tag.
The name of an image tag is “img” It also requires additional information like an anchor tag. After the name in the opening tag, the developer must insert a space, with src=’’’ followed having a link to the image in between “”. <img src=”https://www.w3schools.com/tags/img_girl.jpg”> would output this image.
Link CSS to HTML
Default HTML styles provided by the browser are fine but aren’t enough for nowadays. Besides exclusively providing some content to a user, it is also required to be appealing, and that’s where CSS comes in. There are three ways to include CSS code on your website, which are:
Inline Method
The inline method is one of the simplest ways of styling HTML elements. To apply the style, it is required to enter a space before greater than the sign of the tag, followed by style=”” with the CSS properties and their definitions placed between “”.
Embedded Method
Even though an inline method could be the simplest way of adding styles, it might get too cluttered. Plus, it is not an ideal choice when you try to add the same styles to all tags with the same name. To use the embedded method, it is required to place the styles inside a tag named “style.” The tag should be located inside <head></head>.
To apply styles using an embedded method, it should first declare the tag being modified. To do so, the name of the tag should be placed, followed by curly braces. Curly braces should contain CSS properties and their definitions as in the inline method. An example is shown below:
External Method
The final method is using an external file. It is commonly used since it separates HTML’s code from CSS’s code. To use this method, there should be several things done.
First, there should be another file with a .css extension that contains the styles like in the embedded method. Second, the CSS file should be linked using <link rel=”stylesheet” href=””> tag, with CSS file’s path inside “” after “href=”.
Basic CSS
As mentioned earlier, to modify the element's style, the CSS property and definition should be used. Properties and their definition need to be inserted either between “” using an inline method or between curly braces for the other two.
One of the common CSS properties is “color,” which is used to change the color of the text. The possible definitions include, but are not limited to red, blue, green, etc.
To write the pairs, first should go the property name, in this case, “color”. The property name needs to be followed by colon (:) and the definition of the property, such as “blue”. The pair should end with a semicolon (;). The outcome should be “color: blue;”.
Besides a color property, the background-color also takes in the name of the color. Other CSS properties like height, width, padding, margin take in a numerical value followed by the type of measurement. The most common measurement type used is pixels, labeled as “px”.
Further Learning
There are many other HTML tags and CSS properties with their possible definitions. Most of them could be found on websites like w3schools or MDN.
Что такое HTML и CSS? #3214
HTML и CSS — это два основных инструмента, которые необходимы при работе с шаблонами сайта.
HTML — стандартизированный язык программирования документов. Большинство страниц содержат описание разметки на языке HTML. Иными словами, HTML определяет структуру содержимого страницы. Например, именно в HTML задаются заголовки и абзацы, изображения и т.д.
CSS — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, к вышеупомянутым документам HTML). Проще говоря, основное назначение CSS — описывать оформление внешнего вида контента.
Таким образом, если HTML нужен для того, чтобы описать, какая именно информация и в каком порядке должна выводиться на странице, то CSS расширяет возможность HTML и позволяет менять цвета, шрифты, фон и т.д.
Расскажем более детально об HTML и CSS и приведем несколько наглядных примеров: