HTML, CSS Y JAVASCRIPT Y REACT
CURSO FRONT-END
Hola, mi nombre es <Angel> y
voy a realizar el curso de
FRONT-END en la aplicacion
de enseñanza MIMO
Empecemos
CURSO NO. 1
DESCUBRIENDO HTML Y ETIQUETAS
CREAR UN
La mayoría de las etiquetas HTML
vienen en un par, tienen una
BOTON etiqueta de apertura y una
etiqueta de cierre.
Las etiquetas de apertura están
Para crear un botón, usamos rodeadas por <> , mientras que
<button>Like</button>. las etiquetas de cierre están
Éstas se denominan etiquetas HTML . rodeadas por </> .
<Button>Hola mundo</Button>
El texto que se encuentra entre
las etiquetas de apertura y
cierre es lo que aparecerá en el
botón.
DESCUBRIENDO HTML Y ETIQUETAS EJERCICIOS
¡Es hora de poner a prueba lo Escribe tres botones que
que has aprendido hasta ahora! contengan las siguientes letras:
¿Qué tipo de etiqueta es esta? < Q, R y D
</button> > .
Una etiqueta de apertura
<button>Q</button>
Una etiqueta de cierre <button>R</button>
¿Cuál de estas etiquetas está <button>D</button>
escrita incorrectamente ?
</button>
<button>
<button\>
PARRAFOS Codificar un párrafo es muy similar
a codificar un botón. Necesita una
En HTML, las palabras clave de etiqueta de apertura, seguida de su
algunas etiquetas son obvias, texto y una etiqueta de cierre.
pero hay algunas etiquetas que
Codifique un parrafo que muestre:
utilizan una forma abreviada. Por
Mimo is fun!
ejemplo, usamos p para un
párrafo. <p>Mimo is fun</p>
<p>
ENCABE ZADOS Codifique un encabezado
que muestre SnapCat .
Podemos crear títulos en <h1>SnapCat</h1>
HTML para enfatizar
determinados textos. Hay 6
tamaños de encabezado en
HTML, desde h1 hasta h6.
<h1></h1> La etiqueta de encabezado enfatiza
<h2></h2> los textos haciéndolos más grandes y
<h3></h3> en negrita. h1 es el más grande y en
<h4></h4>
negrita y h6 es el más pequeño y
<h5></h5>
menos en negrita.
<h6></h6>
SALTOS DE LINEA
Podemos separar líneas con
A veces queremos formatear párrafos
la ayuda de la etiqueta de
con saltos de línea.
Por ejemplo, esta canción se vería mucho salto de línea : <br> . <br> es una etiqueta vacía .
mejor si Raindropsonroses aparecieran <h1>My favorite things</h1> Las etiquetas vacías no tienen
en una línea, Whiskersonkittens en la <p>Raindrops on roses<br> etiqueta de cierre ni contenido.
siguiente, y así sucesivamente. Whiskers on kittens<br> También se les llama etiquetas
Bright copper kettles<br> de cierre automático.
Warm woolen mittens
</p>
ÉNFASIS AL TEXTO
De énfasis a la palabra
Mimo del siguiente texto:
Hay un elemento para darle HOLA MUNDO
énfasis al texto, lo pone en Estas lecciones están realizadas por
Mimo, he estado aprendiendo y
cursiva . Se llama elemento em . comparto por este medio el
Agregue <em> y </em> . conocimiento que me proporciona
la app.
<h1>HOLA MUNDO</h1>
<p>Estas lecciones están
<em>Angel</em>
realizadas por <em>Mimo,</em>
eh estado aprendiendo y
comparto por este medio
el conocimiento que me
Angel
proporciona la app</p>
HOLA MUNDO
Estas lecciones están realizadas por
Mimo, he estado aprendiendo y
comparto por este medio el
conocimiento que me proporciona
la app.
TEXTO IMPORTANTE
Para definir textos como importantes
utilizamos las etiquetas <strong> y </strong> .
Pone el texto en negrita .
<h1>My favorite things</h1>
‹р> Raindrops on ‹em>roses</em><br>
Whiskers on ‹strong>kittens</strong>
DESCUBRIENDO HTML Y ETIQUETAS EJERCICIOS
Para que sirve la etiqueta <br> ¿Cuál de estas etiquetas da
Agregar énfasis al texto
énfasis al texto?
<p> y </p>
Agregar un salto de linea
<em> y </em>
¿Cuál de estas etiquetas es una ¿Para qué sirven las etiquetas
etiqueta vacía o de cierre <strong> y </strong> ?
automático? <p> y
Definen al texto </p> importante
como
</strong> Hacen que el texto sea irrompible
mediante salto de línea
</em>
<br>
<p>
EJERCICIOS
Dale énfasis al título del álbum Agregue un salto de línea a la
agregando las etiquetas de dirección entre Mimo y Viena,
énfasis de apertura y cierre. Austria , de modo que Mimo
aparezca en una línea y Viena,
<p> I just listened to [ ]Abbey Austria debajo de ella.
Road[ ] for the first time. </p> <p>Mimo [ ] Vienna, Austria</p>
<p> I just listened to <em>Abbey <p>Mimo <br> Viena, Austria </p>
Road</em>
for the first time. </p>
ENLACES
Para vincular el texto a una página
web, agregamos href="" junto con
Para comenzar a crear un enlace, un localizador uniforme de recursos
agregamos el texto entre las ( URL ). href es la abreviatura de
etiquetas <a> y </a> . Esto no "referencia de hipertexto".
resaltará el texto todavía.
<a href=”http://enlaces_definicion.com>Learn to
Code</a>
<a> significa etiqueta "Ancla".
<a>Enlaces</a>
ENLACES
Vinculamos a una página web
href es un atributo . Todos los atributos agregando = después del atributo y
tienen dos cosas en común: una URL como valor entre comillas.
proporcionan información adicional y ‹! doctype html>
van dentro de la etiqueta de apertura. <html>
Los atributos se agregan después del <body>
nombre de la etiqueta y antes del signo =
<a href=”https://mimo.org”>Learn to
Code</ a>
de cierre > .
</ body>
<a href
href=”http://enlaces_definicion.com>Learn to </html>
Code</a>
DESCUBRIENDO HTML Y ETIQUETAS EJERCICIOS
¿Que haces los enlaces?
¿Qué sucede cuando un visitante hace
Vincular páginas web a otras clic en el enlace de esta página web?
páginas y sitios web
Enfatizar el texto
¿Por qué no funciona el enlace?
Porque no tiene texto entre
<a> y </a> El enlace dirige al usuario a otro sitio web
Porque no tiene el atributo href Nada, porque falta el atributo href
DESCUBRIENDO HTML Y ETIQUETAS EJERCICIOS
¿Para qué sirven attributes ?
Agregue el atributo y su valor para que
Para proporcionar información
al hacer clic en el enlace se dirija a los
adicional sobre etiquetas
usuarios al sitio web de Facebook.
Para convertir todas las etiquetas en enlaces
Elija la etiqueta de apertura que
haga que se pueda hacer clic en
el enlace.
<a href=”https://cars.com>
<a>
IMÁGENES Para mostrar una imagen, una
etiqueta de imagen necesita el
Para agregar imágenes a una atributo src . src significa fuente.
página web, comenzamos con <h3>Drawing of ‹em>Earthrise</em> </h3>
la etiqueta <img> . src
<img src="https://mimo.app/i/earth.png">
<img> Configuramos la imagen que
queremos mostrar con un signo = y
Al igual que <br> , <img> es
la dirección de la imagen entre
etiqueta vacía
una etiqueta vacía. Eso
comillas dobles.
significa que no tiene etiqueta
<h3>Drawing of ‹em>Earthrise</em> </h3>
de cierre. <img src="https://mimo.app/i/earth.png">
<img>
IMÁGENES Por ejemplo, para establecer el ancho
de esta imagen en 100 px, código
width="100" .
Podemos usar atributos
para cambiar el tamaño
de las imágenes. Los
atributos width y
height utilizan píxeles
como unidad de medida
predeterminada.
>
<img>
IMÁGENES
Y el atributo height ajusta la altura
de una imagen.
>
ESTRUCTURA DE CODIGO HTML
<! doctype html> Qué versión de html usamos
<html> Indica que el documento es html, en este se contienen todos los datos dentro de el.
<head> Contenedor de Informacion sobre una página WEB
‹title>My webpage</title> Título de la página WEB
</ head>
<body> Cuerpo del documento
<h1>My favorite things</h1>
<p> Raindrops on
‹em>roses</em><br>Whiskers on
‹strong>kittens</strong></p>
>
</ body>
</html>
CCS Para incluir una hoja de estilo en un
archivo HTML , utilizamos el elemento
CASCADING STYLE SHEET.
link . <link> es un elemento vacío que se
cierra automáticamente y va dentro del
elemento head .
Ahora pasaremos a crear <! doctype html>
<html>
sitios web atractivos con la <head>
ayuda de un lenguaje de <link>
</ head>
estilo llamado CSS, ‹body>
<h1>Water Puns</h1>
abreviatura de Cascading <p> Why does water never laugh at jokes? It's not
Style Sheets. a fan of dry
humor. </p>
</ body>
</html>
CCS
CASCADING STYLE SHEET.
Para especificar la ubicación de la hoja de
Para saber qué tipo de archivo incluir, la estilo, establezca el atributo href en
etiqueta del link de apertura necesita el "style.css" .
atributo rel configurado usando
rel="stylesheet" .
‹! doctype html>
‹! doctype html> <html>
<html> <head>
<head> <link rel="styleheet" href="style. css">
<link rel=”stylesheet”>
rel=”stylesheet” </ head>
</ head> <body>
<body> <h1>Water Puns</h1>
<h1>Water puns</h1> ‹p> Why are oceans so meticulous?<br>
They go with the flow. </p> They like to be pacific. </p>
</ body> </ body>
<p>Why are rivers amazing roommates? </html>
</html>
CCS
CASCADING STYLE SHEET. Ahora, cualquier declaración que
agreguemos se aplicará a todos los
Dentro del archivo CSS , especificamos a elementos p de la página web. Añade el
qué elemento aplicar estilo con un color:blue; declaración.
selector de etiquetas. Seleccione la style.css
etiqueta p . p {
color: blue; Regla CSS
style.css }
p
Luego agregamos una llave de apertura, { index.html
, seguida de una llave de cierre, } . ‹! doctype html>
<html>
<head>
style.css <link rel="stylesheet"
p { href="style.css">
</ head>
<body>
<h1>Water Puns</h1>
} <p> When does it start to rain money?
When there's change in the
weather. </p>
</ body>
</html>
CCS
CASCADING STYLE SHEET.
Podemos agregar otras
declaraciones como
background-color:pink
siempre que estén en otra línea.
style.css
p {
color: blue;
background-color: pink;
}
CCS .
ATRIBUTO CLASS HTML
Si queremos seleccionar uno o
CSS
más elementos, podemos
establecer un atributo class
para los elementos exactos que
Las reglas de la clase se aplicarán a todos los elementos que
queremos cambia tengan ese atributo de clase en el archivo html .
En la hoja de estilo, podemos Las clases no son únicas, por lo que podemos establecer la
misma clase para varios elementos. Como aquí, por ejemplo,
establecer una nueva regla de con class="gray-element" .
clase con un archivo . seguido Para configurar una clase como selector en CSS, agregue un
del nombre de la clase. Como punto seguido del nombre de la clase. En este caso, es
.gray-element .
aquí con .gray-element .
CCS # Para seleccionar el elemento por su id,
escribimos # seguido del nombre del
ESTILO A UN ELEMENTO ESPECÍFICO id, como capital-letter aquí.
Si queremos darle estilo a un
elemento específico, podemos
incluir un selector id . Aquí
Html CSS
solo queremos seleccionar el
botón con la letra mayúscula.
Primero, necesitamos Los ID nos ayudarán con JavaScript y no
debemos abusar de ellos para diseñar.
identificar el elemento en el
Sin embargo, podemos aplicar estilos
html. Para establecer un como siempre con el selector id .
atributo de ID, escriba id="" . Agregamos declaraciones al gusto:
id=”X”
CSS
Para poner en cursiva el texto de
un elemento, usamos la propiedad
MODIFICACIONES EN EL TEXTO font-style y establecemos el valor
en italic .
• Para establecer el tipo de fuente p {
• Para cambiar el tamaño del
para un elemento, comience font-size: 60px;
texto, usamos la propiedad
agregando la propiedad font-family: Courier New;
font-size .
font-family . font-style: italic;
p { p { }
font-size font-size: 60px;
} font-family Para poner en negrita el texto de
• Medimos elementos en una un elemento, usamos la propiedad
}
página web con píxeles . Para font-weight y establecemos el
• Hay todo tipo de valores posibles
especificar un tamaño, agregamos valor en bold .
para font-family , desde Times
un número. Establezca el font-size p {
NewRoman hasta Helvetica .
del elemento p en 60 píxeles. Aquí, usemos CourierNew . font-size: 60px;
p { p { font-family: Courier New;
font-size: 60px; font-size: 60px; font-style: Italic;
} font-family: Courier New; font-weight: bold;
} }
