Clases y Prácticas de interseminarios: 2014

viernes, 16 de mayo de 2014

Hiperenlaces

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.

Por ejemplo, para insertar el enlace:

Ejemplo:

Vamos a crear una pagina web que nos enlace a las otras tres páginas web que hicimos la clase pasada (pagina web Animales, Flores, Deportes)

- Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. Luego escribe el siguiente código.

<html>

<head>

</head>

<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>

<br>

<a href="animales.html" target="_top">Animales</a>

<br>

<a href="deportes.html" target="_top">Deportes</a>

<br>

<a href="flores.html" target="_top">Flores</a>

</body>

</html>

Ahora guardalo con el nombre de menu.html

ejecutalo. visualizalo

Guardar un documento HTML

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

1. Pulsar la combinación de teclas Ctrl+G. o hacer clic sobre el menú Archivo y elegir la opción Guardar o Guardar como y le colocamos el nombre en este caso Ejemplo1.HTML

Todas las paginas web que se hagan en este edictor de texto deben ser guardadas con la extencion HTML para que puedan ser visualizadas por el visualizador de paginas web.

Como Iniciar el Block de Notas

Presionando Clic en el Boton Inicio del Escritorio

situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio.

Automaticamente se despliega un menú asi:

Luego precionamos clic sobre Todos los Programas aparece otra lista con los programas que hay instalados en tu ordenador, Clic en Accesorios, después clic en Bloc de notas Asi:

y automaticamente se arrancará el programa.

Otra forma es presionando doble clic sobre el icono del Bloc de notas del escritorio .

Estructura básica de una pagina web en lenguaje HTML

La estructura básica de una página en lenguaje HTML es:

El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él.

Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>.

Ejemplo:

<title> Mi Primera Página Web </title>.

La etiqueta <title> ha de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.

asi:

<head>

<title> Mi Primera Página Web </title>.

</head>.

Formularios

Formularios

Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la apariencia de un formulario.

Crea todas las formas

</select> <select name="nombre" múltiples size=?> </ select>

Crea un menú desplegable. Tamaño establece el número de elementos de menú visible antes de yo u necesidad de desplazarse.

Pone en marcha cada elemento de menú

Crea un menú desplegable

Pone en marcha cada elemento de menú

Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura.

Crea una casilla de verificación. Texto siguiente etiqueta.

Crea un botón de radio. Texto sigue etiquetas

. Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.

Crea un botón Enviar

<input type="image" border=0 name="NAME" src="name.gif"> type="image"

Crea un botón Enviar con una imagen

type="reset"> <input

Frames (Marcos).

Frames Marcos

etiquetas en un documento marco, también se pueden anidar en otros conjuntos de marcos

rows="value,value"> <frameset

Define las filas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de w

cols="value,value"> <frameset

Define las columnas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de

<frame>

Define un marco único - o región - dentro de un conjunto de marcos

Define lo que aparecerá en navegadores que no soporten marcos

Marcos Atributos

src="URL"> <frame

Especifica que el documento HTML se debe mostrar

name="name"> <frame

Nombres de la estructura, o de la región, por lo que puede ser objetivo de otros marcos

marginwidth=#> <frame

Define los márgenes izquierdo y derecho del marco, debe ser igual o superior a 1

marginheight=#> <frame

Define los márgenes superior e inferior del marco, debe ser igual o superior a 1

scrolling=VALUE> <frame

Establece si el marco tiene una barra de desplazamiento, puede ser igual a "sí", "no", o "auto. Valor" El valor por defecto, como en los documentos ordinarios, es automático.

noresize> <frame

Impide que el usuario cambiar el tamaño de un marco

Tablas

Tablas

Crea una tabla

marcha cada fila en una tabla

Pone en marcha cada celda de una fila

Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado)

Atributos de la tabla

border=#> <table

Establece el ancho de borde alrededor de celdas de la tabla

cellspacing=#> <table

Ajusta la cantidad de espacio entre las celdas de la tabla

cellpadding=#> <table

Ajusta la cantidad de espacio entre el borde de una celda y su contenido

width=# <table o %>

Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento

align=?> <tr o align=?> <td

Establece la alineación de la celda (s) (a la izquierda, centro o derecha)

valign=?> <tr o valign=?> <td

Establece la alineación vertical de la celda (s) (, superior, media o inferior)

Establece el número de columnas de una celda debe abarcar

Establece el número de filas de una célula debe abarcar (por defecto = 1)

Evita las líneas dentro de una célula se rompa para adaptarse a

Gráficos

Agrega una imagen

Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo

Ajusta tamaño del borde alrededor de una imagen

<hr>

Inserta una regla horizontal

size=?> <hr

Establece el tamaño (altura) de la regla

width=?> <hr

Establece la anchura de la regla, en porcentaje o valor absoluto

noshade> <hr

Crea una regla sin una sombra

Formato

<p></p>

Crea un nuevo párrafo

align=?> <p

Alinea un párrafo a la izquierda, derecha o al centro

<br>

Inserta un salto de línea

Sangría de texto de ambos lados

Crea una lista de definiciones

<dt>

Precede cada definición de término

<dd>

Precede cada definición

Crea una lista numerada

Precede a cada elemento de la lista, y añade un número

Crea una lista con viñetas

align=?> <div

Un tag genérico utilizado para grandes bloques de formato de HTML, también se utiliza para hojas de estilo

Enlaces

Crea un hipervínculo

Crea un enlace de correo

Crea una ubicación de destino dentro de un documento

Enlaces a ese lugar de destino en otra parte del documento

Etiquetas de texto

Etiquetas de texto

Crea texto preformateado

Crea un título grande

Crea un título pequeño

Crea texto en negrita

Crea texto en cursiva

Crea, o máquina de escribir estilo de texto-teletipo

Crea una cita, por lo general en cursiva

Hace hincapié en la palabra (con cursiva o negrita)

Hace hincapié en la palabra (con cursiva o negrita)

size=?> <font </ font>

Ajusta tamaño del fuente, de 1 a 7)

color=?> <font </ font>

Juegos de color de la fuente, usando nombres o valores hex

Consejo de Atributos

bgcolor=?> <body

Establece el color de fondo, usando nombres o valores hex

text=?> <body

Establece el color del texto, usando nombres o valores hex

link=?> <body

Establece el color de los enlaces, usando nombres o valores hex

vlink=?> <body

Establece el color de los enlaces, usando nombres o valores hex

alink=?> <body

Establece el color de los enlaces con un clic

Lenguaje HTML y Comando Básicos.

El HTML (Hyper Text Markup Language) lenguaje de hipertexto es el lenguaje con el que se escriben o se crean las páginas web. Este lenguaje permite escribir paginas web de forma estructurada por medio de etiquetas que marcan el inicio y el fin de cada elemento del documento. De esta forma :

Inicio <comando1>

Final </comando1>

Ejemplo inicio y final de la etiqueta Body

Inicio <Body>

Final </Body>

Un documento hipertexto es un documento multimedia porque se compone de texto, imágenes, sonido, vídeos, etc.,

Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores que permiten visualizar las páginas web (Internet Explorer, Netscape Navigator, entre otros).

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.

COMANDOS BASICOS HTML

* <HTML>: indica el comienzo del documento HTML.

* <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página.

* <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

* <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

* <A>: define los enlaces.

* <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.

* <P>: el texto dentro de esta etiqueta forma un párrafo.

* <IMG>: imágenes.

* <BR>: salto de línea.

* <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.

* <B> y <STRONG>: se utilizan para resaltar el texto.

* <U>: texto subrayado.

* <I>: texto en cursiva.