HTML (Hyper Text Markup Language - язык гипертекстовой разметки) - основа, по которой строятся веб-страницы. В этой статье я покажу, как создать простую веб-страницу. Также вы узнаете о тегах и атрибутах.
Сложность: для новичков
Что нужно для создания веб-страниц
Минимальный набор для создания веб-страниц у вас уже есть. Это:
1.любой текстовый редактор - для начала вполне подойдет "Блокнот" Windows, рекомендуется использовать его для лучшего запоминания тегов HTML (в "Блокноте" верстают настоящие профи:) ). Позже можно установить более профессиональный html-редактор, например HTMLReader, Notepad++, PSPad editor, Textpad и другие подобные программы, которые сделают работу более удобной.
Примечание: также помимо текстовых редакторов существуют еще и визуальные или так называемые WYSIWYG-редакторы. Страшная аббревиатура? До тех пор, пока вы не знаете ее расшифровку - What You See Is What You Get ("что вижу, то и получаю"). В них вы строите свою страничку из блоков, а html-код вставляется автоматически. К таковым например относятся Macromedia DreamWeaver и Microsoft FrontPage. WYSIWYG-редакторы - не для настоящих профи, потому они здесь не рассматриваются :).
2.браузер для просмотра веб-страниц - Internet Explorer (или "ослик IE", когда будете с ним работать - поймете почему:) ) - также присутствует в комплекте.
Примечание: хотя для верстальщика сайтов нужно установить все популярные на сегодняшний день браузеры (Google Chrome, Mozilla Firefox, Opera, Safari) для сравнивания отображения веб-страниц, т.к. в разных браузерах они могут различаться.
Моя первая веб-страница
Итак допустим, что вы уже запустили "Блокнот". Введите в нем следующее:
<html>
Моя первая веб-страница
</html>
Теперь сохраните файл, указав ему имя (желательно имя index - обычно такое имя носит первая страница веб-сайта) и расширение .html, т.е.:
имя_файла.html
Для редактирования кода нужно снова открыть файл с помощью "Блокнота".
Теги и атрибуты
Итак, теги (tags) - это код HTML, с помощью которого мы создаем веб-страницу. Теги заключается в угловые скобки и таким образом получаем конструкцию: <имя_тега>. Большинство тегов парные, т.е. для них существует закрывающий тег, который обозначается с обратной косой чертой перед именем: </имя_тега>. Но есть и "одиночки" - для них нет закрывающего тега, например <br> (перенос строки).
Внутри парных тегов можно вкладывать другие теги, например:
<html>
<i>Это текст будет выделен курсивом</i>
</html>
Здесь стоит упомянуть, что тег <html> объявляет, что данный документ является документом html. Он содержит все остальные теги внутри себя, а закрывающий тег </html> должен стоять самым последним.
Примечание: единственный тег, не входящий в <html> - <!DOCTYPE>, который должен стоять на самой первой строке. Он служит для объявления типа html-документа. О "доктайпе" будет отдельная тема.
Далее, почти все теги имеют атрибуты и оформляются они так: <имя_тега атрибут="значение">. Атрибутов может быть несколько. Пример:
<img src="images/image1.gif" height="50px" width="100px">
В данном примере я вставил в документ изображение image1.gif (тег <img>), расположенное в папке images, с высотой в 50 и шириной 100 пикселей. Все значения атрибутов желательно записывать в кавычках. Атрибуты можно записывать в любом порядке, т.е. эти записи равнозначны:
<img src="images/image1.gif" height="50px" width="100px">
<img height="50px" src="images/image1.gif" width="100px">
<img height="50px" width="100px" src="images/image1.gif">
Также существуют атрибуты обязательные и не обязательные. В теге <img> атрибут src является обязательным, т.к. указывает месторасположение изображения image1.gif. Нет адреса - нет и изображения, согласны?
Примечание: да, и если вы заметили - у тега <img> нет закрывающего тега. Вот вам еще один пример тега - "одиночки".
Также HTML невосприимчив к регистру символов - такие записи равнозначны:
<img src="адрес_файла" height="50px" width="100px">
<IMG SRC="адрес_файла" HEIGHT="50px" WIDTH="100px">