Введение в
веб-разработку
Егор
HTML
Язык разметки имеющий определенную струткуру
Британский учёный
Тим Бернерс-Ли
HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в этой области
Примеры
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>
<b>
Этот текст будет полужирным,
<i>а этот - ещё и курсивным</i>
</b>
</p>
</body>
</html>Упражнение
<h1>Я большой абзац</h1>
<h2>Я чуть меньше</h2>
<h3>Ну я средненький</h3>
<h4>А я самый маленький =(</h4>
<div>Я обычный текст</div>
<button>Хочу в IT</button>CSS
Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Консорциум Всемирной паутины
CSS используется для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц.
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" href="Style.css">
</head>
<body>
.....
</body>
</html><!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<div style="font-size: 20px; color: green;">
.....
</div>
</body>
</html>Упражнение
<h1 style="color: red;">Я большой абзац</h1>
<h2 style="font-style: italic;">Я чуть меньше</h2>
<h3 style="background: blue;">Ну я средненький</h3>
<h4>А я самый маленький =(</h4>
<div style="border: 2px dotted red; margin-bottom: 10px;">Я обычный текст</div>
<button style="padding: 5px; font-size: 150%; background: #30aadd; color: white;">
Хочу в IT
</button>JavaScript
Скриптовый язык программирования, которому запуска нужна среда выполнения
Брендан Эйх
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<script>
alert('Hello, World!');
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
</head>
<body>
...
</body>
</html>Упражнение
<body>
<h1 id="elm">
Привет! Я самый большой абзац на странице!
</h1>
<button onclick="changeColor();">
Изменить цвет
</button>
<button onclick="removeH1();">Удалить</button>
<script>
var elm = document.getElementById("elm");
function changeColor(){
elm.style.backgroundColor = "red"
}
function removeH1(){
elm.remove();
}
</script>
</body>