Программный язык html. HTML, CSS, PHP, JavaScript, SQL – что и зачем? Теги для выделения текста
- Tutorial
Совсем недавно возникла задача создания программного обеспечения по генерации картографических тайлов. В качестве основы выбор пал на mapnik (альтернатив ему немного). Как оказалось, здесь на пути поджидало множество сложностей, непредвиденных ошибок, а более менее внятной документации по настройке всего «под ключ» найти не удалось. Повозившись какое-то время, мне удалось собрать множество граблей, которые могут возникнуть ну и довести дело до победного конца. Об этом и статья.
Установка производилась в Ubuntu и Debian. Скажу сразу, что лучше конечно использовать последние версии программных продуктов, которых иногда нет в репозитариях. Их можно скачать, при желании, вручную с официальных сайтов.
Не считая необходимых зависимостей, в общем случае нам понадобятся
- PostgreSQL >= 8.4
- PostGIS >= 1.5 < 2
- Python 2.x
- Mapnik >= 2
- Osm2pgsql
- Некоторые знания по работе с bash, Python и PostgreSQL
Установка PostgreSQL
Сперва проверем какая версия PostgreSQL у нас в репозитариях:$ apt-cache show postgresql
Если версия 8.4 и более, то устанавливаем пакет.
$ sudo apt-get install postgresql
В противном случае, скачиваем пакет с официального сайта www.postgresql.org/download/linux и устанавливаем его. Далее нам надо настроить нашу базу данных. По умолчанию её пользователь - это postgres и авторизоваться можно только от него средствами самой OC. Однако мы поступим несколько по-другому, сперва откроем файл pg_hba.conf. Узнать его расположение можно утилитой locate
$ sudo updatedb
$ sudo locate pg_hba.conf
Если у вас эта утилита не установлена, то ставим
$ sudo apt-get install findutils locate
и повторяем команды выше. У меня например этот файл расположен по адресу /etc/postgresql/8.4/main/pg_hba.conf. Открываем его и редактируем.
$ sudo vi "/etc/postgresql/8.4/main/pg_hba.conf"
Заменяем:
$ locate all all ident # Авторизация средствами ОС
На
$ locate all all password # Авторизация по паролю
Сохраняем файл и перезапускаем PostgreSQL.
$ sudo "/etc/init.d/postgresql-8.4 restart"
Теперь мы можем создать любого пользователя базы и заходить от него под обычным паролем без всякого шифрования (нам не критична супер безопасность). А также нам потребуется новая база данных для наших OSM данных.
Заходим в консоль управления PostgreSQL.
$ su postgres
$ psql
postgres=# CREATE ROLE osm WITH SUPERUSER PASSWORD ‘my_password’ LOGIN;
CREATE ROLE
postgres=# CREATE DATABASE osm;
CREATE DATABASE
postgres=# \q
Пользователь и база данных созданы.
Проверить работоспособность нового пользователя можно командой
$ psql -U osm -d osm -W
Если после ввода пароля Вы попадете в консоль PostgreSQL, то все прошло успешно.
Установка PostGIS
Нам потребуется PostGIS. В моем репозитарии была версия 1.4. Так как, после её установки мне почему-то не удалось найти файл postgis.sql, я снес эту версию и скачал с официального сайта версию 1.5. Поэтому в статье, мы поступим также.$ wget "http://postgis.refractions.net/download/postgis-1.5.4.tar.gz"
Распаковываем архив, собираем и устанавливаем.
$ tar xvfz "./postgis-1.5.4.tar.gz" $ cd "./postgis-1.5.4" $ sudo ./configure $ sudo make install
В случае отсутствия необходимых библиотек, устанавливаем их.
Далее устанавливаем специальный язык в базу osm.
$ createlang plpgsql osm -U osm -W
Теперь необходимо в базу osm выполнить два SQL скрипта: postgis.sql и 900913.sql.
При помощи утилиты locate находим их расположение и выполняем их.
$ psql -U osm -d osm -W -f "/usr/share/postgresql/8.4/contrib/postgis-1.5/postgis.sql" $ psql -U osm -d osm -W -f "/usr/share/osm2pgsql/900913.sql"
Обратите внимание, как показала практика данную команду необходимо выполнить именно от пользователя с привилегиями суперпользователя PostgreSQL. Если у вас возникли проблемы и ошибки плана ERROR: type «geometry» does not exist , то попробуйте перед выполнением sql файла выполнить:
$ sudo ldconfig
и повторите команду запуска sql файлов.
Все! С настройкой PostgreSQL мы закончили. Переходим к установке Mapnik.
Установка Mapnik
$ sudo add-apt-repository ppa:mapnik/nightly-trunk $ sudo apt-get update $ sudo apt-get install libmapnik mapnik-utils python-mapnikЕсли система выдаст, что “add-apt-repository: command not found”, то
$ sudo apt-get install python-software-properties
И повторите три команды выше. Mapnik установлен. Я не стал писать о необходимости установки Python, так как в большинстве случаев он всегда уже стоит. Проверяем работу mapnik.
$ python >>> import mapnik
Если ошибок никаких не возникло, то все прошло успешно. Теперь перейдем к установке osm2pgsql
Установка Osm2pgsql
$ sudo apt-get install osm2pgsqlОстался один важный штрих. Дело в том, что файл default.style, поставляемый osm2pgsql для экспорта osm данных в базу данных, по какой-то причине не соответствует последнему формату OSM. (Может быть кто знает почему?). Скачиваем файл правильного формата.
$ wget "http://svn.openstreetmap.org/applications/utils/export/osm2pgsql/default.style"
Далее заменяем, тот что шел по умолчанию с osm2pgsql
$ sudo cp "./default.style" "/usr/share/osm2pgsql/default.style"
Установка скриптов от OpenStreetMap для генерации тайлов
Репозитарий OpenStreetMap содержит немало скриптов и утилит по картографической тематике. Нам понадобится одно из приложений, написанное на python, которое уже содержит все необходимые нам скрипты по работе с mapnik. Чтобы его скачать требуется установить Subversion.$ sudo apt-get install subversion
Теперь смело можно загрузить OSM Application. Создайте папку для его расположения. например, у меня это /home/osm/mapnik и выполните checkout.
$ mkdir "/home/osm/mapnik" $ svn co "http://svn.openstreetmap.org/applications/rendering/mapnik" "/home/osm/mapnik"
Теперь запускаем скрипт находящийся в приложении.
$ bash /home/osm/mapnik/get-coastlines.sh
Он скачает нам необходимые файлы с шейпами мира.
Теперь необходимо создать XML файл стилей. Делается это следующей командой:
$ python /home/osm/mapnik/generate_xml.py osm.xml my_osm.xml --dbname osm --user osm --password my_password --accept-none
Будет создан файл my_osm.xml с данными для подключения к PostgreSQL.
Проба пера
Вот и настал момент, когда можно качать любой OSM файл и генерировать на его основе тайлы. Файлы OSM можно скачать с сайтов представленных на веб-странице wiki.openstreetmap.org/wiki/Planet.osmМожно, конечно, скачать весь файл Planet.osm, но нужно ли оно вам? В распакованном виде он весит более 250 Гб.
Предположим мы хотим сгенерировать тайлы Москвы на 17 масштабе.
Качаем необходимый OSM файл.
$ wget "http://download.bbbike.org/osm/bbbike/Moscow/Moscow.osm.gz"
Теперь мы можем его экспортировать в базу данных.
$ sudo osm2pgsql -U osm -d osm Moscow.osm.gz
Все! Осталось лишь запустить скрипт по генерации тайлов. Но перед этим, нам нужно его слегка отредактировать, дабы указать нужный масштаб и координаты каких тайлов мы хотим получить. Открываем файл /home/osm/mapnik/generate_tiles.py. Устанавливаем переменную mapfile, чтобы она указывала на наш my_osm.xml.
mapfile = "/home/osm/mapnik/my_osm.xml"
Далее переопределите переменную, которая указывает куда Вы желаете складывать тайлы.
tile_dir = "/home/osm/mapnik/all_tiles"
Файл Moscow.osm который мы скачали имеет координаты векторных данных
xMin = 37.32000
yMin = 55.57000
xMax = 37.88000
yMax = 55.92000
Находим в скрипте такие строки
bbox = (-180.0,-90.0, 180.0,90.0)
render_tiles(bbox, mapfile, tile_dir, 0, 5, "World")
И перед ними (дабы не затирать существующий код) пишем:
bbox = (37.32000, 55.57000, 37.88000, 55.92000)
render_tiles(bbox, mapfile, tile_dir, 17, 17, "Moscow")
exit()
Желательно написать exit(), дабы скрипт после генерации тайлов Москвы не преступил к генерации всего мира.
4 и 5 параметры функции render_tiles задают масштаб с какого по какой мы будем генерировать тайлы. В данном случае мы выбрали только 17 масштаб.
Сохраняем и запускаем.
$ python /home/osm/mapnik/generate_tiles.py
Пойдет процесс генерации тайлов.
Также можно найти прекрасный мануал здесь
Здравствуйте уважаемые начинающие веб-мастера. Начинаем изучать языки программирования.
И начнём мы их изучать с html.
Сразу скажу, что в конце курса Вы уже сможете самостоятельно написать сайт на чистом html, и выложить его в интернет. Но я всё же порекомендую не торопиться, и после html, познакомиться с css.
Тогда и сайт Вы сделаете покруче, и сможете исправлять внешний вид сайта, созданного на готовой CMS(система управления контентом).
Изучение языка программирования, и изучение иностранного языка — это далеко не одно и тоже, и оно гораздо легче. Более того, это не страшно, а очень увлекательно.
Просто непонятное всегда пугает, но я вам обещаю, что после первых же занятий, пройдут все страхи.
Учиться мы будем при помощи редактора , который Вам нужно установить на свой компьютер.
В этом редакторе файлов, можно написать код, и тут-же посмотреть, как отобразит его браузер. Очень удобно.
Давайте, сначала я Вам немного расскажу, что из себя представляет HTML, и это будет скучная часть нашего курса, а затем займёмся интереснейшей практикой. Там уж, точно, скучно не будет.
НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.
И если, совокупность просто страниц, объединённых одной тематикой, в нашем понимании — книга, или даже, лучше сказать, толстый журнал, то совокупность веб-страниц объединённых одним доменным именем — это и есть сайт.
Каждая веб-страница имеет свой уникальный текст, написанный Вами, и заключенный в html-код.
Код — это команды браузеру, как отображать тот или иной элемент. Допустим, написали Вы слово, а вот в каком виде оно будет на экране, зависит от того, в какой код вы его заключите.
Код html состоит из следующих элементов:
2. Атрибуты тегов.
3. Значения атрибутов.
Давайте рассмотрим их по порядку.
Тег html — это основной элемент кода. Пишется он так:
Как видите, состоит он из двух частей. Первые угловые скобки — это открывающая часть, а вторые, со слешем — закрывающая.
Между этими двумя частями, пишется весь остальной код страницы, которая будет отображаться на экране.
Тег сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.
В остальных тегах, элементах кода, в угловых скобках пишется буква, или слово, которое будет являться названием тега и определит, какой элемент будет этим тегом выведен на экран.
Например, если поставить в угловых скобках букву h1 , то на экране выведется текст в виде заголовка.
Здравствуйте
То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.
Если в угловые скобки поставить букву p , то текст заключённый в тег, будет выведен в виде абзаца.
Здравствуйте
То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.
И таких букв, и даже слов, определяющих вид команды, в html несколько десятков, хотя в частом использовании находятся не больше 10-15 тегов.
Более подробно, каждый из них, мы рассмотрим по ходу
Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.
Но об этом попозже, а пока всё же узнаем, что такое атрибут, так как некоторые из них не потеряли актуальности и не потеряют никогда.
Атрибут — это дополнительная команда. Пишется он в открывающей части тега. Например, захочется вам сделать заголовок цветным, тогда в открывающую часть тега h1 , нужно вставить атрибут color
И сразу переходим к значениям атрибутов. Дело в том, что атрибут обязательно должен быть со значением. То есть, дали вы команду, что заголовок должен быть цветным, значит нужно указать, какой будет цвет.
Это указание и будет значением атрибута. Выглядит оно так:
Это красный цвет.
Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.
Хотя, оформление всё больше переходит к CSS, а атрибуты оформления постепенно устаревают и выходят из практики.
А сейчас делаем вывод из всего вышесказанного:
Язык HTML — это язык, который понимают браузеры. Нам он необходим для того, чтоб общаться с браузером, или можно сказать, управлять им, то есть давать ему команды на то, как воспринимать и отображать на экране то, что мы напишем.
Хочу добавить, что теги, атрибуты, и их значения, легко запоминаются во время практических занятий, чем и будут по сути все последующие статьи.
Там сразу видишь тег, узнаёшь его значение, в каком случае и каком месте он применяется, какими знаками сопровождается, и как пишется, так что сейчас я не буду показывать Вам все теги и атрибуты, увидим всё на практике.
Полный список тегов и атрибутов html, если кому то интересно, всегда можно посмотреть в . .
Хотя, если вы не собираетесь профессионально заниматься программированием, будет достаточно знать несколько (около десятка) основных тегов и несколько же атрибутов.
Ну, и всё, пожалуй. Мало? А больше пока и не надо. Остальное будем узнавать в процессе обучения на конкретных примерах.
Думаю, на примерах будет лучше усваиваться. Наша цель сделать сайт и понять, как же всё это работает, так что вперёд на практику.
Перемена
Только сядешь за учёбу — так обязательно какая-то падла разбудит!!!
В школе учитель говорит ученикам:
— Кто из вас окончательно считает себя тупицей? Встаньте.
После долгой паузы поднимается один ученик:
— Так ты считаешь себя тупицей?
— Ну не совсем, но как — то неловко, что вы стоите один.
HTML (от англ. HyperText Markup Language - язык гипертекстовой разметки) - стандартный язык разметки документов в сети интернет. Является, по сути, главным и единственным языком для построения веб-страниц, который умеет вмещать скрипты и элементы других языков: Java, php, CSS и др.
Хотя теоретическую часть изучения этого языка можно познать за какие-то 2-3 месяца, практические навыки обычно разрабатываются всю жизнь, ведь это один из самых динамичных языков программирования, который постоянно развивается, дополняется и модернизируется, тем самым принуждая веб-программиста улучшать свои навыки.
Любой пользователь может в реальном времени узнать, на каком языке написана страница в сети: нужно кликнуть ПКМ по пустому пространству и выбрать "Просмотр кода страницы" - языки страницы будут находиться в теге
Чтобы понять, HTML 5, нужно разобраться в том, чем является язык XHTML...
XHTML - подобный языку HTML язык разметки веб-страниц, чаще всего используемый для построения сложных веб-приложений, но обладающий намного более сложным синтаксисом и чувствительностью к ошибкам. Когда говорят о важности структуры документа, то всегда упоминают XHTML, а не HTML.
Изучение XHTML не займет намного больше времени, чем изучение HTML, однако его эффективность на фоне появления нового языка - HTML 5 - заметно падает.
Когда умные ребята, которые всю жизнь изучали языки веб-программирования, поняли, что постоянное метание между простым для глаза HTML и сложным, но правильным XHTML просто надоедает - они решили создать нечто универсальное, что-то, что будет содержать синтаксические разметки и того и другого языков, при этом не будет терять качества. Так и был создан HTML 5, который официально находится в стадии разработки, но, по сути, является рабочим стандартом (англ. HTML Living Standard).
Прежде чем приступить к изучению чего-то и трате своего времени, нужно определиться с целями. Если цель - сверстать пару страниц или сделать сайт-визитку, то вряд ли потребуется даже покупка учебников: хватит одного-двух месяцев усердной работы с использованием интернет-ресурсов по изучению HTML и CSS (Таблицы каскадных стилей - язык описания внешнего вида документа), и сайт будет готов.
Если же человек хочет заняться веб-программированием и познать тонкости ручной верстки, то времени он потратит примерно в 10-15 раз больше. Дабы понять синтаксис всех языков типа SGML, нужно будет изучить сначала XML (язык структурирования веб-документов со сложным синтаксисом), потом заняться изучением HTML 5 и попутно (так как эти два языка неразлучны) заняться изучением CSS, а в конце "залить" все это хорошим Java.
Многие ошибочно предполагают, что для успешной разработки веб-ресурсов требуется знать 1-2 языка. Это не так. Знание такого малого количества языков делает веб-программиста "неповоротливым" - неспособным мыслить креативно.
Чтобы преуспеть в веб-программировании, требуется сила воли. Ну, и следованием советам не помешает.
Начинать изучение языков программирования стоит с теории этих языков - сначала будущему "верстальщику" нужно разобраться в концепции этих языков, в их функциях, узнать, в между HTML и XML и т.д.
В процессе изучения необходимо использовать медиа-ресурсы: сегодня существует множество образовательных сайтов, на которых информация представлена в удобоваримом виде, а, следовательно, изучение языка будет приносить не только пользу, но и удовольствие.
Практика. После изучения "теоретической базы", нужно незамедлительно приступать к практике - блокнот или редактор типа Notepad++ должен быть открыт на компьютере 24 часа в сутки.
Язык программирования - так же, как английский или французский - не будет развиваться, если его не практиковать.
Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документа
Тег
сообщает о том, что начинается структура html-документа,
— что заканчивается. Между тегами
хранится в большей части информация для браузера и поисковых систем. В тегах
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,