Читать лучше всё по порядку, с мобильного телефона, т.к именно под него и ввелась разработка. Части предоставлены слева на право.
Моя работа на GitHub: ссылка
Ссылка на сам сайта: ссылка
Оставить отзыв можете в telegram: @TesarBlessed
Пишу код я на Visual Studio Code, но вы можети использовать любую другую среду.
Код мы будем писать на Html с оформлением в css, начнем по порядку.
Возьмем из вики: HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.
Если быть кратким, html это файл с кодом задающий строительные блоки. Весь текст хранится в html файле. Html это фундамент статичного сайта.
Опять же определение из гугла:CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык декодирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML).
И сново кратко. Css это файл оформления, в нем хранится код определяющий задний фон, цвет текста, табы и всё оформление. Без него бы страница выглядела так:
Для телефонов можно использовать mimo
Прямая подготовка
Для ПК:
1. Скачать Visual студию, либо любой другой удобный для вас редактор2. Если у вас студия, то создать файл HTML (*ваше название*.html) и файл CSS (*ваше название*.css)
3. Открыть Html файл через студию/открыть файл блокнота двумя кликами левой кнопки мыши
4. Перейти в следущий пункт (Написание)
Для телефонов:
1. Скачать mimo с магазина приложений (Google Play)2. Зарегистрироваться
3. В нижнем меню зайти в Practice
4. Далее в Playgrounds нажать Get started
5. Выбрать Static website
6. Удалить заготовленый код в index.html и зажав в верхнем меню пальцем таб script.js дождаться появления меню снизу, нажать delete file
7. Перейти в следущий пункт (Написание)
Cамое начало
Сразу хочу сказать, что если у вас есть уже опыт написания и заготовку для сайта вы можете сделать сами, то вы можете пропустить эту часть
Сейчас перед вами считай чистый лист, вам же нужно напротив, написать на нем сайт, это будет не настолько сложно как вы можете подумать, начнем опять же по порядку.
Пошагово:
1. Мы покажем браузеру что наш сайт написан на HTML, для этого нам надо ввести:
<!doctype HTML>
2. Теперь когда браузер знает как читать наш сайт нам надо начать сделать его самого. Для это пишем теги html:
<html> и </html>
почти каждый тег имеет свою закрывающую часть, мы так показываем от куда до куда должен применятся тег.
3. Нам нужно открыть головной тег и закрыть, он выглядит так:
<head></head>
этот тег должен быть между html тегами, тег head задает место для головных тегов: название сайта, показание где файл CSS и подобное.
4. Создаем между тегами head:
<title>название вашего сайта</title>
эти два тега задают название страницы, как она будет подписана по переходе по ссылке или же вверху браузера, в вкладке, между этими тегами напишите желаемое название.
5. Теперь нам надо задать файл css, пока что это никак не связанные отдельный файл, для связи мы используем команду:
<link rel="stylesheet" href="название вашего css файла.css">
6. Мы задали невидимую часть нашего сайта, сейчас же мы должны начать писать что-то на самой странице, для этого пишем два тега между Html тегами:
<body></body
Между этими тегами мы и будем писать содержание.
К этому шагу у нас должно быть что то наподобие:
7. Если у вас такой же код то продолжаем, далее мы пишем между тегов body само содержание, о возможных командах вы можете найти в mimo обучение, но я приведу минимальный довольно легкий сайт для примера, и так между тегами body мы пишем:
<h1 id="Заглавление">Ваше заглавление<h1>
После него пишем тег:
<br>
Тегом h мы создаем обозначение текста и его размера от 1 до 6, далее у нас идет дополнение команды командой id="" это как надпись на коробке, поможет нам в будущем для указание именно на эту переменую. А тег br стоит что бы этот текст не слипся со следущим
8. Далее ниже мы пишем тег:
<p id="Текст">Любой текст, основной массив информации<p>
Это еще один тег для показа текста, в нём напишите любой нужный текст, чтобы текст шёл на другую строчку можно использовать тег:
<br>
Он переносит текст/фото на следущию строчку
9. Теперь я вам покажу как вставлять картинку, вы должны найти желаемую и скопировать её url адрес, далее написать:
<br> для отделенеие от прошлого текста
<img src="url ссылка на изображение" id="Картинка">
НО
В данном случае сайт будет выглядит слишком просто:
Тут вступает в игру CSS, на нем будет держаться всё оформление и для него мы почти каждому элементу давали подпись(id=""), теперь переключаемся на файл css.
План написания css:
1. Тут я разделю на конкретные теги которые мы будем оформлять, первым будет общие оформление, но для начала сверьтесь с моим файлом, html файл у вас должен выглядеть примерно так же, а id индентично:
2. После проверки перейдем к написанию, заходя в css файл у вас должно быть пусто, начнем мы с оформления всего сайта, а именно тега body, сделаем задний фон, выглядеть это будет так:
body{background-rgb(55, 88, 88);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color:aliceblue;}
первый тег ставит задний фон, в виде цвета, rgb вы можете изменить под свои хотелки, 2 тег фиксирует фотку что бы она не листалась вместе с страницей, а 3 тег растягивает её корректно, 4 тег color задает цвет текста
Следущим шагом мы украсим "Заглавление", это будет выглядеть так:
#Заглавление{text-align: center;}
#Заглавление мы пишем для показа на что применять это оформление text-align: center задаёт расположение надписии, в нашем случие выравнивание по центру
3.Следущие что мы будем "пытать" с помощью css будет text, выглядеть это будет так:
#text{
background-color: #000000;
border-radius:0.375rem;
padding: 1rem;
}
и опять разбор, background-color задает цвет за текстом. border-radius задает округление. padding это отступление. Ваш css код должен выглядеть так:
А сам сайт будет выглядеть так:
Когда наиграетесь с оформлением и содержанием можно перейти к следущему шагу
Выставление
этот таб мы поделим на две части:
1. Часть для пользователей с мимо
2. Часть для людей пишущих на ПК
Для пользователей mimo:
1.Заходим в browser в верхнем меню
2.Нажимаем на кновку которая левее url вашего сайта
3.У вас должно снизу вылезти меню, выбираем удобный способ отправки
4.После отправки копируем ссылку, и вот у вас ссылка на сайт
Для пользователей пк:
Лично для меня это был самый сложный этап. Получить свой домен и подобное очень сложно и платно, так что легче использовать сервисы хостинга при форумах, если у вас небольшой проект вам большего не нужно. И опять же по шагам:
1. Зайти в браузер
2. Зайти на сайт гитхаба: https://github.com/
Это форум с возможностью хостинга своих проектов.
3.В правом верхнем углу sing up
4.После регистрации вверху нажимаем на плюсик, там выбираем "new repository"
5.В новом окне в "Repository name" задаём имя репозита, любое, желательно на английском, бегунок "add README" перевести в ON, далее "Create repository"
6.Сейчас перед вами окно вашего репозита, он пока пустой. Нажимаем на плюс возле зелёной кнопки, там нажимаем на "Upload files" и переносим свои html, css файлы, после загрузки нажимаем "Commit changes"
7. Загрузив нажимаем на "Settings", там в левом меню "Pages", дальше в "Branch" выбираем "main" и сохраняем "save". Теперь ждём, обновляя страницу
8.У вас сверху должна появится рамка с сайтом и кнопкой "visit site", это ссылка на основную вашу страницу, но вам нужен html файл, для этого после "https://tesarblessed.github.io/testing/" пишем название html файла, например:
в конце main.html
9.Теперь у вас на руках есть ссылка на ваш сайт, поздравляю!