Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
1.1 Введение в html

Автор: Denisido

Дата: 2010-07-29

Создание html документа

HTML - это язык гипертекстовой разметки, который состоит из кода и текста, содержащий инструкции для браузера (обозревателя веб-страниц) как отображать данные на экране монитора. Чтобы начать кодировать, вам необходимо использовать текстовый редактор. Самый обычный текстовый редактор - это хорошо знакомый блокнот или WordPad, которые есть на каждом компьютере. Открываете, вносите свои записи, а затем сохраняете файл с расширением .html или .htm. Другими словами структура такая:
- Файл (в самом верху документа Файл Правка Формат Вид Справка: выбираем Файл);
- сохранить как (в выбранном Файл выбираем подменю сохранить как);
- в появившимся новом окне указываем директорию, куда хотим сохранить наш файл;
- определившись с директорией, укажите произвольное имя файла с расширением html (например, kobru.html обратите внимание на точку);
- ниже в типе файла укажите все. Кодировку оставьте как есть и нажмите Сохранить.
В дальнейшем в качестве редактора мы будем применять такой вид:

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

Поздравляем, у вас теперь есть своя собственная веб-страничка на вашем локальном компьютере. Стоит отметить, если вы захотите подредактировать ваш html-файл, то нажмите по нему правой кнопкой мыши, появится меню (Открыть ... Свойства). В имеющимся списке нужно выбрать Открыть с помощью. Далее в подменю либо Блокнот, либо WordPad, в зависимости от вашего предпочтения. Хочу сразу отметить, что это стандартные текстовые редакторы на всех компьютерах, но по мимо них есть и другие, которые могут подсвечивать код для наглядности и удобочитаемости, одни платные, другие нет (среди платных хочу отметить отличный редактор - Adobe Dreamweaver). Вернемся к отредактированному файлу и сохраним изменения:
- выбираем Файл;
- далее в подменю Сохранить (наш файл уже имеет нужный формат .html, поэтому мы его просто сохраняем).

Код HTML

Теперь, когда мы создали свой html-файл, мы можем начать писать код. Код состоит из тегов (от англ. tag), или как еще их называют - дескрипторов, которые разделяются на парные и одиночные. Первые имеют следующий синтаксис:

 
.....
 

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

 
текст
 

кроме текста теги могу включать в себя другие теги:

 
текст
 

Обратите свое внимание на то, как закрываются вложенные теги! Теги должны обязательно закрываться в порядке их открытия. Такое построение напоминает матрешку.

Стоит заметить, что написание тегов возможно как в нижнем, так и в верхнем регистре, но, как правило, для удобочитаемости они записываются в нижнем регистре (так как мы показали вам выше), хотя запись в виде <TAG>...</TAG> ошибки вызывать не будет.

Теги могут включать в себя атрибуты, которые заключаются в кавычки, к примеру, в виде указания цвета (англ. color) и размера ширины (width) и высоты (height) (об этом вы узнаете позже в следующих уроках). Пример:

текст

Теперь стоит сказать пару слов об одиночных тегах. Их синтаксис прост, они не имеют закрывающегося тега, например тег изображения img (от англ. image):




Коментарии:

Коментарий добавил(а): fgh1233
Дата: 2010-07-29

Автор замечательных уроков по веб дизайну и программированию нас снова обрадовал интересной и познавательной статьей, на этот раз по основам html. Уважительно отношусь к Вашему ресурсу. Удачи.

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 14590
Категории


Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.