taller de html n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
TALLER DE HTML PowerPoint Presentation
Download Presentation
TALLER DE HTML

Loading in 2 Seconds...

play fullscreen
1 / 22

TALLER DE HTML - PowerPoint PPT Presentation


  • 97 Views
  • Uploaded on

TALLER DE HTML. Ing Adrian Espinosa. ¿ QUE ES HTML?. Las siglas HTML se refieren a: HyperText Markup Language Es uno de los lenguajes m á s utilizados en el Web Wide Web. Las p á ginas de Internet est á n escritas en este lenguaje.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'TALLER DE HTML' - dante-donovan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
taller de html

TALLER DE HTML

Ing Adrian Espinosa

que es html
¿QUE ES HTML?
  • Las siglas HTML se refieren a:
    • HyperText Markup Language
  • Es uno de los lenguajes más utilizados en el Web Wide Web.
  • Las páginas de Internet están escritas en este lenguaje.
  • Le brinda al autor la oportunidad de integrar texto, fotos, sonidos y enlaces en un solo lugar.
una p gina b sica
UNA PÁGINA BÁSICA
  • El lenguaje trabaja a base de etiquetas.
  • La información que aparece dentro de estas estará influenciada por las mismas.
    • <xxx> Inicio de una etiqueta.
    • </xxx> Cierre de una etiqueta.
continuaci n
Continuación:
  • Todo el documento debe estar entre las etiquetas <HTML> Y </HTML>.
  • El documento está dividido en dos partes principales:
    • El encabezamiento
      • En este hay información que no se ve en la pantalla principal.
      • Este debe ser corto y descriptivo, ya que será lo que verán las personas cuando añadan la página a sus favoritos.
continuaci n1
Continuación:
  • La etiqueta del encabezamiento se trabajará de la siguiente manera:
    • <HEAD>Texto</HEAD>
  • La etiqueta del cuerpo será:
    • <BODY>Texto</BODY>
  • La etiqueta del título será:
    • <TITLE>Texto</TITLE>
continuaci n2
Continuación:
  • La estructura básica de las partes de una página Web son:

<HTML>

<HEAD><TITLE>título </TITLE></HEAD>

<BODY>Es la información que mostrará la página al usuario </BODY>

</HTML>

formato del texto
FORMATO DEL TEXTO
  • Podemos poner color al fondo utilizando la siguiente instrucción:
    • <BODY BGCOLOR=“xxyyzz”>
      • Indica que lleva tres pares de valores que corresponden a R (rojo), G (verde), B (azul)
      • Estos pueden tomar valores desde 00 a FF, si se combinan se obtendrán distintos colores.
        • Ej. “#FAB894” anaranjado
          • “FA” rojo, “B8” verde y “94” azul.
      • Para obtener BLANCO sería “#FFFFFF”, el Negro “#000000” Y ROJO “#FF0000”.
continuaci n3
Continuación:
  • Colores

xx es un número indicativo de la cantidad de color rojo.

YY es un número indicativo de la cantidad de color verde.

ZZ es un número indicativo de la cantidad de color azul.

  • Los números están representados en numeración hexadecimal, esta numeración se compone de 16 dígitos:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Donde el número menor es 00 y el mayor es FF.

Ejemplo: el número rojo es el #FF0000, debido a que tiene el máximo de rojo y cero de los otros dos colores.

continuaci n4
Continuación:
  • Los colores primarios son:

#FF0000 rojo

#00FF00 verde

#0000FF azul

  • Otros colores son:

#FFFFFF blanco

#000000 negro

#FFFF00 amarillo

continuaci n5
Continuación:
  • Otras instrucciones:
    • Para definir párrafos: <P>Texto</P>
    • Línea en blanco: <BR>Texto</BR>
    • Centrar texto: <CENTER>Texto</CENTER>
    • Línea horizontal: <HR>Texto</HR>
  • Para el color del texto utiliza el comando:
    • <FONT COLOR=“#xxyyzz”>Texto</FONT>
      • Debemos recordar que estas instrucciones hay que desactivarlas.
continuaci n6
Tamaño de letra:

<H1>Texto</H1>

<H2>Texto</H2>

<H3>Texto</H3>

<H4>Texto</H4>

<H5>Texto</H5>

<H6>Texto</H6>

Aspecto de letra:

<b>Texto</b> negrilla

<strong>Texto</strong>

<strike>Texto</strike>

<i>Texto</i> cursiva

<sup>Texto </sup>superíndice

<sub>Texto</sub>subíndice

Continuación:
ejemplo

< H1 > El mayor < /H1 >

< b > Negrita < /b >< strong > Negrita < /strong >

El mayor

NegritaNegrita

< i > Cursiva < /i >< em > Cursiva < /em >

< H4 > Tamaño 4 < /H4 >

Tamaño 4

CursivaCursiva

< H2 > Tamaño 2 < /H2 >

< strike > Tachada < /strike >

Tamaño 2

Tachada

< sup > Superíndice < /sup >

< H5 > Tamaño 5 < /H5 >

Tamaño 5

NormalSuperíndice

< kbd > Máquina < /kbd >

Máquina

< sub > subíndice < /sub >

Normalsubíndice

< H3 > Tamaño 3 < /H3 >

Tamaño 3

< H6 > Tamaño 6 < /H6 >

Tamaño 6

Ejemplo:

Tabla 1

Tabla 2

continuaci n7
Caracteres especiales

&aacute; á

&eacute; é

&iacute; í

&oacute; ó

&uacute; ú

&Aacute; Á

&Eacute; É

&Iacute; ĺ

&Oacute; Ó

&Uacute; Ú

Otros códigos

&ntilde; ñ

&Ntilde; Ñ

&uuml; ü

&Uumi; Ü

&#191; ¿

&#161; ¡

Continuación:
continuaci n8
Continuación:
  • Movimiento
    • Puede dar movimiento al texto, gráficos y otros.
    • La instrucción a usar es la siguiente:
      • <marquee></marquee> (instucción básica)
      • <marquee scrolldelay=n></marquee>
        • Establece el númeo de milisegundos entre cada “scroll”
          • Scrolldelay=“200”
          • Scrolldelay=“100”
          • Scrolldelay=“5”
continuaci n9
Continuación:
  • <marquee scrollamount=n></marquee>
    • scrollamount=“1”
    • scrollamount=“5”
    • scrollamount=“10”
    • scrollamount=“50”
    • scrollamount=“100”
  • <marqueeloop=n></marquee>
  • <blink><marquee><</marquee></blink>
listas
LISTAS
  • Listas desordenadas (unordered list)
    • Útiles para crear una lista de asuntos o cosas que no tienen un orden.
      • Instrucciones a utilizar:

<UL>

<LI>

<LI>

</UL>

          • <LI> Esta instrucción se repite tantas veces como sea necesario,hasta terminar la lista.
continuaci n10
Continuación:
  • Listas ordenadas (ordered lists)
  • Utilizadas para mostrar información en un orden. El resultado aparecerá automáticamente enumerado.
    • Instrucciones a utilizar:

<OL>

<LI>

<LI>

</OL>

continuaci n11
Listas de definición

Apropiadas para glosarios, definiciones o términos

Cada renglón consiste de dos pates:

Término se ha de definir.

<DT> (definition term)

Definición del término.

<DD> (definition definition)

Instrucción a utilizar:

<DL>

<DT>

<DD>

<DT>

<DD>

</DL>

*<DT> Y <DL> Se repetirán tantas veces como sea necesario.

Continuación:
enlaces
ENLACES
  • Para trabajar enlaces:
    • Es una forma de hacer que desde una página podamos acceder a otra página.
      • Enlaces con otras páginas:
        • <A HREF=“ejercicio2.html”>Pulse aquí para ir a ejercicio1</A>
continuaci n12
Continuación:
  • Enlace con una dirección de Internet:
    • <A HREF=www.endi.com>Periódico El Nuevo Día</A>
  • Enlace con una dirección de correo electrónico:
    • <A HREF=MAILTO:“mrosa@aguadilla.inter.edu”> Envía un mensaje a la conferenciante</A>
      • Puede utilizar una imagen, gráfico o foto como enlace.
  • Enlace utilizando una imagen:
    • <A HREF=“ejercicio3.html”><IMG SRC=“nombre del gráfico y extensión”></A>
tablas
TABLAS
  • Elementos de una tabla
continuaci n13
Continuación:
  • Tabla básica:

<TABLE> Habre la instrucción de tabla.

<TR> Comenzar una fila en la tabla.

<TD> Habre una celda de data.

(aquí puede entrar su texto, gráfico, foto, enlace, etc.)

</TD> Cierra la celda de data.

</TR> Cierra la fila.

</TABLE> Cierra la tabla.