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