Actividad 1 - Familiarizarse con editor en linea
Instrucciones
- Abre el editor del navegador (clica en el botón de abajo “Inténtalo tu mism@!”)
- Usa etiquetas de cabecera para añadir el título y las etiquetas de párrafo para escribir un párrafo sobre Benji
- Si tienes tiempo: escribe una lista de las golosinas favoritas de Benji: pavo, mantequilla de cacahuetes y queso en hebras
Usa este gráfico de referencia para probar algunas etiquetas HTML tú mism@.
| Tag | Descripción | Ejemplo |
|---|---|---|
<html></html> | Describen un documento HTML. Cualquier sitio web tiene que comenzar con la etiqueta de apertura y terminar con la etiqueta de cierre. | Puedes ver un ejemplo en Code Pen. |
<!-- --> | Describen un comentario. Los comentarios se utilizan para que otros desarrolladores los puedan ver, pero no se muestran en la página web. | <!-- Esta línea no es visible en el buscador/browser --> |
<head></head> | Contienen todos los elementos HTML que proporcionan información al navegador para que muestre la página web correctamente. Los elementos HTML entre y la etiqueta no se muestran. | Puedes ver un ejemplo en Code Pen. |
<title></title> | Contienen el título del sitio web que se utilizará para nombrar la pestaña en el navegador. | <head> <title> Mi sitio web </title> </head> |
<body></body> | Contiene todos los elementos HTML que se muestran en la página como por ejemplo texto e imágenes. | Puedes ver un ejemplo en Code Pen. |
<h1></h1>… <h6></h6> | Definen un titular/título. <h1> define el título más importante (más grande), mientras que <h6> define el título menos importante (más pequeño). | <h1>Este será el título grande</h1> <h4>Este será un título más pequeño</h4> |
<p></p> | Describe un párrafo. | <p>Los perros han evolucionado para querer a los humanos. En conclusión, los perros son los mejores amigos de los humanos.</p> |
<div></div> | Definen una división o sección en la página. | <div> <h1>Todo sobre mi</h1> </div> |
<img> | Una imagen. Es una etiqueta que se Cierra sola per hay que especificar el origen de la imagen para que el navegador sepa de donde tiene que tomar la imagen. | <img src=“aka.ms/Benji-the-dog”> |
<hr> | Dibuja una línea horizontal. Es otra etiqueta que se cierra sola y que es útil si quieres partir el contenido de la página. | … <hr> … |
<ul><li></li></ul> | Una lista. Para comenzar la lista, usa la etiqueta <ul>. Para cada artículo que hay que agregar a la lista, rodéalo con las etiquetas <li> y </li>. Acaba la lista con la etiqueta </ul>. | <ul> <li>Este es uno de los artículos de la lista.</li> </ul> |