Уважаемые пользователи.
Здесь я выкладываю свои примеры, обсуждать только в привате со мной лично (здесь только можно благодарить, писать вопросы, на которые вы не получили ответа и хотите, чтобы добавился еще урок.)
1. Одна таблица для создания общего макета
Часто при создание сайта в три ячейки используют несколько таблиц. По моему мнению достаточно одной таблицы и это более аккуратно выглядит в коде, это сделать просто:
Для того чтобы добавить меню и прочее, вставляйте свой код (список, див...) между <td></td>. Для того чтобы использовались отступы, их можно задать как новому диву, к примеру рассмотрим sidebar (левый ряд)
3. Быстрая смена шапки (header) и дна (footer) в десятках страниц.
Создаем примитивный сайт, где будет использоваться общая шапка (header), меню (sidebar), дно (footer).
Идеальное решение для начинающего пользователя, пожелавшего создать сайт в пределах 10 страниц (фактически можно и больше).
Внимание: Для того, чтобы использовать данное решение, необходим хостинг с поддержкой php.
Пишем макет сайта:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Простой макет</title>
<style>
html, body {margin:0; padding:0; font-size:100.01%;}
body {background-color:#fff; color:#000; font:normal 12px ‘Tahoma’;}
</style>
</head>
<body>
В итоге все остальные страницы мы создаем по аналогии с файлом index.php.
17.06.2010, 13:15
MetSerp
дабы не было оффтопа - закрыто.
08.06.2011, 21:13
MetSerp
Открыто по просьбе автора, пишите свои вопросы по html+css, когда наберется достаточное количество вопросов на них будут даны ответы klenovnn, .
От меня: не пишите вопросы которые требуют срочного решения, так как " когда наберется достаточное количество вопросов на них будут даны ответы klenovnn, .", но не ранее.
Просьба к остальным, не отвечать на вопросы так как они собираются для создания уроков, после того как klenovnn, ответит на вопросы, сами вопросы будут удалены, чтобы тема имела вид сборника рецептов.
Вроде все.
30.06.2011, 00:26
Arks
Оптимальный макет:
меню
таблица
меню
Мой вариант:
div без ширины выровненный по горизонтали
таблица как position:relative; margin-top: n-цать px
div без ширины выровненный по горизонтали в котором наборы dl/dd/dt
Автор - твой вариант... Может что лучше продложишь
05.08.2011, 23:59
x-line
тема про html, а речь о php... ладно спрошу ,.. сделал я например шаблон (футер хедер и всё такое) , дальше налепил страниц 1.php 2.php... 10000.php как туда сувать мета теги (кейвордс и описание)? вручную на каждой странице ?? я так подозриваю что есть какой-то скрипт или код который например копирует title в description
06.08.2011, 00:15
Webmaster
Цитата:
Сообщение от x-line
тема про html, а речь о php... ладно спрошу ,.. сделал я например шаблон (футер хедер и всё такое) , дальше налепил страниц 1.php 2.php... 10000.php как туда сувать мета теги (кейвордс и описание)? вручную на каждой странице ?? я так подозриваю что есть какой-то скрипт или код который например копирует title в description
если вы делали PHP странички, то что вам мешает вписать title в description ?
18.08.2011, 18:41
Liforte
Цитата:
Сообщение от x-line
тема про html, а речь о php... ладно спрошу ,.. сделал я например шаблон (футер хедер и всё такое) , дальше налепил страниц 1.php 2.php... 10000.php как туда сувать мета теги (кейвордс и описание)? вручную на каждой странице ?? я так подозриваю что есть какой-то скрипт или код который например копирует title в description
Для этого достаточно сделать в шаблоне вставку переменной, а в общем шаблоне задать условие для вывода и подставлять переменную туда куда надо с теми значениями каторые нужны!
06.10.2011, 00:23
Сергей Шолохов
http://divhack.com/
html css решения. Сайт мой.
Собрано множество решений по вёрстке, некоторые решены на javascript и jquery.
Присутствуют также такие сложные кроссбраузерные вещи как:
Стилизация селекта (безумно востребованное решение)
Стилизация радиокнопки
Слайдер постраничный для картинок
Нестандартный input type file
Таблица в div подстраивающаяся под контент любой ячейки
Нестандартный input type submit
футер внизу
Когда начинал заниматься вёрсткой - бывало что долго искал эти решения по разным сайтам.
Захотел собрать всё в одном месте. Сам пользуюсь каждый день.
17.10.2011, 19:36
Kuprijan
div#block {
width:1280px;
background-color:#ff7518;
background-image:url('Ditals/Zver.jpg')
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Выделеное ораньжевым что то неработает - в чем дело?
11.11.2011, 07:19
nightgremlin
Вложений: 2
Текст в HTML. Форматирование текста
Текст в html я считаю имеет одно из самых важных значений. Ведь только благодаря ему пользователь может узнать о чем сайт и видеть всю интересующую его информацию.
А начну я пожалуй с небольшого примера:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Заголовок страницы сайта</title>
</head>
<body>
<h1>Заголовок первого уровня - h1</h1>
<p>Для основного текста мы используем тег <b>p</b></p><br>
<p>Заключаем в тег strong <strong>важный текст</strong>,
не путайте с тегом b, в который мы вкладываем <b>жирный текст</b>.
</p>
<h2>А вот заголовок второго уровня - h2</h2>
<p>Заключаем в тег em <em>значимый текст</em>,
а тегом i выделяем <i>курсивный текст</i></p>
</body>
</html>
В браузере должен отображаться следующий результат: Вложение 3368
Получилось? Рассмотрим по подробнее данный пример, хотя то что вы увидели в окне браузера как раз и поясняет для чего нужны используемые теги.
Самым главным текстовым тегом является парный тег <p>. Именно в него вносится контент документа.
На странице сайта очень важно восприятие текста. Поэтому необходимо форматировать текст.
Выравнивание текста
Для выравнивание текста обычно используется атрибут align, который может принимать следующие значения:
left — выравнивает текст по левому краю, это значение задается по умолчанию;
right — выравнивает текст по правому краю;
center — выравнивает текст по центру;
justify — выравнивает текст по ширине (одновременно по правому и левому краю).
Чтобы лучше освоить технику применения атрибутов в тексте, приведу вам небольшой пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Выравнивание текста в документе</title>
</head>
<body>
<h1 align="center">Выравниваем заголовок первого уровня по
центру</h1>
<h2 align="right">Выравниваем заголовок второго уровня по
правому краю</h2>
<p align="justify">Выравнивание небольшой части текста статьи по
ширине происходит одновременно по правому и левому краю. Это
значение работает только для текста, длина которого более, чем
одна строка. Поэтому этот факт следует учитывать при
использовании этого значения.</p>
</body>
</html>
Результат вы можете увидеть на рисунке: Вложение 3369
Заголовки текста
Далее рассмотрим теги заголовков статей. Теги h1, h2 .... h6 являются парными, требуют обязательного закрытия. В них помещаются заголовки статей. Причём h1 - заголовок первого уровня. В стандарте html 4.01 рекомендуется использовать его один раз. Лучше всего его помещать сверху страницы. Остальные теги h2, h3 ... h6 вы можете использовать сколько угодно раз. Тексты в заголовках вы также можете выравнивать также, как и тег <p>.
Начертание текста
Для различного начертания текста используются следующие теги:
strong - выделяет важный текст (не рекомендую использовать его много раз). Текст будет выделен жирным шрифтом;
b - просто выделяет текст жирным шрифтом, причём выделенный текст не будет иметь значимости, а просто будет выделен. Этот тег следует использовать только для смысловой нагрузки;
em - выделяет значимый текст курсивным шрифтом;
i - просто выделяет текст курсивным шрифтом.
___________________________________________
Следует учитывать разницу между этими тегами, порой лучше использовать теги <b> и <i>, нежели <strong> и <em>. Хотя многие пренебрегают этими тегами. Также вам могут понадобиться при написании каких-нибудь формул или выражений теги верхнего и нижнего индекса:<sup> — верхний индекс;
<sub> — индекс нижний. Оба тега являются парными и требуют обязательного закрытия.
Если вы хотите вставить текст из word или еще откуда-нибудь, то проще всего вставить текст в тег <pre>. Этот тег используется обычно для вставки форматируемого текста в другом текстовом редакторе.
P/s: эту и другие статьи по html вы можете почитать у меня на сайте.
09.12.2011, 18:39
2323
Подскажите пожалуйста почему у меня в html документе не отображаются изображения. Если вставляешь ссылку, то всё нормально. А если вставляешь изображение, то отображается какой- то только маленький значок.
24.12.2011, 10:13
kykypy3o
Уважаемые форумчане, Всем доброго времени суток!
Есть один вопрос, прошу помочь с ответом...
Допустим есть код, написанный на html-ле, а именно таблица. Таблица из трёх строк и двух столбцов. Заранее в коде забиваюца ячейки. Как можно добавить какую-либо информацию в таблицу, не вбивая заранее в код, при этом не прибегая к ява скриптам и php?
если можно, то как? через формы? думал насчёт этого. но как связать таблицу с формой? думал насчёт задания какого-либо значения в <tr>,<td> через id.
если и получица, что либо придумать, как же тогда перессыл сделать из формы в таблицу, а не на какой либо сервак обработки.
29.12.2011, 05:10
nightgremlin
Цитата:
Сообщение от 2323
А если вставляешь изображение, то отображается какой- то только маленький значок.
Путь к файлу изображения правильно написали?
24.02.2012, 20:32
Natali1981
Как то очень сложно написано, для начинающего пользователя. Я когда только начинала заниматься созданием сайтов, то пугалась таких описаний, и старалась искать что либо по проще. В частности меня интересовали такие вопросы как отредактировать сам текст, вставить ссылки.
Сейчас уже интересуют более сложные вопросы: 1. Подскажите как создать свой скрипт для доски объявлений.
2. Как сделать подсказку, так что бы при наведении на слово высвечивалось описание.
20.03.2012, 12:50
Bugnet
Цитата:
Сообщение от kykypy3o
Уважаемые форумчане, Всем доброго времени суток!
Допустим есть код, написанный на html-ле, а именно таблица. Таблица из трёх строк и двух столбцов. Заранее в коде забиваюца ячейки. Как можно добавить какую-либо информацию в таблицу, не вбивая заранее в код, при этом не прибегая к ява скриптам и php?
Это можно сделать используя лишь HTML, только переименовав PHP и Javascript в HTML.
20.03.2012, 14:20
Bugnet
Цитата:
Сообщение от Kuprijan
div#block {
width:1280px;
background-color:#ff7518;
background-image:url('Ditals/Zver.jpg')
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Выделеное ораньжевым что то неработает - в чем дело?
Кавычки убрать, прямой слэш перед /Ditals, в конце точка с запятой:
background-image:url(/Ditals/Zver.jpg);
25.03.2012, 12:37
Kuprijan
C этим я уже давно разобрался, а потом случайно весь жоский, а не раздел как хотел форматнул - акронис - зло!. Вообщем не важно. Появилась другая проблема -
<script language='javascript'>
function Razreshenie() {
var l=document.body.clientWidth
var h=document.body.clientHeight
alert("l="+l+", h="+h)
}
</script>
и
<script language="JavaScript">
if (navigator.javaEnabled()) {
hn = java.net.InetAddress.getLocalHost().getHostName();
ha = java.net.InetAddress.getLocalHost().getHostAddress();
document.write('HostName: '+ hn + '<br>' + 'HostAddress: '+ ha );
}
</script>
не как не могу заставить их отображать инфу - в первом слчае есть кнопка, но я хочу чтоб без кнопки, сразу отображало, а последнее вообще не отображает ничего.
А вообще не подскажите скрипт чтоб всю инфу о браузере отображал и не только.
Если я конечно в тот раздел написал - если нет ткните носом.
06.05.2012, 14:52
Muxa
Цитата:
Сообщение от Kuprijan
А вообще не подскажите скрипт чтоб всю инфу о браузере отображал и не только.
используй $_SERVER php методы переменной можешь посмотреть здесь http://www.php.su/learnphp/vars/?reserved
чтобы не по кнопке, а сразу отображало, ставь обработчик на теге <body onload=''> ну или где там тебе надо
27.05.2012, 18:13
arthur1974
Цитата:
Сообщение от Сергей Шолохов
http://divhack.com/
html css решения. Сайт мой.
Собрано множество решений по вёрстке, некоторые решены на javascript и jquery.
Присутствуют также такие сложные кроссбраузерные вещи как:
Стилизация селекта (безумно востребованное решение)
Стилизация радиокнопки
Слайдер постраничный для картинок
Нестандартный input type file
Таблица в div подстраивающаяся под контент любой ячейки
Нестандартный input type submit
футер внизу
Когда начинал заниматься вёрсткой - бывало что долго искал эти решения по разным сайтам.
Захотел собрать всё в одном месте. Сам пользуюсь каждый день.
Благодарю за сылочку. Действительно много полезного
30.07.2012, 11:45
freeman0204
Не могу понять как сделать в html текст одновременно жирным и курсивом подскажите?
30.07.2012, 19:09
Muxa
:1128:
<b><i>жирный курсивный текст </i></b>
31.07.2012, 14:01
freeman0204
А есть ли разница <b><i> или <i><b> влияет ли это на валидность кода?
10.10.2012, 20:19
valtorn
здравствуйте ! У меня вопрос на сайте http://www.hardcoder.ru/ справа где картинки продукции, при обновлении они всегда меняются (распологаются в другом порядке после обновления ) как мне сделать такуюже штуку ? что мне для этого понадобится ?
10.10.2012, 21:49
Arks
valtorn,на html ничего, т.к. это не делается средствами браузера. Просто сервер каждый раз генерирует фактически разные html-странички с рандомным расположением блоков.
11.10.2012, 08:52
Ромашка
Скажите, пожалуйста, как создать возможность, что бы люди писали мне на почту сайта, то есть одна из подстраниц такого содержания: шапка -> обязательные поля для заполнения своего имени, заполнения адреса (и если возможно сразу проверка, на правильность адреса) и поле с неограниченным числом символов (с прокруткой) что бы человек мог написать письмо в это поле.
Если слишком трудный вопрос, то подскажите, пожалуйста, где искать ответ на него.
11.10.2012, 10:59
BoL4oNoK
делаете форму на сайте и пишите обработчик, в котором формируете письмо и отправляете его с помощью функции mail().
11.10.2012, 12:35
klenovnn
Цитата:
Сообщение от Ромашка
Скажите, пожалуйста, как создать возможность, что бы люди писали мне на почту сайта, то есть одна из подстраниц такого содержания: шапка -> обязательные поля для заполнения своего имени, заполнения адреса (и если возможно сразу проверка, на правильность адреса) и поле с неограниченным числом символов (с прокруткой) что бы человек мог написать письмо в это поле.
Рекомендую просто указать свой почтовый ящик на сайте и все.
Если нужно все таки именно форму, тогда написать скрипт (скачать) или установить плагин (если CMS, к примеру WordPress)
= = = = = = = = =
Цитата:
Сообщение от freeman0204
А есть ли разница <b><i> или <i><b> влияет ли это на валидность кода?
Влияет.
Это тэги старого Doctype, лучше писать strong (жирный), em (курсив).
В каком порядке писать - не имеет значения, но имеет значение, в какой последовательности будет закрываться тэг.
по этой теме встречалось много материалов, но в целом, более согласен с мнением на www.html.by
17.01.2013, 00:32
Максим А
код не правильный будет при проверке... тег <style> без указания типа можно писать только в html5 (!DOCTYPE html).
21.01.2013, 21:25
polmor
формы поиска и ввода данных
Здравствуйте. Я только начала изучать хотмейл. Споткнулась на формах поиска и ввода данных (чтобы пользователь мог опубликовать свое объявление на сайте: заполнить поля, а объявление бы сгенерировалось автоматически и появилось на нужной странице) Не могу найти информацию по этой теме. Если знаете учебники или сайты - подскажите, пожалуйста. В моем учебнике говорится о программе CGI, но очень размыто и без примеров. Использование CGI еще актуально или уже устарело?
21.01.2013, 21:55
Zippovich
хотмейл? почтовый сервс что ли?
ищите инфу по php - работа с формами.
22.01.2013, 13:34
polmor
язык HTML. Извините. я думала, так его называют. Узнала подробнее: меня интересует программа-обработчике формы, которую нужно указывать в атрибуте ACTION. я должна ее сама написать и загрузить на сервер, или она там уже есть и только нужно узнать ее URI у того, кто предоставляет хостинг? Заранее большое спасибо!
22.01.2013, 15:29
Zippovich
сама написать. пишется на php. указываете в action название скрипта, в скрипт приходят данные в массив $_POST. Вы уже делаете с данными что Вам нужно.
Здесь на форуме куча примеров есть или в google ищите.
23.01.2013, 21:14
polmor
Ок, спасибо!
28.01.2013, 20:07
maxbel1989
Помогите. Уже целый день с проблемой вожусь, которая для многих и проблемой то не является.
Нужно в HTML добавить картинки с закруглёнными углами в один ряд, и чтобы на каждую гиперссылку была. Нашел как закруглить,и всё остальное,но вот как поставить в ряд картинки с закруглёнными углами,это я не смог.ЧТо делать? только не скидывайте всякие ссылки на уроки самообучения,а помогите написать сам код. Все уроки которые можно я уже прочитал, не помогло мне. Я не обладаю практически никакими навыками работы с HTML, всё делал методом тыка.
<div id="img-radius" style="background: url('/file/link/8137237a2f44433c'); width: 126px; height: 48px;" title="Картинки с закругленными углами">*
Вот то, что у меня получилось. Как разместить 3 таких картинки в ряд? буду очень благодарен.
Если не затруднит,было бы круто еще тень добавить туда,если возможно. и скажу сразу, сайт мой на бесплатном хосте, я не имею доступа к файлам. могу только html коды добавлять готовые. Заранее спасибо!
28.01.2013, 20:08
Zippovich
float: left
box-shadow
гугл
28.01.2013, 20:17
maxbel1989
я же просил.. мне нужен готовый и закрытый код для вставки html. если бы я умел конструировать сам, и чтото делать, я бы не обращался за помощью,в интернете полно всего. но я не понимаю ровным счётом ничего,и помощь нужна.
28.01.2013, 20:27
Zippovich
это Вам на форум рабов нужно, там можете жаловаться что ничего не понимаете и ничего не хотите читать/учить. А сюда Вы зря обратились.