Веб-дизайн (от англ. Web design), как определяют его в Википедии — это вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. А проще говоря - это умение красиво и доходчиво преподнести информацию всем желающим пользователям Всемирной паутины, используя навыки владения графическими редакторами, например, Фотошопом и знания различных языков программирования, разметки текста, таблиц стилей и других прогрессивных технологий. Что такое Всемирная паутина? Какие технологии применяются в Веб-дизайне? Что нужно для создания сайта? Все это и многое другое, вы узнаете из разделов и подразделов представленных на этом сайте. Мы вместе будем осваивать и постигать интереснейший и увлекательный мир веб-дизайна и интернета.

Правда, если Вы хотите побыстрее научиться создавать сайты и освоить все технологии, применяемые при их создании, то самый быстрый способ достижения - это видео уроки. Лучше один раз увидеть и начать что-то создавать, чем сто раз услышать и ничего не сделать... И лучшими видео уроками по веб-дизайну, на мой взгляд, являются видео уроки, которые представлены, если кому интересно, в этом разделе. Все видео уроки объясняются простым и очень доступным языком, т.е. без всяких заумных и навороченных словечек. Единственно, что придется немного потратиться, ведь видео уроки представлены на CD и DVD дисках. Зато Вы всегда будете иметь под рукой учителя, который все объяснит и пошагово приведет к намеченной цели. Как в этом случае поступить? Решать только Вам! Выбор есть всегда! Кстати, есть возможность подписаться на бесплатные видео уроки по интересующей нас теме. Подписаться на бесплатные видео уроки можно здесь. А мы продолжим отвечать на поставленные вопросы.

Всемирная паутина или World Wide Web

Изначально Всемирная паутина или WWW (от англ. World Wide Web) была создана для того, чтобы ученые могли быстро осуществлять поиск необходимой им информации. Как правило, нужная информация (обычный печатный текст) хранилась на разных компьютерах, удаленных друг от друга на большие расстояния, но соединенных между собой проводами. Предполагалось, что поиск информации должен был осуществляться с помощью одного компьютера, используя специальные команды. А чтобы эти документы можно было пересылать между компьютерами, то придумали специальные программы-серверы, которые помогали принимать, хранить и отправлять документы в электронном виде.

Еще придумали программы-браузеры (веб-обозреватели), которые занимались тем, что отправляли заявки (запросы) от пользователей программам-серверам. Программы-серверы смотрели, что было указано в заявке (запросе), находили в электронном хранилище нужную информацию и отправляли ее программам-браузерам. (В уроке по созданию сайта на бесплатном хостинге Яндекса уже давалось определение и приводился список популярных Браузеров. Еще раз напомним, что Браузер – это программа для путешествий по интернету. На данный момент существует множество таких программ, например: Interner Explorer, Mozilla Firefox, Opera, Google Chrome, Safari и другие.)

Для того, чтобы программы-серверы и програмы-браузеры могли между собой общаться и передавать друг другу заявки и документы, то для них составили строгие правила и записали в протокол. Он так и называется - протокол передачи гипертекста (от англ. HyperText Transport Protocol — HTTP). Благодаря этим правилам, программы-браузеры и программы-серверы успешно общаются и передают друг другу информацию.

А вот полученную информацию от программ-серверов, программы-браузеры уже выводят на экран. А чтобы эти документы выглядели на экране так же как на бумаге, то для этого и придумали язык разметки гипертекста - HTML (от англ. HyperText Markup Language). Он так и звучит - язык, который размечает огромное количество текста, который связан между собой в определенном порядке. Это означает, например, что для разметки абзаца существует один код (тег), для разметки заголовка используется другой код (тег), для определения размера и цвета шрифта свои коды, а для связывания электронных страниц (документов) между собой используют специальные ссылки и т.д. Вот эти коды (теги) и ссылки говорят программе-браузеру каким образом разместить текст или любую другую информацию на экране монитора. Проще говоря - это язык, который понимает программа-браузер. Она выводит информацию на экран в том порядке, который указан в коде языка разметки (HTML).

По мере развития интернета происходили изменения и в языке HTML. Это значит, что кроме текста в документы стали добавлять таблицы, графические элементы, например, картинки, фотографии и т.д. А поскольку программы-браузеры выпускают разные производители, то и понимать коды языка HTML они могут по-разному. А чтобы не запутаться в этих кодах-тегах, установили определенные правила или стандарты для языка HTML, чтобы все программы-браузеры могли их понимать одинаково и без искажений выводить информацию на экран. Пример №1 смотреть здесь...

<p> - этот тег говорит браузеру, что здесь начинается абзац, а тег </p> с косой чертой 
	говорит, что здесь абзац заканчивается.

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

<h1> и </h1> - эти теги показывают браузеру начало и конец заголовка первого уровня.

<h2> и </h2> - эти теги показывают браузеру начало и конец заголовка второго уровня
	и т.д.
	 
Обратите внимание, что все теги заключены между символами - < >

Еще теги имеют атрибуты, которые расширяют их возможности, например, атрибут align выравнивает текст по центру, принимая значение - "center", по левому краю, принимая значение "left", по правому краю - "right" или выравнивает текст по всей ширине страницы, принимая значение "justify".
Пример №2 смотреть здесь...

<p align="justify"> - этот  открывающий  тег  говорит  браузеру, что здесь начинается 
абзац. Атрибут align указывет на то, что текст, нужно выровнять, а значение "justify"
определяет, что выранивание текста должно быть по всей ширине  веб-страницы, т.е. его
нужно  растянуть от  левого  до  правого края страницы. Ну и тег </p>  с косой чертой,
является  закрывающим,  который  указывает  браузеру, что  здесь  абзац заканчивается.
             Значение "right" атрибута align выровняет текст по правому краю страницы.
     А вот значение "center" атрибута align выровняет текст посередине страницы.
Значение "left" атрибута align выровняет текст по левому краю страницы.

Вот мы и подошли непосредственно к изучению языка HTML.

HTML
(HyperText Markup Language - язык разметки гипертекстa)

Урок №1. Изучение основ HTML

Часть первая. Контейнерные теги

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

Что представляет из себя Веб-страница?

В своей основе Веб-страница представляет собой обычный текстовый файл, созданный в обычном Блокноте или аналогичном простейшем текстовом редакторе, который содержит инструкции для браузера в виде HTML-кодов, т.е. тегов и их атрибутов. Эти теги и атрибуты указывают браузеру в каком порядке нужно выводит информацию на экран монитора. В основном HTML-коды являются парными и называются контейнерными, т.е. они имеют отрывающиеся и закрывающиеся теги. В приведенном выше примере №1 видно, что тег абзаца парный, т.е. указывает браузеру где начало и конец абзаца. Текст, заключенный между этими тегами, находится, как бы, в контейнере. Поэтому такие теги называются контейнерными или парными. А тег переноса строки, который говорит браузеру, что в этом месте нужно перейти на следующую строку - одинарный и не нуждается в закрытии. Еще существуют HTML-коды разделов, которые являются более значимыми тегами, так как между ними заключаются все остальные. Они тоже являются парными или контейнерными, т.е. имеют открывающий и закрывающий тег. Пример №3 смотреть здесь...

<html></html> - эти теги разделов ставятся в начале и конце веб-страницы и заключают в
себе все остальные HTML-теги. Они указывают  браузеру где  начинается и  заканчивается 
веб-страница.
Следующими за открывающим  <html> тегом идут открывающий  <head> и закрывающий </head>  
теги заголовка  веб-страницы,  между которыми помещается служебная  информация. Она не
выводится браузером на веб-странице, а  используется  поисковыми  системами  и другими 
программами  в  служебных  целях. Среди HTML-тегов  и информации, которая помещается в
раздел заголовка (между открывающим  <head>  и  закрывающим  </head>  тегами), браузер 
отображает  только  название веб-страницы, заключенное между тегами <title> и </title>

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

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

Ниже представлен простейший пример всех упомянутых выше тегов.
-------------------------------------------------------------------------------------
<html>
   
   <head>
   
   <title>Моя пробная страница. Этот текст отобразится в заголовке браузера!</title>
   
   </head>
   
   <body>
    
    <h1>Это заголовок первого уровня</h1>
    
    <h2>Здесь можно вставить заголовок второго уровня!</h2>
    
    <p align="justify"> Этот открывающий тег р говорит браузеру, что здесь начинается 
    абзац. Но  при  выводе  этого  абзаца  его видно не будет, потому что он является 
    исполняемым кодом. Атрибут align указывает на то, что этот текст нужно выровнять, 
    а значение "justify" определяет, что  выравнивание  текста  должно происходить по 
    всей  ширине веб-страницы, т.е. его нужно растянуть  от  левого до  правого краев 
    страницы. <br> br - переведет текст, стоящий  после  него  на  следующую  строку. 
    Ну и /p с косой чертой является закрывающим тегом, который сообщает браузеру, что 
    здесь  абзац  заканчивается  и  эти  правила   дальше  не  распространяются. </p>
    
    <p align="left">Значение "left" атрибута align  выровняет данный  текст по левому 
    краю веб-страницы.</p>
    
    <p align="center">Значение  "center"   атрибута  align   выровняет   этот   текст  
    посередине веб-страницы.</p>
    
    <p align="right">Значение "right" атрибута align выровняет текст  по правому краю 
    веб-страницы.</p>

   </body>
   
</html>
-------------------------------------------------------------------------------------	 
Обратите внимание, что все теги заключены между стрелками - < >, а их атрибуты  взяты 
в кавычки. Закрывающие теги имеют косую черту. А текст, заключенный  в  теги, которые 
без атрибутов, например h1 и h2, будут выровнены по левому краю по умолчанию.

Попробуйте проделать тоже самое на практике и посмотрите, что из этого вышло. Для этого создайте в Блокноте или другом текстовом редакторе файл, скопируйте код из примера, сохраните файл с расширением html или htm и откройте в вашем браузере. Как это делается, если кто не знает, было показано в четвертой части урока по созданию сайта на бесплатном хостинге Яндекса. У тех, кто все сделал правильно должна получиться вот такая веб-страничка смотреть здесь...

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