Запиши сайт в блокнот: вёрстка на html

Привет, драгоценные читатели блога!

Полагаю, что вряд ли осознанный и целеустремлённый человек будет всерьёз заявлять, что не хотел бы овладеть новыми диалектами. Рассказать о себе, а, значит, и о своём творчестве или бизнесе онлайн – значит, заговорить на языке программирования, придумав и реализовав собственный сайт.

И сейчас таковым уже сложно удивить, ведь на каждого седьмого землянина доводится веб-страница.
Предположу, что многие, дочитав до этого места, уже начали позевывать, подумав про себя: «Так-то оно так. Да ведь это адски сложно и займет кучу моего времени!»

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

Так вот, я чуть-чуть расскажу вам, как создать сайт html в блокноте и попробую показать, что от презентации своих идей, например, в виде блога (пусть даже созданного, следуя пошаговой инструкции в интернете) и получения прибыли новым способом вас отделяет всего лишь пара шагов.

И первый из них – это как раз таки хоть немного выучить язык, на котором пишутся сайты, самый простой из которых – язык гипертекстовой разметки HTML.

Блокнот, ведущий к мечте

Если вы хотите с помощью своего веб детища что-то зарабатывать, необходимо углубиться в размышления о тематике, структуре и объёмах заранее. Нынче сайты строят на платформе CMS или в различных конструкторах. Путь создания сайта через блокнот в html – для новичка, скорее всего, не будет самым быстрым.

Зато освоив азы веб-мастеринга с помощью блокнота, вы, продолжая изучать HTML, CSS и PHP, сможете чувствовать себя свободно. Но лучше освоить хороший редактор типа Notepad++. В программе (прога скачивается бесплатно в сети) можно также писать на JavaScript, CSS и PHP.

Как создать файл index.html

Прежде, чем стартовать, полезно найти пару-тройку обучающих видео курсов, посвященных тому, как сделать такую работу с нуля самостоятельно. Итак, в соответствующей проге пишем html файл и отправляем в отдельную директорию («Директория веб-сайта»), нарекая index.html. Это и будет главная веб-страница, без которой браузер отобразит лишь папки, структурирующие сайт.

Запиши сайт в блокнот: вёрстка на html
Второй общий файл, задание которого необходимо в css – style.css. В нём фиксируются все стили, которые будут «надеты» на скелет сайта и нужны для наполнения страниц.

Далее приступаем к вёрстке html в блокноте. Основная разметка выглядит примерно так:
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <title>Сайт нашего блога, самого полезного на планете</title>
5. </head>
6. <body>
7. <h1>Самый продвинутый блог – тот, на котором вы сейчас как раз обитаете</h1>
8. <p>Осталось несколько шагов до завершения создания самого крутого сайта</p>
9. </body>
10. </html>

Код в скобках – это html-тег или просто тег. Такие html-теги нужно закрывать, прописывая внутрь информацию.

Азбука HTML-тегов

Работая через блокнот, следует иметь в голове некий «лексический минимум» программиста. А именно, эти самые теги html, из которых мы будем составлять «текст» нашего виртуального детища.

• DOCTYPE — констатация разновидности документа html;
• html — основной тег;
• head — это «мозговой центр» всего документа, в который спрятаны все данные, необходимые поисковикам и браузеру;
• meta — тег может демонстрировать разное информативное содержание. У нас он транслирует браузеру кодировку UTF-8 для корректного отображения русского языка. Он может также указывать, кто автор статьи, описывать страницу или ключевые слова;
• body — это информационный «скелет» или «тело» всего html документа;
• h1 — заголовок на странице;
• p (параграф) текст, который отображается на странице.

Жмём «сохранить» и в открывшемся окне браузера видим следующее:

Запиши сайт в блокнот: вёрстка на html

На этом в данной статье мы завершим знакомство с созданием сайта в блокноте html. Знание языков программирования априори расширяет наши возможности. Мы открываем себе дверь в новый не простой мир, находим новую аудиторию, идём по жизни, развиваясь…

Как выяснилось, начать создание своего сайта в блокноте не так уж сложно. О том, как подключить файл со стилями style.css к index.html, сделать шапку сайта с нуля, работать с меню и регистрацией, через ссылки, и т.д., вы сможете узнать из других статей нашего блога.

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: