Консультации по элементам работы с гипер текстовыми документами.
HTML & CSS
Страница: 1
Тема закрыта
Сообщений 1 страница 5 из 5
Поделиться22008-04-06 22:48:49
- Зарегистрирован: 2008-04-03
- Приглашений: 0
- Сообщений: 447
- Уважение: [+15/-0]
- Позитив: [+10/-0]
- Пол: Мужской
- Возраст: 34 [1990-01-27]
- Провел на форуме:
6 дней 22 часа - Последний визит:
2011-03-21 14:30:40
SHERRY написал(а):
Консультации по элементам работы с гипер текстовыми документами.
Вроде темка то и с CSS связана.....
Может поможеш на форуме свой стить замутить?
Поделиться32008-04-07 07:42:18
- Откуда: Якутск
- Зарегистрирован: 2008-04-04
- Приглашений: 0
- Сообщений: 21
- Уважение: [+0/-0]
- Позитив: [+4/-0]
- Пол: Мужской
- Провел на форуме:
5 часов 53 минуты - Последний визит:
2008-04-08 07:24:56
Alex написал(а):
Вроде темка то и с CSS связана.....
Может поможеш на форуме свой стить замутить?
Было бы не плохо =)
Алекс, слушай ты сможешь определиться с цветом форума? Скажи мне я начну топиГ делать =) И ещё, смени подстветку ников: Админов, Модеров и VIPов со стандартных red, green и blue на вот эти ----> http://www.artlebedev.ru/tools/colors/ (Выбери приятные цвета, там выбор огромный) =)
Поделиться42008-04-07 13:45:25
- Зарегистрирован: 2008-04-03
- Приглашений: 0
- Сообщений: 447
- Уважение: [+15/-0]
- Позитив: [+10/-0]
- Пол: Мужской
- Возраст: 34 [1990-01-27]
- Провел на форуме:
6 дней 22 часа - Последний визит:
2011-03-21 14:30:40
Nekriloff
цвет я думаю такой и оставим на форуме...
А ники щя поправлю
Поделиться52008-04-09 15:36:30
- Зарегистрирован: 2008-04-03
- Приглашений: 0
- Сообщений: 447
- Уважение: [+15/-0]
- Позитив: [+10/-0]
- Пол: Мужской
- Возраст: 34 [1990-01-27]
- Провел на форуме:
6 дней 22 часа - Последний визит:
2011-03-21 14:30:40
Урок № 1.
Введение в Интернет и что такое HTML.
Интернет - громадная паутина. В этой паутине можно найти, что вашей душе угодно: видео, аудио, книги, но всё это является информацией. Что бы понять, как Интернет появился нужно немного вдаться в историю.
Прародителем современного Интернета является система ARPAnet, которая была создана по инициативе Министерства Обороны Соединённых Штатов. Он предлагал только FTP(File Transfer Protocol-Протокол Передачи Данных) и электронную почту. Немного после Министерство Обороны отказалось спонсировать новый проект, т.к. у него появилась своя собственная стабильная сеть, но Национальный Научный Фонд США(NSF) взял на себя спонсирование этой системы. Изначально в сети ARPAnet работали только учёные, но вскоре в сеть вступили обыкновенные пользователи.
В 1965 году Нельсон создал язык под названием HTML (Hyper Text Marking Language – Язык разметки гипертекста). HTML-интерпретируемый язык, то есть его не нужно компилировать в машинный код, а ваш браузер при запросе сам «строит» страницу по данному ему коду.
Что нам потребуется для работы:
1.Блокнот.
2.Браузер.
Урок № 2.
Структура HTML страницы.
Представьте себе человека. Можете представить себя самого, или какого либо другого человека, не в этом суть. Вот вам для примера рисунок тела человека.
Давайте, разделим человека на голову и туловище. Голова – носитель информации, хранитель разных реакций на те или иные условия и т.д. Туловище же хранитель разнообразного представления этой информации, например одежда на нём говорит о вкусе человека и т.п.
По сути своей HTML страница имеет такую же структуру. Конечно сравнение очень грубое, но мне кажется, так порой легче понять информацию, нежели просто разъяснять вам код.
Рассмотрим нашу первую HTML страницу.
<html>
<head><title> Приветствую вас на своей первой странице!</title></head> <!-- Вот она голова!! -->
<body> <!-- А вот туловище -->
Первая надпись.
</body>
</html>
Наберите этот текст в блокноте и сохраните под именем “2-1.html”.
После того, как вы запустите файл вы увидите вверху окна в названии файла слова: «Приветствую вас на своей первой странице!», а в окне браузера вы увидите надпись: «Первая надпись.».
Рассмотрим то, что мы написали поближе.
На нашей странице периодически встречаются слова, заключённые между знаками “<” и “>”. Такие знаки называются тэгами, и браузер не отображает их на экране. Тэги нужны для того, что бы браузер «сообразил», где и что должно находиться. Каждый тэг выполняет свою собственную функцию. Существуют парные и непарные тэги. К парным тэгам относятся те тэги, что нужно закрывать другим аналогичным тэгом только со знаком «/» перед ним. Эти тэги называются закрывающими, а другие, естественно, открывающими. Пример:
<title> Приветствую вас на своей первой странице!</title>
Любая HTML страница начинается тэгом <html> и заканчивается тэгом </html>. Это как бы обозначение, что бы браузер понял, где ему считывать код.
Тэг <head>(парный)- заголовок документа. Между тэгами <head> и </head> хранится информация о заголовке страницы, описание страницы, автора, тематики, а так же обычно в нём записываются Java Script’ы.
Между тэгами <title> и </title> записывается Заголовок Документа, который будет отображаться сверху страницы в названии. Этот тэг можно записывать только между тэгом <head>.
Тэги <body> и </body> являются туловищем документа. Между двумя этими тэгами прописывается всё, что будет отображаться в окне браузера.
Ну, вот и всё. Подведём ИТОГ:
1.HTML страница состоит из «головы» и «туловища».
2.Любая HTML страница начинается тэгом <html> и заканчивается тэгом </html>.
3.В «голове» страницы хранится информация о заголовке, описание страницы, автора и Java Script’ы.
4.В «туловище» страницы хранится всё, что отображается на экране.
Урок № 3.
Форматирование текста.
Одним из важнейших элементов страницы является текст. Большая часть из того, что вы можете увидеть на странице это текст, красиво сгруппированный и отформатированный.
Текстовые фрагменты можно заключать в своего рода контейнеры, называемые абзацами. Для создания абзацев используется парный тэг <p>. Весь текст, заключённый между тэгами <p> и </p> является абзацем, над которым в дальнейшем можно производить какие либо действия.
Теперь, когда речь пошла о действиях, мы вплотную подошли к такому термину как атрибуты тэгов. Атрибуты предают тэгам особенные параметры, форматируют их содержимое. С помощью атрибутов мы можем указать каково цвета, размера и шрифта будет ваш текст. Так же мы можем установить положение текста или другого элемента страницы на экране, его ширину, высоту и т.д. Атрибуты тэгов указываются по следующей схеме:
<тэг атрибут1="значение" атрибут2="значение" атрбидут3="значение"…>.
Рассмотрим атрибуты парного тэга <p>
Align (выравнивание абзаца)- допустимые значения left(по левому краю)|right(по правому краю)|center(по середине)|justify(по середине).
ID- задаёт специальный идентификатор абзаца. Практическое применение имеет в основном в Java Script’е.
Рассмотрим пример:
<html>
<head>
<title>Пример использования абзацев</title>
</head>
<body>
<p align="left" id="p1">По левому краю</p>
<p align="center" id="p2">По середине</p>
<p align="right" id="p3">По правому краю</p>
<p align="justify" id="p4">По ширине</p>
</body>
</html>
Сохраните этот файл под именем «3-1.html» и посмотрите результат.
Теперь перейдём непосредственно к форматированию самого текста. Для форматирования текста существует множество различных тэгов, но я упомяну лишь самые важные, на мой взгляд.
Тэги <font> и </font>. Атрибуты этого тэга:
Color(цвет)- задаёт цвет текста, заключённого между тэгами <font> и </font> в шестнадцатеричном или стандартном виде.
Size(размер)- задаёт размер текста, заключённого между тэгами <font> и </font>.
Face(шрифт)- задаёт шрифт текста, заключённого между тэгами <font> и </font>. Необходимо указывать точное название шрифта.
Кстати: Указывать все атрибуты не обязательно.Т.е. вы можете указывать значение атрибута color, но не указывать size. Это делается по вашему желанию.
Так же следует отметить тэг <br/>(непарный), с помощью которого осуществляется принудительный перенос строки.
Ну и для полного усвоения информации приведём пример:
<html>
<head>
<title>Форматирование текста</title>
</head>
<body>
<br/><font color="red">Это текст, выделенный цветом.</font>
<br/><font size="5">А это текст с выделенным размером.</font>
<br/><font face="Comic Sans MS">А это текст с нестандартным шрифтом.</font>
<br/><font color="red" size="5" face="Comic Sans MS">А это текст со всеми
преобразованиями.</font>
</body>
</html>
Сохраните этот документ под именем «3-2.html» и посмотрите результат. Попробуйте удалить все тэги <br/> и посмотрите что получится.
Теперь рассмотрим оставшиеся тэги:
<b> и </b>- текст, заключённый между этими двумя тэгами становится жирным. Пример:
<b>Это жирный текст</b>
<i> и </i>- текст, заключённый между двумя этими тэгами выделяется курсивом. Пример:
<i>Это курсив</i>
<u> и </u>- текст, заключённый между этими двумя тэгами становится подчёркнутым.
<U> Подчеркнутый </U>
(остальные тэги пишу без разъяснений, думаю всё ясно, ибо принцип тот же):
<STRIKE> Перечеркнутый </STRIKE>
<SUP> Верхний индекс </SUP>
<SUB> Нижний индекс </SUB>
И ещё одна деталь, которую следует упомянуть в этом уроке:
Можно создавать вложенные тэги, то есть на участок текста, над которым проводится одно редактирование добавить ещё одно.
Пример:
<B><I><U>Жирный курсив подчёркнутый </U ></I></B>
В таком случае тэг <b> называется родительским по отношению к тэгу <i>, который в свою очередь является родительским по отношению к тэгу <u>.
Главное не забыть закрывать тэги, иначе будет неразбериха.
P.S.такой же принцип можно применять и с тэгом <p>, и с тэгом <font>. Пример:
<p align="left"><font color="red"><b><i>Текст, выровненный по левому краю, красного текста, жирный и курсив</i></b></font></p>
Тема закрыта
Страница: 1