Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Similar a Clase Nº 1 - HTML
Similar a Clase Nº 1 - HTML (20)
Último
Último (7)
Clase Nº 1 - HTML
- 1. • Introducción al HTML – HiperText Markup Language – Lenguaje para expresar documentos – Los elementos del documento están mezclados con información de formato TAGs – Documento HTML: combinación de texto y TAGs – Los tags están limitados por los signos < y > – Hay tags de inicio <..> y tags de fin </..> – Por ejemplo: texto en <b>negrita</b> se ve como texto en negrita Curso PHP – HTML sicosinformatica.com.ar 1
- 2. • Estructura general de un documento HTML <html> <head> <title>Aquí el título de tu página</title> </head> <body> Texto de tu página </body> </html> Curso PHP – HTML Sicosinformatica.com.ar 2
- 3. • Head – Título, estilos, scripts <head> <title>Aquí el título de tu página</title> </head> ... más adelante estilos, scripts Curso PHP – HTML Sicosinformatica.com.ar 3
- 4. • Cuerpo del documento <body[ propiedades]> … </body> – Ejemplo <body topmargin="0" leftmargin="0" bgcolor="#000000">…</body> – Propiedades background - Imagen de fondo topmargin - Margen superior leftmargin - Margen izquierdo bgcolor - Color de fondo del documento text - Color del texto de la página link - Color de los vínculos vlink - Color de vínculos visitados alink - Color de vínculos activos Curso PHP – HTML Sicosinformatica.com.ar 4
- 5. • Formateo de texto <b>negrita</b> – Tags b - Texto en negrita i - Texto en cursiva p - Cambio de párrafo u - Texto subrayado s - Texto tachado em - Énfasis strong - Énfasis fuerte cite - Este código es usado para citas corta right - Texto alineado a derecha center - Texto centrado big - Texto más grande pre - Texto formateado, que respeta los saltos de línea, enters, etc. que incluya font - Marca que sirve para definir la fuente y el color del texto (deprecated) sub - subscript sup - superscript Curso PHP – HTML Sicosinformatica.com.ar 5
- 6. • Títulos h1 - <h1>Título importante</h1> h2 - <h2>Título menos importante</h2> h6 - ... • Párrafos p - Párrafo br - Salto de línea • Espacios Título importante los browser dividen el texto de manera tal que encajen dentro de los márgenes. Título importante los browser NO separan estas palabras (nonbreaking space). • Comentarios <!–- esto es un comentario --> Curso PHP – HTML Sicosinformatica.com.ar 6
- 7. • Símbolos Curso PHP – HTML Sicosinformatica.com.ar 7 © Copyright © 1999 W3C ® MagiCo ® ™ Webfarer™ < < > > & & " " Á É ... Á É ... á é ... á é ... Ñ ñ Ñ ñ ... ...
- 8. • Imágenes <img src="./images/zorro.jpg"> <img src="./images/zorro.jpg" width="200" height="150"> <img src="./images/zorro.jpg" width="200" height="150" alt="Zorro"> Curso PHP – HTML Sicosinformatica.com.ar 8
- 9. • Links Este es un link a la <a href="desc.html">descripción de El Zorro</a>. Este es un link a la <a href="../html/desc.html">descripción de El Zorro</a>. Este es un link a la <a href="http://www.info.unlp.edu.ar:8080/cold/cartelera /ofhome.cfm">Cartelera Virtual</a>. Este es un link a la <a href="desc.html"><img src="./images/zorro.jpg"></a> descripción de El Zorro. Curso PHP – HTML Sicosinformatica.com.ar 9
- 10. • Links internos <h2><a name="enlaceinterno">Título en el medio del documento</a></h2> <ul> ... <li><a href="#enlaceinterno">Click aquí para ver "Título en el medio del documento"</a></li> ... </ul> • Desde otro documento http://www.info.unlp.edu.ar/autoridad.html http://www.info.unlp.edu.ar/autoridad.html#pro Curso PHP – HTML Sicosinformatica.com.ar 10
- 11. • Listas – Lista desordenada (unordered list) <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul> – Lista ordenada (ordered list) <ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol> – Lista de definiciones (definition list) <dl> <dt>Primer término</dt> <dd>Primera definición</dd> <dt>Segundo término</dt> <dd>Segunda definición</dd> <dt>Tercer término</dt> <dd>Tercera definición</dd> </dl> – Listas anidadas <ol> <li>Elemento 1</li> <li> Elemento 2 <ul> <li>Elemento 2.1</li> <li>Elemento 2.2</li> </ul> </li> <li>Elemento 3</li> </ol> Curso PHP – HTML Sicosinformatica.com.ar 11
- 12. • Listas – Lista de definiciones (definition list) <dl> <dt>Primer término</dt> <dd>Primera definición</dd> <dt>Segundo término</dt> <dd>Segunda definición</dd> <dt>Tercer término</dt> <dd>Tercera definición</dd> </dl> Curso PHP – HTML Sicosinformatica.com.ar 12
Notas del editor
- Los elementos del documentos están mezclados con información que el navegador interpreta para determinar el formato con que debe mostrar cada elemento.