miércoles, 19 de abril de 2017

Etiqueta link

 Ejemplo de etiqueta link

<!DOCTYPE HTML>
<html>

<head>
<meta=charset="utf-8" />
<title>Erase una vez HTML</title>

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

</head>

<body>
<h1>Erase una vez HTML</h1>

<h2>El padre</h2>

<p>El padre de la Web, <strong>Tim Berners-Lee</strong>, es también el padre del lenguaje, <em>Hypertext Markup Language</em>.</p>

<h2>La Estandarización</h2>

<p>El lenguaje HTML está estandarizado por el W3C, el <em>World Wide Web Consortium</em>.</p>

<p>La versión actual de HTML es la 5, aunque no está completada.</p>

<p>Se espera que esté terminada en el <strong>año 2014</strong>.</p>

</body>

</html>





Y ESTE ES EL ARCHIVO DE MIESTILO.CSS

body{
background-color: #CCC;
color: #333;}

h1,h2 {font-family: Georgia;}

h1 {font-size: 3em;}

h2 {font-size; 2em;}

p {font-family: Arial, Helvetica, Sans Serif;}





CONCLUSIÓN: ESTA ES UNA MANERA MUY SIMPLE DE EVITAR EL FAMOSO ACOPLAMIENTO ENTRE HTML Y CSS





Publicadas por a la/s No hay comentarios.:
Etiquetas: , , , ,

Etiqueta style




Ejemplo de uso de etiqueta style



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
body {
color: #00F; background-color: #CFC; font-family: Georgia, Cambria, serif;

font-size: 16px;
}

h1 {
color: #F00; font-family: Verdana, Calibri, sans-serif; font-size: 32px;
}

h2 {
color: #A00; font-family: Verdana, Calibri, sans-serif; font-size: 24px;
}

span {
color: #060;
}

strong {
font-size: 20px;
}

em {
color: #FFF; background-color: #000;
}
</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li><span>Título:</span> HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor:<span>Autor:</span> Sergio Luján Mora</li>
<li><span>Editorial:</span> Publicaciones Altaria</li>
<li><span>Año de publicación:</span> 2015</li>
<li>ISBN:<span>ISBN:</span> 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet<strong>Internet</strong> se remontan a los años sesenta, no ha sido hasta los años
 noventa cuando, gracias a la Web<strong>Web</strong>, se ha extendido su uso por todo el mundo. En pocos años, la Web<strong>Web</strong> ha evolucionado enormemente: se ha pasado de páginas
 sencillas, con pocas imágenes y contenidos estáticos que eran 
visitadas por unos pocos usuarios a páginas complejas, 
con contenidos dinámicos que provienen de bases de datos 
y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma
 tecnología, con el Lenguaje de marcas de hipertexto (<em>Hypertext Markup Language, HTML</em>) y con las Hojas de estilo en cascada (<em>Cascading Style Sheets, CSS</em>).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés 
en aprender a desarrollar sus propias páginas web. No son 
necesarios conocimientos previos para aprender con este
 libro, lo único que es necesario es saber utilizar un ordenador 
y saber navegar por la Web<strong>Web</strong>.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien
 diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos
 generales que son necesarios para poder desarrollar páginas
 web; se explican conceptos de estructura física y estructura
 lógica (o estructura de navegación) de un sitio web. Se detalla
 cómo influye la estructura física en las URL<em>URL</em> o direcciones que se emplean a la hora de crear los enlaces
de un sitio web. Pasando por el concepto de "estándar web", 
un término general que se emplea para refererirse a los estándares 
que define su funcionamiento como HTML y CSS<em>HTML</em> y <em>CSS</em>, empleados para el desarrollo de las páginas web en el lado 
del cliente.</li>

<li>En la segunda parte se trabaja HTML<em>HTML</em>. Partiendo de la estructura básica de una página web, se
 explican las etiquetas de HTML<em>HTML</em> que se utilizan para definir el texto, los enlaces, las listas, 
las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS<em>CSS</em>, el lenguaje que se emplea para definir el formato y la
 presentación de una página web. Se explica cómo utilizar el color,
 cómo definir la presentación del texto, de las tablas y de los
 formularios; cómo realizar transformaciones y transiciones 
con el fin de diseñar una página web.</li>
</ul>
</body>
</html>
Publicadas por a la/s No hay comentarios.:

Learning CSS



Ejemplo del trabajo práctico






<meta charset="utf-8">
<title>HTML &amp; CSS: Curso práctico avanzado</title>


<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li>Título:style="color: #F00; font-family: Verdana, Calibri, sans-serif; font-size:

32px;">HTML &amp; CSS: Curso práctico avanzado</h1>

<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif; font-size:

24px;">Datos del libro</h2>

<ul>
<li><span style="color: #060;">Título:</span> HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor:<span style="color: #060;">Autor:</span> Sergio Luján Mora</li>
<li><span style="color: #060;">Editorial:</span> Publicaciones Altaria</li>
<li><span style="color: #060;">Año de publicación:</span> 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet<span style="color: #060;">ISBN:</span> 978-84-944049-4-8</li>
</ul>


<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif; font-size:

24px;">Descripción del libro</h2>

<p>
Aunque los inicios de <strong><span style="font-size: 20px;">Internet</span>

</strong> se remontan a los años sesenta, no ha sido hasta los años 
noventa cuando, gracias a la Web<strong><span style="font-size: 20px;">Web</span></strong>, se ha extendido su uso por todo el mundo. En pocos años, la Web<strong><span style="font-size: 20px;">Web</span></strong> ha evolucionado enormemente: se ha pasado de páginas sencillas, 
con pocas imágenes y contenidos estáticos que eran visitadas por
 unos pocos usuarios a páginas complejas, con contenidos 
dinámicos que provienen de bases de datos y que son visitadas
 por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma
 tecnología, con el Lenguaje de marcas de hipertexto (<em><span style="color: #FFF; background-color: #000;">Hypertext Markup Language, HTML</span></em>) y con las Hojas de estilo en cascada (<em><span style="color: #FFF; background-color: #000;">Cascading Style Sheets, CSS</span></em>).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en
 aprender a desarrollar sus propias páginas web. No son 
necesarios conocimientos previos para aprender con este libro,
 lo único que es necesario es saber utilizar un ordenador y saber 
navegar por la Web.
</p>


<h2<strong><span style="font-size: 20px;">Web</span></strong>.
</p>


<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif; font-size:

 24px;">Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien 
diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales 
que son necesarios para poder desarrollar páginas web; 
se explican conceptos de estructura física y estructura lógica
 (o estructura de navegación) de un sitio web. Se detalla cómo
 influye la estructura física en las URL<em><span style="color: #FFF; background-color: #000;">URL</span></em> o direcciones que se emplean a la hora de crear los enlaces de 
un sitio web. Pasando por el concepto de "estándar web", 
un término general que se emplea para refererirse a los estándares
 que define su funcionamiento como HTML y CSS<em><span style="color: #FFF; background-color: #000;">HTML</span></em> y

<em><span style="color: #FFF; background-color: #000;">CSS</span></em>, empleados para el desarrollo de las páginas web en el lado 
del cliente.</li>

<li>En la segunda parte se trabaja HTML<em><span style="color: #FFF; background-color: #000;">HTML</span></em>. Partiendo de la estructura básica de una página web, se explican
 las etiquetas de HTML<em><span style="color: #FFF; background-color: #000;">HTML</span></em> que se utilizan para definir el texto, los enlaces, las listas, las
tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS<em><span style="color: #FFF; background-color: #000;">CSS</span></em>, el lenguaje que se emplea para definir el formato y la
 presentación de una página web. Se explica cómo utilizar
 el color, cómo definir la presentación del texto, de las tablas
 y de los formularios; cómo realizar transformaciones y transiciones
 con el fin de diseñar una página web.</li>
</ul>

Publicadas por a la/s No hay comentarios.:
Etiquetas: , , , , , , , , , , , , ,

lunes, 13 de febrero de 2017

HTML 5 con envio de formulario




EJEMPLO de una página web que contenga un formulario con los siguientes campos de información:
  • Nombre, con un control de tipo texto obligatorio y con autofoco.
  • Correo electrónico, con un control de tipo email obligatorio.
  • URL, con un control de tipo url que muestre la ayuda "Escribe la URL de tu página web personal".
  • Fecha, con un control de tipo date.
  • Tiempo, con un control de tipo time.
  • Fecha y hora, con un control de tipo datetime.
  • Mes, con un control de tipo month.
  • Semana, con un control de tipo week.
  • Número, con un control de tipo number que limite la entrada a un valor entre -10 y 10.
  • Teléfono, con un control de tipo tel.
  • Término de búsqueda, con un control de tipo search.
  • Color favorito, con un control de tipo color.
  • Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
  • El título de la página debe ser Formulario de prueba de HTML5.
  • El método de envío del formulario debe ser GET.
  • El destino del envío del formulario debe ser "".
Nota: si al validar el código HTML de tu página web con el validador del W3C se muestran mensajes de advertencia como The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. no te preocupes, el validador te está avisando de que lleves cuidado al usar una característica de HTML5 que no está admitida por todos los navegadores actuales.
Nota: por lo anterior, cuando realices esta actividad y compruebes cómo se visualiza tu página web en distintos navegadores es muy probable que obtengas diferentes resultados.







<title>Formulario de prueba de HTML5</title>



    <form action="" method="get">
        <p>Nombre:
            <input type="text" name="name_control" autofocus="" required="">
        </p>
        <p>Correo electrónico:
            <input type="email" name="email_control" required="">
        </p>
        <p>URL:
            <input type="url" name="url_control" placeholder="Escribe la URL de tu página web personal">
        </p>
        <p>Fecha:
            <input type="date" name="date_control">
        </p>
        <p>Tiempo:
            <input type="time" name="time_control">
        </p>
        <p>Fecha y hora:
            <input type="datetime" name="datetime_control">
        </p>
        <p>Mes:
            <input type="month" name="month_control">
        </p>
        <p>Semana:
            <input type="week" name="week_control">
        </p>
        <p>Número (min -10, max 10):
            <input type="number" name="number_control" min="-10" max="10" value="0">
        </p>
        <p>Teléfono:
            <input type="tel" name="tel_control">
        </p>
        <p>Término de búsqueda:
            <input type="search" name="search_control">
        </p>
        <p>Color favorito:
            <input type="color" name="color_control">
        </p>
        <p>
            <input type="submit" value="Enviar">
        </p>
    </form>



FUENTE: IDESWEB
Publicadas por a la/s No hay comentarios.:
Etiquetas: , , , , , , , , , , , , , , , , , ,

viernes, 10 de febrero de 2017

TABLA EN HTML



Ejemplo de tablas y sus atributos:

<title>Desempleo</title>
    <style>
    table,
    tr,
    th,
    td {
        border: 1px solid black;
    }
    </style>



    <h1>El desempleo en España</h1>
    <p>La siguiente tabla muestra la evolución del desempleo en España, comparado con la media de los 27 países de la Unión Europea, Grecia, que compite con España en ser el primero en esta vergonzosa competición y Estados Unidos y Japón, dos de las primeras economías mundiales.</p>
    <table>
        <tbody><tr>
            <th>País</th>
            <th>2000</th>
            <th>2001</th>
            <th>2002</th>
            <th>2003</th>
            <th>2004</th>
            <th>2005</th>
            <th>2006</th>
            <th>2007</th>
            <th>2008</th>
            <th>2009</th>
            <th>2010</th>
            <th>2011</th>
            <th>2012</th>
            <th>2013</th>
        </tr>
        <tr>
            <td>UE (27 países)</td>
            <td>8.9</td>
            <td>8.7</td>
            <td>9</td>
            <td>9.1</td>
            <td>9.3</td>
            <td>9</td>
            <td>8.2</td>
            <td>7.2</td>
            <td>7</td>
            <td>9</td>
            <td>9.6</td>
            <td>9.6</td>
            <td>10.4</td>
            <td>10.8</td>
        </tr>
        <tr>
            <td><strong>España</strong></td>
            <td><strong>11.9</strong></td>
            <td><strong>10.6</strong></td>
            <td><strong>11.5</strong></td>
            <td><strong>11.5</strong></td>
            <td><strong>11</strong></td>
            <td><strong>9.2</strong></td>
            <td><strong>8.5</strong></td>
            <td><strong>8.2</strong></td>
            <td><strong>11.3</strong></td>
            <td><strong>17.9</strong></td>
            <td><strong>19.9</strong></td>
            <td><strong>21.4</strong></td>
            <td><strong>24.8</strong></td>
            <td><strong>26.1</strong></td>
        </tr>
        <tr>
            <td>Grecia</td>
            <td>11.2</td>
            <td>10.7</td>
            <td>10.3</td>
            <td>9.7</td>
            <td>10.6</td>
            <td>10</td>
            <td>9</td>
            <td>8.4</td>
            <td>7.8</td>
            <td>9.6</td>
            <td>12.7</td>
            <td>17.9</td>
            <td>24.5</td>
            <td>27.5</td>
        </tr>
        <tr>
            <td>Estados Unidos</td>
            <td>4</td>
            <td>4.8</td>
            <td>5.8</td>
            <td>6</td>
            <td>5.5</td>
            <td>5.1</td>
            <td>4.6</td>
            <td>4.6</td>
            <td>5.8</td>
            <td>9.3</td>
            <td>9.6</td>
            <td>8.9</td>
            <td>8.1</td>
            <td>7.4</td>
        </tr>
        <tr>
            <td>Japón</td>
            <td>4.7</td>
            <td>5</td>
            <td>5.4</td>
            <td>5.3</td>
            <td>4.7</td>
            <td>4.4</td>
            <td>4.1</td>
            <td>3.9</td>
            <td>4</td>
            <td>5.1</td>
            <td>5.1</td>
            <td>4.6</td>
            <td>4.3</td>
            <td>4</td>
        </tr>
    </tbody></table>
    <p>Fuente: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&amp;init=1&amp;language=en&amp;pcode=tsdec450&amp;plugin=1">Índice de desempleo anual</a>, Eurostat</p>




FUENTE: IDESWEB ACTIVATE GOOGLE



Publicadas por a la/s No hay comentarios.:
Etiquetas: , , ,

martes, 7 de febrero de 2017

FORMULARIOS EN HTML - PARTE II



En la actividad anterior "FORMULARIOS EN HTML - PARTE I "se te proponía realizar el siguiente formulario:
Crea una página web que contenga un formulario con los siguientes campos de información:
  • El nombre, con un control de tipo texto.
  • Los apellidos, con un control de tipo texto.
  • El sexo, con dos opciones excluyentes hombre o mujer.
  • El correo electrónico, con un control de tipo texto.
  • Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
  • Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
  • Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
  • El título de la página debe ser Formulario de registro - Mi web.
  • El método de envío del formulario debe ser GET.
  • El destino del envío del formulario debe ser "".
  • La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
  • La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.
Al formulario anterior le tienes que añadir los siguientes campos de información:
  • Población, una lista desplegable con las opciones Alicante, Madrid, Sevilla y Valencia.
  • Descripción, un área de texto multilínea.
Además, tienes que asociar la etiqueta de cada control a su control para mejorar la usabilidad y la accesibilidad.





<title>Formulario de registro - Mi web</title>



<h1>Formulario de registro</h1>

<form action="" method="get">
<p>
<label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50">
</p>

<p>
<label for="apellidos">Apellidos:</label> <input type="text" name="apellidos" id="apellidos" maxlength="50">
</p>
<p>
Sexo: <input type="radio" name="sexo" id="sexo-h" value="h"> <label for="sexo-h">hombre</label> <input type="radio" name="sexo" id="sexo-m" value="m"> <label for="sexo-m">mujer</label>
</p>

<p>
<label for="correo">Correo:</label> <input type="text" name="correo" id="correo" maxlength="100">
</p>


<p>
<label for="poblacion">Población:</label>
<select name="poblacion" id="poblacion">
<option>Alicante</option>
<option>Madrid</option>
<option>Sevilla</option>
<option>Valencia</option>
</select>
</p>

<p><label for="descripcion">Descripción:</label>
<textarea name="descripcion" id="descripcion" rows="6" cols="60"></textarea>
</p>
<p>
<input type="checkbox" name="info" id="info" checked="checked"> <label for="info">Deseo recibir información sobre novedades y ofertas</label>
</p>
<p>
<input type="checkbox" name="condiciones" id="condiciones"> <label for="condiciones"> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos</label>
</p>

<p>
<input type="submit" value="Enviar">
</p>
</form>



FUENTE: GUZMAN FERNANDEZ GARCIA


Publicadas por a la/s No hay comentarios.:

FORMULARIOS EN HTML



Crea una página web que contenga un formulario con los siguientes campos de información:
  • El nombre, con un control de tipo texto.
  • Los apellidos, con un control de tipo texto.
  • El sexo, con dos opciones excluyentes hombre o mujer.
  • El correo electrónico, con un control de tipo texto.
  • Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
  • Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
  • Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
  • El título de la página debe ser Formulario de registro - Mi web.
  • El método de envío del formulario debe ser GET.
  • El destino del envío del formulario debe ser "".
  • La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
  • La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.





<title>Formulario de registro - Mi web</title>

<h1>Formulario de registro</h1>

<form action="" method="get">
<p>
Nombre: <input type="text" name="nombre" maxlength="50">
</p>

<p>
Apellidos: <input type="text" name="apellidos" maxlength="50">
</p>

<p>
Sexo: <input type="radio" name="sexo" value="h"> hombre <input type="radio" name="sexo" value="m"> mujer
</p>

<p>
Correo: <input type="text" name="correo" maxlength="100">
</p>

<p>
<input type="checkbox" name="info" checked="checked"> Deseo recibir información sobre novedades y ofertas
</p>
<p>
<input type="checkbox" name="condiciones"> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos
</p>

<p>
<input type="submit" value="Enviar">

</p>

</form>




FUENTE: GUZMAN FERNANDEZ GARCIA



Publicadas por a la/s No hay comentarios.:
Suscribirse a: Entradas (Atom)