1 JavaScript Crash Course: HTML

HTML/CSS Crash Course

Введення в HTML + CSS

1 Історія розвитку

HTML/CSS Crash Course Введення в HTML + CSS 1

	body {
	margin: 20px;
	padding: 0;
	background: "aquamarine";
	}

	.home {
	color: white
	}

	.about {
	color: white
	background: #333;
	}

	<body class="my-class" id="my-id">
	Awesome content 😀

	<img src="dogos.jpg" alt="Cute little dog" width="500"/>
	<a href="/cats" title="Link to cats pics page">
	Cats pictures
	</a>
	</body>

	.my-class {
	padding: 30px 50px;

	background: #333;
	color: #fff;
	}

	/* using tag name */
	body {
	background: black;
	}

	/* using class name */
	.my-class {
	padding: 30px 50px;
	background: #333;
	}

	/* using id */
	#my-id {
	color: #fff;
	}

	/* using tagName[tagAttribute="tagAttributeValue"] */
	input[type="text"]{
	color: red;
	}

	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Welcome to my website</title>
	</head>

	<body>
	<header>
	<nav>
	<ul><li>Home</li> <li>About</li></ul>
	</nav>
	</header>

	<section class="home">
	That's home section
	</section>
	<section class="about">
	In this section, I can tell something about my website
	</section>
	<footer>I can add contact details here</footer>

	</body>

	</html>

HTML/CSS Crash Course

1

$ whoami

План:

Історія розвитку

<h1> Hello world! </h1>

Історія розвитку HTML

HTML + CSS (cascading style sheets)

CSS: стилі і зовнішній вигляд веб додатку (сайту)

CSS

Теги та їх атрибути

Тег, як структурна одиниця HTML

Атрибути тегів

Атрибути: class/id

Стилізуємо елементи

Структура HTML сторінки

Заголовки h1 - h6

Елементи для розділу сторінки

Основні елементи для роботи із текстом

Блокові та рядкові елементи

Блокові та рядкові елементи

Елементи форми

<form>

Елементи форми: <input>

Елементи форми: <input>

Елементи форми: <input>

Елементи форми: <textarea>

Елементи форми: <select>

Семантична розмітка

Семантична розмітка

Основні правила розмітки

<style>, <link> та <script>

Налаштування середовища розробки

Корисні ресурси та валідація HTML

Корисні ресурси та валідація HTML

Q & A

	<body class="my-class" id="my-id">

	Awesome content can be here 😀

	</body>

	const body = document.getElementById('my-id');

	body.style.backgroundColor = '#333';
	body.style.color = '#fff';

	<h1> Awesome h1 title 😀 </h1>
	<h2> Awesome h2 title 😀 </h2>
	<h3> Awesome h3 title 😀 </h3>
	<h4> Awesome h4 title 😀 </h4>
	<h5> Awesome h5 title 😀 </h5>
	<h6> Awesome h6 title 😀 </h6>

	<header> Navigation can be there 😀 </header>
	<main> Main web app conent </main>
	<footer>Site map</footer>

	<p> Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, <br/>
	a Wookiee and two droids to save the galaxy from the Empire's <br/>
	world-destroying battle station, while also attempting to rescue <br/>
	Princess Leia from the mysterious Darth Vader.
	</p>
	<pre>
	May the Force be with You!
	</pre>

	<strong>Text formatting</strong>

	<big>Bigger text</big>, <small>Smaller text</small>,

	<b>Bold text</b>

	<i>Cursive text</i>, <em>Another cursive</em>

	This text contains <sub>subscript</sub> text.

	This text contains <sup>superscript</sup> text.

	<div class="cat-profile">
	<p>
	The Maine Coon is a large
	domesticated cat breed.
	It is one of the oldest
	natural breeds in North America.
	</p>
	<img src="/static/images/cat.jpg" />
	</div>
	Maine Coon characteristics:
	<ul>
	<li>Friendly</li>
	<li>Fluffy</li>
	<li>Powerful</li>
	</ul>

	<a
	href="http://google.com"
	name="Google"
	target="_blank"
	title="Open in new tab"
	>
	Navigate to Google
	</a>

	<form action="" method="get" class="user-form">
	<div class="form-group">
	<label for="name">Enter your name: </label>
	<input type="text" name="name" id="name" required>
	</div>
	<div class="form-group">
	<label for="email">Enter your email: </label>
	<input type="email" name="email" id="email" required>
	</div>
	<div class="form-group">
	<input type="submit" value="Subscribe!">
	</div>
	</form>

	<form action="" method="get" class="user-form">
	<h2>Get latest news</h2>
	<div class="form-group">
	<label for="name">
	Enter your name:
	</label>
	<input type="text"
	name="name"
	id="name"
	required>
	</div>
	<div class="form-group">
	<label for="email">
	Enter your email:
	</label>
	<input
	type="email"
	name="email"
	id="email"
	required>
	</div>
	<div class="form-group">
	<button type="submit">
	Subscribe!
	</button>
	</div>
	</form>

	<!-- text type -->
	<label for="name">Name (4 to 8 characters):</label>
	<input type="text" id="name" name="name" required
	minlength="4" maxlength="8">

	<!-- checkbox type -->
	<label>I'm happy</label>
	<input type="checkbox" id="happy" name="happy" checked required>

	<!-- number -->
	<label for="languages">Number of languages yu know (1-10):</label>
	<input type="number" id="languages" name="languages"
	min="1" max="100">

	<!-- color type -->
	<input type="color" id="favorite-color" name="favorite-color" value="#e66465">
	<label for="favorite-color">Favorite color</label>

	<!-- date -->
	<label for="birthday">Birthday:</label>

	<input type="date" id="birthday" name="birthday"
	value="1980-01-01"
	min="1980-01-01" max="2010-12-31">

	<!-- file type -->
	<label for="avatar">Choose a profile picture:</label>
	<input type="file"
	id="avatar" name="avatar"
	accept="image/png, image/jpeg">

	<!-- password type -->
	<label for="pass">Password (8 characters minimum):</label>
	<input type="password" id="pass" name="password" minlength="8" required>

	<!-- radio -->
	<fieldset>
	<legend>Select a maintenance drone:</legend>
	<div>
	<input type="radio" id="huey" name="drone" value="huey" checked>
	<label for="huey">Huey</label>
	</div>
	<div>
	<input type="radio" id="dewey" name="drone" value="dewey">
	<label for="dewey">Dewey</label>
	</div>
	<div>
	<input type="radio" id="louie" name="drone" value="louie">
	<label for="louie">Louie</label>
	</div>
	</fieldset>

	<label for="story">Tell us your story:</label>

	<textarea id="story" name="story" rows="5" cols="33">
	It was a dark and stormy night...
	</textarea>

	<label for="pet-select">Choose a pet:</label>

	<select name="pets" id="pet-select">
	<option value="">--Please choose an option--</option>
	<option value="dog">Dog</option>
	<option value="cat">Cat</option>
	<option value="hamster">Hamster</option>
	<option value="parrot">Parrot</option>
	<option value="spider">Spider</option>
	<option value="goldfish">Goldfish</option>
	</select>

	<label for="name">Name:</label>

	<input type="text" name="name" required>

	<html>

	<head>
	<style>
	body {
	color: white;
	background: #333;
	}
	</style>
	</head>

	<body>
	Awesome content
	</body>

	<script>
	alert("Hello, world!");
	</script>

	</html>

	<html>

	<head>
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/static/styles.css">
	</head>

	<body>
	Awesome content
	</body>

	</html>