Как встроить скрипты в html\css

123
17 февраля 2021, 08:50

Учусь делать сайт на HTML\CSS и меня попросили встроить пару скриптов(время,дата). Порылся в инете, так и не понял как встроить их в мой сайт. 

@charset "utf-8"; 
* { 
	margin: 0; 
	padding: 0; 
	outline: none; 
} 
 
html {height: 100%} 
 
body { 
	width: 100%; 
	height: 100%; 
	color: #333; 
	background: #f7f7f7; 
	font-size: 1em; 
	font-family: "Segoe UI", sans-serif; 
	line-height: 135%; 
	 
} 
 
a { 
	color: #f48b8b; 
	text-decoration: none; 
	transition: all.6s ease; 
	-moz-transition: all.6s ease; 
    	 
} 
 
a:hover { 
	color: #8b9ff5; 
	text-decoration: none; 
	transition: all.6s ease; 
	-moz-transition: all.6s ease;   	 
} 
 
a:active {color: #8ce4a6} 
 
img { 
	max-width: 100%; 
	height: auto; 
	width: auto\9; 
} 
 
.clear {clear: both} 
.left {float: left} 
.right {float: right} 
 
/* Selection Block */ 
 
::selection {background: #f58b8b; color:#fff} 
::-moz-selection {background: #f58b8b; color:#fff} 
 
header, footer { 
	width: 98%; 
	background-color: #fff; 
	float: left; 
} 
 
header { 
	border-bottom: 2px solid silver; 
	padding: 1%; 
} 
 
#logo { 
	font-size: 2em; 
	font-family: Comic Sans MS, sans-serif; 
	color: silver;  
} 
 
.contact { 
	font-size 1.7 em; 
	font-family: Comic Sans MS, sans-serif; 
	margin-left: 20px; 
} 
 
input[type=search].field { 
	border-radius: 5px; 
	border: 2px solid silver; 
	padding: 5px; 
	margin-left: 20px; 
} 
 
 
input[type=search].field:focus {  
	border: 2px solid #f58b8b;	 
} 
 
#menu { 
	color: #666; 
	font-family: Comic Sans MS, sans-serif;  
	font-size: 1.7em; 
} 
 
#menu hr { 
	width: 500px; 
	max-width: 100%; 
	margin-top: 5px; 
	margin-bottom: 10px; 
} 
 
#menuHrefs a { 
	padding: 5px; 
	border-radius: 5px; 
	margin-right: 5px; 
	color: #626262; 
} 
 
#menuHrefs a:hover { 
	background-color: #ececec;	 
} 
 
 
/* Main style */ 
 
#wrapper { 
	float: left; 
	width: 100%; 
	margin-top: 15px; 
} 
#wrapper #articles { 
	loat: left; 
	width: 80%; 
	margin-left: 10%; 
	 
} 
 
#wrapper #articles article { 
	float: left; 
	width: 31.3%; 
	border: 1px solid silver; 
	box-sizing: border-box; 
	border-radius: 5px; 
	background-color: #fafafa; 
	margin-right: 2%; 
	min-height: 300px;  
} 
 
#wrapper #articles article img { 
	width: 100%; 
	height: 200px; 
	border-radius: 5px 5px 0px 0px; 
	border-bottom: 1px solid silver; 
	margin-bottom: 10px; 
} 
 
#wrapper #articles article h2 { 
	width: 90%; 
	margin-left: 5%; 
	font-weight: normal; 
	font-size: 1.7em; 
	color: #4a4a4a; 
} 
 
#wrapper #articles article p { 
	width: 80%; 
	margin-left: 10%; 
	text-indent: 0.5em; 
} 
 
#wrapper #articles article a { 
	padding: 10px 10px; 
	background-color: #ed7b7b; 
	margin-left: 5%; 
	border-radius: 10px; 
	color: #fff; 
	float: left; 
	margin-top: 10px; 
	line-height: 10px; 
	margin-bottom: 10px; 
} 
 
#wrapper #articles article a:hover { 
	background-color: #7feb6d; 
	 
} 
 
/* Style about.html */ 
 
#about_us { 
	width: 60%; 
	float: left; 
	background-color: #fafafa; 
	border-radius: 5px; 
	border: 1px solid silver; 
	box-sizing: border-box; 
	padding: 1%; 
} 
 
#columRight { 
	width: 30%; 
	float: left; 
	margin-left: 5%; 
	background-color: #fafafa; 
	border-radius: 5px; 
	border: 1px solid silver; 
	box-sizing: border-box; 
	padding: 1%; 
} 
 
/* feedback */ 
 
form { 
	width: 60%; 
	margin-left: 20%; 
	float: left; 
} 
 
form label { 
	float: left; 
	width: 100%; 
	margin-bottom: 10px; 
} 
 
form input { 
	border-radius: 5px; 
	border: 2px solid silver; 
	background-color: #fafafa; 
	padding: 5px; 
	float: left; 
	clear: both; 
	width: 40%; 
	margin-bottom: 10px; 
} 
 
form input:focus,form textarea:focus {border: 2px solid #f58b8b;} 
	 
 
	 
 
form textarea { 
	width: 60; 
	float: left; 
	clear: both; 
	background-color: #fafafa; 
	border: 2px solid silver; 
	border-radius: 5px; 
	padding: 10px; 
	font-size: 1.7em; 
	 
} 
 
form #send { 
	float: left; 
	padding: 10px; 
	background-color: #fa8764; 
	cursor: pointer; 
	border-radius: 5px;  
	margin-top: 10px; 
	font-size: 1.5em; 
	color: #fff; 
} 
 
 
form #send:hover { 
	background-color: #f1f37a; 
} 
 
/* Main_Block */ 
 
#Main_soc_block { 
	width: 100%; 
	padding: 2% 0; 
	border-bottom: 2px solid silver; 
	border-top: 2px solid silver; 
	margin: 20px 0; 
	float: left; 
	background: url('../image/MyCollages.png') repeat-x center 0; 
	height: 220px; 
	backround-color: silver; 
    opacity: 0.7; 	 
} 
 
#Main_soc_block_in { 
	 
	text-align: center; 
	padding: 1%; 
	height: 100px; 
	background-color: #fafafa; 
	border: 1px solid silver; 
	border-radius: 7px; 
	width: 500px; 
	 
} 
 
#Main_soc_block_in a { 
	float: left; 
	padding: 5px 10px; 
	background-color: #e9af32; 
	border-radius: 6px; 
	color: #fff; 
	margin-left: 30%; 
	margin-top: 15px; 
	 
} 
 
/* Style Footer */ 
 
#content { 
 padding-bottom: 90px; 
} 
#footer { 
 position: absolute; 
 bottom: 0; 
 background-color:#CFCFCF;  
 width:100%;    
 height: 90px; 
 color: #212121; 
 text-align: center;  
}
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
<meta name="keywords" content="test, site, website" /> 
<meta name="description" content="Сайт отечественных автомобилей" /> 
<link href="css/style.css" rel="stylesheet" type="text/css"/> 
<link href="image/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<title>Русское Авто</title> 
</head> 
<body> 
<div id="page-wrap"> 
<header> 
<a href="index.html" title="Главная" id="logo"> 
Russian-Auto</a> 
<span class="contact"> 
<a href="about.html" title="Информация о нас">О нас</a></span> 
<input type="search"class="field" placeholder="Поиск"/> 
<span class="right"><span class="contact"> 
<a href="reg.html" title="Зарегестрироваться">Регистрация</a></span><span class="contact"> 
<a href="auth.html" title="Войти">Вход</a></span></span> 
</header> 
 
 
<div class="clear"><br /></div> 
<center> 
    <div id="menu">Разделы<hr /></div>  
    <div id="menuHrefs"> 
      <a href="about.html">О нас</a> 
	  <a href="feedback.html">Связь с нами</a> 
	  <a href="auth.html">Вход</a> 
	  <a href="reg.html">Регистрация</a> 
	</div> 
</center> 
<div id="wrapper"> 
    <div id="articles"> 
        <article> 
         	<img src="image/firm.jpg" alt="Изображение" title="Изображение" />  
			<h2>Новости</h2> 
			<p>Самые свежие новости отечественного автопрома.</p> 
			<a href="/article" title="Посмотреть статью">Читать</a> 
		</article> 
		<article> 
		   <img src="image/opisanie.jpg" alt="Изображение" title="Изображение" /> 
		   <h2>Русский автопром</h2> 
		   <p>Отечественный автопром. Что, где, когда? Интересные факты и описание машин.</p> 
		   <a href="/article" title="Посмотреть статью">Читать</a> 
		</article> 
		<article> 
		   <img src="image/photo.jpg" alt="Изображение" title="Изображение" /> 
		   <h2>Галерея</h2> 
		   <p>Фото самыйх крутых и красивых машин от нас и наших пользователей.</p> 
		   <a href="/article" title="Посмотреть статью">Читать</a> 
		</article> 
    </div> 
	<div class="clear"> 
    <div id="Main_soc_block"> 
	<center> 
        <div id="Main_soc_block_in"> 
		<h3>Регистрируйтесь на сайте 
		<p>Лучший сайт о российском автопроме</p> 
		<a href="reg.html" title="Регистрируйтесь">Регистрируйтесь</a>	 
    </div> 
	</center> 
    </div>	 
</div> 
</div> 
<div id="footer"> 
<span class="left">Все права защищены &copy; 2019</span> 
<span class="right">Группа в ВК https://vk.com/</span> 
<span class="center">Контактный номер: 322-22-22</span> 
</div>  
</body> 
</html>

Answer 1

JavaScript подключается к HTML страничкам следующими способами

Первый способ

  • Располагаете файл со скриптом где вам угодно(где-нибудь в папке с проектом буднт удобнее).

  • В хедере html прописываете путь к файлу со скриптом

    <!DOCTYPE html>
<html>
<head>
    ...
    <script src="path/to/your/file.js"></script>
    ...
</head>
...
...
</html>

    Путь можно прописать как от корневой директории, так и относительно текущего html файла

Второй способ

  • Встраиваете JS непосредственно в HTML посредством тэга script

    <!DOCTYPE html>
<html>
    <body>
        ...
        <script>
            alert("It works!");
        </script>
        ...
    </body>
</html>

После этих действияй скрипт будет срабатывать при переходе на страницу

Answer 2

Просто в самом конце, перед закрытием тега html вставляете кусок.

@charset "utf-8"; 
* { 
	margin: 0; 
	padding: 0; 
	outline: none; 
} 
 
html {height: 100%} 
 
body { 
	width: 100%; 
	height: 100%; 
	color: #333; 
	background: #f7f7f7; 
	font-size: 1em; 
	font-family: "Segoe UI", sans-serif; 
	line-height: 135%; 
	 
} 
 
a { 
	color: #f48b8b; 
	text-decoration: none; 
	transition: all.6s ease; 
	-moz-transition: all.6s ease; 
    	 
} 
 
a:hover { 
	color: #8b9ff5; 
	text-decoration: none; 
	transition: all.6s ease; 
	-moz-transition: all.6s ease;   	 
} 
 
a:active {color: #8ce4a6} 
 
img { 
	max-width: 100%; 
	height: auto; 
	width: auto\9; 
} 
 
.clear {clear: both} 
.left {float: left} 
.right {float: right} 
 
/* Selection Block */ 
 
::selection {background: #f58b8b; color:#fff} 
::-moz-selection {background: #f58b8b; color:#fff} 
 
header, footer { 
	width: 98%; 
	background-color: #fff; 
	float: left; 
} 
 
header { 
	border-bottom: 2px solid silver; 
	padding: 1%; 
} 
 
#logo { 
	font-size: 2em; 
	font-family: Comic Sans MS, sans-serif; 
	color: silver;  
} 
 
.contact { 
	font-size 1.7 em; 
	font-family: Comic Sans MS, sans-serif; 
	margin-left: 20px; 
} 
 
input[type=search].field { 
	border-radius: 5px; 
	border: 2px solid silver; 
	padding: 5px; 
	margin-left: 20px; 
} 
 
 
input[type=search].field:focus {  
	border: 2px solid #f58b8b;	 
} 
 
#menu { 
	color: #666; 
	font-family: Comic Sans MS, sans-serif;  
	font-size: 1.7em; 
} 
 
#menu hr { 
	width: 500px; 
	max-width: 100%; 
	margin-top: 5px; 
	margin-bottom: 10px; 
} 
 
#menuHrefs a { 
	padding: 5px; 
	border-radius: 5px; 
	margin-right: 5px; 
	color: #626262; 
} 
 
#menuHrefs a:hover { 
	background-color: #ececec;	 
} 
 
 
/* Main style */ 
 
#wrapper { 
	float: left; 
	width: 100%; 
	margin-top: 15px; 
} 
#wrapper #articles { 
	loat: left; 
	width: 80%; 
	margin-left: 10%; 
	 
} 
 
#wrapper #articles article { 
	float: left; 
	width: 31.3%; 
	border: 1px solid silver; 
	box-sizing: border-box; 
	border-radius: 5px; 
	background-color: #fafafa; 
	margin-right: 2%; 
	min-height: 300px;  
} 
 
#wrapper #articles article img { 
	width: 100%; 
	height: 200px; 
	border-radius: 5px 5px 0px 0px; 
	border-bottom: 1px solid silver; 
	margin-bottom: 10px; 
} 
 
#wrapper #articles article h2 { 
	width: 90%; 
	margin-left: 5%; 
	font-weight: normal; 
	font-size: 1.7em; 
	color: #4a4a4a; 
} 
 
#wrapper #articles article p { 
	width: 80%; 
	margin-left: 10%; 
	text-indent: 0.5em; 
} 
 
#wrapper #articles article a { 
	padding: 10px 10px; 
	background-color: #ed7b7b; 
	margin-left: 5%; 
	border-radius: 10px; 
	color: #fff; 
	float: left; 
	margin-top: 10px; 
	line-height: 10px; 
	margin-bottom: 10px; 
} 
 
#wrapper #articles article a:hover { 
	background-color: #7feb6d; 
	 
} 
 
/* Style about.html */ 
 
#about_us { 
	width: 60%; 
	float: left; 
	background-color: #fafafa; 
	border-radius: 5px; 
	border: 1px solid silver; 
	box-sizing: border-box; 
	padding: 1%; 
} 
 
#columRight { 
	width: 30%; 
	float: left; 
	margin-left: 5%; 
	background-color: #fafafa; 
	border-radius: 5px; 
	border: 1px solid silver; 
	box-sizing: border-box; 
	padding: 1%; 
} 
 
/* feedback */ 
 
form { 
	width: 60%; 
	margin-left: 20%; 
	float: left; 
} 
 
form label { 
	float: left; 
	width: 100%; 
	margin-bottom: 10px; 
} 
 
form input { 
	border-radius: 5px; 
	border: 2px solid silver; 
	background-color: #fafafa; 
	padding: 5px; 
	float: left; 
	clear: both; 
	width: 40%; 
	margin-bottom: 10px; 
} 
 
form input:focus,form textarea:focus {border: 2px solid #f58b8b;} 
	 
 
	 
 
form textarea { 
	width: 60; 
	float: left; 
	clear: both; 
	background-color: #fafafa; 
	border: 2px solid silver; 
	border-radius: 5px; 
	padding: 10px; 
	font-size: 1.7em; 
	 
} 
 
form #send { 
	float: left; 
	padding: 10px; 
	background-color: #fa8764; 
	cursor: pointer; 
	border-radius: 5px;  
	margin-top: 10px; 
	font-size: 1.5em; 
	color: #fff; 
} 
 
 
form #send:hover { 
	background-color: #f1f37a; 
} 
 
/* Main_Block */ 
 
#Main_soc_block { 
	width: 100%; 
	padding: 2% 0; 
	border-bottom: 2px solid silver; 
	border-top: 2px solid silver; 
	margin: 20px 0; 
	float: left; 
	background: url('../image/MyCollages.png') repeat-x center 0; 
	height: 220px; 
	backround-color: silver; 
    opacity: 0.7; 	 
} 
 
#Main_soc_block_in { 
	 
	text-align: center; 
	padding: 1%; 
	height: 100px; 
	background-color: #fafafa; 
	border: 1px solid silver; 
	border-radius: 7px; 
	width: 500px; 
	 
} 
 
#Main_soc_block_in a { 
	float: left; 
	padding: 5px 10px; 
	background-color: #e9af32; 
	border-radius: 6px; 
	color: #fff; 
	margin-left: 30%; 
	margin-top: 15px; 
	 
} 
 
/* Style Footer */ 
 
#content { 
 padding-bottom: 90px; 
} 
#footer { 
 position: absolute; 
 bottom: 0; 
 background-color:#CFCFCF;  
 width:100%;    
 height: 90px; 
 color: #212121; 
 text-align: center;  
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
  <meta name="keywords" content="test, site, website" /> 
  <meta name="description" content="Сайт отечественных автомобилей" /> 
  <link href="css/style.css" rel="stylesheet" type="text/css" /> 
  <link href="image/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
  <title>Русское Авто</title> 
</head> 
 
<body> 
  <div id="page-wrap"> 
    <header> 
      <a href="index.html" title="Главная" id="logo"> 
Russian-Auto</a> 
      <span class="contact"> 
<a href="about.html" title="Информация о нас">О нас</a></span> 
      <input type="search" class="field" placeholder="Поиск" /> 
      <span class="right"> 
        <span class="contact"> 
          <a href="reg.html" title="Зарегестрироваться">Регистрация</a> 
        </span> 
        <span class="contact"> 
          <a href="auth.html" title="Войти">Вход</a> 
        </span> 
        <span class="contact"> 
          <a id="timeText">Время: 00:00</a> 
        </span> 
         
      </span> 
    </header> 
 
    <div class="clear"><br /></div> 
    <center> 
      <div id="menu">Разделы 
        <hr /> 
      </div> 
      <div id="menuHrefs"> 
        <a href="about.html">О нас</a> 
        <a href="feedback.html">Связь с нами</a> 
        <a href="auth.html">Вход</a> 
        <a href="reg.html">Регистрация</a> 
      </div> 
    </center> 
    <div id="wrapper"> 
      <div id="articles"> 
        <article> 
          <img src="image/firm.jpg" alt="Изображение" title="Изображение" /> 
          <h2>Новости</h2> 
          <p>Самые свежие новости отечественного автопрома.</p> 
          <a href="/article" title="Посмотреть статью">Читать</a> 
        </article> 
        <article> 
          <img src="image/opisanie.jpg" alt="Изображение" title="Изображение" /> 
          <h2>Русский автопром</h2> 
          <p>Отечественный автопром. Что, где, когда? Интересные факты и описание машин.</p> 
          <a href="/article" title="Посмотреть статью">Читать</a> 
        </article> 
        <article> 
          <img src="image/photo.jpg" alt="Изображение" title="Изображение" /> 
          <h2>Галерея</h2> 
          <p>Фото самыйх крутых и красивых машин от нас и наших пользователей.</p> 
          <a href="/article" title="Посмотреть статью">Читать</a> 
        </article> 
      </div> 
      <div class="clear"> 
        <div id="Main_soc_block"> 
          <center> 
            <div id="Main_soc_block_in"> 
              <h3>Регистрируйтесь на сайте 
                <p>Лучший сайт о российском автопроме</p> 
                <a href="reg.html" title="Регистрируйтесь">Регистрируйтесь</a> 
            </div> 
          </center> 
        </div> 
      </div> 
    </div> 
    <div id="footer"> 
      <span class="left">Все права защищены &copy; 2019</span> 
      <span class="right">Группа в ВК https://vk.com/</span> 
      <span class="center">Контактный номер: 322-22-22</span> 
    </div> 
</body> 
<script type="text/javascript"> 
  var date = new Date(); 
  var d = date.getDate(); 
  var day = (d < 10) ? '0' + d : d; 
  var m = date.getMonth() + 1; 
  var month = (m < 10) ? '0' + m : m; 
  var yy = date.getYear(); 
  var year = (yy < 1000) ? yy + 1900 : yy; 
  document.querySelector("#timeText").textContent = (day + "." + month + "." + year + " г."); 
</script> 
 
</html>

READ ALSO
Имитатор браузера
javascript

Имитатор браузера

Добрался до самой сложной части проектаНужно получать информацию из сайта который целиком и полностью построен на js(на zepto если быть конкретней)

 96
Змейка. как начать игру заново
javascript

Змейка. как начать игру заново

Создаю первую игру на JSНе могу начать игру заново - при нажатии на confirm ok появляется все вновь, но змейка не двигается, как вначале

 116
Как сделать так, чтобы в alert выводились все name? В моём коде - если нажать на name=&ldquo;prim&rdquo; и name=&ldquo;prim2&rdquo; то выводит только name=&ldquo;prim2&rdquo;(value)
javascript

Как сделать так, чтобы в alert выводились все name? В моём коде - если нажать на name=“prim” и name=“prim2” то выводит только name=“prim2”(value)

Если хотите иметь возможность выбрать несколько вариантов, то radio - не самый подходящий вариантСемантически правильнее будет использовать...

 129
Неповторяющийся случайный фон
javascript

Неповторяющийся случайный фон

Пытаюсь реализовать кнопку, по нажатию на которую должен выставляться случайный фон, да так, чтобы картинки при повторном нажатии не повторялисьСделал...

 102