Hyper Text Markup Language
<html>
<body>
<open-firts-tag>
<open-second-tag>
Algún texto
</closed-second-tag>
</closed-firts-tag>
</body>
</html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<div>
<h1>Yeah, We are going to eat</h1>
<img src="img-name.svg"/>
<article>Pizza</article>
<p>and burger</p>
</div>
</body>
</html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</body>
</html>
Heading tag
Hyperlink tag
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<a href="http://www.favoritepage.com">
Mi sitio web favorito
</a>
</body>
</html>
Image tag
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<img src="http://bit.ly/RhrMEn"/>
<img src="/assets/nombreimagenlocal.png"/>
</body>
</html>
Ordered lists tag
<html>
<head>
<title>Listas</title>
</head>
<body>
<h1>Lista de mis comidas preferidas</h1>
<ol>
<li>Me gustan las frutas</li>
<li>Me gustan las empanadas</li>
<li>Me gusta el chocolate</li>
<li>Me gusta el yogurt</li>
</ol>
</body>
</html>
Ordered lists tag
<html>
<head>
<title>Listas</title>
</head>
<body>
<h1>Lista de mis comidas preferidas</h1>
<ol>
<li>Me gustan las frutas</li>
<li>Me gustan las empanadas</li>
<li>Me gusta el chocolate</li>
<li>Me gusta el yogurt</li>
</ol>
</body>
</html>
A way to give styles
<!DOCTYPE html>
<html>
<head>
<title>Primer cambio de tamaño de letra</title>
</head>
<body>
<p style = "font-size: 20px"> Hello </p>
<p style="color:red" > Color</p>
<p style="font-family: Arial"> Tipografía</p>
</body>
</html> Cascading Style Sheets
selector {
propiedad: valor;
}
h1 {
color: white;
font-size: 12px;
}
.container {
margin: 0;
background-color: white;
}
#id-name {
color: #8B1C62;
font-size: 1em;
}
Cascading Style Sheets
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="stylesheet.css"/>
<title>Usando estilos</title>
</head>
<body>
<p>¡Soy un párrafo escrito en rojo
pero una de mis palabras es
<span>azul</span>!
</p>
</body>
</html> p {
color: red;
}
span {
color:blue;
/*¡Escribe acá tu CSS!*/
} 
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: purple;
}
</style>
<title>Resultado</title>
</head>
<body>
<p>¡Mirá! ¡Soy violeta!</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Resultado</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<p>Quiero ser verde</p>
</body>
</html>
<!-- stylesheet.css-->
p {
color: green;
}
Universal selector
div div.capa1, div p.texto {color:red;}
Child selector
div > a {font-size: 12px}
HTML & CSS
By Milena Suarez
