SlideShare una empresa de Scribd logo
1 de 12
DISEÑO DE APLICACIONES EN HTML 5
HTML5
MARLON RAMIREZ (ZHIONIT)
QUE ES HTML?
HTML, siglas de hypertext markup language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de
marcado para la elaboración de páginas web.
DOCTYPE: Define el tipo de documento.
Este elemento, le indica al navegador la versión
y tipo de HTML empleado en el documento.
Elemento html: Delimita el documento HTML,
indicando al navegador el comienzo y fin de la
página html.
-Elemento head: head viene del ingles cabeza y
su función es delimitar cabecera del
documento.
La cabecera es la sección apropiada para incluir
información sobre el documento, la mayoría de
la cual no será mostrada a los lectores.
Elemento title: Indica el título del documento.
En general, los navegadores modernos lo
muestran en la barra de título de la ventana.
Elemento body: Delimita el cuerpo del
documento.
Aquí van todos los contenidos de la página
(texto, imágenes...)
Texto con h1
h1 es una etiqueta que sirve para colocar la frase que indica el
título del contenido de una página web.
Texto con h2
La etiqueta H2 es un elemento que indica títulos de
importancia para subsecciones del documento web actual.
Texto con h3
Las etiquetas H3 en adelante nos permiten definir títulos de subapartados
de un bloque encabezado con un H2.
Texto con h4
ETIQUETAS DE
ENCABEZADO
La etiqueta de
encabezado H1 y sus
hermanas pequeñas son
una de las
herramientas más
potentes con las que
contamos a nivel de
SEO
SEARCH ENGINE
OPTIMIZATION
HTML ofrece a los autores varios mecanismos para especificar listas de
información. todas las listas deben contener uno o más objetos de lista. las
listas pueden contener:
LISTAS
Información no
ordenada <UL>
Información
ordenada <OL>
Definiciones –
Objetos de lista <LI>
<UL>
<LI>Información no ordenada. </LI>
<LI>Información ordenada.</LI>
<LI>Definiciones.</LI>
</UL>
<ol>
<li>Mezcle los ingredientes secos
íntimamente.</li>
<li>Vierta los ingredientes
líquidos.</li>
<li>Remueva durante 10
minutos.</li>
<li>Hornee durante una hora a
300 grados.</li>
</ol>
QUE ES UNA URL?
▪ URL
▪ Uniform Resource Locator
▪ localizador uniforme de recurso
Se refiere a la dirección única
que identifica a una página web
en Internet.
ENLACES EN HTML
▪ <a href="destino">contenido</a> Sintaxis general
▪ Href (Hypertext Reference)
▪ Enlaces internos: Los que se dirigen a otras partes dentro de la misma página.
▪ Enlaces locales: Los que se dirigen a otras páginas del mismo sitio web.
▪ Enlaces remotos: Los dirigidos hacia páginas de otros sitios web.
▪ Enlaces con direcciones de correo: Para crear un mensaje de correo dirigido a una dirección.
▪ Enlaces con archivos: Para que los usuarios puedan hacer download de ficheros.
INSERTAR IMAGENES
▪ <IMG SRC="immagine.gif"> Sintaxis general
▪ SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen
▪ ALT El uso de texto para comentar las imágenes es una regla fundamental
▪ WIDTH es la dimensión horizontal (ancho) de la imagen expresada en píxel,
▪ HEIGHT la dimensión vertical (alto).
▪ BORDER podemos aplicar un borde a la imagen.
▪ HSPACE Distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes,
apliques, etc.).
▪ VSPACE Distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes,
apliques, etc.).
▪ <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">
• <TABLE> genera la tabla, mientras que <TD>
sirve para definir los campos presentes dentro
de esta tabla.
• <TR> que es una especie de "salto" de fila dentro
de la tabla.
TABLAS
Gracias
Marlon Ramirez (Zhionit)

Más contenido relacionado

La actualidad más candente (18)

PAGINA WEB 1
PAGINA WEB 1PAGINA WEB 1
PAGINA WEB 1
 
Diseño de Páginas Web - HTML
Diseño de Páginas Web - HTMLDiseño de Páginas Web - HTML
Diseño de Páginas Web - HTML
 
Pagina web i
Pagina web iPagina web i
Pagina web i
 
html
html html
html
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
Paginas web en html
Paginas web en htmlPaginas web en html
Paginas web en html
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
Curso basico de html
Curso basico de         htmlCurso basico de         html
Curso basico de html
 
Ac programacion
Ac programacionAc programacion
Ac programacion
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Leccion VI
Leccion VILeccion VI
Leccion VI
 
Html 5
Html 5Html 5
Html 5
 
Sitio Web / Introducción a HTML
Sitio Web / Introducción a HTMLSitio Web / Introducción a HTML
Sitio Web / Introducción a HTML
 
html
htmlhtml
html
 
Pagina web1vb
Pagina web1vb   Pagina web1vb
Pagina web1vb
 
Helen Valverde 2C3
Helen Valverde 2C3Helen Valverde 2C3
Helen Valverde 2C3
 
Html unidad 2
Html unidad 2Html unidad 2
Html unidad 2
 
Diferencia entre html y xml
Diferencia entre html y xmlDiferencia entre html y xml
Diferencia entre html y xml
 

Similar a Fundamentos de 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
 
Tarea
TareaTarea
Tarea
 
Actividad #2
Actividad #2Actividad #2
Actividad #2
 
Consulta
ConsultaConsulta
Consulta
 
Html tarea
Html tareaHtml tarea
Html tarea
 
Tarea
TareaTarea
Tarea
 
Introdución al html
Introdución al htmlIntrodución al html
Introdución al html
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Ddsw s1 ref
Ddsw s1 refDdsw s1 ref
Ddsw s1 ref
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Programación Avanzada
Programación AvanzadaProgramación Avanzada
Programación Avanzada
 
Colegionacionalnicolasesguerra.docx
Colegionacionalnicolasesguerra.docxColegionacionalnicolasesguerra.docx
Colegionacionalnicolasesguerra.docx
 
Html
HtmlHtml
Html
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Consulta.docx
Consulta.docxConsulta.docx
Consulta.docx
 

Último

EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.DaluiMonasterio
 
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleJonathanCovena1
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para eventoDiegoMtsS
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIACarlos Campaña Montenegro
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptxJunkotantik
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docxAleParedes11
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 

Último (20)

EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.
 
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo Sostenible
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para evento
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
 
Repaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia GeneralRepaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia General
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptx
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 

Fundamentos de html

  • 1. DISEÑO DE APLICACIONES EN HTML 5 HTML5 MARLON RAMIREZ (ZHIONIT)
  • 2. QUE ES HTML? HTML, siglas de hypertext markup language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web.
  • 3.
  • 4. DOCTYPE: Define el tipo de documento. Este elemento, le indica al navegador la versión y tipo de HTML empleado en el documento. Elemento html: Delimita el documento HTML, indicando al navegador el comienzo y fin de la página html. -Elemento head: head viene del ingles cabeza y su función es delimitar cabecera del documento. La cabecera es la sección apropiada para incluir información sobre el documento, la mayoría de la cual no será mostrada a los lectores. Elemento title: Indica el título del documento. En general, los navegadores modernos lo muestran en la barra de título de la ventana. Elemento body: Delimita el cuerpo del documento. Aquí van todos los contenidos de la página (texto, imágenes...)
  • 5. Texto con h1 h1 es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web. Texto con h2 La etiqueta H2 es un elemento que indica títulos de importancia para subsecciones del documento web actual. Texto con h3 Las etiquetas H3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un H2. Texto con h4 ETIQUETAS DE ENCABEZADO La etiqueta de encabezado H1 y sus hermanas pequeñas son una de las herramientas más potentes con las que contamos a nivel de SEO SEARCH ENGINE OPTIMIZATION
  • 6. HTML ofrece a los autores varios mecanismos para especificar listas de información. todas las listas deben contener uno o más objetos de lista. las listas pueden contener: LISTAS Información no ordenada <UL> Información ordenada <OL> Definiciones – Objetos de lista <LI> <UL> <LI>Información no ordenada. </LI> <LI>Información ordenada.</LI> <LI>Definiciones.</LI> </UL> <ol> <li>Mezcle los ingredientes secos íntimamente.</li> <li>Vierta los ingredientes líquidos.</li> <li>Remueva durante 10 minutos.</li> <li>Hornee durante una hora a 300 grados.</li> </ol>
  • 7.
  • 8. QUE ES UNA URL? ▪ URL ▪ Uniform Resource Locator ▪ localizador uniforme de recurso Se refiere a la dirección única que identifica a una página web en Internet.
  • 9. ENLACES EN HTML ▪ <a href="destino">contenido</a> Sintaxis general ▪ Href (Hypertext Reference) ▪ Enlaces internos: Los que se dirigen a otras partes dentro de la misma página. ▪ Enlaces locales: Los que se dirigen a otras páginas del mismo sitio web. ▪ Enlaces remotos: Los dirigidos hacia páginas de otros sitios web. ▪ Enlaces con direcciones de correo: Para crear un mensaje de correo dirigido a una dirección. ▪ Enlaces con archivos: Para que los usuarios puedan hacer download de ficheros.
  • 10. INSERTAR IMAGENES ▪ <IMG SRC="immagine.gif"> Sintaxis general ▪ SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen ▪ ALT El uso de texto para comentar las imágenes es una regla fundamental ▪ WIDTH es la dimensión horizontal (ancho) de la imagen expresada en píxel, ▪ HEIGHT la dimensión vertical (alto). ▪ BORDER podemos aplicar un borde a la imagen. ▪ HSPACE Distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). ▪ VSPACE Distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). ▪ <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">
  • 11. • <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla. • <TR> que es una especie de "salto" de fila dentro de la tabla. TABLAS