Aug 17

Введение в HTML

HTML, аффтар: Родион Быков No Comments »

Feb 02

Как устроена веб-страница

HTML, учеба, аффтар: Скакунов Александр 1 Comment »

Веб-страница устроена просто.

Она состоит из двух частей: заголовка (head) и тела документа (body).

Заголовок содержит служебную информацию, описывающую содержащиеся на странице данные или помогающие её отобразить. К описательным данным относятся: заголовок страницы (его видно в шапке броузера), список ключевых слов (чтобы поисковики лучше смогли понять о чем на этой странице написано), кодировка документа (а их только для русского языка — 4 штуки), и так далее. К элементам, помогающим отобразить содержимое, относятся каскадные таблицы стилей (CSS) и в некоторых случаях библиотеки JavaScript-кода — не пугаемся, их мы разжуём позже.

Содержимое заголовка как правило не видно — оно носит служебный характер.

Тело документа — это собственно всё, что на странице написано и нарисовано: параграфы текста, ссылки, картинки и видео-вставки.

Давайте попробуем написать простейшую веб-страничку. Открываем любой текстовый редактор (только не MS Word! Попробуйте Notepad++) и копируем туда такой текст:


<html>
  <head>
    <!-- это заголовок документа -->
    <title>First blood</title>
  </head>

  <body>
    <!-- это собственно тело -->
    <h1>Hello Rambo!</h1>
  </body>
</html>

Сохраняем файл куда угодно под названием 1.htm и открываем его в браузере (можно просто перетащить файл в браузер). Должна получится примерно такая картина (на рисунке – браузер Google Chrome, у вас может быть другой):

Ура! Теперь осталось выучить несколько основных тегов и попробовать их применять. Тэг H1 мы уже использовали в примере выше — он даёт нам заголовок первого уровня (самый крупный — тут та же идеология, что и с ватманами: А1 больше чем А3):


<strong>жирный</strong> = жирный

<em>курсив</em> = курсив

<a href="http://google.com">ссылка на Google</a> =  ссылка на Google

<input type="button"
  value="Нажми меня"
  onclick="alert('Вот и молодец!')" /> =

На закуску рекомендую прочесть статью “Простейшая веб-страница” — написана просто и с юмором, читается легко.

May 24

Что почитать

AJAX, HTML, JavaScript, PHP, ссылки, аффтар: Скакунов Александр No Comments »
  • php.net – сайт-проматерь-пропаперь. Когда в редакторе нет встроенного хелпа по PHP, удобно лазить сюда: http://php.net/php_uname (справка по php_uname())
  • PHP.SPB.RU – хотя сайт староват и давно не обновлялся, здесь много полезных кусков кода с подробными объяснениями. До сих пор пользую модуль для измерения скорости работы PHP
  • phpclasses.org – много не всегда качественных, но уже готовых к использованию PHP-классов. Выкладывать ваши наработки или нет – дело хозяйское. Я выкладываю.
  • htmlcoder – тоже обновляется не часто, но советую перелопатить все имеющиеся здесь статьи по HTML, CSS и JavaScript.
  • dklab – сайт, на страницах которого был выложен класс JsHttpRequest, реализующий AJAX, когда самого термина AJAX ещё не придумали. Автор явно человек с головой. Рекомендую наблы.

Приятного чтения!

May 22

Пример веб-приложения

HTML, JavaScript, PHP, учеба, аффтар: Скакунов Александр 5 Comments »

Итак, рассмотрим пример веб-приложения со следующей функциональностью:

  • показать список товаров
  • подредактировать конкретный товар
  • удалить товар
  • добавить товаров

Исходники (12 Кб)

Для успешной работы приложения на вашей машине надо сделать следующее:

  1. создать базу данных products (удобно через phpMyAdmin)
  2. содержимое файла schema.sql скормить этой базе, в результате чего будет создана одноименная таблица
  3. в файле server.php поправить данные (логин/пароль) для коннекта с базой

В принципе, большинство веб-приложений требуют реализации такой функциональности: вывести список элементов и редактировать их, так что эта базовая система может с минимальными доработками переделана под другую предметную область.

У кого что не получается – пишите в комменты, будем делиться опытом друг с другом.

P.S. Удобно дампить переменные (смотреть их содержимое) с помощью имеющегося в проекте класса dBug, для этого надо сделать такой вызов:

< ?
new dBug( $var );
?>
May 18

Вставка PHP-кода

HTML, PHP, аффтар: Скакунов Александр 3 Comments »

Давайте посмотрим, как вставить в ХТМЛ результаты работы PHP-скрипта.

<html>
  <head>
    <title>Умелые ручки</title>
  </head>
  <body>
    <h1>Пример №2</h1>
    <p>Сегодняшняя дата:
    <?
      echo date("d.m.Y");
    ?>
    </p>
  </body>
<html>

При открытии в броузере это будет выглядеть так:

Пример 2

Как это получилось: PHP-сервер ищет в тексте файла куски кода, обрамленные в <? … ?>, изымает их текст, выполняет их, а на их место подставляет результаты работы. Обращаю внимание: если в этом коде убрать команду echo, отвечающую за передачу текста в броузер, то на месте этой PHP-вставки будет просто пустая строка.

Вы можете в броузере посмотреть код результатирующего документа HTML (обычно это меню “Вид” -> “Исходный код страницы” в броузере). Там будет следующее:

<html>
  <head>
    <title>Умелые ручки</title>
  </head>
  <body>
    <h1>Пример №2</h1>
    <p>Сегодняшняя дата:
    18.05.2007    </p>
  </body>
<html>

Подробнее о функции date() можно узнать на сайте php.net, рекомендую. Там же после стандартной документации идут комментарии других PHP-разработчиков, часто очень полезные.

Вместо функции date() может стоять просто строка или арифметическое выражение:

<html>
  <head>
    <title>Умелые ручки</title>
  </head>
  <body>
    <h1>Пример №2.1</h1>
    <p>Счет до 5:
    <?
    for($i=0; $i<5; $i++)
      echo '<br/>' . ($i+1);
    ?>
    </p>
  </body>
<html>

И результат:

Пример 2.1

Как видно, конкатенация строк производится через символ точки. Использование знака “плюс” сразу приведет оба операнда к числовому типу, что не всегда в ваших интересах :)

Копируем примеры, пробуем сами, делаем ошибки, набиваем руку, накапливаем вопросы, пишем комменты!

Previous Entries

[ Душевая кабина со склада в Харькове. ]