в фоормате doc - Newrassa - все о индиго
advertisement
Html для чайников Введение Html – это тип веб – страниц. Есть mhtml, xml, xhtml и т.д., но мы говорим о html. Чтобы начать писать свои веб – страницы нужно просто открыть текстовый редактор (блокнот), и написать код. Затем поменять расширение (то, что после точки, например mytext.txt) на html. Либо можно писать код прямо в текстовом поле на вашем сайте (если оно есть, на народе оно есть). Т. е. главное – создать документ с расширением html, который понимает браузер. Так же можно использовать специальные html – редакторы, которые могут быть гораздо удобнее. Основные понятия Html страницы (и другие) пишут с помощью специальных тегов, которые задают какиелибо параметры, например цвет текста, размер текста, цвет фона, фоновый рисунок и т.д.. Некоторые теги нужно завершать (об этом вы узнаете дальше), чтобы, например, не весь текст был одного цвета или размера. Урок 1 – основные теги У страницы есть начало. Это начало, и в общем-то дающее понять что это именно веб страница, тег <html>, который пишут в самом начале страницы. За ним следует тег <head>, этот тег обозначает служебную информацию. Это, например, может быть имя конструктора веб – страниц, с помощью которого была создана эта веб – страница (текст пишут после тега). За тегом head следует тег <title> который закрывается после текста </title>, за ним так же закрывается тег </head>. Title – это название страницы, которое отображается в окне браузера. Потом задают параметры <body text=”#FFFFFF” bgcolor=”#000000” background=”image.png”>. Body – тело, т. е. тело веб – страницы, необходимый тег. Text – цвет текста на странице, bgcolor – цвет фона, background – фоновый рисунок. В кавычках указывают путь к графическому файлу. Он может замостить страницу, т. е. он отображается не во весь размер страницы, а заполняет ее, по этому стоит использовать большие фоновые рисунки. Покажу пример: <html> <head> <title>Моя страница</title> </head> <body text=”#FFFFFF” bgcolor=”#000000”> Это моя первая страница. Я написал ее в текстовом редакторе. Я все сделал сам, все как написано в учебнике. И у меня неплохо получилось. Мне нравится, я буду создавать веб-страницы и дальше. </body> </html> А выглядеть это будет так: Это моя первая страница. Я написал ее в текстовом редакторе. Я все сделал сам, все как написано в учебнике. И у меня неплохо получилось. Мне нравится, я буду создавать веб-страницы и дальше. Думаю с этим вам все ясно. Заметьте, тег <body> имеет завершение в конце страницы. В принципе теги <body> и <html> можно и не завершать, но мы будем делать все правильно. Урок 2 – текст Для текста тоже есть множество тегов. Например тег <H1>, он задает размер текста, числовое значение начиная от 1 и по возрастанию. Чем больше значение, тем мельче текст. Этот тег имеет завершение </H1>, и в завершающем теге не путайте число, оно должно быть тем же, что и в начальном неге. Но при использовании этого тега происходит принудительная табуляция (перенос строки). Это может быть неудобно, вдруг вам надо выделить в тексте одно слово. Для этого предусмотрели тег <font size=”+2”>, у которого может быть числовое значение со знаком + или -, + - чем больше число, тем больше текст, - - чем больше число, тем мельче текст. Так же можно задать цвет текста и шрифт тегами <font color=”#FFFFFF”> ; <font face=”TIMES NEW ROMAN”>, далее текст, а после него завершение тегов </font>, и заметьте – один раз, а не два или три. Так можно выделить абзац, или одно слово. Как вам захочется. Пример: Текст текст текст <font color=”#00FF40”><font size=”+2”> текст</font> текст текст текст Текст текст текст Или: текст текст текст текст <font face=”TIMES NEW ROMAN”> <font color=”#008000”> Я люблю писать веб – страницы. Мне это нравится. Я напишу их очень-очень много. И еще я очень люблю писать всякие разные статьи, на разные темы. </font> Я люблю писать веб – страницы. Мне это нравится. Я напишу их очень-очень много. И еще я очень люблю писать всякие разные статьи, на разные темы. Теперь как же нам сделать жирный текст или курсив? Для этого тоже есть специальные теги. <i>курсив</i> <b>жирный</b> <u>подчеркнутый</u> <s>зачеркнутый</s> <sup>надстрочный</sup> <sub>подстрочный</sub> Но не нужно забывать про перенос строки, который тоже нужно прописывать. Тег - <br>, так же таб (отступ) - <ul>текст</ul>, но можно поставить пробелы &nbsp; - их не надо прописывать, только когда нужно много. Но вернемся к цветам. В кавычках указан код цвета. Вот некоторые цвета: #FFFFFF #000000 – #00FF40 – #008000 – #FF0000 – #0000FF – #408080 – #8080FF – #FFCC00 – #004080 – Пока хватит. Урок 3 – декоративные элементы Какие же это декоративные элементы? Это в первую очередь линия. Ее тег не требует завершения. <Hr> - это простая линия, горизонтальная, на всю ширину. Но можно задать ее параметры. <Hr color=”#408080” align=”right” width=”100” size=”2”> теперь объяснения: Color – как вы поняли, это цвет линии, но может отображаться не во всех браузерах. Align – расположение, которое по умолчанию будет центром страницы. Оно может иметь значение left, right, center (слева, справа, по центру). Размеры в пикселях (точки экрана). Width – ширина линии (по горизонтали). Size – толщина (по вертикали). Таким образом, можно задать size, например, 100, а width – 1, и получится вертикальная линия. Можно сделать такой список: Значение 1 Значение 2 Значение 3 Или: Значение 1 Значение 2 Значение 3 Или: o Значение 1 o Значение 2 o Значение 3 Вот теги: <li type=”circle”> Значение </li> <li type=”disk”> o Значение </li> <li type=”square”> Значение </li> Но это может отображаться не во всех браузерах. Цвет кружочков (или квадратиков) такой же, как и цвет текста. Урок 4 – ссылки Ну какая - же веб – страница без ссылок…. Вот как их сделать: <a href=”http://” target=”new folder” target=”_top”>Название</a> Но как указать цвет ссылки? Прописываем в начальном теге body (если забыли, урок 1). В кавычках после href= адрес ссылки. Tardet=”new folder” – страница открывается в новом окне (или вкладке). Target=”_top” – страница откроется в полный экран. <body text=”#FFFFFF” bgcolor=”#000000” link=”#FFCC33” vlink=”#408080” alink=”#00FF40> Link – цвет ссылки, vlink – цвет посещенной ссылки, alink – цвет активной (в момент загрузки) ссылки. Чтобы сделать ссылку жирной, или курсивом, используем теги как для обычного текста, но ставим их перед тегом ссылки, и не забываем завершать (после закрывающего тега ссылки). Так же можно использовать список (урок 3). А как сделать ссылку на какое-то место страницы? Для этого нужно присвоить любому тегу (например, <H3> или <font size=”2”) параметр id=”neme” Текст <H3 id=”zagolovok”> </H3> А ссылка тогда будет такая: <a href=”#zagolovok”>Заголовок</a> Не делайте название в id и в ссылке разными размерами букв (например в id ТАК и в ссылке так), иначе ссылка не будет работать. Урок 5 – бегущая строка Хотите сделать бегущую строку? Пожалуйста! <marquee width=”200” height=”50” bgcolor=”#8080FF” scrollamount=”7” loop=”10” direction=”left”>текст бегущей строки</marquee> Width – как вы поняли, ширина, а height – высота. Bgcolor – цвет фона, scrollamount – скорость прокрутки, которая может быть от 1 до 10 (1 – самая медленная, 10 – самая быстрая), loop – количество раз, которые строка «пробежит». Этот параметр можно не задавать, тогда строка будет прокручиваться постоянно. Direction – это в какую сторону строка будет двигатся, значения могут быть: left (влево), right (вправо), up (вверх), down (вниз). В бегущую строку можно помещать ссылки, применять все теги для текста (как и везде). Урок 6 – таблица Таблица нужна не только для разных документов, но и для красивого оформления, кнопок, и удобства (например, если нужно разместить какие-либо элементы в определенных местах страницы). У таблицы есть горизонтальные строки (тег <td>), и вертикальные столбцы (тег <tr>). Примем кода: <table cellspacing=”5”> <tr> <td bgcolor=”#008000” width=”100” height=”100” border=”3” bordercolor=”#408080> 1x1 </td> <td> 1x2 </td> </tr> <tr> <td colspan=”2”> 2x2 </td> </tr> </table> Cellspacing – расстояние между ячейками (можно не задавать), border – толщина границ, bordercolor – цвет границ. Colspan – на сколько ячейка простирается столбцов. Этот параметр можно заменить на rowspan, это ряды. Вот как выглядит таблица: 1х1 1х1 2х2 Так же тегу td можно задать параметр vilign=”top” – расположение текста, значения: top – сверху, middle – посередине, bottom – внизу. Так же можно задать параметр backgroung=”http://” фоновый рисунок. Таблица с rowspan вместо colspan: <table cellspacing=”5”> <tr> <td bgcolor=”#008000” width=”100” height=”100” border=”3” bordercolor=”#408080> 1x1 </td> </tr> <tr> <td> 2х1 </td> <td rowspan=”2”> 2x2 </td> </tr> </table> 1х1 2х2 2х1 Если вы не заметили, в примерах расстояние между ячейками вообще отсутствует. В Word его нельзя задать. Ширина и высота первой ячейки так же не соблюдены, как и толщина границы. Урок 7 – картинки Без картинок тоже не обойтись. Вот код с последующим объяснением: <img width=”200” height=”200” align=”left” align=”middle” hspace=”5” vspace=”5” border=”0” alt=”image” src=”http://” > Align – сначала расположение, а потом с какой стороны обтекает текст – middle (сбоку), top (сверху), bottom (снизу). Hspace – отступ текста по горизонтали, vspace – вертикали. Border – рамка. Alt – описание, которое будет показано если в браузере отключена графика. Src= - в кавычках ссылка на изображение. Если не задавать width и height (ширина и высота), то они будут равны размерам картинки. Так. А если нужно прервать обтекание? Не кучу же <br> ставить… есть у него параметр clear=”all” – значения: all – прервать обтекание текстом, lift – тоже самое, только текст продолжается по левому краю, right – по правому краю (пример: <br clear=”all”>). Теперь картинка-ссылка: <a href=”http://”><img src=”http://”></a> Для картинки действуют все вышеприведенные параметры. Но тут будет рамка. Нужно указать border=”0”. Урок 8 – параграфы и прочее Параграфы нужны для того, чтобы разместить их содержимое (текст, таблицы и т.д.) по какому-нибудь краю (слева, справа, или по центру). <p align=”center”> Содержимое </p> У параметра align могут быть значения left, center, right (слева, по центру, справа). Так же есть значение justify – содержимое распределяется по всей ширине, и длине (с переносами), его обычно применяют для текста. Есть альтернатива – тег <center>, который после завершается </center>, иногда это проще, чем параграф, и удобнее. Урок 9 – фреймы Фреймы – это вставки страниц (или картинок) на страницу, т. е. когда страница состоит из нескольких «слепленных». <head> <frameset rows=”340,*”> <frame scrolling=”no” src=”http://”> </frameset> </head> Фреймы вставляются после тега head (урок 1, если забыли), и тут тег body не нужен, сразу ставим </html> после </head>, но можно этого не делать – можно продолжить (поставить тег body, все остальное), т. е. вставить какой-то фрагмент сверху или сбоку, а все остальное заполнить содержимым , а не вставлять другой фрейм с ним. Rows – т. е. горизонтальное расположение, первый фрейм занимает 340 пикселей, а второй (или содержимое) все оставшиеся место. Rows можно заменить на cols – это горизонтальное расположение. Scrolling – полоса прокрутки, ставив scrolling=”no” мы ее убираем. Но как сделать так: Фрейм Фрейм Фрейм ? Вот код: <frameset rows=”400,*”> <frame src=”http://”> <frame src=”http://”> </frameset> <frameset cols=”380,*”> <frame src=”http://”> </frameset> Вот так. Включайте фантазию, разобраться с этими фреймами не так сложно, как вам кажется. Так же можно присвоить каждому фрейму имя – name=”name”, и сделать на него ссылку (как с id). Кое-что о сайто – строении Чтобы сделать сайт нужен хостинг (место, где его разместить). Можно сделать сервер у себя на компьютере, но это сложно. Ведь вам придется потом регистрировать свое доменное имя (имя сайта). Проще создать сайт на каком-то хостинге, платном или бесплатном. Естественно, лучше – платном. Там у вас больше возможностей, не будет рекламы, и вы не будете боятся лишится его в любой момент. Если это просто домашняя страничка – то нужен бесплатный хостинг, а если серьезный проект – то платный. Найти хостинг не сложно, нужно только набрать запрос в поисковой системе. Вы найдете множество сайтов с хостингами для создания своих сайтов. Размещая фотографии и картинки, и тем более загрузки – не забывайте об авторских правах. У всех сайтов с загрузками есть на это лицензия (можно увидеть внизу страницы), а так же права на размещение каких-либо материалов (например картинок). Если вы все же затеяли серьезный проект, то вам понадобится и html – конструктор. Знание html очень пригодится, скорее всего вам часто придется «капаться» в коде страниц, но с конструктором работа пойдет быстрее. Вручную вы за то же время напишите гораздо меньше, и тем более в хороших конструкторах используются различные скрипты (такие как JavaScript и VBS), пусть, вы может их и не поймете (со временем изучите), но поверьте, работать с конструктором гораздо проще, чем писать все самому. Советы Чаще экспериментируйте, не бойтесь. Так вы со временем научитесь писать достаточно хорошие по оформлению и содержанию веб – страницы. Используйте удобный html – редактор, специально предназначенный для ручного написания страниц. Что я не рассказал… Я не рассказал, как делать карты, ну и еще в принципе не мало чего. Но для начинающих это не очень нужно. Позже я создам другой учебник. Оглавление Введение Основные понятия Урок 1 - основные теги Урок 2 - текст Урок 3 - декоративные элементы Урок4 - ссылки Урок 5 - бегущая строка Урок 6 - таблица Урок 7 - картинки Урок 8 - параграфы и прочее Урок 9 - фреймы Кое-что о сайто-строении Автор: http://www.newrassa.narod.ru