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

  2. Вам кажется, что ваша версия SocialEngine 4, работает медленно?

    Голосуйте. Пишите свою версию системы, железо на чем работает и количество пользователей. Будем увеличивать производительность :-) Подробнее

  3. В связи с участившимися случаями попыток продажи пользователями форума различных "сборок" коммерческих социальных платформ, обычно основанных на SocialEngine 3, вводится новое правило для форума. Запрещается создание тем или размещение в уже созданных предложений о продаже или размещение ссылок на сайты, где происходит продажа "сборок". Пользователи, которые продолжат свою коммерческую деятельность в данном направлении, будут заблокированы. Подробнее.
Новые полезные статьи о SocialEngine 4 Ваш SocialEngine 4 медленно работает? Запрет на размещение информации о "Сборках"

HTML и CSS [от А до Я] fontanka edition.

Discussion in 'HTML и CSS' started by fontanka, Feb 20, 2011.

Page 1 of 2

  1. fontanka Thread starter Novice member


    Offline
    Message Count:
    12
    Likes Received:
    0
    Привет всем, я новичек на форуме. Вижу у вас тутесть интересные темы про HTML, но как говориться, либо времени нет, либо еще что то - информации не достаточно, и у народа возникают вопросы.
    Так вот я решил помочь проекту socengine.ru в работе и обучении новичков в кодинге.

    Можете называть меня Ладо(ударение на "о").
    Здесь, прямо на форуме я буду потихонечку составлять свой учебник. Материалы я беру с разных интернет ресурсов, пишу сам, редактирую - в общем делаю так, что бы вам было понятней.

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

    И так, поехали:
    Каждый пост - отдельная тема.
    fontanka, Feb 20, 2011
    #1

  2. Gooos абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    HTML и CSS ?

    Учебников общего характера полно в инете, надеюсь твой будет "околосоциальной" тематики, в плане движков, что тут представлены.
    Gooos, Feb 20, 2011
    #2

  3. fontanka Thread starter Novice member


    Offline
    Message Count:
    12
    Likes Received:
    0
    Урок №1

    Быстрый старт

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

    В примере 1.1 приведен несложный пример такого кода.

    Пример 1.1. Первая веб-страница
    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>
  <p>Основной текст.</p>

 </body>
</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>
    Лучше будет заменить на:
    HTML:
    <!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" charset="utf-8">
  <title>Моя первая веб-страница</title>
 </head>
    Чтобы посмотреть результат примера в действии, проделайте следующие шаги.

    1. В Windows откройте программу Блокнот (Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот).

    2. Наберите или скопируйте код в Блокноте (рис. 1.1).
    [IMG]

    3. Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8 (рис. 1.2). Обратите внимание, что расширение у файла должно быть именно html.

    Рис. 1.2
    [IMG]
    4. Запустите браузер
    5. Если все сделано правильно, то в браузере вы увидите результат, как показано на рис. 1.3.
    [IMG]
    В случае возникновения каких-либо ошибок проверьте правильность набора кода согласно примеру 1.1, расширение файла (должно быть html) и путь к документу.
    fontanka, Feb 20, 2011
    #3

  4. fontanka Thread starter Novice member


    Offline
    Message Count:
    12
    Likes Received:
    0
    Урок №2 (часть 1) Теги, какие они бывают?

    а) Парные теги (такие как div, которые мы будем прямо использовать при создании шаблонов для СЕ).

    Например:

    HTML:
    <div><span>Привет, и добро пожаловать в обучающий проект fontanka при поддержке SocEngine.ru</span></div>
    div и span надеюсь всем ясно - парные теги, т.е. я создал открытием тега див бокс с текстовым содержанием и закрыл тем же дивом, только перед ним поставил "/" символ закрытия. Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Впрочем, есть теги без всяких дополнительных атрибутов. Условно атрибуты можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.


    В примере 3.1 показан типичный HTML-документ с тегами и текстом.(код не мой)
    HTML:
    <!DOCTYPE HTML>
<html>
 <head>
   <meta http-equiv="content-type"; charset="utf-8">
   <title>Lorem ipsum</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet consectetuer cursus pede pellentesque vitae
      pretium. Tristique mus at elit lobortis libero Sed vestibulum ut eleifend habitasse.
      Quis Nam Mauris adipiscing Integer ligula dictum sed at enim urna. Et scelerisque
      id et nibh dui tincidunt Curabitur faucibus elit massa. Tincidunt et gravida
      Phasellus eget parturient faucibus tellus at justo sollicitudin. Mi nulla ut
      adipiscing.</p>
   </body>
</html>
    В данном примере используется одиночный тег <meta>, а парных тегов сразу несколько: <html>, <head>, <title>, <body> и <p>.
    fontanka, Feb 20, 2011
    #4

  5. fontanka Thread starter Novice member


    Offline
    Message Count:
    12
    Likes Received:
    0
    Урок №2 (часть 2) Теги.


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

    Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 3.2).

    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>Кавычки в атрибуте alt</title>
 </head>
 <body>
  <p><img src="images/arena.png" alt="Вид заголовка" width="400" height="101"></p>
  <p><img src="images/arena.png" alt=Вид заголовка width="400" height="101"></p>
 </body>
</html>

    В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать атрибуты тегов в кавычках.
    Теги можно писать как прописными, так и строчными символами

    Любые теги, а также их атрибуты нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.
    Переносы строк

    Внутри тега между его атрибутами допустимо ставить перенос строк. В примере 3.3 показана одна и та же строка, но оформленная разными способами.

    Пример 3.3. Переносы строк в коде тега
    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>Кавычки в атрибуте alt</title>
 </head>
 <body>
  <p><img src="images/arena.png" alt="Вид заголовка в IE" width="400" height="101"></p>
  <p><img src="images/arena.png"
   alt="Вид заголовка в браузере IE"
   width="400"
   height="101"></p>
 </body>
</html>

    Порядок тегов

    Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.(ОСОБЕННО ВАЖНО В НАШЕМ ДЕЛЕ - ПРИМЕНИТЕЛЬНО К СЕ, БЕЗ ПОНИМАНИЯ ПРЯМОЙ ПОСЛЕДОВАТЕЛЬНОСТИ МЫ а) запутаемся, б) сделаем куча ошибок)

    Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.
    fontanka, Feb 20, 2011
    #5

  6. fontanka Thread starter Novice member


    Offline
    Message Count:
    12
    Likes Received:
    0
    Отделил эту часть урока, так как она очень важна. АТРИБУТЫ.
    Это то что заставит вас плакать или заставит ваш шаблон работать как надо.

    Например как на SocEngine.ru сайте, когда мы заходим на него, то видим слева прикрипленную статично к области обзора надпись "Оставьте свой отзыв" это атрибут "fixed" (готов даже поспорить, не отрицаю, возможность есть и другие решения)

    Мелочь, а приятно. Но Атрибуты это не только "няшные":)D) фишечки, но и важные вещи, как например расположение элемента, по какой оси прокручивать, повторять текст, скрывать...
    Да и в принципе я смело могу заявить что это основа на чем строиться любой дизайн и любая ХТМЛ платформа.
    Это фундамент.

    Итак:
    Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются атрибуты тегов.
    Для атрибутов тегов используются значения по умолчанию

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

    Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения, как показано в примере 3.4.

    Пример 3.4. Атрибуты без значений
    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>
  <form action="self.php">
   <p><input type="text"></p>
   <p><input type="submit" disabled></p>
  </form>
 </body>
</html>
    В данном примере используется атрибут disabled, у которого явно не задано значение. Подобная запись называется «сокращенный атрибут тега».
    Порядок атрибутов в тегах

    Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида <img src="/images/title.gif" width="438" height="118"> и <img height="118" width="438" src="/images/title.gif"> по своему действию равны.
    Формат атрибутов

    Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, в примере 3.3 упоминается тег <img>, он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при валидации документа.
    fontanka, Feb 20, 2011
    #6

  7. fontanka Thread starter Novice member


    Offline
    Message Count:
    12
    Likes Received:
    0
    Урок №3. Таблицы (очень важная тема, прошу вчитываться внимательно).
    На таблицах может быть построено все, их можно применять как блоки, с их помощью создают форму(редактируя местоположение). Круг применения очень широк, я думаю все понимают на что я намекаю.


    Создание таблицы

    Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.

    Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

    Пример 12.1. Создание таблицы
    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>Тег TABLE</title>
 </head>
 <body>
  <table border="1" width="100%" cellpadding="5">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>
    Порядок расположения ячеек и их вид показан на рис. 1
    [IMG]


    Атрибуты тега <table>

    Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию атрибутов тегов <table>, <tr> и <td>. Далее перечислены некоторые атрибуты тега <table>, которые применяются наиболее часто.
    align

    Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.
    bgcolor

    Устанавливает цвет фона таблицы.
    border

    Устанавливает толщину границ в пикселах. Граница отображается вокруг таблицы и между ячейками.
    cellpadding

    Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
    cellspacing

    Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.
    cols

    Атрибут cols указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все ее содержимое будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.
    rules

    Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью атрибута border.
    width

    Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.



    Больше вам ничего не понадобиться знать про таблицы. Если кому то интересно как обьеденять ячейки, то пишите, я скажу как.
    fontanka, Feb 20, 2011
    #7

  8. fontanka Thread starter Novice member


    Offline
    Message Count:
    12
    Likes Received:
    0
    Кто дружит с английским и понимает его, может опередить меня в уроках и почитать списки тегов и атрибутов в ХТМЛ
    Итак: http://www.w3.org/TR/html401/index/elements.html - это теги (Depr. - нежелательно к применению, прошу теги с такими знаками не применять, 5 ХТМЛ уже у нас дома)
    А вот и список атрибутов: http://www.w3.org/TR/html401/index/attributes.html

    а это сайт консорциума (ребята которые и изобрели единый ХТМЛ) http://www.w3.org/
    fontanka, Feb 20, 2011
    #8

  9. Red Rabbit Tough member


    Offline
    Message Count:
    898
    Likes Received:
    193
    Сложно, очень сложно написать что-то новое, и реально нужное не повторяясь. Общие уроки думаю здесь едва ли кому-то пригодятся, а вот уроки по применению стилей, свистелок, и прочих css,js,html штук на примере движков соц.сетей представленных здесь - это думаю будет представлять хоть какой-то интерес.
    Red Rabbit, Feb 20, 2011
    #9

  10. Gooos абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Gooos, Feb 21, 2011
    #10
Page 1 of 2

Share This Page

All rights reserved SocEngine.ru ©