Статья - 01
"Создание простой веб странички"
(23.04.2019)
Всем привет!В качестве первой статьи я хочу написать о том, как я сделал этот блог.
Здесь нам понадобятся только html и css.
HTML(Hyper Text Markup Language) или (язык гипертекстовой разметки) - это стандартный язык разметки,
с помощью которого можно создавать веб-страницы и веб-приложения.
Но для чего-то большего, такого как браузерная игра, придется истользовать другие языки, такие как JavaScript или PHP.
А для внешнего вида и дизайна нужен CSS (Cascading Style Sheets),
ну или JS-анимации.
Идея сделать свой блог о своем обучении программированию, для контроля своего развития и
успехов, а также закрепления знаний и лучшего понимания программирования, исходила от
моего отца, который также программист.
И примерно в то же время я получил приглашение от моей компании на курс по html.
До этого курса я уже немного использовал html, js и css.
Наверное, это было первое, что я начал изучать.
Но я написал код css с html в том же документе под тегом <style>.
Как это:: }
<style type="text/css">
.websiteprogression{
background-color: grey;
}
p{
text-align: left;
margin: 0px 80px 10px;
}
</style>Но если ваш код не очень большой, вы можете написать свой код стиля в HTML-файле.
Первое, о чем следует задуматься при создании сайта - это дизайн, который придумывается, с оглядкой на назначение сайта.
Я могу и мне нравится рисовать,
но несмотря на это, вы можете заметить, что в первые попытки были далеки от звания
«привлекательного» оформления сайта.
Здесь вы можете увидеть прогресс становления внешнего вида сего блога.
Первая версия была такой плоской и монохромной, в плохом смысле этого слова.
(А мне как художнику не нравится слишком много белого цвета на экране).
Понятное дело, что иногда минималистичный дизайн потрясающий, как на пример браузер Google Chrome.)
но в основном это отсылка к 80-90, когда компьютеры были слабыми, интернет не популярным, а JavaScript вообще еще не изобрели.
Теперь о коде.
Мой сайт по реализации очень прост и состоит из не очень большого обьема кода.
Файлы с именем index (index.html или index.php) по умолчанию являются главной страницей сайта на хостинге,
то есть хостинг вызывает index файл.
Код главной страницы:
<!DOCTYPE html>
<html type="en">
<head>
<title>Programming Blog - Main</title>
<link rel="stylesheet" href="list.css" />
<link rel="shortcut icon" href="logo16x16e.png" type="image/x-icon"> <!-- Иконка на вкладке браузера -->
<h1>Programming Blog</h1>
<img src="logo.png" alt="Logo">
</head>
<body>
<header>
<div id="list">
<nav>
<ul>
<li><a href="index.html">Главная</a></li> <!-- меню -->
<li><a href="blog.html">Блог</a></li>
<li><a href="aboutme.html">Обо мне</a></li>
</ul>
</nav>
</div>
</header>
<main>
<p>Добро пожаловать, аргонавты интернета,<br>
на мой сайт о программировании!<br>
Здесь я пишу что я узнал и выучил в данной сфере.<br>
</p>
<p>Хорошего дня!</p>
</main>
</body>
<footer>
<script>
</script>
</footer>
</html>
В html коде очень важно закрывать тэги, а также в html файле важно, чтобы весь код был между тегами (открывающий тег) ваш код (закрывающий тег).
HTML-страница обычно разделена на 2 или 3 части: body, head и footer.
- <head> используется для помощи браузеру в считывании информации со страницы, содержащей мета теги.
- <body> для содержимого веб-страницы.
- <header> похож на footer, здесь вы можете сделать меню сайта, как я.
- <footer> это просто нижний колонтитул веб-страницы, где вы можете написать, например, о создателе или дате.
site scc styles:
<link rel="stylesheet" href="list.css" />Загаловок:
<title>Programming Blog - Blog</title>--------------------------------------------------------------------------------------
Или иконка:
<link rel="shortcut icon" href="logo16x16e.png" type="image/x-icon">--------------------------------------------------------------------------------------
В body находится все после вкладок браузера.
Здесь вы работаете над наполнением вашего сайта.
Слишком мало места, чтобы писать обо всех функциях HTML здесь,
поэтому я написал только о навигационное меню, которое вы можете в верхней части страницы.
Мое меню — это просто список ссылок на другие страницы:
<header>
<div id="list">
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="blog.html">Блог</a></li>
<li><a href="aboutme.html">Обо мне</a></li>
</ul>
</nav>
</div>
</header>С дочерним элементом <li> в качестве одной строки списка.
А тег <a> создает ссылку с атрибутом href="адрес".
Так выглядит список <ul> без scc:
<ul>
<li>сера</li>
<li>пепел</li>
<li>огонь</li>
</ul>- сера
- пепел
- огонь
Пронумерованный список с <ol>:
<ol>
<li>сера</li>
<li>пепел</li>
<li>огонь</li>
</ol>
<ol start = "100">
<li>сера</li>
<li>пепел</li>
<li>огонь</li>
</ol>- сера
- пепел
- огонь
- сера
- пепел
- огонь
nav ul {
margin: 0; /*Устанавливает значение полей вокруг содержимого элемента. Здесь без отступов.*/
padding: 0; /*Устанавливает количество отступов от каждого края элемента. Здесь тоже без.*/
text-align: center; /*Текст в div должен быть посередине.*/
}
nav li { /*Как будет отображаться <li>*/
display: inline;
}
nav li a {
display: inline-block;
text-decoration: none;
color: #FFFFE0;
padding: 1rem 1rem;
}И на десерт,
Если вы наведите курсор на меню, то вы сможете увидеть,
что этот сектор изменил цвет на красный.
Для этого эффекта нам нужно задействовать псевдокласс :hover :
nav li a:hover {
background-color: #c21525; /*Изменить цвет фона на красный.*/
border: 2px double black; /*Изменить дизайн границ.*/
}Поздравляю, вы создали свой первую страничку!
Теперь вы можете его залить на хостинг и у вас будет свой персональный сайт!
Конечно он простой, но для начала неплохо, сайт с меню и ссылками.
В бедующем вы сможете сделать гораздо больше,
использовать JavaScript или CSS-анимацию и также много-много других технологий.
Экспериментируйте!
Удачи!
И увидимся!
