Михаил Русаков Учебник по Основам HTML Сайт: http://MyRusakov.ru Михаил Русаков и сайт http://MyRusakov.ru Оглавление Об авторе ------------------------------------------------------------------------------ 3 Введение ------------------------------------------------------------------------------- 5 Создание сайта на HTML --------------------------------------------------------- 6 Ссылки и изображения в HTML ------------------------------------------------ 9 HTML-теги для текста ------------------------------------------------------------ 11 Списки HTML ------------------------------------------------------------------------ 14 Выравнивание элементов в HTML --------------------------------------------- 16 Создание форм в HTML ------------------------------------------------------------18 Создание таблиц в HTML --------------------------------------------------------- 23 Заключение ---------------------------------------------------------------------------- 31 Бонус ------------------------------------------------------------------------------------- 31 Михаил Русаков и сайт http://MyRusakov.ru 2 Михаил Русаков и сайт http://MyRusakov.ru Об авторе. Здравствуйте! Мне ОЧЕНЬ приятно, что Вы решили познакомиться со мной! Меня зовут Русаков Михаил Юрьевич, и я являюсь создателем и главным администратором сайта MyRusakov.ru, который полностью посвящён теме Как создать свой сайт. Немного о себе. Где я живу, трудно сказать. Родной город - Обнинск, впрочем, на выходных там и сейчас живу. По будням живу в Москве, так как учусь там. Сам я перешёл на 4-й курс Московского Энергетического Института (Технического Университета). Учусь на факультете Автоматики и Вычислительной Техники. Учусь на бюджетной основе, причём вполне успешно. Одновременно получаю второе высшее образование в Linguae-Centrum при МЭИ (ТУ) по специальности "Переводчик в сфере профессиональной коммуникации". Это уже платное образование. Изучаю, если можно так выразиться, английский язык. А вообще немного знаю ещё и французский язык (учил его в школе). Программированием увлёкся ещё в 10-ом классе. Начинал с Turbo Pascal, который пошёл у меня настолько успешно, что окружающие были очень удивлены, и я понял, что программирование - это моё призвание! В конце 11-го класса занялся языком Java. Вначале было тяжеловато (уж, очень я привык к процедурному стилю Turbo Pascal, а Java чистейшей воды Объектно-Ориентированный язык программирования), но через пару месяцев всё пошло, как по маслу. На 1-ом курсе в институте у нас был Turbo Pascal, где я выполнил все задачи за семестр за 7 часов, и потому получил зачёт и экзамен автоматом уже через пару недель после начала учёбы. Лишний раз понял, что программирование - это то, что получается у меня лучше, чем у других! Весь 1-й курс, да и половину 2-го занимался Java. Одновременно, в этот промежуток познакомился с такими языками, как C++, ActionScript (язык сценариев Flash). Потом увлёкся созданием сайтов. Изучил HTML, CSS, JavaScript, PHP, SQL (пользовался ПО MySQL). Летом 2009-го года занимался разработкой корпоративной сети (по просьбе брата), благодаря чему познакомился с XML, XML Schema, SOAP, WSDL. На 3-ем курсе начал заниматься программирование микроконтроллеров на Assembler. Михаил Русаков и сайт http://MyRusakov.ru 3 Михаил Русаков и сайт http://MyRusakov.ru Вот и вся информация обо мне. Полгода назад я решил поделиться своим багажом знаний, который я получал почти 5 лет. И сейчас я вовсю занимаюсь созданием своего видеокурса, посвящённого созданию и раскрутке сайта. В него войдут все необходимые знания для создания 99.9% сайтов: HTML, CSS, JavaScript, PHP, MySQL, XML. Обязательно рассмотрим CMS Joomla! Также на этот диск попадёт вся необходимая информация по раскрутке сайта! Более того, я планирую (и уже начал) записать создание этого сайта, а потом ещё и его раскрутку. Таким образом, Вы сможете увидеть в прямом эфире создание и раскрутку сайта http://myrusakov.ru, на котором Вы сейчас и находитесь. Планирую выпустить свой диск примерно в сентябре-октябре 2010 года. Ещё раз огромное спасибо, что решили познакомиться со мной! С уважением, Михаил Русаков! P.S. Все свои вопросы (в том числе и по программированию) слать на [email protected]. Либо пишите в ICQ 600038357 (при авторизации напишите, что пришли с http://myrusakov.ru). С удовольствием, отвечу на любые Ваши вопросы! Михаил Русаков и сайт http://MyRusakov.ru 4 Михаил Русаков и сайт http://MyRusakov.ru Введение. Первое, что мне хотелось бы сделать, так это поздравить Вас с приобретением этой бесплатной, но очень полезной книги. В данной книге рассказывается о языке гипертекстовой разметки - HTML (Hyper Text Markup Language), который является необычайно простым и в то же время необычайно важным для любого человека, который имеет хоть какое-то отношение к созданию сайтов. Я не буду Вас долго мучить ожиданиями, давайте кратко обрисую ситуацию. Во-первых, данная книга предназначена для новичков. Во-вторых, данная книга даёт, пожалуй, все знания HTML, которые необходимы при создании сайтов. В-третьих, материал изложен очень кратко и лаконично. Всё разложено по полочкам. Поэтому освоить данный материал сможет даже любой школьник. Также к учебнику приложен справочник по HTML-тегам! Если справочник отсутствует, то скачать его можно здесь: http://myrusakov.ru/skachat-uchebnik-osnovy-html.html. Ладно, закончу хвалить свою книжку, и пожелаю Вам успехов в её изучении! Если у Вас возникают какие-либо вопросы при изучении, или Вы хотите оставить отзыв о моей книге, то смело пишите мне на E-mail: [email protected]. На все письма я с удовольствием отвечу! Напоследок, об авторских правах на эту книгу! Авторские права полностью принадлежат её автору – Михаилу Русакову. Вы имеете право распространять данную книгу, но только при следующих условиях: 1) Вы НЕ имеете права продавать эту книгу. 2) Вы НЕ имеете права каким-либо образом изменять контент настоящего документа – Вы обязаны сохранить данную книгу как есть! При частичном копировании содержимого данного документа указывайте автора (Михаил Русаков) и сайт http://myrusakov.ru. Уверен, что Вы легко справитесь с данными условиями. С уважением, Михаил Русаков! Михаил Русаков и сайт http://MyRusakov.ru 5 Михаил Русаков и сайт http://MyRusakov.ru Создание сайта на HTML HTML-исходники к этой главе лежат в папке «glava1» (Скачать HTML-исходники можно здесь: http://myrusakov.ru/skachat-uchebnik-osnovy-html.html). Здравствуйте, меня зовут Михаил Русаков! В этой статье я расскажу Вам о создании простейшего сайта. Кто знает, может быть, знания, которые Вы получите в этой статье, впоследствии станут началом Вашего успеха. Я склонен полагать, что у Вас имеется большое желание научиться создавать свои собственные сайты. Разумеется, крайне глупо пытаться познать эту науку с изучения какого- нибудь PHP. Гораздо разумнее начать с чего-нибудь попроще, а именно с HTML (HyperText Markup Language - язык гипертекстовой разметки) - базового языка, на котором и построен любой, даже самый сложный сайт. Без этого языка не было бы ни одного сайта, более того, HTML - простейший язык, который может освоить даже школьник (яркий пример - Ваш покорный слуга, начавший осваивать HTML ещё в школе, причём весьма успешно). Ладно, хватит болтовни - пора приступать к созданию нашего с Вами первого сайта, и этот процесс будет называться: "Создание сайта на HTML". Первое, что нужно решить: где создавать сайт? Разумеется, можно и в обычном блокноте. Но это несерьёзно (мы так в школе писали), поэтому давайте лучше будем использовать что- нибудь "потяжелее". Я остановил свой выбор на редакторе "Notepad++" - замечательная программа, которая позволяет писать код на огромном количестве языков, в том плане, что это будет весьма и весьма удобно. Не буду сильно её хвалить, потому что для написания кода для серьёзных языков (Java, C++ и т. д.) она не подходит - много лишних проблем возникнет. Но для таких языков, как HTML, CSS, JavaScript и даже PHP - очень хороший выбор. Скачать Notepad++ можно, пройдя по этой ссылке: http://notepad- plus.sourceforge.net/ru/site.htm Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index.html. Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора: <html> <head> </head> <body> Михаил Русаков и сайт http://MyRusakov.ru 6 Михаил Русаков и сайт http://MyRusakov.ru </body> </html> Написали? Сохранили? Поздравляю Вас, Вы только что создали самую простую (но очень важную!!!) HTML-страницу! Теперь можно нашу страницу открыть в браузере. Так и поступим. Что-нибудь видите? Я уверен, что нет. И это неудивительно, ведь это самая элементарная страница. Вы можете посмотреть исходник страниц. Для этого в меню "Вид" выберите пункт меню "Просмотр HTML кода", "Исходный код страницы" или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код. А теперь давайте обсудим, что мы здесь написали. <html>, <head>, <body> - это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать. </html>, </head>, </body> - это закрывающие теги. Теги бывают парные и одиночные. Парные теги - это теги, которые нуждаются в закрывающем, то есть все три тега, которые мы использовали являются парными, так как они открываются и потом закрываются. Одиночные теги - это теги, которые не требуют наличие закрывающего тега. Теперь что касается назначения данных тегов. Тег <html> означает начало HTML-документа. Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже. Тег </head> означает конец заголовка HTML-документа. Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>. Тег </body> означает конец содержимого документа. Тег </html> означает конец HTML-страницы. Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код: <title>Наша страница</title> <meta http-equiv="Content-type" content="text/html; charset=windows-1251"> Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера. Тег </title> сообщает, что здесь заголовок заканчивается. Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид: Михаил Русаков и сайт http://MyRusakov.ru 7 Михаил Русаков и сайт http://MyRusakov.ru Название = "значение". Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документов (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит. Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>: <h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> <h4>Заголовок 4-го уровня</h4> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6> Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст. Таким образом, код Вашей страницы имеет вид: <html> <head> <title>Наша страница</title> <meta http-equiv="Content-type" content="text/html; charset=windows-1251"> </head> <body> <h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> <h4>Заголовок 4-го уровня</h4> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6> </body> </html> Сохраните страницу и посмотрите на неё в браузере. Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый). Таким образом, тег <body> выглядит так: <body text = "green" bgcolor = "yellow"> <h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> Михаил Русаков и сайт http://MyRusakov.ru 8 Михаил Русаков и сайт http://MyRusakov.ru <h4>Заголовок 4-го уровня</h4> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6> </body> Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным. Думаю, что на сегодня хватит для Вас материала. Очень полезно будет потренироваться в выводе разного текста, разными цветами. Увидимся в следующей статье! Ссылки и изображения в HTML HTML-исходники к этой главе лежат в папке «glava2» (Скачать HTML-исходники можно здесь: http://myrusakov.ru/skachat-uchebnik-osnovy-html.html). В этой статье я расскажу Вам о добавлении изображений и ссылок на Вашу HTML-страницу. Я думаю, что Вы ни разу не встречали ни одной страницы в Интернете, на которой не было ни одного изображения или ссылки. Поэтому материал данной статьи весьма важен, в то же время он очень прост, благодаря чему его сможет освоить даже школьник. Первое, что мы сделаем - это добавим HTML ссылку на нашу страницу. Для этого напишем в теге <body> такой код: <a target = _self href = "index.html" title = "Ссылка">Ссылка на эту страницу</a> Тег HTML <a> означает начало ссылки. У этого тега есть различные атрибуты. Давайте начнём с "target". Атрибут "target" может принимать три значения (их чуть больше, но они слишком редко применяются, поэтому не буду их даже упоминать): "_self", "_new", "_blank". Вообще говоря, результат этих атрибутов у разных браузеров зачастую происходит по-разному, поэтому я скажу, что означает каждое значение атрибута "target" лишь в теории, а не на практике. Значение "_self" означает, что страница откроется в этом же окне. Значение "_new" означает, что страница откроется в новом окне (некоторые браузеры открывают не новое окно, а создают новой вкладвку в браузере). Значение "_blank" означает, что страница будет открыта в новой вкладке. Михаил Русаков и сайт http://MyRusakov.ru 9 Михаил Русаков и сайт http://MyRusakov.ru Я настоятельно рекомендую Вам испробовать все значения этого атрибута в различных браузерах, чтобы окончательно понять, что каждое из них означает. Следующий атрибут "href" означает путь к странице. Так как нам пока ссылаться не на что, то приходится сослаться на ту же страницу. Что касается формы записи, то здесь бывают абсолютные и относительные пути. Абсолютный путь задаёт полный путь к файлу, например, так: "http://mysite.ru/images/image1.gif". А относительный путь указывают путь относительно каталога, в котором находится текущий файл. Например, наш файл "index.html" лежит в корне сервера, а мы пишем: "href = 'images/image1.gif'". Это означает то же самое, что и если бы мы написали: "http://mysite.ru/images/image1.gif". Это, что касается абсолютных и относительных путей. Надеюсь, что с атрибутом "href" всё стало понятно. Разумеется, ссылаться можно не только на HTML-страницы, но и на любые файлы, будь то картинки, будь то фильмы, будь то музыка, будь то архивы, будь то ещё всё, что угодно. Последний атрибут - это "title". Здесь всё совсем просто. Этот атрибут задаёт текст, который будет виден при наведении мышки на ссылку. С атрибутами тега <a> покончено. Что касается того, что внутри тега, то здесь только Ваша фантазия. В большинстве случаев - это обычный текст, как, например, у нас. Очень часто делают картинку внутри тега <a>, тогда эта ссылка будет в виде картинки. Тег </a> означает конец гиперссылки. Также можно задавать цвет ссылок. Опять же будет работать или нет - зависит от браузера. Но всё-таки, давайте я Вас с этим познакомлю. Добавим в тег <body> три атрибута : "link", "vlink" и "alink". Каждый из этих трёх атрибутов могут принимать значение какого-либо цвета. Атрибут "link" означает цвет непосещённой ссылки. Соответственно, "vlink" указывает цвет посещённой ссылки. И, наконец, атрибут "alink" указывает цвет ссылки в момент непосредственного нажатия. Как видите, здесь тоже ничего сложного нет. Теперь добавим изображения, но прежде, чем это делать. Сразу после добавления HTML- ссылки ставим тег "<br>". Этот тег также является одиночным, и он означает переход на новую строку. Напишем в теге <body> такой код: <img src = "image1.gif" alt = "Картинка" width = "100" height = "100"> Тег <img> означает, что мы хотим добавить здесь изображение. Этот тег, как видно, является одиночным, то есть у него нет закрывающего тега. Атрибуты тега также очень и очень простые. Атрибут "src" указывает путь к картинке. Опять же можно указывать, как абсолютный путь, так и относительный путь, в зависимости от ситуации. Атрибут "alt" указывает текст, который описывает картинку. Этот же текст будет показываться в случае, если картинка по каким-либо причинам будет не найдена, либо у Михаил Русаков и сайт http://MyRusakov.ru 10