PROGRAMANDO PROFESORA: ALMA
EN HTML GLORIA SANABRIA
ROJAS
¿Qué es HTML?
• Es un lenguaje de Marcado de hipertexto
• Con este lenguaje se desarrollan casi todas las páginas
Web
• El código puede crearse y procesarse en editores de
texto sencillos
• Se utiliza con un sistema de etiquetas (tags) con las
cuales proporcionamos características de formatos
Se puede resumir la filosofía del HTML con los
siguientes puntos:
• Es muy sencillo.
• No hay variables.
• No se compila.
• Las instrucciones se les conoce como “etiquetas” o
“marcas”.
• El programa que interpreta este lenguaje es un
navegador (Google, Chore, Firefox, etc.)
Componentes de una Página Web
Las etiquetas de HTML tienen la siguiente sintaxis:
<etiqueta> Contenido </etiqueta>
LAS ETAPAS DE UN DISEÑO DE UN PÁGINA
WEB SON LAS SIGUIENTES:
Delimitación del Tema
Recolección de la información
Clasificación de la información
Estructuración
Metáfora
Diseño y estilo Gráfico
Ensamblaje final
Realización de pruebas
UNA PÁGINA WEB CONTIENE LOS
SIGUIENTES ELEMENTOS:
ETIQUETAS BÁSICAS :
Etiqueta Función
< HTML> Es la etiqueta con la cual debes empezar todo
documento de html.
< HEAD> Indica el inicio de la cabecera de la página.
< TITLE > TITULO < / TITLE > Indica el inicio del título de la página, este título es
él que aparecerá en la barra del título del
navegador.
< /HEAD > Indica el final de la cabecera de la página, cabe
señalar que todas las etiquetas que inicien con </
indican la finalización de algunas etiquetas
< BODY > Marca el inicio del cuerpo de la página
Etiquetas y cuerpo del documento Aquí se colocarán las etiquetas que conformarán la
página, así como la información que está
contendrá.
< /BODY > Marca el final del cuerpo de la página
< /HTML > Indica el final de toda la página.
VAMOS A CREAR NUESTRA
PRIMER PÁGINA
1.
Tenemos
que abrir
el bloc de
Notas
Desde la
búsqueda, solo
colocando la
palabra bloc
PROFESORA: ALMA GLORIA SANABRIA ROJAS
2. AHORA DEBEMOS DE INGRESAR EL SIGUIENTE CÓDIGO, PROCURA
ESCRIBIR LAS INSTRUCCIONES ADECUADAMENTE PARA QUE NO
TENGAS PROBLEMAS AL MOMENTO DE ABRIR LA PÁGINA.
Iniciando el PROCURA
programa CONSERVAR LOS
Cabecera del ESPACIOS Y LS
página
SANGRÍAS, ESTO
Título de la
página CON LA FINALIDAD
DE QUE PUEDAS
Cuerpo del
OBSERVAR DONDE
Programa PODRÍA EXISTIR
POSIBLES ERRORES
Y SEA MAS FÁCIL
Fin del
programa
CORREGIRLOS
3. AHORA DEBERÁS DE CREAR UNA CARPETA EN MIS DOCUMENTOS
LLAMADA PRACHTML PARA GUARDAR NUESTRO ARCHIVO
1. Abrir Mis
documentos
2. En el área de trabajo
apretar Botón del mouse, 3. Nombrar la
nueva, carpeta carpeta como
PracHTML
PARA GUARDAR:
1. REGRESAR A TU DOCUMENTO DENTRO
DEL BLOC DE NOTAS DAR CLIC EN EL
MENÚ ARCHIVO
2. LUEGO EN GUARDAR
3. DOCUMENTOS DENTRO DE LA CARPETA
PRACHTML
4. GUARDAR EL ARCHIVO CON EL NOMBRE
DE :
[Link]
APRETAMOS EL BOTÓN DE
GUARDAR
PODEMOS OBSERVAR QUE YA APARECE EL NOMBRE CON EL CUAL HEMOS
GUARDADO EL ARCHIVO
VERIFICA QUE EL
TEXTO ESCRITO NO
TIENE ERRORES
AHORA YA PODEMOS
ABRIR NUESTRA
PÁGINA Y VERIFICAR
NUESTROS
RESULTADOS
ES HORA DE VISUALIZAR NUESTRA
PÁGINA:
OBSERVEMOS QUE EL
ÍCONO DEL ARCHIVO
1. ABRE LA CARPETA
PRACHTML
2. AHORA ABRE EL ARCHIVO
CUYO NOMBRE ES
[Link]
3. SE ABRIRA UNA
PAGINA DE INTERNET,
SIEMPRE Y CUANDO LAS
INSTRUCCIONES ESTEN
BIEN ESCRITAS.
ASI QUEDA TU AQUÍ ESTA EL
PÁGINA: TEXTO QUE VA
ADENTRO DE LA
ETIQUETA <TITLE>
OBSERVEMOS
QUE EL TEXTO ES
LO QUE SE
ENCUENTRA
DENTRO DE LA
ETIQUETA <BODY>
PROFESORA: ALMA GLORIA SANABRIA ROJAS
AHORA VAMOS CON EL SEGUNDO
EJEMPLO:
• Abre una
nueva hoja
del bloc de
notas
• Inserta el
siguiente
código tal y
como
aparece en
la imagen
Procura no tener errores al momento de
transcribirlo
VAMOS A REALIZAR EL MISMO
PROCEDIMIENTO QUE CON LA
PRÁCTICA ANTERIOR DEL BLOC
DE NOTAS
1. GUARDAR CON EL NOMBRE DE
[Link] DENTRO DE LA
CARPETA PRACHTML
2. POSTERIORMENTE ABRIMOS
LA CARPETA Y LO BUSCAMOS
POR EL NOMBRE
OBSERVEMOS QUE APARECE
EL ARCHIVO
ANTERIORMENTE CREADO
QUE ES [Link]
PROFESORA: ALMA GLORIA SANABRIA ROJAS
ASI
QUEDA
PROFESORA: ALMA GLORIA SANABRIA ROJAS
REALIZA LOS
SIGUIENTES PASOS:
VAMOS A TRABAJAR CON EL ÚLTIMO
EJEMPLO 1. ABRE UNA NUEVA
HOJA DEL BLOC
DE NOTAS
2. TRANSCRIBE EL
TEXTO DE LA
IMAGEN DE LA
MISMA FORMA
3. GUARDA LA EL
DOCUMENTO
DENTRO DE LA
CARPETA
PRACHTML CON
EL NOMBRE DE
[Link]
ASI
QUEDA
RECUERDA
QUE TIENES
QUE ABRIR LA
CARPETA:
PRACHTML
Y BUSCAR EL
ARCHIVO CON
EL NOMBRE
[Link]
PARA QUE
SALGA ESTA
VENTANA
ACTIVIDADES
1. CREA UNA PÁGINA EN DONDE ESCRIBAS TU NOMBRE COMPLETO, TU EDAD, TU
ESTADO CIVIL Y QUE CARRERA PIENSAS ESTUDIAR EN LA UNIVERSIDAD.
2. CREA LA PÁGINA QUE SE MUESTRA A CONTINUACIÓN
4. CREA LA PÁGINA COMO SE MUESTRA EN LA SIGUIENTE
IMAGEN
ACTIVIDADES
1. Realiza el apuntes correspondientes.
2. Los ejemplos se tienen que escribir en el cuaderno y
dibujar la página que parece al momento de correr el
programa.
3. Completa el recuadro de la diapositiva 6 con las nuevas
instrucciones que se proporcionan en los ejemplos
anteriores.
4. Enlista las instrucciones que te permiten :
a) Crear una tabla
b) Inserta una imagen
c) Cambiar el color a la letra
d) Cambiar el tamaño a la letra
c) Colocar color a la página
5. Realiza un ejemplo de cada una de las instrucciones del
punto 4
CUANDO ALCANZAS LOS OBJETIVOS LLEGAS
COMO TRIUNFADOR A LA META ESTABLECIDA,
SIGUE ADELANTE, ERES EL MEJOR !!!
PROFESORA: ALMA GLORIA