Primero Básico
Guía #
Cuarta
Unidad
PEM en Tecnología Angel Vielman
¿Recuerdas que son las Etiquetas en
HTML?
Las etiquetas HTML son fragmentos de código encerrados
entre los caracteres < y > que definen la estructura y el
significado del contenido de una página web, indicando al
navegador cómo debe mostrar elementos como títulos,
párrafos, imágenes y enlaces. Estas etiquetas funcionan como
marcadores que, al combinarse y estructurarse
correctamente, forman la base de cualquier sitio web.
¡Esta información debe copiarla en el cuaderno!
A base de la clase anterior ya debemos de saber que:
las etiquetas básicas son aquellas que comúnmente son utilizadas en la estructura de una página
web.
Algo muy importante: las etiquetas son en inglés esto quiere decir que le decimos a la maquina lo
que queremos hacer por medio de etiquetas en ingles y el texto que se debe de ver, en español.
Estructura base:
¡Esta información debe
copiarla en el cuaderno!
Algunas Etiquetas son:
<i>→Pone el texto en cursiva, útil para nombres, énfasis o citas.
<u>→Pone el texto subrayado</u>
<br> → Hace un salto de línea (baja el texto a la siguiente línea).
<hr> → Inserta una línea horizontal que divide secciones.
<center> → centra el texto
<marquee> → se utiliza para insertar un area de texto en movimiento.
Color de fondo de la página → se logra con el atributo bgcolor dentro de la etiqueta <body>.
Ejemplo:<body bgcolor="lightblue">
<h1>Mi página con fondo azul claro</h1>
</body>
Color de letra → se puede hacer con la etiqueta <font> (aunque está obsoleta, es básica y
sirve para aprender).
Ejemplo:<p><font color="red">Este texto es rojo</font></p>
<p><font color="blue">Este texto es azul</font></p>
¡Esta información debe copiarla en el cuaderno!
Cosas bases e importantes en
Sublime Text
Recordemos que para crear una pagina web se debe seguir los siguientes pasos
obligatoriamente:
1. Abrir Sublime text y en la sección “file” guardar el documento en “Save As”
2. Guardarlo asegurándose que cumpla con los siguientes requisitos
Es fundamental guardarlo de la siguiente manera, ya que de otra forma la pagina
web no será valida.
¡Esta información no debe copiarla en el
cuaderno!
Acá les dejo nuevamente en link para que puedan
Instalar de forma segura Sublime Text y un link de YouTube en el cual
pueden ver un pequeño tutorial de como descargarlo y utilizarlo.
[Link]
[Link]
lyaOnkBSqt
v
E
J
E
M
P
L
O
Tarea Practica:
→ Crea un archivo nuevo y guárdalo con el nombre [Link].
→Título de la página: “Elige tu aventura”
→ Color de fondo: verde claro
→ Color de texto: azul oscuro Título grande de bienvenida
→ Dos preguntas con dos opciones cada una usando botones
→ Mensaje final indicando que la aventura terminó
→ Guarda los cambios.
Abre tu archivo en el navegador para ver cómo se ve la aventura.
Personaliza la tarea:
Cambia los textos de los botones por otras opciones que se te ocurran
Cambia los colores de fondo y de texto a tus favoritos ¡Esta tarea se explicara paso a
Agrega una nueva pregunta con dos botones más paso en clase, prestar mucha
atención por favor!
Explicación Corta
→Todo lo que se quiere mostrar va en el cuerpo, con color de fondo y color de
texto. etiqueta: <body>
→ Se escribe un título grande para dar la bienvenida a la aventura. Etiqueta: <h1>
→ Se escriben párrafos con las preguntas o situaciones de la aventura. Etiqueta:
<p>
→ Se agregan botones para que el jugador elija opciones Etiqueta: <button>
→ Se escribe un mensaje final para indicar que la aventura terminó Etiqueta: <p>
→ Se cierra la página para indicar que todo el contenido terminó. Etiqueta:
</body>, </html>
¡Esta tarea se explicara paso a
paso en clase, prestar mucha
atención por favor!