Файл: Основы программирования на языке HTML (Написание кода на языке HTML).pdf
Добавлен: 25.06.2023
Просмотров: 64
Скачиваний: 3
<a href="img/2.jpg">Я и страйкбол</a></h2><p>В свободное от работы и учебы время занимаюсь этим замечательным спортом!</p></div></div>
<div id="fragment-3" class="ui-tabs-panel" style=""><img src="img/3.jpg " alt="" width="600"><div class="info"><h2>
<a href="img/3.jpg">Моя свадьба</a></h2><p>Первый поцелуй в браке. На фото я, жена и родственники на заднем плане.</p></div></div>
<div id="fragment-4" class="ui-tabs-panel" style=""><img src="img/4.jpg " alt="" width="600"><div class="info"><h2>
<a href="img/4.jpg">Мое величайшее достижение</a></h2><p>Моя любимая доченька. Вика, так ее зовут, на этой фотографии еще не умеет даже сидеть.</p></div></div>
<div id="fragment-5" class="ui-tabs-panel" style=""><img src="img/5.jpg " alt="" width="534"><div class="info"><h2>
<a href="img/5.jpg">Доченька</a></h2><p>На этой фотографии ей 1,5 года.</p></div></div>
<div id="fragment-6" class="ui-tabs-panel" style=""><img src="img/6.jpg " alt="" width="600"><div class="info"><h2>
<a href="img/6.jpg">Кот</a></h2><p>Просто кот из интернета</p></div></div>
</div>
</footer>
</html>
У нас появилось много новых элементов и классов, но они не имеют описанного стиля. Поэтому дополняем наш css файл следующими строками:
#featured{
width:800px;
padding-right:0px;
position:relative;
border:5px solid #333333;
height:400px;
background:#000000;
margin-top: 50px
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:600px;
list-style:none;
padding:0;
margin:0;
width:200px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0;
padding-left:13px;
font-size:12px;
color:#ffffff;
}
#featured ul.ui-tabs-nav li img{
float:left;
margin:2px 5px;
background:#ffffff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px;
font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#ffffff;
background:#000000;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#cd0d1e;
}
#featured li.ui-tabs-selected{
background:url(../img/bg.png) top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
color:#ebebeb;
background:#cd0d1e;
}
#featured .ui-tabs-panel{width:600px;
height:400px;
padding:0px 0px 0px 0px;
background:#999;
position:relative;
Float:left
}
#featured .ui-tabs-panel .info{
position:absolute;
top:330px;
left:0;
height:70px;
width:400px;
background:url(../img/bg.png);
}
#featured .info h2{
font-size:18px;
font-family:Georgia, serif;
color:#fff;
padding:5px;
margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana;
font-size:11px;
line-height:15px;
color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
Проверяем страницу сайта с помощью браузера.
Таким образом, сайт приобретает определенные характерные черты.
Прописываем полностью все используемые элементы в подключаемых стилях css и применяем это к титульной странице.
h3{
text-align:center;
font-size:28px;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
margin:0px 0px;
color:#000000
}
h4{
text-align:center;
font-size:22px;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
margin:0px 0px;
color:#000000}
body{
height:100%;
width:950px;
background:url(../img/mm1.jpg);
}
.m_menu{
margin:0px 280px;
text-align:center;
font-size:14px;
font-weight:bold;
padding:6px 0px 9px 0px;
color:#ddd;
}
.m_menu a{
color:#fff;
margin:0px 6px;
}
.content{
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000033;
box-sizing:border-box;
min-height: 1%;
padding-bottom: 10px;
padding-top:10px;
border: 3px solid #9966FF;
width: 800px
}
p{
text-indent: 20px;
}
li{
text-indent: 20px;
}
.footer{background:#00FFCC;
width:800px;
height:150px;
margin-top: 80px;
border:3px solid #000099;
}
Таким образом, мы описали основные элементы первой страницы.
Пришло время наполнять ее контентом. За неимением большого количества идей было решено просто описать цели разработки сайта и описать возникшие трудности при его создании.
Принцип кодирования оставшихся листов не сильно отличается. Структура остается неизменной, а стилистика больше не изменяется.
Описывать отдельно каждую оставшуюся страницу, полагаю, особого смыла не имеет по указанным выше причинам. Итоговый код всех страниц:
<!DOCTYPE html PUBLIC "" "">
<html lang="ru">
<link href="css/style.css" type="text/css" media="screen" rel="stylesheet">
<head>
<h1>Курсовая работа</h1>
<title>Моя курсовая работа</title>
</head>
<body>
<div class="m_menu">
<a href="index.html">Главная</a> |
<a href="Galery.html">Галерея</a> |
<a href="hystory.html">История</a> |
<a href="contact.html">Контакты</a> |
<a href="review.html">Ссылки</a>
</div>
<div class="content">
<h3>Цель</h3>
<p> </p>
<p>Сайт разработан с целю демонстрации навыков написания сайта с использованием языка HTML с использованием подключаемых стилей (css).</p>
<p> </p>
<p>Разработка сайта вызвана необходимостью сдачи курсовой работы по теме "Основы программирования на языке HTML".</p>
<p> </p>
<h3>Кратко о данной работе</h3>
<p>На текущий момент являюсь работником аэропорта "Домодедово". Занимаю должность не связанную с IT уже более 7 лет. В связи с высокой загруженностью и массой дел не связанных с обучением, не могу уделить достаточно внимания для написания более проработанного сайта. Тем не менее, данная работа дает представление о базисных навыках написания сайта на языке HTML, что и требуется в рамках курсовой работы.</p>
<p>На сайте реализованы следующие элементы:
<li>Навигационное меню</li>
<li>Слайдер (для реализации использован java-скрипт. Java скрипт позаимствован, т.е. не разрабатывался самостоятельно, при этом все стили имеют самостоятельную разработку.)</li>
<li>Видеоплеер и видеозапись к нему</li>
<li>Две ссылки для скачиваиня</li>
<li>Сайт специально выведен по центру страницы, это сделано для возможности его использования через смартфон, поскольку писать адаптивный сайт в рамках курсовой работы с темой "Основы программирования на языке HTML" посчитал нецелесообразным.</li>
<p> </p>
<h4>Возникшие проблемы:</h4>
<p> </p>
<li>Отсутствие свободного от работы времени. В связи со сложившимися обстоятельствами во всем мире, штат был несколько урезан, а объем работы остался на прежнем уровне.</li>
<li>Сайт корректно отображается не на всех браузерах. Описывать сайт под каждый браузер отдельно отсутствует возможность, что обусловлено недостаточным объемом ресурса времени в распоряжении.</li>
</div>
</body>
<div class="footer">Просто дополнительный блок, в котором может располагаться какой-либо контент, например, логотип или рекламный баннер.
</div>
</html>
<!DOCTYPE html PUBLIC "" "">
<html lang="ru">
<link href="css/style.css" type="text/css" media="screen" rel="stylesheet">
<head>
<h1>История</h1>
<title>Моя курсовая работа</title>
</head>
<body>
</div>
<div class="m_menu">
<a href="index.html">Главная</a> |
<a href="Galery.html">Галерея</a> |
<a href="Hystory.html">История</a> |
<a href="Contact.html">Контакты</a> |
<a href="review.html">Ссылки</a>
</div>
<div class="content">
<h3>Моя история (кратко)</h3>
<p> </p>
<p>Я родился 19 декабря 1990.</p>
<p>Рос вполне обычным ребенком в самой обычной семье. Когда мне было 6 лет, на вопрос о том, кем хочу стать всегда говорил: "Компьютерщиком!". Я был еще совсем маленьким, и не понимал разницу между администраторами, программистами, техниками, специалистами по слаботочным сетям и специалистами по безопасности, для меня на тот момент это все были "Компьютерщики". Все столь разные профессии для меня являлись чем-то одним, очень не понятным, но жутко интересным.</p>
<p>Учась в школе твердо определился с выбором будущей профессии - хотел стать системным администратором. Выбрал наиболее подходящее среднее специальное учебное заведение и поступил в него. Родители мне не мешали с определением профессии и всячески поддерживали меня в моем решении. Получив диплом в Московском Техническом Колледже по специальности "Компьютерные системы, комплексы систем и сети", я начал поиск работы. Ежедневно обзванивал десятки организаций, но везде получал один ответ: "Без опыта работы не возьмем". И я до сих пор мучаюсь вопросом, где же взять опыт работы, если без него ни куда не бирут?</p>
<p>Спустя 3 месяца безуспешных поисков, узнал что в московском аэропорту "Домодедово" есть вакансия специалиста по технической поддержке. Уже через месяц занимал должность на своем первом официальном месте работы. Проработав на данной должности 17 месяцев, мне предложили должность бизнес-аналитика. Руководство компании впечатлило мое решение по оптимизации труда всего IT департамента, которое позволило сократить издержки рабочего времени на 1200 часов ежемесячно. На этом моя профессиональная карьера в роли IT специалиста закончилась и я стал заниматься внедрением новых процессов в компании, разработкой KPI, сбором статистики и прогнозом показателей.</p>
<p>И вот, по сей день занимаюсь бизнес анализом. За 8 с лишним лет работы на данной позиции я разработал множество процессов, сократил издержко компании, разработал несколько сложных математических моделей, которые дайют прогноз с крайне высокой точностью.</p>
<p> </p>
<p>Данная работа (я имею ввиду сам сайт), написан для сдачи курсовой работы в МФПУ Университет. Поскольку еще не получил высшее профессиональное образование, это ставит меня в весьма неловкое положение на работе, ведь я занимаю достаточно высокую позицию, которая требует обширных знаний. Тем не менее, данное обстоятельство характеризует меня как ответственного и способного сотрудника.</p>
<p> </p>
<p>Небольшое видео с благодарностью для того, кто его смотрит.</p>
</div>
<div class="video">
<center><video width="648" height="360" controls="controls" poster="video/video.bmp" positon="centr">
<source src="video/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></center>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "" "">
<html lang="ru">
<link href="css/style.css" type="text/css" media="screen" rel="stylesheet">
<head>
<h1>Ссылки для скачивания</h1>
<title>Моя курсовая работа</title>
</head>
<body>
<div class="m_menu">
<a href="index.html">Главная</a> |
<a href="Galery.html">Галерея</a> |
<a href="Hystory.html">История</a> |
<a href="Contact.html">Контакты</a> |
<a href="review.html">Ссылки</a>
</div>
<div class="content">
<h3>Резюме</h3>
<p> </p>
<a href="doc/doc.docx">Скачать</a>(Курсовая работа)
<p> </p>
<a href="video/video.mp4">Ссылка на видео</a>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "" "">
<html lang="ru">
<link href="css/style.css" type="text/css" media="screen" rel="stylesheet">
<head>
<h1>Контакты</h1>
<title>Моя курсовая работа</title>
</head>
<body>
<div class="m_menu">
<a href="index.html">Главная</a> |
<a href="Galery.html">Галерея</a> |
<a href="Hystory.html">История</a> |
<a href="Contact.html">Контакты</a> |
<a href="review.html">Ссылки</a>
</div>
<div class="content">
<h3>Барчишин Денис Николаевич</h3>
<p>Тел: 8 (495) 344-14-18<p>
<p>Тел. моб.: 8 (903) 019-46-25<p>
<p>Адрес: г.Москва 115573 Ореховый проезд дом 9<p>
<p>email: DenisBarchishin@dme.ru</p>
</div>
</body>
</html>
*{margin:0 auto; padding:0;}
html{background:#ddd; width:100%; height:100%;}
h1{
text-align:center;
font-size:35px;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
margin:0px 0px;
color:#CCCCCC
}
h3{
text-align:center;
font-size:28px;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
margin:0px 0px;
color:#000000
}
h4{
text-align:center;
font-size:22px;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
margin:0px 0px;
color:#000000}
body{
height:100%;
width:950px;
background:url(../img/mm1.jpg);
}
.m_menu{
margin:0px 280px;
text-align:center;
font-size:14px;
font-weight:bold;
padding:6px 0px 9px 0px;
color:#ddd;
}
.m_menu a{
color:#fff;
margin:0px 6px;
}
.content{
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000033;
box-sizing:border-box;
min-height: 1%;
padding-bottom: 10px;
padding-top:10px;
border: 3px solid #9966FF;
width: 800px
}
p{
text-indent: 20px;
}
li{
text-indent: 20px;
}
.footer{background:#00FFCC;
width:800px;
height:150px;
margin-top: 80px;
border:3px solid #000099;
}
#featured{
width:800px;
padding-right:0px;
position:relative;
border:5px solid #333333;
height:400px;
background:#000000;
margin-top: 50px
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:600px;
list-style:none;
padding:0;
margin:0;
width:200px;