| HTML начинающим
Эта страничка поможет Вам сделать этот первый
шаг в освоении сайтостроительства. Основа сайтостроения – язык HTML
(ХТМЛ) (от англ. HyperText Markup Language - «язык разметки
гипертекста») - стандартный язык разметки документов во Всемирной
паутине. Большинство веб-страниц создаются при помощи языка HTML (или
XHTML). Язык HTML интерпретируется браузером и отображается в виде
документа, в удобной для человека форме. Существует большое количество
веб-инструментов, позволяющих создавать сайты любой сложности, и
новичков охватывает тихий ужас от первого знакомства с ними. Не нужно
впадать в отчаяние. Больше половины сайтов в Интернете созданы только с
помощью языка ХТМЛ. Освоив предлагаемый материал Вы сможете строить
довольно приличные сайты, которые не стыдно будет выставить на всеобщее
обозрение. А совершенству нет предела. Основная часть моих статей
посвящена изучению языка HTML. В качестве вспомогательного материала
здесь предложены таблица цветов, таблица основных тегов, знакомство с мета тегами. Конечно, многое здесь дано в несколько сокращенном виде, но для начала и создания полноценного сайта этого вполне достаточно. И так начнем!
Прежде всего, перед началом работы создайте на вашем компьютере
отдельную папку для будущей страницы. У себя на компьютере я создал
такую папку на диске Е и назвал ее Мой первый сайт. Вы, естественно,
можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь
откроем блокнот - notepad (start → programs → accessories → notepad или
пуск → программы → стандартные → блокнот) и скопируем туда следующий
текст: <html> <head> <title>Моя первая страничка </title> </head> <body> Это моя первая страница. У меня все получится. </body> </html> Сохраним этот документ, присвоив ему имя index.html - Файл → Сохранить Как (File → Save as)
Сохраняете документ именно с таким именем index.html, а не просто index
расширение *.html должно быть обязательно, иначе у вас ни чего не
получится. Если вы уже сохранили ваш документ, как *.html, то при
внесении изменений в этот документ вы можете уже сохранять его через
Файл → Сохранить (File → Save). (Я у себя на компьютере сохранил на Е: диске в папке: Мой первый сайт, с именем index.html Е:/Мой первый сайт/index.html)
Теперь откроем браузер, к примеру, Internet Explorer, и откроем в
браузере Ваш документ. Файл - Открыть - кнопка Обзор - Ваш документ
(index.html) Если вы что-то измените в вашем *.html документе (в
блокноте), то, чтобы посмотреть, как это выглядит в вашем браузере, надо
не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не
видно, то это значит, что вы где-то что-то неправильно написали, или
забыли сохранить документ (блокнот). Посмотрим теперь, что у нас
получилось, и разберемся, как все это работает. html не является
языком программирования, он предназначен для разметки текстовых
документов, с помощью него вы размечаете текст, таблицы, картинки и т.д.
на вашей странице. То, как будут выглядеть картинки, текст и другие
элементы на вашей странице, и как они будут располагаться относительно
друг друга, определяют метки (tags или тэги).
Пример тэга: <br> он отвечает за перенос текста на другую строку.
Попробуйте вставить еще несколько тэгов <br> в нашем документе
перед «У меня все получится.». Сохраните. Посмотрите в вашем браузере,
что получилось. Итак, все, что находится между < и > - это тэг.
Текст, не находящийся между такими скобками < > весь виден при
просмотре в браузере. Как вы видите на нашем примере: тэгов много, и
они разные. В нашем примере присутствуют обязательные теги, это такие
теги, которые вы всегда должны прописывать для каждой своей страницы. <html> Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий: </html> Некоторые тэги, вроде <br> или <hr>, не требуют закрывающего тэга. <html> <head> <title>Моя первая страничка </title> </head> <body> Это моя первая страница. <br> У меня все получится. <hr> </body> </html> <head> </head> - голова документа <body> </body> - непосредственно тело документа Все тэги, расположенные между <head> и </head>, это что-то вроде служебной информации.
<title>- заголовок документа. Зачем он? Откройте Internet Explore
с вашим документом и посмотрите на заголовок окна. Все, что будет
написано между <title> и </title> будет отображаться в
заголовке вашего окна. Все тэги, расположенные между
<body> и </body> - непосредственное содержание документа.
Следующие несколько страничек будут посвящены именно этим тэгам: вы
узнаете, как менять цвет текста, фона, как делать текст крупнее или
мельче, я расскажу как вставлять картинки в ваш документ, рисовать
таблицы и многое другое. Но прежде, чем мы закончим наш разговор о
тэгах, я хотел бы обрисовать всю картину в общем. <тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст). Обратите внимание: <тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>
Только такая очередность написания тэгов верна: тэг, который мы открыли
первым - закрываем последним, второй - предпоследним и так далее. Следующая очередность написания тегов нежелательна и не верна, она может привести к ошибкам на вашей страничке: <тэг1><тэг2><тэг3> ... </тэг3></тэг1> </тэг2> Будьте внимательны, и пишите код своих страничек внимательно и вдумчиво.
<Для начала потренируйтесь в блокноте, создавайте гипер-ссылки, поменяйте цвет фона.
Дальше нам понадобится HTML-редактор, советую взять "HTML-Reader Rus".
Скачать HTML-Reader Rus
| |