ГлавнаяРазноеКак создать сайт через html

Пример создания сайта на HTML через блокнот. Как создать сайт через html


Как создать сайт

Местонахождение: Web-мастерам      Наверное хоть раз вас посещал этот вопрос, бродя по безграничным просторам интернета... Хотите узнать об этом? если нет, то поищите что-то более подходящие вам на нашем информационном портале TrueInfo, если же этот вопрос вас заинтерисовал, то читайте дальше...     Прежде чем приступать к изучению данного материала стоит разобраться: а что же такое сайт(веб-сайт)?! Многие затрудняются ответить...по разным причинам... Если обратиться к английскому языку, то дословно получится (website: web - "паутина","сеть" и site - "место", и буквально получается "место в сети"). А теперь само определение: "сайт-это совокупность документов частного лица или определенной организации в компьютерной сети объединенная под одним адресом (доменным именем 1 или IP-адресом2)"     Теперь все по порядку... В определении встречается слово документ. Наверняка возникает вопрос: "а что же это такое? и что он из себя представляет? как их создают?" Все элементарно документ-это страница сайта, написанная в основном на HTML. "Чем дальше в лес, тем больше дров" Опять новое слово, хотя наверное единицы пользователей интернета не слышали об этой абривиатуре и расширении. Сразу определение, точнее расшифровка HTML (Hypertext Markup Language)-язык разметки гипертекста. Подробно с этим самым языком можно и даже нужно(т.к. без него никуда...) ознакомиться в Учебном пособии представленном на нашем сайте TrueInfo.      Теперь научимся создавать Html документы. Первое что нам понадобится это программа по созданию, к примеру программка под названием FrontPage от Microsoft. Она входит в состав пакета программ Microsoft Office. Лично я пользуюсь редактором LightPad. Второе что нам нужно это хотя бы начальные знания html. Если вы готовы продолжить, то начнем. Ниже будет приведен пример создания самой простейшей страницы на html.

<html><head><title>Как создать веб-страницу</title> <body><p>Я хочу научиться создавать веб-сайты</p></body></head></html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

     Если на данный момент у вас нет этой или других программ, то можно воспользоваться обычным блокнотом! Печатаем выше приведенный текст в блокноте. Далее сохраняем его (сохранить как), пишем любое имя и самое главное не забываем после имя указать расширение HTML(должно получиться так: имя вашего документа.html) и еще одно: при сохранении не забываем выставлять тип файлов все файлы. После создания и сохранения открываем созданный вами документ через любой браузер (Internet Explorer, Opera и т.д.). В окне браузера появится ваш документ, в нем будет написано: "Я хочу научиться создавать веб-сайты". У вас все получилось? надеюсь, что да. Допустим, что вы разобрались в HTMLе и написали некоторое кол-во страничек и связали их при помощи ссылок. Не много слов о главной странице: что бы ваша главная страница отображалась по адресу: ваш_сайт.ru или ваш_сайт.nm.ru эй нужно дать имя index.html. !Важно!: имя главной страницы должно иметь вид: index.html и только так и не как иначе! Что делать дальше? Как сделать так, чтобы они появились в интернете? Странички нужно разместить на одном из хостов... Об этом вы узнаете прочитав статью о хостинге. Помимо этого, мы рекомендуем вам воспользоваться конструкторами сайтов, представленых в этом рейтинге: Конструкторы сайтов Рунета

1Доменное имя служит для адресации узлов сети интернет и расположенных на них сетевых ресурсов. Оно должно быть уникальным в рамках одного домена.2Ip-адрес (от англ. internet protocol address) - сетевой адрес узла в компьютерной сети, построенной по протоколу IP

www.trueinfo.narod.ru

Как создать HTML сайт в блокноте

Многие начинающие веб-мастеры пытаются самостоятельно конструировать сайты, используя базовые знания HTML. Это самый трудный вариант, нежели чем воспользоваться готовыми CMS, предлагаемыми всевозможными сервисами и конструкторами. Поэтому сегодня мы хотим рассказать, как создать сайт на чистом HTML. Вам понадобится банальный блокнот или утилита NotePad++, с которой в случае с созданием сайтов работать проще. HTML - целый язык, на котором создаётся гипертекстовая разметка страниц. По своему устройству страница в HTML представляет собой большое количество тегов, которые и определяют, как будет компоноваться страница, и параметры расположения и отображения для отдельных ее элементов.

Оглавление:

  1. Использование тегов
  2. Структура
  3. Служебные HTML теги
  4. Заключение
  5. Наши рекомендации
  6. Стоит почитать

Использование тегов

Давайте познакомимся с основными элементами каркаса HTML сайта.

HTML теги

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

Тег позволяет выделить текст курсивом. Пример кода из файла HTML:

Каким образом создать сайт HTML. При открытии данной странички выше представленный текст будет выделен курсивом. Тег <Strong> выделяет определенную часть содержимого текста жирным. Однако существуют одиночные теги, которые не требуется закрывать. Речь идёт о теге "<br>"- данный тег позволяет перейти на новую строчку. Существует огромнейшее количество всевозможных тегов, позволяющих оформить собственный сайт. Для более подробного изучения вам необходимо прочитать книги о HTML "для чайников".

Структура

Вот так будет выглядеть основной код будущего сайта:

<html><head><meta name="Description" content="Описание сайт на HTML "><meta name="Keywords" content="Список ключевых запросов"><title>Название странички</title></head><body>Так называемое тело сайта (его содержимое)</body></html>

"Название странички" - это будет именование данной веб-страницы

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

На этом создание HTML-странички завершено. Далее вам необходимо сохранить файл в блокноте, но стандартно он сохранится в расширении txt. Веб-мастеру необходимо сохранить страничку в формате HTML. Для этого следует щелкнуть правой кнопкой мышки по созданному текстовому файлу, затем переименовать расширение txt в html. Теперь вы создали первую страничку на HTML, с чем вы вам и поздравляем. Давайте разберемся, что означают теги, увиденные вами в выше представленном примере. Теперь при открытие файла она будет открываться в браузере, как и сайт. Тег <HTML> демонстрирует, что файл необходимо открывать как документ в формате HTML. <Body> - показывает содержимое сайта. А расширение, указано вами для файла, укажет вашему компьютеру, открыть страничку через браузер, назначенный в вашей системе по умолчанию.

Служебные HTML теги

Благодаря тегам, ваша страница буде структурирована соответствующим образом.

В тег <Head> заключается важнейшая информация для ПС, соответственно вы не увидите его содержимого на HTML-страничке. Видно будет только содержимое тега <title>, в котором будет заключено название странички. Она описывает, что будет на ней интересного, полезного и информативного. Благодаря тегу <title> страничка попадает в поисковые системы. Именно его содержимое выводится в результатах ПС. Теги <keywords> и <Description> не являются обязательными, то есть html-страничка будет работать в случае их отсутствия. Однако они являются важными для оценки в ПС, анализа содержимого сайта, а данные параметры будут особенно полезны при продвижении.

В теге "Description" заключается краткое описание страницы, которое отображается в сниппете ПС Google. Соответственно <keywords> будут перечисляться основные ключевые запросы для определенной интернет-страницы. Ходят слухи, что ПС не анализируют тег <keywords>, но мы рекомендуем начинающим веб-мастерам всё же заполнять его. Уделите данным тегам особенное внимание, ведь от этого будет зависеть эффективность дальнейшего продвижения сайта.

Создание HTML сайта подразумевает посетителей на нем, а поисковое продвижение - самый эффективный способ получить целевую аудиторию.

Видео к статье:

Заключение

В чем прелесть статичного HTML сайта - скорость загрузки страниц. А это очень важный показатель, как для пользователей, так и для поисковых систем. С другой стороны, все необходимые изменения вам нужно будет вносить вручную. А если это сотни страниц? Поэтому можно дать простую рекомендацию. Если вам нужен маленький, легкий и быстрый сайт, можете сделать его на голом HTML. В том случае, если вы планируете большой проект, с множеством страниц и мультимедиа, то стоит обратить внимание на CMS.

Наши рекомендации

Если вам нужно завести свою персональную страничку, то стоит создать сайт бесплатно ucoz.ru.

Читайте наш новый материал - сайт сериала молодежка, который сделала Оля.

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

Стоит почитать

Зачем искать информацию на других сайтах, если все собрано у нас?

techprofi.com

Как создать сайт в блокноте HTML — пример и инструкция

1.Создайте текстовый документ.

2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).

3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.

4.Скопируйте и вставьте в него следующий текст.

<!DOCTYPE html> <html> <head> <title>Моя первая страничка</title> </head> <body> Тело HTML-документа (отображается на экране) </body> </html>

5. Сохраните изменения в файле.

Сохраняем изменения в файле

6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:

Просмотр нашего документа в браузере

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

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

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

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

«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и

<title>Моя первая страничка</title>

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

«Body» — тело. Таким образом у любого html-документа есть голова, содержащая вспомогательную информацию, и тело, внутри которого находится основной код документа. Так как наша страничка — первая, она не должна быть сложной, и поэтому тело документа содержит только текст "Тело HTML-документа (отображается на экране)"

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

и

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

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

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

www.seostop.ru

Как создать сайт через HTML

Мало платят? Неинтересная работа? В институте ничему не учат? Я тоже прошел через всё это. А потом взял и стал программистом :) О том, как я это сделал, читай тут.

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

Создание веб-страницы в HTML - это то, о чем удивительно легко узнать и что вполне понятно даже для нетехнических людей. Получится из этого может много чего, начиная от веб-страниц, созданных в чистых HTML и заканчивая кодовыми веб-сайтами на основе WordPress, Blogger или другой CMS.

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

Прежде чем вдаваться во все подробности, спросите у себя, действительно ли создание веб-страниц в HTML - это то, что вам нужно.

Кроме того, следует разъяснить, что в настоящее время существует два способа создания веб-сайта и его страниц:

  • Кустарный способ («старый»): позволяет составить свой сайт на основе создания «вручную» HTML-кода каждой из этих страниц вашего сайта и связывания их друг с другом.
  • Современный способ: использовать CMS, например, WordPress, что позволит вам создать визуально, без необходимости кодирования и компоновки содержимого в HTML.

В настоящее время веб-сайты представляют собой практически 100% CMS, подавляющее большинство которых с WordPress.

Но означает ли это, что нет смысла читать остальную часть этой статьи?

Очевидно, нет. По-прежнему имеет смысл изучать HTML. Если нет, то, очевидно, этой статьи бы не было.

Поэтому, если вам не ясно, что вы только что прочитали, сначала оцените, подходит ли создание HTML-страниц для вашего случая, или же вам лучше будет использовать CMS, например, WordPress или Joomla.

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

Как создать веб-страницу в HTML?

В конце концов, создание веб-страницы в HTML не сильно отличается от создания любого другого документа с помощью текстового редактора. Он состоит из создания файла с расширением .html или .htm и его редактирования.

В этом файле будет создано само содержание (текст заголовков, абзацев, создание HTML-форм и т.д.), а также теги HTML, необходимые для определения структуры HTML-документа.

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

Отсюда вытекает следующий процесс:

  1. Изучите основополагающий принцип HTML: создайте структурированные документы с ярлыками.
  2. Выберите лучший редактордля вашего конкретного случая.
  3. Создайте основную структуру вашей HTML-страницы: заголовок и основу.
  4. Создайте контент и примените егос помощью HTML-тегов: заголовки, абзацы текста, ссылки, изображения, таблицы, встроенные аудио и видео и т.д.
  5. Если они вам нужны, также интегрируйте интерактивные элементы.
  6. Реализуйте в своем случае на сервере логику реагирования на формы.
  7. Опубликуйте (сделайте видимой) страницув Интернете.

Что вообще такое HTML?

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

Нынешним стандартом, который регулирует HTML, является версия HTML 5, хотя многие веб-сайты все еще работают с версиями HTML 4.01 / XHTML, версии «всей жизни», но версия 5 расширилась новыми функциями, некоторые из них довольно мощные.

Выберите хороший редактор для создания HTML-страниц

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

Вы можете редактировать HTML в любом редакторе, даже в Блокноте Windows, поскольку, как вы могли видеть, HTML-код - это простой текст.

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

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.

webshake.ru

Как создать свой первый сайт

Как создать сайт

Сайты бывают разные. Самый простой вариант - это сайт-визитка. С него мы и начнем.

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

Собираем материалы

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

Создаем папку специально для файлов своего сайта. Ее можно назвать, на пример, "site"(название может быть другим, но желательно в латинице и короткое).

Создаем простую html-страничку

Страницы сайта могут быть созданы в любом текстовом редакторе при помощи языка разметки документа HTML. Откроем блокнот notepad и напишем:

<html>Это мой первый сайт. </html>

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

Теперь запомним файл под именем index.html в новой папке, которую вы создали. Откроем файл index.html с помощью броузера (на пример, Microsoft Internet Explorer). Мы увидим такую картинку:

Рис. 1. Наша первая страница.

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

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

<title>Личная страница дизайнера Николаенко</title>

В стандартных броузерах заголовок будет показан в верхней части главной рамки основного окна, как на рис. 1. Поскольку тэг <title> располагается в самом начале html-файла, то при загрузке страницы в первую очередь загружается именно заголовок документа. Далее броузер загружает основное содержание страницы, что может занять некоторое время. Таким образом, некоторое время название страницы будет единственной информацией о ней, видимой посетителю сайта.

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

<html> <head> <title>Личная страница дизайнера Николаенко</title> </head> <body> Это мой первый сайт. </body> </html>

Форматирование текста

Для примера мы скопировали первый попавшийся текст на новостном портале и вставили этот текст в наш файл после тегов <body>. В окне броузера мы видим сплошной неформатированный текст.

Рис. 2 - Неформатированный текст.

Текст гораздо лучше смотрится, если он разбит на абзацы. В html-документах для этого существует тэг <p> (и парный к нему </p>). Тэг <p> может задаваться с параметром горизонтального выравнивания align, который может иметь следующие значения: left - выравнивание по левой границе окна броузера. center - выравнивание по центру окна броузера. right - выравнивание по правой границе окна броузера. justify - выравнивание по ширине (растягивание по двум сторонам окна броузера).

Если параметр align не указан, текст выравнивается по левому краю.

Еще для форматирования текста чаще всего применяются парные тэги: <b> и </b> - отображает текст полужирным шрифтом. <strong> и </strong> - используется для выделения важных фрагментов (н.п. заголовков) текста. Броузеры обычно отображают текст между тэгами полужирным шрифтом. ...

После форматирования текста наша страничка будет выглядеть вот так: Рис. 3 - Форматированный текст.

В текст можно вставить также картинку(и). Отберите картинки или фотографии, которые планируете выложить на свой сайт, уменьшите их до желаемого размера в любом графическом редакторе и поместите уменьшенные картинки в папку site (можно даже создать для картинок сайта подпапку img или image). Для того, чтобы вставить в текст картинку, существует тэг <img>. На странице с текстом вставьте там, где хотите, чтобы была картинка, следующую строчку: <img src="картинка1.jpg">

Рис. 4 - Картинка в тексте.

Если вы хотите, чтобы картинка находилась справа или слева от текста, то для этого у тэга <img> существует параметр <align> со следующими значениями: left - изображение прижимается к левому полю окна, текст обтекает изображение с правой стороны right - изображение прижимается к правому полю окна, текст обтекает изображение с левой стороны

Если вы планируете разместить много фотографий (на пример, фото с отпуска или примеры своих работ) предлагаем сделать это с помощью готовых программ. Как это сделать описано здесь...

Связь между страницами

В предыдущем абзаце в тексте встречалась ссылка (линк) на другой сайт. Для этого используется парный тэг <a> и </a>.

На пример, так: <a href="http://ho.com.ua/photo/">здесь...</a>

Активная ссылка в тексте выделяется другим цветом и часто подчеркиванием.

С помощью тэга <a> можно также ссылаться не только на другие сайты, но и на страницы своего сайта. На пример, создадим вторую страницу и назовем ее photo.html. Создавать новые страницы можно просто копированием уже существующего файла, но с другим именем. Главное - аккуратно изменить не только текст новой страницы, но и ее заголовок (заключенный между тэгами <head> и </head>).

Разместим на новой странице какие-то картинки. Это можно сделать вручную или с помощью программ, описанных здесь... А на первой (главной) странице поставим ссылку на вторую страницу, для этого добавим такую строчку: <a href="photo.html">Мои работы можно посмотреть здесь...</a>.

Вот что получится: Рис. 5. Ссылка в тексте.

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

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

Как выложить свой сайт в Интернет

Теперь, когда работа над страницами будущего сайта закончена, и все файлы лежат в папке site, можно выложить их в Интернет. Для этого нужно подыскать для своего сайта место, т.е. хостинг (от англ. hosting - размещение web-сайта клиента на сервере Интернет-провайдера). Подробнее о хостинге для начинающих

Разумно разместить свой сайт-визитку на бесплатном хостинге ho.ua, для этого нужно зарегистрироваться. Как это сделать, можно прочитать в нашем FAQ-е (от англ. ответы на часто задаваемые вопросы):Заказ хостинга (заполнение формы заявки) - помощь пользователю.Как быстро можно приступать к работе после заказа хостинга?

После того, как ваша учетная запись на хостинге будет активирована, можно заливать файлы на сервер, используя ftp-соединение. Сделать это проще всего с помощью броузера, н.п. Internet Explorer'а. Ввведите в адресной строке броузера один из следующих адресов:

ftp://[email protected], где LOGIN - ваш логин, а sN.ho.ua (s1.ho.ua, s2.ho.ua и т.п.) - имя сервера хостинга, на котором расположен ваш сайт.

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

Рис. 6. Доступ по ftp с помощью броузера.

Копировать файлы своего сайта нужно в папку htdocs. Но перед этим рекомендуем прочитать раздел FAQ "Редактирование и настройка сайта".

www.ho.ua