[Ранній доступ]
Урок 2. Введення у гіпертекст.
Гіпертекст – текст який містить посилання на інший ресурс (сторінку, текст або файл: зображення, відео, аудіо та інші).
Гіпертекст допомагає нам у повсякденному житті не тільки в унтернеті. Ми часто його використовуємо в бібліотеках, архівах, університетах і школах, магазинах, підприємствах. По суті, будь-який текст, який містить посилання на інший ресурс є гіпертекстом. Наприклад цінник на вітрині магазину теж є гіпертекстом у своїй формі.
Під час навчання ми розглянемо кілька віріантів, під час яких наші застосунки зможуть посилатись на інші ресурси.
-
Створення посилання – текстовий чи інший блок у застосунку, натиснувши на який мижна перейти на інший ресурс.
-
Підключення таблиці стилів CSS з окремого файлу.
-
Підключення скрипта JavaScript з окремого файлу.
-
Підключення зображення з окремого файлу.
-
Підключення відео з окремого файлу.
-
Підключення аудіо з окремого файлу.
-
Підключення шрифта з окремого файлу.
Ми можемо створити посилання за допомогою тегу
a. Підключити таблицю стилів за допомогою тегу link. Підключити скрипт з тегом script. Завантажити зображення з тегом img. Завантажити відео та аудіо тегами source, але про ці медіа ми поговоримо на наступному уроці.Пропоноємо скористатись Visual Studio Code та створити наступні файли в одній діректорії (папці, теці).
Назва файлу: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Techno4. Мегакурс "Митець". Урок 2. Сторінка 1. Введення у гіпертекст</title>
<link rel="icon" type="image/x-icon" href="https://techno4.online/images/favicon.ico">
<link rel="stylesheet" href="C:\Users\Mykola Bitholdex\Documents\урок1\index.css">
</head>
<body>
<!-- Замініть адресу посилання на правильну, залежно від вашої операційної системи.-->
<a href="#">Посилання без class.</a>
<a href="https://techno4.online/" target="_blank" class="button-one">Посилання на сайт.</a>
<a href="C:\Users\Mykola Bitholdex\Documents\урок1\index1.html" class="button-two">Посилання на другу сторінку.</a>
<h4>Вітання! Я четвертий заголовок другої сторінки.</h4>
<h4>Вітання! Я четвертий заголовок #2 другої сторінки.</h4>
<h4>Вітання! Я просто заголовок другої сторінки.</h4>
<h4>Вітання! Я теж заголовок #2 другої сторінки.</h4>
<script type="text/javascript" src="file://C:\Users\Mykola Bitholdex\Documents\урок1\header4.js"></script>
<script type="text/javascript">
console.log(document.getElementsByTagName("h4")[0].textContent)
console.log(document.getElementsByTagName("h4")[1].textContent)
console.log(`Застосунок завантажено. Маємо ${document.getElementsByTagName("h4").length} заголовки.`)
</script>
</body>
</html>Назва файлу: index1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Techno4. Мегакурс "Митець". Урок 2. Сторінка 1. Введення у гіпертекст.</title>
<link rel="icon" type="image/x-icon" href="https://techno4.online/images/favicon.ico">
<link rel="stylesheet" href="C:\Users\Mykola Bitholdex\Documents\урок1\index.css">
</head>
<body>
<h1>Вітання! Я перший заголовок першої сторінки.</h1>
<!-- Замініть адресу посилання на правильну, залежно від вашої операційної системи.-->
<a href="https://techno4.online/" target="_blank">Посилання на сайт.</a>
<a href="C:\Users\Mykola Bitholdex\Documents\урок1\index.html">Посилання на першу сторінку.</a>
<style>
a {
color: greenyellow;
}
</style>
<script type="text/javascript">
console.log(document.getElementsByTagName("h1")[0].textContent)
console.log(`Застосунок завантажено. Маємо ${document.getElementsByTagName("h1").length} заголовки.`)
</script>
<script type="text/javascript" src="C:\Users\Mykola Bitholdex\Documents\урок1\header1.js"></script>
</body>
</html>Назва файлу: index.css
body {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: rgba(4,18,10,.53);
background-image: url(https://techno4.online/templates/yootheme/vendor/assets/uikit-themes/master-vibe/images/section-background-image.jpg);
}
h1 {
color: green;
background-color: #0e1c2c;
}
h2 {
color: red;
background-color: #0e1c2c;
}
h3, h4, h5 {
font-size: 24px;
color: blue;
background-color: #0e1c2c;
}
h6 {
color: yellow;
background-color: #0e1c2c;
}
a {
color: #ffffff;
background-color: #0e1c2c;
}
a.button-one {
font-size: 64px;
display: block;
margin: 60px;
padding: 80px;
border: 4px solid peru;
color: #193553;
border: 3px solid #193553;
background-color: #88da77;
background-image: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
box-shadow: 0 8px 45px 30px rgba(3, 68, 31, 0.828);
text-decoration: none;
border-radius: 4px;
transition: all 500ms ease;
}
a.button-one:hover {
color: #ffffff;
margin: 60px;
padding: 82px;
border: 3px solid #000041;
background-image: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
box-shadow: 0 8px 45px 30px rgba(153, 0, 255, 0.779);
transition: all 500ms ease;
}
a.button-two {
font-size: 64px;
display: block;
margin: 60px;
padding: 80px;
border: 4px solid peru;
color: #ffffff;
border: 3px solid #193553;
background-image: url(https://techno4.online/images/kickstarter0.png), linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
box-shadow: 0 8px 45px 30px rgba(0, 65, 16, 0.813);
text-decoration: none;
text-align: left;
border-radius: 7px 150px 150px 3px;
transition: all 500ms ease;
}
a.button-two:hover {
margin: 62px;
padding: 82px;
color: #171717;
border: 3px solid #d9ff00;
box-shadow: 0 8px 45px 30px rgba(188, 160, 0, 0.53);
transition: all 500ms ease;
}Назва файлу: header1.js
alert(document.getElementsByTagName("h1")[0].textContent)Назва файлу: header4.js
alert(document.getElementsByTagName("h4")[0].textContent)
alert(document.getElementsByTagName("h4")[1].textContent)Копіювати Шлях
Важливо розуміти, що у прикладі показано шлях до файлів відносно вашої фацлової системи. На різних компʼютерах шлях біде різним. Для того щоб скопіювати шлях до вашого файлу, натисніть правою клавішею миші по вкладці з назвою і побачите контекстне меню. Оберіть пункт "Copy Path" – з англійської "Копіювати шлях". Тепер можете вставити шлях до створених файлів в аргументах тегів
link, a, script.Продовження скоро...