Дмитрий Новиков

добавляете произвольную ссылку, в поле "адрес" пишете:
javascript:void(0);

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

инлайновые стили пробовали?
<header style="background-image: url(img/header.jpg);">...</header>

ищите api у соцсетей. как правило, у каждой есть свои адреса для этого.
например:

<a href="http://vkontakte.ru/share.php?url=ВАШ_URL&image=АДРЕС_КАРТИНКИ" target="_blank" title="Поделиться ВКонтакте"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=ВАШ_URL" target="_blank" title="Поделиться в Facebook"></a>

собственно, эти теги можно стилизовать как угодно.

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

потому что на динамические элементы обработчики событий добавляются через on:

$(document).on("click","#element",function() {
...
});

потому что надо закрывать < textarea >. и еще у него нет атрибута type.

Нужно стараться, чтобы названия классов соответствовали семантике. Нужно делать так, чтобы было понятно, что это за блок.
если это верхний слайдер, то topslider, если это меню в футере, то footer-menu. Но не стоит придумывать названия, в зависимости от внешнего вида блока - потому что через какое-то время решите слегка поменять оформление, и будет неочевидно, что small-red-sidebar это большой зеленый блок в центре.
А еще для вас есть БЭМ - целая методология, как лучше именовать классы.

ну тут возможны два варианта.
1. заголовок - это контейнер с отступами, у которого фон такой же как у родителя, и спозиционирован абсолютно так же
2. заголовок и горизонтальные линии - это div'ы с float:left;, а контейнер с текстом под ними имеет border-right, border-left и border-bottom, но не имеет border-top