SlideShare una empresa de Scribd logo
1 de 26
 
En  Español se traducen (HTML):  LENGUAJE DE MARCACION DE HIPERTEXTO.  Fue creado en 1989 por el físico nuclear TIM BERNERS-LEE el cual propuso diseñar un sistema de unificación del acceso a todos los datos que poseía el Centro Europeo para la Investigación Nuclear.(CERN)
Se comenzó así a desarrollar una plataforma de tipo  hipertexto  y un protocolo de comunicaciones que se denominó:  HTTP (Hyper Text Transfer Protocol)  que permitiría a todos los científicos del CERN, consultar cualquier información de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN.
Se comenzó así a desarrollar una plataforma de tipo  hipertexto  y un protocolo de comunicaciones que se denominó:  HTTP (Hyper Text Transfer Protocol)  que permitiría a todos los científicos del CERN, consultar cualquier información de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN.  El sistema alcanzó un éxito enorme, tanto es así que se comenzó a definir un lenguaje de creación de documentos estructurados que vino a llamarse HTML (Hyper Text Markup Language)
¿ QUÉ ES HTML ?  HTML (HyperText Markup Language)  es un  lenguaje de programación  muy sencillo que  permite describir hipertexto  ( idea deTed Nelson ),  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...)
¿ QUÉ ES HTML ?  HTML (HyperText Markup Language)  La descripción se basa en especificar en el texto la estructura lógica del contenido  (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc)  así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa interprete especializado (como explorer o Netscape).
¿ QUÉ ES HTML ?  HTML (HyperText Markup Language)  Los documentos HTML son ficheros de texto (ASCII) que se pueden crear con cualquier editor de texto (notepad, vi, emacs, ...)  También hay disponibles editores HTML (wysiwyg)[ what you see is what you get],  como Hotmetal, Adobe Pagemill, MS Frontpage, Dreamweaver, etc …
ARQUITECTURA HTML  •  Un documento está formado por elementos:  - Títulos, párrafos, listas, tablas, ...  •  Para delimitar los elementos se utilizan etiquetas:
ARQUITECTURA HTML  •  Un documento está formado por elementos:  - Títulos, párrafos, listas, tablas, ...  •  Para delimitar los elementos se utilizan etiquetas :  ABRE ETIQUETA  <nombre-etiqueta>  elemento  CIERRA ETIQUETA  </nombre-etiqueta>  Ejemplo:  <TITLE>Un título</TITLE>  NOTA:  ESTAS ETIQUETAS TIENEN DIFERENTES ATRIBUTOS PERSONALIZADOS PARA CADA UNA DE ELLAS
ARQUITECTURA HTML / ESTRUCTURA BÁSICA  COMPAREMOSLO CON UN CUERPO HUMANO
ARQUITECTURA HTML / ESTRUCTURA BÁSICA  <HTML> </HTML>
ARQUITECTURA HTML / ESTRUCTURA BÁSICA  <HTML>  DEFINE EL COMIENZO Y EL FIN DEL DOCUMENTO  </HTML>
ARQUITECTURA HTML / ESTRUCTURA BÁSICA  <HTML>  <HEAD>  </HEAD>  </HTML>
ARQUITECTURA HTML / ESTRUCTURA BÁSICA  <HTML>  <HEAD>  <TITLE> </TITLE>  </HEAD>  DEFINE LA CABEZERA DEL DOCUMENTO, COMO TE LLAMAS ( TITULO), ELEMENTOS INVISIBLES, FUNCIONES EN OTROS  LENGUAJES. ( java script), ETC…  </HTML>
ARQUITECTURA HTML / ESTRUCTURA BÁSICA  <HTML>  <HEAD>  <TITLE> </TITLE>  </HEAD> <BODY>  DEFINE EL CUERPO DEL  DOCUMENTO. EN SU INTERIOR SE ENCONTRARÁN TODAS LAS ETIQUETAS ( ANIDADAS) Y CONTENIDOS NECESARIOS QUE FORMEN NUESTRA PÁGINA  </BODY>  </HTML>
ARQUITECTURA HTML / ESTRUCTURA BÁSICA  Mi primera pagina <HTML>  <HEAD>  <TITLE>  JOSE  </TITLE> </HEAD> <BODY>  Mi primera pagina </BODY>  </HTML>  Humano llamado: JOSE  Documento HTML: JOSE
ARQUITECTURA HTML /  DOCUMENTO SIMPLE  <html>  <head>  <TITLE>Un documento simple</TITLE> </head>  <body>  Esto es un texto que no tendrá estilos, ni características de ningún tipo.  </body>  </head> </html>
ARQUITECTURA HTML /  DOCUMENTO SIMPLE  <html>  <head>  <TITLE>Un documento simple</TITLE> </head>  <body>  Esto es un texto que no tendrá estilos, ni características de ningún tipo.  </body>  </html>
ARQUITECTURA HTML /  TITULARES ENCABEZADOS  <H1> Titular  </H1>  <html>  <head><TITLE>Titulares</TITLE></head> <body>  <H1>Titular de primer nivel</H1> <H2>Titular de segundo nivel</H2> <H3>Titular de tercer nivel</H3> <H4>Titular de cuarto nivel</H4> <H5>Titular de quinto nivel</H5> <H6>Titular de sexto nivel</H6>  </body>  </html>
ARQUITECTURA HTML /  TITULARES ENCABEZADOS  <H1> Titular  </H1>  <html>  <head><TITLE>Titulares</TITLE></head> <body>  <H1>Titular de primer nivel</H1>  Titular de primer nivel  <H2>Titular de segundo nivel</H2>  Titular de segundo nivel  <H3>Titular de tercer nivel</H3> <H4>Titular de cuarto nivel</H4>  Titular de tercer nivel  <H5>Titular de quinto nivel</H5>  Titular de cuarto nivel  <H6>Titular de sexto nivel</H6>  </body>  </html>
ARQUITECTURA HTML /  ENLACES ( LINKS)  ENLACE  <A></A>  <A  HREF=“dirección-referencia” > texto del enlace </A>  <A HREF=“http://www.upv.es”>ir a la pagina</A>  ir a la pagina
ARQUITECTURA HTML /  IMÁGENES  INCLUIR UNA IMAGEN  <IMG SRC=NombreImagen>  <IMG SRC=Nombre WIDTH=w HEIGHT=h>  <html><head><TITLE>Imágenes</TITLE></head> <body>  <H1>Este es el escudo de la UPV</H1>  <p>La imagen se comporta <img src=escut.gif width=91 height=89>  como si se tratara de un caracter <p>Podemos hacer un enlace:  <a href=http://www.upv.es><img src=escut.gif width=91 height=89></A>  </body>  </html>
ARQUITECTURA HTML /  TABLAS  TABLA  PARTES PRINCIPALES QUE LAS DEFINE  <TABLE> ... </TABLE>  <TR> ... </TR>  ( FILA)  <TD> ... </TD>  (CELDAS)  •  <TABLE> ... </TABLE>  - Define una tabla, podemos usar el atributo BORDER. • <TR> ... </TR>  - Especifica una fila. Podemos usar: ALIGN (LEFT, CENTER, RIGHT) y/o  VALIGN (TOP, MIDDLE, BOTTOM). • <TD> ... </TD>  - Define una celda.
ARQUITECTURA HTML /  TABLAS  TABLA  PARTES PRINCIPALES QUE LAS DEFINE  <TABLE> ... </TABLE>  <TR> ... </TR>  ( FILA)  <TD> ... </TD>  (CELDAS)  •  <TABLE> ... </TABLE>  - Define una tabla, podemos usar el atributo BORDER. • <TR> ... </TR>  - Especifica una fila. Podemos usar: ALIGN (LEFT, CENTER, RIGHT) y/o  VALIGN (TOP, MIDDLE, BOTTOM). • <TD> ... </TD>  - Define una celda.  SON PARTE IMPORTANTISIMA DE LA PÁGINA YA QUE ORGANIZAN LOS CONTENIDOS ESPACIALMENTE EN LA PANTALLA
ARQUITECTURA HTML /  TABLAS  TABLA  PARTES PRINCIPALES QUE LAS DEFINE  <TABLE> ... </TABLE>  <TR> ... </TR>  ( FILA)  <TD> ... </TD>  (CELDAS)  <html>  <head>  <title>TABLAS</title> </head>  <body>  <table width=&quot;75%&quot; border=&quot;1&quot;> <tr>  <td>CELDA 1</td> <td>CELDA 2</td> </tr>  <tr>  <td>CELDA 3</td> <td>CELDA 4</td> </tr>  </table>  </body>  </html>
ARQUITECTURA HTML /  TABLAS  TABLA  PARTES PRINCIPALES QUE LAS DEFINE  <TABLE> ... </TABLE>  <TR> ... </TR>  ( FILA)  <TD> ... </TD>  (CELDAS)  CELDA 1  CELDA 2  CELDA 3  CELDA 4

Más contenido relacionado

Similar a Mini Manual Html

Similar a Mini Manual Html (20)

Html
HtmlHtml
Html
 
Grupo2
Grupo2Grupo2
Grupo2
 
4 Html
4 Html4 Html
4 Html
 
Html Bas
Html BasHtml Bas
Html Bas
 
3 septimo
3 septimo3 septimo
3 septimo
 
Html5.
Html5.Html5.
Html5.
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
 
HTML
HTMLHTML
HTML
 
Cont clase de lenguaje IV
Cont clase de lenguaje IVCont clase de lenguaje IV
Cont clase de lenguaje IV
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Qué es html
Qué es htmlQué es html
Qué es html
 
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es HtmlC:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
 
Qué es xhtml
Qué es xhtmlQué es xhtml
Qué es xhtml
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Retroalimentación 2011 Lopez, Carlos
Retroalimentación 2011 Lopez, CarlosRetroalimentación 2011 Lopez, Carlos
Retroalimentación 2011 Lopez, Carlos
 
xHTML 1.0 Basics
xHTML 1.0  BasicsxHTML 1.0  Basics
xHTML 1.0 Basics
 
Codigos HTML Continuación
Codigos HTML ContinuaciónCodigos HTML Continuación
Codigos HTML Continuación
 
Qué Es Html
Qué Es HtmlQué Es Html
Qué Es Html
 

Último

Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nóminacuellosameidy
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerenciacubillannoly
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosAlbanyMartinez7
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docxobandopaula444
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfcristianrb0324
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1ivanapaterninar
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y maslida630411
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersIván López Martín
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointValerioIvanDePazLoja
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDAVIDROBERTOGALLEGOS
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxCarolina Bujaico
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaYeimys Ch
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxtjcesar1
 
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024u20211198540
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxhasbleidit
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfFernandoOblitasVivan
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar24roberto21
 

Último (20)

Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nómina
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerencia
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos Juridicos
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdf
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y mas
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 Testcontainers
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power Point
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptx
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptx
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
 
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdf
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar
 

Mini Manual Html

  • 1.  
  • 2. En Español se traducen (HTML): LENGUAJE DE MARCACION DE HIPERTEXTO. Fue creado en 1989 por el físico nuclear TIM BERNERS-LEE el cual propuso diseñar un sistema de unificación del acceso a todos los datos que poseía el Centro Europeo para la Investigación Nuclear.(CERN)
  • 3. Se comenzó así a desarrollar una plataforma de tipo hipertexto y un protocolo de comunicaciones que se denominó: HTTP (Hyper Text Transfer Protocol) que permitiría a todos los científicos del CERN, consultar cualquier información de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN.
  • 4. Se comenzó así a desarrollar una plataforma de tipo hipertexto y un protocolo de comunicaciones que se denominó: HTTP (Hyper Text Transfer Protocol) que permitiría a todos los científicos del CERN, consultar cualquier información de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN. El sistema alcanzó un éxito enorme, tanto es así que se comenzó a definir un lenguaje de creación de documentos estructurados que vino a llamarse HTML (Hyper Text Markup Language)
  • 5. ¿ QUÉ ES HTML ? HTML (HyperText Markup Language) es un lenguaje de programación muy sencillo que permite describir hipertexto ( idea deTed Nelson ), 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...)
  • 6. ¿ QUÉ ES HTML ? HTML (HyperText Markup Language) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa interprete especializado (como explorer o Netscape).
  • 7. ¿ QUÉ ES HTML ? HTML (HyperText Markup Language) Los documentos HTML son ficheros de texto (ASCII) que se pueden crear con cualquier editor de texto (notepad, vi, emacs, ...) También hay disponibles editores HTML (wysiwyg)[ what you see is what you get], como Hotmetal, Adobe Pagemill, MS Frontpage, Dreamweaver, etc …
  • 8. ARQUITECTURA HTML • Un documento está formado por elementos: - Títulos, párrafos, listas, tablas, ... • Para delimitar los elementos se utilizan etiquetas:
  • 9. ARQUITECTURA HTML • Un documento está formado por elementos: - Títulos, párrafos, listas, tablas, ... • Para delimitar los elementos se utilizan etiquetas : ABRE ETIQUETA <nombre-etiqueta> elemento CIERRA ETIQUETA </nombre-etiqueta> Ejemplo: <TITLE>Un título</TITLE> NOTA: ESTAS ETIQUETAS TIENEN DIFERENTES ATRIBUTOS PERSONALIZADOS PARA CADA UNA DE ELLAS
  • 10. ARQUITECTURA HTML / ESTRUCTURA BÁSICA COMPAREMOSLO CON UN CUERPO HUMANO
  • 11. ARQUITECTURA HTML / ESTRUCTURA BÁSICA <HTML> </HTML>
  • 12. ARQUITECTURA HTML / ESTRUCTURA BÁSICA <HTML> DEFINE EL COMIENZO Y EL FIN DEL DOCUMENTO </HTML>
  • 13. ARQUITECTURA HTML / ESTRUCTURA BÁSICA <HTML> <HEAD> </HEAD> </HTML>
  • 14. ARQUITECTURA HTML / ESTRUCTURA BÁSICA <HTML> <HEAD> <TITLE> </TITLE> </HEAD> DEFINE LA CABEZERA DEL DOCUMENTO, COMO TE LLAMAS ( TITULO), ELEMENTOS INVISIBLES, FUNCIONES EN OTROS LENGUAJES. ( java script), ETC… </HTML>
  • 15. ARQUITECTURA HTML / ESTRUCTURA BÁSICA <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> DEFINE EL CUERPO DEL DOCUMENTO. EN SU INTERIOR SE ENCONTRARÁN TODAS LAS ETIQUETAS ( ANIDADAS) Y CONTENIDOS NECESARIOS QUE FORMEN NUESTRA PÁGINA </BODY> </HTML>
  • 16. ARQUITECTURA HTML / ESTRUCTURA BÁSICA Mi primera pagina <HTML> <HEAD> <TITLE> JOSE </TITLE> </HEAD> <BODY> Mi primera pagina </BODY> </HTML> Humano llamado: JOSE Documento HTML: JOSE
  • 17. ARQUITECTURA HTML / DOCUMENTO SIMPLE <html> <head> <TITLE>Un documento simple</TITLE> </head> <body> Esto es un texto que no tendrá estilos, ni características de ningún tipo. </body> </head> </html>
  • 18. ARQUITECTURA HTML / DOCUMENTO SIMPLE <html> <head> <TITLE>Un documento simple</TITLE> </head> <body> Esto es un texto que no tendrá estilos, ni características de ningún tipo. </body> </html>
  • 19. ARQUITECTURA HTML / TITULARES ENCABEZADOS <H1> Titular </H1> <html> <head><TITLE>Titulares</TITLE></head> <body> <H1>Titular de primer nivel</H1> <H2>Titular de segundo nivel</H2> <H3>Titular de tercer nivel</H3> <H4>Titular de cuarto nivel</H4> <H5>Titular de quinto nivel</H5> <H6>Titular de sexto nivel</H6> </body> </html>
  • 20. ARQUITECTURA HTML / TITULARES ENCABEZADOS <H1> Titular </H1> <html> <head><TITLE>Titulares</TITLE></head> <body> <H1>Titular de primer nivel</H1> Titular de primer nivel <H2>Titular de segundo nivel</H2> Titular de segundo nivel <H3>Titular de tercer nivel</H3> <H4>Titular de cuarto nivel</H4> Titular de tercer nivel <H5>Titular de quinto nivel</H5> Titular de cuarto nivel <H6>Titular de sexto nivel</H6> </body> </html>
  • 21. ARQUITECTURA HTML / ENLACES ( LINKS) ENLACE <A></A> <A HREF=“dirección-referencia” > texto del enlace </A> <A HREF=“http://www.upv.es”>ir a la pagina</A> ir a la pagina
  • 22. ARQUITECTURA HTML / IMÁGENES INCLUIR UNA IMAGEN <IMG SRC=NombreImagen> <IMG SRC=Nombre WIDTH=w HEIGHT=h> <html><head><TITLE>Imágenes</TITLE></head> <body> <H1>Este es el escudo de la UPV</H1> <p>La imagen se comporta <img src=escut.gif width=91 height=89> como si se tratara de un caracter <p>Podemos hacer un enlace: <a href=http://www.upv.es><img src=escut.gif width=91 height=89></A> </body> </html>
  • 23. ARQUITECTURA HTML / TABLAS TABLA PARTES PRINCIPALES QUE LAS DEFINE <TABLE> ... </TABLE> <TR> ... </TR> ( FILA) <TD> ... </TD> (CELDAS) • <TABLE> ... </TABLE> - Define una tabla, podemos usar el atributo BORDER. • <TR> ... </TR> - Especifica una fila. Podemos usar: ALIGN (LEFT, CENTER, RIGHT) y/o VALIGN (TOP, MIDDLE, BOTTOM). • <TD> ... </TD> - Define una celda.
  • 24. ARQUITECTURA HTML / TABLAS TABLA PARTES PRINCIPALES QUE LAS DEFINE <TABLE> ... </TABLE> <TR> ... </TR> ( FILA) <TD> ... </TD> (CELDAS) • <TABLE> ... </TABLE> - Define una tabla, podemos usar el atributo BORDER. • <TR> ... </TR> - Especifica una fila. Podemos usar: ALIGN (LEFT, CENTER, RIGHT) y/o VALIGN (TOP, MIDDLE, BOTTOM). • <TD> ... </TD> - Define una celda. SON PARTE IMPORTANTISIMA DE LA PÁGINA YA QUE ORGANIZAN LOS CONTENIDOS ESPACIALMENTE EN LA PANTALLA
  • 25. ARQUITECTURA HTML / TABLAS TABLA PARTES PRINCIPALES QUE LAS DEFINE <TABLE> ... </TABLE> <TR> ... </TR> ( FILA) <TD> ... </TD> (CELDAS) <html> <head> <title>TABLAS</title> </head> <body> <table width=&quot;75%&quot; border=&quot;1&quot;> <tr> <td>CELDA 1</td> <td>CELDA 2</td> </tr> <tr> <td>CELDA 3</td> <td>CELDA 4</td> </tr> </table> </body> </html>
  • 26. ARQUITECTURA HTML / TABLAS TABLA PARTES PRINCIPALES QUE LAS DEFINE <TABLE> ... </TABLE> <TR> ... </TR> ( FILA) <TD> ... </TD> (CELDAS) CELDA 1 CELDA 2 CELDA 3 CELDA 4