Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Примеры html, css решений частных вопросов

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

1. Одна таблица для создания общего макета

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

<table cellspacing="0">
<tr>
<td>левый ряд</td>
<td>центр</td>
<td>правый ряд</td>
</tr>
</table>
Для того чтобы добавить меню и прочее, вставляйте свой код (список, див...) между <td></td>. Для того чтобы использовались отступы, их можно задать как новому диву, к примеру рассмотрим sidebar (левый ряд)
<table cellspacing="0">
<tr>
<td>
<div id="sidebar">левый ряд</div>
</td>
<td>центр</td>
<td>правый ряд</td>
</tr>
</table>
И добавляем css:

div#sidebar {margin:10px;}/*получаем отступы по всему кругу, или же margin:0 10px; отступы только справа и слева.*/
Ответ:

html css решения. Сайт мой.
Собрано множество решений по вёрстке, некоторые решены на javascript и jquery.
Присутствуют также такие сложные кроссбраузерные вещи как:
Стилизация селекта (безумно востребованное решение)
Стилизация радиокнопки
Слайдер постраничный для картинок
Нестандартный input type file
Таблица в div подстраивающаяся под контент любой ячейки
Нестандартный input type submit
футер внизу

Когда начинал заниматься вёрсткой - бывало что долго искал эти решения по разным сайтам.
Захотел собрать всё в одном месте. Сам пользуюсь каждый день.
Вопрос: Нужна подсказка по форме HTML

Господа, прошу помощи!
Только не ругайтесь сильно, изучать html я начал всего две недели назад и не по своей воле.
Пересмотрел все доступные учебники с примерами, но решения не нашел.

Суть вопроса.
Как в редакторе FrontPage (можно в "блокноте") создать такую форму. Форма содержит одно поле ввода и одну кнопку "перейти". Пользователь вводит в поле число вида 12345678 и нажимает на кнопку. После чего в новом окне открывается ссылка вида (которая реально находится на хостинге). Если при вводе пользователь ошибся и ввел несуществующий номер 12345679, то безразлично что произойдет. Можно направить пользователя на несуществующий адрес с неизбежной ошибкой 404, можно выдать сообщение о неправильном номере или... на ваше усмотрение. Чем проще реализация, тем лучше, т.к. я еще совсем "зеленый" в этом деле.
Какой либо защиты от подбора числа, наверное, не требуется, т.к. проект некоммерческий и рассчитан на детей младшего и среднего школьного возраста. Хотя, специалистам виднее.

Заранее благодарен всем откликнувшимся!
Ответ: Shakalaka, спасибо ОГРОМНОЕ!
Все, наконец-то до меня дошло. Сейчас протестировал, все нормально работает.
Для других желающих приобщиться к мудрости Шакалаки я немного подправил:

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
<form id="form" method="post" action="http://cyberforum.ru">
    <label> number  <input id='check' type="text"></label><input type="submit" value="Перейти" >
</form>
<script>
    var form = document.getElementById("form");
    var check = document.getElementById("check");
    form.onsubmit = function(){
        this.action = "http://cyberforum.ru/" + check.value + "/index.html";
    }
 
</script>
Соответственно, вместо вводится тот адрес, который требуется.
Вопрос: Необхоим пример html table с возможность добавить строку

Здравствуйте.

Хочу поместить на форму объект типа таблицу с возможностью добавлять новые строки и удалять добавленные.

Подскажите каким образом это лучше сделать.

На текущий момент удалось найти следующую библиотеку

//code.jquery.com/jquery-1.12.3.js



все бы ничего, НО при нажатии кнопки новая строка появляется, НО после сразу же пропадает

<script type="text/javascript">
                $(document).ready(function() {
                    var t = $('#example').DataTable();
                    var counter = 1;

                    $('#addRow').on( 'click', function () {
                        t.row.add( [
                            counter +'.1',
                            counter +'.2',
                            counter +'.3',
                            counter +'.4',
                            counter +'.5',
                            counter +'.6'
                        ] ).draw(false);

                        counter++;
                    } );

                    // Automatically add a first row of data
                    // $('#addRow').click();
                } );
        </script>


<button id="addRow" class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>


        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </tfoot>
        </table>


Подскажите в чем может быть проблема.
Ответ: Школота штоле к пересдаче ЭГЕ готовится? Ну так не делается, чтобы сперва запихать данные в хтмл, а потом доставать их оттудова, чтобы запихать в БД. Такое может придумать только какой-нить дебильный автор дебильного учебника, типа а вот так сделай, пофигу зачем. )))

Перед тем как запихивать данные в хтмл, надо просто запомнить что запихано и где, по индексам строк и массивов например. А потом просто берешь этот массив и грузишь в сервер через json.
Вопрос: Фильтр поиска шин на HTML

Здравствуйте форумчане! =))
Мне нужна помощь в написании фильтра на HTML.
Помогите его доработать)

При выставлении параметров, и нажатии на кнопку "Выбрать" на сайт должен поступать запрос в виде:
размер: 32 высота: 50 диаметр 20 сезонность: зимние

Это скрин скрипта:



Это сам код:
HTML5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
 
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подбор шины</title>
</head>
 
<body>
 
<table border="0" width="100%">
    <tr>
        <td>Подбор шины</td>
    </tr>
    <tr>
        <td>
        <table border="0" width="100%">
            <tr>
                <td width="138">Ширина:</td>
                <td>
<font face="Segoe UI">
<select name="ширина" style="width:125;height:21">
<option value="0">ширина:</option>
                                                                                                                                                    <option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="9.5">9.5</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="35">35</option>
<option value="37">37</option>
<option value="120">120</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="160">160</option>
<option value="165">165</option>
<option value="175">175</option>
<option value="185">185</option>
<option value="190">190</option>
<option value="195">195</option>
<option value="205">205</option>
<option value="215">215</option>
<option value="225">225</option>
<option value="235">235</option>
<option value="245">245</option>
<option value="255">255</option>
<option value="265">265</option>
<option value="275">275</option>
<option value="285">285</option>
<option value="295">295</option>
<option value="305">305</option>
<option value="315">315</option>
<option value="325">325</option>
</select></font></td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
        <table border="0" width="100%">
            <tr>
                <td width="138">Высота:</td>
                <td>
<font face="Segoe UI">
<select name="theight" style="width:126;height:21">
<option value="0">высота:</option>
<option value="9.5">9.5</option>
<option value="10.5">10.5</option>
<option value="11.5">11.5</option>
<option value="12.5">12.5</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="85">85</option>
<option value="90">90</option>                                                                                                                                          </select></font></td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
        <table border="0" width="100%">
            <tr>
                <td width="138">Диаметр:</td>
                <td>
<font face="Segoe UI">
<select name="tdiam" style="width:127;height:21">
<option value="0">диаметр:</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="24">24</option>                                                                                                                                          </select></font></td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
        <table border="0" width="100%">
            <tr>
                <td>
<font face="Segoe UI">
<input class="ShuBtnn" type="submit" name="select1" value="выбрать"></font></td>
            </tr>
        </table>
        </td>
    </tr>
</table>
 
</body>
 
</html>
Нужно его доработать, добавить функцию поиска.
Сайт работает на Wordpress.
Ответ: aerono, давайте разбираться... Во-первых, вопрос такого плана: Вы не пробовали искать аналогичный фильтр среди расширений для wp... Возможно подобная плюшка уже кем-то могла быть разработана и есть в свободном доступе... На ветке HTML обычно размещаются вопросы, связанные именно с вёрсткой, так что если Вам необходима помощь именно в написании запросов на php - я могу перенести Ваш вопрос либо на ветку php - либо на ветку движка wp, на Ваше усмотрение... Если же Вас всё-таки интересует внешний вид фильтра, то конкретизируйте задачу, какие именно элементы необходимо привести в порядок...
Вопрос: Литература и ресурсы по HTML/CSS

Литература по HTML/CSS

1. Чак Муссиано и Билл Кеннеди "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г. (рекомендую)
"HTML и XHTML. Подробное руководство" - самая полная и современная книга по языкам HTML и XHTML, разъясняющая работу и взаимодействие каждого их элемента. Она удачно сочетает в себе лучшие качества понятного учебного пособия, адресованного начинающим, и всеобъемлющего справочника, который всегда под рукой даже у опытных веб-программистов. Этот труд, ставший классическим, содержит все от базового описания синтаксиса и семантики до практических советов, поможет вам найти свой неповторимый стиль и в совершенстве овладеть языком веб-дизайна.
Описаны стандарты HTML 4.01, XHTML 1.0 и CSS2, приведен обзор еще не вступивших в силу стандартов XHTML 2 и CSS3. Уделено внимание к новейшим инициативам разработчиков XHTML (XForms, XFrames и модуляризации), а также основам XML. Рассмотрены: управление внешним видом документа с помощью таблиц стилей; работа с HTML-кодом, сгенерированным автоматически; работа с фреймами, интерактивными формами, динамическими документами; интеграция HTML-кода с мультимедийными данными, сценариями JavaScript и Java-апплетами.
2.Эрик А. Мейер "CSS. Каскадные таблицы стилей. Подробное руководство " 3-е издание. Издательство: Символ-Плюс, 2008 г. (рекомендую)
"CSS. Каскадные таблицы стилей. Подробное руководство" показывает, как реализовать на практике все возможности каскадных таблиц стилей для стандартов CSS2 и CSS2.1. Множество примеров позволят научиться быстро и без усилий разрабатывать стилевое оформление веб-страниц, отвечающее современным требованиям.
Эрик Мейер рассматривает все свойства CSS и их взаимодействие, теги, атрибуты, реализации, поддержку различными броузерами, дает рекомендации разработчикам. Вы узнаете о сложном стилевом оформлении документов, пользовательском интерфейсе, верстке таблиц, о списках и генерируемом содержимом, о свободном перемещении и позиционировании, о семействах шрифтов и механизмах резервирования, о том, как работает модель блоков, о новых селекторах CSS3, поддерживаемых IE7, Firefox и другими броузерами.
Книга поможет избежать распространенных ошибок, она является полным справочником по CSS и будет полезна как опытному веб-разработчику, так и новичку. От читателя потребуется только знание HTML 4.O.
3. Роберт Агулар "HTML и CSS. Основа любого сайта " Издательство: Эксмо, 2010 г.
Самый эффективный способ обучения программированию - самостоятельное выполнение практических заданий. На этом принципе и построена данная книга. Большое количество лаконичных и емких примеров с детальным разбором позволят вам максимально эффективно изучить основы HTML и CSS.
В книге вы найдете детальную информацию по всем элементам веб-страницы, рассортированную по темам. Материал организован так, чтобы максимально упростить обучение: вначале автор показывает пример кода, далее - даст соответствующие объяснения.
Кроме описания основ HTML и CSS, вы найдете в книге рекомендации по созданию списков, таблиц, фреймов, форм, встраиванию картинок любого рода и дополнительные примеры каскадных таблиц стилей. Книгу завершает обзор команд HTML и CSS, поэтому она будет полезна вам как справочник и после того, как вы полностью их освоите.
4. Э. Кастро "HTML и CSS для создания Web-страниц " Издательство: НТ Пресс, 2006 г.
Эта книга является руководством по созданию Web-сайта на основе технологий HTML и CSS. Вы можете создавать HTML- или CSS-коды в любом текстовом редакторе, который есть на вашем компьютере. Книга научит вас создавать главную и внутренние страницы Web-сайта, а также публиковать ваш сайт, вы узнаете, как форматировать текст, выбирать фон, создавать навигационную панель и ссылки на другие страницы, использовать специальные типографические символы и буквы для создания профессионального вида вашего сайта, получить Web-хостинг и Web-домен, установить FТР-программы, передать файлы на сервер, зарегистрироваться в поисковиках. С помощью иллюстраций и пошаговых инструкций этой книги вы сможете создать свой сайт всего за несколько часов.
5. Н. Комолова, Е. Яковлева "HTML. Самоучитель "2-е издание. Издательство: Питер, 2011 г.
Самоучитель содержит последовательное изложение процесса создания веб-страниц с помощью языка HTML. Подробно рассмотрены процесс создания изображений для размещения на веб-странице (в программе Adobe Photoshop) и общие вопросы веб-дизайна. Книга содержит более 100 упражнений, позволяющих на практике закрепить изучаемый материал. Новое издание существенно обновлено актуальной информацией и дополнено материалом о технологиях XML, XHTML, DHTML, а также описанием нового стандарта HTML5.
Для студентов, преподавателей вузов и широкого круга читателей, желающих самостоятельно научиться созданию веб-страниц с помощью HTML.
6. Джейсон Кренфорд Тиге "DHTML и CSS для Internet "3-е издание. Издательство: НТ Пресс, 2007 г.

В книге описывается использование современных Web-технологий - динамического HTML (DHTML) и каскадных таблиц стилей (CSS), используемых в Web-программировании для создания интерактивных динамических Web-узлов. С помощью этой книги вы научитесь создавать динамические Web-страницы, включающие интерактивные элементы, различные текстовые, графические и анимационные эффекты.
Изложение материала сопровождается наглядными примерами, даются советы по планированию и созданию Web-сайтов.
Книга адресована Web-программистам и Web-дизайнерам, а также всем, кто интересуется языком DHTML и прикладными Web-тех.
7. Джон Дакетт "Основы веб-программирования с использованием HTML, XHTML и CSS " 2-е издание. Издательство: Эксмо, 2010 г. (рекомендую)
Существуют три основные технологии, обеспечивающие работу всех сайтов на клиентской стороне. Это HTML (XHTML), CSS и JavaScript. Рассматривать любую из них отдельно от других совершенно бессмысленно. Глупо осваивать JavaScript, не зная HTML и CSS. В свою очередь, CSS без знания HTML невозможно применить, а связка HTML+CSS без JavaScript способна не так уж и на многое. Ну и сам по себе HTML (XHTML) позволит создать лишь самые примитивные веб-страницы.
Эта книга предлагает оптимальный подход - изучить все три технологии одновременно. В ней рассматриваются все возможности HTML (XHTML), CSS и JavaScript с самых азов, то есть каких-либо познаний в веб-технологиях не требуется. В то же время книга предполагает некоторые представления о программировании, так как базовые понятия вроде циклов в ней подаются очень лаконично. В книге большое количество примеров, все примеры русифицированы.
8. О. Н. Рева "Использование HTML, JavaScript и CSS. Руководство Web-дизайнера " Издательство: Эксмо, 2008 г. (рекомендую)
Если учесть, с какой скоростью в Интернете увеличивается количество Web-страниц, рано или поздно все мы станем Web-дизайнерами. Это, если хотите, требование сегодняшнего дня. Научитесь с помощью настоящей книги создавать динамические Web-страницы, т. е. такие страницы, которые по требованию пользователя или в зависимости от ситуации меняют свой внешний вид, выполняют вычисления и отображают дополнительную информацию по выбранной теме. Познакомьтесь со сценариями на JavaScript, объектно-ориентированным программированием, таблицами стилей CSS. Все эти средства разработки динамических Web-страниц создавались для того, чтобы помочь вам. Шаг за шагом вы освоите все названные средства на примерах листингов в тексте книги. Особое внимание уделяется вопросам совместимости Web-страниц с приложениями обозревателей, многоязыковой поддержке, динамическому созданию, показу, перемещению и изменению размеров элементов Web-страницы. Вы узнаете, как заявить о своем праве на интеллектуальную собственность с помощью открытого программного лицензирования GNU.
9. С. Айзекс "Dynamic HTML. Секреты создания интерактивных Web - страниц " Издательство: BHV, 2001 г. (рекомендую)
Книга посвящена технологии Dynamic HTML, предназначенной для создания интерактивных Web - страниц. Рассматривается значение объектной модели и каскадных таблиц стилей (CSS) для увеличения скорости и удобства работы с Web - страницами, использование языковпрограммирования JavaScript, JScript, VBScript, C++, Java для доступа к объектной модели документа. Отдельный раздел посвящен изложению основ программирования сценариев. Большое внимание уделено новым элементам, предоставляемых в распоряжение разработчиков технологией Dynamic HTML: HTML 4.0 и расширенной поддержке CSS, динамическому изменению стиля и содержания документа, модели событий, Web - страницам клиент/сервер, внедрению в документ эффектов мультимедиа и анимации.
10. А. А. Дуванов "Web-конструирование. HTML " Издательство: БХВ-Петербург, 2005 г.
В Интернет принимают всех! Эта книга для тех, кто хочет изучить язык HTML, основные правила web-дизайна, освоить способы конструирования гипертекстовых страниц в соответствии с современным уровнем развития этой области информационных технологий.
Книга ориентирована прежде всего на старшеклассников, которые самостоятельно или под руководством наставника решили создать домашнюю страницу в Интернете, школьный сайт или представить в виде гипертекста творческую работу. Используя рекомендации книги и набор ключевых заготовок, учителя также смогут заняться профессиональным творчеством, создавая интерактивные учебники, задачники, испытательные стенды для своих уроков.
Для учащихся 7-11 классов и преподавателей школ.
11. А. А. Дуванов "Web-конструирование. DHTML " Издательство: БХВ-Петербург, 2003 г.
Это вторая книга серии `Web-конструирование`. Она пополняет навыки создания гипертекстовых страниц на базе `чистого` HTML правилами построения каскадных стилевых таблиц (CSS) и основами программирования сценариев на языке JavaScript.
Подробно рассматривается объектная модель браузера, на конкретных примерах объясняется методика построения собственных программных объектов, интегрируемых в общую среду `браузер-гипертекстовое приложение`. Большое внимание уделяется структуре программного кода, дисциплине программирования, тестированию и отладке сценариев.
Для учащихся 10-11 классов и преподавателей школ.

Ресурсы по HTML/CSS

1. (рекомендую)
2. (рекомендую)

P.S Эта тема будет систематически обновляться! Удачи!
Ответ:
Актуальная литература по HTML5



HTML5. Недостающее руководство, Мак-Дональд М. - 2012 год


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




HTML5: Рецепты программирования, Кристофер Шмитт, Кайл Симпсон - 2012 год

Описание:
Эта книга, представляющая собой сборник рецептов и готовых решений, позволит вам получить практический опыт работы с основными элементами HTML5. Издание охватывает широкий круг вопросов: от семантической разметки, веб-форм и мультимедийных элементов до технологий геолокации и JavaScript API. Каждый рецепт, рассматриваемый в книге, включает в себя задачу, пример кода и подробное описание решения. Книга идеально подходит для веб-программистов начального и среднего уровней, которые хотят быстро освоить практические приемы применения HTML5 в веб-разработках.


HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год


Описание:
Эта книга поможет вам получить необходимые знания об этом стандарте и освоить сложные темы, включенные в спецификации HTML5. Вы узнаете, как организовать ваши документы с HTML5, как оформлять их стилями с помощью CSS3 и как работать с самыми продвинутыми JavaScript API. Данное издание не является введением в HTML5, а представляет собой полноценный учебный курс, который научит вас создавать с помощью HTML5 современные сайты и веб-приложения. Каждая глава посвящена определенной ключевой теме HTML5, также рассмотрены сложные вопросы HTML5, CSS3 и JavaScript. Книга содержит множество примеров программного кода, благодаря чему вы сможете легко усвоить и применить знания по каждому тегу, стилю и функции, включенным в спецификации



HTML5. Карманный справочник, 5-е издание, Дженнифер Роббинс - 2015 год

Описание:
Хотите быстро найти описание элемента или атрибута HTML5, используемого на веб-странице или в веб-приложении? Перед вами классический справочник, который веб-дизайнеры и веб-разработчики стараются всегда держать под рукой на протяжении вот уже более 15 лет.



HTML5: Разработка приложений для мобильных устройств, Вейл Э. - 2015 год

Описание:
Создавайте сногсшибательные сайты и приложения для любых мобильных и настольных платформ. Для этого вам потребуется всего лишь добавить в ваш инструментарий веб-разработки технологии HTML5 и CSS3. Вооружившись этой практичной книгой, вы научитесь разрабатывать веб-приложения, которые не только хорошо работают на iOS, Android, Blackberry и Windows Phone, но и очень удобны в использовании. Книга содержит множество примеров кода и разметки. Она поможет вам освоить работу с разнообразными инструментами HTML5 - в частности, с новыми веб-формами, масштабируемой векторной графикой (SVG), холстом (Canvas), localStorage и другими родственными API. Кроме того, в этом издании подробно рассмотрены таблицы стилей CSS3. Вы научитесь разрабатывать приложения, которые одинаково хорошо работают как на огромных мониторах, так и на крошечных экранах.

Актуальная литература по HTML5+CSS3



HTML5 и CSS3. Веб-разработка по стандартам нового поколения, 2-е издание, Хоган Б. - 2014 год


Описание:
Эта книга поможет вам использовать HTML5 и CSS3 прямо сейчас, применяя все богатые возможности, появившиеся в новых веб-стандартах. Вы научитесь применять новую разметку HTML5, разрабатывать улучшенные интерфейсы для форм ввода данных, узнаете, как добавлять аудио, видео и векторную графику на веб-страницы без использования Flash. Вы увидите, как хранение данных на стороне клиента в автономном режиме кэширования может кардинально улучшить скорость загрузки веб-страниц и как в этом помогают простые решения, доступные в CSS3.

Адаптивная вёрстка



Responsive Web Design with HTML5 and CSS3, Ben Frain - 2015 год


Описание:
Сайтов, рассчитанных только на стационарные компьютеры уже недостаточно. Использование мобильного интернета продолжает расти и планшетные компьютеры меняют привычки пользования интернетом. Вы должны научиться как создавать веб-сайты, которые будут "просто работать", в независимости от устройств, используемых для просмотра. Это второе издание Responsive Web Design with HTML5 and CSS3 объясняет все новые технологии и методики, необходимые для создания и поддержания современного адаптивного веб-дизайна.

Язык: Английский


Responsive Web Design with HTML5 and CSS3 Essentials, Alex Libby, Asoj Talesra, Gaurav Gupta - 2016 год


Описание:
Design and deliver an optimal user experience for all devices About This Book Get to grips with the core functionality of RWD through examples Discover how to make layouts, content and media flexible, and explore why a content-first approach is more effective Maximize the performance of your web pages so that they work across all browsers and devices irrespective of the screen size Who This Book Is For This book is for web designers who are familiar with HTML and CSS, and want to begin with responsive web design. Web development experience and knowledge of HTML5, CSS3 is assumed.

Язык: Английский
Вопрос: Подсветка строк и столбцов таблицы html

Здравствуйте
Есть javascript при выполнении которого подсвечиваются строки и столбцы таблицы html - вот пример:  
Пожалуйста, помогите сделать, чтобы js не применялся к строке с классом .nolighting - при наведении на строку tr с таким классом не было подсветки строк и столбцов
Код

function addLoadEvent(func) {
    var old = window.onload
    if (typeof old != 'function') window.onload = func
    else window.onload = function() { old(); func(); }
}

function hc(cN /*string only*/, c) { /*hasClass*/
    return (!c || !cN) ? false : ((" " + cN + " ").indexOf(" " + c + " ") !== -1)
}

function cc(o, add, del) { /*cnangeClass*/
    var n = "className", cN = (undefined != o[n]) ? o[n] : o, ok = 0
    if ("string" !== typeof cN) return false
    var re = new RegExp('(\\s+|^)' + del + '(\\s+|$)', 'g')
    if (add) /*addClass*/
        if (!hc(cN, add)) {cN += " " + add; ok++}
    if (del) /*delClass*/
        if (hc(cN, del)) {cN = cN.replace(re, " "); ok++}
    if (!ok) return false
    if ("object" == typeof o) o[n] = cN 
    else return cN
}
//common lib end

-function (){
    var rowHover = 'rowhover', colColor = '#D1F8EF', cellHover = 'cellhover', tWidth = 15, 
        prefixT = 't', prefixC = 'td';
    
    prepTableHL = function (e, t, tW, rH, colC, cH){
        t = t || document.getElementById('sf');
        
        if (rH) rowHover = rH
        if (colC) colColor = colC
        if (cH) cellHover = cH
        if (tW) tWidth = tW
        else tWidth = t.rows[0].cells.length;
        
        t.onmouseout = cBg;
        t.onmouseover = cBg
        
        var list = t.getElementsByTagName('td');
        
        for (var i = 0, l = list.length; i < l; i ++) {
            cc(list[i], prefixC + list[i].cellIndex)
        }
    }
    
    //рисуем правила для селекторов вида [класс_таблицы] [класс_ячейки] 
    //для заданного числа колонок (классов ячеек):
    var i = tWidth + 1, sele = '', comma = '';
    while (-- i) {
        sele += comma + '.' + prefixT + (i - 1) + ' .' + prefixC + (i - 1)
        comma = ', '
    }
    document.write('<style type="text/css">\
        ' + sele + ' {background-color:' + colColor + ';}\
</style>'
    );
    
    var cBg = function (e, t) {
        e = e || window.event;
        t = t || this
        var target = e.target || e.srcElement, cI = target.cellIndex;
        if (typeof cI !== 'undefined') {
            var cls = prefixT + cI;
            if (e.type == 'mouseover') {
                cc(t, cls);
                cc(target.parentNode, rowHover)
                cc(target, cellHover)
            }
            else {
                cc(t, null, cls);
                cc(target.parentNode, null, rowHover)
                cc(target, null, cellHover)
            }
        }
    };
    
    addLoadEvent(prepTableHL)
}()

Код

#sf .cellhover {background-color:#FFFFFF;} 
.rowhover {background-color:#D1F8EF;} 
.nolighting {background-color:#f00000;} 

Код

<table id="sf" width="300" border="1">
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr class="nolighting">
    <td>.nolighting</td>
    <td>.nolighting</td>
    <td>.nolighting</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>
</table>


Это сообщение отредактировал(а) Aliance - 19.12.2014, 16:51
Ответ:
Цитата(sashgera @  21.12.2014,  01:50 )
вопрос решен 

Обычно принято на форуме писать найденное решение, оно может пригодиться кому-то еще.

Кроме того, когда вы получили ответ на ваш вопрос в правом верхнем углу темы есть ссылка "пометить как решенный", хорошо бы ее не забывать нажимать.
Вопрос: заполнение div блока из файла html

доброго времени суток. имеется два DIV блока (A и B). в блоке А ссылки (не кнопки). как заставить при клике на ссылку из DIV блока А загрузить информацию в DIV блок B из заранее подготовленного файла .html не перезагружая при этом всю страницу? iframe не подходит так как объемы могут быть разными.

это пример с iframe который мне не подходит .

//DIV блок A

<a href="#" onclick="changediv('1.html');return false;>ссылка 1</a>
<a href="#" onclick="changediv('2.html');return false;>ссылка 2</a>

//DIV блок B

<div id="B"></div>

<script type="text/javascript">
function changediv(id) {document.getElementById('B').innerHTML
= '<iframe src="'+id+'" width=100% height=500px frameborder="0" scrolling="no" allowtransparency="true"> noresize';}
Ответ: никак ума не приложу как заменить мой вид ссылки
<li><a href="#">SomeInfomation_1</a></li>
на ваш
<a data-file="p2.html">загрузить файл 2</a>
он не кликабелен

Добавлено через 20 минут
если есть функция можно ли привести к виду
<a href="javascript:somefuction()">
с атрибутом имени файла или типа того. извините может вопросы тупые, но какой вопрос такой и хозяин

Добавлено через 18 часов 25 минут
решение

Javascript
1
2
3
4
5
6
7
8
<script type="text/javascript">
function getCont(url){
    $('#result').html();
    $.get(url,function(data){
            $('#result').html(data);
    });
};
</script>
HTML5
1
2
3
4
<a href="#" onclick="getCont('SomeInfomation_1.html');return false;">SomeInfomation_1</a>
<a href="#" onclick="getCont('SomeInfomation_2.html');return false;">SomeInfomation_2</a>
<a href="#" onclick="getCont('SomeInfomation_3.html');return false;">SomeInfomation_3</a>
<div id="result">тут результат клика</div>
2 arcmag, спасибо за помощь.
Вопрос: Литература и ресурсы по HTML/CSS

Литература по HTML/CSS

1. Чак Муссиано и Билл Кеннеди "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г. (рекомендую)
"HTML и XHTML. Подробное руководство" - самая полная и современная книга по языкам HTML и XHTML, разъясняющая работу и взаимодействие каждого их элемента. Она удачно сочетает в себе лучшие качества понятного учебного пособия, адресованного начинающим, и всеобъемлющего справочника, который всегда под рукой даже у опытных веб-программистов. Этот труд, ставший классическим, содержит все от базового описания синтаксиса и семантики до практических советов, поможет вам найти свой неповторимый стиль и в совершенстве овладеть языком веб-дизайна.
Описаны стандарты HTML 4.01, XHTML 1.0 и CSS2, приведен обзор еще не вступивших в силу стандартов XHTML 2 и CSS3. Уделено внимание к новейшим инициативам разработчиков XHTML (XForms, XFrames и модуляризации), а также основам XML. Рассмотрены: управление внешним видом документа с помощью таблиц стилей; работа с HTML-кодом, сгенерированным автоматически; работа с фреймами, интерактивными формами, динамическими документами; интеграция HTML-кода с мультимедийными данными, сценариями JavaScript и Java-апплетами.
2.Эрик А. Мейер "CSS. Каскадные таблицы стилей. Подробное руководство " 3-е издание. Издательство: Символ-Плюс, 2008 г. (рекомендую)
"CSS. Каскадные таблицы стилей. Подробное руководство" показывает, как реализовать на практике все возможности каскадных таблиц стилей для стандартов CSS2 и CSS2.1. Множество примеров позволят научиться быстро и без усилий разрабатывать стилевое оформление веб-страниц, отвечающее современным требованиям.
Эрик Мейер рассматривает все свойства CSS и их взаимодействие, теги, атрибуты, реализации, поддержку различными броузерами, дает рекомендации разработчикам. Вы узнаете о сложном стилевом оформлении документов, пользовательском интерфейсе, верстке таблиц, о списках и генерируемом содержимом, о свободном перемещении и позиционировании, о семействах шрифтов и механизмах резервирования, о том, как работает модель блоков, о новых селекторах CSS3, поддерживаемых IE7, Firefox и другими броузерами.
Книга поможет избежать распространенных ошибок, она является полным справочником по CSS и будет полезна как опытному веб-разработчику, так и новичку. От читателя потребуется только знание HTML 4.O.
3. Роберт Агулар "HTML и CSS. Основа любого сайта " Издательство: Эксмо, 2010 г.
Самый эффективный способ обучения программированию - самостоятельное выполнение практических заданий. На этом принципе и построена данная книга. Большое количество лаконичных и емких примеров с детальным разбором позволят вам максимально эффективно изучить основы HTML и CSS.
В книге вы найдете детальную информацию по всем элементам веб-страницы, рассортированную по темам. Материал организован так, чтобы максимально упростить обучение: вначале автор показывает пример кода, далее - даст соответствующие объяснения.
Кроме описания основ HTML и CSS, вы найдете в книге рекомендации по созданию списков, таблиц, фреймов, форм, встраиванию картинок любого рода и дополнительные примеры каскадных таблиц стилей. Книгу завершает обзор команд HTML и CSS, поэтому она будет полезна вам как справочник и после того, как вы полностью их освоите.
4. Э. Кастро "HTML и CSS для создания Web-страниц " Издательство: НТ Пресс, 2006 г.
Эта книга является руководством по созданию Web-сайта на основе технологий HTML и CSS. Вы можете создавать HTML- или CSS-коды в любом текстовом редакторе, который есть на вашем компьютере. Книга научит вас создавать главную и внутренние страницы Web-сайта, а также публиковать ваш сайт, вы узнаете, как форматировать текст, выбирать фон, создавать навигационную панель и ссылки на другие страницы, использовать специальные типографические символы и буквы для создания профессионального вида вашего сайта, получить Web-хостинг и Web-домен, установить FТР-программы, передать файлы на сервер, зарегистрироваться в поисковиках. С помощью иллюстраций и пошаговых инструкций этой книги вы сможете создать свой сайт всего за несколько часов.
5. Н. Комолова, Е. Яковлева "HTML. Самоучитель "2-е издание. Издательство: Питер, 2011 г.
Самоучитель содержит последовательное изложение процесса создания веб-страниц с помощью языка HTML. Подробно рассмотрены процесс создания изображений для размещения на веб-странице (в программе Adobe Photoshop) и общие вопросы веб-дизайна. Книга содержит более 100 упражнений, позволяющих на практике закрепить изучаемый материал. Новое издание существенно обновлено актуальной информацией и дополнено материалом о технологиях XML, XHTML, DHTML, а также описанием нового стандарта HTML5.
Для студентов, преподавателей вузов и широкого круга читателей, желающих самостоятельно научиться созданию веб-страниц с помощью HTML.
6. Джейсон Кренфорд Тиге "DHTML и CSS для Internet "3-е издание. Издательство: НТ Пресс, 2007 г.

В книге описывается использование современных Web-технологий - динамического HTML (DHTML) и каскадных таблиц стилей (CSS), используемых в Web-программировании для создания интерактивных динамических Web-узлов. С помощью этой книги вы научитесь создавать динамические Web-страницы, включающие интерактивные элементы, различные текстовые, графические и анимационные эффекты.
Изложение материала сопровождается наглядными примерами, даются советы по планированию и созданию Web-сайтов.
Книга адресована Web-программистам и Web-дизайнерам, а также всем, кто интересуется языком DHTML и прикладными Web-тех.
7. Джон Дакетт "Основы веб-программирования с использованием HTML, XHTML и CSS " 2-е издание. Издательство: Эксмо, 2010 г. (рекомендую)
Существуют три основные технологии, обеспечивающие работу всех сайтов на клиентской стороне. Это HTML (XHTML), CSS и JavaScript. Рассматривать любую из них отдельно от других совершенно бессмысленно. Глупо осваивать JavaScript, не зная HTML и CSS. В свою очередь, CSS без знания HTML невозможно применить, а связка HTML+CSS без JavaScript способна не так уж и на многое. Ну и сам по себе HTML (XHTML) позволит создать лишь самые примитивные веб-страницы.
Эта книга предлагает оптимальный подход - изучить все три технологии одновременно. В ней рассматриваются все возможности HTML (XHTML), CSS и JavaScript с самых азов, то есть каких-либо познаний в веб-технологиях не требуется. В то же время книга предполагает некоторые представления о программировании, так как базовые понятия вроде циклов в ней подаются очень лаконично. В книге большое количество примеров, все примеры русифицированы.
8. О. Н. Рева "Использование HTML, JavaScript и CSS. Руководство Web-дизайнера " Издательство: Эксмо, 2008 г. (рекомендую)
Если учесть, с какой скоростью в Интернете увеличивается количество Web-страниц, рано или поздно все мы станем Web-дизайнерами. Это, если хотите, требование сегодняшнего дня. Научитесь с помощью настоящей книги создавать динамические Web-страницы, т. е. такие страницы, которые по требованию пользователя или в зависимости от ситуации меняют свой внешний вид, выполняют вычисления и отображают дополнительную информацию по выбранной теме. Познакомьтесь со сценариями на JavaScript, объектно-ориентированным программированием, таблицами стилей CSS. Все эти средства разработки динамических Web-страниц создавались для того, чтобы помочь вам. Шаг за шагом вы освоите все названные средства на примерах листингов в тексте книги. Особое внимание уделяется вопросам совместимости Web-страниц с приложениями обозревателей, многоязыковой поддержке, динамическому созданию, показу, перемещению и изменению размеров элементов Web-страницы. Вы узнаете, как заявить о своем праве на интеллектуальную собственность с помощью открытого программного лицензирования GNU.
9. С. Айзекс "Dynamic HTML. Секреты создания интерактивных Web - страниц " Издательство: BHV, 2001 г. (рекомендую)
Книга посвящена технологии Dynamic HTML, предназначенной для создания интерактивных Web - страниц. Рассматривается значение объектной модели и каскадных таблиц стилей (CSS) для увеличения скорости и удобства работы с Web - страницами, использование языковпрограммирования JavaScript, JScript, VBScript, C++, Java для доступа к объектной модели документа. Отдельный раздел посвящен изложению основ программирования сценариев. Большое внимание уделено новым элементам, предоставляемых в распоряжение разработчиков технологией Dynamic HTML: HTML 4.0 и расширенной поддержке CSS, динамическому изменению стиля и содержания документа, модели событий, Web - страницам клиент/сервер, внедрению в документ эффектов мультимедиа и анимации.
10. А. А. Дуванов "Web-конструирование. HTML " Издательство: БХВ-Петербург, 2005 г.
В Интернет принимают всех! Эта книга для тех, кто хочет изучить язык HTML, основные правила web-дизайна, освоить способы конструирования гипертекстовых страниц в соответствии с современным уровнем развития этой области информационных технологий.
Книга ориентирована прежде всего на старшеклассников, которые самостоятельно или под руководством наставника решили создать домашнюю страницу в Интернете, школьный сайт или представить в виде гипертекста творческую работу. Используя рекомендации книги и набор ключевых заготовок, учителя также смогут заняться профессиональным творчеством, создавая интерактивные учебники, задачники, испытательные стенды для своих уроков.
Для учащихся 7-11 классов и преподавателей школ.
11. А. А. Дуванов "Web-конструирование. DHTML " Издательство: БХВ-Петербург, 2003 г.
Это вторая книга серии `Web-конструирование`. Она пополняет навыки создания гипертекстовых страниц на базе `чистого` HTML правилами построения каскадных стилевых таблиц (CSS) и основами программирования сценариев на языке JavaScript.
Подробно рассматривается объектная модель браузера, на конкретных примерах объясняется методика построения собственных программных объектов, интегрируемых в общую среду `браузер-гипертекстовое приложение`. Большое внимание уделяется структуре программного кода, дисциплине программирования, тестированию и отладке сценариев.
Для учащихся 10-11 классов и преподавателей школ.

Ресурсы по HTML/CSS

1. HtmlBook (рекомендую)
2. HTML Tutorial(W3C)(рекомендую)
3. Что такое HTML? (для начинающих)
4. Что такое CSS? (для начинающих)

5. Aptana Studio (последняя версия 2.0, но уже готова 3 бетта), редактор бесплатный, можно скачать отсюда(рекомендую)
P.S Эта тема будет систематически обновляться! Удачи!
Ответ: http://www.postroika.ru/html/
пошаговое изучение HTML для чайников.
очень доступным языком.
Вопрос: Литература и ресурсы по HTML/CSS

Литература по HTML/CSS

1. Чак Муссиано и Билл Кеннеди "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г. (рекомендую)
"HTML и XHTML. Подробное руководство" - самая полная и современная книга по языкам HTML и XHTML, разъясняющая работу и взаимодействие каждого их элемента. Она удачно сочетает в себе лучшие качества понятного учебного пособия, адресованного начинающим, и всеобъемлющего справочника, который всегда под рукой даже у опытных веб-программистов. Этот труд, ставший классическим, содержит все от базового описания синтаксиса и семантики до практических советов, поможет вам найти свой неповторимый стиль и в совершенстве овладеть языком веб-дизайна.
Описаны стандарты HTML 4.01, XHTML 1.0 и CSS2, приведен обзор еще не вступивших в силу стандартов XHTML 2 и CSS3. Уделено внимание к новейшим инициативам разработчиков XHTML (XForms, XFrames и модуляризации), а также основам XML. Рассмотрены: управление внешним видом документа с помощью таблиц стилей; работа с HTML-кодом, сгенерированным автоматически; работа с фреймами, интерактивными формами, динамическими документами; интеграция HTML-кода с мультимедийными данными, сценариями JavaScript и Java-апплетами.
2.Эрик А. Мейер "CSS. Каскадные таблицы стилей. Подробное руководство " 3-е издание. Издательство: Символ-Плюс, 2008 г. (рекомендую)
"CSS. Каскадные таблицы стилей. Подробное руководство" показывает, как реализовать на практике все возможности каскадных таблиц стилей для стандартов CSS2 и CSS2.1. Множество примеров позволят научиться быстро и без усилий разрабатывать стилевое оформление веб-страниц, отвечающее современным требованиям.
Эрик Мейер рассматривает все свойства CSS и их взаимодействие, теги, атрибуты, реализации, поддержку различными броузерами, дает рекомендации разработчикам. Вы узнаете о сложном стилевом оформлении документов, пользовательском интерфейсе, верстке таблиц, о списках и генерируемом содержимом, о свободном перемещении и позиционировании, о семействах шрифтов и механизмах резервирования, о том, как работает модель блоков, о новых селекторах CSS3, поддерживаемых IE7, Firefox и другими броузерами.
Книга поможет избежать распространенных ошибок, она является полным справочником по CSS и будет полезна как опытному веб-разработчику, так и новичку. От читателя потребуется только знание HTML 4.O.
3. Роберт Агулар "HTML и CSS. Основа любого сайта " Издательство: Эксмо, 2010 г.
Самый эффективный способ обучения программированию - самостоятельное выполнение практических заданий. На этом принципе и построена данная книга. Большое количество лаконичных и емких примеров с детальным разбором позволят вам максимально эффективно изучить основы HTML и CSS.
В книге вы найдете детальную информацию по всем элементам веб-страницы, рассортированную по темам. Материал организован так, чтобы максимально упростить обучение: вначале автор показывает пример кода, далее - даст соответствующие объяснения.
Кроме описания основ HTML и CSS, вы найдете в книге рекомендации по созданию списков, таблиц, фреймов, форм, встраиванию картинок любого рода и дополнительные примеры каскадных таблиц стилей. Книгу завершает обзор команд HTML и CSS, поэтому она будет полезна вам как справочник и после того, как вы полностью их освоите.
4. Э. Кастро "HTML и CSS для создания Web-страниц " Издательство: НТ Пресс, 2006 г.
Эта книга является руководством по созданию Web-сайта на основе технологий HTML и CSS. Вы можете создавать HTML- или CSS-коды в любом текстовом редакторе, который есть на вашем компьютере. Книга научит вас создавать главную и внутренние страницы Web-сайта, а также публиковать ваш сайт, вы узнаете, как форматировать текст, выбирать фон, создавать навигационную панель и ссылки на другие страницы, использовать специальные типографические символы и буквы для создания профессионального вида вашего сайта, получить Web-хостинг и Web-домен, установить FТР-программы, передать файлы на сервер, зарегистрироваться в поисковиках. С помощью иллюстраций и пошаговых инструкций этой книги вы сможете создать свой сайт всего за несколько часов.
5. Н. Комолова, Е. Яковлева "HTML. Самоучитель "2-е издание. Издательство: Питер, 2011 г.
Самоучитель содержит последовательное изложение процесса создания веб-страниц с помощью языка HTML. Подробно рассмотрены процесс создания изображений для размещения на веб-странице (в программе Adobe Photoshop) и общие вопросы веб-дизайна. Книга содержит более 100 упражнений, позволяющих на практике закрепить изучаемый материал. Новое издание существенно обновлено актуальной информацией и дополнено материалом о технологиях XML, XHTML, DHTML, а также описанием нового стандарта HTML5.
Для студентов, преподавателей вузов и широкого круга читателей, желающих самостоятельно научиться созданию веб-страниц с помощью HTML.
6. Джейсон Кренфорд Тиге "DHTML и CSS для Internet "3-е издание. Издательство: НТ Пресс, 2007 г.

В книге описывается использование современных Web-технологий - динамического HTML (DHTML) и каскадных таблиц стилей (CSS), используемых в Web-программировании для создания интерактивных динамических Web-узлов. С помощью этой книги вы научитесь создавать динамические Web-страницы, включающие интерактивные элементы, различные текстовые, графические и анимационные эффекты.
Изложение материала сопровождается наглядными примерами, даются советы по планированию и созданию Web-сайтов.
Книга адресована Web-программистам и Web-дизайнерам, а также всем, кто интересуется языком DHTML и прикладными Web-тех.
7. Джон Дакетт "Основы веб-программирования с использованием HTML, XHTML и CSS " 2-е издание. Издательство: Эксмо, 2010 г. (рекомендую)
Существуют три основные технологии, обеспечивающие работу всех сайтов на клиентской стороне. Это HTML (XHTML), CSS и JavaScript. Рассматривать любую из них отдельно от других совершенно бессмысленно. Глупо осваивать JavaScript, не зная HTML и CSS. В свою очередь, CSS без знания HTML невозможно применить, а связка HTML+CSS без JavaScript способна не так уж и на многое. Ну и сам по себе HTML (XHTML) позволит создать лишь самые примитивные веб-страницы.
Эта книга предлагает оптимальный подход - изучить все три технологии одновременно. В ней рассматриваются все возможности HTML (XHTML), CSS и JavaScript с самых азов, то есть каких-либо познаний в веб-технологиях не требуется. В то же время книга предполагает некоторые представления о программировании, так как базовые понятия вроде циклов в ней подаются очень лаконично. В книге большое количество примеров, все примеры русифицированы.
8. О. Н. Рева "Использование HTML, JavaScript и CSS. Руководство Web-дизайнера " Издательство: Эксмо, 2008 г. (рекомендую)
Если учесть, с какой скоростью в Интернете увеличивается количество Web-страниц, рано или поздно все мы станем Web-дизайнерами. Это, если хотите, требование сегодняшнего дня. Научитесь с помощью настоящей книги создавать динамические Web-страницы, т. е. такие страницы, которые по требованию пользователя или в зависимости от ситуации меняют свой внешний вид, выполняют вычисления и отображают дополнительную информацию по выбранной теме. Познакомьтесь со сценариями на JavaScript, объектно-ориентированным программированием, таблицами стилей CSS. Все эти средства разработки динамических Web-страниц создавались для того, чтобы помочь вам. Шаг за шагом вы освоите все названные средства на примерах листингов в тексте книги. Особое внимание уделяется вопросам совместимости Web-страниц с приложениями обозревателей, многоязыковой поддержке, динамическому созданию, показу, перемещению и изменению размеров элементов Web-страницы. Вы узнаете, как заявить о своем праве на интеллектуальную собственность с помощью открытого программного лицензирования GNU.
9. С. Айзекс "Dynamic HTML. Секреты создания интерактивных Web - страниц " Издательство: BHV, 2001 г. (рекомендую)
Книга посвящена технологии Dynamic HTML, предназначенной для создания интерактивных Web - страниц. Рассматривается значение объектной модели и каскадных таблиц стилей (CSS) для увеличения скорости и удобства работы с Web - страницами, использование языковпрограммирования JavaScript, JScript, VBScript, C++, Java для доступа к объектной модели документа. Отдельный раздел посвящен изложению основ программирования сценариев. Большое внимание уделено новым элементам, предоставляемых в распоряжение разработчиков технологией Dynamic HTML: HTML 4.0 и расширенной поддержке CSS, динамическому изменению стиля и содержания документа, модели событий, Web - страницам клиент/сервер, внедрению в документ эффектов мультимедиа и анимации.
10. А. А. Дуванов "Web-конструирование. HTML " Издательство: БХВ-Петербург, 2005 г.
В Интернет принимают всех! Эта книга для тех, кто хочет изучить язык HTML, основные правила web-дизайна, освоить способы конструирования гипертекстовых страниц в соответствии с современным уровнем развития этой области информационных технологий.
Книга ориентирована прежде всего на старшеклассников, которые самостоятельно или под руководством наставника решили создать домашнюю страницу в Интернете, школьный сайт или представить в виде гипертекста творческую работу. Используя рекомендации книги и набор ключевых заготовок, учителя также смогут заняться профессиональным творчеством, создавая интерактивные учебники, задачники, испытательные стенды для своих уроков.
Для учащихся 7-11 классов и преподавателей школ.
11. А. А. Дуванов "Web-конструирование. DHTML " Издательство: БХВ-Петербург, 2003 г.
Это вторая книга серии `Web-конструирование`. Она пополняет навыки создания гипертекстовых страниц на базе `чистого` HTML правилами построения каскадных стилевых таблиц (CSS) и основами программирования сценариев на языке JavaScript.
Подробно рассматривается объектная модель браузера, на конкретных примерах объясняется методика построения собственных программных объектов, интегрируемых в общую среду `браузер-гипертекстовое приложение`. Большое внимание уделяется структуре программного кода, дисциплине программирования, тестированию и отладке сценариев.
Для учащихся 10-11 классов и преподавателей школ.

Ресурсы по HTML/CSS

1. (рекомендую)
2. (рекомендую)
3. (для начинающих)
4. (для начинающих)

5. Aptana Studio (последняя версия 2.0, но уже готова 3 бетта), редактор бесплатный, можно скачать (рекомендую)
P.S Эта тема будет систематически обновляться! Удачи!
Ответ:
пошаговое изучение HTML для чайников.
очень доступным языком.
Вопрос: поиск в html

Здравствуйте, подскажите как реализовать такую задачку. Есть url новостного сайта к примеру
Для того, что бы что либо найти необходимо добавить в конец урла к примеру new year, теперь можно просто вставить в строке браузера и сразу поиск выдаст в браузере все, все что нашел по ключевому слову. Подскажите как имея несколько таких поисковиков вложить в форму или еще как, и поле сделать для поиск на html странице. В поле с названием поиск (на html странице) вводим ключевое слово и нажимаем на кнопку поиск и ключевое слово подставляется в 2,3,4 поисковых запроса в конце и открывает по каждому поиску новое окно в браузере с найденными результатами. Как реализовать в один html фал без php и т.д. Спасибо.
Ответ:
Art Lev, спасибо огромное вам за помощь, скрипт работает как нужно.
В ходе эксплуатации возникло несколько вопросов небольших, с вашего разрешения их озвучу.

1. Открываю хтмл документ этого скрипта в хроме надписи отображаются на кнопках корректно на русском, открываю этот же документ в опере абракадабра такая в надписях
искать в bigmir искать в metronews искать в atn Выбрать все Искать
2. Как вы правильно отметили всплывающие окна блокирует по умолчанию, отключается эта фича в настройках всплывающих окон. ajax в данной ситуации тоже будет блокироваться? чем лучше ajax для данной задачи по отношению к js

3. Заметил некоторые поисковики некорректно ищут русские слова (ключевое слово поиска). К примеру тот же если задаем в поиске слово на английском mcdonald ищет корректно без вопросов, стоит ввести на русском макдональдс в строке поиска открывает страницу и пусто в результатах а в строке браузера такой запрос %EC%E0%EA%E4%EE%ED%E0%EB%FC%E4%F1 не переходя никуда на этой же странице вбиваем в поиск макдональдс нажимаем поиск кнопку на сайте и выводится по макдональдсу все что есть. Возможно это можно исправить? если не очень сложно в реализации, подскажите как решить проблему

4. Сегодня понял, что важная фича, как объединить в группы поисковики (архи полезная фича), к примеру стандартная ситуация, печатаем поисковый запрос, кликаем на кнопку выделить все поисковики нажимаем поиск, открылось 3 страницы (пока три поисковика, но планирую расширить до 15-20).
Не стандартная, имеем 20 поисковиков, вбиваем поисковое слово, нажимаем на кнопку выделить первую группу поисковиков, выделяется 10 определенных поисковиков (они прописаны в группа_1) остальные 10 не выделены, нажимаем поиск ищем по конкретным поисковикам.
Меняем поисковый запрос нажимаем кнопку выделить вторую группу поисковиков (прописаны в группе_2 списком) ищем по второй группе, первая группа поисковиков не участвует в поиске. Очень удобно будет искать, подскажите как реализовать такое.

Еще раз спасибо за вашу помощь и потраченное время.