diseÑo de pÁginas web html y css tema 1: introducción jose miguel vidagany igual
TRANSCRIPT
DISEÑO DE PÁGINAS WEB HTML Y CSS
Tema 1: Introducción
Jose Miguel Vidagany Igual
Estructura básica
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
Doctype
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Comentarios
<!– Esto es un comentario -->
Etiquetas
Recomienda en Minúsculas para HTML Algunas etiquetas son anidables Algunas etiquetas no tienen etiqueta de
apertura
Atributos
Algunos elementos pueden tener attributos
Los atributos nos dan información adicional.
Siempre van en el tag de apertura the start tag
Suelen ir en parejas: name=“value” los atributos van entre comillas Se escriben en minusculas
Atributos
class Specifies one or more classnames for an element (refers to a class in a style sheet)
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
Elementos block
Ejemplos: <h1>, <p>, <ul>, <table> No siempre se ven block
Elementos inline
Se ven sin empezar en una nueva linea. ejemplos: <b>, <td>, <a>, <img>
cabeceras
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
Lineas
<hr>
Formato de texto
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
Salida de computador
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text
Citas, comillas y definición
Tag Description
<abbr> Defines an abbreviation or acronym
<address>
Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote>
Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
Algunos ejemplos
<address>Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address>
Resultado
Written by Jon Doe.Visit us at:Example.comBox 564, DisneylandUSA
Ejemplos
<!DOCTYPE html>
<html>
<body>
<p><b>este testo esta en negrita</b></p>
<p><strong>este texto es strong</strong></p>
<p><i>texto en italic (cursiva)</i></p>
<p><em>texto con énfasis </em></p>
<p><code>Texto de salida de código</code></p>
<p>Este texto tiene<sub> subscript</sub> y <sup>superscript</sup></p>
</body>
</html>
Resultado
This text is boldThis text is strongThis text is italicThis text is emphasizedThis is computer output*This is subscript and superscript
Enlaces
<a href="http://marca.com">MarcaW3C</a> Este es un enlace a la web del periódico Marca .
Si no está visitado tiene subrayado y color azul Si está visitado, se cambia el color a púrpura Si está activo sigue subrayado y en color rojo