Можно сделать такой список: Значение 1 Значение 2 Значение 3 Или: Значение 1 Значение 2 Значение 3 Или: Значение 1 Значение 2 Значение 3 Вот теги: &ltli type”circle”&gt Значение &lt/li&gt &ltli type”disk”&gt Значение &lt/li

Html для чайников
Введение
Html – это тип веб – страниц. Есть mhtml, xml, xhtml и т.д., но мы говорим о html. Чтобы начать писать свои веб – страницы нужно просто открыть текстовый редактор (блокнот), и написать код. Затем поменять расширение (то, что после точки, например mytext.txt) на html. Либо можно писать код прямо в текстовом поле на вашем сайте (если оно есть, на [ Cкачайте файл, чтобы посмотреть ссылку ] оно есть). Т. е. главное – создать документ с расширением html, который понимает браузер. Так же можно использовать специальные html – редакторы, которые могут быть гораздо удобнее.
Основные понятия
Html страницы (и другие) пишут с помощью специальных тегов, которые задают какие-либо параметры, например цвет текста, размер текста, цвет фона, фоновый рисунок и т.д.. Некоторые теги нужно завершать (об этом вы узнаете дальше), чтобы, например, не весь текст был одного цвета или размера.
Урок 1 – основные теги
У страницы есть начало. Это начало, и в общем-то дающее понять что это именно веб страница, тег , который пишут в самом начале страницы. За ним следует тег , этот тег обозначает служебную информацию. Это, например, может быть имя конструктора веб – страниц, с помощью которого была создана эта веб – страница (текст пишут после тега). За тегом head следует тег который закрывается после текста , за ним так же закрывается тег . Title – это название страницы, которое отображается в окне браузера. Потом задают параметры . Body – тело, т. е. тело веб – страницы, необходимый тег. Text – цвет текста на странице, bgcolor – цвет фона, background – фоновый рисунок. В кавычках указывают путь к графическому файлу. Он может замостить страницу, т. е. он отображается не во весь размер страницы, а заполняет ее, по этому стоит использовать большие фоновые рисунки.
Покажу пример:


Моя страница


Это моя первая страница. Я написал ее в текстовом редакторе. Я все сделал сам, все как написано в учебнике. И у меня неплохо получилось. Мне нравится, я буду создавать веб-страницы и дальше.



А выглядеть это будет так:
Это моя первая страница. Я написал ее в текстовом редакторе. Я все сделал сам, все как написано в учебнике. И у меня неплохо получилось. Мне нравится, я буду создавать веб-страницы и дальше.


Думаю с этим вам все ясно. Заметьте, тег имеет завершение в конце страницы. В принципе теги и можно и не завершать, но мы будем делать все правильно.
Урок 2 – текст
Для текста тоже есть множество тегов. Например тег

, он задает размер текста, числовое значение начиная от 1 и по возрастанию. Чем больше значение, тем мельче текст. Этот тег имеет завершение

, и в завершающем теге не путайте число, оно должно быть тем же, что и в начальном неге. Но при использовании этого тега происходит принудительная табуляция (перенос строки). Это может быть неудобно, вдруг вам надо выделить в тексте одно слово. Для этого предусмотрели тег , у которого может быть числовое значение со знаком + или -, + - чем больше число, тем больше текст, - - чем больше число, тем мельче текст. Так же можно задать цвет текста и шрифт тегами ; , далее текст, а после него завершение тегов , и заметьте – один раз, а не два или три. Так можно выделить абзац, или одно слово. Как вам захочется.
Пример:
Текст текст текст текст текст текст текст


Текст текст текст текст текст текст текст

Или:


Я люблю писать веб – страницы. Мне это нравится. Я напишу их очень-очень много. И еще я очень люблю писать всякие разные статьи, на разные темы.



Я люблю писать веб – страницы. Мне это нравится. Я напишу их очень-очень много. И еще я очень люблю писать всякие разные статьи, на разные темы.


Теперь как же нам сделать жирный текст или курсив? Для этого тоже есть специальные теги.
курсив
жирный
подчеркнутый
зачеркнутый
надстрочный
подстрочный

Но не нужно забывать про перенос строки, который тоже нужно прописывать. Тег -
, так же таб (отступ) -
    текст
, но можно поставить пробелы   - их не надо прописывать, только когда нужно много.
Но вернемся к цветам. В кавычках указан код цвета. Вот некоторые цвета:
#FFFFFF -


#000000 –


#00FF40 –


#008000 –


#FF0000 –


#0000FF –


#408080 –


#8080FF –


#FFCC00 –


#004080 –




Пока хватит.
Урок 3 – декоративные элементы
Какие же это декоративные элементы? Это в первую очередь линия. Ее тег не требует завершения.
- это простая линия, горизонтальная, на всю ширину. Но можно задать ее параметры.
теперь объяснения:
Color – как вы поняли, это цвет линии, но может отображаться не во всех браузерах.
Align – расположение, которое по умолчанию будет центром страницы. Оно может иметь значение left, right, center (слева, справа, по центру). Размеры в пикселях (точки экрана).
Width – ширина линии (по горизонтали).
Size – толщина (по вертикали).
Таким образом, можно задать size, например, 100, а width – 1, и получится вертикальная линия.
Можно сделать такой список:
Значение 1
Значение 2
Значение 3
Или:
Значение 1
Значение 2
Значение 3
Или:
Значение 1
Значение 2
Значение 3
Вот теги:

  • Значение


  • Значение


  • Значение


  • Но это может отображаться не во всех браузерах. Цвет кружочков (или квадратиков) такой же, как и цвет текста.
    Урок 4 – ссылки
    Ну какая - же веб – страница без ссылок. Вот как их сделать:
    Название

    Но как указать цвет ссылки? Прописываем в начальном теге body (если забыли, 13 REF урок1 \h 1513 LINK \l "урок1" 14урок 115). В кавычках после href= адрес ссылки. Tardet=”new folder” – страница открывается в новом окне (или вкладке). Target=”_top” – страница откроется в полный экран.


    Link – цвет ссылки, vlink – цвет посещенной ссылки, alink – цвет активной (в момент загрузки) ссылки.
    Чтобы сделать ссылку жирной, или курсивом, используем теги как для обычного текста, но ставим их перед тегом ссылки, и не забываем завершать (после закрывающего тега ссылки). Так же можно использовать список (13 LINK \l "урок3" 14урок 315).
    А как сделать ссылку на какое-то место страницы? Для этого нужно присвоить любому тегу (например,

    или

    Текст



    А ссылка тогда будет такая:
    Заголовок

    Не делайте название в id и в ссылке разными размерами букв (например в id ТАК и в ссылке так), иначе ссылка не будет работать.
    Урок 5 – бегущая строка
    Хотите сделать бегущую строку? Пожалуйста!
    текст бегущей строки

    Width – как вы поняли, ширина, а height – высота. Bgcolor – цвет фона, scrollamount – скорость прокрутки, которая может быть от 1 до 10 (1 – самая медленная, 10 – самая быстрая), loop – количество раз, которые строка «пробежит». Этот параметр можно не задавать, тогда строка будет прокручиваться постоянно. Direction – это в какую сторону строка будет двигатся, значения могут быть: left (влево), right (вправо), up (вверх), down (вниз). В бегущую строку можно помещать ссылки, применять все теги для текста (как и везде).
    Урок 6 – таблица
    Таблица нужна не только для разных документов, но и для красивого оформления, кнопок, и удобства (например, если нужно разместить какие-либо элементы в определенных местах страницы). У таблицы есть горизонтальные строки (тег ), и вертикальные столбцы (тег ).
    Примем кода:









    1x1

    1x2

    2x2


    Cellspacing – расстояние между ячейками (можно не задавать), border – толщина границ, bordercolor – цвет границ.
    Colspan – на сколько ячейка простирается столбцов. Этот параметр можно заменить на rowspan, это ряды.
    Вот как выглядит таблица:
    1х1
    1х1

    2х2

    Так же тегу td можно задать параметр vilign=”top” – расположение текста, значения: top – сверху, middle – посередине, bottom – внизу. Так же можно задать параметр backgroung=”http://” - фоновый рисунок.
    Таблица с rowspan вместо colspan:









    1x1

    2х1

    2x2



    1х1
    2х2

    2х1


    Если вы не заметили, в примерах расстояние между ячейками вообще отсутствует. В Word его нельзя задать. Ширина и высота первой ячейки так же не соблюдены, как и толщина границы.
    Урок 7 – картинки
    Без картинок тоже не обойтись. Вот код с последующим объяснением:
    ”image”

    Align – сначала расположение, а потом с какой стороны обтекает текст – middle (сбоку), top (сверху), bottom (снизу). Hspace – отступ текста по горизонтали, vspace – вертикали. Border – рамка. Alt – описание, которое будет показано если в браузере отключена графика. Src= - в кавычках ссылка на изображение. Если не задавать width и height (ширина и высота), то они будут равны размерам картинки. Так. А если нужно прервать обтекание? Не кучу же
    ставить есть у него параметр clear=”all” – значения: all – прервать обтекание текстом, lift – тоже самое, только текст продолжается по левому краю, right – по правому краю (пример:
    ).
    Теперь картинка-ссылка:


    Для картинки действуют все вышеприведенные параметры. Но тут будет рамка. Нужно указать border=”0”.
    Урок 8 – параграфы и прочее
    Параграфы нужны для того, чтобы разместить их содержимое (текст, таблицы и т.д.) по какому-нибудь краю (слева, справа, или по центру).


    Содержимое


    У параметра align могут быть значения left, center, right (слева, по центру, справа). Так же есть значение justify – содержимое распределяется по всей ширине, и длине (с переносами), его обычно применяют для текста.
    Есть альтернатива – тег
    , который после завершается
    , иногда это проще, чем параграф, и удобнее.
    Урок 9 – фреймы
    Фреймы – это вставки страниц (или картинок) на страницу, т. е. когда страница состоит из нескольких «слепленных».






    Фреймы вставляются после тега head (13 LINK \l "урок1" 14урок 115, если забыли), и тут тег body не нужен, сразу ставим после , но можно этого не делать – можно продолжить (поставить тег body, все остальное), т. е. вставить какой-то фрагмент сверху или сбоку, а все остальное заполнить содержимым , а не вставлять другой фрейм с ним.
    Rows – т. е. горизонтальное расположение, первый фрейм занимает 340 пикселей, а второй (или содержимое) все оставшиеся место. Rows можно заменить на cols – это горизонтальное расположение. Scrolling – полоса прокрутки, ставив scrolling=”no” мы ее убираем.
    Но как сделать так:

    Фрейм
    Фрейм

    Фрейм





    ? Вот код:








    Вот так. Включайте фантазию, разобраться с этими фреймами не так сложно, как вам кажется. Так же можно присвоить каждому фрейму имя – name=”name”, и сделать на него ссылку (как с id).
    Кое-что о сайто – строении
    Чтобы сделать сайт нужен хостинг (место, где его разместить). Можно сделать сервер у себя на компьютере, но это сложно. Ведь вам придется потом регистрировать свое доменное имя (имя сайта). Проще создать сайт на каком-то хостинге, платном или бесплатном. Естественно, лучше – платном. Там у вас больше возможностей, не будет рекламы, и вы не будете боятся лишится его в любой момент. Если это просто домашняя страничка – то нужен бесплатный хостинг, а если серьезный проект – то платный.
    Найти хостинг не сложно, нужно только набрать запрос в поисковой системе. Вы найдете множество сайтов с хостингами для создания своих сайтов.
    Размещая фотографии и картинки, и тем более загрузки – не забывайте об авторских правах. У всех сайтов с загрузками есть на это лицензия (можно увидеть внизу страницы), а так же права на размещение каких-либо материалов (например картинок).
    Если вы все же затеяли серьезный проект, то вам понадобится и html – конструктор. Знание html очень пригодится, скорее всего вам часто придется «капаться» в коде страниц, но с конструктором работа пойдет быстрее. Вручную вы за то же время напишите гораздо меньше, и тем более в хороших конструкторах используются различные скрипты (такие как JavaScript и VBS), пусть, вы может их и не поймете (со временем изучите), но поверьте, работать с конструктором гораздо проще, чем писать все самому.
    Советы
    Чаще экспериментируйте, не бойтесь. Так вы со временем научитесь писать достаточно хорошие по оформлению и содержанию веб – страницы. Используйте удобный html – редактор, специально предназначенный для ручного написания страниц.
    Что я не рассказал
    Я не рассказал, как делать карты, ну и еще в принципе не мало чего. Но для начинающих это не очень нужно. Позже я создам другой учебник.
    Оглавление
    13 LINK \l "введение" 14Введение15
    13 LINK \l "основныепонятия" 14Основные понятия15
    13 LINK \l "урок1" 14Урок 1 - основные теги15
    13 LINK \l "урок2" 14Урок 2 - текст15
    13 LINK \l "урок3" 14Урок 3 - декоративные элементы15
    13 LINK \l "урок4" 14Урок4 - ссылки15
    13 LINK \l "урок5" 14Урок 5 - бегущая строка15
    13 LINK \l "урок6" 14Урок 6 - таблица15
    13 LINK \l "урок7" 14Урок 7 - картинки15
    13 LINK \l "урок8" 14Урок 8 - параграфы и прочее15
    13 LINK \l "урок9" 14Урок 9 - фреймы15
    13 LINK \l "осайтостроениии" 14Кое-что о сайто-строении15




    Автор: [ Cкачайте файл, чтобы посмотреть ссылку ]

    

    

    

    



    15


    Приложенные файлы

    • doc 7048081
      Размер файла: 96 kB Загрузок: 0

    Добавить комментарий