SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Electivo web Primer Semestre 2008 Taller
Las siglas  HTML  corresponden a  Hypertext Markup Language  (Lenguaje de Marcado de Hipertexto). Se trata de un conjunto de  códigos –denominados etiquetas– que se usan para controlar la  forma en que se muestra el documento en un navegador de Web (como  Netscape Navigator/Communicator o Microsoft Internet Explorer). Un  documento de formato basado en etiquetas de HTML se denomina  'documento HTML‘. El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las  etiquetas  ( tags ). Funcionan de la siguiente manera:  <XXX>  Este es el  inicio  de una etiqueta.  </XXX>  Este es el  cierre  de una etiqueta. Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas  <HTML>  y  </HTML> :  <HTML>  [Todo el documento]  </HTML>
Poner texto en negrita La instrucción para que un texto se ponga en negrita es  <b>  Teoría del Diseño  </b> La instrucción de cierre tiene que llevar el signo / Por lo tanto: A) Ponemos el código de inicio para poner el texto en negrita  <b>   B) A continuación el texto que queremos que aparezca en negrita y  C) Al final el código de cierre  </b>
El documento en sí está dividido en dos zonas principales:  El  encabezamiento , comprendido entre las etiquetas  <HEAD>  y  </HEAD>   El  cuerpo , comprendido entre las etiquetas  <BODY>  y  </BODY>   Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el  título del documento , comprendido entre las etiquetas  <TITLE>  y  </TITLE> .  El título debe ser breve y descriptivo de su contenido.   Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)  Por tanto, la estructura queda de esta manera:  <HTML>   <HEAD>   <TITLE>   Título de la página   </TITLE>   </HEAD>   <BODY>  [ Aquí van las etiquetas que visualizan la página ]  </BODY>   </HTML>
Algunas etiquetas básicas de html <HTML>   Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html. <HEAD>   Define la cabecera del documento html, suele contener información sobre el  documento que no se muestra directamente en el navegador, como por ejemplo,  el título de la ventana de su navegador.  Dentro de la cabecera encontramos  <TITLE>  Define el título de la página. Por lo  general, el título aparece en la barra encima de la ventana.  <BODY>  Define el contenido principal o cuerpo del documento, esta es la parte que se muestra en el navegador, dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fono y márgenes.  Dentro del cuerpo encontramos numerosas etiquetas:  <P>   párrafo nuevo <BR>   salto de línea forzado <TABLE>   comienzo de una tabla, (las filas se indican con <TR> y las celdas dentro de  las filas con <TD>. <a href=> indica la existencia de un hipervínculo o enlace, dentro o fuera de la página  web.
<html> <head> <title>Clase de Electivo Web</title> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;> <style type=&quot;text/css&quot;> <!-- .Estilo1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color: #000066;} body,td,th { color: #996633;} body {background-color: #8FA34E;} .Estilo2 {color: #000066; font-family: Verdana, Arial, Helvetica, sans-serif;} --></style></head> <body> <p align=&quot;justify&quot;><span class=&quot;Estilo1&quot;><img src=&quot;/electivo/cuadro5.jpg&quot; width=&quot;150&quot; height=&quot;200&quot; align=&quot;right&quot;>Esta es una p&aacute;gina de prueba elaborada especialmente para Electivo Web, <span class=&quot;Estilo2&quot;>con el objetivo de explicar c&oacute;mo funciona el lenguaje HTML.</span><br> <br> </span><span class=&quot;Estilo2&quot;><br> <span class=&quot;Estilo2&quot;>Esta es una p&aacute;gina de prueba elaborada especialmente para Electivo Web, con el objetivo de explicar c&oacute;mo funciona el lenguaje HTML.</span></span></p> <p>&nbsp;</p> </body> </html>
EJEMPLO ALINEAR A LA IZQUIERDA <p align=&quot;left&quot;>alineamos el texto a la izquierda</p> alineamos el texto a la izquierda EJEMPLO ALINEAR A LA DERECHA <p align=&quot;right&quot;>alineamos el texto a la derecha</p> alineamos el texto a la derecha EJEMPLO DE CENTRAR <p align=&quot;center&quot;>centramos el texto</p> centramos el texto
PASAR A LA SIGUIENTE LINEA Cuando queremos pasar el texto a otra línea podemos utilizar el &quot;tag&quot; <br>  que no tiene tag de cierre. Si queremos separar el siguiente texto en varias líneas. la casa el perro el niño las vacaciones Pondremos: la casa<br> el perro<br> el niño<br> las vacaciones<br> Y en el documento HTML mostrará en el navegador:  la casa el perro el niño las vacaciones
PONER ENLACES Lo más característico de Internet es ser un medio que no es lineal, sino de hipertexto, es decir, que utiliza enlaces para pasar entre distintos niveles o páginas. La instrucción para un enlace es de la forma <A HREF=&quot;aqui ponemos la dirección a la que queremos que apunte el enlace&quot;>el texto que queremos que se vea en el documento</A> EJEMPLO Queremos enlazar con la página www.tercera.cl y que el texto que se vea sea “ Diario La Tercera “. <A HREF=&quot;http://www.tercera.cl/&quot;> Diario La Tercera </A> Recuerda que los enlaces externos a otras páginas deben llevar la dirección completa de la página.
Ejercicio en clase ,[object Object]

Weitere ähnliche Inhalte

Was ist angesagt?

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
up
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
asdi
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
marcos0209
 

Was ist angesagt? (19)

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Aplicaciones en la red
Aplicaciones en la redAplicaciones en la red
Aplicaciones en la red
 
Navegadores web
Navegadores webNavegadores web
Navegadores web
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Pagina web en html
Pagina web en htmlPagina web en html
Pagina web en html
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Mi Primera Pagina
Mi Primera PaginaMi Primera Pagina
Mi Primera Pagina
 

Andere mochten auch

Toronto Musicscape
Toronto MusicscapeToronto Musicscape
Toronto Musicscape
Dan Van Meer
 
Advertising Cluster2
Advertising Cluster2Advertising Cluster2
Advertising Cluster2
guestf55d53
 
Planeamiento 2008
Planeamiento 2008Planeamiento 2008
Planeamiento 2008
guestd973ba
 
Food & Beverage Cluster
Food & Beverage ClusterFood & Beverage Cluster
Food & Beverage Cluster
smoore
 
Centro de Información, Recursos Educativos y Aprendizaje
Centro de Información, Recursos Educativos y AprendizajeCentro de Información, Recursos Educativos y Aprendizaje
Centro de Información, Recursos Educativos y Aprendizaje
guadalupe14
 
Trabajo D[1]..
Trabajo D[1]..Trabajo D[1]..
Trabajo D[1]..
conocercba
 
Biblioteca Del Colegio Baldwin De Puerto Rico
Biblioteca Del Colegio Baldwin De Puerto RicoBiblioteca Del Colegio Baldwin De Puerto Rico
Biblioteca Del Colegio Baldwin De Puerto Rico
rojas.balbina
 
Trabajo De InvestigacióN De Fuentes Ana Margot
Trabajo De InvestigacióN De Fuentes Ana MargotTrabajo De InvestigacióN De Fuentes Ana Margot
Trabajo De InvestigacióN De Fuentes Ana Margot
conocercba
 
Desactivar Autocompletar E Historial
Desactivar Autocompletar E HistorialDesactivar Autocompletar E Historial
Desactivar Autocompletar E Historial
CRA SANTANA
 
Subir presentaciones
Subir presentacionesSubir presentaciones
Subir presentaciones
Val_Vicky
 
Gta Renewable Energy Cluster
Gta Renewable Energy ClusterGta Renewable Energy Cluster
Gta Renewable Energy Cluster
safaomid
 
Wed Night Fuel Announcements For 04/09/08
Wed Night Fuel Announcements For 04/09/08Wed Night Fuel Announcements For 04/09/08
Wed Night Fuel Announcements For 04/09/08
stevernon
 
Geom 1point5
Geom 1point5Geom 1point5
Geom 1point5
herbison
 

Andere mochten auch (20)

Toronto Musicscape
Toronto MusicscapeToronto Musicscape
Toronto Musicscape
 
Advertising Cluster2
Advertising Cluster2Advertising Cluster2
Advertising Cluster2
 
Planeamiento 2008
Planeamiento 2008Planeamiento 2008
Planeamiento 2008
 
6_Pymes y Accion social
6_Pymes y Accion social6_Pymes y Accion social
6_Pymes y Accion social
 
Food & Beverage Cluster
Food & Beverage ClusterFood & Beverage Cluster
Food & Beverage Cluster
 
Centro de Información, Recursos Educativos y Aprendizaje
Centro de Información, Recursos Educativos y AprendizajeCentro de Información, Recursos Educativos y Aprendizaje
Centro de Información, Recursos Educativos y Aprendizaje
 
Trabajo D[1]..
Trabajo D[1]..Trabajo D[1]..
Trabajo D[1]..
 
Biblioteca Del Colegio Baldwin De Puerto Rico
Biblioteca Del Colegio Baldwin De Puerto RicoBiblioteca Del Colegio Baldwin De Puerto Rico
Biblioteca Del Colegio Baldwin De Puerto Rico
 
Trabajo De InvestigacióN De Fuentes Ana Margot
Trabajo De InvestigacióN De Fuentes Ana MargotTrabajo De InvestigacióN De Fuentes Ana Margot
Trabajo De InvestigacióN De Fuentes Ana Margot
 
Desactivar Autocompletar E Historial
Desactivar Autocompletar E HistorialDesactivar Autocompletar E Historial
Desactivar Autocompletar E Historial
 
Tesissencilla
TesissencillaTesissencilla
Tesissencilla
 
Subir presentaciones
Subir presentacionesSubir presentaciones
Subir presentaciones
 
Presentación gustavo andrés carmona de la hoz
Presentación gustavo andrés carmona de la hozPresentación gustavo andrés carmona de la hoz
Presentación gustavo andrés carmona de la hoz
 
Secuencia pajaritos de colores
Secuencia pajaritos de coloresSecuencia pajaritos de colores
Secuencia pajaritos de colores
 
M. Ocampo
M. OcampoM. Ocampo
M. Ocampo
 
Gta Renewable Energy Cluster
Gta Renewable Energy ClusterGta Renewable Energy Cluster
Gta Renewable Energy Cluster
 
Wed Night Fuel Announcements For 04/09/08
Wed Night Fuel Announcements For 04/09/08Wed Night Fuel Announcements For 04/09/08
Wed Night Fuel Announcements For 04/09/08
 
Apache Persistence Layers
Apache Persistence LayersApache Persistence Layers
Apache Persistence Layers
 
Apresentação2
Apresentação2Apresentação2
Apresentação2
 
Geom 1point5
Geom 1point5Geom 1point5
Geom 1point5
 

Ähnlich wie Primeraclase (20)

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
 
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
 
H T M L E X P O S I C I O N
H T M L  E X P O S I C I O NH T M L  E X P O S I C I O N
H T M L E X P O S I C I O N
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
HTML
HTMLHTML
HTML
 
Qué es xhtml
Qué es xhtmlQué es xhtml
Qué es xhtml
 
Curso Html Basico
Curso Html BasicoCurso Html Basico
Curso Html Basico
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Codigos HTML Continuación
Codigos HTML ContinuaciónCodigos HTML Continuación
Codigos HTML Continuación
 
Etiquetas Html
Etiquetas HtmlEtiquetas Html
Etiquetas Html
 
Html trabajo!
Html trabajo!Html trabajo!
Html trabajo!
 
html
htmlhtml
html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Expo Html
Expo HtmlExpo Html
Expo Html
 
1 crear pag formatos
1 crear pag formatos1 crear pag formatos
1 crear pag formatos
 
Curso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTMLCurso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTML
 
Clase 2
Clase 2Clase 2
Clase 2
 
Clase 2
Clase 2Clase 2
Clase 2
 

Mehr von danielagrouliez (9)

Creative
CreativeCreative
Creative
 
Creative
CreativeCreative
Creative
 
Creative
CreativeCreative
Creative
 
Excel
ExcelExcel
Excel
 
Excel
ExcelExcel
Excel
 
Uso De Blogs
Uso De BlogsUso De Blogs
Uso De Blogs
 
Word2
Word2Word2
Word2
 
Word1
Word1Word1
Word1
 
Word1
Word1Word1
Word1
 

Kürzlich hochgeladen

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Kürzlich hochgeladen (10)

How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 

Primeraclase

  • 1. Electivo web Primer Semestre 2008 Taller
  • 2. Las siglas HTML corresponden a Hypertext Markup Language (Lenguaje de Marcado de Hipertexto). Se trata de un conjunto de códigos –denominados etiquetas– que se usan para controlar la forma en que se muestra el documento en un navegador de Web (como Netscape Navigator/Communicator o Microsoft Internet Explorer). Un documento de formato basado en etiquetas de HTML se denomina 'documento HTML‘. El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas ( tags ). Funcionan de la siguiente manera: <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML> : <HTML> [Todo el documento] </HTML>
  • 3. Poner texto en negrita La instrucción para que un texto se ponga en negrita es <b> Teoría del Diseño </b> La instrucción de cierre tiene que llevar el signo / Por lo tanto: A) Ponemos el código de inicio para poner el texto en negrita <b> B) A continuación el texto que queremos que aparezca en negrita y C) Al final el código de cierre </b>
  • 4. El documento en sí está dividido en dos zonas principales: El encabezamiento , comprendido entre las etiquetas <HEAD> y </HEAD> El cuerpo , comprendido entre las etiquetas <BODY> y </BODY> Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento , comprendido entre las etiquetas <TITLE> y </TITLE> . El título debe ser breve y descriptivo de su contenido. Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.) Por tanto, la estructura queda de esta manera: <HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY> [ Aquí van las etiquetas que visualizan la página ] </BODY> </HTML>
  • 5. Algunas etiquetas básicas de html <HTML> Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html. <HEAD> Define la cabecera del documento html, suele contener información sobre el documento que no se muestra directamente en el navegador, como por ejemplo, el título de la ventana de su navegador. Dentro de la cabecera encontramos <TITLE> Define el título de la página. Por lo general, el título aparece en la barra encima de la ventana. <BODY> Define el contenido principal o cuerpo del documento, esta es la parte que se muestra en el navegador, dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fono y márgenes. Dentro del cuerpo encontramos numerosas etiquetas: <P> párrafo nuevo <BR> salto de línea forzado <TABLE> comienzo de una tabla, (las filas se indican con <TR> y las celdas dentro de las filas con <TD>. <a href=> indica la existencia de un hipervínculo o enlace, dentro o fuera de la página web.
  • 6. <html> <head> <title>Clase de Electivo Web</title> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;> <style type=&quot;text/css&quot;> <!-- .Estilo1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color: #000066;} body,td,th { color: #996633;} body {background-color: #8FA34E;} .Estilo2 {color: #000066; font-family: Verdana, Arial, Helvetica, sans-serif;} --></style></head> <body> <p align=&quot;justify&quot;><span class=&quot;Estilo1&quot;><img src=&quot;/electivo/cuadro5.jpg&quot; width=&quot;150&quot; height=&quot;200&quot; align=&quot;right&quot;>Esta es una p&aacute;gina de prueba elaborada especialmente para Electivo Web, <span class=&quot;Estilo2&quot;>con el objetivo de explicar c&oacute;mo funciona el lenguaje HTML.</span><br> <br> </span><span class=&quot;Estilo2&quot;><br> <span class=&quot;Estilo2&quot;>Esta es una p&aacute;gina de prueba elaborada especialmente para Electivo Web, con el objetivo de explicar c&oacute;mo funciona el lenguaje HTML.</span></span></p> <p>&nbsp;</p> </body> </html>
  • 7. EJEMPLO ALINEAR A LA IZQUIERDA <p align=&quot;left&quot;>alineamos el texto a la izquierda</p> alineamos el texto a la izquierda EJEMPLO ALINEAR A LA DERECHA <p align=&quot;right&quot;>alineamos el texto a la derecha</p> alineamos el texto a la derecha EJEMPLO DE CENTRAR <p align=&quot;center&quot;>centramos el texto</p> centramos el texto
  • 8. PASAR A LA SIGUIENTE LINEA Cuando queremos pasar el texto a otra línea podemos utilizar el &quot;tag&quot; <br> que no tiene tag de cierre. Si queremos separar el siguiente texto en varias líneas. la casa el perro el niño las vacaciones Pondremos: la casa<br> el perro<br> el niño<br> las vacaciones<br> Y en el documento HTML mostrará en el navegador: la casa el perro el niño las vacaciones
  • 9. PONER ENLACES Lo más característico de Internet es ser un medio que no es lineal, sino de hipertexto, es decir, que utiliza enlaces para pasar entre distintos niveles o páginas. La instrucción para un enlace es de la forma <A HREF=&quot;aqui ponemos la dirección a la que queremos que apunte el enlace&quot;>el texto que queremos que se vea en el documento</A> EJEMPLO Queremos enlazar con la página www.tercera.cl y que el texto que se vea sea “ Diario La Tercera “. <A HREF=&quot;http://www.tercera.cl/&quot;> Diario La Tercera </A> Recuerda que los enlaces externos a otras páginas deben llevar la dirección completa de la página.
  • 10.