"Я - вебмастер!" Этап 1. Как это работает?! О_о

Страница: 1 2 3 4 5 »

Тема закрыта

Сообщений 1 страница 10 из 49

Поделиться104.10.12 23:38

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Еще раз прошу прощения у всех за долгое ожидание, но (ура!) я, наконец, поправилась и мы продолжаем

Объявляю об открытии ПЕРВОГО ЭТАПА конкурса "Я веб-мастер!".

Напомню, что в первый этап прошли участники, набравшие 15 и больше баллов в отборочном этапе. Это 22 участника:

Рунный 24
Адель Камински "Кот" 23
Ghоst 22
Leonheart 22
faiko 21
Eri 20
Danessa 20
Бу 19
Арина Пестрова 19
Mrayne 19
Deisy "Кот" 19
essen menschen 18
MariaD 18
Пернатый 17
Лаит 17
супернатурал 17
slastnicova "Кот" 17
Шериан 16
Rush 16
Нелл 15
Rhisenn 15
Ulia "Кот" 15

Еще раз поздравляю прошедших и готова предложить новые задания

Этап 1. Как это работает? О_о

Правила этапа:

Этот этап уже был на конкурсе, но в этом году претерпел некоторые изменения.
1. Этап содержит 16 заданий с открытым ответом.
2. На каждый вопрос участник должен дать развернутый или краткий ответ в зависимости от специфики вопроса (например, в некоторых вопросах нужно просто перечислить теги, а в некоторых - объяснить почему так или иначе работает данный код).
3. За каждый ответ участник может получить от 0 до 3 баллов в зависимости от полноты и правильности ответа. Проверять ответы будут 2 организатора sadhaka и Герда. При несовпадении оценок ответа, участник получит максимальную из оценок обоих организаторов (например, если sadhaka оценила ответ в 1 балл, а Герда - в 3, то участник получит 3 балла).
4. Поместите Ваш ответ в спойлер с пометкой "Конкурс" (с большой буквы(!)). Например,
Код:
[spoiler="Конкурс"]Задание 1. Я считаю, что .... [/spoiler]
Вы должны увидеть такое сообщение:
Конкурс
Привет, мир!
Если Вы увидели что-то другое, прошу Вас, сообщите организаторам.

Этап открыт до 11.10 23.50 по Московскому времени. Результаты будут объявлены 13.10.
Надеюсь в скором времени второй организатор в лице Герды приоткроет еще немного завесу тайны главного приза и озвучит утешительные призы этого этапа.

Удачи!

Внимание! Задания!

1. Какими свойствами будет обладать элемент, для которого определены следующие стилевые правила?

2. Как убрать подчеркивание для всех ссылок?

3. Дан код:

В какой из строк установлен двойной межстрочный интервал и почему?

4. В чём состоят отличия между примерами, представленными в следующем фрагменте кода:

5. Каким образом будет выглядеть конечный документ после обработки браузером данного фрагмента кода и почему?

6. Какой слой не будет виден после обработки браузером следующего фрагмента кода:

7. Какие строки содержат ошибки? Исправьте их.

8. Какое значение будет иметь третий маркер списка:

9. Какие теги позволяют создавать элементы с множественным выбором?

10. Что означает данный код?

11. Может ли у тега <a> не быть атрибута href? Почему?

12. Для чего предназначен id тегов?

13. Какими свойствами будет обладать элемент, для которого заданы следующие правила?

14. Какими способами можно задать размеры изображения? Приведите примеры.

15. Какие строки содержат ошибки? Исправьте их.

16. Что произойдет с элементом, если задать ему правило position: absolute?

Поделиться205.10.12 18:40

Автор: Leonheart
Призрак
Последний визит:
02.07.14 16:41
Уважение: +35

Конкурс

~~Можно без вступительных слов... просто текстом отвечать?~~

Задание 1. (Какими свойствами будет обладать элемент, для которого определены стилевые правила)

Элемент будет обладать следующими свойствами:
- отступ от левой границы элемента в 500 пикселей от начальной точки расположения, т.к. из двух заданий одного и того же свойства выполняется последнее.
В случае, если элемент содержит текст, то еще и:
- интервал между символами в 0.1 em единиц, относительно высоты шрифта;
- бувквы будут заглавными.

Задание 2. Как убрать подчеркивание для всех ссылок?

С помощью CSS задать им свойство:
a, a:hover, a:active, a:visited {text-decoration: none;}

Уберет подчеркивание у обычной/при наведении/нажатой/посещенной ссылок соответственно.

Задание 3. Дан код... В какой из строк установлен двойной межстрочный интервал и почему?

Двойной межстрочный интервал будет у первой строки, потому что задан стилевой класс, переопределивший стандартный размер (в данном случае в 1em) межстрочного интервала для первой строки.

Задание 4. В чём состоят отличия между примерами, представленными во фрагменте кода...

Различие состоит в том, что в первом случае данное свойство семейства шрифтов будет применено и к абзацу, и к тексту, написанному курсивом (в тегах <i></i>);
во втором случае - только к тексту, написанному курсивом.

Задание 5. Каким образом будет выглядеть конечный документ после обработки браузером фрагмента кода и почему?

Документ будет выглядеть так:
на сером фоне расположены друг под другом две строки текста, первая в оранжевом прямоугольнике, вторая изменений не претерпевает (т.е. черные буквы на сером фоне). Происходит это потому, что тег <p> является блочным элементом. И тег <div> также является блочным элементом. И по правилам тега <p> - если после первой строки не было поставлено закрывающего тега (</p>), конец абзаца совпадет с началом следующего блочного элемента, коим и стал <div>.

Задание 6. Какой слой не будет виден после обработки браузером фрагмента кода.

Третий (Third) - потому что его положение выходит за рамки окна браузера.

Задание 7. Какие строки содержат ошибки? Исправьте их.
0 div {
1 background-color: transparent;
2 color: _d9b666;
3 font-style: bold;
4 margin-top: 10px;
5 text-align: center;
}

Ответ: ошибки в строках 2 и 3.

1 вариант исправления:
div {
background-color: transparent;
color: #d9b666;
font-style: italic;
margin-top: 10px;
text-align: center;
}

2 вариант исправления:
div {
background-color: transparent;
color: #d9b666;
font-weight: bold;
margin-top: 10px;
text-align: center;
}

Задание 8. Какое значение будет иметь третий маркер списка:

Значение "H" (англ. алфавит).

Задание 9. Какие теги позволяют создавать элементы с множественным выбором?

Теги <select></select> с атрибутом multiple позволяют создавать элементы с множественным выбором.

Пример:
<form>
<select multiple>
<option>Element 1</option>
<option>Element 2</option>
</select>
</form>

Задание 10. Что означает данный код?

Данный код означает, что на странице расположено 3 элемента с "флажками", последний из которых будет заранее помечен (checked).
Кроме того, у каждого элемента задано имя (name), что позволит его идентифицировать при обработке, и значение (value), которое является уникальным для каждого флажка и позволит обработчику одназначно установить, какой пункт был выбран.

Задание 11. Может ли у тега <a> не быть атрибута href? Почему?

У тега <a> не может не быть атрибута href, т.к. последний является для тега <a> обязательным.

Задание 12. Для чего предназначен id тегов?

Атрибут id присваивает элементу уникальное название, которое может быть только единственным в пределах данного документа (т.е. двух элементов с одинаковыми значениями id в коде быть не должно, ~~для этого существуют классы~~).
Это уникальное название впоследствии даст возможность обратиться к элементу посредством скриптов.
Атрибут id в HTML имеет не одно применение:
- он может выступать как селектор стиля отдельных элементов,
- так и в качестве закладки для гиперссылок,
- или для указания на конкретный элемент из сценария (script),
- также в качестве имени элемента object.

Задание 13. Какими свойствами будет обладать элемент, для которого заданы правила?

1. Если элемент содержит текст, то цвет текста будет черного цвета, а тень текста будет размытой в радиусе 6 пикселей цвета c0c0c0.

(*2. Куски кода, отвечающие за фон блочного элемента не сработают, ибо там три ошибки кряду.
Если в последней строке исправить на:
background: transparent;

Фактически ничего не поменяется, т.к. по умолчанию цвет фона и без того transparent. Но вот если исправить после этого еще 2 ошибки в первой строке:
background-color: #ffffff !important;

то у фона блочного элемента появится цвет, и будет он белым, причем неважно, какой код цвета будет задан в последней строке, !important повышает приоритет первой строки.
Однако если это были ненамеренные опечатки (а скорее всего они были сделаны специально), вторая часть ответа идет как примечание оО.

Задание 14. Какими способами можно задать размеры изображения? Приведите примеры.

С помощью HTML.

1. Прямо в тегe, предназначенном для вывода изображения в графическом виде:
<img width="100" height="100" src="http://mmm.ru"/>

Причем если указать только ширину
<img width="100" src="http://mmm.ru"/>

высота будет вычисляться браузером автоматически и пропорционально относительно основного изображения.

2. Этим же способом, но в процентном отношении:
<img width="101%" height="101%" src="http://mmm.ru"/>
<img width="101%" src="http://mmm.ru"/>

Средствами CSS:

3.
<img style="width: 101%; height: 101%;" src="http://mmm.ru"/>
<img style="width: 101%;" src="http://mmm.ru"/>

Причем в этом случае уже возможны любые доступные CSS единицы длины, не только px и %.

4. Описать через CSS путем обращения к тегу <img/>:
img {width: 200px; height: 30px;}

или
img {width: 200px;}

Пропорции сохраняются как и прежде.

В вопросе не указано, как конкретно представлено изображение, размеры которого меняем доступными нам способами. Значится ли оно в теге <img/> или описано через CSS как свойство background.
5. Если последний случай все же имеет смысл, то есть такое свойство как background-size, которое масштабирует изображение согласно заданным размерам. К примеру одно из значений этого свойства - contain
background: transparent url("...link...") 0 0 no-repeat;
background-size: contain;

Масштабирует изображение с сохранением пропорций так, что картинка полностью помещается внутри блока.
~~Об остальных значениях можно почитать в учебниках...~~

Ну или просто обрезать/уменьшить в ФШ или любом другом граф. редакторе до нужного размера и поставить в <img/> как есть )

Задание 15. Какие строки содержат ошибки? Исправьте их.
0 div {
1 border-color: #c1b194;
2 border-style: thin;
3 border-width: 1%;
4 }

Ответ: ошибки в строках 2 и 3

Относительно 2-ой строки, у border-style нет такого значения как thin. Поэтому меняем его на любое существующее.
Относительно 3-ей строки, border-width имеет 3 значения thin|medium|thick, однако толщина этих значений несколько отличается в разных браузерах. Рациональнее задавать border-width в пикселях.
Также в процентах толщина границы не измеряется, и браузер просто выдает толщину границы по умолчанию.

Поэтому
div {
border-color: #c1b194;
border-style: solid;
border-width: 1px;
}

Задание 16.

~~И последний вопрос... неужели~~

При задании элементу правила position: absolute элемент окажется абсолютно позиционированым, при этом другие элементы документа отобразятся так, словно нашего абсолютно позиционированного и нет среди них.
~~Ситуация исправляется применением правила z-index.~~
Положение элемента будет задаваться такими свойствами как top, right, bottom, left.
На положение абсолютно позиционированного элемента влияет и значение свойства position у родительского элемента.

Проверка. sadhaka

1. 3б
2. 3б
3. 2,5б (не указано, что стилевое правило трекинга для класса .line задано с помощью множителя).
4. 1,5б (во втором случае к курсиву в абзаце)
5. 3б
6. 3б
7. 3б
8. 3б
9. 1,5б (не указан <input type="checkbox">
10. 3б
11. 0б (может, если это - якорь, тогда задан должен быть атрибут name)
12. 3б
13. 3б
14. 3б (+бонус 1б)
15. 3б
16. 2б

41,5 баллов

Поделиться305.10.12 19:46

Автор: Ghоst
Призрак
Последний визит:
22.11.13 16:00
Уважение: +299

Конкурс

1. Отступом слева в 500px, отступом между буквами в 0.1 от размера шрифта элемента, все буквы прописные.

2. Для всех видов ссылок, в том числе наведенных, активных и пр.
a { text-decoration: none!important }

3. У параграфа класса line, то есть у строки "Строка 1...", поскольку в его стиле прописан множитель интерлиньяжа 2, то есть основной интервал в 1em умножается на 2.
4. В первом примере стилевое указание относятся к тегам p и i, тогда как во втором - к тегам i, стоящим внутри тегов p - так называемый контекстный селектор.
5. на сером фоне странице будет строка с оранжевым фоном, черными буквами и надписью "First", а после нее с новой строки будет блок без фона (то есть с подложкой из фона страницы) с черной надписью "Second".
6. Четвертый, так как отступ считается от материнского элемента, а здесь им является тело страницы. Так что четвертый блок уйдет влево за ее пределы.
7.
div {
background-color: transparent;
color: #d9b666;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
8. h.
9.
<input type='checkbox'>
<select multiple>
<option>Пункт</option>
<option>Пункт</option>
</select>
10. Три "флажка", чекбокса, причем последний из них заранее отмечен, уникально определенных для клиентской или серверной программы с помощью value для определения однозначности выбора пользователя и уникально именованы на странице.
11. У тега - может не быть, если тег является якорем. Тогда для него обязательным является name. Для ссылки этот атрибут обязателен.
12. Задает стилевой идентификатор, то есть уникальное имя элемента, с помощью которого к нему можно обращаться через css или скрипты. Должен быть уникальным, то есть присутствовать только у одного элемента.
13. Черный цвет текста, серая тень у текста без смещения радиуса 6px. В background'ах ошибка в написании.
14. Можно в самом изображении
<img src="" width="350" height="250">
Можно поизвращеннее.
<img src="" style="width: 350px; height: 250px">

Если нам плевать и все изображения в одном размере - можно обратиться потегово:
<img src="">
<style>
img { width: 350px; height: 250px }
</stye>

Если у нас есть нужда масштабировать изображение, помещенное в другой тег (например, в параграф), то можно использовать контекстный селектор:
<p><img src=""></p>
<style>
p img { width: 350px; height: 250px }
</stye>

Если внешний элемент у нас имеет класс или идентификатор, то можно обратиться к изображению в конкретном параграфе/параграфах с помощью контекстного селектора (расписывать не буду, ибо лень и само собой уже понятно).

Можно задать идентификатор и обращаться к нему.
<img src="" id="image">
<style>
#image { width: 350px; height: 250px }
</stye>
Можно класс, если изображений с одним размером много.
<img src="1" class="image">
<img src="2" class="image">
<style>
.image { width: 350px; height: 250px }
</stye>

Можно для особых извратов изображение масштабировать с помощью css3
<img src="" style="transform: scale(1.2);">

15.
У border-style нет значения thin, а border-width не воспринимает проценты, хотя в справочнике сказано, что можно использовать пикселы и другие единицы. em воспринимает нормально.
div {
border-color: #c1b194;
border-style: solid;
border-width: 1px;
}

16. Задает абсолютное позиционирование элемента, так, что остальные элементы на странице ведут себя так, словно позиционированного элемента не существует. Положение задаются через задание расстояний от краев родительского элемента (left, right и т.д.) и зависит от позиционирования родительского элемента.

Проверка. sadhaka

1. 3б
2. 2б (!important вовсе необязательно)
3. 3б
4. 3б
5. 2б (нет объяснения, почему)
6. 3б
7. 3б
8. 0б (не "h", а "H")
9. 3б
10. 3б
11. 3б
12. 3б
13. 3б
14. 3б (+бонус 1б)
15. 3б
16. 2б

43 балла

Поделиться405.10.12 20:06

Автор: Ghоst
Призрак
Последний визит:
22.11.13 16:00
Уважение: +299

Тов. организаторы. На странице ответа post.php спойлер виден как спойлер, а не как "Ваш ответ принят...".

Поделиться505.10.12 20:20

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Ghоst
Да на самом защита от копирования - слабая, да и сильная не планировалась. Кто хочет может просто отключить яваскрипт.
Я все же надеюсь на порядочность участников. Убирала просто, чтобы не маячило.
Скрыла на странице ответа, на страницах поиска, убрала редактировать кнопку. Не знаю зачем. Чтоб было

Поделиться605.10.12 20:24

Автор: Leonheart
Призрак
Последний визит:
02.07.14 16:41
Уважение: +35

Я так понимаю, исправлению не подлежит, если уже после отправки вспомнил, где и почему ошибся...

Поделиться705.10.12 20:37

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Leonheart
Можно дописать новым постом точно так же в спойлер, номер задания и ответ.
Поскольку завершается этап 13 числа, до 13 можно исправлять сколько угодно.

Поделиться805.10.12 20:46

Автор: Ghоst
Призрак
Последний визит:
22.11.13 16:00
Уважение: +299

sadhaka
Кто хочет - найдет путь, хех.
Да чего там, пока что все относительно просто.

Поделиться905.10.12 20:58

Автор: Leonheart
Призрак
Последний визит:
02.07.14 16:41
Уважение: +35

sadhaka, благодарю за пояснение

Конкурс

Задание 6. (Исправленное)

Четвертый (Fourth) - потому что его положение выходит за рамки окна браузера.

Поделиться1005.10.12 21:39

Автор: супернатурал
Призрак
Последний визит:
09.11.12 17:39
Уважение: +12

Конкурс

Задание 1.
Элемент будет иметь отступ (расстояние от левого края) в 500px*, текстовые символы этого элемента приобретут интервал в 0.1 em, а так же станут заглавными (ВЕРХНИЙ РЕЕСТР)
* грубо говоря одно и то же свойство прописано два раза, поэтому браузер будет использовать то значение, которое задали последним, а 200px первого значения будут проигнорированы.

Задание 2.
Это делается при помощи css и свойства text-decoration
Вообще, по умолчанию задано значение none, то бишь без подчеркивания.
Но если нужно убрать подчеркивание, то прописываем следующее (для обычной ссылки)
a {text-decoration: none;}
Для других видов ссылок нужно добавить класс после выделенного, к которому собственно привязывается это свойство:
a:active - активная ссылка;
a:hover - при наведении на него курсора мыши;
a:visited - посещенные ссылки.

Задание 3.
Двойной межстрочный интервал установлен в первой строке css, так как значение "2" как раз таки дает нужным нам интервал. Данный интервал применяется только к первой строке (содержащей стилевой класс)
Вторая же строка кода дает стандартный отступ в 1em.

Задание 4.
В первом примере свойства применяются сразу к двум позициям - тексту и абзацу.
Во втором же случае, если я не ошибаюсь, свойства применяются к курсивному тексту (italic)

Задание 5.
Серый фон, слева расположены друг под другом две строки со стандартным межстрочным отступом. Блок первой окрашен в оранжевый цвет (т.к. к блочному элементу P привязано это свойство), второй не изменяется (потому что это уже другой блочный элемент - div, а значит свойства предыдущего блока на него не распространяются, новых задано не было)

Задание 6.
Четвертый. Его положение выходит за рамки окна браузера.

Задание 7.
div {
background-color: transparent;
color: #d9b666;
font-style: bold;
margin-top: 10px;
text-align: center;
}

Во второй строке забыли указать решетку (#)
А в третей строке значение не подходит к классу. Решить это можно двумя способами: либо заменить значение, либо непосредственно самого свойства.
Два варианта исправления:
1.
div {
background-color: transparent;
color: #d9b666;
font-style: normal;
margin-top: 10px;
text-align: center;
}

2.
div {
background-color: transparent;
color: #d9b666;
font-weight: bold;
margin-top: 10px;
text-align: center;
}

Задание 8.
h

Задание 9.
<select> c атрибутом multiple
<select multiple>...</select>

Задание 10.
3 элемента с "флажками", при чем последний будет заранее помечен.

Задание 11.
Нет, для ссылки атрибут обязателен. Без него ссылка, собственно говоря, не ссылка.

Задание 12.
Присваивает элементу уникальное название, используя который можно через css и/или html обращаться к данному элементу.

Задание 13.
На белом фоне (по умолчанию) текст черного цвета, с размытой в 6 пикселей тенью без смещения.
background-ы не будут работать, так как содержат ошибки.

Задание 14.
1) Самый простой и распространенный:
<img src="img.png" width="100" height="100">
-----------------------

2) Можно так же воспользоваться стайлом:
<img src="img.png" style="width: 100px; height: 100px">
-----------------------

3) Или обратиться еще и к css, но в данном случае ВСЕ изображения приобретут такой размер:
<style>img { width: 100px; height: 100px }</stye>
<img src="img.png">
-----------------------

4) Задать уникальный идентификатор и прописать непосредственно его
<style>#img100 { width: 100px; height: 100px }</stye>
<img src="img.png" id="img100">
-----------------------

5) Или же привязать класс:
<style>.img10 { width: 100px; height: 100px }</stye>
<img src="img.png" class="img100">
-----------------------

6) Ну и еще можно использовать "области обитания" изображений, то бишь тег в который помещено изображение
<style>p img { width: 100px; height: 100px }</stye>
<p><img src="img.png"></p>

Задание 15.
div {
border-color: #c1b194;
border-style: this;
border-width: 1%;
}
this - border-style не имеет такого значения.
1% - ширину границы нельзя указать в процентах, хотя бы потому что она (ширина) не рассматривается относительно ширины чего-то еще.

Исправленный вариант:
div {
border-color: #c1b194;
border-style: solid;
border-width: 1px;
}

Задание 16.
Элемент приобретет абсолютное позиционирование, так что остальные элементы никак не влияют на него.

Проверка. sadhaka

1. 3б
2. 3б
3. 2б (не точное объяснение)
4. 1,5б (во втором случае - к курсиву в абзаце)
5. 2б (не точное объяснение)
6. 3б
7. 3б
8. 0б (должно быть "H")
9. 1,5б (не указаны чекбоксы)
10. 2б (не точное объяснение)
11. 0б (тег <a> может быть якорем и тогда вместо href у него будет name)
12. 3б
13. 2,5б (не указан цвет тени)
14. 3б (+бонус 1б)
15. 3б
16. 1б (не точное объяснение)

34,5 баллов

Тема закрыта

Страница: 1 2 3 4 5 »

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

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

"Я - вебмастер!" Этап 1. Как это работает?! О_о

Сообщений 1 страница 10 из 49

Поделиться104.10.12 23:38

Поделиться205.10.12 18:40

Поделиться305.10.12 19:46

Поделиться405.10.12 20:06

Поделиться505.10.12 20:20

Поделиться605.10.12 20:24

Поделиться705.10.12 20:37

Поделиться805.10.12 20:46

Поделиться905.10.12 20:58

Поделиться1005.10.12 21:39