Tutorial 2   Usando html
Upcoming SlideShare
Loading in...5
×
 

Tutorial 2 Usando html

on

  • 458 views

 

Statistics

Views

Total Views
458
Views on SlideShare
440
Embed Views
18

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 18

http://quierounblog.wikispaces.com 18

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tutorial 2   Usando html Tutorial 2 Usando html Document Transcript

  • TUTORIAL 2: UN POCO DE HTMLVamos a estudiar en este tutorial las principales etiquetas y códigos HTML. Lo esencial es comprender que todas las instrucciones en HTML: • Comienzan con una etiqueta de apertura <ETIQUETA> (poniendo en "etiqueta" el valor correspondiente) • Terminan con una etiqueta de cierre </ETIQUETA> Recuerda que el objetivo NO ES APRENDER A CREAR ESTAS ETIQUETAS SINO ENTENDERLAS E IDENTIFICARLAS CUANDO APAREZCAN O HAYA QUE PEGAR ESTE CÓDIGOINDICE DE TEMAS: • Formato de texto • Interlineados • Listas • Hipervínculos, • Tablas • Imágenes • Vídeos • Insertar webs (iframe)
  • Formato de textoPara escribir un texto en negrita, en cursiva o subrayado, las etiquetas usadas son: o NEGRITA: <strong>text</strong> o CURSIVA: <em> texto </em> o SUBRAYADO: <span style="text-decoration: underline;">texto</span>Así quedaría el encabezado anterior, con sus etiquetas:(En adelante omitiremos la etiqueta de cierre, para facilitar la lectura)Cambiar de color es fácil:rojo, verde, azul o negro tienen como etiquetas<span style="color: #código del color correspondiente;"> texto coloreado </span>.Los códigos de colores más usados son: • rojo: #ff0000 • verde: #99cc00 • azul: #3366ff • negro: # 000000 • el blanco tiene como etiqueta #FFFFFFEn esta web tienes todos los colores y puedes copiar los códigos correspondientes.
  • Interlineados y líneasLos interlineados tienen como etiqueta <br> o <p> El espacio generado bajo la líneaanterior se ha conseguido mediante dos etiquetas <p> consecutivas: <p></p> <p></p>Las líneas, para separar partes de textos tienen como etiqueta <hr>. Así, la línea quesepara este apartado del siguiente, tiene como código:siendo "height", la altura en px; width: la anchura, en porcentaje o en pixeles.Listas de itemsLas listas de items aparecen con las etiquetas <ul> (unordered list), si no sonnumeradas, separando cada línea con la etiqueta <li>. Así, la lista • item 1 • item 2 • item 3tiene la sintaxis<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>Mientras que las listas ordenadas tiene como etiqueta <ol> (ordered list) separandotambién cada línea con etiquetas <li>, como en el ejemplo siguiente: 1. item 1 2. item 2 3. item 3con sintaxis<ol><li>item 1</li><li>item 2</li><li>item 3</li></ol>
  • HipervínculosSon enlaces a páginas web u otros archivos. La dirección del recurso en Internet sellama URL. Las etiquetas correspondientes son <a href="URL">texto a enlazar</a>.Además se puede especificar el destino, intercalando la etiqueta target="destino", entre"a" y "href".Por ejemplo, si queremos ir a la página de la Escuela Oficial de Idiomas de Aranjuez,escribiremos como sintaxis:Los posibles destinos son: • _blank: abre la página en una nueva ventana. Es la más usada. • _self: abre la página en la ventana actual (reemplaza a la página actual) • _top: abre la página en la ventana actual reemplazando a todas las páginas y marcos que halla.TablasEn una tabla hay que especificar el número de filas y columnas.Veamos la siguiente tabla. Las filas tiene la sintaxis <tr> y las columnas <td>. La tabla,en su conjunto, tiene la etiqueta <table> y el cuerpo o contenido de la tabla se enmarcaentre etiquetas <tbody>CABECERA CABECERA CABECERA 1 2 3FILA 1 - FILA 1 - FILA 1 -COLUMNA COLUMNA COLUMNA1 2 3FILA 2 - FILA 2 - FILA 2 -COLUMNA COLUMNA COLUMNA1 2 3FILA 3 - FILA 3 - FILA 3 -COLUMNA COLUMNA COLUMNA1 2 3
  • Esta sería la sintaxis de esta tabla:Observa que: • Se fija la altura, anchura, alineación y grosor del borde de la tabla. • Cellpadding es el espacio entre el texto y el borde la celda. • Cellspacing, es el espacio entre celdas. • Después se definen las columnas y, en cada una de ellas, las diferentes tablas.
  • Insertar imágenes ¿Cómo se puede insertar esta imagen en una página? Observemos primero los parámetros elegidos al insertarla:En esta imagen, hemos colocado el logo de la EOI de Aranjuez a la izquierda,separándola del texto. 12 px en horizontal, y marcando un borde de 2px. Hemos dadounas dimensiones horizontales de 190 px y de 66 px de altura.Además hemos colocado una descripción a la imagen y un título, para facilitar la lecturade la página para personas con discapacidad visual (se leería la descripción de laimagen) y para que apareciera el rótulo del título en caso de que la imagen no se cargara(por problemas de memoria, problemas en el servidor...) (puedes ver el título colocandoel ratón sin pulsar sobre la imagen)Veamos la sintaxis:
  • • La etiqueta para cargar la imagen es <img src="URL DE LA IMAGEN"/> • Alt, especifica la información de la imagen • title, el título • style="float:left" indica que la imagen está a la izquierda del texto. (right, a la derecha; center, en el centro). • margin-left:12px, la separación entre la imagen y el texto • border: 2px; el grosor del borde. Si lo pones en "0" la imagen no muestra borde • height="66" y width="190" son los valores de altura y anchura de la imagen.VídeosPara insertar un vídeo, debes copiar el código "embed" o "insertar" y pegarlo comoHTML. Veamos como es el código para insertar un vídeo como el de siguienteLa sintaxis es:
  • De ellas solo nos fijamos en algunas etiquetas: • <object><param name="movie" value="URL DEL VIDEO"></param></object> nos define que hay un objeto tipo "video" • <embed src="URL DEL VIDEO"></embed> nos inserta ese vídeo. • width="560" height="315" son, como siempre, los valores de anchura y altura del vídeo. En las versiones actuales, se utiliza también el código iframe que veremos en el próximo apartado.Insertar webs - IframePara insertar vídeos o páginas web completas se usa el código iframe. En el caso delvídeo anterior el código sería: • Fíjate que la etiqueta principal es <iframe>. • src="URL" especifica la web a insertar • width y height indican el ancho y la altura del marco insertado • frameborder="0" el grosor del borde del marco.Si queremos insertar la webde un traductor online, porejemplo, habría quetransformar el códigoanterior, sustituyendo la URLanterior por lacorrespondiente a esa web -http://www.wordreference.com/-
  • El código ahora sería: