[ [ Новые сообщения ] · [ Поиск ] · [ RSS ] [ Вы не выполнили Вход ]]
  • Страница 1 из 1
  • 1
Модератор форума: dickinson  
для начинающего Web мастера
smile_61Дата: Воскресенье, 24.01.2010, 18:00 | Сообщение # 1
Управляющий
Группа: Проверенные
Сообщений: 4157
Награды: 22
Репутация: 61
Статус:
В этой теме я постараюсь объяснить начинающим Web мастерам основные понятия html на которые в последствии можно будет опереться при создании простейшего сайта.

HTML(от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
HTML — это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.

Для начала на диске создаем папку, к примеру:

Цитата
C:\мой сайт


Затем открываем блокнот – notepad (ПУСК – Все программы – Стандартные – блокнот) и сохраняем его в созданной ранее папке, присвоив ему имя index.html
Должно получиться так:

Цитата
C:\мой сайт\index.html




p.s. Заостряю внимание, что сохранять нужно следующим образом: ФАЙЛ > Сохранить как... Иначе Вы получите обычный текстовый документ с расширением *.txt
 
smile_61Дата: Воскресенье, 24.01.2010, 20:38 | Сообщение # 2
Управляющий
Группа: Проверенные
Сообщений: 4157
Награды: 22
Репутация: 61
Статус:
В последствии Вы сможете этот файл index.html открывать для редактирования через блокнот, нажимая на него правой мышью и выбирая в контекстном меню: Открыть с помощью > Блокнот

 
smile_61Дата: Воскресенье, 24.01.2010, 21:22 | Сообщение # 3
Управляющий
Группа: Проверенные
Сообщений: 4157
Награды: 22
Репутация: 61
Статус:
Любой html документ должен иметь следующую структуру:

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>главная страница</title>
</head>
<body>
<p>Добро пожаловать на мой сайт! </p>
</body>
</html>

Если скопировать всё содержимое в документ index.html и сохранить, то получиться следующее... (откроется в новой вкладке)

p.s. Вникать, что прописано в самой первой строке нет смысла, она указывает версию стандарта, которому соответствует документ. Между тегами <head> и <title> указана кодировка документа, её так же запоминать не обязательно, просто копируйте.

 
smile_61Дата: Воскресенье, 24.01.2010, 22:05 | Сообщение # 4
Управляющий
Группа: Проверенные
Сообщений: 4157
Награды: 22
Репутация: 61
Статус:
так же между тегами <head> и <title> часто указывают:

Code
<meta name="keywords" content="создавать, сайт, html">
<meta name="description" content=" моё первое создание сайта">

В первом теге прописывают ключевые слова, которые не малую роль играют при продвижении сайта, во втором описание сайта.

Code
<head> </head>
- голова документа
Code
<body> </body>
- тело документа

Все теги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title>- заголовок. Если открыть браузер с нашим документом и посмотреть на заголовок окна, то увидите название страницы.

Все теги, расположенные между <body> </body> - непосредственное содержание документа или как ещё принято называть контент документа. Далее речь пойдет именно об этих тегах.
Обращаю Ваше внимание, к следующему виду:

Code
<тег1>[blink]<тег2>[/blink]<тег3> ... </тег3>[blink]</тег2>[/blink]</тег1>

Только такая очередность закрывающих тегов верна: тег, который был открыт первым – следует закрыть его последним, второй – предпоследним и т.д.

 
smile_61Дата: Понедельник, 25.01.2010, 18:19 | Сообщение # 5
Управляющий
Группа: Проверенные
Сообщений: 4157
Награды: 22
Репутация: 61
Статус:
Работа с текстом

Для выделения текста определённым цветом, используем следующие теги:

Code
<font [blink]color[/blink]=" #4ABF2E"> Определение цвета текста.</font>

[blink]Color[/blink] – это параметр (атрибут) для тега font, он отвечает, в данном случае, за цвет текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тегу, он может быть присвоен и другим тегам.
Для изменения значений цветов атрибута color меняем код, стоящий после знака решетка «#». К примеру, вместо #4ABF2E прописываем #FF0033. В результате получим красный цвет. Обратите внимание, что значению цвета обязательно должен предшествовать знак «#».
Коды цветов запоминать не обязательно, существует множество программ, определяющих цвет точки. Я могу посоветовать HTMLColors2000, очень проста в обращении, к тому же не требует установки.

Пример кода:

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">    
<title>как определить цвет текста</title>    
</head>    
<body>    
<p>Добро пожаловать на мой сайт! </p>    
[color=green]<br><br>[/color]
<font color="[blink]#4ABF2E[/blink]">1. Определение цвета текста.</font>

</body>    
</html>

Для переноса строки используем тег <br>. В противном случае весь текст будет написан в одну строку.

Посмотреть как это всё выглядит. (откроется в новой вкладке)

Тег <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и его вид.

Цвет можно задавать как отдельному участку текста, так и всему через тег <body>. К примеру:

Code
<body text="#336699">

Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font>. Если цвет текста в <body> не задавать, то по умолчанию он будет черным.

 
  • Страница 1 из 1
  • 1
Поиск: