República bolivariana de Venezuela
Ministerio del poder popular defesa
Universidad Experimental Politécnica De La Fuerza Armada Nacional
Guanare Ed. Portuguesa
Nociones básicas de HTML
Bachiller Profesor
María Laura Godoy Jesús Toledo
Enero de 202
Introducción
En cuanto HTML se puede decir que es un lenguaje universal, que funciona en cualquier plataforma. Y
con cualquier navegador se utiliza para el desarrollo de páginas de Internet, Por tanto, para que un
documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto,
una serie de instrucciones para el browser que lo va a reproducir: estas instrucciones se denominan
etiquetas o tags y se distinguen del texto porque van entre guiones (< >). Estas etiquetas contienen todo el
resto de la información de la página web.
Es importante saber qué para escribir un documento complejo de esta manera exige un conocimiento
exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para evitar esta
dificultad, hay una serie de programas denominados comúnmente editores los cuales a la hora de crear
muestran mayor facilidad.
El objetivo de este documento es aprender a componer una sencilla página web desde el más básico de los
programas de texto disponibles en Windows: el Cuaderno de Notas. De esta manera, seremos capaces de
entender y manejar los códigos fuente de las páginas más complejas.
Tabla de Contenidos
Capítulo 1nociones basicas de HTML............................................................................................1
HTML.............................................................................................................................................1
Las etiquetas ..................................................................................................................................1
Atributos de HTML........................................................................................................................2
los elementos .................................................................................................................................4
Etiquetas de bloke .......................................................................................................................5
Editores de texto HTMl..................................................................................................................7
historia del HTML.....................................................................................................................10
Incercion de archivos multimedia ...........................................................................................11
Hiperenlaces ................................................................................................................................13
marcos de HTML..........................................................................................................................14
Formularios..................................................................................................................................14
Nociones básicas de HTML
Concepto de HTML
Comenzaremos por decir que el lenguaje marcado de HTML se utiliza para el desarrollo de
páginas de Internet, por lo cual sus siglas corresponden HyperText Markup Language, que podría
ser traducido como Lenguaje de Formato de Documentos para Hipertexto.
Por otro lado es importante resaltar que este lenguaje de programación es estándar que sirve de
referencia del software como se dijo anterior mente conecta con la elaboración de páginas web
en sus diferentes versiones, además de eso define una estructura básica y un código (denominado
código HTML) para la definición de contenido de una página web, como texto, imágenes, videos,
juegos, entre otros.
Las etiquetas en HTML
Las etiquetas HTML son fragmentos de código que permiten crear elementos HTML, estructuras
básicas del lenguaje de programación HTML en el que se escriben las páginas web porque es el
que entienden los navegadores.
El formato de una etiqueta HTML es un fragmento de texto encerrado entre corchetes angulares
< >, y cada elemento HTML tiene una etiqueta de inicio del tipo <etiqueta> y suele terminar con
una etiqueta de cierre que lleva una barra inclinada al principio </etiqueta>.
Que son los atributos HTML
Con respecto a los elementos en HTML estos tienen atributos los cuales son valores adicionales
que configuran los elementos que ajustan su comportamiento de diversas formas para cumplir los
criterios de los usuarios.
Ejemplos de atributos
accsskey
Proporciona una pista para generar un atajo de teclado para el elemento actual. Este atributo consta
de una lista de caracteres separados por espacios. El navegador debe utilizar el primero que exista
en la distribución del teclado del ordenador.
autocapitalize
Controla si la entrada de texto se pone en mayúsculas automáticamente a medida que el usuario la
introduce o edita. Puede tener los siguientes valores:
off nome. no se aplica capitalización automática (todas las letras están predeterminadas en
minúsculas)
on o senteces. la primera letra de cada oración de manera predeterminada tiene una letra
mayúscula; todas las demás letras están predeterminadas en minúsculas
words la primera letra de cada palabra de manera predeterminada tiene una letra
mayúscula; todas las demás letras están predeterminadas en minúsculas
characters todas las letras de manera predeterminada deben estar en mayúsculas
class Una lista separada por espacios de las clases del elemento. Las clases permiten que CSS y
JavaScript seleccionen y accedan a elementos específicos a través de los selectores de clase o
funciones como el método.
Contenditable Un atributo enumerado que indica si el usuario debe poder editar el elemento. Si
es así, el navegador modifica su «widget» para permitir la edición. El atributo debe tomar uno de
los siguientes valores:
true o la cadena vacía, la cual indica que el elemento debe ser editable;
false, el cual indica que el elemento no debe ser editable.
Draggable
Un atributo enumerado que indica si el elemento se puede arrastrar mediante la API de arrastrar y
soltar. Puede tener los siguientes valores:
true, indica que el elemento se puede arrastrar
False, indica que el elemento no se puede arrastrar.
Elementos HTML
Un elemento de HTML es un tipo de componente de documento de HTML (Hypertext Markup
Lengua), uno de los diversos tipos de nodos de HTML ( hay también nodos de texto, nodos de
comentario y otros). El documento de HTML está compuesto de un árbol de nodos HTML
sencillo, como nodos de texto, y elementos de HTML, los cuales añaden semántica y formato a
partes del documento (p. ej., texto en negrita, lo organiza en párrafos, listas y tablas
o hiperenlaces e imágenes embebidas). Cada elemento puede tener atributos de HTML
especificados. Los elementos también pueden tener contenido, incluyendo otros elementos y texto.
Listas de elementos
<!doctype html>
Define que el documento esta bajo el estandar de HTML 5
<html>
Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser
descendientes de este elemento
<head>
provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a
scripts y hojas de estilos.
Etiquetas de bloque
De Igual Los e forma los lementos, en HTML son elementos "en bloque" o elementos "en línea".
Un elemento en bloque ocupa todo el espacio de su elemento por lo cual un (contenedor), crea así
un "bloque". Este artículo ayuda a explicar lo que esto significa.
navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después
del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque:
Los elementos de bloque sólo deben aparecer dentro del elemento <body>.
a siguiente es una lista completa de todos los elementos en bloque de HTML (aunque "en bloque"
no se define técnicamente para los elementos que son nuevos en HTML5).
<addrss>
Información de contacto.
<artucle>
Contenido de Articulo.
<aside>
Contenido adicional.
Etiquetas en línea
Las etiquetas en línea son aquellas que modifican el texto para darle otro aspecto, Entre ellas
distinguimos las de texto en negrita, las de texto en cursiva, las de subrayado y tachado, las de
subíndice y superíndice, las de citas, y otras.
Estas etiquetas tienen todas su apertura y su cierre; El texto que queremos modificar debe ir
encerrado entre estas dos etiquetas. También pueden anidarse unas dentro de otras de manera que
consigamos resultados diferentes.
Etiquetas de texto en negrita
- Etiqueta <b> ... </b>
Etiqueta para texto en negrita. Es la más utilizada, por ser también la más corta de escribir. El
aspecto del texto con esta etiqueta es el siguiente:
Texto escrito dentro de una etiqueta b
Aunque apenas se utiliza apenas también podemos usar la etiqueta <strong>... </strong> para
poner el texto en negrita. El resultado es el mismo que en la anterior.
Etiquetas de texto en Cursiva
- Etiqueta <i>... </i>
Etiqueta para texto en cursiva. Es la más utilizada, por ser también la más corta de escribir. El
aspecto del texto con esta etiqueta es el siguiente:
Texto escrito dentro de una etiqueta i
También podemos utilizar la etiqueta <em>... </em> para el texto en cursiva
Etiquetas de subrayado y tachado
- Etiqueta <u>... </u>
Etiqueta para subrayado de texto. Es la más utilizada, por ser también la más corta de escribir. El
aspecto del texto con esta etiqueta es el siguiente:
Texto escrito dentro de una etiqueta
También podemos utilizar la etiqueta <ins>... </ins> para el subrayado del texto.
- Etiqueta <s>... </s>
Editores de textos
Los editores de HTML pueden ser de dos tipos, como veremos, unos permiten codificar las
páginas utilizando el propio lenguaje HTML, a base de etiquetas y otros nos permiten diseñar una
página web, como si estuviésemos escribiendo con un editor de texto avanzado, sin tener que
escribir el código con las etiquetas. Esta última vertiente, que podemos llamar editores en modo
diseño, presenta una facilidad adicional para las personas que no deseen complicarse la vida con el
lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo.
Los editores en modo diseño nos permiten crear la página como si estuviéramos escribiendo un
documento con un editor del tipo de Word. El editor de HTML es el encargado de vérselas con el
lenguaje y programar internamente la página con el código HTML,según lo que nosotros estamos
diseñando.
Con el editor HTML en vista diseño podemos colocar imágenes, definir estilos, utilizar negritas o
cursivas, etc. sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el
editor el que conoce estas etiquetas y las utiliza convenientemente. Este tipo de editores HTML en
modo diseño se denominan, en lenguaje técnico WYSIWYG (What You See Is What You Get)
porque cuando trabajas con ellos lo que ves que estás creando con el editor es lo que obtienes
luego cuando grabas la página.
Tipos de editores de HTML
1. Atom
Atom es un editor relativamente nuevo que salió en el 2014 y ha ganado un enorme impulso desde
entonces. Se trata de uno de los mejores editores de código HTML, gratuito y de código abierto, y
fue desarrollado por el equipo de GitHub. Atom usa una licencia de software libre para su paquete
y es mantenida por la comunidad de GitHub. Su objetivo es ofrecer una experiencia premium en el
editor, y a la vez mantenerlo completamente gratis; además de flexibilidad para personalizar el
software en sí.
Notepad++
Notepad++ es un editor que fue desarrollado para máquinas basadas en Windows. Los usuarios
de Linux también pueden usarlo a través de Wine. Este editor se distribuye como software libre y
su repositorio también está disponible en GitHub. Al igual que otros proyectos de la comunidad,
admite plugins de terceros.
2. Sublime Text Sublime es otro de los mejores editores HTML que podrás encontrar.
Desarrollado por una empresa con sede en Sydney, este software se encuentra en la categoría de
freemium. Freemium significa que puedes usar Sublime de forma gratuita, pero debes comprar
una licencia para poder disfrutar de todas las funciones.
Historia del HTML
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador
del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema
de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática,
el "hipertexto" permitía que los usuarios accedieran a la información relacionada con los
documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas
de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una
convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir
sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora
llamada WorldWideWeb (W3).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el
nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo
de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del
organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances
significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios)
ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en
estándar oficial.
Inserción de archivos multimedia Multimedia
En HTML5 se pretende que el contenido multimedia, (audios y vídeos) formen parte de la
página y dejen de ser unos elementos incrustados. Se pretende por tanto que los nuevos
navegadores se adapten a ello e incorporen recursos para poder reproducir este contenido sin
tener que usar plugins externos.
De momento pocos son los navegadores que permiten reproducir audios o vídeos en los formatos
más habituales sin utilizar plugins externos, por lo que deberemos seguir usando la forma habitual
de insertarlos hasta que la mayoría de ellos los pueda reproducir.
Etiqueta embed
La etiqueta embed, es usada normalmente para incrustar video y audio aunque no es reconocida
como parte del lenguaje de HTML4 o XHTML1. En HTML5 se reconoce ya como propia,
pudiendo validar correctamente la página al usar esta etiqueta.
Etiquetas audio y video
Dos nuevas etiquetas para incrustar contenido multimedia directamente: <audio>
</audio> y <video> </video>.
Estas etiquetas pretenden simplificar la inserción de contenido multimedia, evitando tener que
usar plugins en el navegador. Es el propio navegador el que debe reconocer el formato
multimedia y ponerlo en marcha. La mayoría de los navegadores no se han puesto al día para
reconocer los formatos de audio y video más comunes, por lo que de momento tendremos que
seguir usando la etiqueta embed
Las etiquetas audio y video tienen los siguientes atributos para poder localizar y controlar el
archivo multimedia.
src="ruta_del_archivo" : Al igual que con las imágenes indicamos en este atributo la
ruta del archivo.
autoplay Indica que el archivo debe reproducirse automáticamente al cargarse la página.
Este atributo no tiene valores.
controls Indica que deben mostrarse los controles para que el usuario pueda iniciar,
detener , pausar el archivo. Este atributo no tiene valores.
widht="300"></video>
La etiqueta source
no todos los navegadores soportan todos los formatos de audio o video, por lo que podemos poner
en la página enlaces al mismo archivo en varios formatos, para que el navegador detecte el
formato que soporta. Para ello utilizamos la etiqueta source como en el siguiente ejemplo:
Audio autoplay loop>
<source src="sintonia.mp3"/>
<source src="[Link]"/>
<source src="[Link]"/>
</audio>
La etiqueta es válida tanto para audio como para video. Dentro de la etiqueta source indicamos la
ruta a diferentes archivos. El navegador intentará reproducir el archivo indicado en la primera
etiqueta, si no lo consigue pasará a la segunda, y así sucesivamente hasta que consiga reproducir
alguno de ellos.
Hiperenlaces
Es un elemento de un documento electrónico que hace referencia a otro recurso, como por ejemplo
un punto específico de un documento o de otro documento. Combinado con una red de datos y
un protocolo de acceso, un hipervínculo permite acceder al recurso referenciado en diferentes
formas, como visitarlo con un agente de navegación, mostrarlo como parte del documento
referenciado o guardarlo localmente.
Los hipervínculos son parte fundamental de la arquitectura de la Word Wide Web, pero el
concepto no se limita al HTML o a la Web. Casi cualquier medio electrónico puede emplear
alguna forma de hiperenlace.
Comportamiento de los enlaces en los navegadores web
Un navegador web normalmente muestra un hiperenlace de alguna forma distintiva, por ejemplo
en un color, letra o estilo diferente. El comportamiento y estilo de los enlaces se puede especificar
utilizando lenguaje CSS.
El puntero del ratón también puede cambiar a forma de mano para indicar el enlace. En muchos
navegadores, los enlaces se muestran en texto azul subrayado cuando no han sido visitados, y en
texto púrpura subrayado cuando han sido visitados. Cuando el usuario activa el enlace (por
ejemplo pinchando sobre él con el ratón) el navegador mostrará el destino del enlace. Si el destino
no es un archivo HTML, dependiendo del tipo de archivo y del navegador y sus plugins, se puede
activar otro programa para abrir el archivo.
El código HTML contiene todas las características principales de un enlace:
link target (URL) (destino) o (ubicación)
link label (etiqueta
Marcos
Estos permiten a los autores presentar documentos con vistas múltiples, que pueden ser ventanas
o subventanas independientes. Las vistas múltiples ofrecen a los autores una manera de mantener
cierta información visible mientras otras vistas se desplazan o se sustituyen. Por ejemplo, dentro
de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un menú
de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado al
navegar por el segundo marco.
Formularios
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación,
botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su
procesamiento.
<form action="[Link]" method="get">
<p>Nombre: <input type="text" name="nombre" size="40"></p>
<p>Año de nacimiento: <input type="number" name="nacido" min="1900"></p>
<p>Sexo:
<input type="radio" name="hm" value="h"> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</p>
</form>
La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más
importantes de la etiqueta <form> son:
action: contiene el nombre del agente que procesará los datos remitidos al servidor (por
ejemplo, un script de PHP)
method: define la manera de enviar los datos al servidor.
Capas
Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de
una capa (posición, visibilidad, etc.), como los de cualquier otro elemento HTML, pueden
definirse dentro de una hoja de estilo. Su contenido, en cambio, siempre deberá ser especificado
dentro de la parte principal de la página. Como se puede ver, de nuevo estamos siguiendo la
filosofía de separar el contenido y la forma de representarlo.
En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La denominación
oficial podría traducirse como "contenido HTML posicionable dinámicamente".
Sin duda, lo más importante de las capas es la posibilidad que presentan de ser movidas y
modificadas desde un lenguaje de script. Ejemplo
left y top
Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa
donde esté metida. Hay que tener en cuenta que el documento completo también se considera una
capa.
Conclusión
De sierta forma el HTML es el idioma internacional de la Red. Es un simple lenguaje que
permite a los publicadores web crear páginas complejas de texto e imágenes, que
pueden ser vistas por cualquiera, sin que importe que clase de ordenador o
navegador se esté usando. Esto puede ser creado y editado con cualquier editor de
textos básico, como puede ser Gedit en Linux, el Blog de notas de Windows, o
cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft
Wordpad, entre otros.
Además, de esto cuenta condiferentes editores para la realización de sitios web con
características WYSIWYG (En español: “lo que ves es lo que obtienes”). Estos
editores permiten ver el resultado de lo que se está editando en tiempo real, a
medida que se va desarrollando el documento. Para la edicion de de estas paginas contamos con
difererentes tecnicas que no facilitan sufuncion tales so atributoslas etiquetas los enlaces marcos
entre otros.
Para finalizar es impotante decir que el mundo de la programacion cuenta con una infinidad de
legujes de programacion los cuales pueden ser usados de direntes formas y en distintos
navegadores wet .
Lista de referencias
[Link]
[Link]
TML
[Link]
[Link]
jores-editores-html/
[Link]
[Link]