Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Основні засоби html
Інформація про навчальний заклад
ВУЗ:
Інші
Інститут:
Не вказано
Факультет:
Не вказано
Кафедра:
Не вказано
Інформація про роботу
Рік:
2024
Тип роботи:
Лабораторна робота
Предмет:
web програмування
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти і науки України
Кіровоградський національний технічний університет
Кафедра програмування та захисту інформації
Дисципліна : Web-програмування
Лабораторна робота №1
Тема: Основні засоби html.
Тема: Основні засоби html.
Ціль: Познайомитися із синтаксисом, основними тегами й атрибутами мови html.
Знати: Структуру html-документу, основні теги мови й методи форматування тексту.
Завдання:
Створіть статичний сайт, що містить мінімум 6 web-сторінок з тематики відповідно до свого варіанту.
Обов’язково використайте теги форматування тексту, створення списків, таблиць, посилань, додавання малюнків.
Варіант 29 - Сайт спортивного клубу
Код
<? define('mr_avenger', true);
include_once './admin/include/config.php';
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="templates/sport/css/style.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="templates/sport/css/form.css" type="text/css" media="screen">
<script type="text/javascript" src="templates/sport/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?142"></script>
<script type='text/javascript' src='templates/sport/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='templates/sport/js/basic.js'></script>
<script type="text/javascript" src="templates/sport/js/jquery.dropDown.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="./STYLE/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#nav').NavDropDown({
duration:100,
hoverElement:'li',
hoverClass:'hover',
dropHolder:'div',
showEffect:'fade' // slide, fade, slide&fade
});
});
$("#reg").ajaxForm({success: contact_success});
function contact_success (responseText, statusText) { $("#result").html(responseText); }
function checklogin() {
$.ajax({
type:"POST",
url: "PAGE/ajax.php",
data:{ username:$('#login').val() },
success: function(data){
$("#content1").html(data);
}
});
}
</script>
<script type="text/javascript">
$(document).ready(function(){
checkURL1();
$('a').click(function (e){
checkURL1(this.hash);
});
setInterval("checkURL()",250);
});
var lasturl="";
function checkURL1(hash)
{
if(!hash) hash=window.location.hash;
if(hash == "") { hash == "#index"; loadPage(hash); }
if(hash != lasturl)
{
if(lasturl="#lk") {
$(".panel").hide();
$("#container").css("display", "block");
}
lasturl=hash;
loadPage(hash);
}
}function checkURL(hash)
{
if(!hash) hash=window.location.hash;
if(hash != lasturl)
{
if(lasturl="#lk") {
$(".panel").hide();
$("#container").css("display", "block");
}
lasturl=hash;
loadPage(hash);
}
}
function loadPage(url) //the function that loads pages via AJAX
{
urlall=url.replace('#','');
urlall=urlall.replace(/[^a-z]/g, '');
id=url.replace('#news', '');
id=id.replace(/[^0-9]/g, '');
//strip the #page part of the hash and leave only the page number
$('#load').css('visibility','visible'); //show the rotating gif animation
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "getpage.php",
data: { page:urlall, newsid:id}, //with the page number as a parameter
dataType: "html", //expect html to be returned
success: function(msg){
if(parseInt(msg)!=0) //if no errors
{
$('#this').html(msg); //load the returned html into pageContet
}
}
});
}
</script>
<script type='text/javascript' src='templates/sport/js/form.js'></script>
<title><? echo $site['title'];?></title>
</head>
<body>
<div id='top_bg'>
<div id='bottom_bg'>
<div class='wrapper'>
<!-- Шапка -->
<div id='header'>
</div>
<!-- Кнопки -->
<div id='buttons'>
<span class='basic-modal4'>
<a href="#register" id='reg_button' target="_blank" class='basic4'></a>
</span>
<!---->
<!-- modal content Таблицы-->
<div id="basic4">
<a href="#" class='close_button'></a>
<div class='border_1'>
<div class='border_2'>
<div class='form_content'>
<div class='form_title'>
<img src="templates/sport/design_img/title_03.png" alt="">
</div>
<div class='form_text'>
<form id="reg" action="PAGE/ajax.php" method="post" >
<span id="register_user" >
<input type="hidden" name="btn1" value="">
<input type="hidden" name="all" value="">
<div class='form_buttons'>
<center>ПН-СБ с 8:00 до 22:00<br><br>
ВС с 10:00 до 19:00<br><br>
без перерывов и выходных</center>
<div id="result"></div>
</div>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
<span class='basic-modal2'>
<a href="#" id='help_button' class='basic2'></a>
</span>
<!-- modal content Админи инфушка -->
<div id="basic2">
<a href="#" class='close_button'></a>
<div class='border_1'>
<div class='border_2'>
<div class='form_content'>
<div class='form_title'>
<img src="templates/sport/design_img/title_01.png" alt="">
</div>
<div class='form_text'>
<table id='admin_table'>
<tr>
<td style="width: 50px">
<img src="templates/sport/design_img/admin_icon.png" alt="">
</td>
<td class='admin_name'>
<? echo"". $site['nick'] ."<br>
<span>". $site['social'] ."</span>";
?>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<a href="https://vk.com/fitness" id='vk_button' target="_blank"></a>
</div>
<!-- Меню -->
<div id='menu'>
<ul id="nav">
<li>
<a href="index.php" id='menu_main'></a>
</li>
<span class='basic-modal6'><li>
<a href="#mypage" id='menu_start' class='basic-modal6'></a>
</li></span>
<li>
<a href="#pravel" id='menu_forum'></a>
</li>
<li>
<a href="#rules" id='menu_rules'></a>
</li>
<li>
<a href="#about" id='menu_about'></a>
</li>
<li>
<a href="#connect" id='menu_help'></a>
</li>
<li>
<a href="#info" id='menu_more'></a>
<div>
<ul>
<li><a href="#adres" target="_blank">Наш адрес</a></li>
<li><a href="#inform" target="_blank">Информация </a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Контент -->
<div id='content_center'>
<div id='content_top'>
<div id='content_bottom'>
<div id='right_block'>
<!-- Блок Видео -->
<div id='video_block'>
<span class='basic-modal3'>
<a href="https://www.youtube.com/watch?v=GdosrsHUxbY" class='basic3'></a>
</span>
<!-- modal content -->
<div id="basic3">
<a href="https://www.youtube.com/watch?v=GdosrsHUxbY" class='close_button'></a>
<div class='border_1'>
<div class='border_2'>
<div class='form_content'>
<div class='form_title'>
<img src="templates/sport/design_img/title_02.png" alt="">
</div>
<div class='form_text' style="width: 640px">
<iframe width="640" height="360" src="https://www.youtube.com/embed/R5CV-a0afeY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Статус Серверов -->
<div id='info'>
<div id="1"><center>Загрузка...</center>
<script type="text/javascript">showContent('./INCLUDE/info.php', '1');</script>
</div>
<div id='more_serv'>
</div>
</div>
<!-- Топ -->
<div id='forum'>
<!-- Обсуждение -->
<!-- VK Widget -->
<div id="vk_community_messages"></div>
<script type="text/javascript">
VK.Widgets.CommunityMessages("vk_community_messages", 127607773, {expanded: "1",tooltipButtonText: "Есть вопрос?"});
</script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 4, width: "230", height: "400"}, 16054118);
</script>
</div>
</div>
<div id='left_block'>
<div id='content_padding'>
<!-- Новость -->
<div id='dle-content'><div class='news'>
<div id="this">
<div id="getcontent" style="visibility: hidden; ">
<div id="content">
<center>Загрузка...</center>
</div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Футер -->
<div id='footer'>
<div id='copyright'>
<span>© 2017 «<a href="#">Sport-Club</a>»</span>
</div>
<div >
<br>
<br>
<br>
<br>
</div>
<div >
<br>
<br>
<br>
<br>
</div>
<div id='dkarts'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Код таблиці
<table border="1">
<tr>
<th>№</th>
<th>Gold</th>
<th>Platinum</th>
<th>Diamond</th>
</tr>
<tr><td>Месяц</td><td>3</td><td>6</td><td>12</td></tr>
<tr><td>Тренеровок</td><td>36</td><td>72</td><td>144</td></tr>
<tr><td>Бонус за друзей</td><td>1 месяц</td><td>2 месяца</td><td>3 месяца</td></tr>
<tr><td>Бассейн</td><td>+</td><td>+</td><td>+</td></tr>
<tr><td>Массаж</td><td>-</td><td>+</td><td>+</td></tr>
<tr><td>Скидка</td><td>0%</td><td>10%</td><td>25%</td></tr>
<tr><td>Стоимость</td><td>1200 грн</td><td>2200 грн</td><td>8500 грн</td></tr>
</table>
Контрольні питання:
Що таке HTML?
Стандартизований мову розмітки документів у Всесвітній павутині. Мова HTML інтерпретується браузерами.
Яким чином забезпечується форматування тексту в HTML-документі?
Весь головний контент сторінки розміщується в тегах <BODY>
Яка мета розробки HTML5?
Мета розробки HTML5 - поліпшення рівня підтримки мультимедіа-технологій з одночасним збереженням удобочитаемости коду для людини і простоти аналізу для парсерів.
Який синтаксис HTML?
HTML-документ є текстовим файлом, що містить власне текст, який повинен бути відображений у вікні браузера
Структура HTML-документа?
Якщо відкрити будь-яку веб-сторінку, то вона буде містити в собі типові елементи, які не змінюються від виду і спрямованості сайту. (Заголовок, перший абзац, другий)Яким чином здійснюється взаємодія між HTML-документом і сервером?
Архітектура клієнт-сервер є одним із архітектурних шаблонів програмного забезпечення та є домінуючою концепцією у створенні розподілених мережних застосунків і передбачає взаємодію та обмін даними між ними.
Які текстові редактори для роботи з HTML Ви знаєте?
Notepad++
Що означає DOCTYPE у HTML-документі?
Призначений для вказівки типу поточного документа
8. Що таке заголовок HTML-документа?
Заголовок сторінки - це той текст, який відображається в лівому верхньому куті браузера, а також у вкладках.
Що таке тіло HTML-документа?
HTML-документ складається з головного елементу html, до змісту якого додаються інші елементи.
Для чого служить текст між тегами <title>?
текст заголовка
11. Яким тегом забезпечуються посилання на інші документи HTML і його
атрибути?
<a href= "">
Яким тегом визначаються параграфи?
<a></a>
Яким тегом визначаються заголовки?
<h1></h1>
Яким тегом визначається найбільший заголовок?
<h7></h7>
Яким тегом визначається найменший заголовок?
<h6></h6>
Що визначається тегом <img>?
Для изображения
Перелічити HTML - елементи форматування тексту.
<В></В> Товстий шрифт тексту
<І></I> Шрифт- курсив
<U></U> Підкреслений шрифт
<SUB></SUB>Нижній індекс.
<BIG></BIG>Великий шрифт.
<SMALL> </SMALL>Малий шрифт.
Які теги списків ви знаєте?
< OL > та < LI >
Що визначає тег <table>?
Таблиця
Яким тегом визначається заголовок таблиці?
<table>
Для чого використовують тег <div>?
Блоковий елемент html сторінки, який призначений для управління розміщенням і додання найрізноманітніших властивостей текстів
Для чого використовують тег <span>?
Тег <span> призначений для визначення малих елементів документа.
23. Що визначають <header>, <nav>, <section>, і <footer> елементи?
<header> - Може містити заголовки, обертати зміст розділу сторінки, форму пошуку або логотип.
<nav>- Призначений для створення блоку навігації веб-сторінки або всього веб-сайту
<section> - Групує тематичне вміст, не використовується багаторазово і зазвичай містить заголовок.
<footer> - Зазвичай містить інформацію про автора статті, дані про копірайт і т.д.
13.05.2018 16:05-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора