Как написать html-документ

Как написать html-документ

В инструкции я попытаюсь объяснить структуру языка html и научу вас азам языка. А еще немного расскажу про JavaScript и CSS

Инструкция

Уровень сложности: Несложно

Что вам понадобится:

  • Компьютер
  • Программа блокнот или Akel Pad(стандартное приложение Total Comander'а)

1 шаг

Как написать html-документ

HTML
HTML – язык разметки гипертекста. Большинство интернет-страниц написаны на html.

2 шаг

Как написать html-документ
Показаны теги html, head, body. Заметте, что эти теги не соединены.

Структура html
Язык html представляет собой следующее: имеется один “БОЛЬШОЙ” html, он делится на два раздела “поменьше”, на head (шапку документа) и body (тело документа). Соответственно эти два тега могут содержать множество других “маленьких” тегов, а они в свою очередь могут быть наполнены еще одними. НО “пересекаться” эти теги не могут ни в коем случае.

3 шаг

Создаем страницу
Для того, чтобы начать писать, вам нужна программа блокнот или Akel Pad(существуют специальные html редакторы, но лично мне больше по душе обычный редактор). Я вам советую писать в Akel Pad’е, так как в нём больше функций по редактированию текста.

4 шаг

Теги html пишутся в треугольных скобках “<>” если это начальный тег и в треугольных скобках со слешем “</>” конечный тег.
Итак, чтобы дать браузеру понять, что это html документ открываем начальный тег всего документа <html>, в нем мы пишем “шапку” документа <head>. В этом теге прописывается название документа, его favicon и другие теги не относящиеся к “телу”. Чтобы озаглавить текст впишите название между тегами <title> и </title>, расположенные в “шапке”. Далее мы, по окончании работы с “шапкой”, закрываем ее тегом </head>.
Затем открываем тело тегом <body>, в нем пишется тег и текст (тот, что будет показан на готовой странице). По окончании работы с документами закрываем тело тегом </body>, а затем закрываем тег html (</html>)

5 шаг

Пример самого короткого html-документа
<html>
<head>
<title>Пример</title>

</head> <body>

Тело документа

</body> </html>

6 шаг

Пример длинного html-документа
<html>
<head>
<title>Длинный html-документ</title>
<link rel="shortcut icon" href="*ссылка на фавикон"/>
<link rel="stylesheet" href="*ссылка на CSS файл, содержащий стили для текстов*"/>
<style type="text/css"><!-- .style1 {color: #6699ff;} //--></style>

</head> <body> <div align=center> <div class=style1>

<b>Таблица</b><br>

</div> </div> <div align=center> <table border="1"> <tr> <td>

Первый столбец первой строчки

</td> <td>

Второй столбец первой строчки

</td> </tr> <tr> <td>

Первый столбец второй строчки

</td> </tr> </table> </div> </body> </html>

Описание
Итак, тегом <html> мы начинаем весь документ. Затем идет “шапка документа” (<head>), в ней сначала расположен заголовок (<title>Длинный html-документ</title>), затем идет тег фавикона в котором параметр href указывает ссылку на изобравжение. Следующий элемент указывает на .css файл содержащий стили для текстов, эти стили можно прописать в самом документе внедрением в него CSS языка(тег “style”), но я считаю этот способ не удобным, так как если на сайте много страниц и во всех нужно изменить цвет удобнее прописать этот цвет в одном файле чем в каждой странице. Затем мы закрываем шапку(</head>) и открываем тело(<body>) В нем види элемент div, у которого имеется множество параметров, в данном случае это параметр “выравнивание”(align) у которого есть параметры спава(right), слева(left) и по центру(center), затем идет еще лдин div показывающий стиль введенный либо в css файле, либо в самом документе элементом style. Далее мы видим <b>, выделяющий текст жирным, и элемент <br>, делающий спуск “курсора” на одну строчку, дальше два элемента </div>. Затем начинается еще один div, показывающий выравнивание по центру, а в нем начинается таблица(<table>), а элемент border говорит о наличии рамки(рамку можно убрать изменив значение 1 на 0). Следом идет <tr> открывающий первую строчку, затем <td> открывающий первый столбец, затем текст этого столбца, и закрытие столбца тегом </td>. Надеюсь по таблице все понятно, а то рука отваливается писать:) Таблица закрывается тегом </table>. Потом закрывается div, который выравнивал таблицу по центру. Далее закрывается “тело” </body> и html </html>.
-Надеюсь всё понятно??-
Ссылка на то, что получилось

7 шаг

Другие языки
Часто, чтобы улучшить свою страницу в html вставляются другие языки, например JavaScript, CSS и другие.

8 шаг

Полезные ссылки
Книги по html и JavaScript

Обсуждение

968_micro
Рейтинг
  1. +
  2. 1
Partizzanchik2580 (23:34 02.12.2010)

Уверен это для меня ,но я пока в этом ничего не понимаю “+”

101_micro
Рейтинг
  1. +
  2. 3
mamed (00:13 03.12.2010)

наконец то я понял, а то в других сайтах чуш всякую пишут, спасибо автору:)), поставил бы +, но не хватает балов((

Avatar_micro
Рейтинг
  1. +
  2. 1
Yolee (11:50 03.12.2010)

нормально)хотя это только для начинающих,но все таки хорошо))можешь для примера написать длинный документ?

598_micro
Рейтинг
  1. +
  2. 1
egos (12:47 03.12.2010)

О Господи… неужели ты начал писать Нормальные инструкции?) естесственно +, правда словесный)
З.Ы. кинь исходник, и длинный документ напиши тут. а исходник в личку!

540_micro
Рейтинг
  1. +
  2. 1
KARYCH (14:42 03.12.2010)

Ну вот, как и просили!!!! Написал длинный документ:)

Avatar_micro
Рейтинг
  1. +
  2. 1
Schcrack (18:03 03.12.2010)

Смотря зачем нужны написанные в html страницы… Большинству, я думаю отлично подойдут т.н. “визуальные редакторы html”. На нулевом уровне можно создать неплохую страничку или даже сайт, ну а с небольшими с знаниями html, css и JavaScript тем более.

Avatar_micro
Рейтинг
  1. +
  2. 2
MeghaNik (21:01 03.12.2010)

просто о простейшем)

596_micro
Рейтинг
  1. +
  2. -1
tifozy (22:30 03.12.2010)
Комментарий скрыт. Показать
961_micro
Рейтинг
  1. +
  2. 2
TuROK23 (01:48 04.12.2010)

<b>Я тож в HTML мало понимаю))) на майкрософтском сайте видеоуроки есть там проще понимается эта инфа))</b>
<i>А так <b>+</b></i>

Avatar_micro
Рейтинг
  1. +
  2. 2
TitanQuesT (20:48 06.12.2010)

молодца автор, спасибо тебе!

480_micro
Рейтинг
  1. +
  2. 1
shapa91 (04:07 10.12.2010)

Интересно, Спасибо.

064_micro
Рейтинг
  1. +
  2. 0
Smoke (23:04 22.12.2010)

Давно хотел узнать, СПС +

949_micro
Рейтинг
  1. +
  2. 0
agronom (20:56 08.01.2011)

Не останавливайтесь на достигнутом, юноша! :)

827_micro
Рейтинг
  1. +
  2. 0
fenix05 (01:17 16.01.2011)

А еще немного расскажу про JavaScript и CSS

А сам не рассказал :(
В основном нормально.

540_micro
Рейтинг
  1. +
  2. 0
KARYCH (04:41 09.02.2011)

fenix05
ну просто реактор сказал дописать вступление, вот я ничего кроме этого и не придумал:) а вообще там упоминается про их использование:)

Avatar_micro
Рейтинг
  1. +
  2. -1
Kolyan2010 (21:45 19.05.2011)
Комментарий скрыт. Показать
299_micro
Рейтинг
  1. +
  2. 0
Antoha-Kartoha (15:05 02.07.2011)

+

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 10
17
5557