DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 1: Introducción Jose Miguel Vidagany Igual.

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

DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 1: Introducción Jose Miguel Vidagany Igual.

Documents

Transcript of DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 1: Introducción Jose Miguel Vidagany Igual.