SlideShare ist ein Scribd-Unternehmen logo
1 von 12
<html>”Inicia de la pagina web”
<head> “Encabezado”
<title>MI PRIMERA PAG WEB</title> “Titulo de la Ventana”
</head>

<body>
<p><b>Bienvenido,</b></p> “Utilización de instrucciones”
<p>Estás en la página <b>Pagina Web</b>.</p>
<p>p>
</body>
</html>
introducir un texto alineado a la izquierda escribiríamos:
<p align="left">Texto alineado a la izquierda</p>
El resultado seria:

                                    Texto alineado a la izquierda

Para una justificación al centro: <p align="center">Texto alineado al centro</p>
que daría:

                 Texto alineado al centro

Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p>
cuyo efecto seria:

Texto alineado a la derecha
La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2>
   para los de segundo nivel y así hasta <h6> que es el encabezado más
   pequeño.
<html>
<head>
<title>Todos los encabezados</title>
</head>
<body>
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
</body>
</html>
<MARQUEE> Texto que se desplaza </MARQUEE>>

<MARQUEE DIRECTION=LEFT> Texto que se desplaza </MARQUEE>

 DIRECTION= Establece en que dirección se mueve el contenido
 del bloque en la pantalla. Puede tener dos valores:
 LEFT izquierda (por defecto)
 RIGHT derecha
<b>Texto en negrita</b>                      <i>Texto en itálica</i>



                        <U>Texto en itálica</U>




    Atributo FONT


<font face="Comic Sans MS,arial,verdana">Este texto</font>


<font size=4>Este texto es más grande</font> >


<font color="red">Este texto está en rojo</font>
<body background="fondo.jpg">




<img src="img1.gif" width="28" height="21" alt="Tamaño original" border="3">




<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80"
WIDTH="0" HEIGHT="0">



 <BGSOUND SRC="imagine.mid" LOOP=INFINITE>
<ul>                                 El resultado:
   <li>Argentina                      Países del mundo
   <li>Perú                           -Argentina
   <li>Chile                          -Perú
 </ul>                                -Chile




<p>Reglas de comportamiento en el
trabajo</p>                           Reglas de comportamiento en
<ol>                                  el trabajo
<li>El jefe siempre tiene la razón    El jefe siempre tiene la razón
<li>En caso de duda aplicar regla 1   En caso de duda aplicar regla 1
</ol>
<p>Ordenamos por numeros</p>   Ordenamos por numeros
<ol type="1">                  romanos empezando por el 10
<li>Elemento 1
                               I. Elemento x
<li> Elemento 2
</ol>
                               II Elemento xi




 <p>Ciudades del mundo</p>      Ciudades del mundo
 <ul>
   <li>Argentina                1,Argentina
   <ol>                             1.1Buenos Aires
      <li>Buenos Aires              1.2Bariloche
      <li>Bariloche
   </ol>
                                2Uruguay
   <li>Uruguay                      2.1Montevideo
   <ol>                             2.2Punta del Este
      <li>Montevideo
      <li>Punta del Este
   </ol>
 </ul>
Las tablas son un poderosa herramienta a la hora de mostrar y relacionar
cierto tipo de información. Aún cuando muchos sitios son construidos (por su
naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el
valor de las tablas se vuelve esencial.

Weitere ähnliche Inhalte

Andere mochten auch

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
up
 
Guia 5 de html tablas
Guia 5 de html   tablasGuia 5 de html   tablas
Guia 5 de html tablas
lisvancelis
 
MANUAL BASICO EN HTML
MANUAL BASICO EN HTMLMANUAL BASICO EN HTML
MANUAL BASICO EN HTML
princesyadi27
 
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
Macepla822
 
Nociones Básicas del Html
Nociones Básicas del HtmlNociones Básicas del Html
Nociones Básicas del Html
Henry Valle
 
Etiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculoEtiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculo
Lucesita Mzm
 
Guia de aprendizaje 01 generalidades sobre html
Guia de aprendizaje 01   generalidades sobre htmlGuia de aprendizaje 01   generalidades sobre html
Guia de aprendizaje 01 generalidades sobre html
Ing Yeison Fabian
 
Pagina web e hipervinculos
Pagina web e hipervinculosPagina web e hipervinculos
Pagina web e hipervinculos
alerohe
 

Andere mochten auch (20)

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Guia 5 de html tablas
Guia 5 de html   tablasGuia 5 de html   tablas
Guia 5 de html tablas
 
MANUAL BASICO EN HTML
MANUAL BASICO EN HTMLMANUAL BASICO EN HTML
MANUAL BASICO EN HTML
 
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
 
Nociones Básicas del Html
Nociones Básicas del HtmlNociones Básicas del Html
Nociones Básicas del Html
 
Guia html
Guia htmlGuia html
Guia html
 
Paginas web 1
Paginas web 1Paginas web 1
Paginas web 1
 
Guia 01 html
Guia 01 htmlGuia 01 html
Guia 01 html
 
El corel draw
El corel drawEl corel draw
El corel draw
 
Etiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculoEtiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculo
 
GUIA DE HTML
GUIA DE HTMLGUIA DE HTML
GUIA DE HTML
 
Guía Completa de CSS3
Guía Completa de CSS3Guía Completa de CSS3
Guía Completa de CSS3
 
Guia de aprendizaje 01 generalidades sobre html
Guia de aprendizaje 01   generalidades sobre htmlGuia de aprendizaje 01   generalidades sobre html
Guia de aprendizaje 01 generalidades sobre html
 
Guía html5
Guía html5Guía html5
Guía html5
 
Corel draw x5
Corel draw x5Corel draw x5
Corel draw x5
 
Comandos de Corel DRAW
Comandos de Corel DRAWComandos de Corel DRAW
Comandos de Corel DRAW
 
Pagina web e hipervinculos
Pagina web e hipervinculosPagina web e hipervinculos
Pagina web e hipervinculos
 
Manual de corel x5
Manual de corel x5Manual de corel x5
Manual de corel x5
 
Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"
 

Ähnlich wie DIRECTIVAS BASICAS HTML (13)

Pagina con maquetacion
Pagina con maquetacionPagina con maquetacion
Pagina con maquetacion
 
Proceso transversal wh computo
Proceso transversal wh computoProceso transversal wh computo
Proceso transversal wh computo
 
Ejercicios en css
Ejercicios en cssEjercicios en css
Ejercicios en css
 
Comando y ejercicios para HTML
Comando y ejercicios para HTMLComando y ejercicios para HTML
Comando y ejercicios para HTML
 
Html actividades 1
Html actividades  1Html actividades  1
Html actividades 1
 
Ejercicios htm lcompletos
Ejercicios htm lcompletosEjercicios htm lcompletos
Ejercicios htm lcompletos
 
Html actividades 1
Html actividades  1Html actividades  1
Html actividades 1
 
html
htmlhtml
html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerra Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
 
HTML
HTMLHTML
HTML
 
Html jean
Html jeanHtml jean
Html jean
 

Kürzlich hochgeladen

FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
MiNeyi1
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 

Kürzlich hochgeladen (20)

SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
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...
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonables
 

DIRECTIVAS BASICAS HTML

  • 1.
  • 2. <html>”Inicia de la pagina web” <head> “Encabezado” <title>MI PRIMERA PAG WEB</title> “Titulo de la Ventana” </head> <body> <p><b>Bienvenido,</b></p> “Utilización de instrucciones” <p>Estás en la página <b>Pagina Web</b>.</p> <p>p> </body> </html>
  • 3.
  • 4. introducir un texto alineado a la izquierda escribiríamos: <p align="left">Texto alineado a la izquierda</p> El resultado seria: Texto alineado a la izquierda Para una justificación al centro: <p align="center">Texto alineado al centro</p> que daría: Texto alineado al centro Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto seria: Texto alineado a la derecha
  • 5. La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño. <html> <head> <title>Todos los encabezados</title> </head> <body> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body> </html>
  • 6. <MARQUEE> Texto que se desplaza </MARQUEE>> <MARQUEE DIRECTION=LEFT> Texto que se desplaza </MARQUEE> DIRECTION= Establece en que dirección se mueve el contenido del bloque en la pantalla. Puede tener dos valores: LEFT izquierda (por defecto) RIGHT derecha
  • 7. <b>Texto en negrita</b> <i>Texto en itálica</i> <U>Texto en itálica</U> Atributo FONT <font face="Comic Sans MS,arial,verdana">Este texto</font> <font size=4>Este texto es más grande</font> > <font color="red">Este texto está en rojo</font>
  • 8. <body background="fondo.jpg"> <img src="img1.gif" width="28" height="21" alt="Tamaño original" border="3"> <EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0"> <BGSOUND SRC="imagine.mid" LOOP=INFINITE>
  • 9.
  • 10. <ul> El resultado: <li>Argentina Países del mundo <li>Perú -Argentina <li>Chile -Perú </ul> -Chile <p>Reglas de comportamiento en el trabajo</p> Reglas de comportamiento en <ol> el trabajo <li>El jefe siempre tiene la razón El jefe siempre tiene la razón <li>En caso de duda aplicar regla 1 En caso de duda aplicar regla 1 </ol>
  • 11. <p>Ordenamos por numeros</p> Ordenamos por numeros <ol type="1"> romanos empezando por el 10 <li>Elemento 1 I. Elemento x <li> Elemento 2 </ol> II Elemento xi <p>Ciudades del mundo</p> Ciudades del mundo <ul> <li>Argentina 1,Argentina <ol> 1.1Buenos Aires <li>Buenos Aires 1.2Bariloche <li>Bariloche </ol> 2Uruguay <li>Uruguay 2.1Montevideo <ol> 2.2Punta del Este <li>Montevideo <li>Punta del Este </ol> </ul>
  • 12. Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial.