Как сделать блокнот

Содержание:

Всё о таблицах в блокноте
Шаг 2 – добавляем разметку веб-страницы
Создаем меню
Как создать страничку

Создать страницу проще, чем вы думаете

Всё о таблицах в блокноте

Вообще! Когда вы говорите – сделать таблицу в блокноте — что вы имеете ввиду!? Вот этот блокнот!?

Если да, то рекомендую использовать тоже блокнот, но только другой — Notepad! Если эта программа не нравится я писал еще о нескольких, если и эти не нравятся, то в сети ищем редактор кода…

Начинать, потренироваться… можно конечно, но я, даже когда начинал изучать html, и не представлял, что когда-то буду делать в таком блокноте вообще что-то! Это просто какое-то унижение для меня пользоваться такой шнягой! Но вы можете делать все, что вам вздумается!
Если вы пока, не планируете скачивать и устанавливать программу Notepad, либо другую аналогичную программу то давайте продолжим в текстовом блокноте!

Вне значимости от перечисленных программ – программа – это всего лишь инструмент, а уж каким инструментом пользоваться – это ваш выбор!

Возьмите блокнот, скопируйте отсюда таблицу, вставьте в блокнот, сохраните в html формат и вот вам будет простая стандартная таблица… не забываем о кодировке и + не забываем, что в текстовом блокноте есть своя кодировка при нажатии сохранить как — см кодировку выбрать — utf-8

Добавим бордюр border=»1″ для таблицы, чтобы её увидеть, вы это значение можете удалить!
Для создания таблицы с одним столбцом потребуется скопировать код таблицы и занести его в блокнот!

Код:

<table border=»1″>

<tbody>

<tr>

<td>Таблица с одним столбцом.</td>

</tr>

</tbody>

</table>
Результат:

Таблица с одним столбцом.
Для того, чтобы сделать таблицу в блокноте с двумя столбцами добавляем двойной тег tdКод:<table border=»1″>

<tbody>

<tr>

<td>Столбец №1.</td>

<td>Столбец №2.</td>

</tr>

</tbody>

</table>
Результат:

Столбец №1. Столбец №2.

Создание таблицы в блокноте с тремя столбцами аналогично предыдущему пункту! Добавляем еще один тег td

Код:

<tbody>

<tr>

<td>Строка №1,Столбец №1.</td>

<td>Строка №1,Столбец №2.</td>

<td>Строка №1,Столбец №3.</td>

</tr>

<tr>

<td>Строка №2,Столбец №1.</td>

<td>Строка №2,Столбец №2.</td>

<td>Строка №2,Столбец №3.</td>

</tr>

<tr>

<td>Строка №3,Столбец №1.</td>

<td>Строка №3,Столбец №2.</td>

<td>Строка №3,Столбец №3.</td>

</tr>

</tbody>

</table>

Результат:

Строка №1,Столбец №1.	Строка №1,Столбец №2.	Строка №1,Столбец №3.
Строка №2,Столбец №1.	Строка №2,Столбец №2.	Строка №2,Столбец №3.
Строка №3,Столбец №1.	Строка №3,Столбец №2.	Строка №3,Столбец №3.

Последняя дата редактирования : 2020-11-26 20:39
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no

Шаг 2 – добавляем разметку веб-страницы

Как сделать шапку сайта: простой способ

Теперь приступаем к редактированию файла. Первым делом необходимо добавить -веб-разметку – стандартный кусок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:

<!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Топовый сайт новичка</title>
</head>
<body>
<h1>Это тег заголовка первого уровня для содержимого страницы</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац и т. д.</p>
</body>
</html>

Это базовые элементы, которые есть на любом веб-ресурсе. Весь контент страницы должен находится между тегами <body></body> (это тело документа), всё, что выходит за их пределы выше и ниже, не будет отображаться на сайте.

Создаем меню

Что такое ссылки, их разновидности, как сделать ссылку в html

Надо создать меню сайта, используя списки HTML, указывая для каждого из включаемых в него разделов ссылку на страницу, к которой будет переходить посетитель при нажатии на соответствующую надпись.

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="menu">
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div class="main">
<h1>Мой заголовок страницы</h1>
<p>Мой текст.</p>
</div>
</body>
</html>

Чтобы создать логотип надо сделать
папку «image», в
которой будут находиться все картинки, имеющие отношение к сайту.

Внимание! Примерный размер логотипа составляет 200х100 px, скачайте и загрузите выбранную картинку в папку. Логотипу нужно присвоить имя и сделать для него разрешение в формате png или jpg (а начиная с 2019 года в обиход входит формат webp, которые является более современным и легким)

Логотипу нужно присвоить имя и сделать для него разрешение в формате png или jpg (а начиная с 2019 года в обиход входит формат webp, которые является более современным и легким).

<img src="image/logo.png" alt="Наш логотип">

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="menu">
  <li><img src="image/logo.png" alt="Наш логотип"></li>
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div class="main">
<h1>Мой заголовок страницы</h1>
<p>Мой текст.</p>
</div>
<div class="footer">
<p> 2019 Копирайт. <a href="https://goodlifer.ru/">Блог Гудлайфера</a>.</p>
</div>
</body>
</html>

Внимание! Именно в подвале при создании сайтов делается копирайт. Сформированная нами первая
страница станет шаблоном, на основании которой мы создаём остальные, на которых
теперь будет размещаться блог, новостной, информационный или коммерческий сайт.

Сформированная нами первая
страница станет шаблоном, на основании которой мы создаём остальные, на которых
теперь будет размещаться блог, новостной, информационный или коммерческий сайт.

Как создать страничку

Как сделать ссылку на сайт: 4 простых шага

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

Откройте документ.

Вставьте в него вот этот код.

Моя первая страница

Создать страницу проще, чем вы думаете

Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учитьВажно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.

Простой код позволяет сделать текст красным
Написать жирным не намного сложнее

Мы дошли до самого низа

Теперь вы знаете чуть больше о тегах и можете использовать их

Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино.

К примеру, вот ссылка на мой блог — Start-Luck — рассказывает просто о «сложном».

Ну вот и все. Ваша первая страница готова

Теперь нажмите «Сохранить как…». Это очень важный момент.

Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.

Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.

Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.

Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на сервер, который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.

Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.

HTML теги

Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.

	Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа.

Рассмотренный пример HTML-документа использует следующие теги:

Название тега	Описание
<!DOCTYPE…>	Это инструкция для веб-браузера о том, на какой версии HTML написана страница.
<html>	Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ
<head>	Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как <title>, <link> и т.д.
<title>	Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке.
<meta>	Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа.
<body>	Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например <h1>, <div>, <p> и т.д.
<h1>	Этот тег представляет собой заголовок.
<p>	Этот тег представляет собой абзац.

Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).

Как сделать границы

Таблицу вы сделали, задали ширину, все написали, теперь нужно привести ее в нормальный вид. Для этого таблице можно задать границу в пикселях. Делается это благодаря атрибуту border, который идет вместе с элементов <table>. Не задавайте слишком большие границы, лучше этим вы не сделаете никому.

Параметр Border.
Параметр CELLSPACING.
CELLPADDING.

Параметр BORDER выступает за рамку вокруг вашей таблицы или каждой ячейки. По умолчанию никакие рамки не рисуются, все необходимо задавать самому изначально при каждом написании новой таблички. Задается ширина рамки в пикселях целым числом, как это показано на примере. Как показывает практика, большие границы никто не практикует, большинство пользователей устанавливают значение не больше 1-2.

Как делается граница в таблице показано на примере. Кроме всего этого, таблицу часто выравнивают по центру, так же можно пр правому краю. При создании таблицы вы указывали ее начало тегом table, вот в него помещаете, что вам нужно. Приведу несколько примеров с подробным описанием.

Параметр CELLSPACING, задается так же в цифрах. В качестве числа выступает параметр в пикселях, который отвечает за расстояние между рамками ячеек, как по горизонтали так и по вертикали. По умолчанию уже стоит значение 2, но всегда можно сделать его больше или меньше.

Параметр CELLPADDING, так же задается в цифрах. В качестве числа задается величина в пикселях, который отвечает за величину свободного пространства между рамкой таблицы и данными внутри каждой ячейки. По умолчанию стоит значение единица, но при желании его тоже можно изменить в меньшую или большую сторону.

Вместе эти два параметра могут хорошо повлиять на отступы в вашей таблице, поэтому не стоит забыть про них, если у вас намечается создание крупной таблички, с которой в дальнейшем могут быть проблемы при расположении на странице.

Кроме этого, для решения проблемы с отступами, не стоит забывать про первый параметр BORDER. Вся эта тройка живет своей жизнью отдельно и тем самым управлять каждым из них, можно тоже отдельно. Если хотя бы один из них не занесен к тегу table, все они будут принимать свое значение по умолчанию, тем самым вы даже не будете знать как можно добавить или уменьшить нужные отступы в таблице через блокнот.

<table border=»5″ CELLSPACING=»2″ >
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td rowspan=»3″>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
</tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<tr>

<th>Иванов<th>

<th>Петров<th>

<th>Сидоров<th>

<th>Лукашин<th>

<th>Михайлов<th>

<th>Березин<th>

<th>Комаров<th>

<tr>

<tr>

<tr>

<tr>

<table>

Можно задать цвет любой ячейке или всей таблице, добавляется атрибут bgcolor и к нему уже код любого цвета. Коды цветов html можно найти в интернете, но про них я напишу отдельно новую статью. Для удобства и простоты используют небольшую программу, с ее помощью можно быстро узнать код любого цвета. Называется она ColorMania.

1 2	<td bgcolor=»#cccccc»>14<td> <td bgcolor=»##191970″>118<td>

Как написать калькулятор в Блокноте? Как можно написать программу «Калькулятор» в блокноте?

может быть много.

Более подробно про эти теги читайте в уроке 14 HTML теги <h1>-<h6> — заголовочные теги внутри страницы

7. <br/> — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.

8. <img alt=»подсказка» src=»https://steptosleep.ru/wp-content/uploads/2018/06/59608.jpg»> — это одиночный тег, который выводит изображение.

src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение). Примечание:
- Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
- Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.
alt или title — в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

Более подробно про <img> читайте в специальном уроке: html тег <img>

9. <font></font> — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

Примечание: <span></span> — аналогичный тег.

Есть также свойство CSS font, в котором можно задавать все эти параметры.

10. <b></b> — выделить жирным. Все, что заключено между <b> и </b> будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным.

Это довольно часто встречающийся тег, аналогом которого является <strong></strong>.

Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам

11. <hr/> — одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.

12. <a href=»URL»>текст_ссылки</a> — тег для создания ссылок.

href=»URL» — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.

Примечание

Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:

Этому важному тегу посвящен специальный урок: HTML тег . Более подробное описание этих и других тегов читайте в следующих уроках

Более подробное описание этих и других тегов читайте в следующих уроках.

Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам.

Следующий урок: Урок 3. Основные html теги

← Перейти в каталог html уроков и советов

Теги, которые мы использовали для создания сайта

Теги html head и body

Пара тегов html показывает браузеру, что данный документ является html – документом. Между ними располагается все содержимое нашей странички. В том числе и пары тегов head и body.

В теге head содержится служебная информация для браузера, и поисковых систем, и не отображается на странице, за исключением тега title, о котором речь пойдет ниже.

Тег body предназначен для хранения основного содержимого страницы сайта, которое будет отображаться в окне браузера. Здесь располагается текст, картинки, а также ссылки на другие страницы.

Мета теги и тег title

Содержимое тега title это оглавление страницы. Его содержимое отображается на вкладке браузера. Это очень важный тег, так как именно он говорит поисковым системам, чему посвящена страница сайта. Таким образом, для того, чтобы страница попала в выдачу поисковой системы по определенному запросу, этот запрос должен присутствовать в теге title. Кроме того, содержимое данного тега выводится в результатах выдачи.

Метатеги Description и Keywords это специальные теги, которые могут присутствовать на странице, а могут и не присутствовать. Тем не менее, они тоже крайне важны, так как помогают поисковым системам правильно оценить содержимое страницы, для того, чтобы найти для нее место в результатах поиска. Это еще один пример тегов, у которых нет закрывающей пары.

Внутри тега Description расположено краткое описание страницы сайта, которое Google часто показывают в сниппете. Напомню, что сниппет, это небольшое описание страницы в результатах выдачи.

Ну а внутри тега Keywords через запятую перечисляются ключевые слова, которые характеризуют содержимое страницы. Поговаривают, что поисковые системы уже не используют keywords. Однако, на всякий случай, его можно заполнить.

Правильное заполнение метатега description и тега title эта важнейшая часть внутренней оптимизации сайта под поисковые запросы. Грамотное заполнение этих тегов, позволит твоему сайту появляться на первых местах в выдаче поисковых систем, и, следовательно, на сайт начнут приходить посетители.

Живой пример

Итак создаем текстовый документ и пишем там следующее содержимое:

Написали? Молодцы! Тут я дал вам информацию специально в виде картинки, а не в виде текста, так что вы ее не скопируете

Вот я негодяй, да?)) Обратили внимание, что тэги вкладываются друг в друга как матрешки? Так и должно быть

После этого сохраните ваш документ в формате html. Для этого при сохранении, после того как вы назвали ваш документ, ставьте точку и пишите html. То есть у вас должно получиться index.html. Тогда ваш документ автоматически сохранится уже не в виде текстового документа, а в виде веб-страницы. И еще при сохранении документа измените кодировку на UTF-8 Вы можете открыть этот файл с помощью любого браузера. Давайте это сделаем и посмотрим, что у нас получилось.

Смотрите, сколько мы всего написали, а в итоговом документе остался только наш приветственный текст. Почему? Да потому что сами по себе тэги не отображаются в итоговом варианте, а показываемая информация отображается только между тэгами body. Поэтому всё так и получилось. Зато смотрите, то что мы писали в head, точнее в title, теперь отображается во вкладке браузера.

Но попробуйте поставить несколько пробелов и написать еще текст, либо просто напишите несколько строчек текста и сохраните это в том же документе.

Теперь войдите в этот документ с помощью браузера. Что мы видим? А то, что ваши пробелы и переносы строк не повлияли на документ и все идет одной строкой. Некрасиво, да? А всё потому, что html сам по себе не понимает ваши пробелы (кроме одного) или переносы. Для того, чтобы переносить строки всё нужно размечать другими тэгами, о которых мы будем говорить в других статьях.

Многие наверное подумают что-то типа: «И это по твоему сайт? Да ты с дубу рухнул». Да, дорогие мои. Эту примитивную веб-страницу также можно назвать сайтом. И я еще раз повторюсь, что смысл данной статьи был не создать мегакрутой сайтище, а показать вам основу любого сайта, как это выглядит, как всё происходит.

Но вы не волнуйтесь. Это всё вводные уроки. Далее мы всё глубже и глубже погрузимся в html разметку, и сможем всё правильно форматировать, расставлять. В общем всё будет круто и мы сделаем полноценный веб-ресурс. Просто в одну статью всё это не уместится, а комкать и сокращать я тоже не буду, иначе фигня получится.

Как сделать страницу сайта в блокноте

Теперь расскажу о том, сделать первую страницу сайта в блокноте – текстовом редакторе, имеющемся на любом компьютере или ноутбуке, независимо от используемой операционной системы. Для этого понадобятся навыки HTML.

Но не нужно бояться этих 4 букв. Ничего страшного и опасного они не скрывают. Зато полученные навыки помогут вам приобрести уверенность. Ведь изучение такого направления, как сайтостроение всегда начинается с обучения HTML. Чтобы сгенерировать страницу, достаточно выполнить 6 простых шагов. Сначала откройте блокнот – в нем вы будете писать теги. То есть, «программировать».

1. Главный тег

Основным тегом считается <html> — с него начинается и заканчивается страница. Между ним располагается остальной код, который и будет формировать вашу страницу. Заканчивается она </html>.

2. Сохранение

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

Такой документ можно открывать в любом браузере. Он будет демонстрировать вам, как выглядит страница, написанная вами с помощью тегов.

3. Простые теги

Изучите все простые теги, посредством которых будет выполняться макетирование, создание страниц. Посредством них и напишите код, который вам нужен. Вот несколько:

<head> </head> — заголовок страницы;
<title> </title> — краткое текстовое описание страницы;
<body> </body> — основной текст.

Между тегами впишите название, описание, текст. Не забывайте сохранять файл после окончания работы.

4. Форматирование

Когда основной текст вставлен в тег <body> </body>, приступайте к его форматированию. Прежде всего, необходимо расставить абзацы посредством открывающего тега <p> и закрывающего тега </p>.

По умолчанию тексты выравниваются по левому краю. В принципе, это выглядит вполне привлекательно и аккуратно. Если вас интересует другие варианты выравнивания, используйте параметр align с такими значениями, как:

left;
center;
right;
justify.

Если хотите некоторые части текста хотите выделить, акцентировать на них внимание читателей страницы, используйте тег . Заключенные в него слова будут выделены жирным

Если хотите, чтобы текст был наклонным заключите его в тег .

5. Изображения

Чтобы страница была красивой, яркой, на нее нужно обязательно добавить картинки, рисунки. Подберите изображение, которое идеально подходит под тематику текста. В графическом редакторе обрежьте все лишнее, скадрируйте. Картинку сохраните в ту папку, где находится все изображения для сайта.

Поставьте тег img src=»picture.jpg»> в той части текста, где должна размещаться картинка. В нем слово picture = названию картинки, ее полное имя, которое вы ввели при ее сохранении.

Сохраните свой документ в блокноте. Откройте в браузере и посмотрите, все ли вас устраивает. Если нет – внесите изменения, если да – значит вы усвоили, как сделать страницу сайта в блокноте.

Как упростить себе жизнь в будущем или уже сейчас

Если вы со всем этим справитесь, то у вас не возникнет никаких сложностей с работой в простых программах

Обратите на них внимание после того, как выполните несколько крутых и тяжеловесных проектов

Если собираетесь работать с сайтами на продажу, то некоторые малобюджетные проекты можно делать на вордпресс. Вам все равно никто не доплатит за труд и отнятое время, а полученные из курсов знания пригодятся как нельзя кстати. Вы сможете быстро создать шаблон, подстроить его под себя, вам будет доступно все!

Для создания одностраничников можно использовать Adobe Muse (поищите саму программу в инете или приобретите здесь). Это очень классная и простая программа. Посмотрите на пример сайта, который я сделал за минуту.

Путем нажатия пары кнопок…

Мы получаем вот такой вариант. Хоть сейчас загружай на сервер.

Это стандартный html код, ничего кривого, косого. Все идеально и нравится поисковикам.

Для создания простых проектов в самый раз! Кстати, если вас заинтересовал Muse, то могу порекомендовать курс Сергея Садовникова (Гениальный Landing Page). Даже если лендинги вас не впечатляют и не интересуют, тут вы можете найти много теоретической информации, которая научит вас делать крутые продающие сайты. Тут есть много полезного.

Выбирайте простые решения для сложных задач и не становитесь редисками. Как правило, люди, постигшие код начинают напоминать старейшин, ум которых возвышается над бренностью бытия: «Вордпресс? О боги, фи! Только низшие создания делают на нем сайты».

Мне понятно почему так происходит, это обида. Тратишь время на обучение, понимаешь, что в коде нет ничего сложного. Возможно, тебя начинает бесить нежелание простых смертных ввязывать во все это. Но задумайтесь и ищите выгоду из любого продукта, который предлагает вам XXI век.

И уж тем более не старайтесь нести правду туда, где этого меньше всего ждут.

Если вам оказалась полезной эта статья – подписывайтесь на рассылку и получайте больше полезных рекомендаций. Успехов в ваших начинаниях. До новых встреч.

Разница версий html, xhtml и html5

Прежде всего: тег !DOCTYPE помогает браузеру распознавать и правильно интерпретировать веб-страницы. XHTML — это расширенный HTML и отличается более жесткими требованиями к синтаксису. Наиболее распространенными версиями являются HTML 4.01 и XHTML 1.0, и их разновидности Transitional, Frameset и Strict.

Strict — это строгий синтаксис разметки, запрещает использование элементов со статусом «нежелательные». Документы этого типа лучше всего взаимодействуют с алгоритмами преобразования, такими как, например, функция поиска на сайте. Frameset — служит для страниц, содержащих фреймы. Transitional имеет переходный синтаксис, в большинстве случаев используют именно его. Версия XHTML 1.1 не имеет разновидностей, она подчинена строгим правилам, как Strict.

Конечно, сегодня все сайты делают на HTML5, тем более, что эту версию отличают либеральные правила — прежде всего, это касается вложенности тегов.

Правила оформления документов

Пустые элементы, пропуски не влияют на отображение html-документа в браузере, а в xhtml-документе требуется точность разметки. В html-документах есть элементы с необязательным закрывающим тегом. Например, для создания абзаца используется тег P, а в конце абзаца необязательно ставить . В XHTML необязательных закрывающих тегов нет, они обязательные. А элементы, для которых закрывающий тег запрещен, пишутся с обязательным добавлением пробела и слеша перед закрывающей скобкой: — это перенос строки, в отличие от HTML: . Взгляните на тег Meta в последнем скриншоте.

В HTML, кроме атрибутов id и class, не важен используемый регистр символов, в XHTML — только строчные буквы, а все значения атрибутов обязательно заключаются в кавычки. В следующем уроке рассмотрим элементы тега Body, структурирующие текст: заголовки, абзац, списки. А далее, по плану: вставим на страницу изображения, свяжем html-страницы в единый сайт с помощью ссылок.

структура
версии
заголовки
абзацы
списки
изображения
ссылки
таблицы
формы
видео
аудио
Справочник HTML
Справочник CSS
Вёрстка сайта

Поделиться с друзьями:

Добавляем страницы

На самом деле все необходимое уже сделано. Пункты меню и указатели «Смотреть» подробнее обернуты в специальный тег , который и отвечает за формирование гиперссылки. Нужный адрес указывается в атрибуте . Осталось лишь создать сами страницы и разместить их рядом с файлом .

Пример кода для страницы фотоальбома ():

Основная структура, шапка, навигация и подвал полностью дублируют главную страницу, меняется лишь секция , которая теперь содержит галерею с несколькими блоками . Внутри каждого блока — картинка и подпись к ней.

Для оформления страницы используется тот же самый файл , подключенный внутри секции . В него необходимо добавить несколько правил для галереи:

Здесь используется css-прием, позволяющий разместить блоки по три в ряд и задать им ширину ровно в треть от ширины родительского контейнера.

Итоговый вид галереи представлен ниже.

Гиперссылки обеспечивают перемещение между страницами сайта: из меню можно попасть в «Фотоальбом», а кликнув на логотип — переместиться обратно на главную.

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html>, <html>, <head> и <body>.

Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html>. После этого идёт элемент <html> означающий начало документа.

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

Всё видимое содержимое веб-страницы будет находиться в элементе <body>. Структура типичного HTML-документа выглядит следующим образом:

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, <!DOCTYPE html>, затем сразу идёт элемент <html>. Внутри <html> идут элементы <head> и <body>. Элемент <head> содержит кодировку страницы через тег <meta charset=»utf-8″> и название документа через элемент <title>. Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р>. Поскольку и заголовок и абзац вложены в элемент <body>, они видны на веб-странице.

Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html>. Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body>.

Самозакрывающиеся элементы

В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:

<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>

Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html>, <head> и <body>, является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.

Валидация кода

Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS, которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.

Тема и структура

Прежде чем разбираться, как через «Блокнот» создать свой сайт на HTML, нужно четко представить себе, как этот сайт должен выглядеть. Для примера возьмем персональный блог некого Джона Доу.

Основные элементы структуры этой страницы:

шапка с логотипом и заголовком первого уровня;
горизонтальная панель навигации;
основное содержимое, представленное тремя статьями, каждая из которых состоит из заголовка, краткого описания и ссылки на полный текст;
подвал с указанием копирайта.

HTML-код этой страницы будет выглядеть так:

Для описания веб-страницы использованы семантические теги из стандарта HTML5: , , , , .

Пояснения к коду:

В шапке размещено изображение, обернутое в ссылку. С ее помощью из любого места сайта пользователь сможет вернуться на главную страницу.
Само изображение находится в папке на одном уровне с файлом . В коде для него с помощью атрибута строго задана ширина в 100 пикселей.
Заголовок оформлен как тег , что подчеркивает его значимость.
Навигационное меню представлено ненумерованным списком, а каждый его пункт является ссылкой на соответствующую страницу сайта. Сейчас этих разделов еще нет, но в будущем они могут быть созданы.
Для заголовков статей используется тег .
Ссылка «Смотреть» подробнее ведет на отдельную страницу с полным текстом статьи. Этих страниц пока также нет.
Весь контент обернут в общий блок с классом . Атрибуты классов обычно используются для стилизации элементов.

Сейчас страница выглядит вот так:

Этот вид не очень похож на запланированный. Чтобы исправить ситуацию, нужно добавить оформление.

Для этого потребуется создать еще один файл, рядом с и назвать его . В нем разместятся все необходимые стили.

На данный момент структура проекта выглядит так: