Главная Заказать статью Связь с автором Заказать сайт Статьи Сказать спасибо

Создание сайта с помощью html

Обратите внимание, что сайт можно заказать у нас, приблизительная стоимость 100$. Чтобы подать заявку и узнать подробности перейдите сюда. Также вы можете

Курс видеоуроков

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

Можно создавать сайт по готовому шаблону, конструктору, можно создавать его на основе движка CMS, написать вообще все коды самому с нуля. А есть так называемый графический способ создания сайта с помощью html, например. У всех этих способов есть свои плюсы и минусы. Я не буду сейчас рассматривать данные способы, а сразу перейду к делу. Я использую графический способ создания сайта, так как считаю оптимальным как для себя, так и для новичков и даже профессионалов.

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

  1. Изучение основ html - создание сайта в блокноте
  2. Создание дизайна сайта в фотошопе
  3. Нарезка дизайна в фотошопе
  4. Работа над сайтом в dreamweaver или блокноте

Создавая сайт по данному способу вам придется изучить основы языка html. Не надо только пугаться, поверьте, на самом деле все просто. И хочу еще предупредить, что без кое-каких знаний языка html вы далеко не уедете. Язык html доступен абсолютно для всех. Так вот, здесь мы будем учить основы html.

Итак, начинаем создание сайта с помощью html в блокноте.

Вы уже, наверное, догадались что нам понадобится блокнот или Wordpad. Открываем его.


<html>
<head>
<title>Создание моего первого простейшего сайта с помощью html в блокноте</title>
</head>

<body>

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

</body>

</html>


Это так сказать минимальный неизменный набор html тегов, с которого и будет создаваться новая интернет-страница. Скопируйте этот код и вставьте его в блокнот.

Далее нажмите Файл - Сохранить как. Откроется окно сохранения. Здесь выбираем папку, куда хотим сохранить наш документ на компьютере. Я предлагаю создать папку "основы html". Теперь нужно прописать имя файла. Здесь нужно прописать имя обязательно с расширением .html вот так, как на рисунке. Для тех, кто не знаком с расширением файлов, объясню более подробно: вначале пишется имя по вашему выбору, затем нужно поставить точку и сразу после точки нужно прописать html. Внимательно следите за тем, чтобы ваш блокнот не добавил в конце имени .txt. (sait.html.txt). В этом случае html-страница не получится, а в итоге файл будет обычным блокнотовским. Следовательно удаляем лишнюю запись .txt и получаем файл как html-страницу.

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

Откройте полученный html документ, у вас должно получится следующее:


То, что вы видите в <> таких скобках и есть теги языка html, это как зашифрованные обозначения команд, действий. Так вот теги вообще могут быть парными и не парными. Парные теги имеют открывающийся тег и закрывающийся тег и выглядят они так:

<html>

Начало html документа и конец html документа. Закрывающийся тег отличается от открывающегося наличием слеша (наклонной) перед html.

</html>

Теперь давайте немного разберем что мы сделали и что это за минимальный набор html тегов.

Открывающим тегом <html> мы говорим, что html документ начался, следовательно закрываться он должен в самом конце. Это первое.

Следующий наш тег <head> - это как бы "шапка" или "голова" документа. Внутри "шапки" мы пишем название нашего документа, которое вставляем между тегами <title>Название</title> и которое впоследствии будет отображаться в браузере в самом верху окна на синем фоне. Все, название мы написали, теперь тег </head> закрывается.

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


Запомните! Парные теги должны быть правильно вложены. Не буду объяснять в теории, приведу пример:

Возьмем любое слово, допустим ТЕКСТ. К примеру, мы захотели его выделить жирным шрифтом, получаем <b>ТЕКСТ</b>. Но кроме этого нам нужно еще выделить его курсивом, делаем так: <i><b>ТЕКСТ</b></i> или так <b><i>ТЕКСТ</i></b>

Обратите внимание как вложены теги, ни в коем случае не делайте так: <i><b>ТЕКСТ</i></b> или так <b><i>ТЕКСТ</b></i>

Думаю, суть вы поняли как правильно должны быть вложены теги, то есть 1-4, 2-3 (первый с четвертым парные и второй с третьим)

Конечно теги <b> </b> и <i> </i> устаревают, их сейчас заменяют теги <em>курсив</em> и <strong>жирный</strong>

return_links(1); ?>

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

  1. <html> - начало интернет-страницы, парный
  2. <head> - "голова" документа, парный
  3. <title> - название документа, парный
  4. <body> - тело документа, парный
  5. <strong> - жирный, парный (<b>)
  6. <em> - курсив, парный (<i>)

Создание сайта с помощью html
Как задать цвет фона в html
Добавление картинки на сайт
Изменение размера шрифта в html
Выравнивание сайта по центру
Как сделать активную ссылку
Создание таблиц в html
Объединение ячеек таблицы в html

return_links(); ?>



cubass - копирайтер на TextSale.ru Рейтинг@Mail.ru Rambler's Top100 PR-CY.ru

© 2009-2012 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!