Редактируем текст на своей странице
Учебник HTML для начинающих.
Версия для печати раздела "Учебник HTML" сайта www.webremeslo.ru
Введение
Этот учебник целиком и полностью посвящён языку HTML, без знаний которого не обойтись в создании какой либо веб-страницы. HTML язык - это основа, база которую просто таки необходимо знать любому начинающему веб-мастеру! Этот язык, сам по себе (в чистом виде), достаточно простой, думаю его с легкостью может освоить любой "продвинутый" шестиклассник.. в тоже время он позволяет самостоятельно создавать полноценные страницы и сайты.
Рассчитан этот HTML учебник для начинающих "с нуля" людей, которые только только решили освоить веб-ремесло, поэтому старался писать его как можно более развернуто и что называется "доходчиво", в тоже время стараясь охватить весь курс до мелочей, так что может быть и опытный веб-мастер найдет в нём для себя что-то новое или будет использовать его в качестве "шпаргалки", изложенной в прилагаемом справочнике тегов: (http://www.webremeslo.ru/spravka/spravka.html). Где нет "воды" и нудноватого для уже опытного человека "разжёвывания" материала.
Ну и сразу к делу.. начнем с классики..
Откройте блокнот, да да, тот самый блокнот.. Пуск> Стандартные> Блокнот и напишите в нем следующий текст:
<html>
<head>
<title>Моя первая страничка </title>
</head>
<body>
Привет мир!!!
<br>
Меня зовут (здесь впишите Ваше имя), это моя первая страничка!
</body>
</html>
|
|
|
Далее, сохраните этот текст как html документ, название придумайте сами.. главное чтобы расширение было html
Повторюсь, чтобы не было казусов.. в блокноте кликаем по меню "Файл", выбираем "Сохранить как.." в строке "Имя файла" пишем: index.html, просто по умолчанию блокнот предлагает сохранить файл с расширением *.txt, а нам нужно расширение *. html
Далее открываем этот файл при помощи Вашего браузера.. ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. "Открыть с помощью.." Internet Explorer)
Поздравляю, Вы написали свою первую страничку!!!
Если в Вашей душе загорелась искорка, проснулась тяга к знаниям и творчеству, предлагаю планомерно ознакомится с главами этого учебника. В них на доступном языке с множеством примеров я постараюсь объяснить то, что мы только что написали, а так же как сделать этот документ более привлекательным, вставить в него графику, таблицы, прописать ссылки.. в общем, сделать его полноценным сайтом, заслуживающим место во всемирной паутине.
Глава 1
Что такое HTML язык и с чем его едят..
Начну, пожалуй, с начала..
HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.
|
|
|
Теперь о командах - их называют дескрипторами, но чаще - тегами.
Вернемся к нашей первой страничке.. итак мы написали:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
<br>
Меня зовут Карлсон, это моя первая страничка!
</body>
</html>
Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег <html> понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег </html> говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.
|
|
|
Так что же мы написали? и как это читает браузер?
Мысли браузера:
<html> - начало документа.. опять работы привалило..
<head> - смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
<title> - "название" значит.. это в шапке окна нужно написать его название:
Моя первая страничка - опять чайник тренируется..
</title> - все название закончилось.. можно идти дальше..
</head> - ага и в голове кроме названия больше никаких вздорных мыслей не держим..
<body> - "тело" документа все, что написано ниже выставляем на всеобщее обозрение
Привет мир!!! - как мило! Достали уже!!!
<br> - переносим текст на следующую строчку.. я даже догадываюсь, что в ней будет...
Меня зовут (здесь Ваше имя), это моя первая страничка!- ну да так и есть.. ничего пооригинальнее придумать не могут..
</body> - что всё что ли? Больше ничего не отображать?
</html> - ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!
Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:
|
|
|
1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий </…>
Хотя есть и исключения как например у нас тег <br> - он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")
2) Все документы должны иметь вот такой шаблон кода:
<html>- начало документа
<head>- начало головы
</head>- закрытие головы
<body>- начало тела
</body>- закрытие тела
</html>- конец документа
Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..
3) О порядке:
Открывающий и закрывающий тег по типу <…> </…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "ящик маленький" >
</Тег "ящик средний" >
</Тег "большой ящик">
Если писать, например, так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "большой ящик">
</Тег "ящик маленький">
</Тег "ящик средний">
То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..
Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..
Полезные советы:
· При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!
· При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймете, что читать код написанный вот так:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
<br>
Меня зовут Карлсон, это моя первая страничка!
</body>
</html>
Значительно легче, чем так:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
<br>
Меня зовут Карлсон, это моя первая страничка!
</body>
</html>
И уж тем более чем вот так:
<html><head><title>Моя первая страничка</title></head><body>Привет мир!!!<br>Меня зовут Карлсон, это моя первая страничка!</body></html>
Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".
Глава 2
Редактируем текст на своей странице..
Вы наверняка не раз печатали документы в текстовых редакторах, так вот.. что можно сделать с текстом в том же Word, то же можно сделать и с текстом на нашей страничке.
В этой главе я расскажу о том, как изменить шрифт и его размер, как сделать текст жирным, курсивом, подчёркнутым и о том как его выравнивать по краям или центру документа.
Параграф.
Я думаю, Вы знаете, что такое параграф.. это такой кусочек текста, одно или несколько предложений, который в книгах обычно печатается с новой строки, тем самым, выделяя этот текст из основной массы, Книгу разбитую на параграфы легко читать, потому что, как правило, одному параграфу соответствует одна мысль или логическая часть текста.
Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> - собственно параграф.
Параграф имеет атрибут align"выравнивание" который в свою очередь может быть равен тому ли иному значению.
Рассмотрим на примерах:
С помощью параграфа можно расположить наш текст по центру:
<p align="center">Привет мир!!!</p>
По левому краю:
<p align="left">Привет мир!!!</p>
По правому краю:
<p align="right">Привет мир!!!</p>
Или же обоим краям документа:
<p align="justify">Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>
Давайте слегка изменим нашу первую страничку:
<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
<p align="center">Привет мир!!!</p>
<br>
<p align="justify">
Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</p>
</body>
</html>
Так уже лучше, не правда ли?
Запомним некоторые вещи:
1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:
<p>
<p>
</p>
</p>
Нельзя! - это нелогично, как может один параграф содержать в себе другой?
2) Так же, нельзя писать пустые теги без текста или других тегов.
<p> здесь, что-то обязательно должно быть!!!</p>
3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align="left" для параграфа можно не указывать.
4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пшится так:
<div align="center">Привет мир!!!</div>
<div align="left">Привет мир!!!</div>
<div align="right">Привет мир!!!</div>
<div align="justify">Привет мир!!!</div>
Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу:
<div>
<p align="left">Пишем слева</p>
<p align="right">Пишем справа</p>
</div>
А вообще тег <div> многофункциональный.. и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже..
5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так:
<center>Привет мир!!!</center>
Заголовки
В наборе тегов html языка имеется шесть типов заголовков:
<h1> Привет мир!!! </h1>
<h2> Привет мир!!! </h2>
<h3> Привет мир!!! </h3>
<h4> Привет мир!!! </h4>
<h5> Привет мир!!! </h5>
<h6> Привет мир!!! </h6>
Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки - на то он и заголовок.
Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?
Знакомимся тег <font> в переводе на русский - "шрифт".. Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size - размер.
Пишется и выглядит это так:
<font size="+4">Привет мир!!!</font>
<font size="+2">Привет мир!!!</font>
<font size="+0">Привет мир!!!</font>
<font size="-1">Привет мир!!!</font>
<font size="-2">Привет мир!!!</font>
Добавим эти теги на нашу страницу.
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<center><h2>Привет мир!!!</h2></center>
<br>
<p align="justify">
<font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font>
</p>
</body>
</html>
Попробуйте поэкспериментировать с размерами шрифта и заголовком, подставьте свои значения, измените расположение тегов..
Цвет
Для придания страничке красивого вида не обойтись без палитры с красками..
В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:
| #000000 black | #ffffff white | #ff0000 red |
| #ffa500 orange | #ffff00 yellow | #008000 green |
| #00ffff cyan | #0000ff blue | #800080 purple |
Полная палитра базовых красок приведена здесь: (http://www.webremeslo.ru/spravka/spravka1.html)
Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB - например #008000 - зелёный цвет, либо используя константы цвета - green (для тех кто учил французский, green -зелёный.)
Краски есть, давайте рисовать!
Мы уже знакомы с тегом <font> у него есть еще один атрибут - color.
Так вот, если к примеру написать так:
<font color="#ff0000">Привет мир!!!</font> - То цвет шрифта станет красным. Попробуйте..
А можно так:
<font color="red">Привет мир!!!</font> - Будет тоже самое..
Но советую писать всё же шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых, поговаривают, что не все браузеры знают названия тех или иных красок…
Есть еще один способ изменить цвет текста. Тег <body> </body> "тело" - имеет атрибут text - "текст" если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы "принудительно" указали другой цвет.
В строчке, где стоит открывающий тег <body> пишем так:
<body text="#ff8c40 ">
Теперь весь текст у нас стал оранжевым кроме заголовка "Привет мир!!!" который мы отдельно перекрасили в красный.
А вот атрибут тега <body> bgcolorи его значение задает цвет фона страницы
<body bgcolor="#40caff"> - залили всё голубым..
Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте!
Сейчас Вам нужно понять принцип построения html кода иначе рано или поздно станете в тупик.. конечно, я и дальше буду выкладывать готовые примеры, но нет ничего лучше чем самостоятельная практика.
На данный момент у меня получилось вот так: .. а у Вас?
<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text="#484800" bgcolor="#e8e8e8">
<center>
<h2>
<font color="#008000">Привет мир!!!</font>
</h2>
</center>
<p align="justify">
<font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>
Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text="#ff207b" bgcolor="#1a77f0"> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..
Стиль текста
Здесь все достаточно просто..
Итак, новые теги:
| <b> </b> | - Полужирный текст |
| <i> </i> | - Наклонный текст |
| <u> </u> | - Подчеркнутый текст |
| <strike> </strike> | - |
| <s> </s> | - |
| <tt> </tt> | - моноширинный шрифт |
| <small> </small> | - Малый |
| <big> </big> | - Большой |
| <sup> </sup> | - Верхний индекс |
| <sub> </sub> | - Нижний индекс |
Ну думаю понятно.. текст заключённый между этими открывающими и закрывающими тегами приобретёт нужный нам стиль.
Вот пример на всякий случай…
<html>
<head>
<title>Стили текста</title>
</head>
<body>
<big><b><u>Научная статья.</u></b></big>
<br>
<br>
Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>- водка.</i>
<br>
Впервые данную пропорцию<s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt>
<br>
<br>
<br>
<small>Распитие спиртных напитков вредит вашему здоровью.</small>
</body>
</html>
Шрифт
Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face - лицо то бишь..
Пишется так:
<font face="arial">Эта строчка будет написана с помощью шрифта Arial</font>
Пример:
<html>
<head>
<title>Использование различных шрифтов</title>
</head>
<body>
<fontface="arial">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face="times new roman">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face="comic sans ms">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
</body>
</html>
Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то "экзотические" нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратиться в обыкновенный.
Дата добавления: 2018-02-28; просмотров: 492; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!