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
41 questions
Svet v rekordih
Presentation
•
6th - 8th Grade
40 questions
ADVENTUROUS 1
Presentation
•
KG
42 questions
One-Step Equations and Inequaties
Presentation
•
6th - 8th Grade
42 questions
Types of Chemical Reactions
Presentation
•
6th - 8th Grade
38 questions
Los Saludos ***
Presentation
•
6th - 8th Grade
40 questions
Policies and Procedures
Presentation
•
6th - 8th Grade
38 questions
Polyèdres et relation d'Euler
Presentation
•
5th - 7th Grade
38 questions
WIDA ACCESS Prep
Presentation
•
6th - 8th Grade
Popular Resources on Wayground
5 questions
A Home on the Shore
Quiz
•
3rd Grade
28 questions
US History Regents Review
Quiz
•
11th Grade
6 questions
A Horse Tale
Quiz
•
3rd Grade
20 questions
Math Review
Quiz
•
3rd Grade
10 questions
Juneteenth History and Significance
Interactive video
•
5th - 8th Grade
20 questions
Dividing Fractions
Quiz
•
5th Grade
55 questions
A Long Walk to Water Final Review
Quiz
•
6th - 8th Grade
10 questions
Equation Word Problems
Quiz
•
7th Grade
Discover more resources for Computers
10 questions
Juneteenth History and Significance
Interactive video
•
5th - 8th Grade
55 questions
A Long Walk to Water Final Review
Quiz
•
6th - 8th Grade
10 questions
Equation Word Problems
Quiz
•
7th Grade
15 questions
Soccer World Cup Quiz Questions
Quiz
•
7th Grade
20 questions
Math Review - Grade 6
Quiz
•
6th Grade
10 questions
Juneteenth: History and Significance
Interactive video
•
7th - 12th Grade
30 questions
Circles, Area, & Volume II 2026
Quiz
•
8th Grade
10 questions
Static and Dynamic Characters
Quiz
•
6th Grade