Nairi Harutyunyan
Big fan of JavaScript
JS Internship 1.1
HTML - Hypertext Markup Language
Simple example, .html or .htm
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>Element/Tag
<tagname>content here...</tagname><a href="https://www.google.com">Google</a>
<img src="my_image.jpg" width="500" height="600" />
Attributes
<!-- HTML 5 -->
<!DOCTYPE html>
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE>
Block and Inline Elements
<!-- Block -->
<div>Hello</div>
<div>World</div>
<!-- Inline -->
<span>Hello</span>
<span>World</span>Hello
World
Hello
World
CSS - Cascading Style Sheets
Syntax
How to connect CSS to HTML
<p style="color:blue">This is a paragraph</p>
<head>
<style>
p {
color: blue;
}
</style>
</head><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Selectors
/* class */
.player {
width: 10px;
height: 50px;
background-color: black;
}
/* id */
#player-name {
color: #f25100;
font-size: 25px;
}
/* tag inside other tag inside class */
.player div p {
font-size: 10px;
}
<p id='player-name'>Narek</p><div class='player'>...</div>
<div class='player'>...</div>Let's start coding
Learn flex(css)
create tic-tac-toe using flex
Homework
Thank you!
nairi.harutyunyan@optym.com
nairihar99@gmail.com
@nairihar
Optym Internship 1.1
By Nairi Harutyunyan
Optym Internship 1.1
HTML/CSS
