Enlaces en HTML

Dentro de html podemos crear hiperenlaces intradocumentales (a lugares dentro de nuestra página web) y los extradocumentales (a archivos que están fuera de nuestro documento html): que pueden ser hacia una página web externa o a una dirección de mi equipo.

Para crear un hiperenlace usaremosla etiqueta <a>...</a>, y aparecerá en zul y subrayado, y al clickar nos dirigirá al destino.

Intradocumental:
Enlace:
<a href="#nombre">...</a>
Destino:
<p id="nombre"></p>
<h1 id="nombre"></h1>

Varias etiquetas pueden ir a un mismo destino, pero una sola etiqueta nopuede tener varios destinos.
<a href="pagina.html">...</a> en la que meteremos la URL de aceso al otro documento.

Para crear un hiperenlace aun punto en otro documento, deberemos combinar ambas etiquetas: señalaremos el documento al que hacemos el hiperenlace y al punto al que queremos ir:
<a href="pagina.html#nombre">...</a>

Y el destino lo indicaremos así:
<a name="nombre">...</a>
<h1 id="nombre">...</h1>
<p id="nombre">...</p>

Diferentes listas en html

Como crear listas con lenguaje en HTML

Para crear listas en html deberemos elegir primero si la queremos ordenada, sin ordenar o descriptiva. Para empezar con la etiqueta <ul>...</ul> la crearemos sin ordenar  y con la etiqueta <ol>...</ol> la crearemos ordenada y con la etiqueta <dl>...</dl> descriptiva.

Listas sin ordenar

En las listas sin ordenar, las posiciones de los elementos no es significativo, no importa, dentro de las etiquetas <ul>...</ul> (ul indica unordered list) deberemos escribir la etiqueta <li> por cada elemento de la lista que quieras, un ejemplo de lista sin ordenar sería la siguiente:

<ul>

<li> elemento

<li> elemento

<li> elemento

</ul>

Listas ordenadas

En las listas ordenadas, las posiciones de los elementos se deben resaltar y por ello se crea un orden, se utiliza la etiqueta  <ol>...</ol> (ol indica ordered list) deberemos escribir la etiqueta <li> por cada elemento de la lista que quieras, un ejemplo de lista ordenada sería la siguiente:

<ol>

<li> elemento 1

<li> elemento 2

<li> elemento 3

</ol>

Además, existen diferentes tipos de listas ordenadas, en la etiqueta de apertura podemos escribir: 

<ol type ="A"> (Para que cree la lista con :A, B, C, D, etc)

<ol type ="a"> (Para que cree la lista con :a, b, c, d, etc)

<ol type ="I"> (Para que cree la lista con :I, II, III, IV, etc)

<ol type ="i"> (Para que cree la lista con :i, ii, iii, iv, etc)

Listas de descripción

En las listas descriptivas, en ellas se utiliza la etiqueta  <dl>...</dl> (dl indica description list) y, tras esta se escriben las etiquetas <dt>...</dt> en la que la frase que insertemos se situará más a la izquierda, y la etiqueta <dd>...</dd> que se situará más a la derecha, dando la sensación sin ningún símbolo de que pertenece a la frase con la etiqueta de arriba, por ejemplo:

<dl>

<dt>Trabajos de TICO</dt>

<dd>Escribir un blog</dd>

<dd>Trabajar con HTML</dd>

<dd>Aprobar</dd>

</dl>

Además, podemos incluir listas, dentro de otras, vamos a ver un ejemplo en el cual, hemos creado una lista sin ordenar, en la cual, hemos creado dos listas ordenadas:

Curriculum en HTML

Para escribir nuestro curriculum en html, tras escribir las etiquetas correspondientes, deberemos usar la etiqueta <ul>...</ul> y en ella, deberemos escribir los elementos que queremos que la conforme nuestra lista precedidos de la etiqueta <li>, la cual no hace falta cerrar.

Así quedaría el ejmplo del Curriculum:

Y así quedaría la vista en el navegador.

<ol>

<ol type ="A">

<ol type ="a">

<ol type ="I">

<ol type ="i">

NotePad ++

Para escribir el codigo, generalmente lo hacemos con el notepad, pero, existe una extensión llamada 'notepad + +' que está especializado para ayudar a escribir el código HTML. Por ejemplo, al abrir una etiqueta, al terminar de escribirla, se crea la etiqueta de cierre automáticamente, para no olvidar escribirla. También te marca las etiquetas en otro color que el cuerpo de la página, para así distinguir el texto de las etiquetas.

Así sería su apariencia en el NotePad ++

Y así sería la apriencia en nuestro navegador, en este caso google chrome.

Primera Página Web

Vamos a crear nuestra primera página web

Para ello escribitrmos nosotros mismos el lenguaje HTML, en el Notepad.

Para comenzar, debemos abrir el bloc de notas, y comenzar con la etiqueta <html> (para que reconozca el código) y es conveniente cerrarla (</html) y escribir entre ambas etiquetas, para no olvidarlo.
Usando la etiqueta <head>...</head> escribiremos el título que aparece en las pestañas del navegador.
Para escribir el cuerpo de la página web usaremos la etiqueta <body>...</body> y dentro de ella podremos escribir apartados, subapartados, etc, utilizando las etiquetas<h1>...</h1>; <h2>...</h2>; etc. También podremos usar palabras en negrita (<b>...</b>) o ponerlas en cursiva (<i>...</i>)

Tras escribir el código en el bloc de notas, debemos clickar en archivo/ guardar como... Y escribiremos el nombre de la página web seguido de '.html'; en 'Tipo' seleccionaremos 'todos los archivos'; en codificación seleccionaremos 'UTF-8'; tras esto clickaremos en guardar y ya tendremos un enlace que abrirá nuestro navegador predeterminado a nuestra página web.

Nuestra primera y sencilla página web, quedaría tal que así:

Código

<HTML>
<HEAD>
<TITLE>Erase una vez HTML</TITLE>
</HEAD>
<BODY>
<h1>Erase una vez HTML</h1>
<h2>El padre</h2>
<P>El padre de la web<b>Tim Berners-Lee</b>, es también el padre del lenguaje HTML</P>
<h2>La estandarización </h2>
<p>El lenguaje HTML está estandarizado por el W3c, el <i>Word Wide Web Consortium</i>.</p>
</BODY>
</HTML>





















Aspecto dentro del navegador

HTML

Vamos a empezar a trabajar con HTML

HTML es un lenguaje universal, que funciona en cualquier plataforma y navegador, debido a su sencillez. Un documento HTML debe contener algo más que simples caracteres básicos, además de dicho texto, una serie de instrucciones para el navegador las interprete: estas intrucciones se denominan etiquetas y se escriben entre guiones (< >). Estas etiquetas contienen la estructura de la página web.

Para empezar a escribir código HTML, debemos conocer las etiquetas básicas que lo componen. Estas, se ponen al principio y al final del texto al que lo queramos aplicar, repitiendo la etiqueta seguida de una barra ( / ): por ejemplo:

<strong>ejemplo</strong>

Vamos a ver algunas de las etiquetas más básicas:

<HTML> … </HTML>

Delimita y engloba toda la página web, que consta de cabecera y cuerpo.

<HEAD> … </HEAD>

Delimita y engloba la cabecera de una página.

<TITLE> … </TITLE>

Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador.

<BODY> … </BODY>

Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página.

<H1> ... </H1> o <H2> ... </H2> (hasta 6)

Párrafos que son encabezamientos (con distintos niveles).

<P>... </P>

Párrafos normales.

<B>…</B> o <strong>... </strong>

Negrita

<I>…</I>

Cursiva:

<U>…</U>

Subrayado

<BIG>…</BIG>

Para agrandar la letra

<SMALL>…</SMALL>

Para empequeñecer la letra

Edición Avanzada

 Entradas sobre edición avanzada:

Clickando sobre 'Enlace' podemos añadir un hipervínculo

hipervínculo del IES María Moliner

También podemos añadir imágenes a nuestras entradas 

(clickando sobre el emoticono de la imagen), bien descargándolas o cogiendo su URL e insertando la imagen. Cada una tienen sus ventajas y sus inconvenientes.

También podemos insertar un video

 (clickando sobre el emoticono de video), desde youtube esmucho más sencillo, insertando la URL.