HTML

Hyper Text Markup Language (lenguaje de marcas de hipertexto)
Hipertexto quiere decir "texto que contiene enlaces." ¡Cada vez que se
hace clic en una palabra que lleva a una nueva página web, se ha hecho clic en un
hipertexto!
Se considera el lenguaje web más importante en la aparición, desarrollo y expansión de la

World Wide Web. Es el estándar que se ha impuesto en la visualización de páginas web y
es el que todos los navegadores actuales han adoptado.
El HTML no permite realizar un simple cálculo matemático o crear una

página a partir de una base de datos porque no es un lenguaje de
programación sino, más bien, es un lenguaje descriptivo que tiene
como objeto dar formato al texto y las imágenes que pretendemos
visualizar en el navegador. A partir de este lenguaje somos capaces
de introducir enlaces, seleccionar el tamaño de las fuentes o intercalar imágenes, todo
esto de una manera prefijada y en ningún caso inteligente.
Puede ser creado y editado con cualquier editor de textos básico sin formato, como el Bloc
de notas de Windows, o un editor que admita texto con funciones extras de
autocompletar, resaltar, etc, como BlueFish o Notepad++, o los más completos WYSIWYG
(what you see is what you get), que ofrecen modo diseño además del código y nos
permiten observar cómo lucirá un sitio web mientras se realiza el proceso de diseño.
Al igual que cualquier otro lenguaje, tiene su propia sintaxis.

Se escribe en forma de «etiquetas», rodeadas por corchetes
angulares (<tag> apertura, </tag> cierre).
Las páginas HTML están estructuradas en dos partes

diferenciadas: la HEAD (cabecera) y el BODY (cuerpo).
La HEAD o cabecera es la primera de las dos partes en que

se estructura un documento HTML y los elementos incluidos
no se muestran al usuario. Contienen toda la información
necesaria para la correcta representación de dicha página
por el navegador web.
<!DOCTYPE html>
Esta instrucción le indica al navegador que el documento debe procesarse según la
codificación html5. Se coloca en la primera línea, antes de la etiqueta <html>
<title>Título de la página</title>
El título es el primero y más importante de los elementos que proveen información sobre
el contenido y permiten identificar la misma, aparece en la parte superior del navegador.
Se deben usar en el titulo palabras que representen exactamente el contenido de la
página. Debe contener un máximo de 70 caracteres, incluyendo los espacios.
7
Paradigma de Programación Orientada a Objetos Elaborada por: MSc. Jacqueline Colina Revisión: 30 de Mayo
2018
<meta name="description" content="Descripción de la página" />
Contiene una descripción breve del contenido de la página. El máximo de caracteres que
se pueden emplear en la descripción es de 156.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Esta etiqueta define el tipo de contenido de la página y la codificación de caracteres a
utilizar en la misma. La indicada en el ejemplo es la necesaria en páginas que se
encuentren en idioma español, ya que permite utilizar caracteres especiales como por
ejemplo, acentos, letras ñ, ü, signos ¿, ¡, etc. Es importante que el charset se coloque
justo después de la apertura de la etiqueta <head>
<meta http-equiv="content-language" content="es" />

Idioma empleado en la página.
¡IMPORTANTE! En el HEAD también se encuentran vínculos que hacen referencia a

archivos externos necesarios de ser cargados antes que el resto del contenido de la
página para su correcto funcionamiento y representación:
<link rel="stylesheet" media="all" type="text/css" href="ruta-nombre archivo.css" />

Enlaces a hojas de estilo CCS (archivodetexto.css) que contienen la forma en que se ven
todos los elementos de la página web. Nota: rel es la relación que tiene con la página
<script type="text/javascript" src="ruta-nombre archivo.js" ></script>

Enlaces a librerías de código JavaScript externo (archivodetexto.js).
El BODY o cuerpo es la última de las dos partes en que se estructura un documento

HTML. Es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y
por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella.
<BODY bgcolor="white" text="blue" leftmargin="0" topmargin="0" marginwidth="0"

marginheight="0">
.....Este es el cuerpo de mi página
</BODY>
Una página web es en esencia un documento de texto diseñado para ser procesado por un
navegador de internet. Las etiquetas HTML5 permiten al navegador procesar el texto
contenido entre ellas de diferente manera y el resultado de esta interpretación es la
apariencia que presenta la página web al ser cargada. La gran mayoría de las etiquetas
html5 contienen una sentencia de inicio y una de cierre: <etiqueta></etiqueta>. El
estudio de las etiquetas, sus atributos y parámetros, nos capacitará para mejorar
significativamente la apariencia y funcionalidad de nuestros sitios web.
8
2018
Etiquetas HTML comunes en una web
 
 <em></em> Texto enfatizado
 <small></small> Texto pequeño
 <i></i> Texto en Cursiva
 <u></u> Texto subrayado
 <b></b> Texto en Negritas
 <strong></strong> Negritas más gruesas
 <br /> Salto de línea (etiqueta única, no tiene cierre)
 <p></p> Párrafos
 <a href=””></a> Enlaces
 <h1></h1> Encabezado o título 1 hasta <h6></h6> Encabezado o título 6
 <hr> Línea. Puede acompañarse de los atributos color y tamaño.
 <li></li> Elemento de lista
 <span></span> Selección de texto con un estilo determinado
 <img src=””> Para insertar una imagen. Con el código <img src=”URL de la
imagen”> puedes poner en cualquier zona de widgets un banner o imagen que quieras.
 <form></form> Formularios. Puede ir acompañado de al menos estos atributos:
name (nombre), method (post o get), action () y target().
Dentro de él, se insertan elementos interactivos:
<label> </label> Se enlaza un “widget” con un atributo id coincidente con el
especificado en su atributo for.
<input>
 Campos de entrada por teclado con contenido visible. type="text"
 Campos de entrada por teclado con contenido oculto. type="password"
 Botones de selección. type="radio"
 Casillas de marca. type="checkbox"
 Botones de proceso o acción. type="submit", type=" button", type="reset"
 Imágenes sensibles al ratón. type=image (Para presentar la imagen se utiliza
el atributo src)
 tipo fecha, hora, rango, escalas, colores, e-mail, teléfonos, entre muchos.
<select>
 Listas desplegables de valores.
 Listas fijas de valores.
<textarea>
9
2018
 Ventanas de escritura libre.
 <table></table> Tabla. Dispone los sub elementos <tr></tr> para definir una
fila <th></th> para definir una cabecera y <td></td> para definir una celda de datos.
(Ver amplia cantidad de ejemplos en: https://www.uv.es/jac/guia/tablaeje.htm)
 <fieldset></fieldset> es un recuadro que enmarca el texto incluido dentro de él.
Suele usarse principalmente en formularios para poder agrupar campos que están
relacionados entre sí. Su anchura es del 100%, si se quiere limitar se deberá incluir la
etiqueta dentro de una tabla a la que sí se le indicará la anchura deseada.
 <legend></legend> se utilizan dentro de la etiqueta <fieldset>. Permite
etiquetar el conjunto de campos que están incluidos dentro del fieldset. Por ejemplo, si
con fieldset se agrupan los datos personales de una persona, en legend se escribiría
“Datos personales”.
Algunos de los atributos más comúnmente utilizados dentro de la etiqueta <BODY> son:
bgcolor Determina el color del fondo de la página.

background Especifica una imagen determinada para ser usada como fondo
de la página.
text Color del texto de la página.
link Color de los enlaces que contiene la página.
vlink Color de los enlaces visitados dentro de la página.
alink Color que aparece al darle clic sobre un enlace.
topmargin Es la distancia en píxeles que existe entre la orilla superior del
navegador y el contenido.
leftmargin Es la distancia en píxeles que existe entre la orilla izquierda del
navegador y el contenido.
marginheight Tamaño del margen superior e inferior.
marginwidth Tamaño del margen izquierdo y derecho.
10
2018
Entidades HTML
HTML dispone de códigos especiales para representar caracteres especiales, como pueden
ser letras con acentos, signos de puntuación o tipográficos y símbolos especiales como <
ó >, que podrían malinterpretarse como el inicio de una etiqueta. Estos códigos pueden
mostrarse como un código numérico o con un nombre de entidad. Ambos métodos son
igualmente aceptables, pero ambos deberán ir encerrados entre los símbolos & y ;. Por
ejemplo, < se escribirá como < o <
Aquí tienes una tabla de los caracteres más utilizados con sus
Entidades HTML numérica y de nombre de entidad:
Entidad con Entidad Entidad con Entidad

Carácter nombre numérica Carácter nombre numérica
á á á Á Á Á
é é é É É É
í í í Í Í Í
ó ó ó Ó Ó Ó
ú ú ú Ú Ú Ú
ü ü ü Ü Ü Ü
ñ ñ ñ Ñ Ñ Ñ
¿ ¿ ¿ α α α

¡ &iexc; ¡ β β β
– – – © © ©
→ → → ® ® ®
← ← ← € € €
< < < espacio

> > >
& & &
11
2018
Primer Ejercicio:
1. Abrir un documento nuevo en el editor BlueFish.
2. Incluir las etiquetas que definen el HTML (<html>..</html>)
3. Agregar la etiqueta de la cabecera (<head>..</head>), incluyendo etiquetas de Meta-

información. Por ejemplo el título de la página.
4. Agregar la etiqueta del cuerpo (<body>..</body>) incluyendo al menos 2 atributos de

la etiqueta, tales como color de fondo, color de texto, etc. Puedes consultar el sitio
http://www.december.com/html/spec/color.html.
6. Entre las etiquetas del <body>..</body> escribe una oración sencilla.
7. Coloque la oración entre la etiqueta de párrafo <p>oración</p>
8. Graba el documento creado con el nombre de ejercicio1.html en la carpeta del equipo

var/www/html o xamp/htdocs
9. Para poder ver el resultado de la programación, abre el documento desde un navegador

de una de las siguientes formas:
10. Abre la ventana del navegador. Escribe localhost en la barra de la dirección URL
11. Localiza el archivo que creaste y da click.
12
2018

HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

Hyper Text Markup Language (lenguaje de marcas de hipertexto)

Se considera el lenguaje web más importante en la aparición, desarrollo y expansión de la

El HTML no permite realizar un simple cálculo matemático o crear una

Al igual que cualquier otro lenguaje, tiene su propia sintaxis.

Las páginas HTML están estructuradas en dos partes

La HEAD o cabecera es la primera de las dos partes en que

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="content-language" content="es" />

¡IMPORTANTE! En el HEAD también se encuentran vínculos que hacen referencia a

<link rel="stylesheet" media="all" type="text/css" href="ruta-nombre archivo.css" />

<script type="text/javascript" src="ruta-nombre archivo.js" ></script>

El BODY o cuerpo es la última de las dos partes en que se estructura un documento

<BODY bgcolor="white" text="blue" leftmargin="0" topmargin="0" marginwidth="0"

.....Este es el cuerpo de mi página



 <em></em> Texto enfatizado

 <small></small> Texto pequeño

 <i></i> Texto en Cursiva

 <u></u> Texto subrayado

 <b></b> Texto en Negritas

 <strong></strong> Negritas más gruesas

 <br /> Salto de línea (etiqueta única, no tiene cierre)

 <a href=””></a> Enlaces

 <h1></h1> Encabezado o título 1 hasta <h6></h6> Encabezado o título 6

 <hr> Línea. Puede acompañarse de los atributos color y tamaño.

 <li></li> Elemento de lista

 <span></span> Selección de texto con un estilo determinado

bgcolor Determina el color del fondo de la página.

Entidad con Entidad Entidad con Entidad

¿ &iquest; &#191; α &alpha; &#945;

< &lt; &#60; espacio &nbsp; &#160;

1. Abrir un documento nuevo en el editor BlueFish.

2. Incluir las etiquetas que definen el HTML (<html>..</html>)

3. Agregar la etiqueta de la cabecera (<head>..</head>), incluyendo etiquetas de Meta-

4. Agregar la etiqueta del cuerpo (<body>..</body>) incluyendo al menos 2 atributos de

6. Entre las etiquetas del <body>..</body> escribe una oración sencilla.

7. Coloque la oración entre la etiqueta de párrafo <p>oración</p>

8. Graba el documento creado con el nombre de ejercicio1.html en la carpeta del equipo

9. Para poder ver el resultado de la programación, abre el documento desde un navegador

11. Localiza el archivo que creaste y da click.

También podría gustarte

¿ ¿ ¿ α α α

< < < espacio