HTML (Hypertext Markup Language) – язык разметки гипертекста. Основа любой страницы, которую мы загружаем из Интернета в браузер. Язык разметки гипертекста отличается от других языков программирования, в них код пишется, что бы получить конечный результат, а HTML сам по себе конечный результат. Такая особенность делает язык гипертекста очень простым и легким для изучения. HTML – документ состоит из тегов. В основном теги парные, открывающийся тег <A> и закрывающийся тег </A>, но часто используются и одинарны теги <IMG>. Размещения тегов не допускает перекрытия одних другими, например <head><title></head></title>. Правильно будет <head><title></title></head>, в противном случае можно получить самые причудливые декоративные элементы и не только.
Минимальный шаблон HTML-документа (см. ниже) содержит парный тег <html></html>, который указывает браузеру, что это HTML - документ. Парный тег <head></head>, между которыми размещается служебная информация, которая нигде не отображается. И парный тег <body></body> между которыми находится тело документа, собственно все то что мы видим в обозреватели.
<html>
<head></head>
<body>
</body>
</html>
Переходим к практике. Создайте новый текстовый документ, скопируйте в него шаблон HTML – документа, за исключением того, что между тегами <body></body> напишите Hello, World!, (это такая традиция) и сохраните. Теперь измените, расширение файла .txt на .html и дважды щелкните по нему.
Документ должен открыться браузером, в окне которого гордо будет выглядеть ваша первая страничка, с единственной строчкой текста Hello, World!
Сложно было? А дальше будет еще проще! Создаем текстовый документ, копируем в него код (см. ниже), сохраняем, меняем расширение файла и запускаем в браузере.
<html>
<head><title>Пример форматирования текста</title></head>
<body>
<B>Это жирный текст </B>
<I> Это наклонный текст </I>
<U> Это подчеркнутый текст </U>
<S> Это зачеркнутый текст </S><BR>
<B><I><U>А это жирный, подчеркнутый и наклонный текст</U></I></B>
</body>
</html>
Между парными тегами <title></title> помещается строка заголовка окна. Размещаются в HTML - документе, между тегами <head></head> и только один раз на одной странице. Кроме того, в документе присутствует тег <BR>, используется для переноса строки. <BR> - непарный тег, поэтому закрывающий тег ему не нужен.
Остальные теги для форматирования текста. Например, вы уже наверно поняли, тегом <B> создается жирный текст, тег <I> наклонный, <U> подчеркнутый, а <S> зачеркнутый текст. А в последней строчке текста идет комбинация нескольких тегов для одного элемента, и мы получаем одновременно и жирный и подчеркнутый и наклонный текст.
Используя множество вложенных тегов, обязательно следите за их порядком, иначе результат может превзойти все ожидания, а в объемном документе потом найти ошибку иногда бывает трудно. Что бы избежать таких ошибок с самого начала оформляйте документ аккуратно.
На любой странице в Интернете присутствуют гиперссылки. Каждый день даже не задумываясь мы нажимает на них сотни, а может и тысячи раз. Не будь гиперссылок, и навигация в Интернете, наверное, стала бы непростым занятием. В HTML - документе гиперссылка задается парным тегом <A></A>. Что бы убедится, переходим к практике. Создаем новую папку и копируем в нее две предыдущее страницы, которые мы только что сделали. Первую называем index.html вторую index2.html. Открываем первую в блокноте и немного видоизменяем ее и сохраняем. <html>
<head></head>
<body>
Hello, World!<BR>
<A href=”index2.html” target=”_blank”>А тут ссылка на мою вторую страницу</A>
</body>
</html>
Открываем страницу в браузере. Перейдя по ссылке, мы попадем на нашу вторую страницу, которая к тому же откроется в новом окне. Все элементарно просто. Синтаксис тега ссылки <A> следующий: обязательно тег является парным. Обязательно должен присутствовать атрибут href, именно он указывает на какую страницу, мы перейдем по ссылке. Остальные атрибуты такие как, например target, который открывает ссылку в новом окне, необязательные. В нашем случае если не использовать target ссылке откроется в том же окне.
Ссылками могут быть и не только текстовые элементы, часто для этого используются и картинки. Поместите в папку со страницами любой рисунок и измените код. <html>
<head></head>
<body>
Hello, World!<BR>
<A href=”index2.html” target=”_blank”>А тут ссылка на мою вторую страницу</A><BR>
<A href=”index2.html” target=”_blank”><img src=”имя файла рисунка” border=”0”></A><BR>
</body>
</html> Теперь у нас на странице кроме текстовой ссылки появилась картинка-ссылка. Если перейти по ней мы попадем на страницу, которая указана в атрибуте href тега <A>. В примере нам попадался тег img. Вы уже догадались что, используя его, мы можем вставлять в страницу графику. Тег img непарный и имеет один обязательный атрибут src – имя графического файла, который мы хотим отобразить на странице, остальные атрибуты необязательные. Используя графику на своих страницах, старайтесь избегать больших размеров картинок. В противном случае мало пользователей будет ждать загрузки страниц перегруженных графикой. А насчет формата изображений, лучшим выбором будут .gif и .jpg. Естественно, что мы не будем перечислять все теги и аргументы в примерах. Их использование и так элементарное. Главное поначалу знать, что должно получится, иметь перед собой список тегов и их аргументы, если имеются. Самое главное можете скачать отсюда
|
