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

Поделиться312011-08-23 09:44:51

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

Конечно.

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

<del>

Этот тег аналог нашему <s></s>, который делает зачёркивание текста. В примере это будет выглядеть так:
Скидка на товары ~~15%~~ 30%!

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

<ins>

А этот тег - один в один с , то есть он подчеркивает текст.

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

<dd>, <dt>, <dl>

Эти теги так же помогают нам создавать списки, но в отличии от <ol>, <ul>, <li>, которые маркируют списки цифрами или знаками, эти же просто устанавливают отступы.
К примеру:
Деревья
Сосна
Ива
Берёза
Цветы
Роза
Ромашка
Лилия
А в тегах это будет выглядеть вот так:

Код:

<dl>
	<dt>Деревья</dt>
    <dd>Сосна</dd>
    <dd>Ива</dd>
                <dd>Берёза</dd>
	<dt>Цветы</dt>
    <dd>Роза</dd>
    <dd>Ромашка</dd>
                <dd>Лилия</dd>
</dl>

+1

Поделиться322011-08-23 11:40:34

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

carlson
Спасибо:)
Некоторые из тегов я вставила в наш документ:

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

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

+1

Поделиться332011-08-24 17:48:29

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

Отлично. Теперь принимаемся за ссылки?)

0

Поделиться342011-08-24 18:36:28

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

carlson

<a href="Ссылка">Название</a>

<a href="Ссылка" title="Описание">Название</a>

<a href="Ссылка"><img src="Картинка"></a>

<a href="Ссылка" target="_blank">Название</a>

Это вроде все, что я знаю.
Ну и еще width и height, если картинкой.
Что мне еще не известно?)

0

Поделиться352011-08-26 15:29:18

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

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

Что мне еще не известно?)

Достаточно:)

<a target="имя окна">...</a> - вот так по умолчанию выглядит наша ссылка. Ты правильно написала несколько вариантов, но я вот, к примеру, заменила href сразу на target; с помощью этого атрибута ссылка откроется в текущем окне. Вместо target можно поставить:
_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно (это значение задается по умолчанию).
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Попробуй разместить в своём документе ссылку на ещё одну страницу, созданную тобой.

0

Поделиться362011-08-26 16:51:12

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

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

Вместо target можно поставить:

В смысле вот так?

<a target="_blank">...</a>

<a target="_self">...</a>

<a target="_parent">...</a>

<a target="_top">...</a>

+1

Поделиться372011-08-26 18:40:50

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

faiko, йес:)

0

Поделиться382011-08-26 19:25:30

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

Я создала простую страницу и залила ее на тестовый сайт на народе, куда я кидаю разные файлы. Вот код:

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

<body>
Сегодня меня научили создавать свои странички. Ура!
Потом я узнала больше о некоторых хтмл-тегах. Вот примеры:
<h1>Большой текст H1</h1>
<h6>Крошечный текст</h6>
Логически выделенный курсивом текст
Нижний индексВерхний регистр
Теперь мне известны оба варианта тегов перечеркивания. Помимо s есть ещеи del. <del>Пример</deL>
Теперь мне известы оба варианта тегов подчеркивания. Помимо u есть еще и ins. <ins>Пример</ins>
<a target="_blank" href="http://laktonika.narod2.ru/page.html">Это ссылка. Она ведет на другую страницу.</a>
</body>
</html>

+1

Поделиться392011-08-29 17:15:41

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

По-моему выходит здорово, но можно было сделать проще: повторить с новой страницей все те действия, которые мы применяли для создания первой страницы, открыть её в браузере и просто скопировать ссылку, поместив её в первую страницу. Эффект будет таким же.

0

Поделиться402011-08-29 17:42:56

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

carlson
Да, я тоже об этом думала. Но что, если со страничкой что-то случится - например, она будет пермещена? Я решила этого избежать, залив на сайт ^ ^
Давай учиться дальше.

0

Поделиться412011-09-04 09:48:36

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

Окей, идём дальше и идём к изображениям. Есть две рекомендации, под которые попадают все-все-все изображения, которые мы размещаем на странице: а) - изображение должно быть меньшего размера, чем наше окно для того,чтобы не появлялись полосы прокрутки; б) - чем меньше изображение, тем шустрее грузится страница и тем благодарнее нам люди, просматривающие страницу, за экономию трафика.
Про форматы я тебе подробно рассказывать не буду, тем более, с фотошопом ты знакома и с форматами - тем более.
Этот код нам помогает загрузить изображение:

Код:

<img src="URL" alt="альтернативный текст">

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу.
Ссылки на картинку бывают относительными и абсолютными. Если в начале адреса стоит слэш ("/"), это значит, что загрузка картинки идёт от корня сайта.
Также есть относительный и абсолютный адрес. Относительный адрес указывает браузеру положение файлов относительно нашей веб-страницы. Абсолютный адрес позволяет получить доступ к любому файлу, который не находится на нашем веб-сайте.
Вот я нашла картинку-объяснение, взгляни:

create-webpage.htm и хотите перейти на страницу publishing.htm, то относительный путь будет просто publishing.htm, т.к. оба файла находятся в одной директории.

Таким образом, доступом к файлу index.htm будет путь ../index.htm, в этом случае две точки означают, что браузер должен подняться на одну директорию выше. Доступ к файлу image1 находится в директории images, значит путь к файлу будет ../images/image1

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

+1

Поделиться422011-09-04 09:59:06

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

carlson
Ясно
В некоторых случаях, когда я на тестовик загружаю картинки и на тестовике же с ними экспериментирую, в кодах я прописываю вот так:
<img src=".../uploads/0006/f1/80/9210-1.jpg" />
Еще такого вида ссылки присутствуют в кодах стандартных стилей Mybb.

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

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

Бгг, знаем-знаем :3

0

Поделиться432011-09-04 11:37:52

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

Но это не всё, что нам нужно знать об изображениях:))
Если перед адресом стоит http (http://), это значит,что ссылка является абсолютной и будет загружаться с любого сервера в интернете.
И, наконец, двоеточие со слэшем (../), в предыдущем посте приводился и такой пример. Это говорит о том,что изображение и документ, или изображение и изображение находятся на разных уровнях, в разных папкахэ.
Еще возможен такой вариант:

Код:

../../../images/pic.gif

0

Поделиться442011-09-04 12:13:25

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

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

Еще возможен такой вариант:

Почему в нем несколько слешей и двоеточий?

0

Поделиться452011-09-04 12:30:20

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

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

Почему в нем несколько слешей и двоеточий?

потому что обращение из одного файла к другому превращается в набор двоеточий.

0

Поделиться462011-09-04 12:35:21

Автор: faiko
pro.
Зарегистрирован: 2011-07-07
Приглашений: 0
Сообщений: 621
Уважение: +37
Позитив: +19
Пол: Женский
Провел на форуме:
4 дня 4 часа
Последний визит:
2012-12-01 17:19:03

carlson
Понятно

0

Поделиться472011-09-18 13:07:05

Автор: carlson
царь.
Откуда: Украина, Кривой Рог
Зарегистрирован: 2010-10-31
Приглашений: 4
Сообщений: 1826
Уважение: +84
Позитив: +79
Пол: Женский
Возраст: 29 [1994-11-23]
Провел на форуме:
13 дней 13 часов
Последний визит:
2012-07-17 17:46:30

Ещё понятнее будет непосредственно в работе:) Едем дальше.
Альтернативный текст создаётся с помощью атрибута alt тега <img>. Для чего это нам нужно или нужно ли вообще? Огромное значение альтернативный текст может иметь для тех же пиарщиков. Для быстрой загрузки страницы они часто отключают любые изображения, чтобы как можно быстрее передвигаться по форумам и оставлять рекламу. Но отключить изображения значит то, что вместо них теперь будут появляться ссылки. А если добавить альтернативный текст, вместо ссылки автоматически будет появляться написанный нами текст, который использовать можно для разных целей, к примеру, для скрытой рекламы:))
Текст альтернативного текста (масло масляное, знаю%)) должен обязательно быть взят в кавычки.
Но бывают также случаи, когда некоторые браузеры не читают альтернативный текст, и тогда на помощью приходит атрибут title. Как и с alt, текст также должен быть взят в кавычки. Необязательно использовать какой-то один атрибут, в код одного изображения можно поместить и title, и alt. Кстати, не стоит увлекаться и вставлять целые абзацы, потому что они всё равно будут обрезаться.

+1