Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
Страница 1 из 1
Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
автор ????? Вт Янв 08, 2013 3:10 pm
Как создать свой интернет-сайт с нуля
Начнем с небольшого экскурса в историю.
Формат HTML (Hyper-text Markup Language) возник на заре Интернета и предусматривал довольно простое форматирование текста и изображений на странице.
Публикуемая web-страница содержит текст и картинки, сформатированные так называемыми тегами - командами, взятыми в угловые скобки.
С усовершенствованием формата (вышло несколько версий) он усложнился но также стал различаться между разными броузерами (программами для просмотра Интернет-страниц), каждый из которых стремился ввести свои теги и скрипты.
В настоящее время рекомендуется пользоваться HTML версий 4 и 5 с форматированием CSS.
В страницы можно включать интерактивные элементы (JavaScript).
Создать интернет-страницу достаточно просто.
Основной тег, открывающий документ <html>
Все теги HTML делятся на открывающие и закрывающие - начало и конец блока.
Документ оканчивается тегом </html>. Обратная косая черта закрывает блок.
Далее, документ делится на шапку <head> и тело <body>. В шапке документа указывается титул документа <title>, вспомогательные теги, указывающие кодировку страницы (каким набором кодов кодируется алфавит), другая справочная информация
В теле документа можно размещать заголовки и сформатированный текст, вставлять таблицы и картинки.
Начнем с небольшого экскурса в историю.
Формат HTML (Hyper-text Markup Language) возник на заре Интернета и предусматривал довольно простое форматирование текста и изображений на странице.
Публикуемая web-страница содержит текст и картинки, сформатированные так называемыми тегами - командами, взятыми в угловые скобки.
С усовершенствованием формата (вышло несколько версий) он усложнился но также стал различаться между разными броузерами (программами для просмотра Интернет-страниц), каждый из которых стремился ввести свои теги и скрипты.
В настоящее время рекомендуется пользоваться HTML версий 4 и 5 с форматированием CSS.
В страницы можно включать интерактивные элементы (JavaScript).
Создать интернет-страницу достаточно просто.
Основной тег, открывающий документ <html>
Все теги HTML делятся на открывающие и закрывающие - начало и конец блока.
Документ оканчивается тегом </html>. Обратная косая черта закрывает блок.
Далее, документ делится на шапку <head> и тело <body>. В шапке документа указывается титул документа <title>, вспомогательные теги, указывающие кодировку страницы (каким набором кодов кодируется алфавит), другая справочная информация
В теле документа можно размещать заголовки и сформатированный текст, вставлять таблицы и картинки.
Последний раз редактировалось: Algebroid (Чт Янв 10, 2013 11:14 am), всего редактировалось 2 раз(а)
?????- Гость
Как создается страница HTML
автор Admin Ср Янв 09, 2013 4:19 am
Давай по порядку и обстоятельно - где, как в какой программе создается эта самая страница HTML?
Как пишется этот самый код?
Как опубликовать эту самую страницу в Сети?
Очень неплохо было бы узнать наглядно - как его написать?
То есть, прямо по порядку от написания тега
Как пишется этот самый код?
Как опубликовать эту самую страницу в Сети?
Очень неплохо было бы узнать наглядно - как его написать?
То есть, прямо по порядку от написания тега
- Код:
<html></html>
Admin- Admin
- Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21 -
Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
автор ????? Ср Янв 09, 2013 5:19 pm
Текст html можно набрать даже в текстовом редакторе.
Но лучше использовать редактор с подстветкой кода.
Я рекомендую скачать Notepad++, MonoDevelop или VisualStudio Express.
Как писать - надо форматировать страницу тегами и поместить внутри текст, картинки и ссылки
Рекомендую погуглить "HTML для чайников"
Чтобы опубликовать страницу в сети, надо разместить её на интернет-сервере. Это называется хостинг.
Хостинг бывает платный и бесплатный. Из бесплатного рекомендую narod.ru.
Кстати, там есть встроенный конструктор сайтов - даже не знающий HTML может создать простой сайт с помощью конструктора. Но для того, чтобы создать что-то неповторимое, надо самому создать макет в HTML.
Надо создать аккаунт - учётную запись на сервере и загрузить файлы на сервер через интерфейс хостинг-провайдера или по протоколу FTP (file transfer protocol). рекомендую фтп-клиент FileZilla.
---
Ещё по созданию страницы.
Пример простой страницы:
О тегах html, head, body я уже писал.
Тег <h1></h1> c закрывающим тегом - тег заголовка.
Всего в HTML предусмотрено шесть размеров заголовка - от <h1> до <h6>.
Создайте свою первую страницу по образцу и начинайте планировать её разбивку и наполнение.
Рекомендуемые tutorial - самоучители HTML:
http://www.postroika.ru/html/
http://html-40.narod.ru/
Вот хороший справочник по HTML - все теги и их атрибуты: (на английском языке)
http://www.w3schools.com/tags/default.asp
если возникнут вопросы буду отвечать по каждому конкретному тегу (форматирующему элементу)
Но лучше использовать редактор с подстветкой кода.
Я рекомендую скачать Notepad++, MonoDevelop или VisualStudio Express.
Как писать - надо форматировать страницу тегами и поместить внутри текст, картинки и ссылки
Рекомендую погуглить "HTML для чайников"
Чтобы опубликовать страницу в сети, надо разместить её на интернет-сервере. Это называется хостинг.
Хостинг бывает платный и бесплатный. Из бесплатного рекомендую narod.ru.
Кстати, там есть встроенный конструктор сайтов - даже не знающий HTML может создать простой сайт с помощью конструктора. Но для того, чтобы создать что-то неповторимое, надо самому создать макет в HTML.
Надо создать аккаунт - учётную запись на сервере и загрузить файлы на сервер через интерфейс хостинг-провайдера или по протоколу FTP (file transfer protocol). рекомендую фтп-клиент FileZilla.
---
Ещё по созданию страницы.
Пример простой страницы:
- Код:
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Это моя первая страница</h1>
какой-то текст
</body>
</html>
О тегах html, head, body я уже писал.
Тег <h1></h1> c закрывающим тегом - тег заголовка.
Всего в HTML предусмотрено шесть размеров заголовка - от <h1> до <h6>.
Создайте свою первую страницу по образцу и начинайте планировать её разбивку и наполнение.
Рекомендуемые tutorial - самоучители HTML:
http://www.postroika.ru/html/
http://html-40.narod.ru/
Вот хороший справочник по HTML - все теги и их атрибуты: (на английском языке)
http://www.w3schools.com/tags/default.asp
если возникнут вопросы буду отвечать по каждому конкретному тегу (форматирующему элементу)
Последний раз редактировалось: Algebroid (Пт Янв 11, 2013 4:54 pm), всего редактировалось 5 раз(а)
?????- Гость
Как вставить ссылку на другую интернет-страницу.
автор ????? Чт Янв 10, 2013 10:36 am
Следующий урок.
Как вставить ссылку на другую интернет-страницу.
Для этого предназначен тег <a>
Он вставляется в тело документа или внутри таблицы.
В атрибуте тега href указывается адрес на страницу.
Между открывающим и закрывающим тегами - высвечиваемая надпись для ссылки.
Чтобы сделать ссылку на электронную почту (email), чтобы при клике по ссылке открывался почтовый клиент, её надо предварить префиксом mailto: с двоеточием
Как вставить картинку.
Для этого предназначен тег <img>
Вставляется в теле документа или внутри таблицы.
В атрибуте тега src указываем локальный путь - ссылку на файл с картинкой
Это может быть файл в форматах gif, jpg, png
В атрибуте alt устанавливаем подсказку - она высвечивается когда картинка не загружена или при наведении курсора на картинку.
width - ширина высвечиваемой картинки, height - высота
Итак, наш файл со ссылками и картинками:
Как вставить ссылку на другую интернет-страницу.
Для этого предназначен тег <a>
Он вставляется в тело документа или внутри таблицы.
- Код:
<a href="foto.html">Ссылка на страницу с фотографиями</a>
<a href="http://google.com">Ссылка на поисковик</a>
<a href="mailto:mybox@gmail.com">Ссылка - выслать мне email</a>
В атрибуте тега href указывается адрес на страницу.
Между открывающим и закрывающим тегами - высвечиваемая надпись для ссылки.
Чтобы сделать ссылку на электронную почту (email), чтобы при клике по ссылке открывался почтовый клиент, её надо предварить префиксом mailto: с двоеточием
Как вставить картинку.
Для этого предназначен тег <img>
Вставляется в теле документа или внутри таблицы.
- Код:
<img src="img/foto.png" alt="Подсказка к картинке" width="100" height="100"/>
В атрибуте тега src указываем локальный путь - ссылку на файл с картинкой
Это может быть файл в форматах gif, jpg, png
В атрибуте alt устанавливаем подсказку - она высвечивается когда картинка не загружена или при наведении курсора на картинку.
width - ширина высвечиваемой картинки, height - высота
Итак, наш файл со ссылками и картинками:
- Код:
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Это моя первая страница</h1>
какой-то текст
<h1>Картинки</h1>
<img src="img/foto.png" alt="Moя фотография в 2012 году" width="100" height="100"/>
<h1>Ссылки</h1>
<a href="foto.html">Ссылка на страницу с фотографиями</a>
<a href="http://google.com">Ссылка на поисковик</a>
<a href="mailto:mybox@gmail.com">Ссылка - выслать мне email</a>
</body>
</html>
Последний раз редактировалось: Algebroid (Чт Янв 10, 2013 11:23 am), всего редактировалось 3 раз(а)
?????- Гость
Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
автор Admin Чт Янв 10, 2013 10:45 am
О! Я смотрю, у нас тут не просто так... Плюс!!! Только... В какой таблице? Вот у меня на рабочем столе есть фотография, которую я хочу опубликовать.
Что мне с ней делать, чтобы когда я положу её на сервак, при наведении на неё курсора я видел подпись к фотографии? (Если можно - пошагово)
Что мне с ней делать, чтобы когда я положу её на сервак, при наведении на неё курсора я видел подпись к фотографии? (Если можно - пошагово)
Admin- Admin
- Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21 -
Как вставить картинку/опубликовать фотографию:
автор ????? Чт Янв 10, 2013 11:10 am
Как вставить картинку/опубликовать фотографию:
Закидываем фотографию в ту же папку, что и файл html (у нас пока что есть главный файл - index.html)
Корневой файл нашего сайта должен называться index.html или index.htm на серверах Microsoft
Или создаём отдельную папку для фотографий - назовём её img - в корне нашего сайта.
Копируем в эту папку нашу фотографию - пусть она называется foto.jpg
Добавляем в тело документа тег <img> со ссылкой на фотографию.
Об этом уже было в теме.
---
Как вставить таблицу - в следующих уроках.
Закидываем фотографию в ту же папку, что и файл html (у нас пока что есть главный файл - index.html)
Корневой файл нашего сайта должен называться index.html или index.htm на серверах Microsoft
Или создаём отдельную папку для фотографий - назовём её img - в корне нашего сайта.
Копируем в эту папку нашу фотографию - пусть она называется foto.jpg
Добавляем в тело документа тег <img> со ссылкой на фотографию.
- Код:
<img src="img/foto.png" alt="Подсказка к картинке" width="100" height="100"/>
Об этом уже было в теме.
---
Как вставить таблицу - в следующих уроках.
?????- Гость
Как вставить таблицу
автор ????? Чт Янв 10, 2013 12:28 pm
Как вставить таблицу
Разберём пример кода.
Код вставляем в тело документа в нужном месте - в один документ можно вставлять несколько таблиц а также вложенные таблицы - таблицу в ячейку другой таблицы
Тег <table> - и соотвествующий закрывающий тег определяют таблицу.
Рассмотрим атрибуты тега:
width - ширина таблицы
border - толщина обрамления-границы
cellpadding - внутреннее расстояние от границы ячейки до содержимого ячейки
cellspacing - расстояние между ячейками
bgcolor - от англ. background color - цвет фона
Теги <thead> и <tr> (table header и table row) определяют ряды таблицы. thead - ряд заголовка, tr - остальные ряды. Ряд заголовка необязателен, может отсутствовать.
Тег <td> определяет ячейку. ячейки должны располагаться в ряд.
Атрибут width тега <td> определяет ширину ячейки. Ячейки разных рядов, расположенные одна под другой, должны иметь одинаковую ширину.
Ячейки можно объединять, но об этом - далее.
Разберём пример кода.
Код вставляем в тело документа в нужном месте - в один документ можно вставлять несколько таблиц а также вложенные таблицы - таблицу в ячейку другой таблицы
- Код:
<table width="300" cellpadding="1" cellspacing="1" border="1" bgcolor="lime">
<thead>
<td width="100">Заголовок таблицы 1</td>
<td width="100">Заголовок таблицы 2</td>
<td width="100">Заголовок таблицы 3</td>
</thead>
<tr>
<td width="100">Ячейка</td>
<td width="100">Ячейка</td>
<td width="100">Ячейка</td>
</tr>
<tr>
<td width="100">Ячейка</td>
<td width="100">Ячейка</td>
<td width="100">Ячейка</td>
</tr>
</table>
Тег <table> - и соотвествующий закрывающий тег определяют таблицу.
Рассмотрим атрибуты тега:
width - ширина таблицы
border - толщина обрамления-границы
cellpadding - внутреннее расстояние от границы ячейки до содержимого ячейки
cellspacing - расстояние между ячейками
bgcolor - от англ. background color - цвет фона
Теги <thead> и <tr> (table header и table row) определяют ряды таблицы. thead - ряд заголовка, tr - остальные ряды. Ряд заголовка необязателен, может отсутствовать.
Тег <td> определяет ячейку. ячейки должны располагаться в ряд.
Атрибут width тега <td> определяет ширину ячейки. Ячейки разных рядов, расположенные одна под другой, должны иметь одинаковую ширину.
Ячейки можно объединять, но об этом - далее.
?????- Гость
Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
автор ????? Чт Янв 10, 2013 2:58 pm
Домашнее задание
Спланировать интернет-сайт - личную страницу.
Построить сайт на вложенных таблицах.
Для объединения ячеек использовать атрибуты colspan и rowspan тега td:
Атрибут colspan говорит, сколько колонок объединять, rowspan - сколько рядов.
соответсвующие ячейки справа и ниже объединённых отсутствуют.
Например:
Задание:
Распланировать страницу как на рисунке:
Спланировать интернет-сайт - личную страницу.
Построить сайт на вложенных таблицах.
Для объединения ячеек использовать атрибуты colspan и rowspan тега td:
- Код:
<td colspan="1" rowspan="2">
Атрибут colspan говорит, сколько колонок объединять, rowspan - сколько рядов.
соответсвующие ячейки справа и ниже объединённых отсутствуют.
Например:
- Код:
<table width="800" cellpadding="0" cellspacing="0" border="0" bgcolor="white">
<tr>
<td rowspan="2" width="150"> </td>
<td width="650"> </td>
</tr>
<tr>
<!--это комментарий - соотвествующая объединённой ячейка отсутствует-->
<td width="650"> </td>
</tr>
</table>
Задание:
Распланировать страницу как на рисунке:
?????- Гость
Работа с цветом в HTML
автор ????? Пт Янв 11, 2013 10:58 am
Работа с цветом в HTML
во многих тегах встречаются атрибуты bgcolor (background color - цвет фона) и color - цвет
цвет записывается в шестнадцатиричном формате, начиная со знака #
например #000000 - 0, 0, 0- чёрный или black
#7F7F7F - 127, 127, 127 - серый
каждый цвет получается комбинацией трёх основных цветов - красного, зелёного и синего
00 - чёрный, FF - 255 - насыщенный цвет
первые два знака - компонента цвета red - красный
вторые два знака - компонента цвета green - зелёный
третьи два знака - компонента цвета blue - синий
что такое шестнадцатиричный формат (hexadecimal format)
это система счисления, похожая на десятичную, но с основанием 16
знаки от 0 до 9 кодируются обычными цифрами, 10 - А, 11 - B, 12 - C, 13 - D, 14 - E, 15 - F
или используем число от 0 до 255 0=0, 255=FF
для перевода чисел из десятичной системы в шестнадцатиричную используем калькулятор виндоус
включаем его в формате dec (decimal, десятичный), вводим число от 0 до 255 м переводим в формат hex (шестнадцатиричный).
во многих тегах встречаются атрибуты bgcolor (background color - цвет фона) и color - цвет
цвет записывается в шестнадцатиричном формате, начиная со знака #
например #000000 - 0, 0, 0- чёрный или black
#7F7F7F - 127, 127, 127 - серый
каждый цвет получается комбинацией трёх основных цветов - красного, зелёного и синего
00 - чёрный, FF - 255 - насыщенный цвет
первые два знака - компонента цвета red - красный
вторые два знака - компонента цвета green - зелёный
третьи два знака - компонента цвета blue - синий
что такое шестнадцатиричный формат (hexadecimal format)
это система счисления, похожая на десятичную, но с основанием 16
знаки от 0 до 9 кодируются обычными цифрами, 10 - А, 11 - B, 12 - C, 13 - D, 14 - E, 15 - F
или используем число от 0 до 255 0=0, 255=FF
для перевода чисел из десятичной системы в шестнадцатиричную используем калькулятор виндоус
включаем его в формате dec (decimal, десятичный), вводим число от 0 до 255 м переводим в формат hex (шестнадцатиричный).
?????- Гость
Форматирование текста
автор ????? Пт Янв 11, 2013 12:40 pm
Форматирование текста
Рассмотрим пример:
Тег font (шрифт) служит для форматирования текста.
Рассмотрим его атрибуты:
size - размер шрифта
color - цвет надписи
face - шрифт - возможные варианты - Times New Roman, Arial, Verdana и другие
Ещё один пример:
Тег <b> - bold - выделенный, жирный
Тег <i> - italic - курсив
Тег <u> - underline - подчёркнутый
Тег <pre> - preformatted - переформатированный
Тег <cite> - цитата
Тег </br> - перенос строки
Рассмотрим пример:
- Код:
<font size="3" color="red">Это текст красного цвета</font>
<font size="2" color="blue">Это текст синего цвета</font>
<font face="verdana" color="green">Это текст зелёного цвета, шрифт Verdana</font>
Тег font (шрифт) служит для форматирования текста.
Рассмотрим его атрибуты:
size - размер шрифта
color - цвет надписи
face - шрифт - возможные варианты - Times New Roman, Arial, Verdana и другие
Ещё один пример:
- Код:
<b>Это текст, выделенный жирным (bold)</b>
<i>Это текст - курсив (italic)</i>
<u>Это текст с подчёркиванием (underline)</u>
<pre>
Это [b]переформатированный текст[/b].
Переносы строк будут сохранены, текст высветится стандартным шрифтом
<\pre>
<cite>Это цитата</cite>
<i>Это текст-курсив</br>
c переносом строки</i>
Тег <b> - bold - выделенный, жирный
Тег <i> - italic - курсив
Тег <u> - underline - подчёркнутый
Тег <pre> - preformatted - переформатированный
Тег <cite> - цитата
Тег </br> - перенос строки
?????- Гость
Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
автор Admin Пт Янв 11, 2013 1:29 pm
Хм... А вот про это я даже и не знал, думая, что каждому цвету просто от фонаря был в свое время присвоен определенный номер...Работа с цветом в HTML
Спасибо - реально интересная инфа
Admin- Admin
- Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21 -
Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
автор ????? Пт Янв 11, 2013 3:22 pm
Век живи - век учись!
Как говорил один профессор в университете:
Если у тебя есть 100 учеников, учи 100 учеников.
Если у тебя есть 1 ученик, учи 1 ученика.
Если у тебя нет учеников, учись сам!
Как говорил один профессор в университете:
Если у тебя есть 100 учеников, учи 100 учеников.
Если у тебя есть 1 ученик, учи 1 ученика.
Если у тебя нет учеников, учись сам!
?????- Гость
Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)
автор Admin Пт Янв 11, 2013 3:25 pm
жду продолжения!!!
Admin- Admin
- Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21 -
Фреймы
автор ????? Пт Янв 11, 2013 3:46 pm
Фреймы
Фреймы - это возможно движущиеся панели, на которых размещаются элементы сайта. Главное окно разбивается на несколько фреймов, каждый из фреймов трактуется как отдельное окно. (Несколько подокон в одном главном окне)
Рассмотрим пример:
Пример написывает набор фреймов из трёх колонок.
cols="25%,*,25%" - ширина соответствующих фреймов. Звёздочка означает растянуть - вписать фрейм в окно.
Aтрибут src - в этом атрибуте указывается ссылка на (название файла-документа, возможно, файл вложенный в подкаталог) документ, содержащий HTML фрейма.
Ещё примеры:
Атрибут rows говорит о разбивке на ряды. Во фреймсете два ряда, в первом из которых находится фрейм, а во втором - ещё один фреймсет (набор фреймов) - из двух колонок.
Пример фреймсета с неизменяемой шириной и высотой - при открытии страницы размер фреймов нельзя менять при наведении курсора мыши.
Это набор фреймов из трёх столбцов, причём размер первого фрейма менять нельзя, относительную ширину второго и третьего фреймов можно менять, захватывая и перетаскивая границу курсором мыши.
Фреймы похожи на таблицы, с тем различием, что источник кода HTML каждого из фреймов - отдельная HTML-страница.
Фреймы - это возможно движущиеся панели, на которых размещаются элементы сайта. Главное окно разбивается на несколько фреймов, каждый из фреймов трактуется как отдельное окно. (Несколько подокон в одном главном окне)
Рассмотрим пример:
- Код:
<frameset cols="25%,*,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
Пример написывает набор фреймов из трёх колонок.
cols="25%,*,25%" - ширина соответствующих фреймов. Звёздочка означает растянуть - вписать фрейм в окно.
Aтрибут src - в этом атрибуте указывается ссылка на (название файла-документа, возможно, файл вложенный в подкаталог) документ, содержащий HTML фрейма.
Ещё примеры:
- Код:
<frameset rows="50%,50%">
<frame src="frame_a.html">
<frameset cols="25%,75%">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</frameset>
Атрибут rows говорит о разбивке на ряды. Во фреймсете два ряда, в первом из которых находится фрейм, а во втором - ещё один фреймсет (набор фреймов) - из двух колонок.
Пример фреймсета с неизменяемой шириной и высотой - при открытии страницы размер фреймов нельзя менять при наведении курсора мыши.
- Код:
<frameset cols="50%,*,25%">
<frame src="frame_a.html" noresize="noresize">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
Это набор фреймов из трёх столбцов, причём размер первого фрейма менять нельзя, относительную ширину второго и третьего фреймов можно менять, захватывая и перетаскивая границу курсором мыши.
Фреймы похожи на таблицы, с тем различием, что источник кода HTML каждого из фреймов - отдельная HTML-страница.
?????- Гость
Вложенный фрейм - iframe
автор ????? Пт Янв 11, 2013 4:49 pm
Вложенный фрейм - iframe
В HTML 5 появился тег для вложенных окон - iframe
Рассмотрим пример:
Атрибут src указывает, какую страницу грузить в iframe.
heigth и width - высота и ширина вложенного фрейма.
В HTML 5 появился тег для вложенных окон - iframe
Рассмотрим пример:
- Код:
<iframe src="http://www.google.com" width="100" height="100"></iframe>
Атрибут src указывает, какую страницу грузить в iframe.
heigth и width - высота и ширина вложенного фрейма.
?????- Гость
Интерактивный HTML
автор ????? Пт Янв 11, 2013 5:32 pm
Интерактивный HTML
Коротко об интерактивном HTML.
На HTML страницах возможно размещение интерактивных элементов - форм.
Или HTML предусматривает ввод данных пользователя, отправку данных пользователя на сервер и возврат пользователю запрашиваемой информации.
Интерактивными HTML-программами могут быть, например, анкеты, форумы (как наш форум), интернет-магазины, в т.ч. сайты продажи билетов.
Форма (form) - это контейнер для полей ввода и кнопок.
Форма (поля ввода) заполняется пользователем и отправляется на сервер, где должна быть обработана специальным скриптом - программой обработки нажатия кнопки или перехода по ссылке.
Существуют различные технологии серверных скриптов - такие как CGI (разные языки программирования), ASP, ASP.NET, PHP.
Поскольку это целая тема - этим технологиям посвящаются целые книги - мы будем рассматривать эти технологии в отдельных темах.
Используемые теги - можно поискать самостоятельно - form, button, submit, input, textarea.
Коротко об интерактивном HTML.
На HTML страницах возможно размещение интерактивных элементов - форм.
Или HTML предусматривает ввод данных пользователя, отправку данных пользователя на сервер и возврат пользователю запрашиваемой информации.
Интерактивными HTML-программами могут быть, например, анкеты, форумы (как наш форум), интернет-магазины, в т.ч. сайты продажи билетов.
Форма (form) - это контейнер для полей ввода и кнопок.
Форма (поля ввода) заполняется пользователем и отправляется на сервер, где должна быть обработана специальным скриптом - программой обработки нажатия кнопки или перехода по ссылке.
Существуют различные технологии серверных скриптов - такие как CGI (разные языки программирования), ASP, ASP.NET, PHP.
Поскольку это целая тема - этим технологиям посвящаются целые книги - мы будем рассматривать эти технологии в отдельных темах.
Используемые теги - можно поискать самостоятельно - form, button, submit, input, textarea.
?????- Гость
CSS - каскадные стили
автор ????? Пт Янв 11, 2013 6:43 pm
CSS - каскадные стили
Чтобы облегчить дизайн web-страниц, в своё время был изобретён стандарт CSS (Cascading Style-Sheet - Каскадные Стили).
Стили подключаются в заголовке страницы (внутри тега <head>) в теге <style>.
Рассмотрим пример:
В приведённом примере стиль применяется к элементам страницы.
К элементу body, линку-ссылке (a), причём a:link - обозначает стиль ссылки, a:hover - стиль ссылки при наведённом на неё курсоре, a:visited - стиль ссылки, которая была уже посещена.
Стиль каждого элемента берётся в фигурные скобки. Из приведённых стилей:
border - ширина границы элемента
margin - ширина полей элемента
padding - ширина внутреннего отступления от границ элемента до его содержимого.
color - атрибут цвета
Также возможно вынесение стилей в отдельный файл. Тогда все стили элементов помещаются в отдельном файле, а в заголовке страницы, в котором они используются, помещается ссылка на файл стилей.
Например:
Тег link говорит о том, что это ссылка на файл.
Атрибут rel говорит о том, что это отношение. Тип отнощения - значение атрибута - stylesheet - шит каскадных стилей.
Атрибут href - ссылка на стайлшит.
Атрибут type - указывает на тип содержимого файла стилей.
Один и тот же файл стилей может применяться к нескольким страницам одновременно - при этом экономится место, сайт организуется структурно, а также облегчается применение одинакового стиля к разным страницам сайта.
Чтобы облегчить дизайн web-страниц, в своё время был изобретён стандарт CSS (Cascading Style-Sheet - Каскадные Стили).
Стили подключаются в заголовке страницы (внутри тега <head>) в теге <style>.
Рассмотрим пример:
- Код:
<style>
body
{
margin:0px;
padding:0px;
border:0px;
}
a:link {
color: lime;
}
a:hover {
color: white;
}
a:visited {
color: lime;
}
</style>
В приведённом примере стиль применяется к элементам страницы.
К элементу body, линку-ссылке (a), причём a:link - обозначает стиль ссылки, a:hover - стиль ссылки при наведённом на неё курсоре, a:visited - стиль ссылки, которая была уже посещена.
Стиль каждого элемента берётся в фигурные скобки. Из приведённых стилей:
border - ширина границы элемента
margin - ширина полей элемента
padding - ширина внутреннего отступления от границ элемента до его содержимого.
color - атрибут цвета
Также возможно вынесение стилей в отдельный файл. Тогда все стили элементов помещаются в отдельном файле, а в заголовке страницы, в котором они используются, помещается ссылка на файл стилей.
Например:
- Код:
<link rel="stylesheet" href="style.css" type="text/css" >
Тег link говорит о том, что это ссылка на файл.
Атрибут rel говорит о том, что это отношение. Тип отнощения - значение атрибута - stylesheet - шит каскадных стилей.
Атрибут href - ссылка на стайлшит.
Атрибут type - указывает на тип содержимого файла стилей.
Один и тот же файл стилей может применяться к нескольким страницам одновременно - при этом экономится место, сайт организуется структурно, а также облегчается применение одинакового стиля к разным страницам сайта.
?????- Гость
CSS - продолжение. Произвольные классы
автор ????? Пт Янв 11, 2013 7:05 pm
CSS - продолжение. Произвольные классы
К отдельным HTML элементам, не только к типу элемента, а к каждому конкретному элементу можно применять свой стиль. Для этого определяется атрибут элемента class. Атрибут class можно применять к любому элементу файла стилей CSS.
Пример:
Теперь остаётся добавить описание стиля класса в файл стилей CSS.
Пример:
Стиль, применяемый к классу, также берётся в фигурные скобки, причём перед названием класса ставится точка. Она определяет, что это введённый нами класс. Название для класса следует выбирать уникальное, а также чтобы оно не совпадало с ключевыми словами HTML и CSS.
background-color - цвет фона
text-align - выравнивание текста в элементе
left - по левому краю
center - по центру
right - по правому краю
vertical-align - выравнивание текста по вертикали в элементе
top - по верху
middle - по середине
bottom - по низу
Существуют дополнительные типы выравнивания, обращайтесь к справочникам.
font-family - тип шрифта внутри элемента
font-size - размер шрифта, в данном случае в пикселах
Ещё полезный пример:
background-image - фоновая картинка
url - означает, что это ссылка
Внутри атрибута url - ссылка на файл с картинкой фонового изображения.
К отдельным HTML элементам, не только к типу элемента, а к каждому конкретному элементу можно применять свой стиль. Для этого определяется атрибут элемента class. Атрибут class можно применять к любому элементу файла стилей CSS.
Пример:
- Код:
<td class="someclass">
Теперь остаётся добавить описание стиля класса в файл стилей CSS.
Пример:
- Код:
.someclass {
background-color: green;
text-align: left;
vertical-align: top;
margin:0px;
padding:0px;
border:0px;
font-size:13px;
font-family:Arial;
}
.class2
{
background-color: rgb (127, 127, 127);
}
Стиль, применяемый к классу, также берётся в фигурные скобки, причём перед названием класса ставится точка. Она определяет, что это введённый нами класс. Название для класса следует выбирать уникальное, а также чтобы оно не совпадало с ключевыми словами HTML и CSS.
background-color - цвет фона
text-align - выравнивание текста в элементе
left - по левому краю
center - по центру
right - по правому краю
vertical-align - выравнивание текста по вертикали в элементе
top - по верху
middle - по середине
bottom - по низу
Существуют дополнительные типы выравнивания, обращайтесь к справочникам.
font-family - тип шрифта внутри элемента
font-size - размер шрифта, в данном случае в пикселах
Ещё полезный пример:
- Код:
body {
background-image: url(img/background.jpg)
}
background-image - фоновая картинка
url - означает, что это ссылка
Внутри атрибута url - ссылка на файл с картинкой фонового изображения.
?????- Гость
CSS - позиционирование
автор ????? Пт Янв 11, 2013 9:38 pm
CSS - позиционирование
Элементы HTML с помощью CSS можно также спозиционировать на странице.
Позиционирование бывает абсолютное - отсчёт ведётся от границ документа - и относительное.
Такое позиционирование может применяться также в скриптах JavaScript - это язык, работающий с объектами HTML.
Рассмотрим пример:
Два класса, class1 и class2 - в применении (как минимум) к двум разным элементам, позиционируются с помощью CSS.
Атрибут position указывает, что выполняется позиционирование.
relative - относительное позиционирование, относительно элемента-контейнера, в котором содержится наш элемент.
absolute - абсолютное позиционирование - относительно границ документа. При этом элемент как бы вырывается из страницы и позиционируется там, где это указано в CSS.
top - относительно верхней границы
left - относительно левой границы
right - относительно правой границы
bottom - относительно нижней границы
px - указывает, что позиционирование ведётся в пикселах.
Элементы HTML с помощью CSS можно также спозиционировать на странице.
Позиционирование бывает абсолютное - отсчёт ведётся от границ документа - и относительное.
Такое позиционирование может применяться также в скриптах JavaScript - это язык, работающий с объектами HTML.
Рассмотрим пример:
- Код:
.class1 {
position: absolute;
top: 10px;
left: 10px;
}
.class2 {
position: relative;
}
Два класса, class1 и class2 - в применении (как минимум) к двум разным элементам, позиционируются с помощью CSS.
Атрибут position указывает, что выполняется позиционирование.
relative - относительное позиционирование, относительно элемента-контейнера, в котором содержится наш элемент.
absolute - абсолютное позиционирование - относительно границ документа. При этом элемент как бы вырывается из страницы и позиционируется там, где это указано в CSS.
top - относительно верхней границы
left - относительно левой границы
right - относительно правой границы
bottom - относительно нижней границы
px - указывает, что позиционирование ведётся в пикселах.
?????- Гость
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
» Нло - незваные гости?
» Тема с приколами
» Конфетка для Аллакса)))
» Возвращение маразма - сериал Проспект Бразилия
» Зависимость от железок от и сетей
» Свободная воля
» Об ориентации, либерализме и глобальном желании мирового разврата
» Возникновение Вселенной
» Переселение душ и карма
» Символика и аватары
» Обмен бесплатными и тематическими ссылками
» Добыча газа из навоза - как это делается
» Как я работал в компании ОСЭ
» Конституционная монархия