SlideShare uma empresa Scribd logo
1 de 24
ANDRES MAURICIO QUINTERO MACEA
                       Programación Web
   Lic. Informática y medios audiovisuales
Facultad de educación y ciencias humanas
                   Universidad de Córdoba
Son códigos transparentes para el usuario, que
son interpretados por el programa del navegador,
y que controlan la manera como la información
es mostrada en la pantalla.

Las palabras encerradas entre los símbolos
menor y mayor que (< >) son las etiquetas de
HTML.
Todo archivo HTML comienza siempre con la
etiqueta <HTML> y finaliza con la etiqueta
</HTML>. La estructura de una pagina está
compuesta básicamente por dos secciones: el
encabezado (header) y el cuerpo (body),
delimitados por las etiquetas: <head>, </head> y
<body>, </body>.
El uso adecuado de la etiqueta <BODY>, que por
supuesto tiene atributos, permite entre otras
cosas cambiar o establecer el color del texto, un
color o una imagen de fondo y los colores de los
enlaces que tendrá la página.
Por ejemplo:

<BODY BACKGROUND =“nombre de la imagen”
BGCOLOR =“color del fondo” TEXT =“color del
texto” LINK =“color enlace” VLINK =“color enlace
v” ALINK =“color enlace a”> </BODY>
Permiten cambiar los atributos y la manera como
el texto se verá dentro de la página. Se puede
afectar todo un párrafo, una línea, una palabra o
caracteres        individuales         simplemente
encerrándolos     dentro     de    las    etiquetas
apropiadas. Algunos atributos de texto pueden
ser controlados por diferentes etiquetas.
Es conocida como etiqueta de encabezado
(heading), es utilizada con frecuencia para
escribir títulos y subtítulos, dado que permite
mostrar el texto en negrillas con seis tamaños
diferentes, dependiendo del valor asignado al
atributo “X”.
<HTML>
         <HEAD>
              <TITLE> Encabezados </TITLE>
       </HEAD>
       <BODY>
              <H1>Este texto tiene el tamaño que le da la etiqueta H1</H1>
              <H2>Este texto tiene el tamaño que le da la etiqueta H2</H2>
              <H3>Este texto tiene el tamaño que le da la etiqueta H3</H3>
              <H4>Este texto tiene el tamaño que le da la etiqueta H4</H4>
              <H5>Este texto tiene el tamaño que le da la etiqueta H5</H5>
              <H6>Este texto tiene el tamaño que le da la etiqueta H6</H6>
       </BODY>
</HTML>
Se mostrará de la siguiente manera:
Esta etiqueta permite controlar tres atributos del
texto que se encuentre encerrado entre ellas, su
tamaño (SIZE), su color (COLOR) y el tipo de
fuente (FACE).

La sintaxis completa de la etiqueta FONT es la
siguiente:
Por ejemplo, se propone escribir las siguientes
líneas dentro del cuerpo de una página:
<FONT SIZE=“6” COLOR=“blue” FACE=“arial”> TEXTO </FONT>

<FONT SIZE=“8” COLOR=“#800000” FACE=“comic sans ms”> TEXTO </FONT>

<FONT SIZE=“10” COLOR=“red” FACE=“stencil”> TEXTO </FONT>
HTML solo reconoce un espacio entre
palabras, aunque se hayan escrito dos o más.
Tampoco reconocerá tabuladores y saltos de
línea. Si se quiere que el texto se vea tal y como
fue escrito, este debe encerrarse dentro de las
etiquetas <PRE> </PRE>

<BODY>
Este texto tiene      varios espacios
Y un salto de línea
</BODY>
La etiqueta <BR> permite forzar un salto de línea
dentro de un texto. Observe que esta etiqueta no
se cierra con </BR>, razón por la que se conoce
como etiqueta abierta.

<P> es otra etiqueta que puede utilizarse abierta
o cerrada. Si se usa de la primera forma, iniciará
un nuevo párrafo dejando una línea en blanco, si
por el contrario se cierra con </P> permite alinear
el párrafo a la derecha, izquierda, etc,
dependiendo del valor asignado al parámetro
ALIGN.
EJEMPLO                            RESULTADO

                                   Texto con
Texto con <BR> Salto de línea
                                   Salto de línea
                                   En este ejemplo iniciaremos aquí
En este ejemplo iniciaremos aquí
<P> un nuevo párrafo
                                   Un nuevo párrafo
<P ALIGN=“right”> alineado a la
                                                    Alineado a la derecha
derecha </P>
<P ALIGN=“left”> alineado a la
izquierda </P>                     Alineado a la izquierda

<P ALIGN=“center”> alineado al
centro </P>                                 Alineado al centro
Esta etiqueta es abierta, y dibuja una línea
horizontal con alineación, tamaño y ancho
variables. Se utiliza con frecuencia para separar
secciones de contenido.
Línea de tamaño 10 puntos y ocupando el 30% de la página

<HR ALIGN=“center” SIZE=“10”WIDTH=“30%”>

 Línea alineada a la izquierda de tamaño 5 puntos y ocupando la mitad
                               de la página
<HR ALIGN=“left” SIZE=“5” WIDTH=“50%”>

 Línea alineada a la derecha de tamaño 20 puntos y ocupando la mitad
                              de la página
<HR ALIGN=“right” SIZE=“20” WIDTH=“50%”>

            Línea sencilla que ocupará el 90% de la página

<HR>
EJEMPLO               EFECTO                 RESULTADO

<CENTER>TEXTO</C
                      Texto centrado                      texto
ENTER>
<B>texto</B>          Texto en negrillas     texto

<I>texto</I>          Texto en itálica       texto

<U>texto</U>          Texto subrayado        texto
Texto<SUP>texto</SUP
                     Texto en superíndices   textotexto
>
Texto<SUB>texto</SUB
                     Texto en subíndices     textotexto
>
<S>texto</S>          Texto tachado          texto
Las pagina web además de mostrar texto son
capaces de desplegar imágenes que han de ser
creadas en cualquiera de los formatos: JPG –
PNG - GIF. Una imagen con extensión BMP –
CDI – PCX o cualquier otro formato diferente no
será exhibida en el explorador.
Para insertar imágenes lo único que se necesita
conocer es la ruta y nombre del archivo que lo
contiene. La etiqueta <IMG> junto con su atributo
SRC=“ruta y/o nombre del archivo” permite
mostrar una imagen:

<IMG SRC=“logo.png”>
Para facilitar la navegación de una página
cuando su contenido es demasiado largo y al
desplegarla ocupa mas de una pantalla, se
pueden colocar enlaces que lleven al usuario a
sitios específicos o predeterminados de la misma.
Para esto se debe utilizar dos atributos de la
etiqueta <A>:

<A NAME=“nombre”>texto de marca</A>
<A HREF=“#NOMBRE”>texto de enlace</A>
<A HREF=“pagina.html”>texto de enlace</A>
<A HREF=“pagina.html”>
       <IMG SRC=“logo.png”>
</A>
Etiquetas básicas en html

Mais conteúdo relacionado

Mais procurados

HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
Doncho Minkov
 

Mais procurados (20)

Html Presentation
Html PresentationHtml Presentation
Html Presentation
 
Desarrollo web
Desarrollo webDesarrollo web
Desarrollo web
 
html-css
html-csshtml-css
html-css
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html
HtmlHtml
Html
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Css ppt
Css pptCss ppt
Css ppt
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Css Text Formatting
Css Text FormattingCss Text Formatting
Css Text Formatting
 
CSS
CSSCSS
CSS
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsHTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Cuestionario Preparatorio Html, css y html 5
Cuestionario Preparatorio Html, css y html 5Cuestionario Preparatorio Html, css y html 5
Cuestionario Preparatorio Html, css y html 5
 
HTML
HTMLHTML
HTML
 

Destaque

Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
Miguel Barajas
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
Doraliza Hugo Vera
 
Lista de páginas wikis
Lista de páginas wikisLista de páginas wikis
Lista de páginas wikis
Xaloc98
 
COMO CREAR BASES DE DATOS EN MICROSOFT ACCESS
COMO CREAR BASES DE DATOS EN MICROSOFT ACCESSCOMO CREAR BASES DE DATOS EN MICROSOFT ACCESS
COMO CREAR BASES DE DATOS EN MICROSOFT ACCESS
itsl
 
Energía y sus transformaciones.
Energía y sus transformaciones.Energía y sus transformaciones.
Energía y sus transformaciones.
Jorge Omar
 

Destaque (16)

Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
Html etiquetas basicas
Html etiquetas basicasHtml etiquetas basicas
Html etiquetas basicas
 
Tabla de etiquetas de HTML
Tabla de etiquetas de HTMLTabla de etiquetas de HTML
Tabla de etiquetas de HTML
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Listado etiquetas html 5
Listado etiquetas html 5Listado etiquetas html 5
Listado etiquetas html 5
 
Html
HtmlHtml
Html
 
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOSCOMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
 
Lista de páginas wikis
Lista de páginas wikisLista de páginas wikis
Lista de páginas wikis
 
COMANDO HTML
COMANDO HTMLCOMANDO HTML
COMANDO HTML
 
Como crear una base de datos en access
Como crear una base de datos en accessComo crear una base de datos en access
Como crear una base de datos en access
 
COMO CREAR BASES DE DATOS EN MICROSOFT ACCESS
COMO CREAR BASES DE DATOS EN MICROSOFT ACCESSCOMO CREAR BASES DE DATOS EN MICROSOFT ACCESS
COMO CREAR BASES DE DATOS EN MICROSOFT ACCESS
 
Fuentes del derecho
Fuentes del derechoFuentes del derecho
Fuentes del derecho
 
Energía y sus transformaciones.
Energía y sus transformaciones.Energía y sus transformaciones.
Energía y sus transformaciones.
 
Ejercicios Resueltos
Ejercicios ResueltosEjercicios Resueltos
Ejercicios Resueltos
 
Conceptos Básicos de la Estadística
Conceptos Básicos de la EstadísticaConceptos Básicos de la Estadística
Conceptos Básicos de la Estadística
 
Estadística: Conceptos básicos
Estadística: Conceptos básicosEstadística: Conceptos básicos
Estadística: Conceptos básicos
 

Semelhante a Etiquetas básicas en html (20)

04texto
04texto04texto
04texto
 
Introducción a Html
Introducción a HtmlIntroducción a Html
Introducción a Html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
Lenguaje html para colegio
Lenguaje html para colegioLenguaje html para colegio
Lenguaje html para colegio
 
Html
HtmlHtml
Html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Etiquetas que dan formato
Etiquetas que dan formatoEtiquetas que dan formato
Etiquetas que dan formato
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
Html
HtmlHtml
Html
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
Clase 5 lenguaje html
Clase 5  lenguaje htmlClase 5  lenguaje html
Clase 5 lenguaje html
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Codigo html
Codigo htmlCodigo html
Codigo html
 

Mais de Andrés Quintero Macea (6)

Formato condicional en Microsoft Excel
Formato condicional en Microsoft ExcelFormato condicional en Microsoft Excel
Formato condicional en Microsoft Excel
 
Funciones y operadores lógicos en microsoft excel
Funciones y operadores lógicos en microsoft excelFunciones y operadores lógicos en microsoft excel
Funciones y operadores lógicos en microsoft excel
 
Escritura digital (microsoft excel)
Escritura digital (microsoft excel)Escritura digital (microsoft excel)
Escritura digital (microsoft excel)
 
Medios de transmision no guiados
Medios de transmision no guiadosMedios de transmision no guiados
Medios de transmision no guiados
 
Protocolo http
Protocolo httpProtocolo http
Protocolo http
 
French Food
French  FoodFrench  Food
French Food
 

Etiquetas básicas en html

  • 1. ANDRES MAURICIO QUINTERO MACEA Programación Web Lic. Informática y medios audiovisuales Facultad de educación y ciencias humanas Universidad de Córdoba
  • 2. Son códigos transparentes para el usuario, que son interpretados por el programa del navegador, y que controlan la manera como la información es mostrada en la pantalla. Las palabras encerradas entre los símbolos menor y mayor que (< >) son las etiquetas de HTML.
  • 3. Todo archivo HTML comienza siempre con la etiqueta <HTML> y finaliza con la etiqueta </HTML>. La estructura de una pagina está compuesta básicamente por dos secciones: el encabezado (header) y el cuerpo (body), delimitados por las etiquetas: <head>, </head> y <body>, </body>.
  • 4. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer el color del texto, un color o una imagen de fondo y los colores de los enlaces que tendrá la página. Por ejemplo: <BODY BACKGROUND =“nombre de la imagen” BGCOLOR =“color del fondo” TEXT =“color del texto” LINK =“color enlace” VLINK =“color enlace v” ALINK =“color enlace a”> </BODY>
  • 5. Permiten cambiar los atributos y la manera como el texto se verá dentro de la página. Se puede afectar todo un párrafo, una línea, una palabra o caracteres individuales simplemente encerrándolos dentro de las etiquetas apropiadas. Algunos atributos de texto pueden ser controlados por diferentes etiquetas.
  • 6. Es conocida como etiqueta de encabezado (heading), es utilizada con frecuencia para escribir títulos y subtítulos, dado que permite mostrar el texto en negrillas con seis tamaños diferentes, dependiendo del valor asignado al atributo “X”.
  • 7. <HTML> <HEAD> <TITLE> Encabezados </TITLE> </HEAD> <BODY> <H1>Este texto tiene el tamaño que le da la etiqueta H1</H1> <H2>Este texto tiene el tamaño que le da la etiqueta H2</H2> <H3>Este texto tiene el tamaño que le da la etiqueta H3</H3> <H4>Este texto tiene el tamaño que le da la etiqueta H4</H4> <H5>Este texto tiene el tamaño que le da la etiqueta H5</H5> <H6>Este texto tiene el tamaño que le da la etiqueta H6</H6> </BODY> </HTML>
  • 8. Se mostrará de la siguiente manera:
  • 9. Esta etiqueta permite controlar tres atributos del texto que se encuentre encerrado entre ellas, su tamaño (SIZE), su color (COLOR) y el tipo de fuente (FACE). La sintaxis completa de la etiqueta FONT es la siguiente:
  • 10.
  • 11. Por ejemplo, se propone escribir las siguientes líneas dentro del cuerpo de una página: <FONT SIZE=“6” COLOR=“blue” FACE=“arial”> TEXTO </FONT> <FONT SIZE=“8” COLOR=“#800000” FACE=“comic sans ms”> TEXTO </FONT> <FONT SIZE=“10” COLOR=“red” FACE=“stencil”> TEXTO </FONT>
  • 12.
  • 13. HTML solo reconoce un espacio entre palabras, aunque se hayan escrito dos o más. Tampoco reconocerá tabuladores y saltos de línea. Si se quiere que el texto se vea tal y como fue escrito, este debe encerrarse dentro de las etiquetas <PRE> </PRE> <BODY> Este texto tiene varios espacios Y un salto de línea </BODY>
  • 14.
  • 15. La etiqueta <BR> permite forzar un salto de línea dentro de un texto. Observe que esta etiqueta no se cierra con </BR>, razón por la que se conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciará un nuevo párrafo dejando una línea en blanco, si por el contrario se cierra con </P> permite alinear el párrafo a la derecha, izquierda, etc, dependiendo del valor asignado al parámetro ALIGN.
  • 16. EJEMPLO RESULTADO Texto con Texto con <BR> Salto de línea Salto de línea En este ejemplo iniciaremos aquí En este ejemplo iniciaremos aquí <P> un nuevo párrafo Un nuevo párrafo <P ALIGN=“right”> alineado a la Alineado a la derecha derecha </P> <P ALIGN=“left”> alineado a la izquierda </P> Alineado a la izquierda <P ALIGN=“center”> alineado al centro </P> Alineado al centro
  • 17. Esta etiqueta es abierta, y dibuja una línea horizontal con alineación, tamaño y ancho variables. Se utiliza con frecuencia para separar secciones de contenido.
  • 18. Línea de tamaño 10 puntos y ocupando el 30% de la página <HR ALIGN=“center” SIZE=“10”WIDTH=“30%”> Línea alineada a la izquierda de tamaño 5 puntos y ocupando la mitad de la página <HR ALIGN=“left” SIZE=“5” WIDTH=“50%”> Línea alineada a la derecha de tamaño 20 puntos y ocupando la mitad de la página <HR ALIGN=“right” SIZE=“20” WIDTH=“50%”> Línea sencilla que ocupará el 90% de la página <HR>
  • 19. EJEMPLO EFECTO RESULTADO <CENTER>TEXTO</C Texto centrado texto ENTER> <B>texto</B> Texto en negrillas texto <I>texto</I> Texto en itálica texto <U>texto</U> Texto subrayado texto Texto<SUP>texto</SUP Texto en superíndices textotexto > Texto<SUB>texto</SUB Texto en subíndices textotexto > <S>texto</S> Texto tachado texto
  • 20. Las pagina web además de mostrar texto son capaces de desplegar imágenes que han de ser creadas en cualquiera de los formatos: JPG – PNG - GIF. Una imagen con extensión BMP – CDI – PCX o cualquier otro formato diferente no será exhibida en el explorador.
  • 21. Para insertar imágenes lo único que se necesita conocer es la ruta y nombre del archivo que lo contiene. La etiqueta <IMG> junto con su atributo SRC=“ruta y/o nombre del archivo” permite mostrar una imagen: <IMG SRC=“logo.png”>
  • 22. Para facilitar la navegación de una página cuando su contenido es demasiado largo y al desplegarla ocupa mas de una pantalla, se pueden colocar enlaces que lleven al usuario a sitios específicos o predeterminados de la misma.
  • 23. Para esto se debe utilizar dos atributos de la etiqueta <A>: <A NAME=“nombre”>texto de marca</A> <A HREF=“#NOMBRE”>texto de enlace</A> <A HREF=“pagina.html”>texto de enlace</A> <A HREF=“pagina.html”> <IMG SRC=“logo.png”> </A>