Создание сайтов через блокнот

Создание сайтов через блокнот

Как создать сайт с помощью блокнота

 Для удобного изучения мы код изобразили цветным.
Первые 2 строки зелёного цвета — это служебная информация по международной стандартизации.
 Красным цветом обозначены теги.
Тег (tag — указатель, метка) — это код, идентифицирующий определённый элемент документа,
например: заголовок, ссылку, таблицу. Теги заключаются в угловые скобки <>.
Большинство тегов являются парными, то есть для каждого начального тега <Имя>
есть конечный тег &lt/Имя>, в котором к имени тега добавляется косая черта «/» (слеш).
 Самый первый тег в нашем коде <HTML>, а самый последний </HTML>.
Они обозначают границы HTML-документа.
 Следующий тег <HEAD>, и на 11 строчке </HEAD>.
Элемент HEAD обозначает заголовочную часть,
и предоставляет браузеру общую информацию о HTML-файле.
 В контейнер HEAD вложен элемент TITLE (5 строка) — название WEB-страницы.
Сюда ещё вложен элемент META. Он предназначен для поисковых роботов.
Когда поисковый робот обнаружит ваш новый сайт в Интернете,
он просмотрит содержимое тегов <META>
и включит указанные вами ключевые слова (чёрного цвета) в свою базу данных.
 После заголовочной части идёт тег <BODY>, и второй снизу конечный тег </BODY>.
Всё, что находится между этими тегами, является телом документа.
Тег <BODY> дополнен атрибутами (синего цвета):
bgcolor (цвет фона всего документа), text (цвет текста всего документа).
Атрибут пишется после названия тега через пробел, и заканчивается перед закрывающей угловой скобкой.
Если атрибутов несколько, то они между собой отделяются пробелами.
Атрибутам мы задали соответствующее значение (чёрного цвета).
Цвет можно задавать двумя способами: цифрами или английскими словами.
В цифровом варианте надо использовать 6 знаков: все цифры от 0 до 9 и буквы A, B, C, D, E, F.
Вот некоторые цвета: 000000 (чёрный), FFFFFF (белый), FF0000 (красный), 00FF00 (зелёный), 0000FF (синий).
Кстати, отсюда пошёл термин «цифровая фотография» — Там каждый пиксель на снимке задан такими вот числами.
Пиксель — это минимальный адресуемый элемент экранного изображения.
 Следующий видим тег <BR> (разрыв или перевод строки), то же самое, что клавиша Enter при печати.
Этот тег одиночный, конечный тег со слешем ему не требуется.
Если хотим сделать отступ на несколько строк, пишем например <BR> <BR>.
 Ниже идёт тег <H1> (заголовок первого уровня).
Всего бывает 6 уровней: H1 -самый крупный и H6 -самый мелкий.
Внутри H1 ещё находится элемент center (выравнивание по центру окна).
Также бывают left (выравнивание по левой стороне) и right (выравнивание по правой стороне).
И уже внутри элемента мы видим сам текст заголовка (чёрного цвета).
Чем вам не матрёшка?
 Ну а ниже идёт самая громоздкая конструкция — TABLE (таблица)
с атрибутами bgcolor (цвет фона таблицы), border (толщина внешней рамки),
width (ширина таблицы в пикселях), align (выравнивание по горизонтали).
 Чтобы не запутаться, код пишем не последовательно — слева направо, а сначала создаём каркас.
А потом наполняем его содержанием.
Вот так мы создавали таблицу.

— Написали теги самой таблицы: <TABLE> </TABLE>.
— В ней создали 3 строки: <TR> </TR> <TR> </TR> <TR> </TR>.
— В первой строке создали 3 ячейки: <TD> </TD> <TD> </TD> <TD> </TD>.
Во второй — тоже 3, в третьей — 2 ячейки. Всё делаем на своё усмотрение.
<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
&lt/TABLE>
Теперь теги дополняем атрибутами.
Здесь появятся новые атрибуты: <TR width (ширина ячеек данной строки), height (высота)>;
colspan=2 (объединение двух соседних ячеек);
valign (выравнивание содержимого по вертикали),
top (выравнивание по верхнему краю), bottom (по нижнему), middle (центрирование).
<TABLE bgcolor=white border=2 width=900 align=center>
<TR width=300 height=120>
<TD align=left> </TD>
<TD align=center> </TD>
<TD align=right> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR width=300 height=120>
<TD colspan=2 align=center> </TD>
<TD align=right valign=bottom> </TD>
</TR>
</TABLE>
И уже потом заполняем каждую ячейку: вписываем код между тегами <TD> и </TD>.
Работает принцип: от простого — к сложному.
 Со структурой таблицы разобрались. Теперь вернёмся к нашему цветному коду.
После тега <TABLE> со своими атрибутами идет тег первой строки <TR>.
Ниже — тег первой ячейки <TD> с атрибутом выравнивания по левому краю.
А в качестве содержимого этой ячейки выступает обычный текст.
 Переходим в следующую, вторую ячейку. Здесь познакомимся со ссылкой.
Схема ссылки выглядит так:
<A href=»адрес перехода»> Текст ссылки </A>
В нашем случае «Переход на вторую страницу моего сайта» — это текст ссылки,
а «doc/2.html» — адрес перехода.
Когда пользователь наводит курсор мыши на текст ссылки — курсор принимает вид руки.
А если щёлкнуть левой кнопкой мыши по тексту ссылки, то срабатывает адрес перехода.
То есть перед нами открывается страница, которая записана в адресе перехода.
В нашем случае будет doc/2.html. (doc — название папки, 2.html — имя файла).
Теперь поясню, для чего нужна была эта ссылка?
Сайт очень редко состоит из одной страницы, их всегда несколько,
и пользователь должен иметь возможность переходить от одной страницы к другой.
 А мы переходим к изучению 3 ячейки 1 строки нашей таблицы.
Здесь тоже ссылка. Но посмотрите на адрес перехода: http://mail.ru.
Это адрес всем известного почтового сервиса.
А каким боком он связан с нашим сайтом? Он — никаким, а мы его через ссылку к себе привязали!
 Пошли дальше: 2 строка, 1 ячейка.
Элемент IMG (вставка изображения) с атрибутами width (ширина) и height (высота).
Схема выглядит так: <IMG src=»Источник изображения»>
В нашем примере источником является графический файл 2.JPG, который находится в папке doc.
Если вы заметили — у нас все документы лежат в папке doc.
Можно всё разложить по разным папкам.
Главное, чтобы адрес в написании кода не расходился с действительностью.
 2 ячейка. Здесь опять встречается ссылка. Только вместо текста ссылки стоит изображение 3.JPG.
А в качестве адреса перехода — тоже изображение 4.JPG.

4.JPG — это фотография, а 3.JPG — её уменьшенная копия (Мы её создали заблаговременно
с помощью программы Microsoft Office PowerPoint). Такой способ применяется в фотогалереях.
 3 ячейка. Графическая ссылка на URL-адрес (адрес какого-либо сайта, размещённого в Интернете).
 3 строка, 1 ячейка. Атрибут colspan=2 (объединение двух ячеек). Ссылка на музыкальный файл 6.MP3.
Кроме того, здесь текст ссылки заключён в элемент FONT (свойства шрифта).
Для него предусмотрены атрибуты: size (размер шрифта от 1 до 7), color (цвет шрифта),
face (гарнитура шрифта, face=Arial).
 И последняя ячейка. Ссылка на адрес электронной почты.
Удобно тем, что при нажатии пользователем на эту ссылку на его компьютере
автоматически запускается почтовая программа, и в поле «Кому» вводится нужный адрес сам.

Пример создания html страницы в блокноте

В первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более сложную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится для работы — это обычный блокнот от Windows. Для более удобной работы рекомендую (продвинутый блокнот с возможностью подсвечивания html-тегов). Итак, начнем.

Откройте блокнот и скопируйте в него следующее:

<html> <head> <title>Главная страница — страница обо мне</title> </head> <body> <center><h1>Информация обо мне</h1></center> Краткая биография обо мне Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ. На данный момент работаю ведущим инженером в крупной авиакомпании. Моя мечта стать ведущим по машине. Поскольку я люблю авиацию, то хотел бы поделиться несколькими интересными фотографиями на эту тему <br/><br/> <center><img alt=»Два самолета» src=»https://img-fotki.yandex.ru/get/9931/160700675.0/0_110e34_54188f48_-1-orig»> </center> <br/><br/> <font style=»color:green»>Этот текст зеленый</font> <br/><br/> <b>Просто пример жирного текста</b> <br/><br/> Низ страницы <br/><br/> В данном примере мы рассмотрели кратко основные теги HTML, теперь можно пробовать создавать несколько связанных страниц через ссылки и выкладывать сайт в интернет. <hr> Этот материал был написан благодаря сайту <a href=http://zarabotat-na-sajte.ru/> http://zarabotat-na-sajte.ru/</a> — за что я ему благодарен. <br/><br/> Спасибо. До новых встреч! </body> </html>

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

Если по каким-то причинам у Вас не получается создать html страницу, то Вы можете скачать предыдущий пример по ссылке: index.rar.

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

Описание html тегов из примера

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

Любая html страница имеет следующую структуру:

<html> <head> … Заголовочные теги … </head> <body> … Тело страницы … </body> </html>

2. <body></body> — между этими тегами заключается весь видимый контент страницы.

3. <head></head> — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про <head></head> читайте в описание заголовочных тегов

4. <title></title> — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег <title></title> часто сокращенно называют «тайтлом». Советую ознакомиться со статьей: как составить тег <title>

Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body> и </body>).

5. <center></center> — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет — центр экрана. В будущем рекомендуется отказаться от использования этих тегов.

6. <h1></h1> — это один из класса тегов заголовочных тегов <h1>..<h6>, обычно в него заключают название страницы. Например, у этой странице заголовочный тег «Пример создания html страницы».

Примечание

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

При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <h1>, а дальше могут идти уже <h2>, <h3> и т.д. Главное, чтобы не было сначала <h2>, потом <h1>, потом <h3> и т.п. Должна быть строгая иерархия. Заголовков <h2>, <h3> и т.п. может быть много.

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

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

8. <img alt=»подсказка» src=»URL_ИЗОБРАЖЕНИЯ»> — это одиночный тег, который выводит изображение.

  • 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>.

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

Читайте также: как сделать жирный шрифт html

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

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

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

Примечание

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

<a href=»stranica_50.html»>stranica_50.html</a> Можно писать и полный адрес страницы <a href=»http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html»>http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html</a>

Этому важному тегу посвящен специальный урок: HTML тег <a>.

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

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

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

Понятие и назначение

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

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

На практике это выглядит так

<tag>Контент</tag>

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

<tag>Какой-то текст<tag> <!—При закрытии отсутствует слэш—> <tag>Еще один какой-то текст <!—Если тэг парный, то это неправильно—> <tag Новый текст</tag> <!—Тэг вообще не открыт—>

Несколько тегов могут применяться к одному контенту, в таком случае их нужно использовать по принципу матрёшки:

<p> <tag1> <tag2> Текст <tag2> <tag1> <p>

Абзац (P)

Начнем мы пожалуй с тега абзаца. Обозначается он буквой латинской буквой <p> (Paragraph — параграф) и, как вы уже поняли, заключается в угловые скобки. Также как и большинство тэгов этот является парным, то есть текст обрамляется этими значениями. Для чего он вообще нужен? Да чтобы отделять текст абзацами.

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

<html> <head> <title>Мой первый сайт</title> </head> <body> <p>Сегодня мы научимся пользоваться несколькими важными тегами, которые пригодятся вам в сайтостроении, даже если вы будете делать свой ресурс на движках</p> <p>На забудьте закрывать тэги. Если вы открыли его, но не закрыли (или закрыли неправильно), то он будет работать, но распространится на всё следующее содержимое. Поэтому внимательно следите, чтобы всё было правильно.</p> <p>А сегодня в завтрашний день не все могут смотреть. Вернее смотреть могут не только лишь все. Мало, кто может это делать.</p> </body> </html>

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

Живой пример

Итак, часть новых тегов мы изучили и надо переварить их назначение. Вообще ничего сложного тут нет. Отдохнули? Молодцы. Теперь идем дальше.

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

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

  1. Открываем Notepad++ и прописываем ту самую основу, которую мы проходили на предыдущем уроке (html, head, title, body).
  2. Между <body> и </body> вставляем текст из технического задания (только заголовки и само стихотворение). Сразу сохраните этот документ в формате html и посмотрите, как он у вас будет отображаться в браузере. Здорово, да?
  3. Обрамляем заголовок «У Лукоморья дуб зеленый» <h1>, а «Из поэмы Руслан и Людмила» обрамляем <h2>.
  4. Каждые четыре строчки обрамляем абзацами <p>. Не забываем, что сначала надо ставить открытый тэг, а после четырех строк закрытый. Ну я думаю, что это вы уже поняли.
  5. Теперь после каждой строчки нужно ставить <br>, иначе переноса строки у вас не случится и все будет налеплено друг за другом. Только не ставьте в последней строчке, там, где закрывается абзац. Так как после </p> происходит автоматический перенос строки с пробелом.

Вот собственно и весь наш план действий. Осталось только посмотреть, что у нас в итоге получилось. Вроде всё правильно, и со всеми условиями технического задания мы справились. Что я забыл сделать по данному ТЗ? Напишите пожалуйста в комментариях.

Смотрите как всё изменилось по сравнению с первоначальным вариантом, благодаря html-разметке с помощью тегов. В следующих статьях мы затронем работу с другими элементами разметки, но кстати я вам советую в случае чего обращаться к сайту htmlbook.ru, так как там всегда можно посмотреть подсказки по этому делу: что, как и куда ставить, что с чем взаимодействует, для каких браузеров подходит и т.д.

И конечно, если вам уже не терпится освоить язык гипертекстовой разметки, то обязательно посмотрите курс «HTML5 и CSS3 с нуля до профи». Курс отличный и все прекрасно и подробно рассказано, как сверстать три разных типа сайтов. Я сейчас в данный момент сам его изучаю и вам советую. Для полных новичков есть несколько бонусных курсов по html и css.

Ну на этом позвольте мне откланяться. Ждите моих следующих уроков, где мы продолжим покорять вершину сайтостроения (громко сказал). А чтобы ничего не пропустить, рекомендую вам подписаться на обновления моего блога. В общем спасибо за внимание. Удачи вам. Пока-пока!

С уважением, Дмитрий Костин


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *