HTML 1
Presentation
•
Computers
•
6th - 8th Grade
•
Easy
JOEL Colon
Used 21+ times
FREE Resource
29 Slides • 16 Questions
1
En esta clase aprenderás a crear un webpage con fondo de color.
HTML 1
2
Para crear un folder basta con dar click derecho sobre Desktop y escoges New --> Folder
Creando el Folder
3
Al nuevo folder lo llamarás HTML
El recién nacido Folder
4
Atajo alterno de teclado para crear un folder nuevo
5
Abre el programa Notepad++
El EDITOR
6
Sigue estos pasos:
Click en menú File... luego Save As...
Guarda con nombre: index.htm
De la lista escoges: All Files o All Types
Guarda dentro de tu folder llamado HTML
7
Si guardaste bien, podrás ver en tu folder HTML un archivo con un icono indicando tu navegador de preferencia. (En mi caso Opera pero en el tuyo esto puede variar)
Guardando en el folder HTML
8
Te recomiendo que ubiques las paginas así para que veas el efecto según escribes el código
9
Escribe esta primera línea de código en la fila 1
Esto le indica al navegador que estás usando la versión 5 de HTML y asi no tendrá que inferirlo de la lectura sino entenderlo directamente y así ahorras tiempo de carga en la página.
10
¿Te das cuenta que usamos llavecitas? < >
Todo debe ir escrito DENTRO de esas llavecitas.
Una llavecita abre <
Otra llavecita cierra >
11
Observa que usamos un signo de exclamación americano al principio.
Eso no fue un error Typo sino que así se escribe.
Yo he visto la palabra DOCTYPE en mayusculas... no creo que escribirlas en minusculas sea en error pero por si las moscas... escribe tal cual lo ves.
12
Te recomiendo que cada vez que escribas una línea de código la guardes tocando el icono del diskette para que no tengas pérdidas de datos.
13
En las líneas 3 y 5 debes escribir las ETIQUETAS <html> y </html>
Recuerda que la primera es de inicio y la segunda es de cierre y por eso tiene una línea diagonal inclinada a la derecha. Ellas trabajan en parejas.
14
Me gusta pensar en estas etiquetas <html> </html> como el pan que arropa el sandwich. Tú siempre debes comenzar con esos dos "panes" antes de poner el contenido del sandwich. Cuando vayas a escribir adentro de los panes, solo debes usar la tecla ENTER para hacer espacio entre esas etiquetas. Piensa en las llavecitas <> como el borde del pan.
15
El código que ves en ROJO es lo que debes escribir DENTRO de las etiquetas <html> </html> para que se muestre un escrito en la pestaña de tu website.
Recuerda que title es la palabra en Inglés para decir TITULO en Español pero muchas veces los estudiantes confunden su escritura escribiendo tittle con 2 t y eso no te permitirá ver el título.
16
Imagina que este titulo se mostrará en la CABEZA de tu website y allí pensará muchas otras cosas que luego te enseñaré
17
Observa también que las etiquetas <head> </head> tambien trabajan en pareja.
Una de entrada y otra de salida con la diagonal /
18
¿Notaste que al escribir dentro de las etiquetas <html> </html> ellas se ubicaron arriba y abajo?
Eso es porque el sandwich se va engordando cada vez que añades líneas.
19
Si crees que lo escribiste bien puedes tocar el botón de guardar.
20
Luego de guardar cambios en el editor Notepad++ hora puedes tocar la flechita de REFRESH en tu webpage para que veas los cambios. Por ahora solo verás el TITULO en la pestaña porque eso fue lo único que codificaste.
21
Debajo de la etiqueta de cierre </head> aprietas tecla ENTER para hacer espacio y pones las etiquetas <Body> </Body> ¿Te fijas que también parecen panes? Una arriba y otra abajo. Ellas son parejas. Estamos formando un muñequito con cabeza y cuerpo.
22
Para dar color a tu website puedes escribir este código dentro de la etiqueta de apertura <Body y cierras la llave al final de línea>
El nombre del color que escojas debe estar en INGLES y usando las doble comillas que activas con la tecla SHIFT. (o sea, no son 2 comillas individuales)
23
Para comprobar los cambios GUARDA en el editor y REFRESCA en tu webpage y se supone que puedas ver el color que elegiste.
24
Supongo que ya tienes algo así
25
Si deseas que tu webpage tenga otros colores variados o mezclados puedes usar códigos que los definen. Pero para eso debes visitar sitios como este que te mostrará el código que debes usar. Visita:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
o
26
27
Para comprobar los cambios GUARDA en el editor y REFRESCA en tu webpage y se supone que puedas ver el color que elegiste.
28
Código completado
29
COMPROBACIÓN de Aprendizaje
30
Multiple Choice
Atajo de Teclado para crear un folder nuevo
Shift Ctrl N
Ctrl N
Shift N
Shift Ctrl +
31
Multiple Choice
Programa usado para escribir las líneas de código usando números.
Notepad ++
Notepad
Word
Excel
32
Multiple Choice
Nombre asignado a la primera página de tu website.
index
home
first
start
33
Multiple Choice
Nombre del navegador 1
Chrome
Firefox
Edge
Safari
Opera
34
Multiple Choice
Nombre del navegador 2
Chrome
Firefox
Edge
Safari
Opera
35
Multiple Choice
Nombre del navegador 3
Chrome
Firefox
Edge
Safari
Opera
36
Multiple Choice
Nombre del navegador 4
Chrome
Firefox
Edge
Safari
Opera
37
Multiple Choice
Nombre del navegador 5
Chrome
Firefox
Edge
Safari
Opera
38
Multiple Choice
En cual de estas debes GUARDAR cambios?
En NotePad
En WebPage
Lo hace automático
No es posible
39
Multiple Choice
¿Cual de estas líneas le dice al navegador que estamos escribiendo en versión HTML 5?
<!DOCTYPE html>
<!version html>
<!version html5>
<!DOCTYPE html5>
40
Multiple Choice
¿Cual de las siguientes es una etiqueta de CIERRE?
</html>
<body>
<end>
<!DocType html>
41
Multiple Choice
¿Cual de estas líneas de código va a mostrar un nombre en la pestaña?
<title>
nombre
</title>
<html>
nombre
</html>
<head>
nombre
</head>
<tab>
nombre
</tab>
42
Multiple Choice
En cual de estas debes REFRESCAR para mostrar cambios?
En NotePad
En WebPage
Lo hace automático
No es posible
43
Multiple Choice
¿Cual de estas etiquetas está MAL escrita?
</html>
<html>
<body>
</body>
<title>
</title>
<head>
</head>
44
Multiple Choice
¿Cual de estas mostrará color azul al fondo de la página web?
<body bgcolor="blue">
<body bgcolor='blue'>
<body bgcolor="azul">
<head bgcolor="blue">
45
Multiple Choice
El formato correcto para codificar un color de fondo personalizado es:
<body bgcolor="#41A39E">
<body bgcolor='#41A39E'>
En esta clase aprenderás a crear un webpage con fondo de color.
HTML 1
Show answer
Auto Play
Slide 1 / 45
SLIDE
Similar Resources on Wayground
39 questions
ARSA 7th Texas Studies CA #1 Review
Presentation
•
7th Grade
40 questions
Musica Flauta
Presentation
•
7th Grade
36 questions
Writing Equations
Presentation
•
6th - 8th Grade
43 questions
Past Simple Lesson UIS
Presentation
•
KG
38 questions
UNIT 2 Influencers
Presentation
•
6th - 8th Grade
41 questions
tecnologia
Presentation
•
6th - 8th Grade
37 questions
BIENVENIDA AL CURSO DE COMPUTACIÓN
Presentation
•
6th - 8th Grade
39 questions
CSD Unit 3 Lesson 18 Velocity Overview
Presentation
•
6th - 8th Grade
Popular Resources on Wayground
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
10 questions
Cinco de Mayo Trivia Questions
Interactive video
•
3rd - 5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
13 questions
Cinco de mayo
Interactive video
•
6th - 8th Grade
20 questions
Math Review
Quiz
•
3rd Grade
30 questions
GVMS House Trivia 2026
Quiz
•
6th - 8th Grade