color="#008000"> Привет мир
© Семикопенко Алексей Алексеевич | www.webremeslo.ru14 Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам Я очень очень сильно люблю >вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу © Семикопенко Алексей Алексеевич | www.webremeslo.ru15 Вот так Выравнивание рисунка. Теперь расскажу о том как разместить нашу фотографию в нужном месте страницы. На самом деле об этом я уже рассказывал. вспомните вторую главу, где говорилось о том как можно выровнять текст. эти же теги применимы и к выравниванию изображения так что, пожалуй, повторятся не буду, просто приведу примера Вы уж самими подумайте почему одно и тоже фото очутилось в томили ином месте. Пример >
Это моя фотка!!!"> Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу © Семикопенко Алексей Алексеевич | www.webremeslo.ru16 Единственное, что Вам в этом примере незнакомо так это надпись - - это есть так называемый спецсимвол в данном случае - пробел. о спецсимволах и их назначении я расскажу более подробно в 6 главе. Честно говоря, мне мой пример несильно по вкусу, неряшливо как-то.. Но цель показать, что можно делать с изображениями думаю достигнута. Полезные советы Используя графику, будьте осторожны. не стоит размещать на своей странице большие весом мегабайтные изображения, пожалейте время и деньги посетителей страницы. Большой объём графики при низкой скорости интернета может привести к тому, что посетитель закроет Вашу страницу ещё до того момента как она загрузится. Помните, что есть пользователи, которые умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на трафике, а посему рекомендую соблюдать следующие советы Если рисунки выполняют роль кнопок (см. Глава 5), обязательно подписывайте их (атрибут alt) к примеру "Перейти на главную страницу" или "Скачать" дабы человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице. Используя картинку в качестве фона документа дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом (атрибут bgcolor тега ) вот так например Это будет значить, что если к примеру не загрузится Ваша изысканная зелёная текстура, фон будет просто зелёным - что лучше, нежели чем белый цвет в общем дизайнерском решении сайта. © Семикопенко Алексей Алексеевич | www.webremeslo.ru17 Глава 4 Таблицы Помимо прочих объектов в свой сайт Вы можете вставить таблицы. и сразу забегая вперёд скажу о том что они имеют немалую значимость при создании сайта. С помощью таблицы можно не только выложить ту или иную информацию, тарифную сетку или график дежурств к примеру, но и взяв е за основу полностью построить на ней свой сайт, таблицы порой незаменимы при верстке страницы, но об этом позже. А сейчас давайте научимся её рисовать. Рисуем таблицу Тег
задаёт начало и конец таблицы, любая таблица, как известно, состоит из строки столбцов, для этого есть ещё два тега
- строка таблицы
- столбец таблицы Вместе эти теги пишутся так
Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку Поставим перед собой задачу нарисовать таблицу из трёх строки трёх столбцов, а заодно вспомним атрибут
border
"рамка, который добавит нам наглядности.
<table строка ячейка1 |
строка1 ячейка2 |
строка1 ячейка3 |
строка2 ячейка1 |
строка2 ячейка2 |
строка2 ячейка3 |
строка3 ячейка1 |
строка3 ячейка2 |
строка3 ячейка © Семикопенко Алексей Алексеевич | www.webremeslo.ru18
строка1 ячейка2 |
строка1 ячейка3 |
строка2 ячейка1 |
строка2 ячейка2 |
строка2 ячейка3 |
строка3 ячейка строка ячейка2 |
строка3 ячейка © Семикопенко Алексей Алексеевич | www.webremeslo.ru19
строка1 ячейка2 |
строка1 ячейка3 |
строка2 ячейка1 |
строка2 ячейка2 |
строка2 ячейка3 |
строка3 ячейка строка ячейка border="1">
|
| строка1 ячейка2 |
строка1 ячейка3 |
строка2 ячейка2 |
строка2 ячейка строка ячейка © Семикопенко Алексей Алексеевич | www.webremeslo.ru20 Пример
width="640" height="480">
| строка1 ячейка строка ячейка2 |
строка2 ячейка colspan="2" строка ячейка border="1" width="640" height="480">
| height="25%">
width="15%"> строка ячейка строка ячейка строка ячейка строка ячейка1 |
строка2 ячейка2 |
строка2 ячейка строка ячейка1 |
строка3 ячейка2 |
строка3 ячейка © Семикопенко Алексей Алексеевич | www.webremeslo.ru21
© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
22
bgcolor="#c0e4ff">1 |
bgcolor="#c5ffa0">2 |
bgcolor="#c0e4ff">3 |
bgcolor="#c5ffa0">4 |
bgcolor="#ffa0c5">5 |
bgcolor="#c5ffa0">6 |
bgcolor="#c0e4ff">7 |
bgcolor="#c5ffa0">8 |
bgcolor="#c0e4ff">9 |
valign="top">1 |
valign="top">2 |
align="right" valign="top">3 |
4 |
5 |
align="right">6 |
valign="bottom">7 |
valign="bottom">8 |
align="right" valign="bottom">9 |
© Семикопенко Алексей Алексеевич | www.webremeslo.ru23
cellspacing="15">
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
cellpadding="25">
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
© Семикопенко Алексей Алексеевич | www.webremeslo.ru24 Отдельно, пожалуй, еще следует обратить внимание на так называемые вложенные таблицы, я уже говорил про то, что каждая отдельно взятая ячейка может служить емкостью для других тегов. и тег
не является исключением. По сути можно вставить одну таблицу в другую. Смотрим пример
|
В одну ячейку вложена целая таблица
|
© Семикопенко Алексей Алексеевич | www.webremeslo.ru25
|
| |
|
Это моя фотка!!!" Это моя фотка!!">
Разрешите представиться Карлсон! который живет на крыше.
Спокойствие! Только спокойствие подумаешь с жильём проблемы Я - умный, красивый, в меру упитанный мужчина, в полном расцвете сил Женщины сходят по мне сходят сума. эх. какая досада. в общем со мной не соскучишься По телевизору показывают жуликов. Ну чем я хуже - так что вот решил сделать свою страничку!
Хочу здесь найти себе новых друзей, для того чтобы вместе гулять по крышам!
Я очень очень сильно люблю варенье !!! С нетерпеньем буду ждать Вашего приглашения на чай. побалуемся плюшками пошалим…
Прилечу!!
Ну зачем тебе этот щенок Я же лучше, Малыш |
© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
26 указывать большую ширину страницы. По-моему ширина в 1024 пикселей будет оптимальным размером хотя ну да ладно. решайте сами.
© Семикопенко Алексей Алексеевич | www.webremeslo.ru27 Глава 5 Ссылки Думаю, Вам уже понятно о чём пойдет речь в этой главе. и Вызнаете, что из себя представляет ссылка, если нетто нажмите сюда. ( http://www.webremeslo.ru/html/primer/primer29.html) Существует несколько видов ссылок, атак же "механизмов" перехода по ним. В этой главе постараюсь подробно рассказать о том как прописать ссылки, атак же посвятить в тонкости дела по работе сними. Лирическое отступление Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую Принеси мне вот тот документ, правда я не знаю где они какой Что стоишь Бегом давай Опаздываю я Так вот, к чему я это, чтобы браузер, как я тогда, не впал в ступор, ему необходимо знать точное название документа, путь к документу, и место куда его принести, точнее где его открыть. На данный момент с помощью блокнота мы создали только один HTML документу меня он с именем index.html (зачем выбрал такое странное название index.html и зачем оно нужно смотрите в полезных советах) у Вас не знаю с каким, Вы сами имя придумывали, но думаю, Вы его помните и знаете где он лежит, если конечно Вы немой начальник штаба :).. В этом документе мы попробуем создать ссылку на другой документ, которого у нас еще нет. Так что прежде чем на него ссылаться, его нужно создать, благо Вы это уже умеете. 1. Открываем блокнот. 2. Пишем код на html языке. к примеру страничку с рядом фотографий. 3. Сохраняем его как html страничку в туже рабочею папку, где уже есть созданный нами первый документ. Давайте, чтоб не путаться назовем его primer.html, да и первый тоже, пожалуй, переименуйте в index.html Теперь я знаю, что у Вас два html документа index.html и primer.html и что теперь у Вас есть минимальный набор для дальнейшего обучения. Текстовые ссылки. Знакомимся, тег (от anchor- якорь, в него можно заключить текст или рисунок, которые станут ссылкой нате или иные документы. Атрибут тега href задаёт имя и путь к документу на который указывает ссылка. Всё вместе пишется так Здесь мои фотки!! Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись "Здесь мои фотки!!" это кусочек текста из файла index.html. По аналогии с рисунками тег ![]() путь ссылки к открываемому документу прописывается теми же способами Здесь мои фотки!! - Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html Здесь мои фотки!! - А это значит, что файл myfoto.html © Семикопенко Алексей Алексеевич | www.webremeslo.ru28 размещен на уровень выше от документа Здесь мои фотки!! - документ расположен на сайте www.site.ru.. Ну что давайте попробуем Ниже приведен пример сразу двух документов в которых прописаны ссылки указывающие друг на друга. Пример Файл index.html: А вот и не угадал У меня жужжит в обоих ухах. Продолжая говорить о цвете текстовой ссылки стоит упомянуть, что при необходимости можно принудительно выделять цветом как всю ссылку, таки отдельные её части (фразы слова буквы) знакомым тегом и его атрибутом
color.
Впрочем, это касается не только цвета также отдельно можно задать размер, стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить внутри тега вот здесь а не за бортом, иначе цвет ссылки будет либо по умолчанию, либо так как прописано в теге
© Семикопенко Алексей Алексеевич | www.webremeslo.ru29 Пример Файл index.html: link="#008000" alink="# ff0000 " vlink="# ffff00"> Посмотрите на фразу которая поможет Вам запомнить места цветов в радугеР А Д У Г А link="#008000" alink="# ff0000 " vlink="# ffff00"> Каждый охотник желает знать где сидит фазан вернуться на главную
© Семикопенко Алексей Алексеевич |
www.webremeslo.ru
30 Перед тем как привести очередной пример расскажу про то, как при переходе по ссылке открыть документ в новом окне браузера, до этого если Вы обратили внимание он у нас открывался в текущем, что не всегда удобно. Решает эту проблему атрибут
target
(цель) и его значение Пишется так открыть в новом окне Пример Файл index.html:
| |
|
|
|
Скачать 1.59 Mb.