Галагазета | Веsёлая Шkола "Составляющие языка HTML""

Веsёлая Шkола: "Составляющие языка HTML"
*"``
Sunlight, 24 мая 2013 г., 0:46
   Всем привет! Друзья, второй урок по созданию сайтов. Его бы я назвал: "Структура html". С тем, что такое html, было знакомство в прошлой статье, сейчас давайте поговорим о том, из чего же состоит каждый документ, написанный на языке html. Хочу напомнить, что сайт создаем в приложении "Блокнот" на своём компьютере.
   
   
   
   Вообще, если говорить в целом, то любой документ html состоит всего из трех пар тегов, которые являются основными:
    
    <html> 
      <head> Здесь будет заголовок документа < /head> 
      < body> Тело документа < /body> 
   < /html> 
   
   Давайте рассмотрим каждый тег в отдельности. 
    <html> < /html> - являются некой оболочкой всех остальных тегов, то есть, между ними будут заключены все остальные конструкции html языка и параметры страницы, соответственно. Собственно говоря, поэтому наш документ, который мы написали выше, начинается и заканчивается конструкцией "<html>  < /html>".     
   Также, вы наверняка заметили теги <head> < /head>. Но тут все очень просто и понятно, достаточно перевести на русский язык, и сразу становится понятным, что это заголовок нашего документа, он является первой частью страницы, которую мы составляем, вторая часть - "Тело документа" - заключена между тегами < body> и < /body>. Заголовок страницы содержит необходимую информацию, которая вообще никак не влияет на внешний вид документа. Она предоставляет вашему браузеру необходимую информацию о том, как будет отображен ваш html-документ в браузере.  
   
   Title     
   Самой необходимой конструкцией заголовка является конструкция "<title> < /title>". Между этими тегами заключено имя документа, которое будет являться заголовком нашей web-страницы. Итак, открываю "Блокнот" на компьютере и вписываю туда:   
   
   <html> 
      <head> 
      <title>Заголовок документа< /title> 
      < /head> 
      < body> Тело документа < /body> 
   < /html> 
   
   В окне браузера он будет выглядеть так: 
   
   (Фотография не найдена) 
   
   Не стоит давать своей странице имя "Первая страница", потому что название страницы должно обобщать содержимое, ну и при раскрутке сайта все то, что заключено между тегами <title> < /title> играет не последнюю роль (рекомендуемая длина заголовка - 60 символов).  
   
   Base  
   Следующий тег html-документа - одиночный тег <base>, который служит для указания полного адреса документа. Этот тег нужен для предоставления удобства тому человеку, который просматривает вашу страницу в сохраненном виде. Вот представьте, сохранили вы страницу, а когда открываете её, то она выглядит как непонятно что. Весь вид портит отсутствие изображений, вместо них - выделен формат, помеченый красным крестиком. Но если вы подключены к Интернету, а на сохраненной странице присутствует тег <base>, то браузер будет знать, где искать необходимый файл, найдет его и загрузит картинки. У тега есть атрибут "href", значением которого является URL-адрес страницы. Пример кода: 
   
   (Фотография не найдена)  
   
   Link  
   Ещё один одиночный тег < link>, который нужен для того, чтобы мы могли подключать внешние файлы. Примером отдельного файла может служить каскадная таблица стилей, которую для удобства хранят отдельным файлом. У тега < link> несколько атрибутов:  
   
   href - уже знакомый нам атрибут, который указывает URL-адрес подключаемого файла.  
   rel - элемент, указывающий на тип отношения данного документа к внешнему (например: rel="stylesheet" указывает, что внешний файл определяет стиль текущего документа).  
   type. На этом этапе - последний атрибут, через который указывается тип и параметры присоединенной таблицы стилей.  Пример кода: 
      
   (Фотография не найдена)
      
   Meta  
   Честно говоря, все то, что указывается в этом теге, никакого отношения к HTML не имеет, но помогает решить ряд проблем:  
   - кодировка страницы, например, для русского текста в Windows: <meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> 
   - различные ключевые слова (которые пригодятся при оптимизации страниц): <meta http-equiv="KEYWORDS" content="Веsёлая Шkола, web-разработка"> 
   - краткое описание страницы: <meta http-equiv="DESCRIPTION" content="Создаем сайт с Веsёлой Шkолой"> Возможны и другие варианты. Рассмотрим параметры тега <meta>:  
   
   http-equiv - необходим для определения параметров, таких, как: тип контента, ключевые слова, описание и т.д..  
   
   name - необходим для дополнительного описания тега, если данный элемент отсутствует, то структура равносильна параметру "http-equiv".  
   
   content - задает значение параметра "http-equiv".  Пример кода: 
   
   (Фотография не найдена)  
      
   Script  
   Теги < /script> используются для подключения внешних файлов, называемых скриптами. Зачем это нужно? Всё предельно просто, скрипты помогают оптимизировать вашу html-страницу. Если вы будете использовать различные функции java script (о нём поговорим позже), то, поместив эти функции на отдельную страницу - "function.js", с помощью тега  можно указать путь к этой странице, тем самым подключить java script к нашему html-документу.  
   Все эти сложности нужны для повышения скорости загрузки вашей страницы, что очень хорошо будет характеризовать ваш сайт. У тега "Script" также имеются свои параметры, такие как:  
   
   language - указывает язык написания скрипта, знаете, в спецификации HTML 4.0 данный параметр не рекомендуется к употреблению. Более надежно себя будет чувствовать параметр "type".  
   type - параметр, указывающий указывает тип передачи данных для языка (MIME).  
   src - его функция практически такая же, как и у "href" - указывает путь к внешнему файлу. Ну, а теперь, пример кода:  
   
   (Фотография не найдена)  
     
   На этом первая часть нашего html-документа заканчивается, переходим ко второй.  
   
   Я говорил выше, что html-документ условно состоит из двух частей: первая - заголовок, вторая - тело документа. Как мы помним, тело документа - заключено между тегами "BODY".  Также, если мы вернемся немножко выше, то найдем то, что я говорил: "Все, что отображается на web-странице, заключено в тегах < body>< /body> ."  Это правда, друзья, под словом "всё", понимаю: различный контент, тексты, исполняющиеся скрипты, а также теги для оформления всего всего перечисленного.  
   
   Каких-то обязательных параметров у тега "< body>" - нет, а использование необязательных параметров - не приветствуется вовсе. Но всё же есть те, которые используются нашим браузером при открытии html-документа:  
   
     alink - задает цвет активной ссылки. Текущий цвет ссылки меняется на активный, стоит просто нажать на нее.  
     vlink - определяет цвет посещенной ссылки, т.е. той, по которой уже был совершен переход.  
     background - параметр, который будет указывать на изображение, использованное в качестве фонового рисунка вашего сайта. Этот рисунок заполняет собой все видимое пространство окна. 
     bgcolor - указывает фоновый цвет документа. Нет картинки, либо хотите увеличить скорость загрузки вашего html документа, воспользуйтесь данным параметром, через который зададите фон документа.  
     leftmargin - необходим для определения отступа от левого края окна браузера до содержимого страницы.  
     rightmargin - несложно догадаться, что этот параметр определяет отступ справа до контента страницы. 
   Соответственно, если есть отступы справа и слева, то могут быть отступы сверху (topmargin), а также - снизу (bottommargin).  
     text - задает цвет для всего текста на странице.  
   
   Пример кода: 
   
   (Фотография не найдена) 
   
   В окне браузера он будет выглядеть так:    
   
   (Фотография не найдена) 
   
      На этом все, друзья, второй урок подошёл к концу, главное помним, что любой html-документ должен состоять из следующих обязательных тегов, расположенных именно в таком порядке, какой описан ниже: <html> <head>  <title> < /title> < /head> < body> < /body> < /html>.   
   
   Всем спасибо за внимание, хотелось бы повториться, что данное обучение, если его можно назвать так, это не профессиональная школа web-разработчика, я пытаюсь донести азы, с которыми каждый из вас может экспериментировать, доводя до идеала, поэтому то, как сделать сайт и продать его за деньги (мой первый заработок), вас познакомят в различных школах, репетиторы, а я пытаюсь сделать из вас любителей и собрать вместе тех, кому неинтересно то, из чего состоит сайт и как все это едят, а самое главное - с чем. Тех, кто всё это знает, силком никто не держит, просто пропускаем данную статью мимо глаз и все, не стоит писать мне в почту о том, что все сейчас пользуются php, я это прекрасно знаю. И если будет желание, прежде всего у тех, кому это интересно, я начну говорить и о php, про java script мы тоже будем говорить, но чуточку позже, сейчас все смешивать - нет смысла, получится винегрет в голове, вообще не разберетесь. На скриншотах показал все, надеюсь, доступно. Ладно, пора прощаться, всем еще раз спасибо, всем пока, до встречи на страницах Галагазеты.*"`` 
   
   Авторы: ГалаБлоггер и я, Веsельчаk*"``
Просмотров: 210
Подписок на автора: 116
Поделиться