DH: Life for art.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » DH: Life for art. » Обучение HTML|CSS » Файко by carlson | Строим стиль


Файко by carlson | Строим стиль

Сообщений 1 страница 30 из 50

1

Привет, Инна, с тобой мы уже знакомы, так что, думаю, представляться не имеет смысла:) Вообще плохо понимаю, чему конкретно тебя нужно учить, раз ты и то, и то делала, так что давай с этого места поподробнее.

0

2

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

0

3

faiko, так, если я правильно тебя поняла, ты хочешь научиться писать коды с ноля?

0

4

carlson
Именно так :)

0

5

Окей, тогда немного теории о кодах.
Код CSS состоит из трёх параметров (по порядку): селектор, параметр, аргумент. Стандартно наш код выглядет вот так для любого элемента:
#element1 {parameter: argument;}

#element1 - это имя элемента, который мы собрались менять. К именам мы собственно относим названия наших элементов, к примеру, шапка будет иметь такой селектор: pun-title table.
parameter - это свойство этого элемента. К свойствам мы можем отнести фон, шрифт, размер, ширину, высоту и т.д.
argument - это значение свойства. Значение фона, к примеру. мы запишем в виде цвета или ссылки на фон, если изначально укажем заливку фона; значение шапки мы запишем в виде двух параметров: ширины и высоту.

Но, для того, чтобы облегчить самому себе задачу, мы также можем придать нашему элементу либо множество параметров, либо мы можем нескольким элементам придать один и тот же параметр с одинаковыми свойствами.
Давай рассмотрим первый вариант. Придадим нашему фону несколько параметров:

Код:
HTML, BODY {
background-color: #FFF;
background-repeat: no-repeat; 
background-attachment: fixed;
}

Заметь, что после каждого параметра со своим свойством мы ставим точку с запятой. Это чрезвычайно важно. Забыв поставить знак, код просто откажется работать. А между параметром и свойством мы ставим двоеточие.
Второй вариант. Придадим нескольким элементам одинаковые параметры:

Код:
#pun-navlinks, #pun-ulinks {
background-color: #FF0000; 
width: 400px; 
height: 200px;
}

Элементы мы обязательно пишем до фигурных скобок и через запятую. Таки образом мы придадим одинаковые фон, ширину и высоту для пользовательских меню.

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

0

6

carlson
Все это я уже знаю, теперь это еще глубже устроилось в памяти ^^
Параметры для профиля:

.post-author ul li {text-align: center;
color: #000;
border: 3px dotted #FFF;
border-radius: 10px;}

Параметры для отдельных элементов профиля:

.pa-author, .pa-title, .pa-avatar, .pa-awards {text-align: left;
color: #BBB;
border: 1px dotted #FFF;
border-radius: 8px;}

border-radius прописываю так, потому что все остальное из этой серии лень. Да и так все нормально работает...

+1

7

faiko, ну тогда у тебя не должно быть никаких проблем с составлением кода css. Умница.

0

8

carlson
Да с этим-то вообще никаких проблем...
Я не знаю по какому принципу это все составлять. Многих селекторов не знаваю...

0

9

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

0

10

carlson
Кнопачку я встречала и юзала.
Только по-другому: при наведени на элемент высвечиваются селекторы.
Но их там много.

0

11

faiko, там еще и код можно получить, йес. Но мы что-то отвлеклись вообще-то. Если css ты знаешь, плавно перейдём к html? Или стиль будем делать?

0

12

carlson
Перейдем к хтмл.
А про получение кода плиз поподобнее 8-)

0

13

faiko, оо... только что поставила себе кнопку, а она у меня, оказывается работать не хочет. Так что я тебе точное местонахождение не скажу, но внизу страницы должна быть надпись "Получить код". Жмёшь и тебе даётся сразу все коды с параметрами, которые ты установила.
Тааак, а теперь html. Возможно ты уже знаешь, для чего нам он нужен и что вообще означают эти загадочные четыре буквы, но не лишним будет повторить. И сама вспомню:)
HTML расшифровывается как HyperText Mark-up Language, а на русском это будет звучать так - язык гипертекстовой разметки. Отдельно по словам:
    Hyper противоположно linear/построчно. В добрые старые времена - когда кошки ловили мышей - компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net.
    Text - всё понятно.
    Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.
    Language это язык - HTML. В нём используется много английских слов.
Вот, теперь, если кто-то у тебя спросит, что такое HTML, ты запросто сможешь блеснуть своими знаниями:)

Я очень надеюсь, что ты знаешь, как посмотреть html-коды обычной интернет-страницы?

0

14

carlson
Короче, хтмл - язык разметки веб-страниц, с этим понятно.
Спасибо за подробное объяснение:)

carlson написал(а):

Я очень надеюсь, что ты знаешь, как посмотреть html-коды обычной интернет-страницы?

Естессна.
Ctrl + U или ПКМ - Исходный код.
И вотани все скриптики, коды а также ссылка на .css файл стиля, через который можно получить и cs_css.
Таким образом можно вытаскивать очень даже интересные весчи...)

Отредактировано faiko (2011-08-06 13:14:44)

+1

15

faiko, это мы знаем, молодец. Еще есть способ посмотреть через линейку меню браузера (вид -- исходный код).
Помимо того, что HTML - это язык нашего браузера, с его помощью можно создавать вэб-страницы и даже сайты. Для очень ленивых есть даже программы, которые частично помогают нам разобраться в сайтостроительстве, но трафик нынче дорог, а мы пойдём сложным, но очень дешевым путём - будем пользоваться блокнотом. Заметь, что для этого нам вовсе не нужно быть подключенным к интернету, а наш окончательный вариант сайта только потом загрузить во всемирную паутину. Готова к созданию сайта?)

0

16

carlson написал(а):

faiko, это мы знаем, молодец. Еще есть способ посмотреть через линейку меню браузера (вид -- исходный код).

В опере вид - средства разработки - исходный код :)

carlson написал(а):

Готова к созданию сайта?)

О,О
Неожиданно...
Как-то раз мой друг написал простую главную страничку для сайта. Просто фоновая картинка и сверху текст и ссылки. Но я не имела доступа к коду.
Сайт это страшно трудно... но я готова:D

0

17

О, ты даже не представляешь, насколько просто, тем более, что мы пока пойдём от малого, создадим пока что страницу с каким-то текстом. Текст ты можешь выбрать сама.
Для начала не забудь открыть "Блокнот". Запомни, что браузер HTML читает коды также, как это делаем мы, т.е. слева направо и сверху вниз. Тут текст не нужно будет переворачивать с головы на ногу:)
А теперь представь, что мы сейчас "поговорим" с нашим браузером. Прежде всего нам нужно сообщить ему, что "говорить" мы будем на его родном языке, на HTML. Сделать это проще простого, в первой строке мы напишем <html>. Этот тег у нас открывающий, по логике, нам нужно его и закрыть, потому в следующей строке поставим </html>.
Пишем дальше. Между нашими <html></html> поставим теги <head> и <body>. Запомни, что их тоже нужно закрывать.
<head> -  надеюсь, ты хорошо знаешь английский. Переводится это слов как "голова", а для форумов можно сказать еще и "шапка". <head></head> содержит служебную информацию о нашем документе.
<body> - это тело. Содержимое самого документа.
Вот так сейчас должо выглядеть твоё содержимое блокнота:

Код:
 <html>
       <head>
       </head> 

       <body>
       </body>
 </html>

Делать вот такие вот отступы между тегами необязательно, но желательно. Не ленись лишний раз нажать на TAB.
Это называется базовым шаблоном.

0

18

carlson
Сделано)

<html>
              <head>
              </head>

              <body>
              </body>
</html>

Отредактировано faiko (2011-08-06 14:34:08)

+1

19

Теперь поговорим подробнее о "шапке" и о "теле". Допустим, нам нужно как-то назвать нашу страницу. Поскольку тег <head> содержит информацию о документе, то и заглавие мы должны будем приписать сюда.

Код:
<title>Название моей вэб-страницы</title>

Теперь текст, помещенный между <title></title>  будет в верхней строке браузера. Зачастую новички почему-то путают "шапку" и "тело", пытаясь заставить информацию, помещенную между <head> отображаться на самой странице. Но мы-то грамотные, знаем, что текст нужно помещать между <body>. Это мы и сделаем.

Код:
  <p>Собственно, текст, который ты напишешь.</p>

P - это параграф (сокращение от англ. paragraph). Думаю, не нужно объяснять, что это значит.

Как не удивительно, но это и есть наш вэб-сайт. Осталось только его сохранить.
Для этого выбираешь Файл -- Сохранить как. Кодировка у нас остается стандартная (у меня: 1251 AINSI - кириллица), а вот тип файла выбираешь "Все файлы". Имя файла можешь задать любое, но выглядеть это должно так: ***.htm
Последнее, это расширение. В принципе, можешь написать .html, эффект будет такой же. И сохраняешь.
Теперь нам остается только открыть нашу вэб-страницу. В браузере выбираешь Файл -- Открыть файл (Ctrl+O) и выбираешь сохранённый документ. Вуаля, любуйся на свою первую созданную страницу.

0

20

carlson
Как создавать странички я знаю, но вот не до конца понимала хед и боди.
Спасибо, вот что получилось:

<html>
              <head>
              <title>Страничка faiko</title>
              </head>

              <body>
              <p>Сегодня меня научили создавать свои странички. Ура!</p>
              </body>
</html>

0

21

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

h1, h2, h3

Сокращение от английского heading. С помощью этого тега мы задаем заголовок. Отображаться он будет крупным шрифтом. Использовать тег заголовка можно вплоть до шестого (h6), он является самым маленьким. Т. е. вслед за первым заголовком будет идти второй, который будет меньшего размера, а вслед за ним пойдет третий, который будет меньше второго и т.д. Тег заголовка у нас также парный.

<br />

Обрати внимание на то, что в html тег переноса пишется немного иначе. На самом деле он у нас очень интересный, потому что может быть как парным, так и непарным. Сейчас он записан как непарный, но также можно писать <br></br>. Всё дело в том, стоит ли тратить на это время:)

<hr />

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

<blockquote>

Выделяет текст в виде цитаты. При этом ширина цитаты будет равная ширине нашего документа.

<pre> и <p>

По функциональной особенности эти теги практически одинаковы, потому я и поместила их вместе. Всё дело в том, что эти два тега регулируют количество пробелов и абзацев, но с одним только отличием. Если после тега <p> мы напишем фразу "Я    хочу   собаку", то в конечном результате увидим такое: "Я хочу собаку". Независимо от количества пробелов, благодаря этому тегу наша надпись будет принимать свой обычный вид. Но если мы этот тег заменим на <pre>, он позволит сохранить нам тот вид надписи, который нужен нам.

<em>

Предназначен для акцентирования текста, обыкновенно выделяет текст курсивом.

<sub>

Переводит текст в нижний индекс. Очень полезен, если нам придется писать названия химических элементов:) Например, Оксиген мы сможем написать в его нормальном виде, чтобы двойка была ниже и меньше буквы.

<sup>

Переводит текст в верхний регистр. Принцип примерно такой же, как и с тегом выше.

<ol>, <ul>, <li>

Теги для создания списков. Первый тег создаст список с видом
1. Текст.
2. Текст.
3. Текст.
Второй тег создаст список с видом
● Текст.
● Текст.
● Текст.
Последний тег мы используем для вставки именно текста. К примеру:
  <ul>
<li>Текст</li>
<li>Текст</li>
</ul>

+1

22

carlson написал(а):

<blockquote>

Искала давно, спасибо. Вещь нужная.

carlson написал(а):

<pre> и <p>

Встречала оба тега, но не знала различий.

carlson написал(а):

<em>

Чем он отличается от <i>?

carlson написал(а):

<ol>, <ul>, <li>

Вот этого не знала.

0

23

faiko написал(а):

Чем он отличается от <i>?

Хороший вопрос) Визуально при использовании этих двух тегов они ничем друг от друга не отличаются, оба делают текст курсивного начертания, но <i> - тег физической разметки текста, а <em> - логической. Всё это легче представить на примере человека. В любом тексте есть моменты, когда логически стоило бы выделить текст с помощью интонации, повысить голос или, наоборот, говорить тише. <em> как раз служит для логического выделения, указывает важность текста.

+1

24

carlson
Ясненько. Спасибо за объяснения)

0

25

faiko, :) Ты уже пробовала вставлять теги в наш полу-сайт или еще нет?)

0

26

carlson
Да, пробовала. Вот:

<html>
              <head>
              <title>Страничка faiko</title>
              </head>

              <body>
              <p>Сегодня меня научили создавать свои странички. Ура!</p>
              <p>Потом я узнала больше о некоторых хтмл-тегах. Вот примеры:</p>
              <p><h1>Большой текст H1</h1></p>
              <p><h6>Крошечный текст</h6></p>
              <p><em>Логически выделенный курсивом текст</em></p>
              <p><sub>Нижний индекс</sub><sup>Верхний регистр</sup></p>
              </body>
</html>

+1

27

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

0

28

carlson
Нет-нет, давай все, что есть) Я хочу быть умной и вообще больше не бегать на тэпэшку)

0

29

Ох, на ТП вряд ли получится не бегать, всё же за новинками следить стоит:)
Условно теги делятся на следующие типы:

    теги верхнего уровня;
    теги заголовка документа;
    блочные элементы;
    встроенные элементы;
    универсальные элементы;
    списки;
    таблицы.
Расскажу о каждом из типов и распределю теги по типам.
теги верхнего уровня - они предназначаются для формирования структуры веб-страницы, определяют заголовок и тело документа (<head>, <body>, <html>)
теги заголовка документа - эти теги располагаются в "шапке" (head) сайта (<title>, <meta>)
блочные элементы - занимают всю ширину нашего документа, а высота определяется объемом содержимого (как в таблице); блочные элементы всегда начинаются с новой строки (<blockquote>, <div>, <h1>,...,<h6>, <hr>, <p>, <pre>).
встроенные элементы - или строчные, к таким элементам относятся теги, которые являются встроенной частью другого элемента, например, текста. К слову, такие теги в основном и используются для того, чтобы выделять или изменять текст (<a>, <b>, <big>, <br />, <em>, <i>, <img>, <span>, <sub>, <sup>, <small>, <strong>).
универсальные элементы - в зависимости от контекста такие теги могут выступать как блочные, так и как встроенные (<del>, <ins>).
списки - используются для создания списков (<ol>, <ul>, <li>, <dd>, <dt>, <dl>)
таблицы - используются для создания таблиц (<table>, <td>, <th>, <tr>).

Если есть вопросы по каким-то определенным тегам - задавай.

+1

30

carlson написал(а):

Ох, на ТП вряд ли получится не бегать, всё же за новинками следить стоит:)

Я знай, я за эти новинки отвечаю на другом форуме:D
Просто буду обходить стороной раздел для новичкофф.

carlson написал(а):

Если есть вопросы по каким-то определенным тегам - задавай.

Да, объясни, пожалуйста, для чего нужны теги:

carlson написал(а):

<del>

carlson написал(а):

<ins>

carlson написал(а):

<dd>, <dt>, <dl>

И еще. Расскажи подробнее про универсальные элементы, не очень поняла, что это.

0


Вы здесь » DH: Life for art. » Обучение HTML|CSS » Файко by carlson | Строим стиль


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC