HTML, CSS & JS

HTML
ADD LINK
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href=www.site.com>descrição do site</a>
</body>
</html>
ADD IMAGE
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="url"/>
</body>
</html>
ADD IMAGE LINK
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href=www.site.com><img src="url"/></a>
</body>
</html>
ADD ORDERED LIST
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>
</body>
</html>
CHANGE FONT SIZE
<!DOCTYPE html>
<html>
<head>
<title>First font size change</title>
</head>
<body>
<p style="font-size: 10px"> Some text for you to make tiny!</p>
<p style="font-size: 20px"> Some text for you to make normal size!</p>
<p style="font-size: 40px"> Some text for you to make super big!</p>
</body>
</html>
TABLES
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2"; style=”color:red”>Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
</tr>
</tbody>
</table>
</body>
</html>
ADD DIVISIONS
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
</body>
</html>
ADD SPAN
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>This text is black, except for the word <span

style="color:red">red</span>!</p>
</body>
</html>
LINK TO CSS
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
CSS
h1 {
font-family: Verdana, sans-serif;
color: #576d94;
p{
font-weight: bold;
text-align: center;
font-size: 18px;
color: #4a4943;
font-family: Garamond, serif;
img {
display: block;
height: 100px;
width: 300px;
border: 1px solid #4682b4;
a{
text-decoration: none;
color: #cc0000;
border-radius: 5px;
border: 2px solid #6495ED;
background-color: #BCD2EE;
height: 50px;
width: 120px;
margin: auto;
text-align: center;
LINKS: UNVISITED VISITED AND HOVERING
a:link {
text-decoration: none;
color: #008B45;
a:hover {
color: #00FF00;
a:visited {
color: #EE9A00;
FIRST CHILD AND NTH CHILD
p:first-child {
font-family:cursive;
p:nth-child(2) {
font-family: tahoma;
p:nth-child(3) {
color:#cc0000;
p:nth-child(4) {
background-color: #00ff00;
}
Dividers Display CSS Positioning
p:nth-child(5) {
font-size: 22px;
} block: This makes the The margin is the space

element a block box. It won't around the element. The
let anything sit next to it on larger the margin, the more
the page! It takes up the full space between our element
width. and the elements around it.
We can adjust the margin to
inline-block: This makes the move our HTML elements
element a block box, but will closer to or farther from each
allow other elements to sit other.
next to it on the same line.
The border is the edge of the
inline: This makes the element. It's what we've been
element sit on the same line making visible every time we
as another element, but set the border property.
without formatting it like a
block. It only takes up as The padding is the spacing
much width as it needs (not between the content and the
the whole line). border. We can adjust this
value with CSS to move the
none: This makes the border closer to or farther
element and its content from the content.
disappear from the page
entirely! The content is the actual
"stuff" in the box. If we're
talking about a <p> element,
the "stuff" is the text of the
paragraph.
You'll see abbreviations

like TM,TB, and TP in the
diagram. These stand for "top
margin," "top border," and
"top padding." As we'll see,
we can adjust the top, right,
left, and bottom padding,
border, and margin
individually.
JAVASCRIPT
// Check if the user is ready to play!
confirm("If you're ready to play, click okay!");
var age = prompt("What's your age");
if (age < 13)
console.log("You're allowed to play but i take no responsability!");
else
console.log("Enjoy your big adventure!");
console.log("You are at a Justin Bieber concert, and you hear this lyric 'Lace my shoes off,
start racing.'");
console.log("Suddenly, Bieber stops and says, 'Who wants to race me?'");
var userAnswer = prompt("Do you want to race Bieber on stage?")
if (userAnswer === "yes")
console.log("You and Bieber start racing. It's neck and neck! You win by a shoelace!");
else
console.log("Oh no! Bieber shakes his head and sings 'I set a pace, so I can race without
pacing.'");
var feedback = prompt("Please rate the game on 1 to 10")
if (feedback > 8)
{
console.log("Thank you! We should race at the next concert!");
else
console.log("I'll keep practicing coding and racing.");
FUNCTION
var greeting = function (name) {
console.log("Great to see you," + " " + name);
};
// On line 11, call the greeting function!
greeting("Filipe");
RETURN KEYWORD
// Parameter is a number, and we do math with that parameter
var timesTwo = function(number) {
return number * 2;
};
// Call timesTwo here!
var newNumber = timesTwo(1)
console.log(newNumber);
OBJECTS
// OBJECT CONSTRUCTOR
var object1 = new Object();
object1["key"] = "value";
var object2 = new Object();
object2.key = "value";
// OBJECT LITERAL NOTATION
var object3 = {
property: "value",
key: "value"
};

HTML, CSS &amp; JS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML, CSS &amp; JS

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

<a href=www.site.com>descrição do site</a>

ADD IMAGE LINK

<a href=www.site.com><img src="url"/></a>

ADD ORDERED LIST

<h1>List of my favorite things</h1>

<li>Bright copper kettles</li>

<li>Warm woolen mittens</li>

<title>First font size change</title>

<p style="font-size: 10px"> Some text for you to make tiny!</p>

<th colspan="2"; style=”color:red”>Famous Monsters by Birth Year</th>

<th style="padding:5px;"><em>Famous Monster</em></th>

<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>

<td style="padding:5px;">King Kong</td>

<td style="padding:5px;border-left:1px solid black;">1933</td>

<td style="padding:5px;border-left:1px solid black;">1897</td>

<td style="padding:5px;">Bride of Frankenstein</td>

<td style="padding:5px;border-left:1px solid black;">1944</td>

<div style="width:50px; height:50px; background-color:red"></div>

<div style="width:50px; height:50px; background-color:blue"></div>

<div style="width:50px; height:50px; background-color:green"></div>

<div style="width:50px; height:50px; background-color:yellow"></div>

<p>This text is black, except for the word <span

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

font-family: Verdana, sans-serif;

font-family: Garamond, serif;

border: 1px solid #4682b4;

border: 2px solid #6495ED;

LINKS: UNVISITED VISITED AND HOVERING

FIRST CHILD AND NTH CHILD

} block: This makes the The margin is the space

You'll see abbreviations

// Check if the user is ready to play!

confirm("If you're ready to play, click okay!");

var age = prompt("What's your age");

if (age < 13)

console.log("You're allowed to play but i take no responsability!");

console.log("Enjoy your big adventure!");

console.log("Suddenly, Bieber stops and says, 'Who wants to race me?'");

var userAnswer = prompt("Do you want to race Bieber on stage?")

if (userAnswer === "yes")

var feedback = prompt("Please rate the game on 1 to 10")

console.log("I'll keep practicing coding and racing.");

var greeting = function (name) {

console.log("Great to see you," + " " + name);

// On line 11, call the greeting function!

// Parameter is a number, and we do math with that parameter

var timesTwo = function(number) {

// Call timesTwo here!

var newNumber = timesTwo(1)

var object1 = new Object();

var object2 = new Object();

// OBJECT LITERAL NOTATION

Você também pode gostar

HTML, CSS & JS

HTML, CSS & JS