Создание первой веб-страницы. Как применить ваш CSS к вашему HTML. Простое использование веб шрифтов с помощью API Google Font

Всем-всем привет!

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

• . Будем учиться редактировать код сайта с помощью данных редакторов;
• . Поможем поисковому роботу понять структуру страницы;
• . Узнаем насколько правильно составлен код сайта и найдем ошибки;

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Основы HTML

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

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

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

• Структуру документа;
• Место нахождения того или иного элемента;
• Предназначение элемента;
• Подключаемые сторонние файлы;
• И много-много другого.

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

Структура HTML

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

Заголовок страницы Контент страницы */ _background-color: #000; /* добавили _ перед свойством - для IE6 и ниже */ }

5. Поддержка прозрачности во всех основных браузерах

В примере для элемента div задается 70% прозрачности. Нужно использовать частный код CSS для корректной работы в Internet Explorer (что делает наш код несоответствующим стандартам W3C):

Div { /* для браузеров, совместимых со стандартами */ opacity:0.7; /* следующие строки будут проигнорированы в браузерах, совместимых со стандартами */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */ filter: alpha(opacity=70); /* IE 5-7 */ }

6. Используйте !important для изменения обычного порядка наследования правил CSS

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

Например:

H1 { color: green; } h1 { color: red; }

В данном наборе правил, элемент h1 будет иметь красный цвет.

Если нужно изменить приоритет правил без изменения порядка их объявления, можно сделать так:

H1 { color: green !important; } h1 { color: red; }

Теперь элемент будет зеленым.

Это один из способов центрировать элемент div с фиксированной шириной/высотой во внешнем контейнере. Данный способ можно использовать для центрирования текста, изображений и так далее внутри контейнера. Нужно сделать несложные вычисления для элемента с фиксированными размерами и использовать абсолютные величины для позиционирования и полей. Родительский контейнер должен иметь свойство position: relative , чтобы данный метод сработал.

Div { position: absolute; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; /* 1/2 высоты вашего элемента */ margin-left: -200px; /* 1/2 ширины вашего элемента */ }

8. Простое использование веб шрифтов с помощью API Google Font

Веб шрифты открывают дополнительные возможности оформления страниц с помощью правила CSS @font-face. Однако в настоящий момент нет унифицированной реализации @font-face в различных браузерах. Если говорить конкретно, типы поддерживаемых файлов шрифтов различаются в разных браузерах (может быть ситуация изменится с введением стандарта WOFF). Кроме того, при использовании шрифтов нужно быть осторожным при соблюдении авторских прав (шрифт может не иметь лицензии для использования в веб пространстве).

Одним из обходных путей в ситуации с @font-face является API Google Font .

Ниже приводится пример использования шрифта Cantarell для элемента с использованием API Google Font.

Для использования шрифта из API Google Font сначала нужно указать ссылку на внешнюю таблицу стилей в теге :

Для использования шрифта для элемента h1 просто указываем его в свойстве font-family .

H1 { font-family: "Cantarell", Arial, serif; /* Используем набор шрифтов (на всякий случай) */ }

9. Предотвращаем перевод строки в текстовых элементах

Иногда нужно, чтобы текст не переводился на следующую строку, когда исчерпывается ширина содержащего его элемента.

Текст ссылки разорван пробелом, чтобы перенести последнее слово на следующую строку. Но как сделать так, чтобы ссылка все время оставалась на одной строке (то есть предотвратить перенос строки)? Просто. Нужно использовать свойство white-space:

A { white-space: nowrap; }

10. Вертикальное центрирование текста

Для горизонтального центрирования текста можно использовать несколько стандартных методов (например, text-align: center или margin: 0 auto), но вертикальное центрирование текста требует использования трюков.

Для текста, который состоит из одной строки, мы можем использовать свойство line-height . Устанавливая значение свойства line-height для элемента с текстом равным высоте его контейнера, мы получаем центрированный по вертикали текст.

Вот элемент p , который центрирован по горизонтали внутри элемента div с размерами 100×100px, с помощью свойства text-align: center:

Свойство text-align не центрирует текст по вертикали. Мы можем установить значение свойства line-height равным высоте контейнера div (100px).

Div { width:100px; height:100px; } div p { line-height:100px; }

Такое использование свойств предполагает отсутствие у элемента p полей и отступов. Если будут иметься поля или отступы сверху или снизу, то нужно будет их компенсировать или просто установить 0 для padding и margin , чтобы облегчить себе жизнь.

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

Presenting a document to a user means converting it into a usable form for your audience. Browsers , like , or Internet Explorer , are designed to present documents visually, for example, on a computer screen, projector or printer.

How does CSS affect HTML?

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:

• A set of properties , which have values set to update how the HTML content is displayed, for example, I want my element"s width to be 50% of its parent element, and its background to be red .
• A selector , which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document .

A set of CSS rules contained within a stylesheet determines how a webpage should look. You will learn a lot more about what CSS syntax looks like in the next article of the module - CSS Syntax .

A quick CSS example

The above descriptions may or may not have made sense, so let"s make sure things are clear by presenting a quick example. First of all, let"s take a simple HTML document, containing an and a

(notice that a stylesheet is applied to the HTML using a element):

My CSS experiment Hello World!

This is my first CSS example

Now let"s look at a very simple CSS example containing two rules:

H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }

The first rule starts with an h1 selector, which means that it will apply its property values to the element. It contains three properties and their values (each property/value pair is called a declaration ):

The first one sets the text color to blue.

The second sets the background color to yellow.

The third one puts a border around the header that is 1 pixel wide, solid (not dotted, or dashed, etc.), and colored black.

The second rule starts with a p selector, which means that it will apply its property values to the

element. It contains one declaration, which sets the text color to red.

In a web browser, the code above would produce the following output:

This isn"t too pretty, but at least it starts to give you an idea of how CSS works.

Active learning: Writing your first CSS

Now we"ll give you a chance to write your own bit of CSS. You can do this using the Input areas below, in the live editable example. In a similar fashion to what you saw above, you"ve got some simple HTML elements and some CSS properties. Try adding some simple declarations to your CSS, to style the HTML.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Playable code HTML Input Hello World!

This is a paragraph.

• This is
• A list

CSS Input h1 { } p { } li { } Output var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput() { output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; } reset.addEventListener("click", function() { htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); }); solution.addEventListener("click", function() { htmlInput.value = htmlCode; cssInput.value = "h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\np {\n color: red;\n}\n\nli {\n text-shadow: 2px 2px 3px purple;\n}"; drawOutput(); }); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); How does CSS actually work?

When a browser displays a document, it must combine the document"s content with its style information. It processes the document in two stages:

The browser converts HTML and CSS into the (Document Object Model ). The DOM represents the document in the computer"s memory. It combines the document"s content with its style.

The browser displays the contents of the DOM.

About the DOM

A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document"s content meet up.

DOM representation

Rather than a long, boring explanation, let"s take an example to see how the DOM and CSS work together.

Let"s assume the following HTML code:

In the DOM, the node corresponding to our

Element is a parent. Its children are a text node and the nodes corresponding to our elements. The SPAN nodes are also parents , with text nodes as their children:

P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"

This is how a browser interprets the previous HTML snippet -it renders the above DOM tree and then outputs it in the browser like so:

Applying CSS to the DOM

Let"s say we added some CSS to our document, to style it. Again, the HTML is as follows:

Let"s use: Cascading Style Sheets

If we apply the following CSS to it:

Span { border: 1px solid black; background-color: lime; }

The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a span selector, it will apply that rule to each one of the three spans. The updated output is as follows:

How to apply your CSS to your HTML

There are three different ways to apply CSS to an HTML document that you"ll commonly come across, some more useful than others. Here we"ll briefly review each one.

External stylesheet

You"ve already seen external stylesheets in this article, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML element. The HTML file looks something like this:

My CSS experiment Hello World!

This is my first CSS example