Introducción y conceptos básicos de HTML
EMPEZAR
Índice
Herramientas y conceptos básicos
Estructura y elementos básicos de un documento HTML5
Texto y párrafos
Hipervínculos
Secciones de una página web
Imágenes
¿Qué es lenguaje de marcado?
Un “Lenguaje de marcado” o “lenguaje de marcas” se puede definir como una forma de codificar un documento donde, junto con el texto, se incorporan etiquetas, marcas o anotaciones con información adicional relativa a la estructura del texto, su presentación, etc. El siguiente ejemplo pretende evidenciar una demostración de un lenguaje de marcado o lenguaje de marcas. Suponga que se desea enviar la siguiente información, destacando algunas de sus palabras:
¿Qué es un lenguaje de marcado?
Su codificación utilizando etiquetas podría ser la siguiente:
Como se puede observar al incluir las etiquetas se puede establecer con bastante claridad que es lo que se desea resaltar.
¿Qué es HTML?
El HTML (Hypertext Markup Language -Lenguaje de marcado de hipertexto) es un lenguaje de marcas que permite la generación de hipertextos en la Web. El lenguaje es en esencia sencillo y se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos, listados, definiciones, citas, etc.) haciendo uso de elementos HTML, que constituyen los bloques de construcción de una página web. Cada uno de estos elementos puede contener atributos que permiten especificar características especiales en la presentación del elemento.
¿Qué NO es HTML?
HTML NO es un lenguaje de programación.Uno de los errores más comunes de las personas que se inician en el mundo de la informática es pensar que HTML es un lenguaje de programación. Las posibilidades de HTML son mucho más reducidas que las de un lenguaje de programación (C++, Java, C#, Javascript, etc.) pues su única función es la de generar la estructura de un sitio web.Por tanto, decir “estoy programando en HTML” es un grave error. ¡No lo haga! HTML NO es un programa.Otro error común de las personas que se inician en el mundo del diseño web es pensar que HTML es algún programa que se descarga e instala en un computador. Esto es completamente falso.HTML es un lenguaje de marcado que permite generar la ESTRUCTURA de una pagina web.
¿Qué es HTML5?
HTML5 es un estándar que unifica tres tecnologías enfocadas en el desarrollo de sitios web:
Javascript
HTML
CSS
Javascript es un lenguaje de programación que proporciona DINAMISMO a las paginas web (Esta tecnología no se estudiará en esta asignatura, pero si en futuras materias).
Es un lenguaje de marcado que permite generar la ESTRUCTURA de un sitio web.
Es un lenguaje que permite ESTILIZAR los sitios web (este lenguaje se estudiará profundamente en esta asignatura).
¿Qué se necesita para comenzar a diseñar un sitios Web?
Un editor de código
Navegador Web
+ información
+ información
Entendiendo las etiquetas HTML
Normalmente los lenguajes de marcado suelen tener etiquetas de inicio y cierre para los diferentes formatos que se quieren aplicar. De esta forma se indica cuando tiene que empezar y finalizar el formato.En el caso de HTML el formato de sus etiquetas para expresar el principio y final de un formato es el siguiente:
Etiqueta de apertura
La etiqueta anterior está compuesta por el símbolo “<” seguidamente y sin espacios en blanco el nombre de la etiqueta y a continuación el símbolo “>“.
Etiqueta de cierre
La etiqueta de cierre está compuesta por el símbolo “<” seguidamente y sin espacios en blanco, el símbolo “/“, el nombre de la etiqueta y por último el símbolo “>“.
Entendiendo las etiquetas HTML
A continuación se le muestra un ejemplo que se podría aplicar en un documento html para especificar párrafos:
Estructura básica de una página web
En general, se suele decir que una pagina web tiene tres secciones bien identificadas, que son:
Precabecera
Cabecera (head)
Cuerpo (body)
La Precabecera
Es la parte del documento que está situada por encima de la etiqueta <HTML>. En esta sección suele colocarse la Definición del Tipo de Documento (DTD).<!DOCTYPE>En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:
Etiqueta HTML
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código:
El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es por español.
La Cabecera
Es el código HTML, comprendido entre las etiquetas <HEAD> </HEAD>. El contenido de la cabecera no es visible en el navegador del cliente. A excepción del elemento TITLE que permite colocar un título en la barra de título del navegador del usuario.Las etiquetas más importantes que puede contener la cabecera son: <TITLE>, <BASE>, <LINK>, <META>, <STYLE>, <SCRIPT>, etc.
<link>
<meta>
<title>
Se utiliza para identificar propiedades de un documento y para asignar valores a esas propiedades.
Otro importante elemento que va dentro de la cabecera del documento es <link>
La etiqueta <title> simplemente especifica el título del documento.
+ información
+ información
+ información
Cuerpo de la página
Es la parte del código comprendida entre las etiquetas <BODY> </BODY>. Es la parte que será visible en el navegador del cliente. Acá pueden ir elementos HTML y el contenido de la página. Puede contener diversos elementos. Entre ellos están:
- Elementos estándares HTML: párrafos, listas, tablas, formularios, etc.
- Capas definidas mediante etiquetas <DIV> ... </DIV>, o <SPAN> ... </SPAN>
- Código de lenguajes en servidor: JSP, Java, ASP, PHP, etc.
- Objetos incrustados: applets, animaciones de flash, etc.
Nota: En la sección "Textox y Párrafos" veremos en detalle todas las etiquetas que podemos utilizar dentro del cuerpo de la página.
Elementos del cuerpo (<body></body>)
Líneas, saltos de línea y párrafos.
- En HTML se pueden dibujar líneas horizontales en las páginas. Para ello se utilizar la etiqueta o elemento <HR>.
- Para indicar un Enter o salto de línea se utiliza el elemento <BR>.
- Si se desea separar el texto de una página web en párrafos, para una mejor presentación, se puede utilizar la etiqueta <P></P>.
Etiquetas de cabeceras o títulos.Este tipo de etiquetas se suelen utilizar para los títulos en el texto de las páginas. Existen en total seis etiquetas para este propósito. Estas se muestran en la siguiente tabla:
Elementos del cuerpo (<body></body>)
Capas
- El elemento HTML <DIV> </DIV> permite a los autores asignar ciertos atributos a bloques de contenido.
- Se utiliza para definir una sección o división en un documento HTML.
- Es principalmente utilizado en conjunto con hojas de estilo para dar atributos visuales a porciones de contenido en un documento.
Negritas, cursiva, subrayado y otros
- Para llamar la atención del usuario sobre una letra, palabra o frase, una técnica a la que se recurre con frecuencia en HTML es utilizar texto en negritas (bold) o quizá texto con letras itálicas (italic), justo como sucede en prácticamente todo los procesadores de palabras actuales.
- Para utilizar negritas utilice la etiqueta con cierre <b> y para itálicas la etiqueta, también con cierre <i>.
- Para utilizar estas etiquetas simplemente coloque dentro de ellas el texto que se quiere resaltar, por ejemplo:
Elementos del cuerpo (<body></body>)
Negritas, cursiva, subrayado y otros Es posible que usted desee que algún texto se vea con negritas y con itálica al mismo tiempo, para lograr esto usted puede anidar ambas etiquetas como sigue:
De la misma manera trabaja la etiqueta <ins>, que sirve para resaltar un texto con una línea de subrayado:
Elementos del cuerpo (<body></body>)
Subíndices y superíndicesHTML contiene un par de etiquetas para escribir subíndices (<sub>) y superíndices (<sup>), ambas con cierre.
Bloque de citasLa etiqueta con cierre <blockquote> da un resultado similar al párrafo, inserta espacio antes y después de un bloque de código, pero también inserta un margen a la izquierda y a la derecha. El resultado visual tiene la finalidad de manejar el texto dentro las etiquetas <blockquote> </blockquote> como los libros lo hacen con una frase que ha dicho alguien más, es decir, manejar el texto como una fuente de información externa, el código sería:
Elementos de estructura en HTML 4
En HTML 4, el elemento principal para estructurar las páginas web es la famosa "caja <div>". Con el elemento <div> es posible crear zonas de visualización de forma rectangular. Cada una de esas zonas, de esas cajas <div>, puede ser identificada de manera exclusiva, mediante un código de identificación, y de ese modo podemos aplicarle un formato con CSS. Ese código de identificación único se establece con el atributo id. Ejemplo:
Elementos de estructura en HTML 4
En el siguiente ejemplo podemos ver la estructura de una página de tipo blog con cajas <div>:
Problemas con los elementos de estructura en HTML4
La “divitis”Con HTML 4 y CSS 2.1, la estructura de las páginas, cuando esta es relativamente compleja, puede requerir una gran cantidad de cajas <div>. Podemos llegar a crear páginas que contengan decenas y decenas de <div>. Si usted cae en ese exceso, habrá contraído la enfermedad llamada "divitis", es decir, el uso excesivo de cajas <div>. Un contenido no semánticoTodas esas cajas <div> presentan otro problema: el de la semántica de los contenedores. Cada caja <div> se distingue de las demás gracias a su código de identificación único, que el diseñador web le habrá asignado en función de su "humor" o de sus "ganas" en ese momento.Por ese motivo, las cajas <div> no son semánticas: el contenido esperado no está definido por ningún parámetro. Una caja <div> identificada con id="izquierda" no nos aporta ningún dato sobre su contenido. Podría tratarse de una barra de navegación, de información legal o de cualquier otro tipo de contenido.Ahora bien, la evolución del HTML se dirige hacia un mayor uso de la semántica.
Elementos de estructura en HTML5
La siguiente figura representa un diseño común encontrado en la mayoría de los sitios webs estos días. A pesar del hecho de que cada diseñador crea sus propios diseños, en general podremos identificar estas secciones en cada sitio web estudiado.
Elementos de estructura en HTML 5
HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de sus partes. A partir de ahora podemos decir al navegador para qué es cada sección:
Elementos de estructura en HTML5
El siguiente es un ejemplo de estructura semántica HTML5:
Imágenes <img>
La etiqueta <img>, permite definir una imagen en el documento web.Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos. Se ha de observar que la etiqueta no tiene etiqueta de cierre.La sintaxis de la etiqueta es la siguiente. <img alt=“valor” height=“valor” width=“valor” src=“ruta”/> Los atributos que pueda utilizar la etiqueta son los siguientes:
Imágenes <img>
Los atributos que pueda utilizar la etiqueta son los siguientes:
Hipervinculos o Enlaces <a>
La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros documentos o recursos disponibles.Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder. La sintaxis básica de esta etiqueta es la siguiente: <a href=“ruta” target=“valor”>Este es un vinculo</a> Atributo hrefEste atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web. Se puede especificar una URL absoluta, relativa o un ancla “enlace” en el mismo documento.Atributo targetPermite especificar el destino por defecto del enlace. Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes:
Introducción y conceptos básicos de HTML
Mario Alvarado
Created on January 20, 2021
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Corporate Christmas Presentation
View
Business Results Presentation
View
Meeting Plan Presentation
View
Customer Service Manual
View
Business vision deck
View
Economic Presentation
View
Tech Presentation Mobile
Explore all templates
Transcript
Introducción y conceptos básicos de HTML
EMPEZAR
Índice
Herramientas y conceptos básicos
Estructura y elementos básicos de un documento HTML5
Texto y párrafos
Hipervínculos
Secciones de una página web
Imágenes
¿Qué es lenguaje de marcado?
Un “Lenguaje de marcado” o “lenguaje de marcas” se puede definir como una forma de codificar un documento donde, junto con el texto, se incorporan etiquetas, marcas o anotaciones con información adicional relativa a la estructura del texto, su presentación, etc. El siguiente ejemplo pretende evidenciar una demostración de un lenguaje de marcado o lenguaje de marcas. Suponga que se desea enviar la siguiente información, destacando algunas de sus palabras:
¿Qué es un lenguaje de marcado?
Su codificación utilizando etiquetas podría ser la siguiente:
Como se puede observar al incluir las etiquetas se puede establecer con bastante claridad que es lo que se desea resaltar.
¿Qué es HTML?
El HTML (Hypertext Markup Language -Lenguaje de marcado de hipertexto) es un lenguaje de marcas que permite la generación de hipertextos en la Web. El lenguaje es en esencia sencillo y se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos, listados, definiciones, citas, etc.) haciendo uso de elementos HTML, que constituyen los bloques de construcción de una página web. Cada uno de estos elementos puede contener atributos que permiten especificar características especiales en la presentación del elemento.
¿Qué NO es HTML?
HTML NO es un lenguaje de programación.Uno de los errores más comunes de las personas que se inician en el mundo de la informática es pensar que HTML es un lenguaje de programación. Las posibilidades de HTML son mucho más reducidas que las de un lenguaje de programación (C++, Java, C#, Javascript, etc.) pues su única función es la de generar la estructura de un sitio web.Por tanto, decir “estoy programando en HTML” es un grave error. ¡No lo haga! HTML NO es un programa.Otro error común de las personas que se inician en el mundo del diseño web es pensar que HTML es algún programa que se descarga e instala en un computador. Esto es completamente falso.HTML es un lenguaje de marcado que permite generar la ESTRUCTURA de una pagina web.
¿Qué es HTML5?
HTML5 es un estándar que unifica tres tecnologías enfocadas en el desarrollo de sitios web:
Javascript
HTML
CSS
Javascript es un lenguaje de programación que proporciona DINAMISMO a las paginas web (Esta tecnología no se estudiará en esta asignatura, pero si en futuras materias).
Es un lenguaje de marcado que permite generar la ESTRUCTURA de un sitio web.
Es un lenguaje que permite ESTILIZAR los sitios web (este lenguaje se estudiará profundamente en esta asignatura).
¿Qué se necesita para comenzar a diseñar un sitios Web?
Un editor de código
Navegador Web
+ información
+ información
Entendiendo las etiquetas HTML
Normalmente los lenguajes de marcado suelen tener etiquetas de inicio y cierre para los diferentes formatos que se quieren aplicar. De esta forma se indica cuando tiene que empezar y finalizar el formato.En el caso de HTML el formato de sus etiquetas para expresar el principio y final de un formato es el siguiente:
Etiqueta de apertura
La etiqueta anterior está compuesta por el símbolo “<” seguidamente y sin espacios en blanco el nombre de la etiqueta y a continuación el símbolo “>“.
Etiqueta de cierre
La etiqueta de cierre está compuesta por el símbolo “<” seguidamente y sin espacios en blanco, el símbolo “/“, el nombre de la etiqueta y por último el símbolo “>“.
Entendiendo las etiquetas HTML
A continuación se le muestra un ejemplo que se podría aplicar en un documento html para especificar párrafos:
Estructura básica de una página web
En general, se suele decir que una pagina web tiene tres secciones bien identificadas, que son:
Precabecera
Cabecera (head)
Cuerpo (body)
La Precabecera
Es la parte del documento que está situada por encima de la etiqueta <HTML>. En esta sección suele colocarse la Definición del Tipo de Documento (DTD).<!DOCTYPE>En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:
Etiqueta HTML
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código:
El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es por español.
La Cabecera
Es el código HTML, comprendido entre las etiquetas <HEAD> </HEAD>. El contenido de la cabecera no es visible en el navegador del cliente. A excepción del elemento TITLE que permite colocar un título en la barra de título del navegador del usuario.Las etiquetas más importantes que puede contener la cabecera son: <TITLE>, <BASE>, <LINK>, <META>, <STYLE>, <SCRIPT>, etc.
<link>
<meta>
<title>
Se utiliza para identificar propiedades de un documento y para asignar valores a esas propiedades.
Otro importante elemento que va dentro de la cabecera del documento es <link>
La etiqueta <title> simplemente especifica el título del documento.
+ información
+ información
+ información
Cuerpo de la página
Es la parte del código comprendida entre las etiquetas <BODY> </BODY>. Es la parte que será visible en el navegador del cliente. Acá pueden ir elementos HTML y el contenido de la página. Puede contener diversos elementos. Entre ellos están:
Nota: En la sección "Textox y Párrafos" veremos en detalle todas las etiquetas que podemos utilizar dentro del cuerpo de la página.
Elementos del cuerpo (<body></body>)
Líneas, saltos de línea y párrafos.
- En HTML se pueden dibujar líneas horizontales en las páginas. Para ello se utilizar la etiqueta o elemento <HR>.
- Para indicar un Enter o salto de línea se utiliza el elemento <BR>.
- Si se desea separar el texto de una página web en párrafos, para una mejor presentación, se puede utilizar la etiqueta <P></P>.
Etiquetas de cabeceras o títulos.Este tipo de etiquetas se suelen utilizar para los títulos en el texto de las páginas. Existen en total seis etiquetas para este propósito. Estas se muestran en la siguiente tabla:Elementos del cuerpo (<body></body>)
Capas
- El elemento HTML <DIV> </DIV> permite a los autores asignar ciertos atributos a bloques de contenido.
- Se utiliza para definir una sección o división en un documento HTML.
- Es principalmente utilizado en conjunto con hojas de estilo para dar atributos visuales a porciones de contenido en un documento.
Negritas, cursiva, subrayado y otrosElementos del cuerpo (<body></body>)
Negritas, cursiva, subrayado y otros Es posible que usted desee que algún texto se vea con negritas y con itálica al mismo tiempo, para lograr esto usted puede anidar ambas etiquetas como sigue:
De la misma manera trabaja la etiqueta <ins>, que sirve para resaltar un texto con una línea de subrayado:
Elementos del cuerpo (<body></body>)
Subíndices y superíndicesHTML contiene un par de etiquetas para escribir subíndices (<sub>) y superíndices (<sup>), ambas con cierre.
Bloque de citasLa etiqueta con cierre <blockquote> da un resultado similar al párrafo, inserta espacio antes y después de un bloque de código, pero también inserta un margen a la izquierda y a la derecha. El resultado visual tiene la finalidad de manejar el texto dentro las etiquetas <blockquote> </blockquote> como los libros lo hacen con una frase que ha dicho alguien más, es decir, manejar el texto como una fuente de información externa, el código sería:
Elementos de estructura en HTML 4
En HTML 4, el elemento principal para estructurar las páginas web es la famosa "caja <div>". Con el elemento <div> es posible crear zonas de visualización de forma rectangular. Cada una de esas zonas, de esas cajas <div>, puede ser identificada de manera exclusiva, mediante un código de identificación, y de ese modo podemos aplicarle un formato con CSS. Ese código de identificación único se establece con el atributo id. Ejemplo:
Elementos de estructura en HTML 4
En el siguiente ejemplo podemos ver la estructura de una página de tipo blog con cajas <div>:
Problemas con los elementos de estructura en HTML4
La “divitis”Con HTML 4 y CSS 2.1, la estructura de las páginas, cuando esta es relativamente compleja, puede requerir una gran cantidad de cajas <div>. Podemos llegar a crear páginas que contengan decenas y decenas de <div>. Si usted cae en ese exceso, habrá contraído la enfermedad llamada "divitis", es decir, el uso excesivo de cajas <div>. Un contenido no semánticoTodas esas cajas <div> presentan otro problema: el de la semántica de los contenedores. Cada caja <div> se distingue de las demás gracias a su código de identificación único, que el diseñador web le habrá asignado en función de su "humor" o de sus "ganas" en ese momento.Por ese motivo, las cajas <div> no son semánticas: el contenido esperado no está definido por ningún parámetro. Una caja <div> identificada con id="izquierda" no nos aporta ningún dato sobre su contenido. Podría tratarse de una barra de navegación, de información legal o de cualquier otro tipo de contenido.Ahora bien, la evolución del HTML se dirige hacia un mayor uso de la semántica.
Elementos de estructura en HTML5
La siguiente figura representa un diseño común encontrado en la mayoría de los sitios webs estos días. A pesar del hecho de que cada diseñador crea sus propios diseños, en general podremos identificar estas secciones en cada sitio web estudiado.
Elementos de estructura en HTML 5
HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de sus partes. A partir de ahora podemos decir al navegador para qué es cada sección:
Elementos de estructura en HTML5
El siguiente es un ejemplo de estructura semántica HTML5:
Imágenes <img>
La etiqueta <img>, permite definir una imagen en el documento web.Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos. Se ha de observar que la etiqueta no tiene etiqueta de cierre.La sintaxis de la etiqueta es la siguiente. <img alt=“valor” height=“valor” width=“valor” src=“ruta”/> Los atributos que pueda utilizar la etiqueta son los siguientes:
Imágenes <img>
Los atributos que pueda utilizar la etiqueta son los siguientes:
Hipervinculos o Enlaces <a>
La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros documentos o recursos disponibles.Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder. La sintaxis básica de esta etiqueta es la siguiente: <a href=“ruta” target=“valor”>Este es un vinculo</a> Atributo hrefEste atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web. Se puede especificar una URL absoluta, relativa o un ancla “enlace” en el mismo documento.Atributo targetPermite especificar el destino por defecto del enlace. Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes: