1. Здравствуй, Гость ! Для получения привилегий и просмотра хайдов предлагаем группу Премиум
  2. Голосуем за Стиль сайта

Верстка. Урок №1 - Введение в HTML

Тема в разделе "HTML", создана пользователем Mimino, 28 мар 2015.

  1. Mimino

    Mimino PREMIUM

    257
    260
    63
    Здравствуйте, посетители форума Delhack.
    Мое первое знакомство с версткой произошло еще в детстве. Мне было около 10 лет, когда я догадался сохранить страничку из Интернета на компьютер и открыть её в блокноте. Я был очень удивлен и с головой вовлечен в процесс её редактирования. Я не читал "мануалов", не изучал теорию, а сразу приступил к практике, путем проб и ошибок. В то время эта тема еще не была так популярна, как сейчас.
    Около четырех лет я редактировал чужие странички, учился, пытался создать что-то свое, однако началом отсчета я считаю 2004 год. Именно тогда я сверстал свою первую качественную страницу.
    С тех пор прошло более 10 лет и я НИКОГДА не переставал верстать. Кроме того, я с отличием окончил 5 лет обучения в ШКМ по специальности "веб-программирование". Вот уже 7 лет, как верстка является моим основным источником заработка. Я могу смело сказать, что стал настоящим профессионалом в этой нише. Относительно недавно я стал основателем небольшой (пока что) веб-студии. Кроме того, уже 2 года я провожу платные консультации людей по вопросам верстки.
    Теперь я хочу написать что-то вроде уроков HTML для новичков, а форум Delhack выступит в роли моего черновика. Я буду писать здесь уроки HTML и учиться правильно преподносить информацию в своих будущих уроках.


    1. Введение в HTML
    Для начала, Вам необходимо знать о том, что HTML - это не язык программирования. Не смотря на то, что многие его относят к таковому, это не совсем верно. Кстати, Вы можете заметить, что на этом форуме ветка HTML также относится к программированию.
    Всё дело в том, что для HTML нет точной классификации. С одной стороны, мы имеем дело с кодом. С другой стороны, в чистом виде HTML может исполнять лишь информационную функцию и не имеет практически никакого взаимодействия с пользователем.
    Любой здравомыслящий человек скажет, что если файл описывают в коде - это и есть программирование чистой воды! И будут правы.
    Однако, любой программист скажет, что HTML не имеет никакого взаимодействия с пользователем, а значит это точно не программирование. И это тоже правильно.

    HTML - это язык разметки страниц.
    Язык! Но не программирования! Язык разметки!
    Это особое ответвление, которое зачастую попросту относят к "другим языкам", дабы не усложнять ситуацию. Программирование, разметка - не важно. Это языки :)
    В принципе, это самый правильный подход к вопросу.


    И так, приступим к созданию нашей первой странички HTML.
    Откройте программу блокнот:
    Пуск - Все программы - Стандартные - Блокнот
    или вариант для продвинутых:
    Win+R ---- notepad ---- ( Enter )

    В чистый блокнот скопируйте следующий код

    Код:
    <html>
    </html>
    
    Теперь подробнее остановимся на том, что мы только что сделали.

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

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

    В принципе, думаю, пока всё логично и понятно. Идем далее.

    Для наглядности и простоты понимания, предлагаю рассматривать HTML, как живого человека.
    Тем более, что HTML действительно имеет похожее строение.
    Так, к примеру, любой HTML имеет две важных составляющих - голова (head) и тело (body).

    Голова - это мысли браузера о вашем файле. Конечный пользователь не видит, какие мысли указаны в голове у HTML, однако хорошо ощущает их влияние на документ. Например, в голове могут быть указаны мысли о том, какое оформление будет у нашей страницы. Конечный пользователь не будет видеть всех этих мыслей, однако он почувствует их влияние, когда увидит оформление этой страницы.
    Впишем тэг "head" в наш HTML:

    Код:
    <html>
    
    <head>
    </head>
    </html>
    Обращаю внимание на тот факт, что тэг "head" вставлен между открытием и закрытием тега "html".
    Это потому, что мы закрываем тэги только тогда, когда хотим, чтобы влияние этого тэга закончилось. "head" - это часть "html". Если "html" закончится раньше, чем "head", то мы получим человека без головы, а рядом - лежащую отдельно голову. Это довольно страшно и вообще не правильно, поэтому мы вписали голову, как часть человека по имени "HTML".
    Поехали дальше.

    Человек не знает о мыслях, которые творятся внутри головы другого человека, однако у каждого есть лицо, которое видят все.
    Так же и в HTML. Единственная часть головы, которую видит конечный пользователь, это тэг "title".
    Это, своего рода, лицо (или имя) html.
    Конечный пользователь видит его в заголовке над страницей (в названии вкладки браузера, или названии закладки).

    [​IMG]

    Давайте впишем наш "title" в код:

    Код:
    <html>
    
    <head>
      <title>Hello, world!</title>
    </head>
    </html>
    Обращаю внимание - лицо (title) является частью головы, поэтому расположено между открытием и закрытием тега "head".
    Также, между открытием и закрытием тэга "title" мы вписали текст "Hello, world!". Таким образом, мы указали текст, который будет отображаться в заглавии вкладки браузера с нашей страницей.

    Итак,
    Мы указали, что наш человек (html) имеет голову (head), на которой есть лицо (title).
    Но человек не может существовать без туловища! (body)
    Мы открываем тег "body":

    Код:
    <html>
    
    <head>
      <title>Hello, world!</title>
    </head>
    <body>
        TEXT
    </body>
    </html>
    Как я уже говорил, body - это туловище нашего HTML.
    Туловище (body) - это и есть та самая часть кода, которую видит конечный пользователь. Именно здесь вы будете создавать оформление для вашего HTML.
    Как говорится, встречают по одежке. В HTML одежда - это всё.

    В данном конкретном примере мы не стали мудрствовать и просто добавили текст "TEXT". Своего рода, одели трусы и ничего более.

    Теперь выберите в меню "Файл" пункт "Сохранить как..."
    Выбираем тип файла: "Все файлы"
    Выбираем кодировку "UTF-8"
    Пишем имя для файла - index.html

    [​IMG]

    Открываем полученный файл в браузере и видим приблизительно вот такой результат:

    [​IMG]

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


    В ближайшее время постараюсь написать урок №2


    ===================================================================================


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


    ===================================================================================


    [​IMG]
     
    Последнее редактирование: 28 мар 2015
    TEMIKgt нравится это.
  2. TEMIKgt

    TEMIKgt Администратор Команда форума

    1.385
    1.098
    113
    Эм хороший урок спасибо
     
    Mimino нравится это.