Последние темы
» Где послушать классное радио в Инете
Ср Ноя 13, 2013 4:14 pm автор Гость

» Нло - незваные гости?
Сб Ноя 09, 2013 6:27 pm автор Filex

» Тема с приколами
Пт Июн 07, 2013 3:29 pm автор Admin

» Конфетка для Аллакса)))
Вт Июн 04, 2013 4:54 pm автор Admin

» Возвращение маразма - сериал Проспект Бразилия
Вт Май 28, 2013 11:58 am автор Admin

» Зависимость от железок от и сетей
Пн Май 27, 2013 4:01 pm автор Admin

» Свободная воля
Пн Май 27, 2013 10:56 am автор Admin

» Об ориентации, либерализме и глобальном желании мирового разврата
Пн Май 27, 2013 10:41 am автор Admin

» Возникновение Вселенной
Вс Май 26, 2013 5:56 am автор Admin

» Переселение душ и карма
Вс Май 26, 2013 5:22 am автор Admin

» Символика и аватары
Вс Апр 28, 2013 1:55 pm автор Admin

» Обмен бесплатными и тематическими ссылками
Пн Апр 15, 2013 7:07 am автор Admin

» Добыча газа из навоза - как это делается
Пт Апр 12, 2013 11:09 pm автор Admin

» Как я работал в компании ОСЭ
Вс Мар 31, 2013 2:51 am автор Admin

» Конституционная монархия
Вс Мар 24, 2013 2:01 pm автор Гость

Поиск
 
 

Результаты :
 


Rechercher Расширенный поиск

Счетчики

Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)

Перейти вниз

Основы 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>, вспомогательные теги, указывающие кодировку страницы (каким набором кодов кодируется алфавит), другая справочная информация
В теле документа можно размещать заголовки и сформатированный текст, вставлять таблицы и картинки.


Последний раз редактировалось: Algebroid (Чт Янв 10, 2013 11:14 am), всего редактировалось 2 раз(а)

?????
Гость


Вернуться к началу Перейти вниз

Как создается страница HTML

Сообщение автор Admin в Ср Янв 09, 2013 4:19 am

Давай по порядку и обстоятельно - где, как в какой программе создается эта самая страница HTML?
Как пишется этот самый код?
Как опубликовать эту самую страницу в Сети?
Очень неплохо было бы узнать наглядно - как его написать?
То есть, прямо по порядку от написания тега
Код:
<html></html>
и до самого конца - до момента публикации страницы в сети.
avatar
Admin
Admin

Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21

Посмотреть профиль http://antispec.forum2x2.ru

Вернуться к началу Перейти вниз

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>
  <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>
Он вставляется в тело документа или внутри таблицы.

Код:

<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

О! Я смотрю, у нас тут не просто так... Плюс!!! Только... В какой таблице? Вот у меня на рабочем столе есть фотография, которую я хочу опубликовать.
Что мне с ней делать, чтобы когда я положу её на сервак, при наведении на неё курсора я видел подпись к фотографии? (Если можно - пошагово)
avatar
Admin
Admin

Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21

Посмотреть профиль http://antispec.forum2x2.ru

Вернуться к началу Перейти вниз

Как вставить картинку/опубликовать фотографию:

Сообщение автор ????? в Чт Янв 10, 2013 11:10 am

Как вставить картинку/опубликовать фотографию:

Закидываем фотографию в ту же папку, что и файл 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="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:

Код:
<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 (шестнадцатиричный).



?????
Гость


Вернуться к началу Перейти вниз

Форматирование текста

Сообщение автор ????? в Пт Янв 11, 2013 12:40 pm

Форматирование текста

Рассмотрим пример:
Код:

<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
Хм... А вот про это я даже и не знал, думая, что каждому цвету просто от фонаря был в свое время присвоен определенный номер...
Спасибо - реально интересная инфа
avatar
Admin
Admin

Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21

Посмотреть профиль http://antispec.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)

Сообщение автор ????? в Пт Янв 11, 2013 3:22 pm

Век живи - век учись!
Как говорил один профессор в университете:
Если у тебя есть 100 учеников, учи 100 учеников.
Если у тебя есть 1 ученик, учи 1 ученика.
Если у тебя нет учеников, учись сам! :18: :18: :18:

?????
Гость


Вернуться к началу Перейти вниз

Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)

Сообщение автор Admin в Пт Янв 11, 2013 3:25 pm

:11: жду продолжения!!!
avatar
Admin
Admin

Сообщения : 160
Очки : 254
Репутация : 1
Дата регистрации : 2012-11-21

Посмотреть профиль http://antispec.forum2x2.ru

Вернуться к началу Перейти вниз

Фреймы

Сообщение автор ????? в Пт Янв 11, 2013 3:46 pm

Фреймы

Фреймы - это возможно движущиеся панели, на которых размещаются элементы сайта. Главное окно разбивается на несколько фреймов, каждый из фреймов трактуется как отдельное окно. (Несколько подокон в одном главном окне)

Рассмотрим пример:

Код:

<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
Рассмотрим пример:

Код:
<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.

?????
Гость


Вернуться к началу Перейти вниз

CSS - каскадные стили

Сообщение автор ????? в Пт Янв 11, 2013 6:43 pm

CSS - каскадные стили

Чтобы облегчить дизайн 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.
Пример:

Код:

  <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 {
    position: absolute;
    top: 10px;
    left: 10px;
}
.class2 {
    position: relative;
}

Два класса, class1 и class2 - в применении (как минимум) к двум разным элементам, позиционируются с помощью CSS.
Атрибут position указывает, что выполняется позиционирование.
relative - относительное позиционирование, относительно элемента-контейнера, в котором содержится наш элемент.
absolute - абсолютное позиционирование - относительно границ документа. При этом элемент как бы вырывается из страницы и позиционируется там, где это указано в CSS.
top - относительно верхней границы
left - относительно левой границы
right - относительно правой границы
bottom - относительно нижней границы
px - указывает, что позиционирование ведётся в пикселах.

?????
Гость


Вернуться к началу Перейти вниз

Re: Основы HTML И СSS c нуля (как создать свой интернет-сайт с нуля)

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения