Глава 7. САМЫЙ КРАТКИЙ В МИРЕ УЧЕБНИК HTML
advertisement
Глава 7. САМЫЙ КРАТКИЙ В МИРЕ УЧЕБНИК HTML Чтобы выстроить на экране вашего монитора страницу сайта со всеми картинками и шрифтами используется язык интернет-страниц, называемый html. Вопреки распространенному мнению, он крайне прост. Сейчас мы его освоим за пять минут. Потому что не будем останавливаться ни на чем лишнем. Лишнее вы потом посмотрите сами. Нам сейчас важно освоить несколько самых основных команд, которые пригодятся по-любому. Знайте: чтобы посмотреть как устроена любая страница, надо ткнуть в меню браузера "Вид -> Просмотр html-кода". Фактически язык представляет собой слова текста, которые мы видим на сайте вперемешку с управляющими командами, заданными в треугольных скобках. Любая интернет-страница в самом общем случае начинается командой: <html><body> И заканчивается: </body></html> Смысл вот в чем: мы информируем браузер о том, что начинается разметка html и заканчивается. Начинается тело страницы (body) - и заканчивается. Тут сразу становится понятно, что если в треугольных скобках перед командой стоит косая черта "/" - это значит, что на том ее действие (начатое раньше) заканчивается. Не все команды надо закрывать. Например, можно не закрывать команду <p> - она означает, что надо печатать последующее (текст, картинку, таблицу) с нового абзаца. К СВЕДЕНИЮ: Возникает резонный вопрос: ну а если в самом тексте нам надо использовать треугольные скобки? Например, мы хотим написать: "мне очень симпатична команда <p> для выделения абзацев". Как быть? Для этого предусмотрена замена: < заменяется сочетанием &lt; > заменяется сочетанием &gt; "мне очень симпатична команда &lt;p&gt; для выделения абзацев" К слову сказать, в языке существует еще множество комбинаций для громоздкой замены самых разных символов - например того же & или кавычек. Но забивать себе голову этим не надо - все остальные символы сработают и так. В отличие от треугольных скобок, которые в тексте всегда воспринимаются как признак команды. Например, если вы хотите изобразить что-то типа стрелочки "-->" - трижды подумайте, как это правильно написать. ШАГ 1. Главное - начать. Чтобы начать создавать сайт, следует запустить блокнот (не Word - он не создает простых текстов). Итак, первый пример вашей страницы. Сделайте у себя на компьютере папку и в ней создайте документ index.htm (так принято называть самую главную страницу любого сайта). Сделайте ее прямо в обычном блокноте: <html><body> <p>Меня зовут Ксюнчик!!! Тут скоро будет мой веб-сайт! <p>Зайдите через 15 минут, я пока осваиваю html! </body></html> Если не поставить <p>, то на экране строки сольются в один абзац: Тут скоро будет мой веб-сайт! Зайдите через 15 минут, я пока осваиваю html! Итак, главная страница готова. Теперь осталось ткнуть в браузере "Файл -> Открыть -> обзор..." и открыть ее прямо со своего диска. Чтобы посмотреть, что получилось. #########картинка: site1.png ШАГ 2. Вставить картинку. Картинка вставляется очень просто: <img src=АДРЕС-КАРТИНКИ> Закрывать этот тэг командой </img> не надо - он сам по себе. Умение вставлять картинку - умение очень полезное. Ведь их можно вставлять и в большинстве форумов или при написании комментариев в дневники. Например, вы прочли политический манифест своего приятеля, вас переполняют чувства, и жизненно необходимо сказать этому человеку, что он похож на ишака. В чем проблема? Идем в поисковую систему. Например, rambler.ru Нажимаем кнопочку "картинки" и набираем "ишак". Выбираем понравившегося. Запоминаем адрес этой картинки в интернете. Теперь пишем другу: Прочитала твои мысли насчет внешней политики Гвинеи. обижайся, но ты сейчас напоминаешь мне вот это животное: Не <img src=”http://oslo.sv/gallery/osel5.jpg”> указывается в двойных кавычках – см rfc1866 URL всегда Но вернемся к нашей домашней страничке. Итак, у нас в папке лежит index.htm, а рядом положите свою фотку. Поскольку она лежит рядом, то ее адрес можно указать относительный - брайзер сам разберется, что искать фотку надо тут же. Итак, отредактируем наш index.htm <html><body> <p> Меня зовут Ксюнчик!!! Тут уже почти мой веб-сайт! Вот моя фотка: <p><img “src=fotka.jpg”> <p>Зайдите через 10 минут, я все еще осваиваю html! </body></html> #########картинка: site2.png ШАГ 3. Вставить ссылку Как мы уже говорили выше, ссылка - это такая штука на странице, на которую можно ткнуть мышкой и оказаться в другом месте. Ссылка в тексте обычно подчеркнутая и синяя (или фиолетовая, если вы там в последнее время хоть раз уже побывали). Умение вставлять ссылку всегда пригодится. В языке html ссылка начинается после команды <a href=АДРЕС> и заканчивается командой </a>. Все, что попало между - слова, картинки - все это при нажатии мышкой будет выводить браузер на АДРЕС. Например, вы можете положить в папку файлы obomne.htm и diplom.doc И ваша страничка станет такой: <html><body> <p>Меня зовут Ксюнчик!!! Мой веб-сайт почти готов! Вот моя фотка. Ткнув на нее, ты прочтеш мою биографию: <p><a href=”obomne.htm”><img src=”fotka.jpg”><p>обо мне</a> <p>Вот это - файл с текстом моего <a href=”diplom.doc”>диплома </a> <p>А вот сайт моей любимой поисковой системы <a href=”http://www.rambler.ru”>rambler.ru</a>то же самое <p>Зайдите через 5 минут, я почти освоила html! </body></html> #########картинка: site3.png К СВЕДЕНИЮ: Все эти призывы зайти через 15, 10, 5 минут не имеют никакого смысла, пока папка с сайтом лежит на вашем диске. Никто, кроме вас, туда все равно не может зайти. Чтобы люди могли зайти на сайт по интернету, все файлы сайта (index.htm, obomne.htm, diplom.doc и fotka.jpg) следует загрузить на сервер хостинга. Как именно - расскажет провайдер. ШАГ 4. Оформление текста Здесь нам придется запомнить несколько самых основных команд, которые пригодятся. Если вам приспичит выучить html - выучите только их, все остальное можно всегда посмотреть в справочнике. ПРИМЕЧАНИЕ: Полезная команда <hr> - длинная горизонтальная полоска на экране. Закрывать ее (типа </hr>) не надо. Абзацы <p> - с нового абзаца <br> - с новой строки (интервал меньше, чем абзац, всего лишь другая строка) <li> - абзац списка перечисления, он начинается с новой строки и первой будет стоять эдакая жирная шкворина, обозначающая перечисление. Выравнивание <div align=right>эти строки и картинки прижмутся к правой границе экрана</div> <div align=justify>эти строки текста будут аккуратно выровнены по левому и правому краю экрана как текст в книгах</div> <center>эти строки и картинки будут посередине экрана</center> К СВЕДЕНИЮ: Если загнать строчку в команду <marquee>строчка</marquee>, то она будет ездить по экрану! Таких глупостей в html еще миллион, но на практике они не нужны. Шрифты <b>жирный</b> - текст выделяется жирным <i>курсив</i> - текст выделяется курсивом <s>зачеркнутый</s> - текст выглядит зачеркнутым - это очень удобно для оформления задних мыслей ("до чего же задолба я люблю сдавать сессию!") <pre>этот текст будет отображен по строкам как он написан</pre> - да еще и квадратным шрифтом. Бывает полезно, если вы хотите что-то процитировать и не хотите мучаться, вставляя руками команды абзацев <p> и <br>. К СВЕДЕНИЮ: Существует еще множество команд, но они не слишком нужны, а наша задача - не грузить информацией, которая не пригодится. Например не нужна команда <tt>, выделяющая текст квадратным шрифтом. Также не нужна команда <u>, которая делает текст подчеркнутым. Более того - она очень вредна: посетители решат, что раз подчеркнуто, значит тут ссылка, и сломают себе мышь в безуспешных попытках ткнуть в эту строчку. Цвет и размер букв Для этого используется команда <font ...> в которую через пробел вписывается все необходимое: color=red - задать цвет. Профессионал будет морочиться с палитрами и отенками, а нам сейчас достаточно придумать цвет и вспомнить его английское название. Потому что практически все основные цвета названы латинскими буквами: red, blue, green, yellow, brown, orange - и еще добрый десяток. size=7 - задать размер шрифта. Самый гигантский 7. Самый мелкий 1. Если размер шрифта не указывать, то останется нормальный шрифт, его номер 3. Правило действует до тех пор, пока не встретится закрывающий тэг </font> - тогда прекращается действие указанного ранее размера и цвета. Пример: <font size=7 color=red>ПРЕВЕД ВСЕМ!!!</font> Вот таким бывает <font size=2>маленький шрифт и<font size=1>еще более мелкий...</font></font> На этом пора закончить наш самый короткий в мире учебник html потому что все необходимое мы уже выучили. Страница нашего сайта теперь будет выглядеть так: <html><body> <center> <p><font size=5 color=red>Добро пожаловать на мой сайт!</font> <p><a href=obomne.htm><img src=fotka.jpg></a> </center> <hr> <p><i>здесь вы можете:</i> <li>прочитать <a href=obomne.htm>обо мне</a> <li>скачать файл моего <a href=diplom.doc>диплома</a> <li>отправиться на сайт <a href=http://www.rambler.ru>rambler.ru</a> <hr> </body></html> #########картинка: site4.png веб- Не забудьте создать похожую страницу obomne.htm, на которую мы ссылаемся. ШАГ 5. Для совсем крутых - таблицы Наш самый короткий в мире учебник html давно закончился, а эта глава для тех, кто хочет освоить html в совершенстве. Здесь мы поговорим о таблицах. До этого мы говорили только про команды выделения абзацев типа <p>, но любой сайтовладелец хочет не просто отделять строки и картинки, а размещать их строго в выбранных местах страницы. Типа справа у нас колонка ссылок, наверху - шапка, слева - колонка новостей, по центру - фотка. Тут командой <p> не обойтись. Основой сайтостроения являются таблицы. Они есть на каждом сложном сайте, но их клетки никогда не видны (что достигается дополнительной опцией "border=0"). Суть метода в том, что мы представляем страницу сайта в виде большой таблицы, а все свои объекты (фразы, картинки) располагаем в клетках. Команд для организации таблицы всего три: <table> начать таблицу, чтобы закончить ее </table> <tr> начать строку таблицы (чтобы закончить ее </tr>) <td> начать клетку таблицы (чтобы закончить ее </td>) Пример: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr><tr> <td>4</td><td>5</td><td>6</td> </tr> </table> В итоге мы получили на экране конструкцию из двух строк (каждая длится от <tr> до </tr>) по 3 ячейки в каждой (от <td> до </td>), выглядит это так: 123 456 Внутри каждой ячейки между <td> и <td> можно располагать все, что вам необходимо тонны строк текста, картинки, а также - другие вложенные таблицы. Причем, это очень удобно вкладывать по мере необходимости новую таблицу внутрь ячейки (только не забывайте новую таблицу закрывать </table>) вместо того, чтобы пытаться достичь нужной конфигурации при помощи единственной гигантской таблицы. Ниже мы приводим список дополнительных параметров для таблиц, которые вписываются через пробел в команды <table>, <tr> или <td>. border=0 cellspacing=0 cellpadding=0 - волшебная мантра, которая вписывается внутрь скобок <table> чтобы не было промежутков между ячейками и сами границы ячеек были не видны. Для начала впишите border=1 чтобы увидеть на экране что получается, всегда потом можно поменять на 0. width=100% height=300 - так можно регулировать размеры таблицы в <table> или конкретной ячейки в <td>. width - ширина, height - высота. Если указано просто число значит, размер в пикселях (точках) экрана. А если число с процентами - значит. Проценты от общего поля экрана. Наример вот так можно поделить экран на неравномерные части: <table width=100% border=1><tr> <td width=25%>первая клетка - четвертушка экрана</td> <td width=50%>вторая клетка - половина экрана</td> <td width=25%>третья клетка - снова четвертушка</td> </tr></table> #########картинка: site1.png В этом примере строка у таблицы одна - из трех клеток. Если строк будет несколько, то указывать размеры клеток в каждой из них уже не имеет смысла - линии столбцов и строк в таблице соблюдаются строго, поэтому все прочие клетки таблицы, попавшие в зависимость, автоматически подгонятся по размеру. valign=top - выравнивание по вертикали к верху (top - верх, bottom - низ, center - по центру) align=left - выравнивание по горизонтали влево (left - влево, right - вправо, center - по центру) Эти команды ставятся внутри <tr> и <td>, причем то, что внутри <td> - главнее, если противоречит указанному для всей строки. Например: <table border=1><tr height=200 valign=top> <td>я наверху!</td> <td>я тоже наверху!</td> <td valign=bottom>а мне пофиг, я внизу!</td> </tr></table> #########картинка: site2.png bgcolor=red - установить цвет фона для всей таблицы <table>, строки <tr> или клетки. background=fonchik.jpg - то же самое, только установить файл в качестве фона. Вместе эти команды использовать бессмысленно - что-то одно. <table border=1><tr> <td bgcolor=blue>я синяя клетка!</td> <td bgcolor=green>а я зеленая!</td> <td>а я не выпендриваюсь, я обычная</td> </tr></table> #########картинка: table3.png Теперь мы может сверстать страничку нашего сайта по-человечески. Вверху у нас будет заголовок. Под ним - две колонки, в правой - фотография и ссылки. В левой - пустое место с надписью "здесь будут новости". <html><body><center><table width=100%> <!-- Вот мы начали сразу с таблицы. Кстати, в таких вот значках пишутся комментарии, которые никогда не отображаются на экране --> <tr> <td align=center><p><font size=5 color=red>Меня Ксюнчик<br>Добро пожаловать на мой веб-сайт!</font> </td> зовут </tr> <!-- Наша таблица состоит из двух строк-клеток шириной во весь экран. Первая клетка была - заголовок. Вторая будет щас. --> <tr> <td> <!-- Встроим в нее свою таблицу - состоящую из одной строки с двумя (нет, тремя!) ячейками. --> <table><tr><td> <a href=obomne.htm><img src=fotka.jpg></a> <p><i>здесь вы можете:</i> <li>прочитать <a href=obomne.htm>обо мне</a> <li>скачать файл моего <a href=diplom.doc>диплома</a> <li>отправиться на сайт <a href=http://www.rambler.ru>rambler.ru</a> </td> <!-- эта клетка будет очень тонкая (из одного пробела), но поскольку у нее черный фон, то это просто будет как черная вертикальная полоса --> <td bgcolor=black> </td> <td> <p>Здесь скоро будут новости сайта. Просто пока новостей нет. </td> </tr></table> <!-- Вот мы благополучно закрыли нашу встроенную таблицу. Осталось закрыть и основную. На чем мы в ней остановились? Ах, да, мы открыли клетку, в которую встроили новую таблицу. Теперь надо закрыть клетку, потом строку, ну и саму таблицу.--> </td></tr></table> </body></html> #########картинка: table4.png Все! Теперь вы можете создавать любые веб-сайты, а также смотреть чужие, как они устроены изнутри. Приложение: таблица символов:
