Создать Сайт Через Блокнот Html Образец

Другие статьи

Создание простой web-страницы на HTML

Урок 1.1: Создание простой web-страницы

Что такое HTML? Из описания. HTML - язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением .html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").

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

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница. ". сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги <head> и <title>.

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

Описание тегов.

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

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

Тег <title> - парный тег (<title> и </title>), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега <head>!

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

В следующем уроке мы поговорим о видах тегов и правило их написания.

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

Лирическое отступление:
Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую:
Принеси мне вот тот документ, правда я не знаю где он и какой. Что стоишь? Бегом давай. Опаздываю я.

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

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

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

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

Знакомимся тег <a> (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега <a> href задаёт имя и путь к документу на который указывает ссылка.

Всё вместе пишется так:

Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись "Здесь мои фотки!!" это кусочек текста из файла index.html.

По аналогии с рисунками тег <img> путь ссылки к открываемому документу прописывается теми же способами:

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

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

link - цвет ссылки.
alink - цвет нажатой, активной ссылки.
vlink - цвет посещенной ссылки.

<body link="#008000" alink="#ff0000" vlink="#ffff00" >

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

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

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

<html>
<head>
<title>итог..</title>
</head>
<body>
<div align="center"><font size="+3">Ракеты ушли. Америки больше нет. </font></div>
</body>
</html>

Я надеюсь, Вы не додумались нажать большую красную кнопку? Ох уж этот русский менталитет. )

Что ещё можно почерпнуть из этого примера?

Во-первых. Мы применили уже знакомые атрибуты описания title="Не нажимать. " для тега <a> и одновременно alt="Не нажимать. " для тега <img> если Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе рисунок является ссылкой. долгая история, когда ни будь напишу статью: "Спецификации HTML, браузеры и головная боль.." - а сейчас скажу лишь то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты. А описание для ссылки картинки нам просто таки необходимо! Помните, я рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для них.

Во-вторых. В примере использован атрибут тега <img> border="0" - рамка рисунка. 0 - это значит выключить рамку, так как она портит весь вид страницы в данном примере, но бывают случаи когда рамки рисунка вполне актуальны и так сказать вписываются в страницу. Здесь нужно помнить, что когда рисунок является ссылкой, его рамка окрашивается в цвета ссылки: link - цвет ссылки, alink - цвет нажатой, активной ссылки, vlink - цвет посещенной ссылки тега <body> .

Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю. Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас думаю так будет удобнее Вам читать, и мне писать. Да и подразумеваю что Вы уже самостоятельно можете вставлять теги в нужные места.

Напишите мне письмо. - строчка из того примера..

Для того что бы сделать текст или рисунок ссылкой на e-mail - почтовый ящик его нужно заключить в тег <a>. но не простой, а с использованием mailto

Эта непривычная запись будет говорить что, кликнув по тексту ссылке "Напишите мне письмо.." посетитель сайта попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик karlson@kruha.ru

Помимо этого в почтовом бланке можно заранее прописать следующие вещи:

?subject= - Тема пиcьма
&Body= - Текст сообщения
&cc= maluh@kruha.ru,maluh2@kruha.ru - Копии письма
&bcc= freken_bok@kruha.ru,freken_bok2@kruha.ru - Скрытые копии письма

Адреса ящиков для копий и скрытых копий письма пишутся через запятую.

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

Предположим на странице в удобном месте находится некое содержание или меню. по принципу:

Глава1
Глава2
Глава3

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

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

<а name="glava1">Глава1 </а>
<а name="glava2">Глава2 </а>
<а name="glava3">Глава3 </а>

Имя можно присвоить любое необязательно glava1

А теперь собственно прописываем на них ссылки в нашем меню, содержании.

Замете перед каждым именем ставим знак решётки # .

Ладно, думаю, на примере будет понятнее:

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

Ну а теперь, как и обещал, выкладываю "большой" пример он тоже состоит из двух отдельных страниц:

Фух. ну вроде всё. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур. да и как сайт с точки зрения построения имеет законченный вид.

Он улетел - но обещал вернуться. )

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

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

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

Про регистр. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.

Правило трех кликов.

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

Урок 1

Как создать сайт в блокноте. Создание первой веб страницы с помощью блокнота

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

Что такое HTML и что понадобится для его изучения?

HTML (HyperText Markup Language) переводится как язык маркировки гипертекстов. Это язык на котором создаются сайты и чтобы начать его освоение нам понадобится любой браузер и текстовой редактор, можно использовать блокнот, но я использую EmEditor и Вам его рекомендую, он различает синтаксис HTML и если Вы где-нибудь случайно допустите ошибку, опечатку, то изменение цвета текста позволит обнаружить ее быстро. Текстовой редактор нужен для создания и редактирования веб страницы, а браузер – для отслеживания результатов.
Вы когда-нибудь сталкивались с понятием тэг? Тэг – это специальное указание того как нужно отображать элемент (текст, картинка и т.д.) на странице сайта. Можно представить его как команду браузеру содержащую название и параметры.

< ТЭГ > Текст, на который должен воздействовать тэг < /ТЭГ >. Большинство тэгов — парные, то есть на каждую открывающую метку вида <тэг> есть закрывающая метка вида с тем же именем, но с добавлением слэша "/". Может в теории что-то и непонятно, но посмотрев примеры, вы поймете как все просто.

Все файлы HTML всегда будут начинаться с тэга < html >. Он говорит браузеру, что он имеет дело с файлом HTML. Страница HTML представляет с собой текстовой файл с расширением.html. И любой документ заканчивается тэгом < /html >. Между ними должна быть еще одна обязательная пара тэгов: < head > — < /head >. Head от слово Header означает заголовок, то есть здесь будет находится заголовок веб страницы. Итак, Ваша web страница к этому времени должна выглядеть следующим образом:
< html >
< head >
< /head >
< /html >
Сохранив такой текст в формате html Вы получите пустую страницу. Теперь приступим к его наполнению. Видимая для пользователей часть сайта называется телом сайта, тело обозначается тэгами < body > и < /body >. То есть сюда нужно выложить любой элемент, который должны видеть посетители сайта. Это может быть текст, изображения, видео и т.д. Теперь нужно добавить название Вашей страничке, название добавляется между тэгами < title > и < /title >. которое нужно поместить в заголовке страницы. Давайте проанализируем все полученные знания и попробуем создать свою первую веб страницу.

Страница в блокноте html, сделать, код, скопировать

Страница в блокноте html. сделать. код. скопировать,

Да! И в текстовом блокноте тоже можно сделать, но лучше воспользуемся профессиональным инструментом - Notepad++ !

Не получилось скачать. см.здесь.

Но мы на этой странице разберём два варианта создания страницы в двух блокнотах!

Страница html в простом текстовом блокноте!

Открываем его и вставляем туда вот этот код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример стараницы в блокноте, которую вы сделаете. </title>
</head>
<body>
Пример стараницы в блокноте, которую вы сделаете.
</body>
</html>

Вот так оно будет в блокноте:

Нажимаем сохранить как:

Выбираем папку сохранения,

Печатаем название страницы в строке имя файла на латинице, меду словами тире, либо нижнее подчёркивание – никаких пробелов! Точка, html.

Вот, что должно у вас получиться, к примеру:

Тип файла – все файлы.

Нажимаем сохранить как:

Смотрим, что у вас должно получиться.

Меня всегда интересовало, зачем ставить в титлах кодировку, да ещё и при сохранении ставить кодировку. А вы знаете!?

А давайте попробуем третий пункт не выполним и сохраним страницу так!

Что интересно получится!?

Смотрим, что у нас получилось.

Пример страницы в блокноте, в которой нарушена кодировка.

Теперь создадим первую страницу в блокноте под названием Notepad++.

В блокноте Notepad++ не надо мудрить с кодировкой! Вы скопировали код, вставили в блокнот Notepad++ и сохранили…

Если в коде уже есть кодировка, то вам остаётся указать путь, сохранить под новыми названием, закачать на сервер и посмотреть, что у вас получилось!

Нажимаем сохранить как:

Мы стараемся, чтобы вы получали самую свежую и нужную информацию! Мы тратим время и деньги!

Если у вас есть немного времени, то самое малое, что вы можете сделать для нас – это оценить проделанную работу!

Мы будем очень вам благодарны!

Мы переходим на другую систему комментирования, поэтому, возможны сбои в работе! Просим у вас прощения за неудобства!

Для отображения аватара после отправки сообщения, необходимо быть зарегистрированным в Граватаре.

Комментарии

Комментариев пока нет.

Руководства, Инструкции, Бланки

Поиск

Новые файлы