Hostwinds Учебники
Результаты поиска для:
Содержание
Как создать собственную целевую страницу с помощью HTML и CSS
Теги: Web Site
Это руководство узнает, как создать основную «под строительство страницы посадки, используя HTML и CSS.
Чтобы создать страницу посадки, вам необходимо будет иметь текстовый редактор, либо тот, который предусматривает в вашем файловом менеджере CPanel, Notepad ++, или любой текстовый редактор по вашему выбору будет работать нормально, чтобы следовать в этом руководстве.Если вы используете панель управления, такие как CPANEL, вы добавите эти файлы на ваш каталог public_html или root документа для вашего доменного имени.Если вы не используете панель управления, вы, скорее всего, добавят эти файлы в ваш / var / www / html, хотя расположение корня документа вашего домена может варьироваться.
Создание файла вашего сайта
Давайте начнем с создания файла index.html и откройте его в текстовом редакторе.
Почему индекс?
Способ установки Apache в вашей папке домена (или public_html) он читает ваш directoryindex такой как index.htm, index.html или index.php, если эти файлы существуют и обслуживают этот файл как домашнюю страницу вашей папки.Если нет ни одного из этих файлов, то он покажет листинг индекса.Вы можете изменить свой индекс каталога через файл .htaccess.
Ваш HTML по существу является структурой страницы вашего сайта, поэтому вам нужно будет убедиться, что она будет правильно настроена.
Для этого примера вам нужно будет определить HTML-скрипт, заголовок и тело.Вы можете сделать это, используя следующие «теги»
<html>
<head></head>
<body></body>
</html>
Теги - это то, как мы определяем разные элементы в нашем HTML-документе и вообще попадают в пары.Большинство тегов будут иметь начало \ <> и конец \, некоторые теги не будут иметь второй тег и закончится с помощью a /> это называется «пустой элемент», в основном видел по ссылкам и изображениям.
Главный тег
Именно здесь вы храните данные, которые не являются контером, такими как метаданные сайта, заголовок документа, набор символов, встроенные стили, ссылки сценария и другую мета-информацию.Мы будем использовать два разных тега в нашей голове:
Тег заголовка - этот тег изменит то, что отображается на вкладке
Тег ссылки - это то, где вы прикрепите любой внешний стиль или скрипты.Мы будем использовать это, чтобы добавить таблицу стилей на наш сайт
Тег тела
Именно здесь будет идти контент вашего сайта.Если бы мы хотели, мы сможем добавить тесты напрямую.Например, если мы добавим «Hello World!»В нашем HTML это будет выглядеть так:
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
Вот как будет выглядеть веб-страница после добавления этого кода и посещения вашего доменного имени в браузере:
Далее давайте подключим таблицу стилей в вашем HTML.Как мы упомянули выше, вы можете прикрепить таблицу стилей, добавив ссылку на стилью-таблицу к главе вашего документа HTML.После того, как вы закончите, он должен выглядеть так:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
</body>
</html>
Добавить контейнеры и контент
Чтобы помочь лучше организовать свой контент, вы можете использовать теги, чтобы указать различные объекты, такие как контейнеры, изображения, заголовки и т. Д. Вы будете называть эти разные теги позже в своем стиле.
Для этого примера я буду использовать контейнер Div и \
а также \
теги.
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div>
<h1>This Site is Under Construction</h1>
<p>Content Coming December 2018</p>
</div>
</body>
</html>
Вот как будет выглядеть веб-страница до того, как мы добавим ее в таблицу стилей:
Добавление стиля на ваш сайт
Создайте и отредактируйте свою таблицу стилей «CSS.CS»
Теперь давайте создадим файл .css.Это должно соответствовать имени файла выше, поэтому наш пример - CSS.CSS.Вы можете вызвать различные элементы, которые вы пометили через теги в вашем HTML-документе в своем стиле.
В этом примере у нас есть 4 разных элемента: тело, Div, H1 и p. Ниже мы можем видеть, как вы можете использовать эти теги, чтобы изменить фон, отменить его и изменить размер текста. Мы также продемонстрируем, как добавить текстовую тень, чтобы помочь с ясностью.
Вот наш файл CSS.css:
body {
background-image:url('background-background-image-blue-sky-1054218.jpg');
background-size: 100%, 100%;
}
div {
font-family: verdana;
color:black;
text-align: center;
margin-top:250px;
}
h1{
text-align:center;
font-size: 75px;
margin:0px;
padding:0px;
text-shadow: 2px 1px 1px grey;
}
p{
font-size: 40px;
text-shadow: 1px 1px 3px lightgrey;
}
Есть много разных атрибутов, которые вы можете добавить в свою таблицу стилей. В этой статье мы просто охватывали несколько основных вариантов.
Многие разные свойства требуют немного другой структуры в зависимости от того, что она меняется.
Протестируйте свой сайт
Теперь вы можете проверить свою новую посадочную страницу!Если вы еще не указали свой домен на ваш хостинг, вы можете использовать сайт тестирования, например Hosts.CX или выделенный IP-адрес, чтобы просмотреть свой сайт.
Написано Hostwinds Team / Ноябрь 24, 2018