Хотя сегодня на наших сайтах можно найти множество различных технологий, двумя наиболее важными файлами во всем Интернете являются HTML и CSS. Да, если вам нужно что-то сложное, вам также понадобятся дополнительные технологии. Но если все, что вам нужно, — это создать простую личную веб-страницу, HTML и CSS — это все, что вам нужно.
Основы
Это руководство для начинающих по HTML и CSS, которое покажет вам, как максимально быстро создать простой сайт. Результаты не обязательно будут «соответствовать стандартам». И вам придется почитать самостоятельно, если вы хоти
Contents
Основы
ельно настроить и расширить. Но это будет сайт и он будет работать «как надо» в большинстве браузеров.Поскольку пространство имеет большое значение, мы не будем слишком углубляться в каждый аспект веб-разработки и дизайна. Вместо этого мы покажем вам, как перейти от нуля к полностью работающей веб-странице, объяснив, что происходит в этом процессе.
Два необходимых файла
Современный сайт состоит из множества файлов, но наиболее важными являются два: файл HTML и CSS. HTML-файл определяет элементы и структуру страницы. Файл CSS определяет внешний вид этих элементов.
Оба файла по сути являются типичными текстовыми файлами, содержащими специфически структурированный текст. Для их создания или настройки вам не нужна какая-либо специальная программа: подойдет любой «простой» текстовый редактор. Под «простым» мы подразумеваем обычное приложение в стиле блокнота, а не что-то вроде редактора LibreOffice или Microsoft Words, которые могли бы каким-либо образом «обогатить» текст.
Первый шаг — создать на рабочем столе новую папку с двумя пустыми текстовыми файлами внутри. Назовите один из них «index.html», а второй «style.css».
Настройте свое рабочее пространство
Запустите свой любимый браузер и загрузите в него HTML-файл, выбрав «Файл ->Открыть» или перетащив файл в его окно.
Откройте файл HTML и CSS в своем любимом текстовом редакторе типа блокнота.
Возможность просматривать все три окна одновременно — самый удобный способ работы. Если у вас нет двух экранов, чтобы их распределить, рекомендуем расположить окна так, как показано на рисунке ниже.
Прикрепите окно браузера к одной стороне экрана, чтобы оно заняло половину его (по вертикали)4, и разместите два окна блокнота на другой стороне, одно под другим.
Строительные блоки
Напишите что-нибудь в блокноте с HTML-файлом и сохраните изменения. Затем обновите окно браузера, нажав F5. Вы сразу увидите написанный вами текст в окне браузера.
Поздравляем с созданием вашего первого сайта! И мы не шутим, поскольку первые сайты в Интернете мало чем отличались своим внешним видом от того, что вы только что создали. В то время важным был сам контент.
HTML позволяет «размечать каждую часть контента», используя определенный набор «кодов». Некоторые из наиболее важных:
html: обозначает HTML-документ. Должен быть в начале каждого HTML-файла.body: весь контент, который вы видите в браузере, заключен в этот тегbody. Он представляеНастройте свое рабочее пространство
>p: текстовый абзац.img: Изображенияa href: Ссылки на веб-адреса.div: устанавливает «рамку» вокруг любого фрагмента контента, который затем можно «стилизовать» с помощью CSS.
Чтобы «определить» часть контента, она обычно должна быть заключена в один и тот же код с небольшим различием в начале и конце. Например, абзац текста определяется как:
<p>Standard Text Paragraph</p>
«
» означает, что «следующее является абзацем», а «
» означает, что «абзац заканчивается здесь». Заменяя «p» на «div» в обоих случаях, вы определяете поле, заключающее в себя содержимое, а не «отмечаете его как абзац».
Обратите внимание, что есть исключения: такие элементы, как изображения (img) и разделительные линии (hr), не требуют «закрывающего кода».
Изменить и обновить
Замените все в HTML-файле следующим:
&Строительные блоки
pan>
<body>
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>
Обновите браузер (F5), и вы увидите, что слова HEADER, CONTENT и FOOTER появляются одно под другим. Мы только что создали три невидимых автономных блока div. Каждый из них содержит одно из слов.
Чтобы иметь возможность определять их внешний вид с помощью CSS, мы присвоили каждому ключевое слово, «идентификатор» («id=name» в коде), соответствующее их содержимому: верхнему, содержанию и нижнему колонтитулу. Все элементы на веб-странице могут иметь такой псевдоним, установленный как «класс» или «идентификатор». Классы определяют псевдонимы для элементов, которые появляются несколько раз на одной веб-странице, например абзацев, ссылок и т. д. Идентификаторы определяют псевдонимы для элементов, которые появляются на каждой странице только один раз, например названия или логотипа сайта.
Реальный контент
Удалите слово «HEADER» между кодами div, не меняя их структуру, и вместо этого введите имя, которое вы хотите для своего сайта.
Сделайте то же самое для «СОДЕРЖИМОГО», но вместо простого ввода текста обязательно «отметьте» начало и конец каждого абзаца, как мы видели ранее. Замените «СОДЕРЖАНИЕ» двумя или тремя абзацами текста.
Пришло время поговорить и о ссылках. Чтобы преобразовать любую фразу в тексте в ссылку, структурируйте ее следующим образом:
<a href="ADDRESS">TEXT</a>
Вы можете скопировать и вставить это и заменить «АДРЕС» на «на что вы хотите, чтобы ваша ссылка указывала», а «ТЕКСТ» на фразу, которая будет отображаться на вашем сайте. Мы связали фразу в нижнем колонтитуле с нашим веб-сайтом следующим образом:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
Наконец, замените слово «FOOTER» своим именем — небольшим предложением, указывающим, кто разработал или владеет сайтом, или чем-то еще, что вы хотите.
Сохраните изменения и обновите браузер, чтобы увидеть их.
У вас есть стиль (.CSS)
Первым элементом любой веб-страницы является заголовок. В нем мы обычно находим код, определяющий личность сайта, его имя, создателя и язык, а также любые технологии – кроме HTML –, используемые в нем. Здесь находится большинство ссылок на любые внешние файлы JavaScript и CSS. Добавьте его на свой сайт, вставив следующее в самый верх HTML-файла, сразу после тега html:
<head> </head>
Чтобы иметь возможность стилизовать элементы веб-страницы с помощью CSS, вам необходимо загрузить файл CSS из HTML. А это значит включить это в свою «голову». Следующее указывает, что HTML-страница будет «ссылаться» на файл «таблицы стилей» типа «text/css». с именем «style.css»:
<link rel="stylesheet" type="text/css" href="style.css">
Скопируйте и вставьте наш код, как вы его видите, «внутри» головы – то есть под «» и над «». Сохраните изменения и обратите внимание на файл CSS. Там введите следующее:
body {} #header, #content, #footer {} #header, #footer {} #header {} #content {} #footer {} img {}
Настоящий сайт
CSS или каскадные таблицы стилей — это просто наборы правил отображения, которые соответствуют конкретным элементам веб-страницы. С помощью CSS мы можем задать как «где», так и «как» все будет отображаться на веб-странице.
На предыдущем шаге мы ввели набор пустых правил для всех элементов на нашей странице. Теперь давайте посмотрим, как можно добавить к ним параметры, которые будут определять их внешний вид.
Начните с тела, которое включает в себя все, что есть на вашем сайте. И
Реальный контент
азом:body { width: 100%; position: relative; margin: 0; padding: 0; }
Приведенные выше правила гласят, что мы хотим, чтобы наш сайт занимал всю ширину окна браузера (ширина: 100%), что мы не хотим, чтобы он находился на каком-либо расстоянии от краев окна браузера (поле: 0), и не хотите, чтобы вокруг него было пустое пространство (отступ: 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,У вас есть стиль (.CSS)>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-файлу. Там, «внутри» контента, но перед первым абзацем, введите следующее:
<img src="/PATH/FILE.JPG" alt="TEXT">
Где «ПУТЬ» и «ФАЙЛ.JPG» — это «местоположение» и имя файла любого изображения, доступного в Интер
Настоящий сайт
ЕКСТ» — описание того, что оно представляет в целях доступности.
Если вы попытаетесь сохранить и проверить изменения после этого дополнения, вы обнаружите, что ваш сайт деформирован. Проблема будет решена, как только вы создадите правила CSS для отображения изображений на вашем веб-сайте.
Вернитесь к файлу CSS и укажите, как вы хотите, чтобы все изображения (img) были выровнены по левому краю, следуя порядку других элементов (float: слева и позиция: относительно).
Чтобы не выходить за границы страницы, укажите, чтобы их ширина была максимальной ширины самой страницы (ширина: 100%). Чтобы изображения не касались текста, добавьте вертикальные поля сверху и снизу. Результат должен выглядеть так:
img { float: left; position: relative; width: 100%; margin: 5px 0; padding: 0; }
В завершение добавьте еще одно изображение, на этот раз выровненное по левому или правому краю. Как и раньше, вам следует сначала вернуться к HTML-коду и вставить туда ссылку на свое изображение, как мы видели ранее. Разница в том, что вам нужно будет добавить к элементу «класс», идентификатор. Затем вы укажете с помощью CSS правила отображения для него и любых других элементов, к которым «прикреплен» тот же класс.
Мы назвали наш класс «alignright», поскольку хотим, чтобы любой объект, к которому он прикреплен, отображался в правой части страницы.
Попробуйте создать код самостоятельно. Добавьте класс .alignright {}в свой «style.css», а затем создайте правила, которые будут его стилизовать. В коде CSS должно быть указано, что мы хотим, чтобы элементы располагались в правой части страницы и имели ширину 46 % (ширина: 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
