Vídeo de fondo


<!DOCTYPE html>

<html>
<head>
<title>Vídeo pantalla completa</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
section {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<video autoplay muted loop>
<source src="img/rain.mp4" type="video/mp4">
El navegador no soporta vídeos.
</video>
<section>
<h1>Contenido</h1>
<p>Lorem ipsum...</p>

</section>
</body>
</html>

Fotos


<!DOCTYPE html>
<html>

<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
</head>

<body>

<header>
<h1>La web de los gatitos </h1>
</header>

<main>

<aside>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="fotos.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>

<section>

<h2>Fotos tiernas</h2>
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>
<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>
<img src="img/perro2.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>

</section>

</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>

*{
font-family:Verdana,serif;
}
header,aside,section,footer{
padding:1rem;
}
header{
height:10rem;
background-color:lightgreen;
}
aside{
width:15rem;
height:40rem;
background-color:#fae596;
float:left;
}
section{
margin-left:17rem;
background-color:#BBBBBB;
min-height:40rem;
padding:1rem 10rem;
}
footer{
height:3rem;
background-color:black;
color:white;
}

header h1{
font-family: 'Carter One', cursive;
font-size:5rem;
margin:0;
}
aside ul{
list-style-type:none;
padding:0;
}

aside ul li {
padding: 8px 16px;
border: 1px solid #ddd;
background-color:PowderBlue ;
margin-top:.5rem;
}
aside ul li:hover {
background-color:yellowgreen;
}
aside ul li a{
text-decoration:none;
font-size:1.5em;
}
.destacado{
color:yellow;
}
figure img{
width: 100%;
height: auto;
}
figure{
margin: 20px;
border: 1px solid #ccc;
float: left;
width: 300px;
box-shadow: 10px 10px 5px #AAAAAA;
}
figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
}
figcaption{
padding: 15px;
text-align: center;
background-color: white;
}

Layout Semántico


<!DOCTYPE html>
<html>

<head>
<title></title>

<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
</head>

<body>

<header>
<h1>La web de los gatitos</h1>
</header>

<main>

<aside>
<ul>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="fotos.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>

<section>
<h2>Bienvenido a la web de los gatitos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="gato.jpg" alt="gato">
</section>

</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>


*{
font-family:Verdana,serif;
}
header,aside,section,footer{
padding:1rem;
}
header{
height:10rem;
background-color:lightgreen;
}
aside{
width:15rem;
height:40rem;
background-color:#fae596;
float:left;
}
section{
margin-left:17rem;
background-color:#BBBBBB;
min-height:40rem;
padding:1rem 10rem;
}
footer{
height:3rem;
background-color:black;
color:white;
}

header h1{
font-family: 'Carter One', cursive;
font-size:5rem;
margin:0;
}
aside ul{
list-style-type:none;
padding:0;
}

aside ul li {
padding: 8px 16px;
border: 1px solid #ddd;
background-color:PowderBlue ;
margin-top:.5rem;
}
aside ul li:hover {
background-color:yellowgreen ;

}
aside ul li a{
text-decoration:none;
font-size:1.5em;
}

Tabla con formato

table{
border:2px solid grey;
width:100%;

}
th, tfoot{
background-color:black;
color:yellow;
}
.ciudad{
background-color:lightgreen;
}
.pares{
background-color:#BBBBBB;
}

<table>
<tr>
<th colspan="3">Ventas</th>
</tr>
<tr>
<td rowspan="2" class="ciudad">BCN</td>
<td >Ana</td>
<td>10</td>
</tr>
<tr class="pares">
<td>Rosa</td>
<td>20</td>
</tr>
<tr>
<td rowspan="2" class="ciudad">GIR</td>
<td >Juan</td>
<td>30</td>
</tr>
<tr class="pares">
<td>Eva</td>
<td>40</td>
</tr>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>100</td>
</tr>
</tfoot>
</table>

Ejemplos tablas


<table border=1>

<tr><th colspan="3">Ventas</th>
</tr>
<tr><td>Empleado</td><td>Enero</td><td>Febrero</td></tr>
<tr><td>Ana</td><td>10</td><td>10</td></tr>
<tr><td>Rosa</td><td>20</td><td>10</td></tr>

</table>

<table border="1">
<tr>
<th colspan="3">Ventas</th>
</tr>
<tr>
<td rowspan="2">BCN</td>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td>Rosa</td>
<td>20</td>
</tr>
<tr>
<td rowspan="2">GIR</td>
<td>Juan</td>
<td>30</td>
</tr>
<tr>
<td>Eva</td>
<td>40</td>
</tr>
</table>

Primer ejercicio html


<!DOCTYPE html>
<html>

<head>
<title></title>

<meta charset="UTF-8">
<style>
*{margin:0;}
img {

}
</style>
</head>

<body>

<h1 >Clique en la imagen para ir a la página</h1>

<p>En un <u>lugar</u> de la <strong>mancha</strong> de cuyo <mark>nombre</mark> no <small>quiero</small> <del>acordarme</del> no ha mucho tiempo que vivía un hidalgo
de los de <em>lanza</em> en <em><strong>astillero</strong></em> rocín <ins>flaco</ins> adarga <sup>antigua</sup> y <sub>galgo</sub> corredor.</p>

<a href="http://google.es"><img src="mascota.jpg" alt="perrito mono" width="200"></a>
<a href="http://google.es"><img src="perro2.jpg" alt="perrito mono" width="200"></a>
<a href="http://google.es"><img src="gato.jpg" alt="perrito mono" width="200"></a>

</body>

</html>

Plugin wordpress con todo



<?php
/*
Plugin Name: Plugin propio
Plugin URI: http://intelisen.com/plugins
Description: Un plugin para probar cosas
Author: Intelisen
Version: 1
Author URI: http://intelisen.com
*/

add_filter('the_content', 'cambiar_contenido');

function cambiar_contenido($contenido) {
return $contenido . " ¡Mega artículo!";
}

add_filter('the_title', 'cambia_titulo');

function cambia_titulo($contenido) {
return "###==>" . $contenido;
}

add_action('admin_notices', 'saludo');

function saludo() {
echo "ola k ase???";
}

add_action('wp_head', 'ponjquery');

function ponjquery() {
echo '<El código que pongamos aquí se pintará en la cabecera (head) del wordpress>'
. '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>';
}

function google_shortcode() {
return '<input onclick="location.href=\'http://google.es\'" type="button" value="Ir a google" />';
}

add_shortcode('google_atajo', 'google_shortcode');

function refran() {
$refranes = ["No por mucho madrugar amanece más temprano", "A quien madruga dios le ayuda", "Más vale pájaro en mano que ciento volando"];
return "<p>" . $refranes[rand(0, count($refranes) - 1)] . "</p>";
}

add_shortcode('refran', 'refran');

function imagenes() {
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'posts_per_page' => - 1,
);

$query_images = new WP_Query($query_images_args);
$imagen = $query_images->posts[rand(0, count($query_images->posts) - 1)];

return '<img width=300 height=300 src="' . $imagen->guid . '"/>';
}

add_shortcode('imagenes', 'imagenes');

//Necesarios para crear un menú y registrar los campos
add_action('admin_menu', 'destacar_menu');
add_action('admin_init', 'destacar_settings');

//Registra el campo que vamos a guardar
function destacar_settings() {
register_setting('destacar-group', 'destacar_palabras');
register_setting('destacar-group', 'destacar_color');
}

//Son las opciones que tendrá nuestro menú. Los parámetros son: título de la página, título del menú, quien puede acceder, url de esta página y función a la que se llama
function destacar_menu() {
add_options_page('Opciones destacar', 'Destacar', 'manage_options', 'destacar-identifier', 'destacar_options');
}

//Formulario que se mostrará cuando se seleccione el menú
function destacar_options() {
if (!current_user_can('manage_options')) {
wp_die('No tiene permiso.');
}
?>

<div>
<?php screen_icon(); ?>
<h2>Opciones destacar</h2>

<form method="post" action="options.php">
<?php
settings_fields('destacar-group');
do_settings_fields('destacar-group', '');
?>

<p>Introduzca las palabras a destacar separadas por comas</p>
<input size="70" type="text" name="destacar_palabras" value="<?php echo get_option('destacar_palabras'); ?>" />

<p>Introduzca el color que quiere usar para destacar</p>
<input size="70" type="text" name="destacar_color" value="<?php echo get_option('destacar_color'); ?>" />

<?php
submit_button();
?>
</form>
</div>
<?php
}

//Las dos funciones siguientes y el add_filter son el código del plugin
function destacar_get_palabras() {
return explode(",", get_option("destacar_palabras"));
}

function destacar_filtro($contenido) {
$palabras = destacar_get_palabras();
foreach ($palabras as $palabra) {
$palabra = trim($palabra);
$contenido = str_ireplace($palabra, "<span style='background-color:" . get_option("destacar_color") . "'>" . $palabra . "</span>", $contenido);
}
return $contenido;
}

add_filter('the_content', 'destacar_filtro');

class EntradasWidget extends WP_Widget {

function EntradasWidget() {
$widget_ops = array('classname' => 'EntradasWidget', 'description' => 'Muestra entrada aleatoria');
$this->WP_Widget('EntradasWidget', 'Entrada aleatoria con thumbnail', $widget_ops);
}

function form($instance) {
$instance = wp_parse_args((array) $instance, array('title' => ''));
$title = $instance['title'];
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?= _e('Title') ?>: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
}

function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
return $instance;
}

function widget($args, $instance) {
extract($args, EXTR_SKIP);

echo $before_widget;
$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

if (!empty($title))
echo $before_title . $title . $after_title;;

// CóDIGO DEL WIDGET
$posts = get_posts('orderby=rand;numberposts=1');
$post = $posts[0];
?><a href="<?= get_permalink($post); ?>" title="<?= $post->post_title; ?>"><?= $post->post_title; ?></a>
<?php
echo $after_widget;
}

}

add_action('widgets_init', create_function('', 'return register_widget("EntradasWidget");'));

Ejemplos shortcodes

Pone un refrán aleatorio:

function refran() {
    $refranes = ["No por mucho madrugar amanece más temprano", "A quien madruga dios le ayuda", "Más vale pájaro en mano que ciento volando"];
    return "<p>" . $refranes[rand(0, count($refranes) - 1)] . "</p>";
}

add_shortcode('refran', 'refran');

Pone una imagen aleatoria de la biblioteca de medios:

function imagenes() {
    $query_images_args = array(
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'post_status' => 'inherit',
        'posts_per_page' => - 1,
    );

    $query_images = new WP_Query($query_images_args);
    $imagen = $query_images->posts[rand(0, count($query_images->posts) - 1)];

    return '<img width=300 height=300 src="' . $imagen->guid . '"/>';
}

add_shortcode('imagenes', 'imagenes');