Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Основы HTML.

(продолжение)

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

                 < ul>
                      < li>Розыгрыш l< /li>
                      < li>Розыгрыш  2< /li>
                 < /ul>
                  
                 или посмотрите то, что на практике бывает:
                 
                 < ul>
                        < li>< a href="../strojsait/novichok.html">Как создать сайт?< /a>< /li>
                        < li>< a href="../strojsait/vvedenie1.html">Как написать страницу?< /a>< /li>
                        < li>< a href="../strojsait/nachalo.html">С чего начать?< /a>< /li>
                        < li>< a href="../strojsait/saittag.html">Немного о разметках, кодах, стилях< /a>< /li>
                        < li>< a href="../strojsait/saittag1.html">Что такое структура страницы?< /a>< /li>
                        < li>< a href="../strojsait/saittag2.html">Структура страницы.< /a>< /li>
                        < li>< a href="../strojsait/saittag3.html">Блоковая структура.< /a>< /li>
                        < li>< a href="../strojsait/saittag4.html">Метод " детского любопытства".< /a>< /li>
                        < li>< a href="../strojsait/saittag5.html">Блочная структура в кодах PHP.< /a>< /li>
                        < li>< a href="../strojsait/saittag6.html">Посмотрим, что у нас получилось.< /a>< /li>
                        < li>< a href="../strojsait/saittag7.html">Начинаем разукрашивать страницу.< /a>< /li>
                  < /ul>

как видите, тут в несортированные списки < ul>...< /ul> вкладываются пункты списка < li>...< /li>, в пункты списка в свою очередь вкладываются так называемые гипертекстовые ссылки < a>...< /a>.

Теперь такой пример вложенности в элемент формы form так называемый элементов "опросник" ввода input с его атрибутами и вызова составленных кнопок в отдельном вложенном блоке div с идентификатором id="obertka0:

                      < form action="opros.php" method="post"> 
 
                             < input type="text" name="text1" value="text1"> 
                             < input type="checkbox" name="box1" value="box1"> 
                             < input type="submit" name="submit1" value="Отправить 1 блок"> 
                      
                             < input type="text" name="text2" value="text2"> 
                             < input type="checkbox" name="box2" value="box2"> 
                             < input type="submit" name="submit2" value="Отправить 2 блок">
                   
                             < input type="text" name="text3" value="text3"> 
                             < input type="checkbox" name="box3" value="box3"> 
                             < input type="submit" name="submit3" value="Отправить 3 блок"> 
   
                             < input type="submit" name="all" value="Отправить"> 
                      < /form>

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

                    < div id="obertka0"> 
                    
                           < div id="obertka1"> 
                                        < input type="text" name="text1">
                                        < input type="checkbox" name="chk1" value="1"> 
                                        < input type="button" value="Сохранить" onclick="ds('obertka1');"> 
                           < /div> 
 
                           < div id="obertka2"> 
                                        < input type="text" name="text2">
                                        < input type="checkbox" name="chk2" value="2"> 
                                        < input type="button" value="Сохранить" onclick="ds('obertka2');"> 
                           < /div> 
  
                           < div id="obertka3"> 
                                         < input type="text" name="text3">
                                         < input type="checkbox" name="chk3" value="3"> 
                                         < input type="button" value="Сохранить" onclick="ds('obertka3');"> 
                           < /div> 
 
                    < /div>

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

Распространенная ошибка в HTML - закрывание родительского элемента сайта до того, как будет закрыт элемент, который в него вложен (потомок). Это приводит к неверному перекрытию элементов и XHTML-документ сайта становится плохо сформированным и может привести к ошибкам в отображении HTML-документов на сайте. Далее в примере элементы вложены неверно, поскольку элемент strong должен быть закрыт до элемента а (анкер). НЕВЕРНО:

                     	< а	href="#"> Click < strong> here. < /a> < /strong>

Есть другая неправильная вложенность элементов - обратная вложенность элементов. Например, когда в гиперссылку a вкладывается абзац p:

                        < a href="../strojsait/novichok.html">< p>Как создать сайт?< /p>< /a>

Хотя некоторые браузеры не брезгуя могут отображать правильно такую запись кода программы сайта. Но, так нельзя писать, это неправильная запись строки программы на страницах сайта. Ссылка a не должна содержать абзац p, наоборот все ссылки должны находиться только в абзаце на странице сайта.

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

Переносы строки < br /> страниц сайта в HTML.

Переносы строки в HTML-документе сайта рассматриваются как пробелы, которые, как правило, объединяются с другими пробелами.

Текст и элементы в HTML выводятся непрерывно, пока в тексте не встретится элемент р или br. Однако переносы строк на странице сайта отображаются, если текст размечен как предварительно отформатированный < рr>...< /pre> или, если в таблице стилей используется свойство white-space: рrе.

             < pre>
                  < ul>
                        < li>< a href="../strojsait/novichok.html">Как создать сайт?< /a>< /li>
                        < li>< a href="../strojsait/vvedenie1.html">Как написать страницу?< /a>< /li>
                        < li>< a href="../strojsait/nachalo.html">С чего начать?< /a>< /li>
                        < li>< a href="../strojsait/saittag.html">Немного о разметках, кодах, стилях< /a>< /li>
                        < li>< a href="../strojsait/saittag1.html">Что такое структура страницы?< /a>< /li>
                        < li>< a href="../strojsait/saittag2.html">Структура страницы.< /a>< /li>
                        < li>< a href="../strojsait/saittag3.html">Блоковая структура.< /a>< /li>
                        < li>< a href="../strojsait/saittag4.html">Метод " детского любопытства".< /a>< /li>
                        < li>< a href="../strojsait/saittag5.html">Блочная структура в кодах PHP.< /a>< /li>
                        < li>< a href="../strojsait/saittag6.html">Посмотрим, что у нас получилось.< /a>< /li>
                        < li>< a href="../strojsait/saittag7.html">Начинаем разукрашивать страницу.< /a>< /li>
                  < /ul>
            < /pre>
     
                     вот так создается предварительно отформатированный сайт.

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: