Судя по предварительной статистике, пока число слушателей рассылки не большое. Несмотря на это рассылка будет выходить!!! Начнем. Жду ваших пожеланий по частоте выхода рассылки.
Прошу сразу перестать читать тех, кто планирует писать свой будущий ресурс в программах типа Word, Font Page, Dreamweaver… То есть тех где написание идет на визуале, тут как вы понимаете и речи ни какой не может быть о изучении HTML. Недостатков при написании на визуале, могу назвать несколько:
1. - лишние тэги, увеличивают размер страницы вдвое. Проверить это просто, возьмите любой HTML документ, откройте в Word и сохраните. Смотрим результат, размер увеличился вдвое, при визуальном сходстве. Какой это несет негатив, расскажу позже.
2. - вы не контролируете исходный текст страницы.
3. - такие страницы не любят поисковики.
Сам я пишу, свои страницы, в замечательной проге Web Coder, именно на нее ориентируясь, будут написаны уроки. Поэтому все кто желает понять и свободно владеть HTML , качаем по этой ссылке (600 кб). Собственно этот почти тот же блокнот (единственный толковый продукт от Microsoft), только ориентированный на HTML (также и другие языки). Самое главное есть цветовое выделение тэгов (о них узнаете позже), возможность вставки часто используемых тэгов
(пока советую прописывать все самим), моментальное отображение результаты.
Начну с самого простого, но не менее важного.
Весь интернет состоит из Web-страниц, которые размещены они на серверах соединенных в единую сеть. Написаны эти страницы в основном на языке HTML. Помимо этого есть и другие, но мы пока их затрагивать не будем.
HTML - это своего рода разметка документа. Эти разметки служат для браузеров (например, Internet Explorer, Opera, именно на эти браузеры мы будем ориентироваться в будущем), то есть вы, когда посещаете web-страницу, видите уже результат обработки вашим браузером, кода страницы.
Пример: *** Этот текст, отражается - полужирным ***, чтобы браузер, отобразил участок текста, подобным образом HTML-разметка должна быть такой:
<b>Этот текст, отражается - полужирным</b>
Как вы можете заметить между символами < >, и заключаются указания для браузеров - тэги.
Также вы видите, что "тэг открывается" (<b>)- и закрывается (</b>). Данные между двумя тэгами - контейнер.
Запомните!!! Каждый открытый тэг (по правилам W3C - официально признанная спецификация языка), должен сопровождать аналогичный закрытый!!!
Исключение составляют - <br> - новая строка; <hr> - горизонтальная линия. Эти тэги не закрывать!!!
Приступаем к следующей части, теперь разберем простое строение любой страницы.
Предварительно создаем папку на диске (например - мой сайт), здесь вы будут содержаться файлы вашей будущей страницы. Это будет своего рода аналогия, вашего сайта размещенного на сервере.
Создали папку? Если да, создаем текстовый файл. Переименовываем его в index.html - главная страница вашего сайта. Открываем в блокноте и вбиваем туда следующее:
<html>
<head>
<title>Мой первая страница </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Привет мир.
<br>
Это моя первая страница! И на этом я не остановлюсь.
</body>
</html>
Сохраняем файл. Все теперь открываем получившееся, запоминаем этот момент, это начало вашего пути в познании HTML, чем он закончится зависит только от вас!!!
Теперь разберем, какой тэг за что отвечает:
<html> - с него начинается любая страница написанная HTML. Этот тэг указывает браузеру на тип документа.
</html> - указывает браузеру на окончание, страницы.
<head> - голова документа. Все тэги находящиеся в этом разделе страницы, не отражаются за исключением <title>Заголовок страницы</title> (отображается в заголовке браузера). Эта часть документа служит источником данных для браузера, а также поисковых систем. Эту часть документа можно и не прописывать, но мы пишем ГРАМОТНЫЕ СТРАНИЦЫ. Подробнее о составе этой части, будет рассказано позже.
<body> - тело документа. Основа вашего документа, именно эта часть отображается при просмотре в браузерах.
Теперь первое задание - открываем файл в Web Coder, теперь вы видете, что все тэги выделяются - фиолетовым. Сделайте текст "Привет мир" жирным, поставьте между двумя строчками горизонтальную полосу. Все пишем сами, каждый тэг, только так вы чему то научитесь. Ну, как получилось? Просмотреть получившееся можно нажав "кнопку с изображением - треугольника" (рядом с лупой).
Рекомендую на первое время, положить перед собой листок, и писать туда тэги, которые вы узнаете впервые. Так будет легче ориентироваться, и легче запомнить на будущее.
Усложняем задачу - берем произвольный текст, вставляем между тэгами <body> </body>, и экспериментируем с выбранным текстом. Не ленитесь, именно начиная с таких азов, вы в будущем научитесь строить более сложные страницы.
Особо не терпеливым, можно загружать сделанную страницу в интернет. Думаю, для начального проекта вполне подойдет бесплатный сервер типа www.narod.ru (самый популярный бесплатный хостинг). Помимо Narod, есть и множество других, достаточно ввести в любом поисковике - "бесплатный хостинг", и вы получите целый список.
Narod рекомендую потому что там есть достаточно простая система управления будущим сайтом, также предоставляют гостевую книгу. Да я и сам начинал с этого хостинга, что у меня получилось, можете посмотреть по этой ссылке http://mastermontaga.narod.ru .
Ну, как решились, открыть собственный сайт? Если да то заходим, регистрируетесь. Не забудьте перед этим придумать логин и пароль (чем сложней, тем лучше):
После регистрации заходим в мастерскую.
Находим ссылку - управление файлами, жмем на нее. Теперь ищем "загрузить файл". В открывшемся окне, прикрепляем приготовленный index.html.
Загружаем.
Вбиваем в браузере, адрес своего ресурса. Если все сделали правильно, вы должны видеть изготовленную страницу.
Это будет началом жизни вашего проекта. Не забудьте скинуть мне ссылку, на ваш ресурс, чтобы я его добавил со следующей рассылки, на всеобщую заценку. Сайты построенные по шаблонам, в визуальных редакторах размещать не буду!!!
Внимание!!! Если вы решили открывать свой ресурс на Narod, всавте этот код без изменений, перед тэгом </body>
Это счетчик - количество посетителей, которые посмотрели страницу, на которую установлен этот код.
В следующем уроке рассмотрим, тэги форматирования текста. А также параметры тэга <body>.
Свои вопросы, пожелания, замечания можете задать:
В этой колонке, будут ссылки на ваши проекты. Которые создаете по моим урокам. Достаточно выслать на softsmm@mail.ru адрес вашего ресурса. Внимание!!! Принимаются только ресурсы, которые создаются по моими урокам, содержание, наполнение значение не имеет.