dummyman

За поиск координат места по адресу или обратно адреса по координатам может отвечать хороший opensource-проект Nominatim. Можно сделать локальную версию БД. Обычно ему скармливают карты OSM типа таких. Можно использовать и другие источники, в том числе проприетарные. Если есть конкретные идеи, свяжитесь с авторами проекта. Должно быть, они будут рады помочь и объединить усилия.

Конечно, ведь вы его сверстали элементом списка. А ему необходим display: block;

Даа, вспоминаются студенческие деньки... Delphi 5... Кинул один компонент Quantum Grid на форму и настраиваешь его дня два, адаптируешь под контекст задачи.

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

Вот бог его знает что там у вас не так, уже нет времени разбираться. Я вам оставлю мою версию демо-странички для плавного скролинга, там все в одном jade-файле

doctype html
html
    head
        style.
            html, body {background: white; background: #2c2c2c; }
            body, div { margin: 0; padding: 0;}
            html, body { width: 100%; height: 100% }
            body { padding-top: 50px; }
            nav { position: fixed; top: 0; height: 50px; width: 100%; background:#444444; border: 1px solid #313131; z-index: 1000; }
            nav ul { text-align: center; }
            nav ul li { display: inline-block; }
            nav ul li a { color: #D07C40; display: inline-block; text-decoration:none; margin: 0 7px; font-family: Diskoteque;  text-shadow: 0 0 0.5em #241600, 0 0 0.1em #000000; }
            nav ul li a:hover { color: #94D040;}
            nav ul li a:visited { color: #EFC75E; }
            nav ul li a:focus { color: #94D040; }
            nav ul li a:target { color: #94D040; }
            nav ul li a:active { color: #94D040; }
            .anchor { display: block; position:absolute; margin-top: -60px; }
            .photo { object-fit: contain; margin: 0 auto; position: relative; padding: 10px; margin: 15px 10px; background: white; box-shadow: 2px 2px 5px black;}
            .photo.hor { width: 640px; height: 480px; }
            .photo.vert { width: 480px; height: 640px; }
            .photo .num { position: absolute; z-index: 100; color: red; font-family: Tiza; width:2.5em; height: 2.1em; text-align: center; margin: .5em 0 0 .2em; }
            .photo img { width: 100%; height: 100%; display: block; margin: 0 auto; position: relative; max-width: 100%; max-height: 100%; object-fit: contain; }
            .photo .filename {position: absolute; z-index: 100; width:100%; height: 1.5em; margin-top: -2.1em; padding: .2em; }
            .photo .filename span { display:inline-block; color: #96969c; text-shadow: 0 0 0.5em #101c5d, 0 0 0.1em #000000; font-family: ZOMBIFIED; padding: .4em .2em 0 .2em; }
        script.
            function scrollTop(to, duration) {
                if (document.body.scrollTop == to) return;
                var diff = to - document.body.scrollTop;
                var scrollStep = Math.PI / (duration / 10);
                var count = 0, currPos;
                start = document.body.scrollTop;
                scrollInterval = setInterval(function(){
                    if (document.body.scrollTop != to) {
                        count = count + 1;
                        currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
                        document.body.scrollTop = currPos;
                    }
                    else { clearInterval(scrollInterval); }
                },10);
            }

            function scrollTo(e)
            {
                e.preventDefault();
                e.stopPropagation();
                //var dest = document.getElementById(elID);
                var destName = this.hash.substr(1);
                if(destName.length> 0){
                    var dest = document.querySelector('a[name='+destName+']');
                    var destRect = dest.getBoundingClientRect();
                    var content  = document.querySelector('.content');
                    var contentRect = content.getBoundingClientRect();
                    var bodyRect = document.body.getBoundingClientRect();
                    var contentHeight = contentRect.height + 120;
                    var bodyHeight = bodyRect.height;
                    var offsetTop = destRect.top - bodyRect.top;
                    if(offsetTop > contentHeight - bodyHeight)
                        offsetTop = contentHeight - bodyHeight;
                    scrollTop(offsetTop, 200);
                } else {
                    scrollTop(0, 200);
                }
            }
    body
        nav: ul
            each photo, idx in photoList
                li.item: a.nav-link(href="#"+(idx > 0 ? photo.name : ''))= idx+1
        script.
            Array.from(document.querySelectorAll('a.nav-link'))
            	.forEach((a)=>a.addEventListener('click', scrollTo));
        .content
            each photo, idx in photoList
                div(style='clear:both;')
                a.anchor(name=photo.name)
                div(class=photo.vertical?'photo vert': 'photo hor')
                    .num
                        span= idx+1
                    img(src='file://'+photo.path)
                    .filename
                        span= photo.name

Не уверен, что сработает с нестандартными атрибутами, но со стандартными работает:
document.querySelector('form select[name]=Zakaz').attributes['desc']
если есть jQuery:
$('form select[name]=Zakaz').attr('desc')

Когда в input[type=file] выбрал диалогом файлы или кинул их через dragndrop, у тебя в input.files будет массив с локальными путями к файлам пользователя. просто создаешь новый < img > и в src= устанавливаешь локальный путь к изображению и браузер его подцепит с локального диска.

Сергей Тутуков прав,
Я бы не советовал для диплома брать что-то интересное. На интересные проекты лучше потратить время без наздора. А в качестве диплома возьмите что-нибудь готовое и несложное, типа какой-нибудь галлеры galleryproject.org . Установите на VDS, опишите, какая там сложная ACL и все будет пучком...

Я один такой помню главные элементы верстки прошлого?

<br>       <!-- отступ вниз -->
&nbsp;   <!-- отступ вправо -->
<img src="/pixel.gif" width="10" height="1"> <!-- прозрачный пиксель -->
<center>...</center>
<marquee>...</marquee>
<font color="..." size="...">...</font>