Diferencia entre revisiones de «Usuario:Juanda/html/elementos»

De WikiEducator
Saltar a: navegación, buscar
 
(39 revisiones intermedias por el mismo usuario no mostrado)
Línea 3: Línea 3:
 
{{#widget:Slides}} {{MiTitulo| Curso de html}}  
 
{{#widget:Slides}} {{MiTitulo| Curso de html}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 +
 +
<div class="slide">
 +
=Elementos básicos del lenguaje=
 +
</div>
 
<div class="slide">
 
<div class="slide">
−
==Elementos básicos del lenguaje==
 
 
===Ejemplo de html===
 
===Ejemplo de html===
 
<source lang="html4strict">
 
<source lang="html4strict">
Línea 20: Línea 23:
 
<div class="slide">
 
<div class="slide">
 
===Etiquetas obligatorias del documento===
 
===Etiquetas obligatorias del documento===
 +
*Todas las etiquetas deben ir en '''minúsculas'''.
 +
*Se pueden anidar (como en XML).
 
<pre>
 
<pre>
 
<html> <head>* <title> y <body>
 
<html> <head>* <title> y <body>
 
</pre>
 
</pre>
−
* Debe incluir el título. Puede incluir:
+
La etiqueta head debe incluir el título. También puede incluir:
 
:JavaScript
 
:JavaScript
 
:Links a stylesheets
 
:Links a stylesheets
Línea 29: Línea 34:
  
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
 +
 +
===Atributos y valores===
 +
Las etiquetas pueden tener atributos. Los atributos van en la etiqueta de inicio y son de la forma '''atributo=”valor”'''. ¡Siempre en''' minúsculas''', por si acaso!
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
<title> Este es el titulo de la página</title>
 +
</head>
 +
<body>
 +
<p> Esta es mi primera página web </p>
 +
<a href=”http://www.soplaelcierzo.com“>
 +
Visita mi web
 +
</a>
 +
</body>
 +
</html>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
 
===Headings===
 
===Headings===
 
*Hay seis niveles representados por las etiquetas h1, h2, h3, h4, h5 y h6.
 
*Hay seis niveles representados por las etiquetas h1, h2, h3, h4, h5 y h6.
Línea 39: Línea 65:
  
 
<div class="slide">
 
<div class="slide">
−
===Atributos y valores===
+
===Imágenes===
−
Las etiquetas pueden tener atributos. Los atributos van en la etiqueta de inicio y son de la forma '''atributo=”valor”'''. ¡Siempre en''' minúsculas''', por si acaso!
+
*Mediante la etiqueta img
−
<source lang="html4strict>
+
*Es importante poner el atributo alt. Es la información que tienen los buscadores sobre la imagen para indexarla.
 +
*Es importante indicar anchura y altura:aunque la página tarde en cargarse, lo hará con sus dimensiones (layout) definitivas.
 +
*Se debe guardar cierta estructura jerárquica en nuestro sitio web. Directorio para imágenes, para javascript, etc.
 +
<source lang="html4strict">
 
<html>
 
<html>
 
<head>
 
<head>
−
<title> Este es el titulo de la página</title>
+
<title> Título preciso, descriptivo y corto</title>
 
</head>
 
</head>
 
<body>
 
<body>
−
<p> Esta es mi primera página web </p>
+
          <img src="libro.jpg" width="104" height="142" alt=”Mi libro” />
−
<a href=”http://www.soplaelcierzo.com“>
+
−
Visita mi web
+
−
</a>
+
 
</body>
 
</body>
 
</html>
 
</html>
 
</source>
 
</source>
 
</div>
 
</div>
 +
 +
<div class="slide">
 +
===Comentarios===
 +
*Nos ayudarán a documentar el código de nuestras páginas (versiones, objetivo o meta de unas líneas de código, etc.)
 +
*No son visibles por el navegador.
 +
*Se ven exclusivamente en el código fuente (CTRL + U desde Firefox).
 +
*Se deben evitar comentarios “privados” al poder ser vistos por cualquiera desde el código fuente.
 +
 +
<source lang="html4strict">
 +
<!--
 +
Esto es un comentario que no se verá desde el navegador. Los visitantes lo verán exclusivamente si miran el código fuente de la página.
 +
-->
 +
</source>
 +
 +
</div>
 +
 +
<div class="slide">
 +
===Enlaces internos===
 +
* Ejemplos:
 +
<source lang="html4strict">
 +
<a name="ayuda">Ayuda</a>
 +
<a href="#ayuda">Ir a ayuda</a>
 +
<a href="./manual.html#ayuda">Ver la ayuda</a>
 +
//por algún otro lado del documento:
 +
<a name="ayuda">El enlace vendrá aquí</a>
 +
</source>
 +
Una imagen como enlace:
 +
<source lang="html4strict">
 +
<a href="pagina.php">
 +
<img src="imagen.gif" alt="texto imagen" width="32" height="32" />
 +
</a>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
 +
===Enlaces externos===
 +
*En búsquedas en directorios se debe acabar la url con /, para no generar dos peticiones en el servidor.
 +
<source lang="html4strict">
 +
<a name="ayuda">Ayuda</a>
 +
<a href="http://www.soplaelcierzo.com/miweb.htm#ayuda">Ver la ayuda</a>
 +
<a href="http://www.softwaredental.com/">Ver la ayuda</a>
 +
</source>
 +
*Enlace para correo electrónico:
 +
<source lang="html4strict">
 +
<a href="mailto:admin@miweb.com?Subject=Consulta%20web"> Contactar</a>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
===Tablas===
 +
&lt;tr&gt; Table row (fila)
 +
&lt;td&gt; Table data (celda)
 +
&lt;th&gt; Table header, opcional, negrita y centrado por defecto
 +
 +
<source lang="html4strict">
 +
<table border="1">
 +
<th>Cabecera 1</th>
 +
<th>Cabecera 2</th>
 +
<tr>
 +
<td>fila 1, celda 0</td>
 +
<td>fila 1, celda 2</td>
 +
</tr>
 +
<tr>
 +
<td>fila 2, celda 1</td>
 +
<td>fila 2, celda 2</td>
 +
</tr>
 +
</table>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
===Listas===
 +
*Usaremos las listas en combinación con enlaces para realizar menús
 +
<source lang="html4strict">
 +
<!-- lista sin orden -->
 +
<ul>
 +
<li>Coffee</li>
 +
<li>Milk</li>
 +
</ul>
 +
 +
<!-- lista numerada -->
 +
<ol>
 +
<li>Coffee</li>
 +
<li>Milk</li>
 +
</ol>
 +
 +
<!-- lista con definiciones -->
 +
<dl>
 +
<dt>Coffee</dt>
 +
<dd>- black hot drink</dd>
 +
<dt>Milk</dt>
 +
<dd>- white cold drink</dd>
 +
</dl>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
 +
===Formularios===
 +
*Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor.
 +
*El lenguaje HTML solo tiene el objetivo de crear el formulario: no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, JSP etc.)
 +
 +
<source lang="html4strict">
 +
<form name="input" action="formulario.php" method="get" / “post”>
 +
Nombre usuario: <input type="text" name="nombre" /><br />
 +
Apellido usuario: <input type="text" name="apellido" /><br />
 +
Contraseña: <input type="password" name="pwd" /><br/>
 +
<input type="radio" name="sex" value="hombre" /> Hombre<br />
 +
<input type="radio" name="sex" value="mujer" /> Mujer<br />
 +
<input type="checkbox" name="interes" value="futbol" /> Me gusta el futbol<br />
 +
<input type="checkbox" name="interes" value="lectura" /> Me gusta leer <br />
 +
<input type="submit" value="Aceptar" />
 +
<input type="reset" value="Borrar">
 +
</form> 
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
'''&lt;form&gt;''' Define el comienzo del formulario para la inserción de datos<br>
 +
'''Atributo action:''' nombre de la página que procesará los datos en el servidor <br>
 +
:method=”post” Lo habitual. Los datos se envían con el cuerpo del formulario<br>
 +
:method=”get” Los datos se envían en la cabecera de petición de página<br>
 +
'''&lt;input&gt;''' Define un control de inserción de  datos<br>
 +
</div>
 +
<div class="slide">
 +
'''&lt;textarea&gt;''' Define un control de inserción de datos multilínea<br>
 +
:Ejemplo:
 +
<source lang="html4strict">
 +
<textarea name="comentarios" rows="5" cols="60"></textarea>
 +
</source>
 +
'''&lt;label&gt;''' Muestra un texto junto al control de inserción de datos<br>
 +
'''&lt;fieldset&gt;''' Define un borde entre un conjunto de elementos del formulario<br>
 +
'''&lt;legend&gt;''' Define una label para el fieldset
 +
</div>
 +
<div class="slide">
 +
'''&lt;select&gt;''' Define una lista desplegable <br>
 +
'''&lt;optgroup&gt;''' Defines un grupo de opciones relacionadas en una lista desplegable <br>
 +
'''&lt;option&gt;''' Define una opción en una lista desplegable <br>
 +
Ejemplo:
 +
<source lang="html4strict">
 +
<select name="pais">
 +
<option value="1">Argentina</option>
 +
<option value="2">España</option>
 +
</select>
 +
</source>
 +
'''&lt;button&gt;''' Defines un botón
 +
</div>
 +
 +
<div class="slide">
 +
===DOCTYPE===
 +
*Doctype html5
 +
<source lang="html4strict">
 +
<!DOCTYPE html>
 +
</source>
 +
 +
*Doctype html4 estricto (sin frameset y atributos de presentación todos mediante hojas de estilos)
 +
<source lang="html4strict">
 +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
*Doctype html4.0.1 Transitional estricto (sin frameset pero con atributos de presentación)
 +
<source lang="html4strict">
 +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 +
</source>
 +
 +
 +
*Doctype html 4.0.1 con Frames (con frameset y con atributos de presentación)
 +
<source lang="html4strict">
 +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 +
</source>
 +
 +
*XHTML similares tipos a html 4.0.1
 +
</div>
 +
 +
<div class="slide">
 +
===Aplicando estilos en html===
 +
[http://www.w3schools.com/html/html_formatting.asp Etiquetas para formato de textos]
 +
 +
====Atributo style====
 +
Valor: propiedad css:valor;propiedad css:valor;....<br>
 +
<source lang="html4strict">
 +
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
 +
</source>
 +
 +
====Hojas de estilo internas====
 +
<source lang="html4strict">
 +
<head>
 +
<style type="text/css">
 +
body {background-color:yellow;}
 +
p {color:blue;}
 +
</style>
 +
</head>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
====Hojas de estilo externas====
 +
<source lang="html4strict">
 +
<head>
 +
<link rel="stylesheet" type="text/css" href="mystyle.css">
 +
</head>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
===iframes===
 +
Sirve para mostrar una página dentro de otra página:
 +
<source lang="html4strict">
 +
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
 +
</source>
 +
</div>
 +
 +
 +
<div class="slide">
 +
 +
===Entities===
 +
[http://www.w3schools.com/html/html_entities.asp Caracteres reservados en html]
 +
</div>
 +
 +
 
</div>
 
</div>

Última revisión de 10:16 1 oct 2012



Elementos básicos del lenguaje

Ejemplo de html

<!DOCTYPE html>
<html>
<body>
<h1>Mi primer encabezado de primer nivel</h1>
<p>Mi primer párrafo</p>
</body>
</html>

Etiquetas obligatorias del documento

  • Todas las etiquetas deben ir en minúsculas.
  • Se pueden anidar (como en XML). 
<html> <head>* <title> y <body>

La etiqueta head debe incluir el título. También puede incluir:

JavaScript
Links a stylesheets
Información acerca del propio documento (mediante metatags)

Atributos y valores

Las etiquetas pueden tener atributos. Los atributos van en la etiqueta de inicio y son de la forma atributo=”valor”. ¡Siempre en minúsculas, por si acaso! 

<html>
	<head>
		<title> Este es el titulo de la página</title>
	</head>
	<body>
		<p> Esta es mi primera página web </p>
		<a href=”http://www.soplaelcierzo.com“> 
			Visita mi web
		</a>
	</body>
</html>

Headings

  • Hay seis niveles representados por las etiquetas h1, h2, h3, h4, h5 y h6.
  • Sin aplicar ninguna regla CSS se representan en “su propia linea”.
  • Por defecto están en negrita.
  • h1 se considera el más importante y es el más grande, luego h2, h3...
  • También los usan los buscadores. Las palabras clave tienen mucha más importancia en un h1 que en un h6.

Imágenes

  • Mediante la etiqueta img
  • Es importante poner el atributo alt. Es la información que tienen los buscadores sobre la imagen para indexarla.
  • Es importante indicar anchura y altura:aunque la página tarde en cargarse, lo hará con sus dimensiones (layout) definitivas.
  • Se debe guardar cierta estructura jerárquica en nuestro sitio web. Directorio para imágenes, para javascript, etc. 
<html>
	<head>
		<title> Título preciso, descriptivo y corto</title>
	</head>
	<body>
          <img src="libro.jpg" width="104" height="142" alt=”Mi libro” />
	</body>
</html>

Comentarios

  • Nos ayudarán a documentar el código de nuestras páginas (versiones, objetivo o meta de unas líneas de código, etc.)
  • No son visibles por el navegador.
  • Se ven exclusivamente en el código fuente (CTRL + U desde Firefox).
  • Se deben evitar comentarios “privados” al poder ser vistos por cualquiera desde el código fuente. 
<!-- 
Esto es un comentario que no se verá desde el 	navegador. Los visitantes lo verán exclusivamente si miran el código fuente de la página.
-->

Enlaces internos

  • Ejemplos: 
<a name="ayuda">Ayuda</a>
<a href="#ayuda">Ir a ayuda</a>
<a href="./manual.html#ayuda">Ver la ayuda</a> 
//por algún otro lado del documento:
<a name="ayuda">El enlace vendrá aquí</a>

Una imagen como enlace: 

<a href="pagina.php"> 
<img src="imagen.gif" alt="texto imagen" width="32" height="32" />
</a>

Enlaces externos

  • En búsquedas en directorios se debe acabar la url con /, para no generar dos peticiones en el servidor. 
<a name="ayuda">Ayuda</a>
<a href="http://www.soplaelcierzo.com/miweb.htm#ayuda">Ver la ayuda</a> 
<a href="http://www.softwaredental.com/">Ver la ayuda</a>
  • Enlace para correo electrónico: 
<a href="mailto:admin@miweb.com?Subject=Consulta%20web"> Contactar</a>

Tablas

<tr> Table row (fila) <td> Table data (celda) <th> Table header, opcional, negrita y centrado por defecto 

<table border="1">
	<th>Cabecera 1</th>
	<th>Cabecera 2</th>
	<tr>
		<td>fila 1, celda 0</td>
		<td>fila 1, celda 2</td>
	</tr>
	<tr>
		<td>fila 2, celda 1</td>
		<td>fila 2, celda 2</td>
	</tr>
</table>

Listas

  • Usaremos las listas en combinación con enlaces para realizar menús 
<!-- lista sin orden -->
<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>
 
<!-- lista numerada -->
<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>
 
<!-- lista con definiciones -->
<dl>
	<dt>Coffee</dt>
		<dd>- black hot drink</dd>
	<dt>Milk</dt>
		<dd>- white cold drink</dd>
</dl>

Formularios

  • Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor.
  • El lenguaje HTML solo tiene el objetivo de crear el formulario: no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, JSP etc.) 
<form name="input" action="formulario.php" method="get" / “post”>
	Nombre usuario: <input type="text" name="nombre" /><br />
	Apellido usuario: <input type="text" name="apellido" /><br />
	Contraseña: <input type="password" name="pwd" /><br/>
	<input type="radio" name="sex" value="hombre" /> Hombre<br />
	<input type="radio" name="sex" value="mujer" /> Mujer<br />
	<input type="checkbox" name="interes" value="futbol" /> Me gusta el futbol<br />
	<input type="checkbox" name="interes" value="lectura" /> Me gusta leer <br />
	<input type="submit" value="Aceptar" />
	<input type="reset" value="Borrar">
</form>

<form> Define el comienzo del formulario para la inserción de datos
Atributo action: nombre de la página que procesará los datos en el servidor

method=”post” Lo habitual. Los datos se envían con el cuerpo del formulario
method=”get” Los datos se envían en la cabecera de petición de página

<input> Define un control de inserción de datos

<textarea> Define un control de inserción de datos multilínea

Ejemplo: 
<textarea name="comentarios" rows="5" cols="60"></textarea>

<label> Muestra un texto junto al control de inserción de datos
<fieldset> Define un borde entre un conjunto de elementos del formulario
<legend> Define una label para el fieldset

<select> Define una lista desplegable
<optgroup> Defines un grupo de opciones relacionadas en una lista desplegable
<option> Define una opción en una lista desplegable
Ejemplo: 

<select name="pais">
	<option value="1">Argentina</option>
	<option value="2">España</option>
</select>

<button> Defines un botón

DOCTYPE

  • Doctype html5 
<!DOCTYPE html>
  • Doctype html4 estricto (sin frameset y atributos de presentación todos mediante hojas de estilos) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Doctype html4.0.1 Transitional estricto (sin frameset pero con atributos de presentación) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


  • Doctype html 4.0.1 con Frames (con frameset y con atributos de presentación) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • XHTML similares tipos a html 4.0.1

Aplicando estilos en html

Etiquetas para formato de textos

Atributo style

Valor: propiedad css:valor;propiedad css:valor;....

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Hojas de estilo internas

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Hojas de estilo externas

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

iframes

Sirve para mostrar una página dentro de otra página: 

<iframe src="demo_iframe.htm" frameborder="0"></iframe>


Entities

Caracteres reservados en html


Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html/elementos&oldid=9323»