Основы веб-дизайна |
Графика
Вы познакомились с процессом создания текстовых файлов. Предлагаю рассмотреть форматы графических файлов, а также узнать, как вставлять изображения в HTML– документ.
Минимальный элемент изображения на экране называется пиксел (рх).
Растровые форматы: GIF, JPEG, PNG
Обрабатывать фото нужно в форматах TIFF, BMP, а окончательный вариант обработанного изображения(фото) сохраняйте в формате JPEG.
Иллюстрации с малым количеством цветов, четкими линиями или мелкими деталями лучше сохранять в формате GIF.
PNGуниверсальный формат.
Векторные форматы:
Flashформат способен хранить гипертекстовые ссылки, графику, анимацию и пр.
Информацию о растровых и векторных изображениях могут хранить метафайлы типа PDF
AdobePhotoshop, CorelDraw, Paint.NET – самые известные на сегодня графические редакторы.
Для встраивания изображения в документ используется единичный тег изображения IMG, имеющий единственный обязательный атрибут SRС, который определяет адрес файла (URL) с изображением. Адрес можно указывать абсолютный, например
<IMGSRC=http://www/eidos.ru/my.jpg>
и относительный, например
<IMGSRC= “my.jpg”>
Обязательный атрибут АLТ позволяет указать текст(в кавычках), который будет выводиться вместо изображения браузерами, неспособными представлять графику.
Атрибут ALIGN определяет положение изображения относительно окружающего его текста. Возможные значения аргумента:
ALIGN=”left” -слева,
ALIGN=”right” -справа,
ALIGN=”top” - вверху,
ALIGN =”middle” -посередине,
ALIGN =”bottom” –внизу.
Пример использования тега изображения:
<IMG SRC= “image.gif”ALT=””WIDTH=”100”HEIGT=”200”HSPACE=”10”VSPACE=”10”BORDER=”2” ALIGN =”left” >
Серия сообщений "Информационные технологии":
Часть 1 - Основы веб-дизайна
Часть 2 - Основы веб-дизайна
...
Часть 5 - Основы веб-дизайна
Часть 6 - Основы веб-дизайна
Часть 7 - Основы веб-дизайна
Часть 8 - Основы веб-дизайна
Часть 9 - Основы веб-дизайна
...
Часть 16 - Навыки быстрого набора текста
Часть 17 - Горячие клавиши
Часть 18 - Intel "Обучение для будущего"
Метки: графика растровый формат векторный формат атрибут браузер |
Основы веб-дизайна |
Образец веб-страницы
Вы узнали, что теги служат для определения вида и содержания информации в окне браузера. Одиночные теги дают разовый эффект в месте своего появления. Парные теги воздействуют на часть документа, находящуюся между начальным и конечным тегами. Многие теги имеют необязательные атрибуты для изменения функций этих тегов.
Структура большей части веб- страниц состоит из заголовка документа и его тела. В заголовке записана служебная информация о документе в целом. Она не показывается на экране. Остальная информация расположена в теле документа и отображается в окне браузера.
Текст можно разделить тегами на смысловые блоки: заголовки и абзацы.
По этому образцу была выполнена первая страница настоящего пособия «Основы веб-дизайна»:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<a href="http://www.liveinternet.ru/users/pomogajka/post161112725"title="<h1>Основывеб-дизайна</h1>"><h1>Основывеб-дизайна</h1></a>
<html>
<head>
<title>Введение</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p>Основной текст</p>
</body>
</html>
Серия сообщений "Информационные технологии":
Часть 1 - Основы веб-дизайна
Часть 2 - Основы веб-дизайна
...
Часть 4 - Основы веб-дизайна
Часть 5 - Основы веб-дизайна
Часть 6 - Основы веб-дизайна
Часть 7 - Основы веб-дизайна
Часть 8 - Основы веб-дизайна
...
Часть 16 - Навыки быстрого набора текста
Часть 17 - Горячие клавиши
Часть 18 - Intel "Обучение для будущего"
Метки: веб-страница браузер теги атрибуты |
Основы веб-дизайна |
Основные теги
<html></html> Указывает программе просмотра страниц что это HTML документ. |
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
<body></body> Определяет видимую часть документа |
Теги оглавления
<base href="ww ..?"> Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью) |
<base target="?"> Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра) |
<meta name="allow-search" content="?"> Указание для поисковых роботов как следует сканировать данную страницу |
<meta http-equiv="distribution" content="?"> Указание для поисковых роботов относится ли данная страница к мировым |
<meta name="robots" content="?"> Указание для поисковых роботов как следует сканировать данную страницу |
<meta name="author" content="?"> Указание автора странички |
<meta name="keywords" content="?"> Описаниесодержащийсяинформации(дляпоисковыхмашин) |
<meta http-eguiv="content-type" content="text/plain;churset="?"> Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.) |
Некоторые хостинги (восновном иностранные) автоматически перекодируют страници получаемые сервером в определенную кодировку. Поэтому уточняйте перед постановкой этого тега у поставщиков хостинга этот вопрос.
<meta name="description" content="?"> Ключевые слова странички (для поисковых машин) |
<title></title> Помещает название документа в оглавление программы просмотра страниц |
Атрибуты тела документа
<body bgcolor="?"> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет. |
<body text="?"> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. |
<body link="?"> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет |
. <body vlink="?"> Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет. |
<body alink="?"> Устанавливает цвет гиперссылок при нажатии |
.
Теги форматирования текста
<pre></pre> Обрамляет предварительно отформатированный текст. |
<h1></h1> Создает самый большой заголовок |
<h2></h2>, <h3>, </h3><h4></h4>, <h5>, </h5> Создает заголовоки промежуточных размеров |
<h6></h6> Создает самый маленький заголовок |
<b></b> Создает жирый текст (нерекомендованный) |
<i></i> Создает наклонный текст (нерекомендованный) |
<tt></tt> Создает текст - имитирующий стиль печатной машинки. (нерекомендованный) <kbd></kbd> Создает текст - имитирующий стиль печатной машинки. (рекомендованный) <var></var> Название переменных отображается курсивом |
<cite></cite> Выделение цитат курсивом |
<address></address> Отображается курсивом в виде отдельного абзаца |
<em></em> Наклонный текст (воспринимается посковыми роботами как выделение) <strong></strong> Жирный текст (воспринимается посковыми роботами, как особо сильное выделение) |
<font size="?"></font> Устанавливает размер текста в пределах от 1 до 7. |
<font color="?"></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
Гиперссылки
<a href="URL"></a> Создает гиперссылку на другие сайты. |
<atarget="?"></a> Указывает в каком окне открывать гиперссылку. |
параметры |
Значение |
_Blank |
Загрузка содержимого страницы, заданной ссылкой, в новое пустое окно |
_Parent |
Загрузка содержимого страницы, заданной ссылкой, в окно, которое содержит ссылку |
_Self |
Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы |
_Top |
Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы |
|
<a href="NAME"></a> Создает гиперссылку на другую страницу. |
<a href="mailto:EMAIL"></a> Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. |
<a href="#name"></a> Создает гиперссылку на метку текущей страницы. |
<a name="name"></a> Отмечает часть текста, как метку для гипперссылок на странице. |
<a href="NAME#name"></a> Создает гиперссылку на метку другой страницы. |
Форматирование
<p></p> Создает новый параграф |
<p align="?"></p> Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center |
<nobr> Запрещает перевод строки. |
<wbr> Указывает где разбивать строку для переноса при необходимости. |
<br> Вставляет перевод строки. |
<blockquote></blockquote> Создает отступы с обеих сторон текста. |
<dl></dl> Создает список определений. |
<dt> Определяет каждый из терминов списка |
<dd> Описывает каждое определение |
<ol></ol> Создает нумерованный список |
<li> Определяет каждый элемент списка и присваивает номер |
<ul></ul> Создает ненумерованный список |
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик. |
<div align="?"></div> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей |
Графические элементы
<imgsrc="name"> Добавляет изображение в HTMLдокумент |
<imgsrc="name" align="?"> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle |
<img src="name" border="?"> Устанавливаеттолщинурамкивокругизображения |
<imgsrc="name" vspase="?"> Устанавливает поля сверху и снизу |
<img src="name" hspase="?"> Устанавливаетполясбоков |
<imgsrc="name" alt="?"> Всплывающая подсказка при наведении на имедж |
<hr> Добавляет в HTML документ горизонтальную линию. |
<hr size="?"> Устанавливает высоту (толщину) линии |
<hr width="?"> Устанавливает ширину линии, можно указать ширину в пикселах или процентах. |
<hr noshade> Создает линию без тени. |
<hr color="?"> Задает линии определенный цвет. Значение RRGGBB. |
Таблицы
<table></table> Создает таблицу. |
<tr></tr> Определяет строку в таблице. |
<td></td> Определяет отдельную ячейку в таблице. |
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) |
<caption></caption> Определяет подпись таблицы |
Атрибуты таблицы
<table border="#"> Задает толщину рамки таблицы. |
<table cellspacing="#"> Задает расстояние между ячейками таблицы. |
<table cellpadding="#"> Задает расстояние между содержимым ячейки и ее рамкой. |
<table width="#"> Устанавливает ширину таблицы в пикселах или процентах от ширины документа. |
<table height="#"> Устанавливает высоту таблицы в пикселах или процентах от высоты документа. |
<tr align="?"> или<td align="?"> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. |
<tr valign="?"> или<td valign="?"> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. |
<td colspan="#"> Указывает кол-во столбцев, которое объединено в одной ячейке. (по умолчанию=1) |
<td rowspan="#"> Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1) |
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |
<td width="#"> Устанавливает ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину). |
<td height="#"> Устанавливает высоту ячейки в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную высоту). |
Фреймы
<frameset></frameset> Предваряет тег <body> в документе, содержащем фреймы; |
<frameset rows="value,value">Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. |
<frameset cols="value,value"> Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов. |
<frame> Определяет единичный фрейм или область в таблице фреймов. |
<noframes></noframes> Определяет, что будет показано в окне браузера, если он не поддерживает фреймы. |
Атрибуты фреймов
<frame src="URL"> Определяет какой из HTML документов будет показан во фрейме. |
<frame name="name"> Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм или область из других фреймов. |
<frame marginwidth="#"> Определяет величину отступов по левому и правому краям в нутрь фрейма; должно быть равно или больше 1. |
<frame marginheight="#"> Определяет величину отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1. |
<frame scrolling=VALUE> Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. |
<frame noresize> Препятствует изменению размеров фрейма пользователем. |
Ифрейм и его атрибуты
<iframe></iframe> Создает контейнер, который может содержать любые элементы. Остальные элементы обтекают этот контейнер. |
<iframe src="URL"> Определяет какой из HTML документов будет показан в ифрейме. |
<iframe name="name"> Указывает Имя ифрейма, что позволяет перенаправлять информацию в этот ифрейм . |
<iframe vspase="?"> Устанавливает поля сверху и снизу с наружи от ифрейма |
<iframe hspase="?"> Устанавливает поля сбоков с наружи от ифрейма |
<iframe marginwidth="#"> Определяет величину отступов по левому и правому краям в нутрь ифрейма; должно быть равно или больше 1. |
<iframe marginheight="#"> Определяет величину отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1. |
<iframe scrolling=VALUE> Указывает будет-ли выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. |
<iframewidth="#"> Определяет ширину ифрейма |
<iframeheight="#"> Определяет высоту ифрейма; |
<iframe title="?"> Текствсплывающейподсказки |
Формы
<form></form> Создаетформы |
<select multiple name="NAME" size="?"></select> Создаетскролируемоеменю. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. |
<option> Указывает каждый отдельный элемент меню |
<select name="NAME"></select> Создаетниспадающееменю |
<option> Указывает каждый отдельный элемент меню |
<textareaname="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста.Columnsуказывает ширину окна; rowsуказывает его высоту. |
<input type="checkbox" name="NAME"> Создаетcheckbox. |
<input type="radio" name="NAME" value="x"> Создаетradio кнопку. |
<input type=text name="foo" size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах. |
<input type="submit" value="NAME"> Создаеткнопку"Отправить" |
<input type="image" border="0" name="NAME" src="name.gif"> Создаеткнопку"Отправить" - дляэтогоиспользуетсяизображение |
<inputtype="reset"> Создает кнопку "Очистить |
"
"
Серия сообщений "Информационные технологии":
Часть 1 - Основы веб-дизайна
Часть 2 - Основы веб-дизайна
Часть 3 - Основы веб-дизайна
Часть 4 - Основы веб-дизайна
Часть 5 - Основы веб-дизайна
Часть 6 - Основы веб-дизайна
Часть 7 - Основы веб-дизайна
...
Часть 16 - Навыки быстрого набора текста
Часть 17 - Горячие клавиши
Часть 18 - Intel "Обучение для будущего"
Метки: html формы ифрейм фрейм пиксели таблицы список форматирование гиперссылка текст цвет теги |
Основы веб-дизайна |
Вывод тегов на веб-страницу
Теги не показываются в окне браузера, так как воспринимаются браузером как команды для вставки элементов и изменения их свойств. Иногда для демонстрации HTML-кода необходимо вывести теги на веб-страницу.
Рекомендуется использовать спецсимволы < и > для замены угловых скобок < и >. При этом тег <p> будет выглядеть как <p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Серия сообщений "Информационные технологии":
Часть 1 - Основы веб-дизайна
Часть 2 - Основы веб-дизайна
Часть 3 - Основы веб-дизайна
Часть 4 - Основы веб-дизайна
Часть 5 - Основы веб-дизайна
Часть 6 - Основы веб-дизайна
...
Часть 16 - Навыки быстрого набора текста
Часть 17 - Горячие клавиши
Часть 18 - Intel "Обучение для будущего"
Метки: браузер html теги |
Без заголовка |
Что нужно для пасхи с шоколадом:
Творог - 2 кг
Шоколад -200 г
Сахарная пудра - 200г
Сметана - 2 стакана
Сливочное масло - 200г
Цукаты - 1 стакан
Как приготовить пасху с шоколадом:
1. Шоколад натрите на терке, смешайте с сахарной пудрой.
2. Творог протрите через сито, смешайте со сливочным маслом и сметаной, хорошо размешайте. Всыпьте стакан нарезанных цукатов, шоколад с сахарной пудрой и перемешайте.
3. Массу выложите в форму, выстеленную марлей, поместите в холодное место и положите под гнет. Через 36 часов пасху выньте из формы и подавайте к столу. По желанию, полейте ее шоколадной глазурью и посыпьте цукатами, пасха с шоколадом готова, приятного аппетита!
http://varenikoff.ru/deserts/513-pasxa-so-sgushhennym-molokom.html
Серия сообщений "десерты,кремы":десерты,кремы,напиткиЧасть 1 - Лимонный кёрд
Часть 2 - Как сделать мороженое из сока за 2 минуты
...
Часть 98 - Запеченый грейпфрут и еще несколько десертов
Часть 99 - Десерт "Мир Кнама"
Часть 100 - Крем из манки
Серия сообщений "ПРАЗДНИКИ":
Часть 1 - Все для встречи 2011 г
Часть 2 - Хеллоуин
...
Часть 11 - Полезные советы при окраске яиц
Часть 12 - Пасха со сгущенным молоком
Часть 13 - Пасха с шоколадом
Часть 14 - Пасха с клубникой и изюмом
|
Основы веб-дизайна |
Предварительный просмотр
Следующим этапом будет проверка кодирования.
Для этого необходимо открыть программу «Блокнот» и скопировать данные с предыдущего файла.
Нажать кнопку «Сохранить как», задать имя файла с расширением .html.
Затем выбрать «Все файлы» и сохранить на локальном диске (С:)
Теперь этот файл можно открыть там же с помощью Интернета. Если все выполнено правильно, то веб-страница откроется.
Серия сообщений "Информационные технологии":
Часть 1 - Основы веб-дизайна
Часть 2 - Основы веб-дизайна
Часть 3 - Основы веб-дизайна
Часть 4 - Основы веб-дизайна
Часть 5 - Основы веб-дизайна
...
Часть 16 - Навыки быстрого набора текста
Часть 17 - Горячие клавиши
Часть 18 - Intel "Обучение для будущего"
Метки: интернет файл html локальный диск веб-страница |
Основы веб-дизайна |
Создание веб-страницы
Предположим, что Вы хотите выставить на всеобщее обозрение какой-то интересный материал. Для этого текст нужно вначале набрать в MicrosoftWord. Чтобы он был читаем в Интернете, нужно воспользоваться кодовым языком разметки гипертекста HTML-оформить текст тегами. Теги- специальные символы, которые используют для создания рисунков, таблиц , ссылок и др.
Чтобы поисковый движок нашел Ваш текст, необходимо, чтобы поисковые серверы отобразили
содержимое поля description при выводе результатов поиска.
Серия сообщений "Информационные технологии":
Часть 1 - Основы веб-дизайна
Часть 2 - Основы веб-дизайна
Часть 3 - Основы веб-дизайна
Часть 4 - Основы веб-дизайна
...
Часть 16 - Навыки быстрого набора текста
Часть 17 - Горячие клавиши
Часть 18 - Intel "Обучение для будущего"
Метки: веб-страницы html теги |
Основы веб-дизайна |
Введение
Интернет уверенно вошел в нашу жизнь. Блоги, сайты растут как грибы после дождя.
Все новички испытывают одни и те же трудности в процессе их создания.
Я расскажу о том, как правильно оформить веб -странички с рассказами, фотографиями, таблицами на своем собственном сайте или в блоге. Итак, наберитесь терпения и-вперед!
Наш девиз: «Дорогу осилит идущий!»
Серия сообщений "Информационные технологии":
Часть 1 - Основы веб-дизайна
Часть 2 - Основы веб-дизайна
Часть 3 - Основы веб-дизайна
...
Часть 16 - Навыки быстрого набора текста
Часть 17 - Горячие клавиши
Часть 18 - Intel "Обучение для будущего"
|
Роспись камней. |
|
Без заголовка |
Состав рецепта блюда
500 г фарша свино-говяжьего,
1 яйцо,
300 г капусты,
2 крупные луковицы,
|
Видео-запись: Музыкальная сигаретница |
Метки: искусство |
|
Каша «Компромисс» |
Дневник |
Среда, 30 Марта 2011 г. 20:32 (ссылка)редактировать
Часто приходится слышать, что наши дети, да и многие родители, не любят пшенную кашу. Между тем - эта каша очень полезный продукт. Микроэлементы, содержащиеся в пшене, укрепляют костный скелет, что важно и для детей, и для подростков, и для тех, кому за 40. Предлагаю рецептик приготовления каши, которая нравится практически всем!
На 2 порции
Приготовление
Крупу промыть, залить горячей(градусов 60) водой и поставить вариться на небольшом огне без крышки. Минут через пять посолить, а когда пшено впитает в себя всю воду, плотно закрыть кастрюлю крышкой и поставить на водяную баню со слабо кипящей водой на 20 мин. Потом снять с водяной бани и добавить в кашу мед, распаренные в течение 15-20 мин изюм и курагу, порезанную на мелкие кусочки. Затем выложить кашу в глубокую тарелку и украсить изюмом.
Рубрики: |
Рецептики наши дети |
Метки: домоводство |
Как скачать видео из интернета. Лечим жадность интернет-видеотек. |
|
WordPress. Первая запись: текст и изображение |
|
Благодарность |
Когда мне стало "ХХ" лет,
Я "залезла" в Интернет!
Для начала вышла в Googl,
На блоги раскатала губы...
На narod.ru:"Раз-два-три!
Чудо-сайтик, посмотри!!
Можно тут устроить дело".
Я от этой мысли дельной
Даже вздрогнула слегка.
Но, HTML не знаю языка!
Ох, учить-то сложновато...
Я в который раз реву,
Когда "милый" модератор
Тексты "режет" наяву...
..."Виват!"- моим УЧИТЕЛЯМ
За нить, что нас связала.
"Преуспеваю в Интернет",-
Знакомым я сказала.
Серия сообщений "Разное":
Часть 1 - Благодарность
Часть 2 - Открытка
Часть 3 - Руки будут красивыми!
...
Часть 7 - Христос Воскрес!
Часть 8 - Упражнения для красивой попы
Часть 9 - С праздником светлой Пасхи!
Метки: интернет модератор блог. сайт |
Цвет и его влияние на нашу жизнь |
|
Без заголовка |
|
Выставка народного творчества "ЯРМАРКА РЕМЁСЕЛ" 2011год,Новосибирская обл.,г.Куйбышев |
|
Дневник Pomogajka |
|