Сайт своими руками ру
ЭНЦИКЛОПЕДИЯ СОВРЕМЕННОГО САЙТОСТРОЕНИЯ

Краткая инструкция по созданию первой страницы

Тема в разделе "Пошаговые инструкции: создаём макет сайта", создана пользователем Мефистофель, 8 фев 2016.

  1. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Информация для тех, кто решил создать первую в своей жизни страницу. Файл для офф-лайн использования прикреплен к посту.

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

    Итак, начнем:


    Синтаксис HTML

    HTML-документ можно создавать в любом текстовом редакторе, хоть Блокноте,

    Web-страница имеет две «стороны»: одна – внешняя, которую видят пользователи, другая – HTML-код, с помощью которого формируется эта web-страница.

    Любая Web-страница представляет собой набор элементов, которые являются её составными частями (текст, изображения, ссылки, таблицы и т.д.).

    HTML-код страницы набирается обычным текстом. По сути, web-страница – это текстовый файл. Кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tag - метка).

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

    Общий синтаксис написания тегов следующий
    upload_2016-2-8_10-51-5.png

    Таким образом, теги бывают двух видов:

    · одиночные (одиночный тег используется самостоятельно)

    · парные (парный тег может включать внутри себя другие теги или текст)

    Теги заключены в угловые скобки.

    Парный тег имеет две части: открывающую и закрывающую с добавлением косой черты.

    Структура HTML-документа

    Настройте редактор так, чтобы он «понимал» синтаксис языка HTML.
    upload_2016-2-8_10-50-34.png


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

    Рассмотрим пример простой web-страницы, содержащего основные теги. Наберите содержимое данного примера в текстовом редакторе Notepad++.

    Пример 1. Простая web-страница.
    upload_2016-2-8_10-51-31.png

    Создайте папку и сохраните в ней документ под именем example.htm. Тип файла должен быть указан как HTML.
    upload_2016-2-8_10-51-52.png

    Откройте файл (двойным щелчком) в браузере и увидите результат.
    upload_2016-2-8_10-52-14.png

    Далее разберем отдельные строки нашего кода.

    Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE HTML>. Этот тег является обязательным.

    Тег <html>…</html>определяет начало и конец HTML-файла.

    Контейнер <head>…</head> является заголовком документа. Он содержит служебную информацию.

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

    Тег <title>…</title> определяет текст заголовка или название веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в заголовке окна браузера.
    upload_2016-2-8_10-52-38.png

    Тег <title>…</title> является обязательным и должен непременно присутствовать в коде документа. Он размещается в заголовочной части документа, т.е. между тегами <head>…</head>.

    Содержимое заголовочной части <head>…</head>не отображается на странице за исключением контейнера <title>…</title>.

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

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

    В данном случае, в теле документа размещен заголовок и два абзаца, размеченные соответствующими тегами.

    <h1>Заголовок</h1>

    <p>Первый абзац.</p>

    <p>Второй абзац.</p>

    Строка

    <!-- Комментарий -->

    является комментарием.

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

    Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!—и заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет.

    Таким образом, любая веб-страница имеет следующую структуру.
    upload_2016-2-8_10-53-12.png

    Задание для самостоятельного выполнения.

    Создайте простую веб-страницу по приведенному выше образцу. В качестве названия страницы введите Первая самостоятельно выполненная страница .

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


    Блочные элементы

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


    <h1>,<h2>,...,<h6>

    Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. В HTML-документе поддерживаются заголовки шести уровней.

    Выполните пример 2.

    Пример 2. Текстовые заголовки разного уровня
    upload_2016-2-8_10-53-49.png
    upload_2016-2-8_10-54-7.png

    Заголовки выделяются браузером при показе HTML-документа размером шрифта и жирностью. Использовать заголовки нужно очень аккуратно в соответствии с его логическим уровнем в структуре документа. Не следует использовать теги h1–h6 для выделения обычного текста. Они применяются именно для заголовков.

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

    Например, название учебника - это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав - это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня. Параграфы состоят из пунктов, обозначенных заголовками четвертого уровня.

    Задание для самостоятельного выполнения.

    Создайте веб-страницу, содержащую следующее оглавление. Используйте заголовки соответствующих уровней.

    Пример 3. Создание оглавления.

    Основы дизайна.

    1. Пространственные отношения.

    1.1. Размер.

    1.1.1. Относительность размера.

    1.1.2. Искусство выравнивания текста.

    1.2. Пропорции.

    2. Форма.

    2.1. Прямые.

    2.2. Прямоугольники.

    2.3. Кривые Безье.




    <p>

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

    Закрывающий тег </p> необязателен.

    Тег <p>, записанный без атрибутов, по умолчанию выравнивает текст по левому краю страницы. Но он и некоторые другие теги, например <h1> могут содержать дополнительный атрибут align (читается "элайн", от английского "выравнивать"). Однако в настоящее время для выравнивания элементов рекомендуется использовать стили.

    <palign=left> -- выравнивает абзац по левому краю

    <palign=right> -- выравнивает абзац по правому краю

    <palign=center> -- выравнивает абзац по центру

    <palign=justify> -- выравнивает абзац по ширине


    Выполните пример 4.

    Пример 4. Тег абзаца.
    upload_2016-2-8_10-55-2.png
    upload_2016-2-8_10-55-17.png

    <hr>

    Тег <hr> рисует горизонтальную линию, которая зависит от используемых атрибутов. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Закрывающий тег не требуется.

    Атрибуты:

    align - Определяет выравнивание линии.

    color - Цвет линии.

    noshade - Рисует линию без трехмерных эффектов.

    size - Толщина линии.

    width - Ширина линии.

    Выполните пример 5.

    Пример 5. Коллекция горизонтальных линий
    upload_2016-2-8_10-55-41.png
    upload_2016-2-8_10-55-59.png

    Самостоятельно измените значения параметров. Просмотрите результат.


    <blockquote>

    Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

    Выполните пример 6.

    Пример 6. Цитата
    upload_2016-2-8_10-56-21.png
    upload_2016-2-8_10-56-39.png

    Обратите внимание на характерные отступы.



    <div>

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



    <pre>

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

    Выполните пример 7. С помощью звездочек напишите своё имя.

    Пример 7. Тег преформатирования upload_2016-2-8_10-57-1.png
    upload_2016-2-8_10-57-19.png


    Строчные элементы

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



    <BR>

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

    Выполните пример 8.

    Пример 8. Разрыв строки
    upload_2016-2-8_10-57-44.png
    upload_2016-2-8_10-58-0.png

    <span>

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

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



    Разница между блочными и строчными элементами следующая:

    · Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы

    · никак не могут хранить блочные элементы.

    · Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.

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

    Вложения:

    #1
    2. Загрузка...
    Похожие темы
    Пошаговая инструкция обновления