Почему все-таки стоит обучиться основам создания сайта?

На сегодняшний день число сайтов в Интернете переваливает за миллионы. Сейчас, практически каждый человек может стать Интернет-пользователем. Для этого необходимо всего лишь компьютер и подключение к Глобальной сети по известным сетевым протоколам передачи данных.

Каждый человек, подключившийся к сети Интернет, автоматически переходит в статус «Пользователь». Любой желающий пользователь может заявить о себе, создав страничку в Интернете. Например, можно создать страничку с личными фотографиями, или информацией о своем бизнесе, работе, хобби, личной жизни, обучающими материалами и т.д.

Создание веб-странички не занимает особо много времени, если вы знакомы с основами создания сайтов. В основах лежит изучение языка гипертекстовой разметки HTML (Hyper Text Markup Language). Но если вам не знаком язык HTML, то не расстраивайтесь. В этой статье будет кратко изложено пошаговое создание  HTML-страницы (веб-страницы).

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

А сейчас, перейдем непосредственно к решению главной задачи – создадим веб-страницу у себя на компьютере, запустим её и протестируем.

Создание Web страницы HTML

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

Такая страница создается достаточно просто, с помощью текстового редактора «Блокнот» или специализированного редактора кода, например, «NotePad++». В этой статье описывается создание через программу «Блокнот». Это наиболее удобный и простой вариант создания веб-страниц.

Для того, чтобы создать страницу HTML в блокноте, необходимо сначала создать сам текстовый документ. Для этого на рабочем столе щелкните правой кнопкой мыши, чтобы открыть контекстное меню и из него выберите пункт «Создать», и в открывшемся списке создаваемых программ выберите «Текстовый документ.txt».

Откройте только что созданный текстовый документ и выберите в пункте меню <Файл> <Сохранить как…>. Укажите имя документа «index.html» и выберите место, куда будет сохранен файл. Заметьте, что сначала указывается имя документа, а затем его расширение, которое указывается через точку после имени. Таким образом, у вас должен получиться самый настоящий файл Интернета или гипертекстовый документ (веб-страница).

Пример сохранения документа в формате HTML:

Пример сохранения документа в HTML формате

Созданный первоначально текстовый документ с расширением TXT нам больше не понадобиться. Его можно удалить. Мы будем работать непосредственно только с файлом «index.html».

Найдите сохраненный ранее файл «index.html» и щелкните на нем правой кнопкой мыши. В открывшемся контекстном меню выберите пункт «Изменить». Файл откроется в обычном текстовом редакторе и будет доступен для внесения в него изменений. Файл должен быть в кодировке UTF-8. Как его сделать в этой кодировке, читайте в статье «файл в кодировке utf-8»

Любой веб-документ содержит символы HTML, которые принято называть «теги». Любой HTML-документ всегда начинается с тега <html>. Как вы заметили с обеих сторон слова html стоят угловые скобки. Это общепринято консенсусом W3C. Чтобы все теги HTML были заключены в угловые скобки. Возьмите себе это за правило.

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

Теги, о которых говорилось выше, называют «открывающие теги». В HTML существуют несколько видов тегов. Нас, пока что, интересуют только два вида тегов. Одни называются «открывающие теги» другие «закрывающие теги». Закрывающие теги очень похожи на те, что были ранее открыты, только в самих угловых скобочках перед именем тега ставится знак «слэш вправо»: </тег>.

Пример создания HTMLстраницы

Теперь, чтобы понять выше написанное, продемонстрирую пример написания того, что вы, собственно, уже прочитали:

Создание HTML страницы

Наша страничка практически готова. Осталось разместить содержимое страницы, с помощью тегов разметки.

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

Самое простое форматирование производится с помощью обычного HTML, а более сложное, такое как верстка дизайна, делается с применением каскадных таблиц стилей – CSS (Cascading Style Sheet).

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

Далее мы разберем:

  • заголовки
  • параграфы
  • цитаты
  • начертание текста

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

Форматирование текста в HTML похоже на обычную работу в Microsoft Word, только при работе с HTML вы придаете тексту другой вид не с помощью кнопок на панели инструментов, а с помощью кода, который пишите самостоятельно, для того или иного фрагмента текста.

Начнем с самого простого – элемент параграфа <p>. Этот элемент позволяет разграничить текстовые блоки, как абзацы. Тег параграфа «p» нужно применять, когда вы используете большое количество текста на странице для удобочитаемости.

Для выделения какого-либо фрагмента текста полужирным начертанием используют тег <strong>. Для выделения текста курсивом используют тег <em>. Для подчеркивания текста используют тег <u>. Далее мы рассмотри применение этих тегов на практике.

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

В HTML также предусмотрены заголовки, которые разбиты по уровню вложенности от 1 до 6. Определяется заголовок тегом <h1>-<h6>. Заголовок <h1></h1> считается самым главным, самым важным на странице, и может быть использован только один раз в пределах одного документа. Вторым по уровню важности идет заголовок <h2></h2>. Ну и так далее до <h6>.

В отличие от заголовка <h1> остальные заголовки можно использовать неограниченное количество раз в пределах одного документа, с соблюдением уровня вложенности.

Теперь на практическом примере разберем, как же выглядит HTML-код, с применением вышеизложенных тегов:

Теги форматирования HTML

После того, как вы написали подобный код, можете смело запускать файл «index.html» на своем компьютере и посмотреть результат.

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

Спонсор статьи: Желаете стать Интернет-предпринимателем? Иметь в работе десятки сайтов и получать качественную статистику по продвижению ваших проектов в сети? В этом вам поможет система управления задачами — Majento (majento.ru). Она предназначена для организации командной работы и призвана облегчить контроль продвижения Веб-проектов в различных поисковых системах. Мадженто — Интернет-бизнес «на ладони»!

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 6 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 5 комментариев к этой статье:
  • Peter, 23.04.2012 в 15:13

    Я начинал создание сайтов с подробного изучения HTML, PHP и CSS. И никак не пойму тех людей, которые лезут в веб-строительство, создают блоги (сайты они создавать не умеют) на том же Вордпрессе, а сами даже основ языка не знают и код подправить не могут.

  • Олег Астанин
    Олег Астанин, 24.04.2012 в 05:17

    Я начинал вообще с какой-то задрипанной книженции, и уже после этого купил себе настоящую настольную книгу по PHP CSS & JS. Прошел на Интуите несколько курсов, прошел в реале курсы по созданию (отдал 6 тыщ ни о чем). Теперь всю эту кашу пытаюсь на своем блоге и для себя и для других разложить по полочкам. А что касается основ, то эта статья лишь поверхностная. Вы ведь знаете что тот же самый тег параграфа: блочный (если нужно делаем строчный!), парный, закрывающий тег не обязателен, имеет атрибуты и свойства и т.д., и это без применения CSS. А если дело дойдет до CSS, то тут уже в одну статью сложно будет уложиться... В будущем планируется полная техническая спецификация на русском языке. Потому что даже htmlbook не все описывает характеристики, что мне иногда нужны, приходится искать на других ресурсах. Вот хочу этот пробел заполнить... И, кстати, я сайт тоже не создаю свой с нуля, у меня тоже ВП стоит, но это лишь потому что у меня на это не хватит времени, или я буду писать сайт около года а может и больше... я отдыхаю 2 часа в день и 6 сплю))) вот... жизнь, блеать!

  • Pavel, 06.05.2012 в 19:34

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

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

  • Олег Астанин
    Олег Астанин, 09.05.2012 в 05:56

    Ну ведь можно создавать проекты не писав их с нуля! Я вот, например, не умею программировать, но кое что понимаю в этом, и даже раньше были попытки написания своего движка. Написал. Но он так и не получил популярность. Мне по душе верстка, HTML, CSS, JQuery, Photoshop... а зарабатывать можно разными способами имея сайт. Я уже говорил о том, как я заработал первые 42 рубля. Это только начала. У меня много знакомых, которые имея сайт (блог) зарабатывают от 20 т.р. каждый месяц. Но они упорно трудятся и четко знают свои цели. Я тоже решил набраться опыта и достичь своей цели. И как всегда, буду очень рад поделиться с вами своим опытом, чтобы на примере моих достижений «новички» видели какой есть пусть достижения, и что он вообще существует.

  • Амир03.04.2016 в 01:32

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

    Если бы я начал именно с 2012 года, знал бы что интернет будет заполнен инфобизнесом, наверняка к этому моменту я бы имел сотни, а может и тысячи подписчиков. Поэтому кто всё еще думает, дерзайте господа.

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

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter