Cuaderno TICO

miércoles, 1 de febrero de 2017

Enlaces en HTML

Para poner enlaces en HTML utilizaremos la etiqueta <a>.

Si el enlace es a una página web tendremos que añadir dentro de la etiqueta: href:""

Entre las colmillas hay que poner la URL. Un ejemplo:

<a href="http://www.iesmariamoliner.org">IES María Moliner</a>

Si es una foto guardada en nuestro equipo habra que escribir la ruta hasta la foto y el nombre del archivo seguido con la extensión. Un ejemplo:

<a href="imagenes/gato2.jpg">Segunda foto gato</a>

Un código de ejemplo de esto:

En el código se puede ver la etiqueta  , se utiliza para que no salga todo seguido, sino que cambie de línea.

El código se visualizaría así:

miércoles, 25 de enero de 2017

Hacer listas ordenadas con HTML

Las listas ordenadas se hacen igual que las desordenadas (consultar el post anterior), con la salvedad de que hay que cambiar la etiqueta <ul> por la etiqueta <ol>.

Veamos un ejemplo de ello:

Este es el resultado del código:

miércoles, 18 de enero de 2017

Hacer listas desordenadas en HTML y poner tildes

Hoy voy a explicar como hacer listas desordenadas con HTML.

Utilizaremos la etiqueta: <ul>, y por supuesto para terminar: </ul>

Antes de cada elemento de la lista añadiremos la etiqueta: <li>. Esta etiqueta no hay que cerrarla.

Un ejemplo de ello:

Así se vería la web:

Si tienes problemas para que aparezcan las tildes solo hay que cambiar la configuración a UTF-8-BOM, en la siguiente imagen se muestra donde:

jueves, 12 de enero de 2017

Normas de HTML

Para escribir en HTML hay que tener en cuenta algunas normas, en esta entrada explicaré las dos más importantes:

Cuando escribes un código hay que cerrar las etiquetas.

Por ejemplo:

Incorrecto: Esto es una prueba.
Correcto: Esto es una prueba.

Hay que cerrar primero las etiquetas que se hayan abierto antes.

Por ejemplo:

Incorrecto: Esto es una prueba.
Correcto: Esto es una prueba.

miércoles, 11 de enero de 2017

HTML en notepad++

Hoy vamos a explicar como hacer una web con código HTML en notepad++.

Esta aplicación tiene muchas ventajas para trabajar con HTML, por ejemplo las líneas vienen numeradas a la izquierda.

Primero vamos a hacer en notepad el código y lo vamos a importar a notepad++.

Para hacer esto hay que abrir el programa y pinchar en la barra de herramientas el botón: "File". Nos saldrá un desplegable y tendremos que elegir "Open". Se nos abrirá una ventana donde buscaremos el documento previamente guardado y se importará a la aplicación.

El aspecto debe de ser el siguiente:

Luego lo visualizaremos en un navegador web, pinchando en "Run". Se abrirá un desplegable y podremos el elegir el navegador que queremos utilizar. El aspecto debe ser similar a este:

miércoles, 14 de diciembre de 2016

Mi primera página web con HTML

HTML es un lenguaje de programación. En esta entrada explicaremos como hacer una página web con este lenguaje.

Para empezar hay que tener en cuenta que este lenguaje, como cualquier otro, tiene vocabulario y gramática. Llamaremos a este vocabulario etiquetas.

Ahora voy a explicar las etiquetas más utilizadas:

<HTML>: Indica el inicio y el final del código.

<head>: Determina el texto que saldrá escrito en la parte de arriba de la pestaña.

<title>: Determina el título de la página.

<body>: Indica el inicio y el final del cuerpo de la página web.

<h1>: Determina el encabezado, se pueden usar hasta seis, pero no se recomienda usar más de tres.

: Escribe en cursiva el texto.

: Indica los párrafos.

: Escribe en negrita el texto.

Ahora voy a mostrar un ejemplo del código de una página web muy sencilla:

Y esta es la página web resultante del código antes mostrado:

miércoles, 30 de noviembre de 2016

Cómo insertar una imagen o un vídeo.

Crear una nueva entrada para ambos casos.

Para insertar fotos: Darle al ícono que representa una foto. Se nos abrirá una una pestaña donde podremos elegir buscar una imagen en nuestro ordenador y subirla, elegirla de un algún de google o del blog, o insertar una imagen desde una URL. Después darle solo aceptar. Podemos modificar su tamaño si queremos, pinchando sobre la imagen.

Un ejemplo de imagen subida desde el ordenador es esta:

Un ejemplo de foto subida desde una URL:

Para insertar videos: es lo mismo pero con el icono que está justo a la derecha del de imagen. Además podremos insertar vídeos buscándolos en YouTube desde esa misma ventana.

Un ejemplo de vídeo insertado de Youtube buscándolo directamente desde la ventana es:

¡Hasta pronto!