Различия

Здесь показаны различия между двумя версиями данной страницы.

--- fullcircle:21:веб-разработка_ч2 [2010/04/03 09:16]
создано
+++ fullcircle:21:веб-разработка_ч2 [2016/02/13 14:11] (текущий)
[HOW-TO: Веб-разработка. Часть 2]
@@ Строка 1: / Строка 1: @@
-======HOW-TO: Веб-разработка. Часть 1 ======
+======HOW-TO: Веб-разработка. Часть 2 ======
-<style right>
-//Автор: Брэтт Альтон (Brett Alton)//
-</style>
   - [[..:20:веб-разработка_ч1|Веб-разработка. Часть 1]]
@@ Строка 9: / Строка 5: @@
   - [[..:22:веб-разработка_ч3|Веб-разработка. Часть 3]]
   - [[..:23:веб-разработка_ч4|Веб-разработка. Часть 4]]
+----
+<style right>
+//Автор: 4545 (Brett Alton)//
+</style>
 Причиной вашего выбора Ubuntu может быть всемирная экономическая рецессия или боязнь, что хакеры и вирусы удалят ваши данные, но в любом случае, вы не смогли бы ни читать эту статью, ни использовать Ubuntu, не существуй интернета.
@@ Строка 24: / Строка 26: @@
 JavaScript (к Java он отношения не имеет) - это самый популярный язык программирования на стороне клиента. Такие языки исполняют код на компьютере пользователя в браузере, позволяя программистам создавать для пользователя интерфейс с большими возможностями. Конечно ценой является производительность компьютера пользователя. Поэтому такие сложные сайты, как Digg.com, замедляют работу старых компьютеров, особенно когда запущено несколько программ.
-JavaScript настолько полезен, что Firefox состоит из JavaScript более чем на 50%, если верить Ohloh [1].
+JavaScript настолько полезен, что Firefox состоит из JavaScript более чем на 50%, если верить Ohloh ((http://www.ohloh.net/p/ firefox/analyses/latest)).
 JavaScript очень важен для многих веб-разработчиков, и поэтому создано множество сред разработки, чтобы упростить программирование, сделать его объектно-ориентированным, добавить поддержку AJAX (Асинхронный JavaScript и XML). К таким средам относятся jQuery, YUI, Prototype & Script.aculo.us, Mootools, Dojo и многие другие.
@@ Строка 40: / Строка 42: @@
 ======Создание вашего первого сайта======
 Скопируйте этот код в открытый gEdit и сохраните на Рабочем столе под именем "первый.html".
-<code >
+<code html>
-<html>*<head>*</head>*<body>*</body>*</html>*
+<html>
+<head>
+</head>
+<body>
+</body>
+</html>
+</code>
 Теперь дважды кликните на этом файле на Рабочем столе, чтобы открыть его в Firefox. Перед вами пустая страница? Так и должно быть. Почему? Я только что привёл пример простой разметки сайта в HTML 4. Весь код должен находиться между тегами <html></html>, контент должен быть между <body></body>, а между <head></head> должна быть мета-информация, такая как мета-теги, включения другого кода (JavaScript) или информация для отображения - CSS.
 Во втором примере я покажу, как заполнять этот шаблон.
 Скопируйте следующий код в новый документ в gEdit и сохраните его как "второй.html".
+<code html>
+<html>
+<head>
+<title>Моё сочинительство</title>
+</head>
+<body>
+<h1>Моё сочинительство</h1>
+<p>
+Я смотрю телевизор очень <u><i> МНОГО</i></u>, вредно ли это?
+</p>
+<p>
+Я много занимаюсь этим:
+</p>
+<ul>
+<li>сижу на стуле</li>
+<li>смотрю фильмы</li>
+<li>встаю, чтобы поесть</li>
+</ul>
+<p>
+Вы ведёте здоровый образ жизни?
+</p>
+</body>
+</html>
+</code>
 Теперь дважды кликните на этом файле на Рабочем столе, чтобы открыть его в Firefox. На этот раз вы должны увидеть контент.
 Чтобы понять, почему страница выглядит именно так, нужно внимательно изучить разметку, которую мы только что скопировали в файл "второй.html".
 Когда тег <title></title> находится внутри тега <head></head>, он выводит своё содержимое в заголовке окна браузера. Заметьте, что заголовок окна Firefox сейчас такой: "Моё сочинительство - Mozilla Firefox". Разумеется, сюда можно поставить любой текст.
 Отображаемый контент страницы находится в теге <body></body>. Первый тег - это заголовок первого уровня (<h1></h1>). Обычно он используется только один раз для отображения главной темы страницы, хотя никто не запрещает использовать их больше. Существует семь уровней с <h1></h1> по <h7></h7>. Такие заголовки, к примеру, часто используются на страницах Википедии.
 Тег <p></p> означает абзац. Обычно используется для отображения основного контента страницы.
 Если не считать таблицы, то списки являются наверное самым сложным понятием для новичка. Используя <ul></ul> (маркированный список) мы можем отобразить содержимое тегов <li></li>, чтобы создать список. Используя <ol></ol> (упорядоченный список) вместо <ul></ul> мы получим цифры, а не маркеры. Списки также можно помещать в другие списки, добавив теги <ul></ul> или <ol></ol> внутрь <li></li>.
+<code html>
+<ul>
+<li>сижу на стуле</li>
+<li>
+смотрю фильмы
+<ul>
+<li>драму</li>
+<li>боевики</li>
+<li>другие</li>
+</ul>
+</li>
+<li>встаю, чтобы поесть</li>
+</ul>
+</code>
 В заключение скажу, что управлять дизайном страницы можно, поместив CSS (каскадные таблицы стилей) в HTML код.
-Сохраните код справа как "третий.html" на Рабочий стол.
+Сохраните следующий как "третий.html" на Рабочий стол.
+<code html>
+<html>
+<head>
+<title>Моё сочинительство</title>
+<style type="text/css">
+h1 {
+color: #ff0000;
+border-bottom: 5px solid #000000;
+text-align: center;
+}
+p {
+text-transform: uppercase;
+}
+</style>
+</head>
+<body>
+<h1>Моё сочинительство</h1>
+<p>
+Я смотрю телевизор очень <u><i> МНОГО</i></u>, вредно ли это?
+</p>
+<p>
+Я много занимаюсь этим:
+</p>
+<ul>
+<li>сижу на стуле</li>
+<li>смотрю фильмы</li>
+<li>встаю, чтобы поесть</li>
+</ul>
+<p>
+Вы ведёте здоровый образ жизни?
+</p>
+</body>
+</html>
+</code>
 Теперь дважды кликните на этом файле, чтобы открыть его в Firefox. Сейчас вы должны увидеть, что контент выводится по-другому.
 CSS можно либо вставить в <head></head>, используя тег <style></style>, либо указать ссылку на внешний файл, который содержит CSS. Пока мы оставим его в HTML.
 Как вы заметили, синтаксис CSS отличается от HTML. Для определения элемента в нём используются скобки {}, а не тег <p></p>. В CSS это называется селектором и используется для выбора тега, который нужно изменить.
-В моём примере используются встроенные свойства CSS для модификации тегов <h1></h1> и <p></p>. Я - веб-профессионал, и всё равно не помню все свойства CSS и порой ищу в интернете, как их использовать. Поэтому не смущайтесь, если вам тоже приходится это делать. На самом деле многие сайты создали специальные "шпаргалки" для этих целей.
+В моём примере используются встроенные свойства CSS для модификации тегов <h1></h1> и <p></p>. Я - профессионал в веб-разработке, и всё равно не помню все свойства CSS и порой ищу в интернете, как их использовать. Поэтому не смущайтесь, если вам тоже приходится это делать. На самом деле многие сайты создали специальные "шпаргалки" для этих целей.
 Забавное число "#ff0000" - это цвет в шестнадцатеричном обозначении. При такой записи существует более 16 млн цветов. Поэтому используйте программы вроде Agave для создания цветовых схем.
 Эта статья лишь немного затрагивает процесс веб-разработки и возможности программирования и дизайна. Если вы почувствовали интерес, то следите за моими статьями, в которых я буду говорить о серверном программировании на PHP, о клиентском (JavaScript, jQuery, AJAX) и о многом другом. После этого я советую посетить местный книжный магазин, чтобы купить книгу о теме, которая вас заинтересовала (дизайн, программирование, и др). Или записаться на курсы в местном учебном центре.
-[1] http://www.ohloh.net/p/ firefox/analyses/latest
 ----
 <style center>
@@ Строка 67: / Строка 162: @@
   - [[..:23:веб-разработка_ч4|Веб-разработка. Часть 4]]
-//[[..:20|К содержанию номера]]//
+----
+//[[..:21|К содержанию номера]]//
 //[[:fullcircle|К архиву журналов]]//
 </style>
-{{tag>Программирование Web-разработка Full_Circle}}
+{{tag>howto Программирование Web-разработка Full_Circle}}

HOW-TO: Веб-разработка. Часть 2 Сравнение версий

Различия