Компьютер-Форум.

Объявление


Компьютер-Форум

Добро пожаловать на форум "Comp"! Данный проект посвящён всему, что связано с работой на компьютере или в интернете. Здесь вы сможете найти множество ссылок на полезный софт, полезные советы по настройке компьютера и использовании различных программ и многое другое. Присоединяйтесь!
Администратор форума: Shot.
[Регистрация] [Пользователи] [Личные сообщения]

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Уроки HTML от Shot

Сообщений 1 страница 2 из 2

1

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

Урок № 1.

Введение в Интернет и что такое HTML.

Интернет - громадная паутина. В этой паутине можно найти, что вашей душе угодно: видео, аудио, книги, но всё это является информацией. Что бы понять, как Интернет появился нужно немного вдаться в историю.
Прародителем современного Интернета является система ARPAnet, которая была создана по инициативе Министерства Обороны Соединённых Штатов. Он предлагал только FTP(File Transfer Protocol-Протокол Передачи Данных) и электронную почту. Немного после Министерство Обороны отказалось спонсировать новый проект, т.к. у него появилась своя собственная стабильная сеть, но Национальный Научный Фонд США(NSF) взял на себя спонсирование этой системы. Изначально в сети ARPAnet работали только учёные, но вскоре в сеть вступили обыкновенные пользователи.
В 1965 году Нельсон создал язык под названием HTML (Hyper Text Marking Language – Язык разметки гипертекста). HTML-интерпретируемый язык, то есть его не нужно компилировать в машинный код, а ваш браузер при запросе сам «строит» страницу по данному ему коду.
Что нам потребуется для работы:
1.Блокнот.
2.Браузер.

Урок № 2.
Структура HTML страницы.

Представьте себе человека. Можете представить себя самого, или какого либо другого человека, не в этом суть. Вот вам для примера рисунок тела человека.

https://forumupload.ru/uploads/0000/15/c1/28-1-f.gif
 

Давайте, разделим человека на голову и туловище. Голова – носитель информации, хранитель разных реакций на те или иные условия и т.д. Туловище же хранитель разнообразного представления этой информации, например одежда на нём говорит о вкусе человека и т.п.
По сути своей 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.В «туловище» страницы хранится всё, что отображается на экране.

0

2

Урок № 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>

Задание:
Создайте Html страницу с применением всех приведённых видов тэгов.

0