Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Encuentra los documentos específicos para los exámenes de tu universidad
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
Primer apunte con el inicio de HTML.
Tipo: Apuntes
1 / 12
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
Introducción
El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animacio-// nes... e incluso sonido y video. Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo ) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas. En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha sido reemplazado todavía y por tanto será el empleado de aquí en más.
Características del lenguaje HTML
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web?
Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:
Como respuesta a todos estos requisitos se creó el lenguaje HTML (HiperText Markup Language), cuyas siglas significan " L enguaje H iper T exto de M arcas". Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.
Qué se necesita para crear una página web
Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier computador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos o cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, como pueden ser Microsoft Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son las deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.
Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o .htm en MS-DOS, Windows o cualquier otro sistema que sólo acepte tres
La primera etiqueta del archivo es . Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos . Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.
Luego vemos la etiqueta . Lo que sigue a continuación hasta su cierre , es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página (Mi primera página Web</ title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento. Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.". Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar "/" antes del nombre.
Las Etiquetas
Las etiquetas (en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.
Reglas básicas
Etiquetas de HTML
Veamos un ejemplo.
<html>
<head> <title>Una página Web
Hola a todos. Este texto es en negrita
Esta es una etiqueta HTML:
Este texto es en negrita
El elemento HTML comienza con la etiqueta de apertura (etiqueta que nos muestra el texto en negrita).
El contenido de dicho elemento es: Este texto es en negrita.
El fin del elemento HTML es con la etiqueta de cierre .
Otro elemento HTML en el ejemplo es:
** Hola a todos. Este texto es en negrita **
El elemento HTML comienza con la **etiqueta de apertura ** (etiqueta que define el cuerpo del documento).
El contenido de dicho elemento es: Hola a todos. Este texto es en negrita.
El fin del elemento HTML es con la **etiqueta de cierre **.
¿Qué son los atributos de las etiquetas?
Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
Un ejemplo de los atributos sería:
En la etiqueta podemos observar el atributo bgcolor=(color de fondo) y el valor “#FFFF00" (representa el color amarillo en hexadecimal).
Esto quiere decir que el color de fondo de la página será amarillo.
minúscula , el World Wide Web Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la versión siguiente de HTML) acepta solo minúsculas. Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas tus códigos HTML.
Etiquetas Básicas
Títulos (Headings)
Nos definen el tamaño de un título o cabecera.
nos da el tipo de letra más grande. nos da el tipo de letra más pequeño. HTML agrega automáticamente un espacio antes y después de cada título.
al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.
Párrafos
Los párrafos se definen con la etiqueta
.
Comentarios
La etiqueta se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.
Salto de línea
Trazar una línea
La etiqueta
nos permite trazar una línea horizontal. La etiqueta no tiene cierre.Tabla con las etiquetas básicas
Para ello debemos usar la etiqueta **** que proviene de la primera letra de la palabra anchor (ancla). La etiqueta tiene como cierre < /a >.
El formato es:
Primer enlace a Google
Luego en el navegador aparecerá de color azul y subrayado si no ha sido cliqueado y en morado si se hizo clic en él. Cabe mencionar que estos colores pueden ser configurados desde CSS, como se verá mas adelante.
Direccionar desde una página web a otra página en nuestro sitio
Ejemplo :
1º Crear el documento fundamentos.html, dentro de la carpeta que creó anteriormente junto con el archivo index.html
2º Dentro de fundamentos.html tiene que crear la estructura básica de una página web y colocar en body como muestra la figura:
3º Grabar.
4º Abrir index.html (copiar en el notepad ++, el siguiente código en limpio como sigue).
5º Grabar (recuerde grabarlo con el nombre index.html).
6º Ejecutamos el index para que se abra en el navegador y luego al dar clic en fundamento se abrirá la otra página , mostrando como sigue:
Con esto hemos creado nuestro primer enlace de una página a otra dentro de nuestro mismo sitio.
Direccionar a un sitio web externo
1º Abrir el archivo index.html
Texto del enlace que se visualizará en el navegador.
Enlace para direccionar al usuario para interactuar con él.
2º Copiar como muestra la figura:
3º Grabar y ejecutar en el navegador. Al hacer clic en Abrir Google, aparecerá el buscador en la misma ventana o etiqueta.
En este caso hemos salido de nuestra página web para ir a una externa sin embargo no queremos que salga de nuestra página por lo tanto deberemos colocar:
y mostrará en el navegador:
Direccionar a ciertos elementos de una misma página
1º Abrir index.html
2º copiar como se muestra en la figura:
3º Luego copiar 10 veces la parte de HTML, esto se hace para darle una mayor altura a la página y poder apreciar el funcionamiento de este tipo de enlace. Tiene que quedar así:
6º Después ir al final del párrafo de CSS y colocar como muestra la figura:
Fíjese que en href aparece el numeral seguido de la palabra que se colocó en los id de los h2 anteriormente.
7º Grabar y ejecutar. Al pulsar sobre Ir a fundamentos o Ir a html , la página se colocará al principio con el encabezado correspondiente.
Direccionar a un correo electrónico
Para direccionar a un correo electrónico, se debe colocar en href = ” mailto: el nombre del correo electrónico “ que quiere abrir.
Con esto se ejecutará la aplicación predeterminada para mandar mail.
Realice lo siguiente, por ejemplo:
Direccionar a un recurso para descargar
Esto lo podemos utilizar para descargar una imagen, un archivo pdf, o cualquier archivo descargable. Por ejemplo:
