Руководство для начинающих по HTML и CSS

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

Введение в основы

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

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

Два необходимых файла

Современный сайт состоит из множества файлов, но два из них являются наиболее важными: файл HTML и файл CSS. Файл HTML определяет элементы и структуру страницы. Файл CSS определяет внешний вид этих элементов.

Оба файла по сути являются обычными текстовыми файлами, содержащими специально структурированный текст. Вам не нужно никакое специальное программное обеспечение, чтобы создать или изменить их: подойдет любой “простой” текстовый редактор. Под “простым” мы имеем в виду ваше типичное приложение в стиле блокнота, а не что-то вроде редактора LibreOffice или Microsoft Word, которые могут “обогатить” текст любым образом.

Первый шаг — создать новую папку на рабочем столе с двумя пустыми текстовыми файлами внутри. Назовите один из них “index.html”, а второй “style.css”.

Настройка рабочего пространства

Запустите ваш любимый браузер и загрузите в него файл HTML, выбрав “Файл -> Открыть” или перетащив файл в его окно.

Откройте оба файла HTML и CSS в вашем любимом текстовом редакторе в стиле блокнота.

Возможность видеть все три окна одновременно — самый удобный способ работы. Если у вас нет двух экранов, чтобы разместить их, мы рекомендуем расположить окна, как на нашем изображении ниже.

“Прикрепите” окно браузера к одной стороне экрана, чтобы оно занимало половину экрана (вертикально), и разместите два окна блокнота на другой стороне, одно под другим.

Строительные блоки

Напишите что-то в блокноте с файлом HTML и сохраните изменения. Затем обновите окно браузера, нажав F5. Вы сразу увидите текст, который вы написали, появившимся в окне браузера.

Поздравляем с тем, что вы только что настроили свой первый сайт! И мы не шутим, так как первые сайты в Интернете не сильно отличались по своему внешнему виду от того, что вы только что создали. Важно было само содержание.

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

• html: Обозначает html документ. Должен быть в начале каждого html файла.
• body: Весь контент, который вы видите в браузере, заключен в этот тег body. Он представляет визуальный аспект html документа.
• p: Параграф текста
• img: Изображения
• a href: Ссылки на веб-адреса
• div: Устанавливает “коробку” вокруг любого элемента контента, которую вы затем можете “стилизовать” с помощью CSS.

Чтобы “определить” элемент контента, его обычно нужно заключить в один и тот же код с небольшим различием в начале и конце. Например, параграф текста определяется как:

Стандартный текстовый параграф

“

” указывает на то, что “то, что следует, является параграфом”, а “

Обратите внимание, что есть исключения: такие элементы, как изображения (img) и разделительные линии (hr), не требуют “закрывающего кода”.

Измените и обновите

Замените все в вашем HTML файле на следующее:

  
  
ЗАГОЛОВОК
  
СОДЕРЖИМОЕ
  
Нижний колонтитул
  
  

Обновите ваш браузер (F5), и вы увидите слова ЗАГОЛОВОК, СОДЕРЖИМОЕ и НИЖНИЙ КОЛОНТИТУЛ, появляющиеся одно под другим. Мы только что создали три невидимые, автономные “div” коробки. Каждая из них содержит одно из слов.

Чтобы иметь возможность определить их внешний вид через CSS, мы присвоили каждому из них ключевое слово, “идентичность” (“id=name” в коде), соответствующую их содержимому: заголовок, содержание и нижний колонтитул. Все элементы на веб-странице могут иметь такой псевдоним, установленный как “класс” или “id”. Классы определяют псевдонимы для элементов, которые появляются несколько раз на одной и той же веб-странице, таких как параграфы, ссылки и т. д. ID определяют псевдонимы для элементов, которые появляются только один раз на каждой странице, таких как название сайта или логотип.

Реальный контент

Удалите слово “ЗАГОЛОВОК” между кодами div — не меняя их структуру — и вместо этого введите название, которое вы хотите для вашего сайта.

Сделайте то же самое для вашего “СОДЕРЖИМОГО”, но вместо того, чтобы просто ввести текст, также убедитесь, что вы “размечаете” начало и конец каждого параграфа, как мы видели ранее. Замените “СОДЕРЖИМОЕ” на два или три параграфа текста.

Теперь пришло время также поговорить о ссылках. Чтобы преобразовать любую фразу в вашем тексте в ссылку, структурируйте ее как:

ТЕКСТ

Вы можете скопировать и вставить это и заменить “АДРЕС” на “то, на что вы хотите, чтобы ваша ссылка указывала”, а “ТЕКСТ” на фразу, которая появится на вашем сайте. Мы связали фразу в нашем нижнем колонтитуле с нашим веб-сайтом следующим образом:

Сделать технологии проще

Наконец, замените слово “НИЖНИЙ КОЛОНТИТУЛ” на ваше имя, небольшое предложение, указывающее, кто разработал или владеет сайтом, или что-то еще, что вы хотите.

Сохраните изменения и обновите ваш браузер, чтобы увидеть их там.

У вас есть стиль (.CSS)

Первый элемент любой веб-страницы — это заголовок. В нем обычно находится код, который определяет идентичность сайта, его название, создателя и язык, а также любые технологии — помимо HTML — используемые в нем. Именно там находятся большинство ссылок на любые внешние JavaScript и CSS файлы. Добавьте один к вашему сайту, вставив следующее в самом верху вашего HTML файла, сразу после тега html:

Чтобы иметь возможность стилизовать элементы веб-страницы с помощью CSS, вам нужно загрузить файл CSS изнутри HTML. А это означает, что нужно включить его в ваш “head”. Следующее указывает, что HTML страница будет “ссылаться” на файл “стилей”, типа “text/css”, названный “style.css”:

Скопируйте и вставьте наш код, так как вы его видите, “внутрь” заголовка — то есть под “” и над “”. Сохраните изменения и обратите внимание на файл CSS. Там введите следующее:

body {}  
#header, #content, #footer{}  
#header, #footer{}  
#header{}  
#content{}  
#footer{}  
img {}

Реальный сайт

CSS, или каскадные таблицы стилей, — это просто наборы правил отображения, которые соответствуют конкретным элементам веб-страницы. С помощью CSS мы можем стилизовать как “где”, так и “как” все будет отображаться на веб-странице.

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

Начните с body, который включает все на вашем сайте. Измените его следующим образом:

body {  
width:100%;  
position:relative;  
margin:0;  
padding:0;  
}

Вышеуказанные правила указывают, что мы хотим, чтобы наш сайт занимал всю ширину окна браузера (width: 100%), что мы не хотим, чтобы у него было расстояние от краев окна браузера (margin: 0) и не хотим, чтобы вокруг него было пустое пространство (padding: 0).

Все правила для элемента должны быть заключены между фигурными скобками, и каждое правило должно заканчиваться “;” как в следующем:

#Element_ID{  
RULE 1;  
RULE 2;  
RULE 3;  
}

Продолжите, обновив ваш CSS для “#header, #content, #footer” на следующее:

#header, #content, #footer{  
float:left;  
position:relative;  
}

С этим вы говорите, что все три элемента должны следовать некоторым общим правилам: каждый должен быть “относительным” к предыдущему и “следовать” за ним (float: left). Независимо от их размера, формы, внешнего вида или любого другого фактора, каждый из них будет “толкать” следующий элемент, и они никогда не будут накладываться.

Обновите #header, #footer следующим образом, чтобы сделать вашу веб-страницу более похожей на настоящий сайт:

#header, #footer{  
width:100%;  
height:100px;  
background:rgba(0,0,0,0.9);  
color:rgba(255,255,255,0.9);  
text-align:center;  
font-size:12px;  
}

Вышеуказанное определяет, что мы хотим, чтобы и заголовок, и нижний колонтитул нашего сайта были шириной 100%, высотой 100 пикселей, а текст, отображаемый в них, был 3em в размере и по центру.

Правила фона и цвета указывают, соответственно, какой цвет будет у всего заголовка и нижнего колонтитула “div box” и цвет любого текста, содержащегося в них. “RGBA” устанавливает цвет на основе стандарта смешивания цветов Красный — Зеленый — Синий. Каждый цвет может иметь значение от 0 до 255, при этом комбинации различных значений Красного, Зеленого и Синего позволяют отображать любой цвет. Последнее число соответствует прозрачности. Таким образом, RGBA(255,0,0,0.5) даст нам полупрозрачный красный, в то время как RGBA(50,50,255,1) даст яркий и “сплошной” синий.

Закончите, сосредоточившись на основном содержании сайта. Определите его внешний вид как:

#content{  
width:80%;  
background:rgba(255,255,255,0.9);  
color:rgba(0,0,0,0.9);  
margin:0 10%;  
}

Сохраните все изменения снова и обновите окно браузера, чтобы увидеть их.

Стилизация изображений

Чтобы добавить изображения на ваш сайт, вам нужно вернуться к файлу HTML. Там, “внутри” содержимого, но перед первым параграфом, введите следующее:

Где “PATH” и “FILE.JPG” — это “местоположение” и имя файла любого изображения, доступного как онлайн, так и локально, а “TEXT” — это описание того, что оно представляет для целей доступности.

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

Вернитесь к файлу CSS и объявите, как вы хотите, чтобы все изображения (img) были выровнены по левому краю, следуя потоку других элементов (float: left и position: relative).

Чтобы не выходить за границы страницы, укажите, как вы хотите, чтобы их ширина была максимальной ширины самой страницы (width: 100%). Чтобы избежать соприкосновения изображений с вашим текстом, добавьте немного вертикального отступа сверху и снизу. Результат должен выглядеть так:

img {  
float:left;  
position:relative;  
width:100%;  
margin:5px 0;  
padding:0;  
}

Завершите, добавив еще одно изображение, на этот раз выровненное по левому или правому краю. Как и прежде, вам нужно сначала вернуться к коду HTML и вставить ссылку на ваше изображение там, как мы видели ранее. Разница в том, что вам нужно будет добавить “класс”, идентификатор к элементу. Затем вы укажете через правила CSS, как его отображать и любые другие элементы, к которым тот же класс “прикреплен”.

Мы назвали наш класс “alignright”, так как мы хотим, чтобы любой объект, к которому он прикреплен, отображался с правой стороны страницы.

Попробуйте создать код самостоятельно. Добавьте класс .alignright {} в ваш “style.css” и затем создайте правила, которые должны его стилизовать. CSS код должен указывать, что мы хотим, чтобы элементы плавали к правой стороне страницы и имели ширину 46% (width: 46%). Мы не хотим, чтобы изображения соприкасались с текстом, поэтому мы также должны добавить 2% зазора вокруг них, разделив его на 1% отступа (расстояние от любого другого элемента) и 1% внутреннего отступа (некоторое “дополнительное пустое пространство вокруг элемента”).

Таким образом, наши правила должны определить, что любое изображение с прикрепленным классом .alignright займет 46% ширины страницы, плюс 1% отступа с каждой стороны, плюс 1% внутреннего отступа с каждой стороны. Все это в сумме составляет 50% — ровно половину ширины страницы. Результат должен выглядеть примерно так:

img.alignright{  
float:right;  
width:46%;  
margin:1%;  
padding:1%;  
}

Следующая страница

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

Это не звучит слишком сложно, не так ли? Добро пожаловать в веб-разработку: копируя, изменяя и связывая разные страницы через ссылки, вы создадите свой первый полный, “правильный” многостраничный сайт!

Кредит изображения: Плюшевые котята, Плюшевые котята, IMG_20171124_142629