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>
TICO's blog Alvaro
En este blog se van a realizar diferentes trabajos, principalmente sobre la edición dentro de blogger. IIT María Moliner (Coslada, Madrid)
lunes, 30 de enero de 2017
martes, 17 de enero de 2017
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>
lunes, 16 de enero de 2017
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">
martes, 20 de diciembre de 2016
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.
martes, 13 de diciembre de 2016
Primera Página Web
Vamos a crear nuestra primera página web
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í:
<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
lunes, 12 de diciembre de 2016
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
martes, 29 de noviembre de 2016
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.
Suscribirse a:
Entradas (Atom)