gototopgototop
20.07.2018

Корисні посилання

Степанівський МНВК

 

Міністерство освіти і науки України

 

ІППО

 

КОСТЯНТИНІВСЬКЕ МІСЬКЕ УПРАВЛІННЯ ОСВІТИ

Педагогічна преса

Останні коментарі

RSS
09.02.2015 12:07
Печать PDF
+ 0
+ 0

Язык HTML

HTML язык по своей сути не является языком программирования. Он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.

Теперь о командах - их называют дескрипторами, но чаще - тегами.

Вернемся к нашей первой страничке.. итак мы написали:

<html>

<head>

<title>Моя первая страничка</title>

</head>

<body>

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

<br>

Меня зовут Карлсон, это моя первая страничка!

</body>

</html>

Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег <html> понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег </html> говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.

Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:

1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий </…>

Хотя есть и исключения как например у нас тег <br> - он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")

2) Все документы должны иметь вот такой шаблон кода:

<html>- начало документа

<head>- начало головы

</head>- закрытие головы

<body>- начало тела

</body>- закрытие тела

</html>- конец документа

Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..

3) О порядке:

Открывающий и закрывающий тег по типу <…> </…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:

<Тег "большой ящик">

<Тег "ящик средний">

<Тег "ящик маленький">

содержание

</Тег "ящик маленький" >

</Тег "ящик средний" >

</Тег "большой ящик">

 

 Редактируем текст на своей странице.

Параграф

Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> - собственно параграф.

Параграф имеет атрибут align "выравнивание" который в свою очередь может быть равен тому ли иному значению.

Рассмотрим на примерах:

С помощью параграфа можно расположить наш текст по центру:

<p align="center">Привет мир!!!</p>

По левому краю:

<p align="left">Привет мир!!!</p>

По правому краю:

<p align="right">Привет мир!!!</p>

Или же обоим краям документа:

<p align="justify">Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

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

<html>

<head>

<title>Мой первый сайт </title>

</head>

<body>

<p align="center">Привет мир!!!</p>

<br>

<p align="justify">

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

</p>

</body>

</html>

Запомним некоторые вещи:

1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:

<p>

<p>

</p>

</p>

Нельзя! - это нелогично, как может один параграф содержать в себе другой?

2) Так же, нельзя писать пустые теги без текста или других тегов.

<p> здесь, что-то обязательно должно быть!!!</p>

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

4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:

<div align="center">Привет мир!!!</div>

<div align="left">Привет мир!!!</div>

<div align="right">Привет мир!!!</div>

<div align="justify">Привет мир!!!</div>

Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу:

<div>

<p align="left">Пишем слева</p>

<p align="right">Пишем справа</p>

</div>

А вообще тег <div> многофункциональный и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже..

5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так:

<center>Привет мир!!!</center>

Заголовки

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

<h1> Привет мир!!! </h1>

<h2> Привет мир!!! </h2>

<h3> Привет мир!!! </h3>

<h4> Привет мир!!! </h4>

<h5> Привет мир!!! </h5>

<h6> Привет мир!!! </h6>

Думаю с этим понятно <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки - на то он и заголовок.

Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?

Знакомимся тег <font> в переводе на русский - "шрифт".

 

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size - размер.

Пишется и выглядит это так:

<font size="+4">Привет мир!!!</font>

<font size="+2">Привет мир!!!</font>

<font size="+0">Привет мир!!!</font>

<font size="-1">Привет мир!!! </font>

<font size="-2">Привет мир!!!</font>

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

<html>

<head>

<title>Мой первый сайт</title>

</head>

<body>

<center><h2>Привет мир!!!</h2></center>

<br>

<p align="justify">

<font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font>

</p>

</body>

</html>

Цвет

Палитра красок:

#f0f8ff
aliceblue

#faebd7
antiquewhite

#00ffff
aqua

#7fffd4
aquamarine

#f0ffff
azure

#f5f5dc
beige

#ffe4c4
bisque

#000000
black

#ffebcd
blanchedalmond

#0000ff
blue

#8a2be2
blueviolet

#a52a2a
brown

#deb887
burlywood

#5f9ea0
cadetblue

#7fff00
chartreuse

#d2691e
chocolate

#ff7f50
coral

#6495ed
cornflowerblue

#fff8dc
cornsilk

#dc143c
crimson

#00ffff
cyan

#00008b
darkblue

#008b8b
darkcyan

#b8860b
darkgoldenrod

#a9a9a9
darkgray

#006400
darkgreen

#bdb76b
darkkhaki

#8b008b
darkmagenta

#556b2f
darkolivegreen

#ff8c00
darkorange

#9932cc
darkorchid

#8b0000
darkred

#e9967a
darksalmon

#8fbc8f
darkseagreen

#483d8b
darkslateblue

#2f4f4f
darkslategray

#00ced1
darkturquoise

#9400d3
darkviolet

#ff1493
deeppink

#00bfff
deepskyblue

#696969
dimgray

#1e90ff
dodgerblue

#b22222
firebrick

#fffaf0
floralwhite

#228b22
forestgreen

#ff00ff
fuchsia

#dcdcdc
gainsboro

#f8f8ff
ghostwhite

#ffd700
gold

#daa520
goldenrod

#808080
gray

#008000
green

#adff2f
greenyellow

#f0fff0
honeydew

#ff69b4
hotpink

#cd5c5c
indianred

#4b0082
indigo

#fffff0
ivory

#f0e68c
khaki

#e6e6fa
lavendar

#fff0f5
lavenderblush

#7cfc00
lawngreen

#fffacd
lemonchiffon

#add8e6
lightblue

#f08080
lightcoral

#e0ffff
lightcyan

#fafad2
lightgoldenrodyellow

#90ee90
lightgreen

#d3d3d3
lightgrey

#ffb6c1
lightpink

#ffa07a
lightsalmon

#20b2aa
lightseagreen

#87cefa
lightskyblue

#778899
lightslategray

#b0c4de
lightsteelblue

#ffffe0
lightyellow

#00ff00
lime

#32cd32
limegreen

#faf0e6
linen

#ff00ff
magenta

#800000
maroon

#66cdaa
mediumauqamarine

#0000cd
mediumblue

#ba55d3
mediumorchid

#9370d8
mediumpurple

#3cb371
mediumseagreen

#7b68ee
mediumslateblue

#00fa9a
mediumspringgreen

#48d1cc
mediumturquoise

#c71585
mediumvioletred

#191970
midnightblue

#f5fffa
mintcream

#ffe4e1
mistyrose

#ffe4b5
moccasin

#ffdead
navajowhite

#000080
navy

#fdf5e6
oldlace

#808000
olive

#688e23
olivedrab

#ffa500
orange

#ff4500
orangered

#da70d6
orchid

#eee8aa
palegoldenrod

#98fb98
palegreen

#afeeee
paleturquoise

#d87093
palevioletred

#ffefd5
papayawhip

#ffdab9
peachpuff

#cd853f
peru

#ffc0cb
pink

#dda0dd
plum

#b0e0e6
powderblue

#800080
purple

#ff0000
red

#bc8f8f
rosybrown

#4169e1
royalblue

#8b4513
saddlebrown

#fa8072
salmon

#f4a460
sandybrown

#2e8b57
seagreen

#fff5ee
seashell

#a0522d
sienna

#c0c0c0
silver

#87ceeb
skyblue

#6a5acd
slateblue

#708090
slategray

#fffafa
snow

#00ff7f
springgreen

#4682b4
steelblue

#d2b48c
tan

#008080
teal

#d8bfd8
thistle

#ff6347
tomato

#40e0d0
turquoise

#ee82ee
violet

#f5deb3
wheat

#ffffff
white

#f5f5f5
whitesmoke

#ffff00
yellow

#9acd32
yellowgreen

 

 Один и тот же цвет можно задать двумя способами:

используя шестнадцатеричное значение цвета RGB - например #008000 - зелёный цвет, либо используя константы цвета - green (для тех кто учил французский, green -зелёный.)

Краски есть, давайте рисовать!

Мы уже знакомы с тегом <font> у него есть еще один атрибут - color.

Так вот, если к примеру написать так:

<font color="#ff0000">Привет мир!!!</font> - То цвет шрифта станет красным. Попробуйте..

А можно так:

<font color="red">Привет мир!!!</font> - Будет тоже самое..

Но советую писать всё же шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых, поговаривают, что не все браузеры знают названия тех или иных красок…

Есть еще один способ изменить цвет текста. Тег <body></body> "тело" - имеет атрибут text - "текст" если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы "принудительно" указали другой цвет.

В строчке где стоит открывающий тег <body> пишем так:

<body text="#ff8c40 ">

Теперь весь текст у нас стал оранжевым кроме заголовка "Привет мир!!!" который мы отдельно перекрасили в красный.

А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы

<body bgcolor="#40caff"> - залили всё голубым..

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

На данный момент у меня получилось вот так: .. а у Вас?

<html>

<head>

<title>Мой первый сайт </title>

</head>

<body text="#484800" bgcolor="#e8e8e8">

<center>

<h2>

<font color="#008000">Привет мир!!!</font>

</h2>

</center>

<p align="justify">

<font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

</font>

</p>

</body>

</html>

смотреть пример 

Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text="#ff207b" bgcolor="#1a77f0"> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..

 

Стиль текста

Итак, новые теги:

<b> </b>    - Полужирный текст

<i> </i>      - Наклонный текст

<u> </u>    - Подчеркнутый текст

<strike> </strike>         - Перечеркнутый

<s> </s>     - Перечеркнутый (второй вариант, от первого ничем не отличается)

<tt> </tt>   - моноширинный шрифт

<small> </small> - Малый

<big> </big>        - Большой

<sup> </sup>      - Верхний индекс

<sub> </sub>      - Нижний индекс

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

Вот пример на всякий случай…

<html>

<head>

<title>Стили текста</title>

</head>

<body>

<big><b><u>Научная статья.</u></b></big>

<br>

<br>

Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>- водка.</i>

<br>

Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt>

<br>

<br>

<br>

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

</body>

</html>

смотреть пример 

Шрифт

Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face - лицо то бишь..

Пишется так:

<font face="arial">Эта строчка будет написана с помощью шрифта Arial</font>

 

Пример:

 

<html>

<head>

<title>Использование различных шрифтов</title>

</head>

<body>

<font face="arial">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>

<br>

<font face="times new roman">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>

<br>

<font face="comic sans ms">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>

<br>

</body>

</html>

смотреть пример 

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

 

Предварительно отформатированный текст.

 

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

 

Проводится данная "обработка", для того чтобы на мониторах с разным расширением экрана текст переносился на следующую строку в тех местах где это действительно необходимо, а не там где были раннее расставлены пробелы и переносы строк.

 

Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br>, но есть вариант куда проще..

 

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

 

Пример:

 

<html>

<head>

<title>Пробелы и перенос строки</title>

</head>

<body>

<pre>

        СЛОН.

Дали туфельки слону.

Взял он туфельку одну

И сказал: - Нужны пошире,

И не две, а все четыре!

         С. Я. Маршак.

</pre>

</body>

</html>

смотреть пример 

Такие вот дела..

Полезные советы:

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

 Рисунки.

Путь к файлу

делается это так:

<img src="foto.jpg">

Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Да, помните, тег <img> не требует закрывающего тега!

Теперь приведу ряд примеров где путь указывается:

<img src="myfoto/foto.jpg"> - Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg

<img src="myfoto/graphics/foto.jpg"> - Значит рядом с документом расположена папка myfoto, в ней еще одна папка с названием graphics, и уже в ней нужная нам фотография foto.jpg которую нужно выложить для всеобщего обозрения.

<img src="../foto.jpg"> - А это значит, что фото размещено на уровень выше от документа

<img src="../../foto.jpg"> - Так соответственно на два уровня выше, сколько поставите../ настолько и поднимитесь.

Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс

<img src="http://www.site.ru/foto/foto.jpg">

Ну что, давайте попробуем выложить фото.

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

<html>

<head>

<title>Моя первая страничка с фото</title>

</head>

<body text="#484800" bgcolor="#e8e8e8">

<center>

<h2> <font color="#008000"> Привет мир!!!</font> </h2>

</center>

<p align="justify">

<font size="+1">

<img src="graphics/foto.jpg">

Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

</font>

</p>

</body>

</html>

смотреть пример 

Атрибуты тега <img>

Поговорим о расположении изображений относительно текста.

Как и другие теги <img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align "выравнивание" применим и к данному тегу

<img src="foto.jpg" align="left"> - фото слева от текста

<img src="foto.jpg" align="right"> - фото справа от текста

<img src="foto.jpg" align="top"> - текст выше фото

<img src="foto.jpg" align="bottom"> - текст ниже фото

<img src="foto.jpg" align="middle"> - ну и соответственно текст посередине

Помимо align тег <img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях.

Теперь продолжим..

<img src="foto.jpg" vspace="15"> - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей

<img src="foto.jpg" hspace="25"> - Расстояние по горизонтали соответственно

<img src="foto.jpg" width="180"> - Ширина непосредственно самого изображения

<img src="foto.jpg" height="240"> - Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений.

<img src="foto.jpg" border="5">- Бордюр, рамка вокруг изображения и её толщина в пикселях.

<img src="foto.jpg" border="5" bordercolor="#008000 "> - bordercolor - это цвет рамки.

<img src="foto.jpg" alt="Это моя фотка!!!"> -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!

<img src="foto.jpg" title="Это моя фотка!!!"> - альтернатива alt в данном случае.

А еще изображение можно сделать фоном страницы.. для этого используем атрибут background "фон" открывающего тега <body>

Вот так:

<body background="foto.jpg">

Выравнивание рисунка.

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

Пример:

<html>

<head>

<title>Расположение изображения</title>

</head>

<body>

<img src="foto.jpg ">

<center><img src="foto.jpg "></center>

<div align="left"><img src="foto.jpg"></div>

<br>

<div align="right"><img src="foto.jpg"></div>

<br>

<div align="center"><img src="foto.jpg"></div>

</body>

</html>

смотреть пример 

Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь!

Итог главы:

<html>

<head>

<title>Моя первая страничка с фото</title>

</head>

<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">

<center>

<img src="graphics/privet.jpg" width="400" height="80" alt="Привет мир!!!">

</center>

<p align="justify">

<img src="graphics/foto.jpg" align="left" hspace="15" width="140"height="120" alt="Это моя фотка!!!">

<font size="+1">

&nbsp;&nbsp;Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

</font>

</p>

</body>

</html>

смотреть пример 

Единственное, что Вам в этом примере не знакомо так это надпись - &nbsp; - это есть так называемый спецсимвол в данном случае - пробел.. о спецсимволах и их назначении я расскажу более подробно в отдельной главе.

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

Рисуем таблицу

Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:

<tr> - строка таблицы

<td> - столбец таблицы

Вместе эти теги пишутся так:

<table>

<tr>

<td>ячейка</td>

</tr>

</table>

Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку

Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который добавит нам наглядности.

<html>

<head>

<title>Таблица</title>

</head>

<body>

<table border="1">

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</body>

</html>

смотреть пример 

Разобрались? Если да, идем дальше..

Объединение ячеек.

Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну.

На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть".

Эту задачу решают атрибуты colspan и rowspan

colspan - определяет какое количество столбцов будет занимать данная ячейка

rowspan - количество рядов занимаемое ячейкой

Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.

<html>

<head>

<title>Таблица</title>

</head>

<body>

<table border="1">

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td colspan="2">строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</body>

</html>

смотреть пример 

Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.

Исправленный пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<table border="1">

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td colspan="2">строка3 ячейка2</td>

</tr>

</table>

</body>

</html>

смотреть пример 

Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее.

<html>

<head>

<title>Таблица</title>

</head>

<body>

<table border="1">

<tr>

<td rowspan="3">строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td colspan="2">строка3 ячейка2</td>

</tr>

</table>

</body>

</html>

смотреть пример 

Всё просто.. главное быть внимательным!

Размеры таблицы.

Если Вы самостоятельно тренировались с рисованием таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом.. и "ползают" себе как хотят. Вспомните про атрибуты width - ширина и height - высота, которые мы использовали для растягивания рисунков, они так же применимы к тегам <table>, <tr>и <td>. С этими атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center>

Пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<center>

<table border="1" width="640" height="480">

<tr>

<td rowspan="3" width="150">строка1 ячейка1</td>

<td height="30">строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td height="30">строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td colspan="2" >строка3 ячейка2</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Обратите внимание на то, что длина и ширина заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым широким и длинным ячейкам.. на то она и таблица..

Еще не всё рассказал..

Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах

 

Вот пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<center>

<table border="1" width="640" height="480">

<tr height="25%">

<td width="15%"> строка1 ячейка1</td>

<td width="25%">строка1 ячейка2</td>

<td width="60%">строка1 ячейка3</td>

</tr>

<tr height="50%">

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr height="25%">

<td>строка3 ячейка1</td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а добрую половину места второй.. Короче справедливости в мире нет.. Ну до это Вам решать, сколько кому места отчуждать, главное, чтобы в сумме было 100%, иначе неразбериха будет.. смутное время.. революция..

Верстка страницы с использованием таблицы.

Посмотрите на этот пример с таблицей, он Вам ничего не напоминает??

<html>

<head>

<title>Верстка страницы</title>

</head>

<body>

<center>

<table border="1" width="640" height="480">

<tr>

<td colspan="5" height="30"><center>Заголовок</center></td>

</tr>

<tr>

<td height="30" width="20%"><center>кнопка1</center></td>

<td width="20%"><center>кнопка2</center></td>

<td width="20%"><center>кнопка3</center></td>

<td width="20%"><center>кнопка4</center></td>

<td width="20%"><center>кнопка5</center></td>

</tr>

<tr>

<td valign="top">содержание:</td>

<td colspan="4"><center>куча текста</center></td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Как видите, таблица это хороший и главное удобный инструмент для верстки страницы..

 

Любая ячейка таблицы может служить самостоятельной ёмкостью для наполнения другими тегами и текстовым содержанием, а также иметь те или иные индивидуальные свойства - атрибуты.

Давайте освежим в голове уже пройденный материал, применив эти знания к таблице. Покажу на примерах, мы это уже проходили..

Добавим красок:

<html>

<head>

<title>Таблица и краски</title>

</head>

<body>

<center>

<table width="300" height="300">

<tr>

<td bgcolor="#c0e4ff">1</td>

<td bgcolor="#c5ffa0">2</td>

<td bgcolor="#c0e4ff">3</td>

</tr>

<tr>

<td bgcolor="#c5ffa0">4</td>

<td bgcolor="#ffa0c5">5</td>

<td bgcolor="#c5ffa0">6</td>

</tr>

<tr>

<td bgcolor="#c0e4ff">7</td>

<td bgcolor="#c5ffa0">8</td>

<td bgcolor="#c0e4ff">9</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Выровняем текст:

Здесь появляется новый атрибут valign - Вертикальное выравнивание. До этого момента нам был знаком атрибут align - горизонтальное выравнивание.

<html>

<head>

<title>Выравнивание в таблице</title>

</head>

<body>

<center>

<table width="300" height="300">

<tr>

<td bgcolor="#c0e4ff" valign="top">1</td>

<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>

<td bgcolor="#c0e4ff" align="right" valign="top">3</td>

</tr>

<tr>

<td bgcolor="#c5ffa0">4</td>

<td bgcolor="#ffa0c5"><center>5</center></td>

<td bgcolor="#c5ffa0" align="right">6</td>

</tr>

<tr>

<td bgcolor="#c0e4ff" valign="bottom">7</td>

<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>

<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Теперь о новых атрибутах.

Cellspacing - задаёт расстояние в пикселях между ячейками таблицы. Задав значение cellspacing="0" можно избавиться от "зазора" между ячейками.

Пример, увеличим "зазор":

<html>

<head>

<title>Расстояние между ячейками</title>

</head>

<body>

<center>

<table width="300" height="300" cellspacing="15">

<tr>

<td bgcolor="#c0e4ff" valign="top">1</td>

<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>

<td bgcolor="#c0e4ff" align="right" valign="top">3</td>

</tr>

<tr>

<td bgcolor="#c5ffa0">4</td>

<td bgcolor="#ffa0c5"><center>5</center></td>

<td bgcolor="#c5ffa0" align="right">6</td>

</tr>

<tr>

<td bgcolor="#c0e4ff" valign="bottom">7</td>

<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>

<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Атрибут cellpadding (не путайте с cellspacing) - в пикселях задаёт поля ячеек (отступ от границ ячеек до текста)

Пример:

<html>

<head>

<title>Поля таблицы</title>

</head>

<body>

<center>

<table width="300" height="300" cellspacing="0" cellpadding="25">

<tr>

<td bgcolor="#c0e4ff" valign="top">1</td>

<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>

<td bgcolor="#c0e4ff" align="right" valign="top">3</td>

</tr>

<tr>

<td bgcolor="#c5ffa0">4</td>

<td bgcolor="#ffa0c5"><center>5</center></td>

<td bgcolor="#c5ffa0" align="right">6</td>

</tr>

<tr>

<td bgcolor="#c0e4ff" valign="bottom">7</td>

<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>

<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Отдельно, пожалуй, еще следует обратить внимание на так называемые вложенные таблицы, я уже говорил про то, что каждая отдельно взятая ячейка может служить емкостью для других тегов.. и тег <table> не является исключением. По сути можно вставить одну таблицу в другую..

Смотрим пример:

<html>

<head>

<title>Вложенная таблица</title>

</head>

<body>

<center>

<table width="600" height="400" border="1">

<tr>

<td colspan="2"><center>Заголовок</center></td>

</tr>

<tr>

<td valign="top">содержание:</td>

<td valign="top">

<center>

<br><br>

В одну ячейку вложена целая таблица!!

<br><br><br>

<table width="200" height="200" cellspacing="0" cellpadding="15">

<tr>

<td bgcolor="#c0e4ff" valign="top">1</td>

<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>

<td bgcolor="#c0e4ff" align="right" valign="top">3</td>

</tr>

<tr>

<td bgcolor="#c5ffa0">4</td>

<td bgcolor="#ffa0c5"><center>5</center></td>

<td bgcolor="#c5ffa0" align="right">6</td>

</tr>

<tr>

<td bgcolor="#c0e4ff" valign="bottom">7</td>

<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>

<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Такой вот растянутый код получился… Сложно? Запутанно? Может быть на первый взгляд оно так и есть, но ведь не зря же я приводил столько примеров! Если что то не понятно вернитесь назад, перечитайте, идите от простого к более сложному и тогда всё станет на свои места! Практика - залог успеха. Не ленитесь, пробуйте писать код самостоятельно..

Ну и уже по традиции подвожу итог главы.. Итак, что у Вас там за страничка получилась..?

Ссылки

 

Текстовые ссылки.

Знакомимся тег <a> (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега <a> href задаёт имя и путь к документу на который указывает ссылка.

Всё вместе пишется так:

<a href="primer.html">Здесь мои фотки!!</a>

Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись "Здесь мои фотки!!" это кусочек текста из файла index.html.

По аналогии с рисунками тег <img> путь ссылки к открываемому документу прописывается теми же способами:

<a href=" stranica/primer.html">Здесь мои фотки!!</a> - Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html

<a href="../primer.html">Здесь мои фотки!!</a> - А это значит, что файл primer.html размещен на уровень выше от документа

<a href="http://www.site.ru/primer.html">Здесь мои фотки!!</a> - документ расположен на сайте www.site.ru..

Ну что давайте попробуем? Ниже приведен пример сразу двух документов в которых прописаны ссылки указывающие друг на друга.

Пример:

Файл index.html:

<html>

<head>

<title>Делаем ссылкой кусочек текста</title>

</head>

<body>

<div align="center">

<br><br><br><b>Скажи мне, милый ребёнок: в каком ухе у меня жужжит?</b>

<br><br><br>

В <a href="primer.html">правом</a> или <a href="primer.html">левом</a>?

</div>

</body>

</html>

Файл primer.html:

<html>

<head>

<title>Перешли по ссылке сюда</title>

</head>

<body>

<br><br><br><br>

<div align="center"><font size="+2">А вот и не угадал! У меня жужжит в обоих ухах.</font></div>

<br><br><br>

<div align="center"><a href=" index.html">Ну я так не играю...</a></div>

</body>

</html>

смотреть пример 

Из примера видно, что ссылки выделяются цветом, по умолчанию синеньким - ссылка, а красненьким - уже посещенная ссылка, эти цвета можно изменить с помощью уже хорошо известного нам открывающего тега < body > и его атрибутов.

link - цвет ссылки.

alink - цвет нажатой, активной ссылки.

vlink - цвет посещенной ссылки.

Пишется так:

<body link="#008000" alink="#ff0000" vlink="#ffff00">

Продолжая говорить о цвете текстовой ссылки стоит упомянуть, что при необходимости можно принудительно выделять цветом как всю ссылку, так и отдельные её части (фразы слова буквы) знакомым тегом <font> </font> и его атрибутом color. Впрочем, это касается не только цвета так же отдельно можно задать размер, стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить внутри тега <a>вот здесь</a> а не за бортом, иначе цвет ссылки будет либо по умолчанию, либо так как прописано в теге <body>

Пример:

Файл index.html:

<html>

<head>

<title>Радуга</title>

</head>

<body link="#008000" alink="#ff0000" vlink="#ffff00">

<center>

<h3>Посмотрите на фразу которая поможет Вам запомнить места цветов в радуге</h3>

<br>

<a href="primer2.html">

<font size="+1" color=#ff0000>Р</font>

<font size="+2" color=#ff8c40>А</font>

<font size="+3" color=#ffff00>Д</font>

<font size="+3" color=#008000>У</font>

<font size="+2" color=#0000ff>Г</font>

<font size="+1" color=#800080>А</font>

</a>

</center>

</body>

</html>

Файл primer.html:

<html>

<head>

<title>Радуга</title>

</head>

<body link="#008000" alink="#ff0000" vlink="#ffff00">

<center>

<font size="+3">

<font color=#ff0000>Каждый</font>

<font color=#ff8c40>охотник</font>

<font color=#ffff00>желает</font>

<font color=#008000>знать</font>

<font color=#40caff>где</font>

<font color=#0000ff>сидит</font>

<font color=#800080>фазан</font>

</font>

<br><br><br>

<a href="index.html">вернуться на главную</a>

</center>

</body>

</html>

смотреть пример 

Такие вот дела…

Рисунок ссылка.

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

Вот так:

<a href="primer3.html"><img src="knopa.gif"></a>

Перед тем как привести очередной пример расскажу про то, как при переходе по ссылке открыть документ в новом окне браузера, до этого если Вы обратили внимание он у нас открывался в текущем, что не всегда удобно. Решает эту проблему атрибут target (цель) и его значение _blank.

Пишется так:

<a href="primer3.html" target="_blank">открыть в новом окне</a>

Пример:

Файл index.html:

<html>

<head>

<title>кнопка</title>

</head>

<body>

<center>

<h1> Не в коем случае не нажимайте на эту кнопку!!!</h1>

<br>

<a href="primer3.html" title="Не нажимать!!!" target="_blank"><img src="graphics/knopa.gif" border="0" alt="Не нажимать!!!" ></a>

</center>

</body>

</html>

Файл primer.html:

<html>

<head>

<title>итог..</title>

</head>

<body>

<div align="center"><font size="+3">Ракеты ушли... Америки больше нет...</font></div>

</body>

</html>

смотреть пример 

Я надеюсь, Вы не додумались нажать большую красную кнопку? Ох уж этот русский менталитет.. :)

Что ещё можно почерпнуть из этого примера?

Во-первых. Мы применили уже знакомые атрибуты описания title="Не нажимать!!!" для тега <a> и одновременно alt="Не нажимать!!!" для тега <img> если Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе рисунок является ссылкой?.. долгая история, когда ни будь напишу статью: "Спецификации HTML, браузеры и головная боль.." - а сейчас скажу лишь то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты. А описание для ссылки картинки нам просто таки необходимо! Помните, я рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для них.

Ссылка на e-mail

Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю.. Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас думаю так будет удобнее Вам читать, и мне писать.. : Да и подразумеваю что Вы уже самостоятельно можете вставлять теги в нужные места.

Напишите мне письмо.. - строчка из того примера..

Для того что бы сделать текст или рисунок ссылкой на e-mail - почтовый ящик его нужно заключить в тег <a>, но не простой, а с использованием mailto

Пишем так:

<a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript "> Напишите мне письмо.. </a>

Эта непривычная запись будет говорить что, кликнув по тексту ссылке "Напишите мне письмо.." посетитель сайта попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript

Пример:

<html>

<head>

<title>e-mail</title>

</head>

<body>

<center><h2>

<a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript "> Напишите мне письмо.. </a>

</h2></center>

</body>

</html>

смотреть пример 

Помимо этого в почтовом бланке можно заранее прописать следующие вещи:

?subject= - Тема пиcьма

&Body= - Текст сообщения

&cc= Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript , Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript - Копии письма

&bcc= Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript , Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript - Скрытые копии письма

Адреса ящиков для копий и скрытых копий письма пишутся через запятую.

Пример:

<html>

<head>

<title>e-mail</title>

</head>

<body>

<center><h2>

<a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ?subject=А у вас молоко убежало.. &Body=Текст письма &cc= Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript &bcc= Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript >Напишите мне письмо.. </a>

</h2></center>

</body>

</html>

смотреть пример 

Закладки.

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

Предположим на странице в удобном месте находится некое содержание или меню.. по принципу:

Глава1

Глава2

Глава3

А далее идет большой текст с этими главами, так вот чтобы посетитель страницы нажав на одну из этих глав "перенёсся" в нужное место текста нам нужно сделать две вещи:

Присвоить индивидуальное имя каждой главе. Ищем, значит, в большом-большом тексте нужные главы и делаем их адресами ссылок закладок, присваиваем им имена.

Вот так:

<а name="glava1">Глава1 </а>

<а name="glava2">Глава2 </а>

<а name="glava3">Глава3 </а>

Имя можно присвоить любое необязательно glava1

А теперь собственно прописываем на них ссылки в нашем меню, содержании.

Вот так:

<a href="#glava1"> Глава1</a>

<a href="#glava2"> Глава3</a>

<a href="#glava3"> Глава3</a>

Замете перед каждым именем ставим знак решётки #.

Ладно, думаю, на примере будет понятнее:

<html>

<head>

<title>Закладки</title>

</head>

<body>

<h2>А. С. ПУШКИН</h2>

<a href="#skazka1">Сказка о попе и работнике его Балде</a><br>

<a href="#skazka2">Сказка о рыбаке и рыбке</a><br>

<a href="#skazka3">Сказка о царе Cалтане</a>

<h3><a name="skazka1">Сказка о попе и работнике его Балде</a></h3>

<pre>

Жил-был поп,

Толоконный лоб.

... ... ...

</pre>

<h3><a name="skazka2">Сказка о рыбаке и рыбке</a></h3>

<pre>

Жил старик со своею старухой

У самого синего моря.

... ... ...

</pre>

<h3><a name="skazka3">Сказка о царе Cалтане</a></h3>

<pre>

Три девицы под окном

Пряли поздно вечерком.

... ... ...

</pre>

</body>

</html>

смотреть пример 

Хотя, как я уже говорил, закладки используют для навигации внутри страницы, на них всё же можно ссылаться с других страниц или сайтов

<a href="primer.html#glava1"> идем к главе1 с другой страницы сайта</a>

<a href="http://www.site.ru/ primer.html#glava2"> разместив такую ссылку на любом другом сайте мы согласно указанному пути сначала попадаем на наш сайт www.site.ru надём там документ primer.html и сразу начинам читать главу2</a>

Ну а теперь, как и обещал, выкладываю "большой" пример он тоже состоит из двух отдельных страниц:

Файл index.html:

<html>

<head>

<title>Мой первый сайт </title>

</head>

<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">

<center>

<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">

<tr>

<td colspan="3" height="30" bgcolor="#b2ff80">

<center><img src="graphics/privet.jpg" width="200" height="40" alt="Привет мир!!!"></center>

</td>

</tr>

<tr>

<td height="30" width="33%" bgcolor="#ffa0cf">

<center><b><a href=" index.html">Обо мне!!!</a></b></center>

</td>

<td width="33%" bgcolor="#c0e4ff">

<center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center>

</td>

<td bgcolor="#c0e4ff">

<center><b><a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ">Напишите мне письмо..</a></b></center>

</td>

</tr>

<tr>

<td colspan="3" valign="top" bgcolor="#b2ff80">

<img src="graphics/foto.jpg" align="left" hspace="10" width="100" height="90" alt="Это моя фотка!!!">

<p align="justify">&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! … … …</p>

</td>

</tr>

</table>

</center>

</body>

</html>

Файл myfoto.html:

<html>

<head>

<title>Мой первый сайт </title>

</head>

<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">

<center>

<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">

<tr>

<td colspan="3" height="30" bgcolor="#b2ff80">

<center><img src="graphics/privet.jpg" width="200" height="40" alt="Привет мир!!!"></center>

</td>

</tr>

<tr>

<td height="30" width="33%" bgcolor="#c0e4ff">

<center><b><a href=" index.html">Обо мне!!!</a></b></center>

</td>

<td width="33%" bgcolor="#ffa0cf">

<center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center>

</td>

<td bgcolor="#c0e4ff">

<center><b><a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ">Напишите мне письмо..</a></b></center>

</td>

</tr>

<tr>

<td colspan="3" valign="top" bgcolor="#b2ff80">

<img src="graphics/foto1.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">

это я <br>

<img src="graphics/foto2.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">

и это я <br>

<img src="graphics/foto3.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">

снова я

</td>

</tr>

</table>

</center>

</body>

</html>

смотреть пример 

Фух.. ну вроде всё.. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур.. да и как сайт с точки зрения построения имеет законченный вид...

Он улетел - но обещал вернуться!.. :)

Вполне нормальный сайт-визитка получился.. конечно, дизайн не вдохновляет, но зато теперь у Вас будет стимул сделать лучше!! Теперь этот сайт можно выложить в свет, как это сделать читайте в статье "Публикация сайта"

Ну а мы пойдем дальше, впереди нас ждет еще много интересных всяких разных штук.

Полезные советы:

Одна из Ваших страничек на сайте обязательно должна называться index.html. Именно файл с таким названием на Вашем сайте будет искать программа робот, когда человек введет имя Вашего сайта. Так как страница index.html будет открываться первой, делайте её главной. Остальные страницы можете называть, как угодно… больше никаких нюансов с именами нет.

Про регистр.. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.

Правило трех кликов..

 

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

Интересная статья? Поделись ей с другими:

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

Защитный код
Обновить

 

Константиновская автошкола УПК

Наша кнопка

104x47 Код
Межшкольный учебно-производственный комбинат г. Константиновка

Опитування

Яка спеціальність Вам подобається?
 

Хто в мережі

Сейчас на сайте:
  • 30 гостей
Новые пользователи:
  • Виталий
  • Сергей