lunes, 31 de agosto de 2020

05 Enlaces

 Otra parte importante de cualquier sitio web son los enlaces, tanto internos (dentro del documento) como externos (dirigidos a otros sitios web).

Para ello usaremos la etiqueta “a” en la que indicaremos en la propiedad “href” a donde queremos dirigirnos.

Con la propiedad “target” indicamos que el documento se abra en una pestaña distinta del navegador, si no incluimos esta opción, el documento se abrirá en la pestaña activa.

Aquí tienes algunos ejemplos de enlaces:

<h2>Enlace externo</h2>

<a href="http://ticoticotaa.es" target="_blank">Mi web</a>

<h2>Enlace interno</h2>

<a href="#parrafo_interno">Enlace interno</a>

<h2>Enlace vacio</h2>

<a href="#">Enlace vacio</a>



Publicado por en No hay comentarios:
Etiquetas: , , , , ,

04 Imagenes

 Para insertar imágenes en nuestro documento web usaremos la etiqueta “img”, pasándole con “src” la ruta al archivo imagen que queremos mostrar, indicando en la propiedad “alt” un texto alternativo por si falla la carga de la imagen.

El ancho y alto podemos incluirlo también antes de cerrar la etiqueta “img”, aunque normalmente se incluye en un archivo externo CSS que es el que dara el formato visual a nuestra web, separando asi el contenido HTML de la visualización que daremos con CSS.

Un ejemplo de código HTML para agregarla a nuestro documento podría ser asi:

<img src="img/jose.jpg" alt="Imagen de Jose" title="Imagen" widht="80px" height="80px"/>





Publicado por en No hay comentarios:
Etiquetas: , , , ,

sábado, 29 de agosto de 2020

03 Listas

 Como crear listas en nuestro documento HTML.


El codigo utilizado es el siguiente:

<!DOCTYPE html>

<html lang="es">

<head>

<title>Listas</title>

</head>

<body>

<h1>Listas</h1>

<h2>Listas ordenadas</h2>

<ol>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ol>

<h2>Listas desordenadas</h2>

<ul>

<li>Elemento 1

    <ol>

        <li>Subelemento 1

            <ul>

                <li>Subelemento 1</li>

                <li>Subelemento 2</li>

            </ul>

        </li>

        <li>Subelemento 2</li>

        <li>Subelemento 3</li>

    </ol>

</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ul>

</body>

</html>



Publicado por en No hay comentarios:
Etiquetas: , , , , , ,

02 Primera web

Creando nuestra primera pagina web.
Utilizar las etiquetas para titulos y parrafos.


Codigo HTML:

<!DOCTYPE html>

<html lang="es">

<head>

<title>Mi primera Web</title>

</head>

<body>

<h1>Mi primera Web</h1>

<h2>Segundo titulo</h2>

<h5>Tercer titulo</h5>

<p><em>Lorem Ipsum</em> is simply dummy <strong>text</strong> of the printing and typesetting industry.<br/>

 Lorem Ipsum has been <i>the industry's standard</i> dummy text ever since the 1500s,<br/>

  when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><hr/>

  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/> 

  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently<br/>

   with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>

<h2>Segundo titulo</h2>

<p><em>Lorem Ipsum</em> is simply dummy <strong>text</strong> of the printing and typesetting industry.<br/>

 Lorem Ipsum has been <i>the industry's standard</i> dummy text ever since the 1500s,<br/>

  when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><hr/>

  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/> 

  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently<br/>

   with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>

<h2>Segundo titulo</h2>

<p><em>Lorem Ipsum</em> is simply dummy <strong>text</strong> of the printing and typesetting industry.<br/>

 Lorem Ipsum has been <i>the industry's standard</i> dummy text ever since the 1500s,<br/>

  when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><hr/>

  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/> 

  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently<br/>

   with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>

</body>

</html>

Publicado por en No hay comentarios:
Etiquetas: , , , , , ,

01 Editores de codigo

 En el siguiente video vemos algunos de los editores que podemos usar para crear nuestras paginas web.




Publicado por en No hay comentarios:
Etiquetas: , , , , ,

domingo, 12 de mayo de 2019

21 Html, Css. Favicon

En el siguiente video podras ver como agregar un Favicon a tu web, el icono que aparece en la pestaña del navegador junto al titulo de nuestra web.


Publicado por en No hay comentarios:
Etiquetas: , , , , , ,

domingo, 10 de marzo de 2019

20 Html, Css. Dando formato al formulario

Vemos en el siguiente video como dar formato a nuestro formulario de contacto, probando diferentes opciones y viendo los cambios con los posibles diseños.
En este enlace podras acceder a todos los codigos del ejemplo que hemos creado.


html <!DOCTYPE html><html lang="es"><head><title>Contacta con nosotros</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="language" content="Spanish"><meta name="author" content="Jose Ojeda (ticoticotaa)"><meta name="keywords" content="programacion,python,html,php,contacto,contactanos"><meta name="description" content="Sitio web de ticoticotaa para contactarnos"><link rel="stylesheet" href="estilos.css"/><link href="https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand" rel="stylesheet"></head><body><!--Cabecera--><header><h1>Cabecera de mi web</h1><figure><img src="milogo.jpg"/></figure></header> <!--Barra navegacion--><nav><ul><li><a href="index.html">Inicio</a></li><li><a href="contacto.html">Contacto</a></li><li><a href="acercade.html">Acerca de</a></li></ul></nav><!--Contenido principal--><section><article><hgroup><h2>Contactanos</h2></hgroup><form action="#" method="post"><label>Nombre:</label><input name="nombre" type="text" placeholder="Nombre" required/><br/><label>Email:</label><input name="email" type="email" placeholder="ticoticotaa@gmail.com"/><br/><label>Mensaje:</label><textarea name="mensaje" rows="6" cols="50" placeholder="escribe tu mensaje"></textarea><br/><input id="boton" type="reset" value="Borrar"/><input id="boton" type="submit" value="Enviar"/></form></article></section><!--Complemento lateral--><aside><h3>Siguenos en: </h3><ul><li><a href="#" class="enlace">Facebook</a></li><li><a href="#" class="enlace">Twitter</a></li></ul></aside><!--Pie de pagina--><footer><p>Jose Ojeda 2019&copy</p><div id="email"><p>email: nombre@email.com</p></div></footer></body></html>



css *{ margin:0 auto; padding:0px; /*font-family: 'Playfair Display', serif;*/ font-family: 'Quicksand', sans-serif;}header{ background:#FF5733; color:#FFFFFF; font-size:3em; width:95%; padding:10px; margin:5px 5px; display:inline-block; border:solid 1px #ccc; border-radius:25px;}header figure{ float:left;}header h1{ float:right;}nav{ font-size:1em; width:95%; padding:5px; margin:1px 1px; text-align:center;}nav ul{ list-style-type:none;}nav li{ display:inline; text-align:center; margin:0 15px 0 0;}nav li a{ padding:2px 7px 2px 7px; color:#FF5733; background-color:#FFFFFF; border:1px solid #ccc; text-decoration:none;}nav li a:hover{ background:#FF5733; color:#FFFFFF;}section{ width:70%; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; float:left; background:#E6E6E6; color:#000000; border-radius:25px;}section h2{ color:#FF5733; font-size:1.5em;}section p{ font-size:1em;}aside{ width:20%; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; float:left; background:#E6E6E6; color:#000000; border-radius:25px; font-size:1em;}aside a{ text-decoration:none;}aside a:hover{ color:#000000;}aside ul{ list-style-type:none;}footer{ width:95%; clear:both; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; background:#FF5733; color:#FFFFFF; font-size:0.5em; border-radius:25px;}label{ margin-left:10px; margin-right:10px; padding:10px; float:left; width:70px;}input{ display:inline-block; margin-top:20px; margin-right:10px; margin-bottom:10px; padding:10px;}#boton{ display:inline-block; margin-bottom:10px; margin-top:10px;}
#email{ margin-left:65px; font-size:1.5em; color:yellow;}.enlace{ color:green; font-size:1em;}.enlace:hover{ color:blue; font-size:2em;}@media screen and (max-width:480px){ header{ font-size:1em; width:95%; padding:2px; margin:2px 2px; display:inline-block; border:solid 1px #ccc; border-radius:15px; } section p{ font-size:0.8em; color:red;}}
Publicado por en No hay comentarios:
Etiquetas: , , , , , ,
Suscribirse a: Entradas (Atom)