DH: Life for art.

Объявление

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

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

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


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


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

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

31

Конечно.

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

<del>

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

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

<ins>

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

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

32

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>
              <p>Теперь мне известны оба варианта тегов перечеркивания. Помимо s есть ещеи  del. <del>Пример</deL></p>
              <p>Теперь мне известы оба варианта тегов подчеркивания. Помимо u есть еще и ins. <ins>Пример</ins></p>
              </body>
</html>

+1

33

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

0

34

carlson

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

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

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

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

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

0

35

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

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

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

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

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

0

36

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

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

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

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

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

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

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

+1

37

faiko, йес:)

0

38

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

<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>
              <p>Теперь мне известны оба варианта тегов перечеркивания. Помимо s есть ещеи  del. <del>Пример</deL></p>
              <p>Теперь мне известы оба варианта тегов подчеркивания. Помимо u есть еще и ins. <ins>Пример</ins></p>
              <p><a target="_blank" href="http://laktonika.narod2.ru/page.html">Это ссылка. Она ведет на другую страницу.</a></p>
              </body>
</html>

+1

39

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

0

40

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

0

41

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

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

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу.
Ссылки на картинку бывают относительными и абсолютными. Если в начале адреса стоит слэш ("/"), это значит, что загрузка картинки идёт от корня сайта.
Также есть относительный и абсолютный адрес. Относительный адрес указывает браузеру положение файлов относительно нашей веб-страницы. Абсолютный адрес позволяет получить доступ к любому файлу, который не находится на нашем веб-сайте.
Вот я нашла картинку-объяснение, взгляни:
http://hosting.web-3.ru/data/html/2273/make-your-own-web-pages-url.gif

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

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

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

+1

42

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

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

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

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

0

43

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

Код:
../../../images/pic.gif

0

44

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

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

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

0

45

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

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

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

0

46

carlson
Понятно http://www.kolobok.us/smiles/standart/smile3.gif

0

47

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

+1

48

carlson
Ага)

<img src="ссылка" title="Описание" />

<img src="ссылка" title="Описание" alt="Описание" />

<img src="ссылка" alt="Описание" />

Только вот не доперло, почему текст alt не отображается, а title - без проблем?

0

49

Вообще не отображается?

0

50

carlson
У меня ни в опере, ни в мозилле никогда не отображался alt-текст :)

0


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


Рейтинг форумов | Создать форум бесплатно