close

Вход

Забыли?

вход по аккаунту

?

Учебник по HTML

код для вставкиСкачать
Учебник содержит 10 уроков по языку разметки, все десять уроков являются актуальными, уроков мало , потом-что нет воды и устаревшей информации. Прочтя данный учебник вы будите знать основы HTML.
 Урок 1 – подготовка _____________________________________ 2 Урок 2 – параграфы и заголовки __________________________ 5 Урок 3 – работа с текстом ________________________________ 8 Урок 4 – списки ________________________________________ 10 Урок 5 – Гиперссылки ___________________________________ 13 Урок 6 – Вставка изображений___________________________ 15 Урок 7 – таблицы ______________________________________ 16 Урок 8 – формы ________________________________________ 18 Урок 9 – фреймы _______________________________________ 21 Урок 10 – DOCTYPE и Комментарии________________________ 22 Дополнительно_________________________________________ 24 Все дополнительные материалы можно скачать отсюда
Урок 1: подготовка Давайте начнем с вами изучать HTML. HTML от английского - Hypertext Markup Language (язык разметки гипертекста). Хочу сразу заметить, что это не язык программирования, а просто язык разметки. C помощью HTML на сайт можно вставлять изображения, видео и звуковые файлы. Для изучения нам нужен редактор. Я использую NotePad++, но вы можете работать в стандартном блокноте windows (Если у вас windows). Но в простом блокноте работать не очень удобно, например , там нет подсветки синтаксиса кода. А нам это нужно, но не обязательно, это помогает разбираться в коде. Вот так выглядит код, написанный в стандартном блокноте: А вот так в NotePad++: Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Скачать редактор NotePad++ можно с официального сайта notepad-plus-plus.org
Надеюсь установить его, у вас проблем не вызовет. Теперь давайте создадим папку для наших тестов, я назвал ее website. В ней создайте файл с расширением *.HTML. Звездочка значит, что имя может быть любое. Я назвал его index.html, теперь откройте его с помощью вашего браузера, щелкнув по нему два раза, или один, (как у вас настроена мышь). Бывает такое, что когда люди только начинают изучать HTML и когда уже пишут код, у них в браузере вместо ожидаемого результата появляется полностью код. Это происходит из-за того , что бы у вас все еще стоит расширение txt. Его по умолчанию не видно, что его можно было увидеть, откройте меню ПУСК -> ПАНЕЛЬ УПРАВЛЕНИЯ -> ПАРАМЕТРЫ ПАПОК -> ВИД. И там снять галочку с пункта “скрывать расширения для зарегистрированных типов файлов”. Если у вас появилось в конце файла расширение txt , уберите его. Теперь должно быть все нормально. Далее давайте уже откроем наш файл с помощью установленного редактора. В него пропишите следующий код: <html> <head> <title> Это моя первая страница
</title> </head> <body> Это моя первая страница =)<br /> Написана она на HTML </body> </html> Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Должно получиться вот так: Теперь давайте разберем этот код: <html> - это начало документа и </html> соответственно конец. <body> и </body> - это тело документа, между этими тегами пишется весь код сайта <head> и </head> - голова нашего документа, между этими тегами располагаются служебные команды : метатеги, скрипты, стили. Они видны только браузеру, кроме тега <title> , слова между этими тегами появляются во вкладке браузера. Тег <br /> это принудительный перенос. Кстати вы услышали здесь слово теги, наверное, не знаете что это такое. Если знаете это конечно плюс, но если вдруг не знаете , сейчас объясню. Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>. Тег является активным элементом, изменяющим представление следующей за ним информации. Тег может иметь некоторое количество атрибутов. Обычно используются два тега - открывающий и закрывающий. Закрывающий тег имеет после первой угловой скобки слеш ( / ). Но если вы были внимательны, то должны были заметить , что тег <br /> одиночный , но все равно имеет слеш. Такой синтаксис используется у расширенного языка HTML –XHTML, это более строгий язык, и требует, что бы все теги были закрыты, даже одиночные. Я буду придерживаться синтаксиса XHTML. Мы выше рассмотрели структуру HTML документа. Но это еще не все. В HTML еще такая вещь называется она доктайп. Пишется в самом верху документа. Для того что бы браузер перешел в режим совместимости c данной версией HTML. О доктайпе я расскажу чуть позже, когда вы уже будите знать немного о HTML. А пока скопируйте и вставьте в самый верх вашего документа вот такой код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Все что у вас получилось, можете не запоминать, а просто копировать ,когда она вам нужна. Ну а на этом закончим! Если есть вопросы пишите на EMAIL :fabrigas201@gmail.com Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Урок 2: параграфы и заголовки Теперь давайте научимся работать с текстом. Первый тег, который мы рассмотрим это <p>. Этот тег разделяет текст на параграфы . Параграфы можно встретить практически на любом сайте. И так давайте создадим наш первый параграф. Для этого нам нужен текст, взять можете совершенно любой, это совершенно не важно . Допустим у вас уже есть текст. Теперь в вашем редакторе напишите тег <p> и закройте его </p> и между ними вставьте ваш текст. Вот пример кода. <p> Раскрутка сайта она и есть раскрутка, все этим сказано. Возможно более точно назвать этот процесс "продвижение сайта", суть от этого не меняется.
</p> Вот как у меня получилось. Вроде бы ничего особенного нет. Но при создание статей важно разделять текст на параграфы. Если у вас текст не будет разделен, то он будет появляться совершенно без пробелов, потому - что браузер понимает только один пробел. Вот даже давайте я возьму текст больше. Например, вот такой: (
http://www.bcetyt.ru/auto/another/57527713.html
) С новым двигателем «Ока» стала по-настоящему интернациональной. Между СеАЗом и китайским «Тянь Цзинь» (Tian Jin FAW) подписан контракт на поставку силовых агрегатов. Это впрысковый трехцилиндровый мотор рабочим объемом 0,993 л (Евро II) с пятиступенчатой коробкой передач. Когда-то этот двигатель японцы ставили на «Тойоту». Начиная с марта, «Ока» с «китайцем» под капотом (индекс СеАЗ-11116) заменила на конвейере двухцилиндровую предшественницу СеАЗ-11113. Контрактом предусмотрена поставка 20 тысяч силовых агрегатов в 2007 году. И вставлю его в редактор между тегами <body> и </body>. Будет вот так: Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
А если мы сейчас разделим каждый параграф тегами <p> то будет вот так: Видим , что появился разрыв между параграфами. Так намного красивей. Теперь плавно переходим к заголовкам. Они используются обычно для названия статей. Заголовки имеют шесть уровней, от одного до шести. Пишутся они вот так: <h1> и </h1> - это самый большой заголовок. Далее чем меньше цифра, тем меньше заголовок. Вот пример: <h1> Это заголовок первого уровня
</h1>
<h2> Это заголовок второго уровня
</h2> <h3> Это заголовок третьего уровня
</h3> <h4> Это заголовок четвертого уровня
</h4> <h5> Это заголовок пятого уровня
</h5>
<h6> Это заголовок шестого уровня
</h6>
В браузере будет так: Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Ну, вот думаю и все что я вам хотел рассказать в этом уроке. Урок 3: Работа с текстом В этом уроке мы с вами рассмотрим теги для работы с текстом. Из этого урока вы узнаете, как сделать текст жирным или курсивом и т.д. Эти теги так же очень часто применяются на сайтах. Например если вам нужно сделать текст жирным , вы просто обрамляете слово или текст в тег <strong> или <b> (это одно и тоже) и текст становиться жирным . Давайте рассмотрим пример использования этих тегов. <i> Этот текст курсив </i> <br /> <em> Это тоже курсив </em> <br />
<b> это жирный текст </b> <br />
<strong> это тоже жирный текст
</strong><br /> <u> это подчеркнутый текст </u> <br />
<ins> это тоже подчеркнутый текст
</ins><br />
<s> зачеркнутый текст
</s> <br />
<del>
Тоже зачеркнутый текст.
</del> <br />
Я здесь расставил теги <br /> для того что бы было удобно читать. Получилось вот так: Для того что бы сделать текст и жирным и курсивом, нужно прописать вот такой код: <b><i>
Это жирный и курсивный текст
</i></b>
Теги можно поменять местами. Но, не в коем случае нельзя делать так: <b><i> это жирный и курсивный текст </b></i> На самом деле это все сработает, но будет ошибка валидации , да и такой стиль написания является не грамотным. Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Тег <abbr> . Этот говорит о том, что в тексте используется аббревиатура. Например, HTML – это аббревиатура. Этот тег используется совместно с атрибутом title. Этот атрибут показывает расшифровку, с ним вы еще встретитесь. Давайте поместим текст “HTML “ между этими тегами. <abbr title
=”hypertext markup language”
>
HTML
</abbr>
Вот так получилось. В сером прямоугольнике расшифровка, которую мы поместили в атрибут title. Следующий тег это <acronym>. Это почти тоже самое что и <abbr> отличие в том что, аббревиатура состоит из первых букв, а акроним это , например, два слова объединены в одно. Например, слово спортивный зал, все говорят как спортзал. Спортзал это и есть акроним. Я вам покажу пример кода, а результат сами посмотрите. <acronym title
=”спортивный зал”
>
спортзал
</acronym>
Насколько мне известно , велись споры о том, чем он отличается от <abbr>. И было принято использовать только <abbr>. Так что <acronym> не рекомендую использовать. Тег <address> предназначен для хранения данных об авторе сайта, его контактных данных и тому подобное. Текст, заключенный в эти теги, отображается курсивом. <address>
это мой сайт, находится он по адресу http://remaller.ru
, мои контактные данные fabrigas201@gmail.com
</address>
Вот так получилось. Сейчас мы рассмотрим такой подпункт HTML, как цитаты. <blockquote> - это блочная цитата. С обоих сторон имеет отступ по сорок пикселей. Вот пример: <blockquote>
Один лишь не может ничем побежден быть желудок Жадный, насильственный, множество бед приключающий смертным. /Гомер/
</blockquote>
Вот так будет в браузере: Автор Гурьев Валентин и сайт remaller.ru
Можно применить к нему атрибут cite , со ссылкой на источник. Ну и напоследок расскажу вам о индексах. Вы, наверное , все видели математические формулы, или химические. Например, формула воды (H
2
O), Так вот как так сделать. В этом нам и помогут индексы. Что бы поднять цифру или другой символ вверх используется тег <sup> , а что бы опустить тег <sub>. Примеры кода. <p> Формула воды H
<sub>
2
</sub>
O
</p> <p
> X
<sup>
2
</sup> - X
в квадрате
. </p> Вот что будет в браузере: Ну вот на этом закончим. Конечно, мы рассмотрели не все теги. Но нам больше и не нужно. Это основные которые можно встретить на сайтах. Остальные либо не используются , либо устарели. Урок 4: списки На очереди у нас стоят списки. Вы наверняка уже видели их на сайтах. Например, меню на сайте это и есть список, только оформленный с помощью CSS . Различают три вида списков. 1) Нумерованные 2) Маркированные 3) Списки с описанием Первый вид который мы рассмотрим это нумерованный список. Начинается он с тегов <ol> и заканчивается </ol> , Внутри этих тегов идут пункты списка, заключаются они в теги <li> и </li> Вот пример: <ol> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> </ol> Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Вот что получилось в браузере: Видим , что все списки пронумерованы. Теперь давайте рассмотрим, какие есть атрибуты у списков. Первый атрибут, который рассмотрим это align, хотя этот атрибут применяется не только к спискам, но и почти ко всем элементам HTML, параграфы, заголовки, изображения и т.д. Этот атрибут позволяет выравнивать элементы HTML по краям браузера. Вот его значения: 1) Left – выравнивание по левому краю 2) Right – выравнивание по правому краю 3) Center - выравнивание по центру Давайте применим этот атрибут к списку. <ol align
=”center”> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> </ol> Вот что получилось в браузере: В браузере IE это свойство не сработало. Поэтому я показываю вам это в Google Chrome. Тут заметно, что номера остались на месте, поэтому не рекомендуемо применять этот атрибут. Этот атрибут уже считается устаревшим. Теперь научимся изменять вид номеров. Делается это с помощью свойства type . Упорядочить список можно латинскими цифрами и буквами. Вот пример такого списка: Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
<ol type
=”I”> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> </ol> Вот что получилось: Вы можете подставить один из этих типов: <ol type="
A | a | I | i | 1
">...</ol> Так же нумерацию можно назначить с любого числа, просто к списку пропишите атрибут start и номер отсчета. Пример: <ol start="
3
">...</ol> Ну вот с нумерованными списками разобрались, следующие на очереди маркированные. Они почти ничем не отличаются. Только начинаются они с тега <ul>, то есть вместо буквы “o” пишется “u”. Вот пример: <ul> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> <li> Пункт списка
</li> </ul> Вот что получилось: Видно , что просто цифры заменились маркерами. Эти маркеры также можно заменить на другие, вот список типов. <ul type="
disc | circle | square
">...</ul> Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Disc – это то что сейчас видим. Circle – это окружность. Square – квадрат Думаю пример показывать не нужно. Напоследок я оставил списки с описанием. Этот вид списков редко где встретишь, больше всего встречаются маркированные списки. Но все же я решил о них рассказать вам. Так вот. Список начинается с тегов <dl> и заканчиваются </dl>, Пункт списка заключается в тег <dt> , а описание заключается в теги <dd> Вот пример: <dl> <dt> Пункт списка
</dt> <dd> Описание
</dd> <dt> Пункт списка
</dt> <dd> Описание
</dd> </dl> Вот что получилось: Видим, что описание имеет отступ от края браузера. Ну, вот и все, списки прошли. Урок 5: Гиперссылки Приступаем к изучению гиперссылок в HTML, в ссылках и заключается вся сила HTML, ради этого он и был придуман. Ссылки нужны для того что бы свободно переходить с одной страницы сайта на другую. Ссылки создаются с помощью тега <a> и закрываются тегом </a>, У тега <a> есть атрибут href, в который и заключается сама ссылка, то есть адрес сайта или страницы. Вот простой пример ссылки на мой сайт: <a
href
=”http://remaller.ru”> Перейти на remaller.ru </a>
Видим, что в атрибуте пишется адрес сайта, который не виден посетителю, а между тегами <a> текст, который виден. В браузере будет так: Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Видим, что появилась ссылка. И эта ссылка синего цвета. По умолчанию все ссылки синего цвета. Ссылки при нажатии красного цвета, а посещенные фиолетового. Ну это так детали. Теперь давайте поговорим об абсолютных и относительных ссылках. Абсолютные как вы поняли , указывают абсолютный путь до файла или странички. Относительные указывают на файл или страничку лишь относительно своего сайта. Вот вид абсолютной ссылки: <a
href
=”http://remaller.ru”> Перейти на remaller.ru </a>
А вот относительной. <a
href
=”second.html ”> вторая страница
</a>
Думаю понятно, если нет пишите. Если , например, ваша страничка лежит в папке, то при создании ссылки нужно учесть эту папку. Сперва пишем имя папки, а потом название странички, также делаем, если ваша папка вложена в другую. <a
href
=”folder/second.html ”> вторая страница
</a>
А если ,например , вам нужно указать ссылку на страничку лежащую на уровень выше вашей папки, то перед названием странички пишем две точки и слеш, это означает что нужно выйти из папки и открыть искомую страницу. <a
href
=”../first.html ”> вторая страница
</a>
Теперь поговорим об атрибутах. Первый это title, вы его уже встречали, он создает подсказку при наведении мыши. Атрибут target, говорит браузеру как открывать ссылку. Его значения имеют подчеркивание впереди. Вот пример: <a
href
=”../first.html ” target
=”_blank”> вторая страница
</a>
Свойство _blank означает , что ссылка откроется в новой вкладке. Есть еще несколько атрибутов, но они очень редко применяются. _self – это означает, что страница откроется в этом же окне. _new – открывает в страницу в новом окне, но браузеры иногда открывают и в новой вкладке _parent и _top нужны для работы с фреймами. Что такое фреймы расскажу чуть позже. Давайте вам еще расскажу про метки. Метка это место на вашей странице, куда по нажатию по ссылке вы перемещаетесь. Допустим , у вас есть длинный текст на вашей страничке. И вам нужно быстро переместиться к какому-то параграфу, то это можно сделать по нажатию по ссылке. Просто этому параграфу задайте id, потом вверху сделайте ссылку на этот id. <a
href
=”#link”> перейти на метку
</a> <p id=”link”> длинный , длинный текст ….</p>
Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Видим, что ссылка на id делается через решетку (#). Еще на многих сайтах можно встретить ссылку на адрес электронной почты, делается это так: Сперва пишется слово mailto, потом через двоеточие адрес электронной почты. Вот пример: <a
href
=”mailto:fabrigas201@gmail.com”> написать письмо
</a> При нажатии по ссылке откроется окно для ввода текста. Ну, вот основное, что нужно знать про ссылки. Урок 6: Вставка изображений Теперь давайте будем учиться вставлять изображения на сайт. Делается это с помощью тега <img />, далее в этот тег прописывается атрибут src, он указывает, где лежит изображение. Давайте вставим вот такое изображение: Ну для начала нам нужно закинуть это изображение в папку website, где у нас лежат файлы HTML, а лучше всего создать отдельную папку, например images , и закинуть туда изображение. Теперь можно его вставлять. Для этого пишем такой код: <img
src
=”images/windows.png ” /> Здесь images это папка с изображением, а windows.png это название изображения. Получилось вот так: Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Здесь есть еще один обязательный атрибут – это alt, он нужен для того что бы когда изображение не видно, или просто отключено , то вместо него появляется текст заключенный в этот атрибут. Тот же самый атрибут title, который мы уже проходили тоже применяется к изображению. Вот пример : <img
src
=”images/windows.png ” alt
=”и
зображение
” title
=”
изображение
”/> Вот еще несколько атрибутов, но они не обязательны к применению в HTML. 1) Width – устанавливает ширину изображения 2) Height – устанавливает высоту изображения 3) Border – отменяет или ставит рамку ( значение 0 рамки нет, от 1 до бесконечности, толщина рамки 4) Align – выравнивает изображение. 5) Hspace – устанавливает горизонтальный отступ 6) Vspace – устанавливает вертикальный отступ Ну все , есть еще для карт изображений, но о них позже. Есть такие случаи, когда изображение нужно сделать ссылкой, для это изображение помещаем между тегами <a>. Вот пример : <a href=”http://remaller.ru”> <img
src
=”images/windows.png ” alt
=”и
зображение
” title
=”
изображение
”/> </a> Урок 7: Таблицы Ну что ж, крепитесь. Приступаем к одному из сложных элементов HTML, это таблицы. Может для вас это будет легко, а может , и нет. Так вот. Таблицы начинаются с тега <table> и закрываются тегом </table>, внутри таблица состоит из строк и ячеек. Что бы создать строку нужно прописать вот такое теги - <tr> и </tr> , а для того что бы создать ячейки прописываем теги <td> и </td>. Ячейки всегда пишутся в строках. Теперь давайте создадим простую таблицу, состоящую из трех строк и в каждой строке по три ячейки. Вот пример кода: <table border
=”1
”> <tr> <td>
ячейка </td> <td>
ячейка
</td> <td> ячейка
</td> </tr> <tr> <td>
ячейка
</td> <td>
ячейка
</td> <td> ячейка
</td> </tr> <tr> <td>
ячейка
</td> <td>
ячейка
</td> <td> ячейка
</td> </tr> </table> Вот так будет в браузере: Автор Гурьев Валентин и сайт remaller.ru Автор Гурьев Валентин и сайт remaller.ru
Здесь я добавил рамку, что бы было видно таблицу. Видим, что все данные пишутся в ячейках, и длина ячейки зависит от данных. То есть, если я в ячейку добавлю длинный текст, а в остальные короткий. То ячейка будет растягиваться по длине самого длинного текста. Вот смотрите: Теперь посмотрите на это фото: Давайте реализуем такой каркас. Это уже будет похоже на сайт. Для начала нам нужно объединить три верхних и нижних ячейки в одну, для этого в первую ячейку верхней строки и нижней пишем такой атрибут colspan, и зададим ему значение три (3). Для всей таблицы сделаем ширину 970, с помощью атрибута width. Для сайтбаров сделаем ширину по 150, контент не трогаем. Теперь нам нужно выровнять верхние и нижние строки, для этого пропишем им атрибут align со значением center. А для сайтбаров сделаем высоту по 200, но это временно, ведь это все должно заполнятся, и увеличиваться автоматически. Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Теперь записи в сайтбаре и контенте оказались по центру, как же их поднять? Для этого используем атрибут valign , со значением top. Этот атрибут принимает три значения: 1) Top – выравнивание по верху 2)
Middle – выравнивание по центру 3)
Bottom – выравнивание по низу. Что бы вы не путались скажу, что атрибут align используется для горизонтального выравнивания, а valign для вертикального. Теперь должно все быть хорошо, вот код: <table
border
="1" width
="970" >
<tr align
="center"> <td colspan
="3" height
="100"
>
Шапка </td> </tr>
<tr valign
="top"> <td
width
="150" height
="200"
>
левый сайдбар </td> <td> контент </td> <td width
="150"
> правый сайдбар
</td> </tr>
<tr align
="center"
>
<td colspan
="3" height
="40"
>
Футер </td></tr>
</table> Кстати вы заметили , что вверху и внизу где шапка и футер я убрал две последующие ячейки, для того что бы они не выпирали. Мы рассмотрели атрибут colspan, для объединения по горизонтали. Но есть и атрибут для объединения по вертикали называется он rowspan. Поэкспериментируйте с таблицами, есть вопросы, задавайте. Урок 8: формы Вы наверняка блуждая по интернету видели различные виды форм. Форма для ввода текста, форма обратной связи. Даже сидя в вашей любимой социальной сети вы встречаетесь с формой. Отправка сообщения другу, например. Так вот давайте уже создавать первую форму. Все формы в HTML начинаются с тега <form>, далее в этот тег пишем атрибут action, а в атрибуте пишем путь к скрипту обработчику. Ведь создать форму это малая часть, ее нужно обработать и выдать результат, этим занимаются уже языки программирования. В html обработать форму не получиться. Если хотите больше узнать об обработке форм, и вообще о других языках программирования то вам сюда
. Далее есть еще один атрибут – это метод, пишется так: method, в него пишется один из следующих методов, get или post, это методы обработки данных. Сейчас рассказывать подробно о различиях некогда, это выходит за рамки этой статьи. Кратко скажу, что когда отправляем данные методом get, то все данные , что ввели в форму видны в адресной строке браузера, а если методом post, то ничего не видно. Теперь давайте закроем тег <form> вот так </form>. Далее нам нужно создать какую – нибудь форму. Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Давайте создадим вот такую: Видим, самым первым у нас идет текстовое поле, оно создается с помощью тега <input />, вообще большая часть форм создается с помощью этого тега. Далее в этот тег пишем атрибут type, это для того, что бы браузер понял для чего эта форма, например, тип text говорит о том, что в эту форму вводится просто текст. Тип password нужен для пароля, он закрывает символы черными маркерами. Еще один атрибут это name, как вы поняли этот атрибут задает имя формы. Нужно оно, что бы скрипт обработчик знал с какой формой работает. Теперь рассмотрим тег <textarea> и закрывается </textarea> , как вы поняли это поле для ввода большого текста. Так же задается имя. Кстати тут тип не нужен, браузер и так понимает что это форма для текста. Есть еще атрибут value , в него записывается начальное значение формы. Давайте сразу расскажу вам о размерах форм, как задать эти размеры. Для текстовых форм задается с помощью атрибута size, а длина текста, которую вы разрешите вводить задается атрибутом maxlength. А вот для текстовой области, ширина задается атрибутом cols, а высота атрибутом rows. Так теперь давайте о галочках, или чекбоксах. Они создаются так же с помощью тега <input />, только тип у них будет checkbox, и если у вас несколько таких форм, то задавайте им одинаковые имена. Также и радиокнопки, только у них тип radio. Автор Гурьев Валентин и сайт remaller.ru
Кнопка создается также, только тип у них submit, это конечно не все, есть еще несколько вид кнопок, раскажу о них ниже. Так вот смотрим код нашей формы <form action
="work.php" method
="get"
>
<p><label>
Ваше имя: <input type
="text" name
="name"/>
</label></p>
<p><label>
Ваше пароль: <input type
="password" name
="pass" />
</label></p>
<p>
Ваш текст
</p>
<p><textarea name
="text" cols
="25" rows
="5
"></textarea></p>
<p>
что вам нравиться
:</p>
музыка <input type
="checkbox" name
="box" /> <br />
кино <input type
="checkbox" name
="box" /> <br />
игры <input type
="checkbox" name
="box" /><br />
<p>
Ваш пол
</p>
Ж <input type
="radio" name
="pol" /><br />
М <input type
="radio" name
="pol" /><br />
<input type
="submit" name
="submit" value
="
Наж
ать
"/><br />
</form> Теперь давайте о кнопках. Вот например так делается кнопка для загрузки файлов: <input type
=”file” name
=”file
” value
=”загрузить” /> Есть еще просто кнопка, она ничего не делает, нужна для работы , например, с JavaScript. <input type
=”button” name
=”button
” value
=”кнопка” /> Ну или так: <button name
=”button” > Кнопка </button> А для того что бы сделать кнопку изображением, то нужно сделать так: <input type
=”image” src
=”путь_к_изображению” name
=”image
” value
=”изображение” /> Тут все обычно, просто тип image, а далее как при вставке простого изображения. Давайте теперь поговорим и элементах выбора – select. Это формы начинается с помощью тега <select> и закрывается так же, </select>. Список, который выпадает задается с помощью тега <option> и закрывающего тега </option>. Не забываем про атрибут name. Вот пример: <select name
=”select”> <option> список</option> <option> список</option> <option> список</option> <option> список</option> <option> список</option> </select> Вот что получилось: Кстати если вы были внимательны, то заметили, что я к формам применял такой тег как <label>, если форму и текст обернуть в этот тег, то при нажатии не текст, форма активируется, сейчас так все делают. А если форма и текст находятся на разных уровнях, то форме задают id, а потом в <label> пишем for=”значение id, без решетки.” Пример: <p><label for
=”text”>текст</label></p> <input id
=”text” type
=”text” /> Ну давайте закончим на этом. Урок 9: фреймы В этой статье мы с вами рассмотрим фреймы. Фреймы очень редко применяются на сайтах, они уже считаются устаревшими. Но я вам обещал о них рассказать, так вот рассказываю. С помощью фреймов на одной HTML страничке можно создать две или более страниц. Так вот, давайте создадим простую HTML страничку. В ней пропишем вот такой код: <html> <head> <title>
фреймы
</title> </head> </html> Вы заметили , что здесь нет тегов <body>, вместо них пишутся теги <frameset> и закрывающий тег </frameset>. Теперь нам нужно еще несколько страниц HTML, я создал две. Они нужны для вставки на нашу общую страницу. Вот пример кода двух страниц (frame1.html, frame2.html) Вот их код: Frame1.html <html> <head> <title>
фреймы
</title> </head> <body> <p> ф
рейм номер один </p> </body> </html> Frame2.html <html> <head> <title>
фреймы
</title> </head> <body> <p> ф
рейм номер два </p> </body> </html> Теперь в нашу главную страницу, между тегами <frameset> прописываем тег <frame> с атрибутом src,( он вам уже знаком) Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Вот код полностью. <html> <head> <title>
фреймы
</title> </head> <frameset rows
=”200, *”> <frame src
=”frame1.html”> <frame src
=”frame1.html”> </frameset> </html> В заметили атрибут rows, он задает размер фрейма по вертикали. Первое значение для первого фрейма, второе для второго. Звездочка значит , что он занимает все оставшееся пространство. У фреймов есть еще атрибуты, и вы их знаете. Но я надеюсь, что фреймы вам не понадобятся. Кстати вот что получилось. Видим, что фреймы разделены вертикальной линией, если бы применили атрибут cols, то были бы разделены горизонтальной. Ну на этом закончим, я не стал подробно расписывать все атрибуты, потому что фреймы уже устарели и не применяются. Урок 10: DOCTYPE и комментарии В этом уроке мы с вами познакомимся очень важным параметром, как DOCTYPE, что же это такое? Так же разберем что такое комментарии в HTML. Ну, первое, что мы рассмотрим это DOCTYPE. Он указывает, какая версия html используется, и как правильно обработать документ. Если у вас не стоит доктаип, то браузер перейдет в так называемый режим “quirks mode”, (прим.перевод причуды), будем называть его причудливый режим (или режим ловли, уловок ). То есть он будет думать, что код написан под старые версии HTML, и будет отображать сайт так, как отображал бы IE 5.5 . Так что нужно всегда указывать DOCTYPE, для определенного документа. Вот например DOCTYPE с моего сайта, видим что здесь используется версия XHTML 1.0, и браузер, а так же валидатор понимает , что за версия языка на сайте. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Автор Гурьев Валентин и сайт remaller.ru Автор Гурьев Валентин и сайт remaller.ru
Давайте подробней разберем этот код. Самое первое это объявление декларации, потом указывается язык, то есть корневой элемент, между которыми записываются все теги. Далее public, указывает на то, что документ является публичным, есть еще системные, но на сайтах можно встретить только публичные. Знак минус значит, что декларация не зарегистрирована в стандарте ISO. W3C – это название консорциума. DTD XHTML 1.0 Transitional – название декларации. EN – язык на котором она написана Далее просто ссылка на сайт декларации. Вы заметили, что здесь есть слово Transitional, это значит, что здесь используется переходный режим из одной версии в другую, и можно использовать теги разных версий. Есть еще две спецификации, strict и frameset. Strict значит, что используется строгая спецификация, и что нужно использовать только теги, которые входят в данную версию и не использовать устаревшие. Frameset – значит, что на странице используются фреймы, надеюсь, вам не придется пользоваться такой декларацией, так как фреймы уже не актуальны. Теперь рассмотрим все виды деклараций, описывать я их не буду, я уже это сделал. Будет только меняться версия HTML. HTML 4.01 strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Тоже самое и для XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Надеюсь понятно. Но давайте не забывать , что идет разработка HTML5, а будущем просто HTML, то там вот такой DOCTYPE: <!DOCTYPE html> Автор Гурьев Валентин и сайт remaller.ru
Автор Гурьев Валентин и сайт remaller.ru
Давайте приоткроем занавесу тайны, то что мы раньше писали, и о чем я вам рассказывал, на самом деле не важно. Браузеру можно так выразиться “по барабану” на все эти пути, ссылки. Он же не лезет на сайт и не проверяет что у нас там, этим занимается валидатор. Так что смело можете использовать DOCTYPE из пятого HTML и у вас все будет в порядке, за исключением того, что вы не пройдете валидацию с этим DOCTYPE , например, в XHTML. Теперь мы плавно переходим к комментариям, здесь ничего сложного нет. Но для начала давайте разберемся , для чего вообще нужны эти комментарии. Комментарии нужны для того что бы комментировать код. Например, помечать, за что отвечает данный кусок кода. Комментарии начинаются с угловой скобки и восклицательного знака, далее два тире. Заканчиваются двумя тире и угловой скобкой. Вот пример: <!- - это комментарии - -> Кстати комментарии не видны пользователю, их браузер не показывает, их можно посмотреть только в коде. Код , заключенный в комментарии так же не читается, и не выводится. Так удобно делать ели вам нужно отключить какой-то кусок кода, а удалять его не нужно. Я конечно не знаю, но может кто использует вложенные комментарии: <!- - это комментарии <! - - Это вложенный комментарии - -> - -> Но на самом деле в этом нет смысла и логики. Ну вот поздравляю, мы закончили изучать HTML, я не рассказал здесь о картах изображений, блочный и строчный элементах, но думаю потом статью о них на сайте напишу, так как карты тоже уже почти не применяются. Курсы по теме. Бесплатный видеокурс по HTML от Михаила Русакова. Нажмите сюда что бы получить его.
Автор
fabrigas201
Документ
Категория
Информатика
Просмотров
450
Размер файла
7 085 Кб
Теги
коддинг, обучение, html, таблицы, теги
1/--страниц
Пожаловаться на содержимое документа