Главная

Заказать статью

Связь с автором

Заказать сайт

Статьи

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

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

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

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

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

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

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

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

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

<body>

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

</body>

</html>

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

Далее нажмите Файл - Сохранить как и сохраните документ на диск D или E в папку "основы html", например, с расширением .html вот так: (имя, точка, html)

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

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

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

<html>

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

</html>

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

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

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

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

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

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

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

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

Конечно теги и устаревают, их сейчас заменяют теги курсив и жирный

Чтобы пополнить баланс для оператора CallEasy.com нужно зайти на www.moroko.ru

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