Из чего состоит структура HTML­документа Наглядный  легкозапоминающийся  пример  документа. структуры  html­

Вот как выглядит код самой простой html­страницы:  Откройте блокнот, да да, тот самый блокнот.. Пуск>  Стандартные> Блокнот и напишите в нем следующий  текст:       Привет мир!!! 
 Меня зовут (здесь впишите Ваше имя), это моя первая  страничка!  

 Далее, сохраните этот текст как html документ,  название придумайте сами.. главное чтобы расширение  было html  Повторюсь, чтобы не было казусов.. в блокноте кликаем  по меню "Файл", выбираем "Сохранить как.." в строке  "Имя файла" пишем: index.html, просто по умолчанию  блокнот предлагает сохранить файл с расширением *.txt,  а нам нужно расширение *. html  Далее открываем этот файл при помощи Вашего  браузера.. ну к примеру того же Internet Explorerа  (правой кнопкой по нашему файлу.. "Открыть с  помощью.." Internet Explorer)

Редактируем текст на своей странице..  Параграф.  Я думаю, Вы знаете, что такое параграф.. это такой  кусочек текста, одно или несколько предложений,  который в книгах обычно печатается с новой строки,  тем самым, выделяя этот текст из основной массы,  Книгу разбитую на параграфы легко читать, потому  что, как правило, одному параграфу соответствует  одна мысль или логическая часть текста.  Так вот, для того чтобы на странице сайта разбить  текст на параграфы, необходимо воспользоваться  тегом 

 ­ собственно параграф.

 Параграф имеет атрибут align "выравнивание" который в  свою очередь может быть равен тому ли иному  значению.  Рассмотрим на примерах: С помощью параграфа можно расположить наш текст по  центру:  Привет мир!!!

 По левому краю:  Привет мир!!!

 По правому краю:  Привет мир!!!

 Или же обоим краям документа:  Привет мир!!! ­ здесь нужен текст  подлиней чтобы эффект был хорошо виден при  открытии документа

Давайте слегка изменим нашу первую страничку:       Привет мир!!!


    Меня зовут Карлсон! Я в меру упитанный мужчина ­ это  моя первая страничка! Здесь я хочу найти себе новых  друзей, для того чтобы вместе гулять по крышам! Я очень  очень сильно люблю вареньё!!! С нетерпеньем буду  ждать Вашего приглашения на чай. Прилечу!!  

 

Запомним некоторые вещи:  1) Тег 

 не может содержать в себе других  параграфов, то есть писать вот так: 







 Нельзя! ­ это нелогично, как может один параграф  содержать в себе другой?  2) Так же, нельзя писать пустые теги без текста или  других тегов. 

 здесь, что­то обязательно должно быть!!!

 3) По умолчанию Ваш текст выравнивается браузером  по левому краю, так что если Вам так и надо атрибут  align="left" для параграфа можно не указывать.

Запомним некоторые вещи:  4) Тег 

 подразумевает в себе перенос строки, если  это Вам не нужно, используйте вместо тега 

 тег 

 Привет мир!!!  Привет мир!!!  Привет мир!!! Все то же самое, только данный тег не будет переносить  текст на следующую строку и в него можно вставлять  тег 

 по принципу: 

 Пишем слева

 Пишем справа



Запомним некоторые вещи: А вообще тег 

Заголовки В наборе тегов html языка имеется шесть типов  заголовков: 

 Привет мир!!! 



 Привет мир!!! 



 Привет мир!!! 



 Привет мир!!! 



 Привет мир!!! 



 Привет мир!!! 

 Думаю с этим понятно..  тег заголовка, где  значение x является величиной буковок (может быть от  одного до шести). Помните, что после использования  того или иного заголовка происходит перенос строки ­  на то он и заголовок.  Заголовки дело хорошее и достаточно удобное, но ими  можно выделять только маленькие кусочки текста, а  что если нам надо выделить весь текст?  Знакомимся тег  в переводе на русский ­ "шрифт".  Тег  помимо прочих атрибутов, о которых ещё  пойдет речь, имеет атрибут size ­ размер.  Пишется и выглядит это так:  Привет мир!!!  Привет мир!!!  Привет мир!!!  Привет мир!!!   Привет мир!!!

Добавим эти теги на нашу страницу.      

Привет мир!!!


  Меня зовут Карлсон! Я в меру упитанный  мужчина ­ это моя первая страничка! Здесь я хочу найти  себе новых друзей, для того чтобы вместе гулять по  крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать  Вашего приглашения на чай. Прилечу!! 

 

Попробуйте поэкспериментировать с размерами  шрифта и заголовком, подставьте свои значения,  измените расположение тегов.. Цвет  Для придания страничке красивого вида не обойтись  без палитры с красками..  В html языке используется своя палитра красок. Вот  основные цвета, выглядят они так:

 Один и тот же цвет можно задать двумя способами:  используя шестнадцатеричное значение цвета RGB ­  например #008000 ­ зелёный цвет, либо используя  константы цвета ­ green (для тех кто учил французский,  green ­зелёный.)  Краски есть, давайте рисовать!  Мы уже знакомы с тегом  у него есть еще один  атрибут ­ color.  Так вот, если к примеру написать так:  Привет мир!!! ­ То цвет  шрифта станет красным. Попробуйте..  А можно так:  Привет мир!!! ­ Будет тоже самое..

 Но советую писать всё же шестнадцатеричным числом,  во­первых, по понятным причинам не для всех оттенков  цветов есть своё название, а во­вторых, поговаривают,  что не все браузеры знают названия тех или иных  красок…  Есть еще один способ изменить цвет текста. Тег   "тело" ­ имеет атрибут text ­ "текст" если  присудить этому атрибуту любой цвет из доступной  палитры то весь текст в нашей странице окрасится, кроме  тех мест, где мы "принудительно" указали другой цвет.  В строчке где стоит открывающий тег  пишем так:   Теперь весь текст у нас стал оранжевым кроме заголовка  "Привет мир!!!" который мы отдельно перекрасили в  красный.  А вот атрибут тега  bgcolor и его значение задает  цвет фона страницы   ­ залили всё голубым..  Раскрасьте свою страницу на свой лад.. пробуйте,  экспериментируйте!

Сейчас Вам нужно понять принцип построения html­  кода иначе рано или поздно станете в тупик, нет ничего  лучше чем самостоятельная практика. На данный момент у меня получилось вот так:        

 Привет мир!!! 

   Меня зовут Карлсон! Я в меру упитанный мужчина  ­ это моя первая страничка! Здесь я хочу найти себе новых  друзей, для того чтобы вместе гулять по крышам! Я очень очень  сильно люблю вареньё!!! С  нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!



 Обратите внимание на то, как пишется код, если в теге  присутствует два и более атрибута. В нашей строчке   у тега   два атрибута text и bgcolor мы просто пишем их подряд  через пробел, не разделяя никакими другими знаками..

Стиль текста Здесь все достаточно просто.. Итак, новые теги:   ­ Полужирный текст   ­ Наклонный текст   ­ Подчеркнутый текст   ­ Перечеркнутый   ­ Перечеркнутый (второй вариант, от первого  ничем не отличается) ­ Малый   ­ моноширинный шрифт     ­ Большой     Ну думаю понятно.. текст заключённый между этими  ­ Верхний индекс ­ Нижний индекс открывающими и закрывающими тегами приобретёт  нужный нам стиль.

Научная статья.

Если разбавить дистиллированную воду Н₂О сорока  процентами этилового спирта С₂Н₅ОН  то получится жидкость в 40^о более известную  широкой публике под названием ­ водка.
Впервые данную пропорцию придлажил предложил  Дмитрий Иванович МЕНДЕЛЕЕВ.


Распитие спиртных напитков вредит вашему  здоровью.

Шрифт Для того чтобы изменить шрифт документа  необходимо дать указание браузеру, что мол от  сель до сель показывать текст таким шрифтом. Для  этого используем всё тот же тег  и его  атрибут face ­ лицо то бишь.. Пишется так: Эта строчка будет написана с  помощью шрифта Arial

Пример: Мало кто знает, как много надо знать для  того, что бы знать, как мало мы знаем.
Мало кто знает, как много  надо знать для того, что бы знать, как мало мы  знаем.
Мало кто знает, как много надо  знать для того, что бы знать, как мало мы знаем.

Здесь необходимо отметить, что браузер использует  библиотеку шрифтов, установленную на компьютере  пользователя, и если вдруг указанного Вами шрифта в  этой библиотеке не окажется, то он заменит его на тот  который присутствует. Следовательно, чтобы не  ударить face(ом) в грязь, не стоит указывать какие­то  "экзотические" нестандартные шрифты, так как супер  модный шрифт на компьютере Вашего друга сильно  рискует превратиться в обыкновенный.

Предварительно отформатированный текст. Если Вы обратили внимание, а если не обратили то знайте, что в  браузерах текст набранный с помощью текстовых редакторов  проходит "обработку" перед выводом его на экран компьютера.  Так в набранном Вами тексте удаляются все переносы строк и  лишние пробелы, пробелов между словами или просто  символами может быть не более одного. Проводится данная "обработка", для того чтобы на мониторах с  разным расширением экрана текст переносился на следующую  строку в тех местах где это действительно необходимо, а не там  где были раннее расставлены пробелы и переносы строк. Однако такая политика браузеров, в ряде случаев, не всегда  оправданна.. Как например, написать стихи? Нет можно  конечно после каждой строчки писать тег 
, но есть вариант  куда проще.. Знакомимся тег 

, текст заключённый в данный тег выводится 
браузерами на экран в том виде в котором он был набран, т.е. со 
всеми пробелами и переносами строк

Пример:

        СЛОН.
Дали туфельки слону.
Взял он туфельку одну
И сказал: ­ Нужны пошире,
И не две, а все четыре!
         С. Я. Маршак.

Путь к файлу Итак, допустим Вы пишете сайт о себе любимом и хотите  вставить в него свою фотографию, чтобы люди  зашедшие на страничку смогли не только читать Ваши  рукописи, но и вдоволь полюбоваться Вашим портретом. Есть у Вас значит фотография, которая где­то лежит на  Вашем жёстком диске.. копируем ёе и вставляем в ту  папку (директорию) где уже лежит заготовка будущей  страницы, ну то есть туда же, куда сохраняете  блокнотом html документ. Так, вот для того чтобы теперь  вставить её в нашу страничку к ней нужно указать путь. делается это так: Где foto.jpg это название Вашей фотографии в данном  случае, так как фото лежит рядом с html документом,  путь к ней мы не указываем. Да, помните, тег  не требует закрывающего тега!

Теперь приведу ряд примеров где путь указывается:  ­ Такая запись подразумевает,  что в директории где расположен наш html документ  есть папка myfoto в которой расположен файл foto.jpg  ­ Значит рядом с  документом расположена папка myfoto, в ней еще одна  папка с названием graphics, и уже в ней нужная нам  фотография foto.jpg которую нужно выложить для  всеобщего обозрения.  ­ А это значит, что фото размещено  на уровень выше от документа  ­ Так соответственно на два уровня  выше, сколько поставите../ настолько и поднимитесь. Так же можно указывая место фотографии, ссылаться на  тот или иной интернет ресурс Ну что, давайте попробуем выложить фото.

Вот мой пример:

  Привет мир!!! 

Меня зовут Карлсон! Я в меру упитанный мужчина ­ это моя первая  страничка! Здесь я хочу найти себе новых друзей, для того чтобы  вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду  ждать Вашего приглашения на чай. Прилечу!!

Как видно из этого примера фотография появилась, но  вместе со своим появлением сдвинула текст, а не хотелось  бы.. Атрибуты тега  Поговорим о расположении изображений относительно  текста. Как и другие теги  тоже имеет свои атрибуты.. уже  знакомый нам атрибут align "выравнивание" применим и  к данному тегу  ­ фото слева от текста  ­ фото справа от текста  ­ текст выше фото  ­ текст ниже фото  ­ ну и соответственно  текст посередине

Помимо align тег  имеет еще ряд атрибутов, но сначала  расскажу немного о пикселях. Пиксель (точка), наверное  Вы не раз слышали это слово и думаю основная масса  народа которая держала мышку в руках знает что это  такое, но всё же.. Пиксель ­это элементарная неделимая  единица изображения. Каждый пиксель имеет свои  координаты, например, самый верхний левый пиксель на  мониторе имеет координаты x=1, y=1, а самый нижний  правый в зависимости от разрешения монитора.. x=800,  y=600 ­ будет соответственно при разрешении 800 на 600  точек. Впрочем, эта информация пригодится нам потом, а  сейчас нужно усвоить, что все расстояния в графических  изображениях меряются пикселями.. так картинка  длинной 800 пикселей и шириной в 600 пикселей при  указанном разрешении заполнит весь экран. Теперь продолжим..

А еще изображение можно сделать фоном страницы.. для этого  используем атрибут background "фон" открывающего тега  Вот так: Выравнивание рисунка. Теперь расскажу о том как разместить нашу фотографию в  нужном месте страницы. На самом деле об этом я уже  рассказывал.. вспомните вторую главу, где говорилось о том  как можно выровнять текст.. эти же теги применимы и к  выравниванию изображения… так что, пожалуй, повторятся  не буду, просто приведу пример, а Вы уж самими подумайте  почему одно и тоже фото очутилось в том или ином месте.. Пример:

     

 

сочетания с текстом, отступы, рамки.. Тренируйтесь! Советую Вам самостоятельно поупражняется с  размещением фотографии на своей странице. Меняйте  размеры, положения, используйте различные    Меня зовут Карлсон! Я в меру упитанный мужчина ­  это моя первая страничка! Здесь я хочу найти себе новых  друзей, для того чтобы вместе гулять по крышам! Я очень очень  сильно люблю вареньё!!! С  нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

Единственное, что Вам в этом примере не знакомо так это  надпись ­   ­ это есть так называемый спецсимвол  в данном случае ­ пробел.. о спецсимволах и их  назначении я расскажу более подробно в отдельной. Честно говоря, пример получился неряшливым слегка.. Но  цель показать, что можно делать с изображениями  думаю достигнута..

Полезные советы:  Используя графику, будьте осторожны.. не стоит размещать  на своей странице большие весом мегабайтные изображения,  пожалейте время и деньги посетителей страницы. Большой  объём графики при низкой скорости интернета может  привести к тому, что посетитель закроет Вашу страницу ещё до  того момента как она загрузится. заливкой фона каким либо подходящим для фона страницы  цветом (атрибут bgcolor тега )   Помните, что есть пользователи, которые умышленно в своём  браузере отключают загрузку рисунков, дабы сэкономить на  трафике, а по сему рекомендую соблюдать следующие советы: Если рисунки выполняют роль кнопок (см. глава ссылки),  обязательно подписывайте их (атрибут alt) к примеру:  "Перейти на главную страницу" или "Скачать" дабы человек с  отключенной графикой мог хоть как­то ориентироваться на  Вашей странице.  Используя картинку в качестве фона документа дублируйте ёё

вот так например: Это будет значить, что если к примеру не загрузится Ваша  изысканная зелёная текстура, фон будет просто  зелёным ­ что лучше, нежели чем белый цвет в общем  дизайнерском решении сайта.

Литература  http://www.webremeslo.ru