Программы> стандартные> блокнот), не забываем сохранить файл с расширением html или htm (его дописываем прямо к названию файла через точку) (не txt!) Естественно, тут нужно знать html :)
| Вид материала | Документы |
- Программа для просмотра web-страниц, которая преобразует тэги html-документа в соответствующее, 47.68kb.
- Html динамический html, 177.06kb.
- Впоследнее время www стал самым популярным сервисом Интернета, 637.63kb.
- Автоматически создает html версии документов при сканировании Интернета, 2049.64kb.
- Создание собственной web-страницы в Internet, 927.61kb.
- Концепция www 5 Создание Web-страницы с помощью языка html 7 1 Язык html 7 Структура, 217.81kb.
- Текст документа, 245.21kb.
- Html, " onclick="return false">ссылка скрыта, 60.66kb.
- Гиа 9 класс В19. Компьютерные сети. Адресация в Интернете, 37.21kb.
Способы создания Web-сайта
Существуют разные способы создания сайтов. Можно выделить пять:
1) Универсальный. Пишем html-код странички от руки в стандартном блокноте Windows (Пуск> программы> стандартные> блокнот), не забываем сохранить файл с расширением .php или .htm (его дописываем прямо к названию файла через точку) (НЕ txt!) Естественно, тут нужно знать html :)
2) C помощью редакторов. Таковых существует множество, например, Microsoft FrontPage (визуальный и очень простой в обращении. Здесь уже знать html не обязательно), AceHTML, HomeSite...
3) C помощью обычного Word'a. Набиваете страничку, размещаете картинки, таблички... как на простом документе. Жмете: файл> сохранить как> тип: веб-страница.
4) На шаблонах. Сейчас в инете много разных шаблонов, которые можно скачать и отредактировать первым или вторым способом (см.выше)
5) C помощью конструкторов на готовых шаблонах за несколько минут в режиме on-line. См. narod.ru или ucoz.ru. Вообще, конечно, первый способ — лучший :)
Редакторы html
Небольшой обзор WYSIWYG-редакторов html
1) Adobe Golive Cs (HTML, CSS, JS, SSI, PHP, Java, Vbscript, C# )
2) Macromedia HomeSite
3) Macromedia Dreamweaver (HTML, CSS, JS, ASP, PHP, JSP)
4) Microsoft FrontPage (очень рекомендую тем, кто не хочет изучать html)
5) Namo WebEditor
6) CuteSite Builder (нет доступа к html-коду)
7) CoffeeCup VisualSite Designer (нет доступа к html-коду)
8) Acella
9) EasyWebEditor (нет доступа к html-коду)
PS самый простой редактор html/php страниц — блокнот винды :)
Структура Html-документа
Структура Html-документа или с чего начинается каждая страничка
Html-код страничек будем писать в обычном блокноте Windows (Пуск> программы> стандартные> блокнот).
После того, как весь код будет написан (см. ниже), не забываем сохранить созданный файл с расширением .php или .htm (его дописываем прямо к названию файла через точку), но ни в коем случае не .txt!
Отредактировать сохраненный html-файл можно следующим образом: открываем страничку в браузере и выбераем команду меню (для IE): вид> просмотр HTML-кода, после чего и откроется html-код выбранной странички в блокноте (но может открыться в другом редакторе. Все зависит от настроек браузера).
Рассмотрим структуру html-документа...
Самая первая строчка html-документа:
//DTD HTML 4.01//EN" "g/TR/html4/strict.dtd">
Лучше всего указывать метод strict, иначе под IE появятся разные виды глюков. Самый расспространенный — неверная интерпретация IE margin'ов и padding'ов: он их суммирует сверху к общей длине блока. Новичкам советую пока не заморачиваться по этому поводу)
Весь html-документ заключается в теги:
....
Добавляем голову html-документа — head:
....
В голову пишем заголовок нашего сайта в тегах title:
Затем добавляем мета-тег кодировки нашей странички (если пропустить этот важный момент, на вашем сайте возможно нежелательное появление иероглифов и других неопознанных объектов :) )
На самом деле существует еще множество интересных мета-тегов, но об этом позже)
Далее (после title) добавляем тело html-документа (здесь содержится весь наш сайт: картинки, таблички, тексты...) — body:
.......
Мета-теги
Чтобы облегчить жизнь поисковым роботам (да и себе тоже), не забывайте о meta-тегах. Все они вставляются между тегами head.
это описание поисковик должен выдавать рядом со ссылкой на ваш сайт, правда далеко не все из них это делают.
сильно на них не рассчитывайте: в последнее время поисковики при индексации больше обращают внимание на сам текст сайта, а не на набор ключевых слов в мета-тегах.
дата последнего обновления сайта.
если документ часто обновляется.
частота захода роботов на ваш сайт для последующей индексации. Это старый мета-тег и он редко работает :)
если сайт не изменяется, можно заблокировать доступ робота к сайту.
действия, разрешенные роботам: ALL (все действия разрешены), Index (можно индексировать страницу), Noindex (нельзя индексировать).
указание доступа к вашему сайту: General (сайт доступен всем), 14 jears (доступен инетчикам от 14 лет; можно писать любую другую цифру для аналогичных случаев), Mature (только взрослым)...
определение главной страницы для индексирования.
указание типа документа, например — «Homepage».
указание языка вашего сайта.
здесь можно указать автора сайта.
Текст на страничке
Со структурой странички разобрались, теперь можно заполнять сайт текстом :) Сразу отмечу, html-форматирование текста встрачается в сети редко. Все эти методы на профессиональных сайтах давно запрещены, к тому же они не удобны. Представьте, что вы решили изменить размер текста и его цвет на всех страничках своего сайта, а их у вас... допустим, 200! Мы же с вами не станем менять код в каждой странице?:) Для этого существует CSS. Об этом расскажу как-нибудь попозже. А пока... новичкам будет полезна следующая информация.
Весь текст вставляем между тегами body. А чтобы раскрасить его в какой-либо цвет, достаточно заключить нужный фрагмент текста в теги FONT и указать код цвета:
код_цвета_html">
Наш текст. Всем привет!
Размер шрифта указывается через SIZE (от 1 до 6), а вид шрифта — через FACE:
код_цвета_html" SIZE=3 FACE="Arial">
Твой текст
В FACE можно через запятую перечислить несколько шрифтов на случай, если у пользователя не будет первого, браузер выберет следующий.
Форматирование текста на страничке
Переформатированный текст
Это самый простой способ размещения текста на страничке, который позволяет сэкономить время при размещении на странице любого фрагмента уже отформатированного текста: просто заключите готовый текст в теги
......
. В этом случае браузер сохранит в неприкосновенности все пробелы и Enter'ы. В общем, этот способ я не рекомендую:) Он в Explorere прокатит, а вот за другие браузеры я не ручаюсь, поэтому лучше размещайте текст на своей страничке как описано ниже!
Разбивка на абзацы
Все абзацы заключаются в теги
...
.Т.е. весь текст находящийся между этими тегами будет абзацем.
Можно написать:
Этот текст будет абзацем, поскольку предоставленная мне информация по HTML является достоверной.
Или:
Этот текст будет абзацем, поскольку предоставленная мне информация по HTML
является достоверной.
В обоих случаях браузер отобразит одно и то же:
Этот текст будет абзацем, поскольку предоставленная мне информация по HTML является достоверной.
Выравнивание абзацев
По умолчанию все абзацы выравниваются в браузере по левому краю. Обойти это просто, если учесть, что за выравнивание отвечает параметр ALIGN (записываем в
):
Этот текст будет по центру
Текст справа
Текст слева
Часто бывает необходимо равномерно распределить текст по абзацу (чтобы текст не обрывался по правому краю), за выравнивание по строке (и по левому и по правому краю одновременно — как в этом абзаце (на этой странице)) отвечает параметр JUSTIFY в АLIGN. Имейте в виду: не все редакторы распознают этот параметр! Если вы пишите свою страничку в блокноте, то там таких проблем нет. А самый главный недостаток этого параметра, на мой взгляд, это то, что он иногда любит переносить на следующую строку повтор слова конца предыдущей строки. Не знаю откуда такие глюки. Ну и, конечно, что в нем не нравится обычно: если слов в предложении мало, то они некрасиво растянутся по всей строке, образуя пустоты между словами...
С абзацами разобрались, перейдем к строкам.
Разрыв строки
Переход на новую строку осуществляется с помощью тега
. Он ставится в конце нужной строки, которую обрываем. Что-то типа обыкновенного Enter'a. У него нет закрывающегося тега!
Если просто хотите сделать несколько пустых строк (без текста), то запишите подряд нужное число раз
.
Например, три пустые строки:
Заголовки и подзаголовки
Нужный текст заключаем в теги
Управление начертанием текста
полужирный шрифт заключаем в теги ...
курсив: ...
подчеркнутый текст: ...
вычеркнутый текст:
верхний индекс: ...
нижний индекс: ...
пишущая машинка: ...
Коды спец.символов
последние 4 символа корректно отображаются только в FireFox
пробел
@ @
& &
" "
“ “
” ”
« «
» »
— —
– –
… …
¦ ¦
¤ ¤
§ §
¶ ¶
< <
> >
≤ ≤
≥ ≥
≈ ≈
≠ ≠
≡ ≡
− −
× ×
÷ ÷
± ±
¬ ¬
¯ ¯
‾ ‾
° °
ƒ ƒ
∑ ∑
∏ ∏
∫ ∫
∂ ∂
√ √
∞ ∞
Ø Ø
∩ ∩
µ µ
² ²
³ ³
Α α Α α
Β β Β β
Γ γ Γ γ
Δ δ Δ δ
Ε ε Ε ε
Ζ ζ Ζ ζ
Η η Η η
Θ θ Θ θ
Ι ι Ι ι
Κ κ Κ κ
Λ λ Λ λ
Μ μ Μ μ
Ν ν Ν ν
Ξ ξ Ξ ξ
Ο ο Ο ο
Π π Π π
Ρ ρ Ρ ρ
Σ σ Σ σ
Τ τ Τ τ
Υ υ Υ υ
Φ φ Φ φ
Χ χ Χ χ
Ψ ψ Ψ ψ
Ω ω Ω ω
· ·
• •
™ ™
© ©
® ®
← ←
↑
→ →
↓ ↓
↔ ↔
‰ ‰
† †
‡ ‡
◊ ◊
♠ ♠
♣ ♣
♥ ♥
♦ ♦
Графика на web-страницах
Лучше всего размещать на сайте картинки форматов gif или jpg. Иногда нужны и png, а вот bmp'шки не рекомендуются из-за своего гигантского размера: чем больше весит картинка, тем дольше она будет загружаться при просмотре ваших страниц, в результате чего гость просто сбежит с вашего сайта или отключит показ картинок в браузере :)
Картинки вставляются с помощью тега IMG с указанием адреса самой картинки (если картинка находится на другом сайте, то не забывайте указывать ее полный адрес с http. Кстати, url-адрес любой картинки в сети можно узнать, кликнув правой кнопкой по выбранной картинке и выбрать там пункт «свойства») в src:
или HTML-код вставки картинки:
BB-код вставки картинки (обычно для форумов):
[img]ash.ru/anime/teddy/image/teddy110.gif[/img]
width — ширина картинки в пикселах;
height — высота картинки, тоже в пикселах.
Не забывайте указывать параметры width и height! Это один из способов ускорения загрузки графики. Конечно, если вы просто вставляете картинку кому-то в комментарий дневника, то width и height указывать не обязательно.
А еще, для каждой картинки можно прописать alt-текст. В этом случае при наведении мышки на картинку появится всплывающий комментарий. Например:
Если пользователь отключит показ картинок в своем браузере, то вместо картинок увидит эти надписи-комментарии. А по стандартам html указывать alt обязательно всегда, в некоторых случаях можно писать пустой alt="".
Кроме alt'a существует еще и title. В отличие от alt'a, с отключенными картинками при title на экране мы не увидим никаких комментариев к отключенным изображениям в IE. В Firefox наоборот: видимы значения title, но не видны alt'ы (alt всплывает). И еще, title можно приписывать к текстовым ссылкам. Бывает полезно и очень удобно:)
Обтекание картинок текстом
Картинку можно расположить слева или справа от текста. За ее расположение отвечает параметр align:
right — картинка справа от текста;
left — картинка слева от текста;
bottom — нижняя линия строки текста выравнивается по нижнему краю картинки;
top — верхняя линия строки текста выравнивается по верху картинки;
middle или center — строка текста выравнивается по середине картинки.
Иногда бывает полезно задать поля вокруг картинки. Это делается с помощью параметров hspace и vspace:
Разместить картинку по центру можно с помощью тега center:
Не забывайте закрыть тег, иначе вся информация на вашей страничке, идущая после картинки, отцентрируется :)
А вообще, размещать картинки, текст и другие элементы страницы удобно в табличках, сделав невидимые границы. Об этом читайте в темке «таблицы».
Меняем фон сайта
Со структурой html-странички мы с вами уже познакомились в соответствующей теме, поэтому с тегом body вы уже знакомы. Именно в этом теге можно задать цвет фона вашего сайта или прописать путь до фоновой картинки.
Смена цвета фона:
Коды смотрите в палитре цветов или в фотошопе. Вместо кода можно указывать английские названия цветов: blue, red, black, white, lime, yellow и т.д.
Графический фон:
где fon.jpg — ваше фоновое изображение.
Фон можно зафиксировать, т.е. при прокрутке текста фон двигаться не будет:
Не забывайте, что для каждой страницы, на которой присутствует графический фон, нужно прописывать фоновый цвет, т.к. гости вашего сайта могут отключить показ картинок в своем браузере, в результате чего могут увидеть не очень приятную картинку: к примеру, на белом фоне текст белым шрифтом :))
Cсылочки: текстовые и графические
Ссылки вставляются с помощью тега A HREF, в котором прописывается путь до страницы, которая будет открываться при клике по ссылке:
текст ссылки — относительная адресация
или:
ссылка скрыта — абсолютная адресация
Обе ссылки будут текстовыми. А можно сделать ссылку-картинку. В этом случае достаточно вместо «текста ссылки» вставить картинку (см. «графика на web-страницах»):
Параметр border=0 указывает на то, что вокруг нашей ссылки-картинки не будет рамочки, которые бывают у ссылок.
PS Абсолютную адресацию используйте только тогда, когда нельзя применить относительную! Представьте, что вы решили переехать на новый домен: вам придется менять пути для каждой ссылки и каждой картинки, если они будут прописаны абсолютно...
Часто бывает необходимо сделать так, чтобы при клике по ссылке новая страница открывалась в новом, выскакивающем отдельно, окне (например, при клике по какому-нибудь баннеру). Это делается с помощью параметра target, который вставляется внутрь тега «a href»:
ссылка скрыта
При target=_top — открытие страницы будет происходить поверх основной. Это удобно использовать, например, во фреймах.
А вообще, в target'e может быть имя окна фрейма (или iframe), котрое будет указывать на то, что страничка, описанная в ссылке, откроется именно в этом окне. Но об этом читайте в статье о фреймах или iframe :)
Ссылка на скачивание файла
Тут все просто. Достаточно прописать в ссылке путь до нужного файла, например:
ссылка скрыта
title — всплывающая надпись, которую вы хотите видеть при наведении мышки на ссылку.
Ссылка на отправку письма
Обычно запускается формочка программы Outlook или TheBat:
написать письмо,
где name@name.ru — ваш e-mail.
Цвет ссылок
Цвет указывается внутри тега body (см. «структуру html»):
link — цвет всех ссылок;
vlink — цвет ссылок при наведении мыши
alink — цвет ссылок в момент клика по ним
Коды цветов смотрите в палитре или фотошопе.
В литературе приводятся названия около 250 цветов и их шестнадцатеричных кодов, но на практике применяются около десятка
Линии и отлиновки
Горизонтальные линии часто используются для оформления текста на странице, для отделения одной части текста от другой. Достаточно разместить в нужном месте html-кода тег
Параметры этого тега:
ALIGN — выравнивание линии на странице (center, right, left);
SIZE — толщина линии в пикселях;
WIDTH — длина линии в пикселях или в % от ширины всей страницы;
COLOR — цвет линии (только для Internet Explorer и NetSurfer!);
NOSHADE — запрет выпуклости.
Например:
означает, что мы размещаем красную линию шириной в 20 пикселей по —центру длиной в пол экрана.
А вообще, наиболее универсальный способ, позволяющий создать совершенно любые линии — нарисовать их в каком-либо графическом редакторе или использовать готовые графические линии из интернета. В страничку вставляем их как графический объект:
Не забывайте указывать длину и ширину линии: width и height.
А можно растянуть цветной квадратик размерами 1пиксель×1пиксель, превратив его в линию (очень удобно! и графический файл очень маленький :) ), указав width="желаемый размер" после пути к изображению, внутри тега IMG
Списки
Списки могут быть нумерованными: каждому пункту соответствует порядковый номер; а могут быть маркированными, где рядом с каждым пунктом стоит спец.символ — маркер или картинка.
Маркированный список
- первое
- второе
- третье
type определяет вид маркера:
disc — закрашенный круг;
circle — обведенный по контуру круг;
square — закрашенный квадрат.
В качестве маркера можно использовать и любое графическое изображение. Наример, пиксельную картинку. В этом случае вместо type нужно указать путь до картинки в SRC: src="images/com.ru/image.gif"
Нумерованный список
- первое
- второе
-
- третье
-
type определяет вид маркера:
1 — нумерация арабскими цифрами (1,2,3...);
a — нумерация латинскими строчными буквами;
A — нумерация латинскими заглавными буквами;
I — нумерация римскими цифрами.
start указывает номер, с которого нужно начать нумерацию (для римских цифр «start=6 type=I» эквивалентно началу нумерации с VI)
Таблицы
В таблицах можно размещать тексты, рисунки, другие таблицы... Вообще, сайты чаще всего верстают именно табличками :)
html-код простой таблицы из 2 столбцов и 2 строк представлен ниже:
| первая ячейка первой строки | вторая ячейка первой строки |
| первая ячейка второй строки | вторая ячейка второй строки |
Внутри тега table можно указать разные свойства будущей таблицы:
border — толщина рамок-границ (при border=0 границы становятся невидимыми!);
bgcolor — цвет фона таблицы;
width — ширина таблицы (в пикселях или %);
cellpadding — отступ в пикселях содержимого ячеек от их границ.
Например:
! приоритет параметра, распространяющегося на меньшую область, всегда выше. Внедренные окна Iframe Iframe — внедренные окна. Это разновидность фреймов, но не фрейм. Очень удобная штука, если не работает php :) В качестве примера, смотрите внедренное окно с новостями на моем хомяке Код iframe вставляется внутри выбранной странички, в том месте (между тегами body), где мы хотим видеть «врезанную» страничку. name — имя iframe (любое!); src — адрес странички, которая будет открываться внутри iframe; width — длина iframe; height — высота iframe; frameborder — рамка (1 — есть, 0 — нет); scrolling — наличие полос прокруток (no — их нет, yes — есть, auto — браузер сам определяет: нужна ли полоса прокрутки); marginheight — отступ от края окна до расположенного внутри него по высоте текста; marginwidth — отступ от края окна до расположенного по ширине текста. Ссылки в iframe Страничка открывается внутри iframe: ссылка target указывает на то, что страничка page4.php откроется ВНУТРИ фрейма с именем fr1. Вот зачем нужно указывать имена фреймов в name :) Страничка открывается поверх странички с iframe: ссылка Страничка открывается в новом окне: ссылка Фреймы Фреймы — несколько разделов или окон в окне браузера. В каждом фрейме отображается своя html-страничка. Например, слева — меню, справа — странички, открывающиеся после клика по выбранному пункту меню. В html-код главной страницы с фреймами вставляется информация о расположении фреймов и местоположении страниц для каждого из фреймов. Т.е. никакие тексты и картинки в самом коде этой главной фреймовой странички не указываются. Деление окна браузера на 2 вертикальных фрейма пишем перед тегами body (см. структуру html-страницы): Тег frameset задает деление окна на столбцы (cols). Через запятую перечислены размеры этих столбцов: первый — 200 пикселей (а можно указывать размеры в процентах от всего экрана), второй — «звездочка» — т.е. все оставшееся место на экране. Если вы хотите увидеть на экране 3 столбика, то указывайте 3 цифры через запятую. Можно написать: |