SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
Taller HTML


Diseñado: Ing. José Luis Sarta.
Contenido del Taller.


•   Introducción al HTML
•   Directivas del HTML
•   Estructura HTML
•   Ya creemos nuestra pagina.
Introducción al HTML.
HTML es el lenguaje con el que se definen las páginas
web.

Muy fácil de aprender.
Cualquier persona, aunque no haya programado en la
vida, pueda enfrentarse a la tarea de crear una web.
HTML es fácil y pronto podremos dominar el lenguaje.
Más adelante se conseguirán los resultados profesionales
gracias a nuestras capacidades para el diseño y nuestra
vena artista, así como a la incorporación de otros
lenguajes para definir el formato con el que se tienen que
presentar las webs
Directivas del HTML
Las directivas en HTML son aquellas “ordenes” que se encuentran entre
los símbolos <...> y que son de 2 clases: abiertas y cerradas.

  Abiertas.

Son aquellas directivas que no necesitan ser cerradas para que su acción
sea comprendida por el navegador (<HR>, <BR>, ...)

  Cerradas.

Son aquellas directivas que para ser comprendidas por el navegador,
deben indicar en dónde comienzan y e dónde terminan.
<DIRECTIVA>...</DIRECTIVA> quedan afectadas por la acción de
dicha DIRECTIVA en su totalidad (<H1>...</H1>,
<TABLE>...</TABLE>, ...).
Estructura HTML
Todo el contenido de un documento HTML debe
encontrarse englobado en el interior de la directiva cerrada
<HTML>...</HTML>.

La directiva <HTML>...</HTML> contiene en su interior
2 bloques: <HEAD>...</HEAD> que es la directiva que
señala la cabecera del documento y,
<BODY>...</BODY>, que contiene el cuerpo del
documento.

<HTML>
      <HEAD> ...
      </HEAD>
      <BODY> ...
      </BODY>
</HTML>
Diseñando nuestra pagina.

Clic
contrario

1               2



            3
Diseñando nuestra pagina.
          3

                4




    2
1
Diseñando nuestra pagina.
1




                  2

                      Nombre .htm

                                    3
Diseñando nuestra pagina
                 2



    Abrimos la       Icono del
    carpeta          explorador

1
Diseñando nuestra pagina
                           4




     1

           2         3
Aplicando la estructura

<HTML>
                   Para efectuar cualquier cambio.
    <HEAD> ...     Tips :

    </HEAD>        1.   Guardamos el documento.
                        ( Ctrl + G ).

    <BODY> ...     2. Actualizamos nuestra pagina
                      web. ( F5 ).

    </BODY>

</HTML>
<TITLE>
   • Es otra directiva de la cabecera del documento y
     es una directiva cerrada (<TITLE>...</TITLE>).
     Esta directiva nos da la opción de darle un título
     al documento, y mejor aún, permite visualizarlo
     en el visualizador de la barra del navegador.


<HTML>
     <HEAD>

     <TITLE> Técnico en mantenimiento </TITLE>

     </HEAD>
     ...
<BODY> CUERPO DEL
     DOCUMENTO
                      .
 En el cuerpo del documento se encontrarán
todas las directivas HTML así como el texto,
  las imágenes, sonidos, tablas, listas, etc...
  Como descripción gráfica, podremos decir
 que todo lo que aparezca entre las directivas
<BODY>...</BODY> será visualizado de una
  u otra manera en la pantalla del navegador
Directivas

• BACKGROUND="...“         • BGCOLOR="..."

 Este atributo define un   Este atributo define el
   gráfico en formato      color que aparecerá de
   .jpg o .gif que nos        fondo en nuestra
 servirá de fondo para             página.
  la página de nuestro         Los colores se
       documento.             definirán de dos
                            formas: en formato
                              RGB, o dando el
                              nombre del color
                             deseado en inglés.
Colores HTML

• Ejemplo

  BGCOLOR="#FF0000“
  en el atributo <BODY>
(<BODY BGCOLOR="#FF0000">)
  nos dará el color de fondo ROJO
  BGCOLOR="#00FF00" el color VERDE
  BGCOLOR="#0000FF" el color AZUL.


  TEXT="...” Nos permite modificar el color del
  texto general que aparecerá en nuestro documento.
Saltos de línea
<BODY>
Esto es un texto
que muestra como los retornos de carro
que pongo no se respetan en el
navegador
</BODY>

Directiva <BR> (Break Return).

<BODY>
Esto es un texto <BR>
que muestra como los retornos de <BR>
carro que pongo no se respetan <BR> en el
navegador <BR>
</BODY>
Párrafos

<BODY>
<P> En este ejemplo se muestra como pese a que no
nos importe el poder ver los retornos de carro en
distintas posiciones, la directiva de párrafo, lo que
hace es que cuando finaliza el ancho de pantalla de
que dispone, realiza un retorno de carro y continúa
con el texto en la siguiente línea. Si reducimos el
ancho de la pantalla del visualizador, veremos como
la directiva de párrafo se adapta a este ancho, dando
un formato distinto al texto. </P> </BODY>
Texto preformateado
Directiva cerrada (<PRE>...</PRE>) que permite visualizar el
texto tal y como se encuentre colocado entre estas 2 directivas.




<BODY>
<PRE>
Esto es un texto
que muestra como los retornos de carro
que pongo
Pasan igual en el navegador
<PRE>
</BODY>
Estilos de texto
Los estilos de texto sirven para modificar la apariencia
o aspecto final del texto en la pantalla del navegador
cuando vemos el documento, (negrita, subrayado,
tachado, ...).
Hay 2 tipos de estilos.

• los físicos

• los lógicos

(tanto unos como otros son directivas cerradas).
Estilos Físicos

•   Negrita <B>...</B>
•   Cursiva <I>...</I>
•   Subrayado <U>...</U>
•   Texto de Terminal <TT>...</TT>
•   Letra grande <BIG>...</BIG>
•   Letra pequeña <SMALL>...</SMALL>
•   Letra tachada <S>...</S>
•   Subindice <SUB>...</SUB>
•   Superíndice <SUP>...</SUP>
Estilos Lógicos
– Negrita <STRONG>...</STRONG> “fuerte” o
  marcado, se identifica con negrita.
– Enfatizado <EM>...</EM> se identifica con el estilo
  de cursiva.
– Cita o texto literal <CITE>...</CITE> se identifica
  con el estilo de texto citado textualmente.
– Texto de Terminal <KBD>...</KBD> similar a
  <TT>...</TT>.
– Código <CODE>...</CODE> código que
  normalmente se emplea para representar un elemento
  HTML.
– Definición <DFN>...</DFN>.
– Ejemplo <SAMP>...</SAMP>.
– Variable <VAR >...</VAR>.
Tamaño y color de letra.

  • Directiva <FONT>...</FONT>
Posee 3 atributos.

1. SIZE=“valor numérico” Tamaño de la letra.
Ej. FONT SIZE=“4”>...</FONT>

2. COLOR=“nombre o peso” Color de la letra.
Ej. <FONT COLOR=“#000000”>...</FONT>

3. FACE=“nombre de letra” Tipo de letra.
Ej. <FONT FACE=“arial”>...</FONT>
Cabeceras
         • Directiva <Hn> …… </Hn>


HTML emplea otro medio de modificar el tamaño Son las
denominadas “Headings” o cabeceras <Hn>...</Hn>, donde n
indica un número desde 1 hasta (en un principio), 6, siendo el 1 el
más grande de todos (el principal) y 6 el más pequeño (a la hora
de visualizar texto).
Posee el atributo ALIGN que permite cambiar la forma de alinear
la cabecera por defecto el valor es de LEFT (izda)
Teniendo CENTER (centrado) y RIGHT (derecho).

Ej. <H1 ALIGN=center>...</H1>).
Separadores, líneas
                Horizontales.
  • <HR> (Horizontal Rule) y es una directiva
    abierta.
Consiste de una línea horizontal que delimita 2 partes del documento
visualizándola gráficamente.

Posee 4 atributos.

SIZE=“valor numérico” Grosor de la línea.

WIDTH=“valor numérico” Anchura de la línea.

ALIGN=“LEFT | CENTER | RIGTH”

NOSHADE Elimina, la sombra que proyecta sobre el documento.
Imágenes en HTML
La inclusión de imágenes en un documento HTML precisa
de la directiva abierta <IMG> (image). Hace uso de
varios atributos.


   SRC=“imagen”

Indica el nombre del fichero gráfico a mostrar (GIF o JPEG)

   ALT=“texto”

Muestra un texto alternativo a la imagen que mostramos para las
personas que no tengan navegadores gráficos.
Imágenes en HTML
   ALIGN=“TOP | MIDDLE | BOTTOM”

Indica como se ha de alinear el texto que siga o preceda a la imagen
que mostremos. TOP coloca el comienzo de texto en la parte superior
de la imagen, MIDDLE a la altura de la parte central de la misma y
BOTTOM alinea el texto en el pie de imagen.

   BORDER=“tamaño numérico”

Indica un valor numérico para el borde de una imagen que se visualiza
como un marco alrededor de la misma en la pantalla del navegador
Imágenes en HTML
   HEIGHT=“tamaño numérico”

Indica el alto de la imagen en puntos (pixeles) o en porcentaje. Se
emplea para variar el tamaño de la imagen original, así como para
indicar al navegador el tamaño de pantalla que debe de reservar para
dicho gráfico en altura.

  WIDTH=“tamaño numérico”

Indica el ancho de la imagen en puntos (pixeles) o en porcentaje. Se
emplea para variar el tamaño de la imagen original, así como para
indicar al navegador el tamaño de pantalla que debe de reservar para
dicho gráfico en anchura.
Imágenes en HTML
   HSPACE=“valor de margen”

Indica un margen horizontal que debe existir entre la imagen y el
texto que lo circunde (si lo hubiera). Este valor separa, tanto al texto
que precede como al que sigue a la imagen.

  VSPACE=“valor de margen”

Al igual que el anterio, pero para márgenes verticales de la imagen.
Marquesinas en HTML
Las marquesinas son una fracción de texto que se desplaza a
lo largo de la pantalla.

< MARQUEE > texto en movimiento < /MARQUEE >

Atributos.

   Bgcolor= Con este modificador podemos modificar el color de
fondo de la marquesina.

   WIDTH = Nos permite determinar el ancho de pantalla que ocupará.
Podemos expresarlo en puntos o en %.
Ej: < MARQUEE WIDTH=50% >
Marquesinas en HTML
   HEIGHT = Igual que el caso anterior, pero refiriéndose a
la altura de la marquesina.

  ALIGN = Al igual que una imagen o una tabla, las
marquesinas se pueden alinear mediante: TOP, MIDDLE ,
BOTTOM, pero no con LEFT, RIGHT.

  DIRECTION = Dirección hacia la cual se mueve la
marquesina. Puede ser LEFT (por defecto ) o RIGHT.

   BEHAVIOR=ALTERNATE : Si introducimos este
parámetro, la marquesina "rebotará" de un lado a otro de la
pantalla.
Marquesinas en HTML
   SROLLAMOUNT = X : Nos permite determinar la cantidad de
puntos que se desplazará el texto en cada "salto". Cuanto más pequeña
sea la cantidad, mayor será la sensación de "scroll".

   SCROLLDELAY = X : Indica el tiempo que transcurrirá entre cada
salto del texto, expresado en milisegundos

  LOOP = Indica el nº de veces que se repetirá la acción de la
marquesina, que por defecto será infinito.

   HSPACE = Permite definir la separación horizontal del texto que esté
fuera de la marquesina, con respecto a ella.

   VSPACE = Igual que hspace, pero en referencia a la separación
vertical.
• Fin

Más contenido relacionado

La actualidad más candente

Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
Miguel Barajas
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadas
jennypalcio
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
Wilmer Acero
 
Clase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDFClase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDF
nicolasmolinach
 

La actualidad más candente (18)

Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadas
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 
Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
Etiquetas básicas en html
Etiquetas básicas en htmlEtiquetas básicas en html
Etiquetas básicas en html
 
Html
HtmlHtml
Html
 
Colegio nacional nicolás esguerra trabajo 2
Colegio nacional nicolás esguerra trabajo 2Colegio nacional nicolás esguerra trabajo 2
Colegio nacional nicolás esguerra trabajo 2
 
Etiqueta de hatml 1
Etiqueta de hatml 1Etiqueta de hatml 1
Etiqueta de hatml 1
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Comandos html
Comandos htmlComandos html
Comandos html
 
Clase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDFClase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDF
 
Directivas en html
Directivas en htmlDirectivas en html
Directivas en html
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 

Destacado (11)

Estructura principal de HTML
Estructura principal de HTMLEstructura principal de HTML
Estructura principal de HTML
 
Estructura de un documento html
Estructura de un documento htmlEstructura de un documento html
Estructura de un documento html
 
estructura basica de html
estructura basica de htmlestructura basica de html
estructura basica de html
 
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la WebHtml 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
 
ESTRUCTURA DOCUMENTO WEB
ESTRUCTURA DOCUMENTO WEBESTRUCTURA DOCUMENTO WEB
ESTRUCTURA DOCUMENTO WEB
 
Documento html
Documento htmlDocumento html
Documento html
 
Curso html
Curso   htmlCurso   html
Curso html
 
Estructura Básica de PHP
Estructura Básica de PHPEstructura Básica de PHP
Estructura Básica de PHP
 
Tabla de etiquetas de HTML
Tabla de etiquetas de HTMLTabla de etiquetas de HTML
Tabla de etiquetas de HTML
 
Listado etiquetas html 5
Listado etiquetas html 5Listado etiquetas html 5
Listado etiquetas html 5
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 

Similar a [modo de compatibilidad] HTML (20)

HTML
HTMLHTML
HTML
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 
Tag s
Tag sTag s
Tag s
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Html creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
 
html
htmlhtml
html
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Clase 5 lenguaje html
Clase 5  lenguaje htmlClase 5  lenguaje html
Clase 5 lenguaje html
 
Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2
 
Manual intencivo de htlm
Manual intencivo de htlmManual intencivo de htlm
Manual intencivo de htlm
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
2. html
2. html2. html
2. html
 
Deber vero
Deber veroDeber vero
Deber vero
 

Más de JONNATAN TORO

Más de JONNATAN TORO (20)

Anti-Reforma Tributaria
Anti-Reforma TributariaAnti-Reforma Tributaria
Anti-Reforma Tributaria
 
Presentaciones con Diapositivas
Presentaciones con DiapositivasPresentaciones con Diapositivas
Presentaciones con Diapositivas
 
Tecnicas de Busqueda de Trabajo
Tecnicas de Busqueda de TrabajoTecnicas de Busqueda de Trabajo
Tecnicas de Busqueda de Trabajo
 
Borrador hoja de vida
Borrador hoja de vidaBorrador hoja de vida
Borrador hoja de vida
 
50 fallas comunes_de_monitores_de_pc
50 fallas comunes_de_monitores_de_pc50 fallas comunes_de_monitores_de_pc
50 fallas comunes_de_monitores_de_pc
 
Peligros en los equipos electrónicos
Peligros en los equipos electrónicosPeligros en los equipos electrónicos
Peligros en los equipos electrónicos
 
Dispositivos y accesorios
Dispositivos y accesoriosDispositivos y accesorios
Dispositivos y accesorios
 
Fundamentos de hardware para pc 4
Fundamentos de hardware para pc 4Fundamentos de hardware para pc 4
Fundamentos de hardware para pc 4
 
Dispositivosde entradaysalida
Dispositivosde entradaysalidaDispositivosde entradaysalida
Dispositivosde entradaysalida
 
dispositivos de entrada y salida
dispositivos de entrada y salidadispositivos de entrada y salida
dispositivos de entrada y salida
 
Fundamentos de hardware para pc 2
Fundamentos de hardware para pc 2Fundamentos de hardware para pc 2
Fundamentos de hardware para pc 2
 
Origen de los computadores
Origen de los computadoresOrigen de los computadores
Origen de los computadores
 
arquitectura 1 PC
arquitectura 1 PCarquitectura 1 PC
arquitectura 1 PC
 
Fumar aumenta el riesgo de desarrollar cáncer de la piel
Fumar aumenta el riesgo de desarrollar cáncer de la pielFumar aumenta el riesgo de desarrollar cáncer de la piel
Fumar aumenta el riesgo de desarrollar cáncer de la piel
 
Furia sin control entre adolescentes
Furia sin control entre adolescentesFuria sin control entre adolescentes
Furia sin control entre adolescentes
 
Beneficios vida-y-salud
Beneficios vida-y-saludBeneficios vida-y-salud
Beneficios vida-y-salud
 
Beneficios vida-y-salud
Beneficios vida-y-saludBeneficios vida-y-salud
Beneficios vida-y-salud
 
Historia de las_computadoras_quinta_generacion
Historia de las_computadoras_quinta_generacionHistoria de las_computadoras_quinta_generacion
Historia de las_computadoras_quinta_generacion
 
Fatiga crónica
Fatiga crónicaFatiga crónica
Fatiga crónica
 
Dentadura sana
Dentadura sanaDentadura sana
Dentadura sana
 

Último

Presentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdf
Presentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdfPresentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdf
Presentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdf
juancmendez1405
 

Último (20)

Evaluación de los Factores Internos de la Organización
Evaluación de los Factores Internos de la OrganizaciónEvaluación de los Factores Internos de la Organización
Evaluación de los Factores Internos de la Organización
 
4.Conectores Dos_Enfermería_Espanolacademico
4.Conectores Dos_Enfermería_Espanolacademico4.Conectores Dos_Enfermería_Espanolacademico
4.Conectores Dos_Enfermería_Espanolacademico
 
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOSTRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
 
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
 
Presentación Propuesta de Proyecto Social Colorido y Juvenil Multicolor y Neg...
Presentación Propuesta de Proyecto Social Colorido y Juvenil Multicolor y Neg...Presentación Propuesta de Proyecto Social Colorido y Juvenil Multicolor y Neg...
Presentación Propuesta de Proyecto Social Colorido y Juvenil Multicolor y Neg...
 
Lec. 08 Esc. Sab. Luz desde el santuario
Lec. 08 Esc. Sab. Luz desde el santuarioLec. 08 Esc. Sab. Luz desde el santuario
Lec. 08 Esc. Sab. Luz desde el santuario
 
Presentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdf
Presentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdfPresentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdf
Presentación de medicina Enfermedades Fotográfico Moderno Morado (1).pdf
 
5.Deicticos Uno_Enfermería_EspanolAcademico
5.Deicticos Uno_Enfermería_EspanolAcademico5.Deicticos Uno_Enfermería_EspanolAcademico
5.Deicticos Uno_Enfermería_EspanolAcademico
 
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
 
5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf
5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf
5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf
 
La historia de la vida estudiantil a 102 años de la fundación de las Normales...
La historia de la vida estudiantil a 102 años de la fundación de las Normales...La historia de la vida estudiantil a 102 años de la fundación de las Normales...
La historia de la vida estudiantil a 102 años de la fundación de las Normales...
 
2. Entornos Virtuales de Aprendizaje.pptx
2. Entornos Virtuales de Aprendizaje.pptx2. Entornos Virtuales de Aprendizaje.pptx
2. Entornos Virtuales de Aprendizaje.pptx
 
ensayo literario rios profundos jose maria ARGUEDAS
ensayo literario rios profundos jose maria ARGUEDASensayo literario rios profundos jose maria ARGUEDAS
ensayo literario rios profundos jose maria ARGUEDAS
 
6.Deícticos Dos_Enfermería_EspanolAcademico
6.Deícticos Dos_Enfermería_EspanolAcademico6.Deícticos Dos_Enfermería_EspanolAcademico
6.Deícticos Dos_Enfermería_EspanolAcademico
 
Cerebelo Anatomía y fisiología Clase presencial
Cerebelo Anatomía y fisiología Clase presencialCerebelo Anatomía y fisiología Clase presencial
Cerebelo Anatomía y fisiología Clase presencial
 
Tipologías de vínculos afectivos (grupo)
Tipologías de vínculos afectivos (grupo)Tipologías de vínculos afectivos (grupo)
Tipologías de vínculos afectivos (grupo)
 
Como construir los vínculos afectivos (Grupal)
Como construir los vínculos afectivos (Grupal)Como construir los vínculos afectivos (Grupal)
Como construir los vínculos afectivos (Grupal)
 
3.Conectores uno_Enfermería_EspAcademico
3.Conectores uno_Enfermería_EspAcademico3.Conectores uno_Enfermería_EspAcademico
3.Conectores uno_Enfermería_EspAcademico
 
📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo
📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo
📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo
 
ACERTIJO LA RUTA DE LAS ADIVINANZAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
ACERTIJO LA RUTA DE LAS ADIVINANZAS OLÍMPICAS. Por JAVIER SOLIS NOYOLAACERTIJO LA RUTA DE LAS ADIVINANZAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
ACERTIJO LA RUTA DE LAS ADIVINANZAS OLÍMPICAS. Por JAVIER SOLIS NOYOLA
 

[modo de compatibilidad] HTML

  • 1. Taller HTML Diseñado: Ing. José Luis Sarta.
  • 2. Contenido del Taller. • Introducción al HTML • Directivas del HTML • Estructura HTML • Ya creemos nuestra pagina.
  • 3. Introducción al HTML. HTML es el lenguaje con el que se definen las páginas web. Muy fácil de aprender. Cualquier persona, aunque no haya programado en la vida, pueda enfrentarse a la tarea de crear una web. HTML es fácil y pronto podremos dominar el lenguaje. Más adelante se conseguirán los resultados profesionales gracias a nuestras capacidades para el diseño y nuestra vena artista, así como a la incorporación de otros lenguajes para definir el formato con el que se tienen que presentar las webs
  • 4. Directivas del HTML Las directivas en HTML son aquellas “ordenes” que se encuentran entre los símbolos <...> y que son de 2 clases: abiertas y cerradas. Abiertas. Son aquellas directivas que no necesitan ser cerradas para que su acción sea comprendida por el navegador (<HR>, <BR>, ...) Cerradas. Son aquellas directivas que para ser comprendidas por el navegador, deben indicar en dónde comienzan y e dónde terminan. <DIRECTIVA>...</DIRECTIVA> quedan afectadas por la acción de dicha DIRECTIVA en su totalidad (<H1>...</H1>, <TABLE>...</TABLE>, ...).
  • 5. Estructura HTML Todo el contenido de un documento HTML debe encontrarse englobado en el interior de la directiva cerrada <HTML>...</HTML>. La directiva <HTML>...</HTML> contiene en su interior 2 bloques: <HEAD>...</HEAD> que es la directiva que señala la cabecera del documento y, <BODY>...</BODY>, que contiene el cuerpo del documento. <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>
  • 9. Diseñando nuestra pagina 2 Abrimos la Icono del carpeta explorador 1
  • 11. Aplicando la estructura <HTML> Para efectuar cualquier cambio. <HEAD> ... Tips : </HEAD> 1. Guardamos el documento. ( Ctrl + G ). <BODY> ... 2. Actualizamos nuestra pagina web. ( F5 ). </BODY> </HTML>
  • 12. <TITLE> • Es otra directiva de la cabecera del documento y es una directiva cerrada (<TITLE>...</TITLE>). Esta directiva nos da la opción de darle un título al documento, y mejor aún, permite visualizarlo en el visualizador de la barra del navegador. <HTML> <HEAD> <TITLE> Técnico en mantenimiento </TITLE> </HEAD> ...
  • 13. <BODY> CUERPO DEL DOCUMENTO . En el cuerpo del documento se encontrarán todas las directivas HTML así como el texto, las imágenes, sonidos, tablas, listas, etc... Como descripción gráfica, podremos decir que todo lo que aparezca entre las directivas <BODY>...</BODY> será visualizado de una u otra manera en la pantalla del navegador
  • 14. Directivas • BACKGROUND="...“ • BGCOLOR="..." Este atributo define un Este atributo define el gráfico en formato color que aparecerá de .jpg o .gif que nos fondo en nuestra servirá de fondo para página. la página de nuestro Los colores se documento. definirán de dos formas: en formato RGB, o dando el nombre del color deseado en inglés.
  • 15. Colores HTML • Ejemplo BGCOLOR="#FF0000“ en el atributo <BODY> (<BODY BGCOLOR="#FF0000">) nos dará el color de fondo ROJO BGCOLOR="#00FF00" el color VERDE BGCOLOR="#0000FF" el color AZUL. TEXT="...” Nos permite modificar el color del texto general que aparecerá en nuestro documento.
  • 16. Saltos de línea <BODY> Esto es un texto que muestra como los retornos de carro que pongo no se respetan en el navegador </BODY> Directiva <BR> (Break Return). <BODY> Esto es un texto <BR> que muestra como los retornos de <BR> carro que pongo no se respetan <BR> en el navegador <BR> </BODY>
  • 17. Párrafos <BODY> <P> En este ejemplo se muestra como pese a que no nos importe el poder ver los retornos de carro en distintas posiciones, la directiva de párrafo, lo que hace es que cuando finaliza el ancho de pantalla de que dispone, realiza un retorno de carro y continúa con el texto en la siguiente línea. Si reducimos el ancho de la pantalla del visualizador, veremos como la directiva de párrafo se adapta a este ancho, dando un formato distinto al texto. </P> </BODY>
  • 18. Texto preformateado Directiva cerrada (<PRE>...</PRE>) que permite visualizar el texto tal y como se encuentre colocado entre estas 2 directivas. <BODY> <PRE> Esto es un texto que muestra como los retornos de carro que pongo Pasan igual en el navegador <PRE> </BODY>
  • 19. Estilos de texto Los estilos de texto sirven para modificar la apariencia o aspecto final del texto en la pantalla del navegador cuando vemos el documento, (negrita, subrayado, tachado, ...). Hay 2 tipos de estilos. • los físicos • los lógicos (tanto unos como otros son directivas cerradas).
  • 20. Estilos Físicos • Negrita <B>...</B> • Cursiva <I>...</I> • Subrayado <U>...</U> • Texto de Terminal <TT>...</TT> • Letra grande <BIG>...</BIG> • Letra pequeña <SMALL>...</SMALL> • Letra tachada <S>...</S> • Subindice <SUB>...</SUB> • Superíndice <SUP>...</SUP>
  • 21. Estilos Lógicos – Negrita <STRONG>...</STRONG> “fuerte” o marcado, se identifica con negrita. – Enfatizado <EM>...</EM> se identifica con el estilo de cursiva. – Cita o texto literal <CITE>...</CITE> se identifica con el estilo de texto citado textualmente. – Texto de Terminal <KBD>...</KBD> similar a <TT>...</TT>. – Código <CODE>...</CODE> código que normalmente se emplea para representar un elemento HTML. – Definición <DFN>...</DFN>. – Ejemplo <SAMP>...</SAMP>. – Variable <VAR >...</VAR>.
  • 22. Tamaño y color de letra. • Directiva <FONT>...</FONT> Posee 3 atributos. 1. SIZE=“valor numérico” Tamaño de la letra. Ej. FONT SIZE=“4”>...</FONT> 2. COLOR=“nombre o peso” Color de la letra. Ej. <FONT COLOR=“#000000”>...</FONT> 3. FACE=“nombre de letra” Tipo de letra. Ej. <FONT FACE=“arial”>...</FONT>
  • 23. Cabeceras • Directiva <Hn> …… </Hn> HTML emplea otro medio de modificar el tamaño Son las denominadas “Headings” o cabeceras <Hn>...</Hn>, donde n indica un número desde 1 hasta (en un principio), 6, siendo el 1 el más grande de todos (el principal) y 6 el más pequeño (a la hora de visualizar texto). Posee el atributo ALIGN que permite cambiar la forma de alinear la cabecera por defecto el valor es de LEFT (izda) Teniendo CENTER (centrado) y RIGHT (derecho). Ej. <H1 ALIGN=center>...</H1>).
  • 24. Separadores, líneas Horizontales. • <HR> (Horizontal Rule) y es una directiva abierta. Consiste de una línea horizontal que delimita 2 partes del documento visualizándola gráficamente. Posee 4 atributos. SIZE=“valor numérico” Grosor de la línea. WIDTH=“valor numérico” Anchura de la línea. ALIGN=“LEFT | CENTER | RIGTH” NOSHADE Elimina, la sombra que proyecta sobre el documento.
  • 25. Imágenes en HTML La inclusión de imágenes en un documento HTML precisa de la directiva abierta <IMG> (image). Hace uso de varios atributos. SRC=“imagen” Indica el nombre del fichero gráfico a mostrar (GIF o JPEG) ALT=“texto” Muestra un texto alternativo a la imagen que mostramos para las personas que no tengan navegadores gráficos.
  • 26. Imágenes en HTML ALIGN=“TOP | MIDDLE | BOTTOM” Indica como se ha de alinear el texto que siga o preceda a la imagen que mostremos. TOP coloca el comienzo de texto en la parte superior de la imagen, MIDDLE a la altura de la parte central de la misma y BOTTOM alinea el texto en el pie de imagen. BORDER=“tamaño numérico” Indica un valor numérico para el borde de una imagen que se visualiza como un marco alrededor de la misma en la pantalla del navegador
  • 27. Imágenes en HTML HEIGHT=“tamaño numérico” Indica el alto de la imagen en puntos (pixeles) o en porcentaje. Se emplea para variar el tamaño de la imagen original, así como para indicar al navegador el tamaño de pantalla que debe de reservar para dicho gráfico en altura. WIDTH=“tamaño numérico” Indica el ancho de la imagen en puntos (pixeles) o en porcentaje. Se emplea para variar el tamaño de la imagen original, así como para indicar al navegador el tamaño de pantalla que debe de reservar para dicho gráfico en anchura.
  • 28. Imágenes en HTML HSPACE=“valor de margen” Indica un margen horizontal que debe existir entre la imagen y el texto que lo circunde (si lo hubiera). Este valor separa, tanto al texto que precede como al que sigue a la imagen. VSPACE=“valor de margen” Al igual que el anterio, pero para márgenes verticales de la imagen.
  • 29. Marquesinas en HTML Las marquesinas son una fracción de texto que se desplaza a lo largo de la pantalla. < MARQUEE > texto en movimiento < /MARQUEE > Atributos. Bgcolor= Con este modificador podemos modificar el color de fondo de la marquesina. WIDTH = Nos permite determinar el ancho de pantalla que ocupará. Podemos expresarlo en puntos o en %. Ej: < MARQUEE WIDTH=50% >
  • 30. Marquesinas en HTML HEIGHT = Igual que el caso anterior, pero refiriéndose a la altura de la marquesina. ALIGN = Al igual que una imagen o una tabla, las marquesinas se pueden alinear mediante: TOP, MIDDLE , BOTTOM, pero no con LEFT, RIGHT. DIRECTION = Dirección hacia la cual se mueve la marquesina. Puede ser LEFT (por defecto ) o RIGHT. BEHAVIOR=ALTERNATE : Si introducimos este parámetro, la marquesina "rebotará" de un lado a otro de la pantalla.
  • 31. Marquesinas en HTML SROLLAMOUNT = X : Nos permite determinar la cantidad de puntos que se desplazará el texto en cada "salto". Cuanto más pequeña sea la cantidad, mayor será la sensación de "scroll". SCROLLDELAY = X : Indica el tiempo que transcurrirá entre cada salto del texto, expresado en milisegundos LOOP = Indica el nº de veces que se repetirá la acción de la marquesina, que por defecto será infinito. HSPACE = Permite definir la separación horizontal del texto que esté fuera de la marquesina, con respecto a ella. VSPACE = Igual que hspace, pero en referencia a la separación vertical.