SlideShare uma empresa Scribd logo
1 de 15
Diseño de páginas Web
SESIÓN 01
HTML (HyperText Markup Language)
Contenido
 Páginas Web
 El lenguaje HTML
 Estructura de un documento HTML
 Enlaces
 Imágenes
 Colores
¿Qué es una página Web?
 Fichero de (hiper)texto
 Indica al navegador qué y cómo presentar la
información
 Texto
 Colores, imágenes, ...
 Enlaces
 Codificado en lenguaje HTML
¿ Qué es un sitio web ?
 Colección de páginas web dotadas de una dirección web única
¿ Qué es un página web ?
Es un documento creado en lenguaje HTML y almacenado en
un lugar Web, denominado servidor, listo para ser visto por un
navegador
¿ Qué es una dirección web ?
 La dirección web es el "nombre" con el que se identifica
una página en internet  http://www.google.com
¿Qué es una página Web?
¿ Qué es un navegador ?
Un navegador web (del inglés, web browser) es un programa
que permite visualizar en nuestro ordenador la información que
contiene una página web
Opera
Google Crome
Netscape
Firefox Internet Explorer
¿Qué es una página Web?
¿ Cómo funciona la web ?
¿Qué es una página Web?
¿ Qué es una dirección IP ?
La dirección IP de un ordenador es la identificación única que
ese ordenador tiene en Internet. Esta compuesta de cuatro
números separados por puntos 192.168.2.1
¿ Qué significan las siglas DNS ?
Sistema de Nombres de Dominio. Servicio que traduce los
nombres de las páginas Web, en la dirección IP del ordenador
donde se encuentra ubicada o alojada.
¿Qué es una página Web?
¿ Qué un servidor DNS ?
 Es un ordenador
especial dentro de
internet que traduce
los nombres de
páginas web en
direcciones IP
¿Qué es una página Web?
El lenguaje HTML
 Etiquetas
<center> Inicio de etiqueta
................Elementos a los que afecta
</center> Cierre de etiqueta
 Atributos
<table border="0" width="80%" ...>
.............
</table>
El lenguaje HTML
HTML (HyperText Markup Language) es un lenguaje muy
sencillo que permite describir hipertexto, es decir, texto
presentado de forma estructurada y agradable, con enlaces
(hyperlinks) que conducen a otros documentos o fuentes de
información relacionadas, y con inserciones multimedia
(gráficos, sonido...).
Cada página web de un sitio web se corresponde con un
archivo cuya extensión es .htm o .html
El lenguaje HTML
Para programar una página web en html, basta con utilizar
cualquier editor de textos, como por ejemplo el Bloc de Notas de
Windows.
El lenguaje html, como cualquier lenguaje de programación,
consta de una serie de órdenes o instrucciones denominadastags.
Cada instrucción del lenguaje tiene una sintaxis y una función
determinada.
 Todos las instrucciones del lenguaje html se encierran entre los
signos < y >, es decir, <instrucción>.
El lenguaje HTML
Estructura básica de un documento HTML
Un documento HTML comienza con la etiqueta <html>, y
termina con </html>. Dentro del documento (entre las etiquetas
de principio y fin de html), hay dos zonas bien diferenciadas: el
encabezamiento, delimitado por <head> y </head>, que sirve
para definir diversos valores válidos en todo el documento; y el
cuerpo, delimitado por <body> y </body>, donde reside la
información del documento.
Estructura de un documento
HTML
Estructura de un documento
HTML
Enlaces, ...
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<BODY>
Texto del documento, Gráficos,
</BODY>
</HTML>
 En resumen, la estructura básica de un documento HTML
queda de la forma siguiente:
<HTML>
Mi primera página web
<HTML>
<HEAD>
<TITLE>Mi primera pagina web </TITLE>
</HEAD>
<BODY>
<H1><CENTER>Mi Primera pagina
web</CENTER> </H1>
<HR>
<P>Esto tan sencillo es una página web.</P>
</BODY>
</HTML>
Estructura de un documento
HTML
Tags para dar formato al texto
<Hn>…</Hn>  Se utiliza para poner encabezados o títulos, según el
tamaño que queramos en orden decreciente del 1 al 6.
 <BR>  Se utiliza para dejar una línea en blanco.
 <B>…</B>  El texto escrito aparecerá en negrita.
 <I>…</I>  El texto escrito aparecerá en cursiva.
 <U>…</U>  El texto escrito aparecerá en subrayado.
<CENTER>…</CENTER>  El texto escrito aparecerá centrado
horizontalmente en la página.
 <HR>  Muestra una línea horizontal de separación.
Estructura de un documento
HTML

Mais conteúdo relacionado

Mais procurados

Arboles mate discreta
Arboles mate discretaArboles mate discreta
Arboles mate discretaJunior Soto
 
Manual de reparación y soporte técnico de PC y redes informáticas
Manual de reparación y soporte técnico de PC y redes informáticas	Manual de reparación y soporte técnico de PC y redes informáticas
Manual de reparación y soporte técnico de PC y redes informáticas Conectarnos Soluciones de Internet
 
Plan de mantenimiento preventivo de Software y Hardware
Plan de mantenimiento preventivo de Software y HardwarePlan de mantenimiento preventivo de Software y Hardware
Plan de mantenimiento preventivo de Software y Hardwaremanuelggonzalesmacha
 
Tipos de datos en programacion
Tipos de datos en programacionTipos de datos en programacion
Tipos de datos en programacionAlfonso
 
NES-CABA: Tecnologías de la Información (3º y 4º año)
NES-CABA: Tecnologías de la Información (3º y 4º año)NES-CABA: Tecnologías de la Información (3º y 4º año)
NES-CABA: Tecnologías de la Información (3º y 4º año)Gustavo Damián Cucuzza
 
Flujos y archivo en java
Flujos y archivo en javaFlujos y archivo en java
Flujos y archivo en javaBelen Gonzalez
 
Plan Curricular Anual de Informatica Para 1 Bachillerato
Plan Curricular Anual de Informatica Para 1 BachilleratoPlan Curricular Anual de Informatica Para 1 Bachillerato
Plan Curricular Anual de Informatica Para 1 BachilleratoFerh Zambrano
 
Ventajas y desventajas de visual studio
Ventajas  y desventajas de visual studioVentajas  y desventajas de visual studio
Ventajas y desventajas de visual studioruthmayhuavale
 
Sesión 4. mantenimiento preventivo y correctivo
Sesión 4. mantenimiento preventivo y correctivoSesión 4. mantenimiento preventivo y correctivo
Sesión 4. mantenimiento preventivo y correctivoSergio Martinez
 
Dfd ejercicios 2017__01
Dfd ejercicios 2017__01Dfd ejercicios 2017__01
Dfd ejercicios 2017__01Don Augusto
 
Consulta - Programación Lineal y Programacion Orientada A Objetos
Consulta - Programación Lineal y Programacion Orientada A ObjetosConsulta - Programación Lineal y Programacion Orientada A Objetos
Consulta - Programación Lineal y Programacion Orientada A ObjetosLuis Caiza
 
Arreglos vectores pseint
Arreglos vectores pseintArreglos vectores pseint
Arreglos vectores pseintHEIVER CUESTA
 
Objetivos basicos a la informatica
Objetivos basicos a la informaticaObjetivos basicos a la informatica
Objetivos basicos a la informaticaEddy Miranda
 
Pasos necesarios para crear pseudocódigo y un algoritmo
Pasos necesarios para crear pseudocódigo y un algoritmoPasos necesarios para crear pseudocódigo y un algoritmo
Pasos necesarios para crear pseudocódigo y un algoritmojairofr97
 
Unidad 4 Técnicas para la formulación de algoritmos
Unidad 4 Técnicas para la formulación de algoritmosUnidad 4 Técnicas para la formulación de algoritmos
Unidad 4 Técnicas para la formulación de algoritmosCarlos M. Sandoval
 
Destrezas aplicadas en la informàtica
Destrezas aplicadas en la informàticaDestrezas aplicadas en la informàtica
Destrezas aplicadas en la informàticagermaniabetty
 
Rúbrica para evaluar los ejercicios de programacion
Rúbrica para evaluar los ejercicios de programacionRúbrica para evaluar los ejercicios de programacion
Rúbrica para evaluar los ejercicios de programacionAna Arribas
 
Ejercicios Whule y Do While
Ejercicios Whule y Do WhileEjercicios Whule y Do While
Ejercicios Whule y Do WhileJoshe Varillas
 

Mais procurados (20)

Arboles mate discreta
Arboles mate discretaArboles mate discreta
Arboles mate discreta
 
Manual de reparación y soporte técnico de PC y redes informáticas
Manual de reparación y soporte técnico de PC y redes informáticas	Manual de reparación y soporte técnico de PC y redes informáticas
Manual de reparación y soporte técnico de PC y redes informáticas
 
Plan de mantenimiento preventivo de Software y Hardware
Plan de mantenimiento preventivo de Software y HardwarePlan de mantenimiento preventivo de Software y Hardware
Plan de mantenimiento preventivo de Software y Hardware
 
Tipos de datos en programacion
Tipos de datos en programacionTipos de datos en programacion
Tipos de datos en programacion
 
NES-CABA: Tecnologías de la Información (3º y 4º año)
NES-CABA: Tecnologías de la Información (3º y 4º año)NES-CABA: Tecnologías de la Información (3º y 4º año)
NES-CABA: Tecnologías de la Información (3º y 4º año)
 
Flujos y archivo en java
Flujos y archivo en javaFlujos y archivo en java
Flujos y archivo en java
 
Plan Curricular Anual de Informatica Para 1 Bachillerato
Plan Curricular Anual de Informatica Para 1 BachilleratoPlan Curricular Anual de Informatica Para 1 Bachillerato
Plan Curricular Anual de Informatica Para 1 Bachillerato
 
Ventajas y desventajas de visual studio
Ventajas  y desventajas de visual studioVentajas  y desventajas de visual studio
Ventajas y desventajas de visual studio
 
Sesión 4. mantenimiento preventivo y correctivo
Sesión 4. mantenimiento preventivo y correctivoSesión 4. mantenimiento preventivo y correctivo
Sesión 4. mantenimiento preventivo y correctivo
 
Centro de Computo
Centro de ComputoCentro de Computo
Centro de Computo
 
Dfd ejercicios 2017__01
Dfd ejercicios 2017__01Dfd ejercicios 2017__01
Dfd ejercicios 2017__01
 
Consulta - Programación Lineal y Programacion Orientada A Objetos
Consulta - Programación Lineal y Programacion Orientada A ObjetosConsulta - Programación Lineal y Programacion Orientada A Objetos
Consulta - Programación Lineal y Programacion Orientada A Objetos
 
Arreglos vectores pseint
Arreglos vectores pseintArreglos vectores pseint
Arreglos vectores pseint
 
Objetivos basicos a la informatica
Objetivos basicos a la informaticaObjetivos basicos a la informatica
Objetivos basicos a la informatica
 
Pasos necesarios para crear pseudocódigo y un algoritmo
Pasos necesarios para crear pseudocódigo y un algoritmoPasos necesarios para crear pseudocódigo y un algoritmo
Pasos necesarios para crear pseudocódigo y un algoritmo
 
Unidad 4 Técnicas para la formulación de algoritmos
Unidad 4 Técnicas para la formulación de algoritmosUnidad 4 Técnicas para la formulación de algoritmos
Unidad 4 Técnicas para la formulación de algoritmos
 
Destrezas aplicadas en la informàtica
Destrezas aplicadas en la informàticaDestrezas aplicadas en la informàtica
Destrezas aplicadas en la informàtica
 
Rúbrica para evaluar los ejercicios de programacion
Rúbrica para evaluar los ejercicios de programacionRúbrica para evaluar los ejercicios de programacion
Rúbrica para evaluar los ejercicios de programacion
 
Ejercicios Whule y Do While
Ejercicios Whule y Do WhileEjercicios Whule y Do While
Ejercicios Whule y Do While
 
Sistema de archivos HPFS
Sistema de archivos HPFSSistema de archivos HPFS
Sistema de archivos HPFS
 

Semelhante a Diseño de Páginas Web - HTML (20)

Diseño de Paginas WEB.ppt
Diseño de Paginas WEB.pptDiseño de Paginas WEB.ppt
Diseño de Paginas WEB.ppt
 
Diseño de Paginas WEB (1).ppt
Diseño de Paginas WEB (1).pptDiseño de Paginas WEB (1).ppt
Diseño de Paginas WEB (1).ppt
 
Diseño de Paginas.ppt
Diseño de Paginas.pptDiseño de Paginas.ppt
Diseño de Paginas.ppt
 
Diseño de Paginas WEB.ppt dossier web 1234
Diseño de Paginas WEB.ppt dossier web 1234Diseño de Paginas WEB.ppt dossier web 1234
Diseño de Paginas WEB.ppt dossier web 1234
 
Diseño de Paginas WEB.ppt
Diseño de Paginas WEB.pptDiseño de Paginas WEB.ppt
Diseño de Paginas WEB.ppt
 
Diseño de Paginas WEB.ppt
Diseño de Paginas WEB.pptDiseño de Paginas WEB.ppt
Diseño de Paginas WEB.ppt
 
Diseño de Paginas WEB ACTUAL (1).ppt
Diseño de Paginas WEB ACTUAL (1).pptDiseño de Paginas WEB ACTUAL (1).ppt
Diseño de Paginas WEB ACTUAL (1).ppt
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
 
SUBMODULO 3 modulo 2.pptx
SUBMODULO 3 modulo 2.pptxSUBMODULO 3 modulo 2.pptx
SUBMODULO 3 modulo 2.pptx
 
Tarea
TareaTarea
Tarea
 
Diseño WEB 1.pptx
Diseño WEB 1.pptxDiseño WEB 1.pptx
Diseño WEB 1.pptx
 
Codigo HTML.docx
Codigo HTML.docxCodigo HTML.docx
Codigo HTML.docx
 
QUE SON CODIGOS HTML.docx
QUE SON CODIGOS HTML.docxQUE SON CODIGOS HTML.docx
QUE SON CODIGOS HTML.docx
 
Tarea
TareaTarea
Tarea
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Guia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia webGuia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia web
 
Clase 1
Clase 1Clase 1
Clase 1
 
Narrativa pagina-web-welinton-burgos
Narrativa pagina-web-welinton-burgosNarrativa pagina-web-welinton-burgos
Narrativa pagina-web-welinton-burgos
 

Último

PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...jlorentemartos
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIAFabiolaGarcia751855
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxNadiaMartnez11
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.JonathanCovena1
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfpatriciaines1993
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptNancyMoreiraMora1
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxFernando Solis
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCCarlosEduardoSosa2
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOPsicoterapia Holística
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxroberthirigoinvasque
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfapunteshistoriamarmo
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalJonathanCovena1
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOluismii249
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxpvtablets2023
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024IES Vicent Andres Estelles
 

Último (20)

PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 

Diseño de Páginas Web - HTML

  • 1. Diseño de páginas Web SESIÓN 01 HTML (HyperText Markup Language)
  • 2. Contenido  Páginas Web  El lenguaje HTML  Estructura de un documento HTML  Enlaces  Imágenes  Colores
  • 3. ¿Qué es una página Web?  Fichero de (hiper)texto  Indica al navegador qué y cómo presentar la información  Texto  Colores, imágenes, ...  Enlaces  Codificado en lenguaje HTML
  • 4. ¿ Qué es un sitio web ?  Colección de páginas web dotadas de una dirección web única ¿ Qué es un página web ? Es un documento creado en lenguaje HTML y almacenado en un lugar Web, denominado servidor, listo para ser visto por un navegador ¿ Qué es una dirección web ?  La dirección web es el "nombre" con el que se identifica una página en internet  http://www.google.com ¿Qué es una página Web?
  • 5. ¿ Qué es un navegador ? Un navegador web (del inglés, web browser) es un programa que permite visualizar en nuestro ordenador la información que contiene una página web Opera Google Crome Netscape Firefox Internet Explorer ¿Qué es una página Web?
  • 6. ¿ Cómo funciona la web ? ¿Qué es una página Web?
  • 7. ¿ Qué es una dirección IP ? La dirección IP de un ordenador es la identificación única que ese ordenador tiene en Internet. Esta compuesta de cuatro números separados por puntos 192.168.2.1 ¿ Qué significan las siglas DNS ? Sistema de Nombres de Dominio. Servicio que traduce los nombres de las páginas Web, en la dirección IP del ordenador donde se encuentra ubicada o alojada. ¿Qué es una página Web?
  • 8. ¿ Qué un servidor DNS ?  Es un ordenador especial dentro de internet que traduce los nombres de páginas web en direcciones IP ¿Qué es una página Web?
  • 9. El lenguaje HTML  Etiquetas <center> Inicio de etiqueta ................Elementos a los que afecta </center> Cierre de etiqueta  Atributos <table border="0" width="80%" ...> ............. </table>
  • 10. El lenguaje HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...). Cada página web de un sitio web se corresponde con un archivo cuya extensión es .htm o .html El lenguaje HTML
  • 11. Para programar una página web en html, basta con utilizar cualquier editor de textos, como por ejemplo el Bloc de Notas de Windows. El lenguaje html, como cualquier lenguaje de programación, consta de una serie de órdenes o instrucciones denominadastags. Cada instrucción del lenguaje tiene una sintaxis y una función determinada.  Todos las instrucciones del lenguaje html se encierran entre los signos < y >, es decir, <instrucción>. El lenguaje HTML
  • 12. Estructura básica de un documento HTML Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la información del documento. Estructura de un documento HTML
  • 13. Estructura de un documento HTML Enlaces, ... <HEAD> <TITLE>Título</TITLE> </HEAD> <BODY> Texto del documento, Gráficos, </BODY> </HTML>  En resumen, la estructura básica de un documento HTML queda de la forma siguiente: <HTML>
  • 14. Mi primera página web <HTML> <HEAD> <TITLE>Mi primera pagina web </TITLE> </HEAD> <BODY> <H1><CENTER>Mi Primera pagina web</CENTER> </H1> <HR> <P>Esto tan sencillo es una página web.</P> </BODY> </HTML> Estructura de un documento HTML
  • 15. Tags para dar formato al texto <Hn>…</Hn>  Se utiliza para poner encabezados o títulos, según el tamaño que queramos en orden decreciente del 1 al 6.  <BR>  Se utiliza para dejar una línea en blanco.  <B>…</B>  El texto escrito aparecerá en negrita.  <I>…</I>  El texto escrito aparecerá en cursiva.  <U>…</U>  El texto escrito aparecerá en subrayado. <CENTER>…</CENTER>  El texto escrito aparecerá centrado horizontalmente en la página.  <HR>  Muestra una línea horizontal de separación. Estructura de un documento HTML