Почему html документ не видит список
Перейти к содержимому

Почему html документ не видит список

Apache не видит файлы на сервере

Добрый день, сообщество! Возникла проблема с настройкой Apache под Linux CentOS 5. Переношу сайт созданный на базе самописной cms (phtml + php) в незапамятные времена. В общем несколько нюансов в процессе обнаружил.Создал виртуальный хост, он успешно откликается на домен, реагирует на правила в .htaccess. Проблема заключается в том что apache при запросе к любому файлу кроме phtml (про php пока не могу понять видит он их или нет, но судя потому, что ничего из базы сайт не выводит можно сделать вывод что php скрипты apache не видит). При попытке обратиться к любой директории или например изображению (в корне или нет без разницы) возвращает 404 хотя файл там есть. Читал топики предыдущих авторов вроде все рекомендации учёл, AllowOverride All прописал, и chmod выставил (на папки 755 на файлы 644). Но всё равно не работает. Ради эксперимента попробовал указать интересный для меня документ в папке в качестве DirectoryIndex (магия, но всё работает, документ отображается). Помогите пожалуйста найти проблему. К сообщению прилагаю конфиг для созданного виртуального хоста:

 ServerAdmin admin@localhost ServerName site.ru ServerAlias *site.ru DocumentRoot /home/dir/www3/ AccessFileName .htaccess AddType application/x-httpd-php phtml php ErrorLog logs/petrof_error_log CustomLog logs/petrof_access_log combined DefaultType All AllowOverride All Order allow,deny Allow from all Options FollowSymLinks MultiViews AllowOverride All AddType application/x-httpd-php phtml php DirectoryIndex index.phtml index.php index.html index.htm Order allow,deny Allow from all php_admin_value session.save_path /tmp/php_sessions/www php_admin_value upload_tmp_dir /tmp/php_upload/www 

iDom
29.04.13 18:36:21 MSK

Навигация по DOM-элементам

DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект.

Все операции с DOM начинаются с объекта document . Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу.

Так выглядят основные ссылки, по которым можно переходить между узлами DOM:

Поговорим об этом подробнее.

Сверху: documentElement и body

Самые верхние элементы дерева доступны как свойства объекта document :

= document.documentElement Самый верхний узел документа: document.documentElement . В DOM он соответствует тегу . = document.body Другой часто используемый DOM-узел – узел тега : document.body . = document.head Тег доступен как document.head .

Есть одна тонкость: document.body может быть равен null

Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.

В частности, если скрипт находится в , document.body в нём недоступен, потому что браузер его ещё не прочитал.

Поэтому, в примере ниже первый alert выведет null :

        

В мире DOM null означает «не существует»

В DOM значение null значит «не существует» или «нет такого узла».

Дети: childNodes, firstChild, lastChild

Здесь и далее мы будем использовать два принципиально разных термина:

  • Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например, и являются детьми элемента .
  • Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.

    (и несколько пустых текстовых узлов):

    и вложенные в них:
    (ребёнок

      ) и (ребёнок
      ) – в общем, все элементы поддерева.

    Коллекция childNodes содержит список всех детей, включая текстовые узлы.

    Пример ниже последовательно выведет детей document.body :

    Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент . На самом деле, в документе есть ещё «какой-то HTML-код», но на момент выполнения скрипта браузер ещё до него не дошёл, поэтому скрипт не видит его.

    Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему элементу.

    Они, по сути, являются всего лишь сокращениями. Если у тега есть дочерние узлы, условие ниже всегда верно:

    elem.childNodes[0] === elem.firstChild elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

    Для проверки наличия дочерних узлов существует также специальная функция elem.hasChildNodes() .

    DOM-коллекции

    Как мы уже видели, childNodes похож на массив. На самом деле это не массив, а коллекция – особый перебираемый объект-псевдомассив.

    И есть два важных следствия из этого:

    1. Для перебора коллекции мы можем использовать for..of :
    for (let node of document.body.childNodes) < alert(node); // покажет все узлы из коллекции >

    Это работает, потому что коллекция является перебираемым объектом (есть требуемый для этого метод Symbol.iterator ).

    1. Методы массивов не будут работать, потому что коллекция – это не массив:
    alert(document.body.childNodes.filter); // undefined (у коллекции нет метода filter!)

    Первый пункт – это хорошо для нас. Второй – бывает неудобен, но можно пережить. Если нам хочется использовать именно методы массива, то мы можем создать настоящий массив из коллекции, используя Array.from :

    alert( Array.from(document.body.childNodes).filter ); // сделали массив

    DOM-коллекции – только для чтения

    DOM-коллекции, и даже более – все навигационные свойства, перечисленные в этой главе, доступны только для чтения.

    Мы не можем заменить один дочерний узел на другой, просто написав childNodes[i] = . .

    Для изменения DOM требуются другие методы. Мы увидим их в следующей главе.

    DOM-коллекции живые

    Почти все DOM-коллекции, за небольшим исключением, живые. Другими словами, они отражают текущее состояние DOM.

    Если мы сохраним ссылку на elem.childNodes и добавим/удалим узлы в DOM, то они появятся в сохранённой коллекции автоматически.

    Не используйте цикл for..in для перебора коллекций

    Коллекции перебираются циклом for..of . Некоторые начинающие разработчики пытаются использовать для этого цикл for..in .

    Не делайте так. Цикл for..in перебирает все перечисляемые свойства. А у коллекций есть некоторые «лишние», редко используемые свойства, которые обычно нам не нужны:

       

    Соседи и родитель

    Соседи – это узлы, у которых один и тот же родитель.

    Например, здесь и соседи:

    • говорят, что – «следующий» или «правый» сосед
    • также можно сказать, что «предыдущий» или «левый» сосед .

    Следующий узел того же родителя (следующий сосед) – в свойстве nextSibling , а предыдущий – в previousSibling .

    Родитель доступен через parentNode .

    // родителем является alert( document.body.parentNode === document.documentElement ); // выведет true // после идёт alert( document.head.nextSibling ); // HTMLBodyElement // перед находится alert( document.body.previousSibling ); // HTMLHeadElement

    Навигация только по элементам

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

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

    Поэтому давайте рассмотрим дополнительный набор ссылок, которые учитывают только узлы-элементы:

    Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element :

    • children – коллекция детей, которые являются элементами.
    • firstElementChild , lastElementChild – первый и последний дочерний элемент.
    • previousElementSibling , nextElementSibling – соседи-элементы.
    • parentElement – родитель-элемент.

    Зачем нужен parentElement ? Разве может родитель быть не элементом?

    Свойство parentElement возвращает родитель-элемент, а parentNode возвращает «любого родителя». Обычно эти свойства одинаковы: они оба получают родителя.

    За исключением document.documentElement :

    alert( document.documentElement.parentNode ); // выведет document alert( document.documentElement.parentElement ); // выведет null

    Причина в том, что родителем корневого узла document.documentElement ( ) является document . Но document – это не узел-элемент, так что parentNode вернёт его, а parentElement нет.

    Эта деталь может быть полезна, если мы хотим пройти вверх по цепочке родителей от произвольного элемента elem к , но не до document :

    while(elem = elem.parentElement) < // идти наверх до alert( elem ); >

    Изменим один из примеров выше: заменим childNodes на children . Теперь цикл выводит только элементы:

    Работа с картинками в HTML и CSS

    Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.

    Содержание:

    1. Как вставить картинку в HTML
    2. Как изменить размер картинки в HTML
    3. Как указать путь к файлу изображения
    4. Как сделать картинку ссылкой
    5. Как поставить на фон картинку
    6. Как установить размер картинки в CSS
    7. Как сделать картинку адаптивной
    8. Как разместить текст на картинке
    9. Как выровнять картинку по центру веб-страницы
    10. Как сделать обтекание картинки текстом
    11. Как выстроить картинки в ряд
    12. Как изменить размер картинки при наведении на неё курсора мыши
    13. Почему не отображается картинка в HTML

    Как вставить картинку в HTML

    В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента . Без него этот тег не используют.

    Ещё одним обязательным атрибутом элемента является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.

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

    Таблица. Основные атрибуты элемента

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

    HTML картинка. Примеры

    Как добавить картинку в HTML?

    Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег и его обязательные атрибуты src и alt. Также, поскольку тег – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например, или .

    Здесь должна быть картинка

    Как изменить размер картинки в HTML?

    Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.

    Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).

    Как указать путь к файлу изображения в HTML?

    Адрес ссылки на файл изображения может быть абсолютным и относительным.

    Абсолютный путь показывает точное местонахождение файла, а относительный показывает путь к файлу относительно какой-либо «отправной точки».

    Примеры:

    https://site/img/D-Nik-Webmaster.jpg – это абсолютный адрес файла D-Nik-Webmaster.jpg так как путь к нему указан полностью.

    /img/D-Nik-Webmaster.jpg – это относительный путь от корневого каталога. Знак «/» в самом начале указывает на то, что это корень каталога и выше по директории подниматься нельзя. Если файл index.html (HTML-документ) находится в каталоге site, то этот каталог будет корневым («отправной точкой»).

    ../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster.jpg.

    ../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.

    Как сделать картинку ссылкой в HTML

    Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента обрамить в тег .

    Картинка CSS. Примеры

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

    Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.

    Как поставить на фон картинку в HTML?

    Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.

           Как поставить на фон картинку в HTML  

    Здесь будет написан какой-нибудь текст

    Как установить размер картинки в CSS

    Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:

    1. Давайте создадим новый класс imgsize.
    2. Для элементов этого класса пропишем свойство width равным 350px.
    3. Присвоим картинке созданный ранее класс imgsize.

    Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).

            Как вставить картинку в HTML  

    КартинкаЗдесь будет написан какой-нибудь текст

    Как сделать картинку адаптивной

    Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.

    Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:

    Как разместить текст на картинке

           /* Картинку и текст помещаем в контейнер */ .container < position: relative; text-align: center; color: white; >/* Стили для текста */ .text-block Как вставить картинку в HTML   
    Картинка
    Это наш текст

    Как выровнять картинку по центру веб-страницы

    Способ №1

    Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.

           /* Способ 1 */ .center-img Как вставить картинку в HTML     
    Способ №2

    Помещаем картинку в блок или параграф , присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.

           /* Способ 1 */ .pull-center Как вставить картинку в HTML   

    Как сделать обтекание картинки текстом

    Выровнять изображение по левому, или по правому краю веб-страницы (или какого-нибудь блока, контейнера) можно с помощью свойства float.

    Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:

            Как вставить картинку в HTML  

    Пример выравнивания картинки по левому краю и обтекания её текстом справа

    Если ты сейчас читаешь мою книгу, или просматриваешь этот материал на сайте www.d-nik.pro, значит, тебя интересует создание сайтов для начинающих с нуля. И так как HTML является самой важной составляющей каждой веб-страницы в интернете, изучение мы начнем именно с этого языка.

    Здесь хочу отметить, что HTML не является языком программирования. Это язык гипертекстовой разметки. Поэтому, в ходе прочтения данной книги, термин «язык HTML» будет встречаться тебе очень часто, но нужно понимать, что на HTML не программируют.

    Главная задача HTML – отобразить в окне браузера определенные данные. С помощью этого языка веб-разработчики выводят на странице сайта такие элементы как: ссылки, кнопки, поля для ввода текста, таблицы, картинки, видео, статьи и прочее.

    Пример выравнивания картинки по правому краю и обтекания её текстом слева

    Но с помощью HTML нельзя произвести никаких вычислительных операций (Например, сложить два числа, или произвести их умножение и т.д.).

    Отсюда и вывод. Задача языка программирования – обработка данных. А задача HTML – отображение данных. Вот поэтому HTML и не является языком программирования.

    Хотя, как и любой другой язык программирования, HTML имеет свой синтаксис, семантику и лексику. И знание HTML позволяет создавать сайты с нуля. Даже на чистом HTML (без использования CSS и JavaScript) можно создать вполне приличный одностраничный сайт. Хотя конечно же сделать это используя все вместе (HTML, CSS и JavaScript) будет намного проще.

    Но я считаю, что для того, чтобы научиться создавать свои собственные сайты с нуля, нужно знать основы-основ – а это как раз и есть язык HTML.

    Как выстроить картинки в ряд

    Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок или параграф , присвоить класс этому блоку (или параграфу), и установить следующие правила:

    .img-line < border: 2px solid #55c5e9; /* Рамка вокруг фотографии */ padding: 15px; /* Расстояние от картинки до рамки */ background: #666; /* Цвет фона */ margin-right: 10px; /* Отступ справа */ margin-bottom: 10px; /* Отступ снизу */ >

    Весь код будет выглядеть так:

            Как вставить картинку в HTML   

    Как изменить размер картинки при наведении на неё курсора мыши

    Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.

    Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:

            Как вставить картинку в HTML     

    Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок . Для этого блока задать свойство display со значением inline-block, чтобы стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока .

            Как вставить картинку в HTML   

    Почему не отображается картинка в HTML?

    Причин почему картинка не отображается на веб-странице может быть несколько:

    1. Неверный адрес файла. Чаще всего, картинка на сайте не показывается из-за того, что в HTML коде указан не верный путь к файлу изображения. Особенно внимательным нужно быть при составлении относительного пути к файлу. О том, как указать этот путь правильно мы уже говорили ранее. Поэтому повторяться не будем.
    2. Несовпадение регистра, или неправильное имя файла. С неправильным именем файла думаю всё понятно. Если картинка не отображается, то первым делом проверьте правильно ли вы написали имя файла этого изображения. Также, указывая путь к файлу, обязательно нужно соблюдать регистр букв (маленькие буквы писать маленькими, большие — большими). Ведь если в качестве операционной системы веб-сервера выступает Unix-подобная система, то она различает регистр символов. Поэтому файлы logo.jpg и Logo.jpg (или loGo.jpg) эта система будет распознавать как два абсолютно разных файла. Вот почему я рекомендую постоянно писать имена файлов соблюдая регистр букв.
    3. Разница добавления картинок в HTML-документ на локальном компьютере и веб-сервере. У многих пользователей на веб-сервере, путь /img/logo.jpg отлично работает. А вот на локальном компьютере путь к картинке нужно писать без слеша в самом начале – img/logo.jpg. Cимвол слэш (/) перед именем файла или папки говорит о том, что отсчет должен вестись от корня сайта. Соответственно, путь /img/logo.jpg следует понимать так: в корне сайта находится папка с именем img, а в ней располагается файл logo.jpg. А вот на локальном компьютере браузер будет интерпретировать такой путь как c:/img/logo.jpg, что является ошибкой. Ведь такой папки у нас нет.

    Подключение внешних ресурсов и работа с формами

    Это занятие начнем с рассмотрения способа подключения внешних ресурсов к шаблону HTML-документа. Наверное, многие из вас знают, что полноценные страницы сайта представляются не только файлом HTML с набором тегов, но и, например, каскадными таблицами стилей (CSS), JavaScript-программами, которые исполняются в браузере клиента и другими дополнительными внешними ресурсами.

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

    о которой мы говорили на предыдущем занятии. Ее также можно вызывать непосредственно в шаблоне и она будет связана с текущим контекстом запроса, по которому берется шаблон. То есть, функция url_for корректно отработает и корректно возвратит запрашиваемый URL-адрес. Но что следует прописать первым аргументом у этой функции. Как мы говорили, там должно фигурировать имя функции-обработчика. Но здесь же нам нужен не обработчик а путь к внешнему файлу. Для этого во Flask для url_for зарезервировано специальный параметр

    который означает, что нужно обратиться к подкаталогу ‘static’ и там взять файл, указанный в именованном параметре

    Давайте подключим оформление к страницам сайта в шаблоне base.html, используя эту функцию:

    link type="text/css" href=">" rel="stylesheet" />

    В данном случае функция url_for возвратит путь:

    и в шаблон будет подключен этот файл оформления страницы. Содержимое этого файла следующее (см. видео). Я не буду здесь подробно объяснять как работают эти стили, если вы не знакомы с CSS, то посмотрите это занятие.

    Обновим страницу, увидим следующий результат:

    Чтобы таблицы стилей были применены к соответствующим элементам HTML-документа, добавим следующие строчки (в base.html):

    ul class="mainmenu">/ul> div class="clear">/div> div class="content">/div>

    Теперь, при обновлении увидим такую страницу:

    Далее, добавим ссылки нашим пунктам меню:

    li>a href=">">{{m.name}}/a>/li>

    А само меню в программе представим в виде списка словарей:

    menu = [{"name": "Установка", "url": "install-flask"}, {"name": "Первое приложение", "url": "first-app"}, {"name": "Обратная связь", "url": "contact"}]

    Теперь при обновлении страницы мы увидим полноценное меню.

    Аналогичным образом можно подключать и другие внешние файлы.

    Работа с формой (form)

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

    • GET – в виде строки запроса: «/handler?name=Alex&old=18&profit=1000»;
    • POST – в виде бинарных данных (используется для передачи больших объемов данных: изображений, звуков, документов и т.п., а также закрытых сведений: паролей, логинов и т.п.).
    {% extends 'base.html' %} {% block content %} {{ super() }} form action="/contact" method="post" class="form-contact"> p>label>Имя: /label> input type="text" name="username" value="" requied /> p>label>Email: /label> input type="text" name="email" value="" requied /> p>label>Сообщение:/label> p>textarea name="message" rows=7 cols=40>/textarea> p>input type="submit" value="Отправить" /> /form> {% endblock %}

    Мы здесь указали способ отправки данных в виде POST-запроса и обработчик «/contact», которому будут переданы данные из формы. Далее, пропишем следующее оформление формы (в файле styles.css):

    .form-contact label { display: inline-block; min-width: 80px; } .form-contact p {margin: 10px 0 10px 0;} .form-contact input[type=submit], textarea { font-size: 16px; }

    Запустим программу, откроем в браузере страницу http://127.0.0.1:5000/contact и увидим следующий результат: Если сейчас ввести в форму какие-либо данные и нажать на кнопку отправить, то сервер возвратит ошибку: 405 – запрет на прием данных (Method Not Allowed) Дело в том, что в обработчике мы должны явно указать: может ли он принимать данные методом POST. Для этого нужно прописать параметр methods со значением POST как элемент списка:

    @app.route("/contact", methods=["POST"])

    Или так, если хотим обрабатывать и POST и GET запросы:

    @app.route("/contact", methods=["POST", "GET"])

    Далее в обработчике проверим: пришел ли именно POST-запрос, а не какой-либо другой и выведем данные в консоль:

    if request.method == 'POST': print(request.form)

    А вначале импортируем этот объект:

    from flask import Flask, render_template, request

    Мы здесь используем объект request, который связан с данными текущего запроса и существует в пределах контекста запроса, как мы это отмечали на предыдущих занятиях. Далее, все данные формы доступны по свойству form, которое представляет своеобразный словарь, то есть, для доступа к конкретному полю можно использовать следующую запись:

    print(request.form['username'])

    Мы пока не будем нигде сохранять принятые данные, т.к. для этого следует использовать БД, о которой еще ничего не говорили. Главное, на этом этапе понимать, как происходит прием данных от формы и их представление в объекте request. На этом завершим это занятие. На следующем продолжим изучать функционал работы с формами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *