SlideShare une entreprise Scribd logo
1  sur  10
HTML Formato de texto y listas DISEÑO WEB I 1 Html Formato de Texto y Listas byJoaquin Lara Sierraislicensedunder a CreativeCommons Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 Colombia License.Basedon a work at www.unitecnologica.edu.co.
Evolución del lenguaje El lenguaje HTML nace en 1991 de manos de Tim Bernes-Lee del CERN como un sistema hipertexto con el único objetivo de servir como medio de transmisión de información entre físicos de alta energía como parte de la iniciativa WWW. En 1993 Dan Connelly escribe el primer DTD (DocumentTypeDefinition) de SGML describiendo el lenguaje. En 1994 el sistema había tenido tal aceptación que la especificación se había quedado ya obsoleta. Por aquel entonces WWW y Mosaic eran casi sinónimos debido a que el browser Mosaic del NCSA (National Center forSupercomputingApplications) era el más extendido debido a las mejoras que incorporaba. Es entonces cuando nace el HTML 2.0 en un draft realizado también por Dan Connelly. 2
Evolución del lenguaje El crecimiento exponencial que comienza a sufrir el sistema lleva a organizar la First International WWW Conference en Mayo de 1994. El principal avance de 2.0 de HTML es la incorporación de los llamados forms, formularios que permiten que el usuario cliente envie información al servidor y ésta sea recogida y procesada allí. Precisamente con este fin, NCSA presenta la especificación del CGI, Common Gateway Interface, versión 1.0 que define un interfaz entre programas ejecutables y el sistema WWW. Con la incorporación de los forms, aparecen por primera vez campos donde el usuario puede escribir, menús "pull-down" y los denominados "radio-buttons" integrados en páginas WWW.  3
Evolución del lenguaje Desde entonces, el lenguaje ha seguido creciendo como algo dinámico, como una lengua humana, algo vivo, siendo modificado sobre todo por las personas que lo utilizan. Asi, una evolución en el lenguaje suele surgir de una propuesta que es adoptada por algunos clientes (browsers). Con el uso se ve si es eficiente y es adoptada y si es así, finalmente se incorpora al estándar. De este modo, a finales de 1993 se comienza a hablar de HTML+ propuesto por DaveRaggett, de HEP Labs, en Bristol que evoluciona a un nuevo draft de Marzo de 1994 para la versión HTML 3.0 incorporando nuevas posibilidades como la realización de tablas complejas, control de proceso de formatos e incorporación de expresiones matemáticas.  4
Evolución del lenguaje El testigo pasa del browser Mosaic al Netscape, que incorpora nuevas mejoras. Aunque el equipo de Netscape anuncia desde el principio que su browser trata HTML 3.0, lo cierto es que no se adapta al estándar. Por el momento, el único browser de HTML 3.0 es experimental y recibe el nombre de Arena. El lenguaje de Netscape, el más utilizado en la actualidad, incorpora etiquetas no definidas en HTML 3.0, y tiene algunas diferencias con algunas de las definidas, por ejemplo en la realización de tablas. Por otra parte, hasta la versión 2.0, recién aparecida, no permitía el empleo de expresiones matemáticas (al escribir este artículo el autor aún no ha analizado la versión 2.0). Y como gran idea propone la incorporación de un tipo MIME experimental que permite la actualización dinámica de documentos, del que se hablará en el apartado dedicado a la programación de CGI. Por ello, en "los ambientes" se ha comenzado a denominar este lenguaje de Netscape como NHTML 1.1 para diferenciarlo de la verdadera propuesta de HTML 3.0.  5
Etiquetas <p>Esto es un párrafo.</p> <P>Los párrafos se separan con un espaciado  superior al correspondiente  a una nueva línea. <BR> Para tener un espaciado más compacto  puede utilizarse el Line Break,  como en este ejemplo.</P> <P>Líneas horizontales:</P>  <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE> 6
Formato de texto <FONT SIZE="+1" COLOR="red" FACE="Arial">  Define tipo de letra, tamaño y color a tu gusto  </FONT> <P>Una palabra o un fragmento de texto se  puede resaltar con el tag STRONG  o con el tag EM, que en la mayor  parte de los browsers se corresponden  con <STRONG>bold</STRONG> e  <EM>italic</EM></P> 7
<P>En cualquier caso, también se  pueden utilizar los tags  <B>bold</B> (B) e <I>italic</I> (I).</P> <P>Para que el texto <BLINK>parpadee</BLINK> se emplea la TAG Blink.</P> <P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3>  <H4>4</H4><H5>5</H5><H6>6</H6></P> 8
<P>Alineados:</P>  <P ALIGN="LEFT">Izquierda</P>   <P ALIGN="RIGHT">Derecha</P>   <P ALIGN="CENTER">Centrado</P>   </P> Otros efectos:   <P><U>subrayado</U>   <P><STRIKE>tachado</STRIKE>   <P><BIG>letra más grande que el estándar</BIG>   <P><SMALL>letra más pequeña que el estándar</SMALL>   <P>Texto tipo<SUB>subíndice</SUB>   <P>Texto tipo<SUP>superíndice</SUP> 9
<html>    <head>        <title>Primer ejemplo en HTML</title>     </head>  <body>     <h1>Mi colección de discos</h1>     <h2>Horslips</h2>     <p>Este grupo irlandés nació en 1970, blablabla...</p>     <ol>       <li>“opción uno", 1972</li>       <li>“opción dos", 1973</li>       <li> “opción tres “ 1980</li>     </ol>     <h2>Gwendal</h2>     <p>Gwendal es probablemente uno.. Blablabla.</p>     <ol>        <li>"Gwendal", 1974</li>        <li>"Gwendal 2", 1975</li> li>Etcétera, tampoco los pongo todos</li>     </ol>  </body> </html> ejemplo 10

Contenu connexe

Tendances (7)

Avila lara 2
Avila lara  2Avila lara  2
Avila lara 2
 
marlon cordon Html
marlon cordon Htmlmarlon cordon Html
marlon cordon Html
 
Tarea
TareaTarea
Tarea
 
Tarea
TareaTarea
Tarea
 
Que es html
Que es htmlQue es html
Que es html
 
breve historia de html
breve historia de htmlbreve historia de html
breve historia de html
 
Colegio nacional nicolas esgerra
Colegio nacional nicolas esgerraColegio nacional nicolas esgerra
Colegio nacional nicolas esgerra
 

Similaire à Html, Formato De Texto y Listas (20)

Html thony
Html thonyHtml thony
Html thony
 
Perito en industria alimentaria susan y evelyn
Perito en industria alimentaria susan y evelynPerito en industria alimentaria susan y evelyn
Perito en industria alimentaria susan y evelyn
 
Rosi karina
Rosi karinaRosi karina
Rosi karina
 
Rosi karina
Rosi karinaRosi karina
Rosi karina
 
Programación en HTML 5
Programación en HTML 5Programación en HTML 5
Programación en HTML 5
 
Html nathaly fajardo, melissa gomez
Html nathaly fajardo, melissa gomezHtml nathaly fajardo, melissa gomez
Html nathaly fajardo, melissa gomez
 
Yinller22014
Yinller22014Yinller22014
Yinller22014
 
Eduardo cordón
Eduardo cordónEduardo cordón
Eduardo cordón
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
html
htmlhtml
html
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
Que es html zabaleta ruíz milton de jesús
Que es html zabaleta ruíz milton de jesúsQue es html zabaleta ruíz milton de jesús
Que es html zabaleta ruíz milton de jesús
 
Nombres
NombresNombres
Nombres
 
Nombres
NombresNombres
Nombres
 
primera c
primera cprimera c
primera c
 
Nombres
NombresNombres
Nombres
 
Jeiimy
JeiimyJeiimy
Jeiimy
 
HTML (parte 1)
HTML (parte 1)HTML (parte 1)
HTML (parte 1)
 
Html
HtmlHtml
Html
 
Alexandra gonzález
Alexandra gonzálezAlexandra gonzález
Alexandra gonzález
 

Plus de Joaquin Lara Sierra

Guía estrategias didácticas de im interpersonal
Guía estrategias didácticas de im interpersonalGuía estrategias didácticas de im interpersonal
Guía estrategias didácticas de im interpersonal
Joaquin Lara Sierra
 

Plus de Joaquin Lara Sierra (20)

Factores Intrínsecos Influyentes en el comportamiento Humano
Factores Intrínsecos Influyentes en el comportamiento HumanoFactores Intrínsecos Influyentes en el comportamiento Humano
Factores Intrínsecos Influyentes en el comportamiento Humano
 
Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano Cl...
Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano Cl...Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano Cl...
Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano Cl...
 
Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano 2
Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano 2Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano 2
Factores Intrínsecos y Extrínsecos Influyentes en el comportamiento Humano 2
 
Proceso de innovacion
Proceso de innovacion Proceso de innovacion
Proceso de innovacion
 
Estructuras de control - Ciclo For
Estructuras de control - Ciclo ForEstructuras de control - Ciclo For
Estructuras de control - Ciclo For
 
Trabajando con excel parte 2
Trabajando con excel parte 2Trabajando con excel parte 2
Trabajando con excel parte 2
 
Trabajando con excel Parte 1
Trabajando con excel Parte 1Trabajando con excel Parte 1
Trabajando con excel Parte 1
 
Tic aplicada a los negocios
Tic aplicada a los negociosTic aplicada a los negocios
Tic aplicada a los negocios
 
Innovar en Educación
Innovar en EducaciónInnovar en Educación
Innovar en Educación
 
Gestionar pedagógica-mente las tic en el ejercicio docente Universitario
Gestionar pedagógica-mente las tic en el ejercicio docente UniversitarioGestionar pedagógica-mente las tic en el ejercicio docente Universitario
Gestionar pedagógica-mente las tic en el ejercicio docente Universitario
 
Estrategias Didácticas
Estrategias DidácticasEstrategias Didácticas
Estrategias Didácticas
 
Gestión Pedagógica y TIC (Parte 2)
Gestión Pedagógica y TIC (Parte 2)Gestión Pedagógica y TIC (Parte 2)
Gestión Pedagógica y TIC (Parte 2)
 
Gestión Pedagógica y TIC (Parte 1)
Gestión Pedagógica y TIC (Parte 1)Gestión Pedagógica y TIC (Parte 1)
Gestión Pedagógica y TIC (Parte 1)
 
Introduccion power point parte 3
Introduccion power point parte 3Introduccion power point parte 3
Introduccion power point parte 3
 
Introduccion power point parte 2
Introduccion power point parte 2Introduccion power point parte 2
Introduccion power point parte 2
 
Introducción a power point parte1
Introducción a power point parte1Introducción a power point parte1
Introducción a power point parte1
 
Folleto Modelo pedagógico de la UTB
Folleto Modelo pedagógico de la UTBFolleto Modelo pedagógico de la UTB
Folleto Modelo pedagógico de la UTB
 
Guía estrategias didácticas de im interpersonal
Guía estrategias didácticas de im interpersonalGuía estrategias didácticas de im interpersonal
Guía estrategias didácticas de im interpersonal
 
Operacionalización del modelo pedagógico
Operacionalización del modelo pedagógicoOperacionalización del modelo pedagógico
Operacionalización del modelo pedagógico
 
Innovación educativa
Innovación educativaInnovación educativa
Innovación educativa
 

Dernier

Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
meloamerica93
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
asnsdt
 

Dernier (20)

PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidad
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 

Html, Formato De Texto y Listas

  • 1. HTML Formato de texto y listas DISEÑO WEB I 1 Html Formato de Texto y Listas byJoaquin Lara Sierraislicensedunder a CreativeCommons Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 Colombia License.Basedon a work at www.unitecnologica.edu.co.
  • 2. Evolución del lenguaje El lenguaje HTML nace en 1991 de manos de Tim Bernes-Lee del CERN como un sistema hipertexto con el único objetivo de servir como medio de transmisión de información entre físicos de alta energía como parte de la iniciativa WWW. En 1993 Dan Connelly escribe el primer DTD (DocumentTypeDefinition) de SGML describiendo el lenguaje. En 1994 el sistema había tenido tal aceptación que la especificación se había quedado ya obsoleta. Por aquel entonces WWW y Mosaic eran casi sinónimos debido a que el browser Mosaic del NCSA (National Center forSupercomputingApplications) era el más extendido debido a las mejoras que incorporaba. Es entonces cuando nace el HTML 2.0 en un draft realizado también por Dan Connelly. 2
  • 3. Evolución del lenguaje El crecimiento exponencial que comienza a sufrir el sistema lleva a organizar la First International WWW Conference en Mayo de 1994. El principal avance de 2.0 de HTML es la incorporación de los llamados forms, formularios que permiten que el usuario cliente envie información al servidor y ésta sea recogida y procesada allí. Precisamente con este fin, NCSA presenta la especificación del CGI, Common Gateway Interface, versión 1.0 que define un interfaz entre programas ejecutables y el sistema WWW. Con la incorporación de los forms, aparecen por primera vez campos donde el usuario puede escribir, menús "pull-down" y los denominados "radio-buttons" integrados en páginas WWW. 3
  • 4. Evolución del lenguaje Desde entonces, el lenguaje ha seguido creciendo como algo dinámico, como una lengua humana, algo vivo, siendo modificado sobre todo por las personas que lo utilizan. Asi, una evolución en el lenguaje suele surgir de una propuesta que es adoptada por algunos clientes (browsers). Con el uso se ve si es eficiente y es adoptada y si es así, finalmente se incorpora al estándar. De este modo, a finales de 1993 se comienza a hablar de HTML+ propuesto por DaveRaggett, de HEP Labs, en Bristol que evoluciona a un nuevo draft de Marzo de 1994 para la versión HTML 3.0 incorporando nuevas posibilidades como la realización de tablas complejas, control de proceso de formatos e incorporación de expresiones matemáticas. 4
  • 5. Evolución del lenguaje El testigo pasa del browser Mosaic al Netscape, que incorpora nuevas mejoras. Aunque el equipo de Netscape anuncia desde el principio que su browser trata HTML 3.0, lo cierto es que no se adapta al estándar. Por el momento, el único browser de HTML 3.0 es experimental y recibe el nombre de Arena. El lenguaje de Netscape, el más utilizado en la actualidad, incorpora etiquetas no definidas en HTML 3.0, y tiene algunas diferencias con algunas de las definidas, por ejemplo en la realización de tablas. Por otra parte, hasta la versión 2.0, recién aparecida, no permitía el empleo de expresiones matemáticas (al escribir este artículo el autor aún no ha analizado la versión 2.0). Y como gran idea propone la incorporación de un tipo MIME experimental que permite la actualización dinámica de documentos, del que se hablará en el apartado dedicado a la programación de CGI. Por ello, en "los ambientes" se ha comenzado a denominar este lenguaje de Netscape como NHTML 1.1 para diferenciarlo de la verdadera propuesta de HTML 3.0. 5
  • 6. Etiquetas <p>Esto es un párrafo.</p> <P>Los párrafos se separan con un espaciado  superior al correspondiente  a una nueva línea. <BR> Para tener un espaciado más compacto  puede utilizarse el Line Break,  como en este ejemplo.</P> <P>Líneas horizontales:</P>  <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE> 6
  • 7. Formato de texto <FONT SIZE="+1" COLOR="red" FACE="Arial">  Define tipo de letra, tamaño y color a tu gusto  </FONT> <P>Una palabra o un fragmento de texto se  puede resaltar con el tag STRONG  o con el tag EM, que en la mayor  parte de los browsers se corresponden  con <STRONG>bold</STRONG> e  <EM>italic</EM></P> 7
  • 8. <P>En cualquier caso, también se  pueden utilizar los tags  <B>bold</B> (B) e <I>italic</I> (I).</P> <P>Para que el texto <BLINK>parpadee</BLINK> se emplea la TAG Blink.</P> <P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3>  <H4>4</H4><H5>5</H5><H6>6</H6></P> 8
  • 9. <P>Alineados:</P>  <P ALIGN="LEFT">Izquierda</P>  <P ALIGN="RIGHT">Derecha</P>  <P ALIGN="CENTER">Centrado</P>  </P> Otros efectos:   <P><U>subrayado</U>   <P><STRIKE>tachado</STRIKE>   <P><BIG>letra más grande que el estándar</BIG>   <P><SMALL>letra más pequeña que el estándar</SMALL>   <P>Texto tipo<SUB>subíndice</SUB>   <P>Texto tipo<SUP>superíndice</SUP> 9
  • 10. <html> <head> <title>Primer ejemplo en HTML</title> </head> <body> <h1>Mi colección de discos</h1> <h2>Horslips</h2> <p>Este grupo irlandés nació en 1970, blablabla...</p> <ol> <li>“opción uno", 1972</li> <li>“opción dos", 1973</li> <li> “opción tres “ 1980</li> </ol> <h2>Gwendal</h2> <p>Gwendal es probablemente uno.. Blablabla.</p> <ol> <li>"Gwendal", 1974</li> <li>"Gwendal 2", 1975</li> li>Etcétera, tampoco los pongo todos</li> </ol> </body> </html> ejemplo 10