Содержание
Автор: 4545 (Brett Alton)
Причиной вашего выбора Ubuntu может быть всемирная экономическая рецессия или боязнь, что хакеры и вирусы удалят ваши данные, но в любом случае, вы не смогли бы ни читать эту статью, ни использовать Ubuntu, не существуй интернета.
Так что такое Интернет, и откуда он взялся?
Если вкратце, то всё очень просто. Интернет появился в 70-х годах как исследовательский проект ARPANET в США, который проводило военно-научное агентство DARPA. Вскоре после этого им занялись университеты и учёные, чтобы сделать обмен данными проще. Но интернет превратился в то, чем является сегодня, лишь в 90-е годы после изобретения современного ПК и принятия протокола TCP/IP.
Современное состояние сети интернет
Современное его состояние является невероятно сложной и многогранной темой, а каждой грани можно посвятить книгу. Я лишь вкратце расскажу как создать веб-страницу, не затрагивая технологии и историю.
Начнём с того, что существует множество языков разметки (HTML 4 и 5; XHTML 1 и 2; CSS 1, 2 и 3; XML; JSON и др). Они определяют структуру, разметку и форматирование веб-страниц, а некоторые используются и созданы только для хранения информации.
Ещё существуют высоко-уровневые серверные языки веб-программирования, например PHP, ASP/ASP.NET, Python, Java (JSP), Ruby и другие. Каждый из этих языков полезен по-своему, и обычно программисты выбирают языки в зависимости от навыков или требований работодателя. Многие предпочитают PHP, Python и Java, потому что они бесплатные и открытые, могут быть использованы на множестве операционных систем и архитектур процессоров. А другие любят ASP/ASP.net за отличную поддержку от Microsoft и не против платить за их использование. В последующих статьях я покажу, как программировать на PHP. Но стоит также попробовать другие языки. Вовсе не значит, что PHP самый лучший язык для всех нужд, только лишь потому что я буду о нём рассказывать. На самом деле некоторые веб-разработчики используют несколько языков в приложениях, как разработчики ПО смешивают Assembler, C, C++ и тд.
JavaScript (к Java он отношения не имеет) - это самый популярный язык программирования на стороне клиента. Такие языки исполняют код на компьютере пользователя в браузере, позволяя программистам создавать для пользователя интерфейс с большими возможностями. Конечно ценой является производительность компьютера пользователя. Поэтому такие сложные сайты, как Digg.com, замедляют работу старых компьютеров, особенно когда запущено несколько программ.
JavaScript настолько полезен, что Firefox состоит из JavaScript более чем на 50%, если верить Ohloh 1). JavaScript очень важен для многих веб-разработчиков, и поэтому создано множество сред разработки, чтобы упростить программирование, сделать его объектно-ориентированным, добавить поддержку AJAX (Асинхронный JavaScript и XML). К таким средам относятся jQuery, YUI, Prototype & Script.aculo.us, Mootools, Dojo и многие другие.
Если объединить эти технологии с некоммерческой поддержкой, то мы получим самые популярные в мире веб-сайты, такие как Wikipedia, Google, Yahoo, CNN, BBC, YouTube, DailyMotion, Facebook, MySpace, Digg, Ubuntu Forums, Kijiji, Craigslist, ESPN, Flickr и DeviantArt. В веб-разработке используются также такие технологии как Java-аплеты и Flash-анимация, но в этой статье они не рассматриваются.
Итак, что же нужно для создания сайта?
- Операционная система, например Ubuntu
- Текстовый редактор, например gEdit (Приложения > Стандартные > Текстовый редактор)
- Веб-браузер, например Firefox (Приложения > Интернет > Firefox Web Browser)
- терпение и желание учиться
Будем считать, что вы используете Ubuntu. Откройте Firefox и gEdit, которые будут использоваться для программирования, отладки и просмотра результата.
Создание вашего первого сайта
Скопируйте этот код в открытый gEdit и сохраните на Рабочем столе под именем «первый.html».
<html> <head> </head> <body> </body> </html>
Теперь дважды кликните на этом файле на Рабочем столе, чтобы открыть его в Firefox. Перед вами пустая страница? Так и должно быть. Почему? Я только что привёл пример простой разметки сайта в HTML 4. Весь код должен находиться между тегами , контент должен быть между <body></body>, а между <head></head> должна быть мета-информация, такая как мета-теги, включения другого кода (JavaScript) или информация для отображения - CSS.
Во втором примере я покажу, как заполнять этот шаблон.
Скопируйте следующий код в новый документ в gEdit и сохраните его как «второй.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>
Теперь дважды кликните на этом файле на Рабочем столе, чтобы открыть его в 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>.
<ul> <li>сижу на стуле</li> <li> смотрю фильмы <ul> <li>драму</li> <li>боевики</li> <li>другие</li> </ul> </li> <li>встаю, чтобы поесть</li> </ul>
В заключение скажу, что управлять дизайном страницы можно, поместив CSS (каскадные таблицы стилей) в HTML код. Сохраните следующий как «третий.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>
Теперь дважды кликните на этом файле, чтобы открыть его в Firefox. Сейчас вы должны увидеть, что контент выводится по-другому.
CSS можно либо вставить в <head></head>, используя тег
, либо указать ссылку на внешний файл, который содержит CSS. Пока мы оставим его в HTML.
Как вы заметили, синтаксис CSS отличается от HTML. Для определения элемента в нём используются скобки {}, а не тег <p></p>. В CSS это называется селектором и используется для выбора тега, который нужно изменить.
В моём примере используются встроенные свойства CSS для модификации тегов <h1></h1> и <p></p>. Я - профессионал в веб-разработке, и всё равно не помню все свойства CSS и порой ищу в интернете, как их использовать. Поэтому не смущайтесь, если вам тоже приходится это делать. На самом деле многие сайты создали специальные «шпаргалки» для этих целей.
Забавное число «#ff0000» - это цвет в шестнадцатеричном обозначении. При такой записи существует более 16 млн цветов. Поэтому используйте программы вроде Agave для создания цветовых схем.
Эта статья лишь немного затрагивает процесс веб-разработки и возможности программирования и дизайна. Если вы почувствовали интерес, то следите за моими статьями, в которых я буду говорить о серверном программировании на PHP, о клиентском (JavaScript, jQuery, AJAX) и о многом другом. После этого я советую посетить местный книжный магазин, чтобы купить книгу о теме, которая вас заинтересовала (дизайн, программирование, и др). Или записаться на курсы в местном учебном центре.
