Fundamentos de HTML

Fundamentos de HTML
Compilado por Andrés Felipe Gallego Aguilar

aprende@afoxcp.com
Para contenidos educativos gratuitos visita www.afoxcp.com/aprende
Anatomía de una página web
CSS, Java, AJAX

Componentes que definen el formato y el
comportamiento de la página web (Decoración).
HTML
Núcleo común, ajusta la
distribución de los
elementos , define una
estructura (Construcción).
Etimología
HTML (Hypertext Markup Language)
HT (Hypertext) – Permite la creación de hipervínculos.
M (Markup) – Asigna etiquetas (tags); que permiten que el navegador web

(Browser) las interprete para mostrar de esta forma el contenido. Ej:
<p> Bienvenidos a esta clase </p>
L (Language) – Existen diferentes reglas, elementos y atributos que aplicados

de manera correcta permiten el funcionamiento de las páginas web.
Estructura del código
DOCTYPE – Principio .
HTML – Elemento maestro.
HEAD – Encabezado de la
página; lugar en el que se
publica la información que
recuperarán los servidores
y motores de búsqueda (No
visible para el usuario).
BODY – Cuerpo de la
página; aquí se publican
todos los contenidos que
serán visibles para el
usuario final.
Definición del tipo de documento DOCTYPE
Indica tres cosas al navegador:
1. Cómo se llama el elemento raíz del navegador (HTML).
2. Qué versión de HTML se utiliza (XHTML 1.0 Transitional).
3. Dónde se puede encontrar el libro gramatical correspondiente (URL).
Brinda instrucciones precisas al navegador para que interprete el código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Encabezado HEAD
Contiene información sobre el documento que será analizada por los navegadores web y los
motores de búsqueda pero que no será visible para el usuario final; la única etiqueta que se
sale de la regla es TITLE.
<HEAD>
<TITLE>
Aquí se publica el título de la página. Ideal para que los motores
de búsqueda puedan indexarlo y darle algún tipo de personalidad
a la página.
</TITLE>
</HEAD>
Cuerpo de la página BODY
En su interior se publican todas las etiquetas que serán visibles para el usuario final.
<BODY>
<P>Es importante conocer las propiedades y características de cada una de
las etiquetas para facilitar el proceso de crear una estructura ordenada de los
elementos en una página web. </P>
</BODY>
Datos de interés sobre el HTML
-Todos los elementos de HTML (un 95% aproximadamente) cuentan con una etiqueta de
inicio y una de cierre, en su interior se publican los demás elementos. Ejemplo:
<HEAD> Aquí contenido </HEAD>
Inicio Cierre
- La primera etiqueta en abrirse debe ser la última en cerrarse (Anidación). Ejemplo:
<p> Este es un párrafo que se encuentra resaltado por <strong>

<em> negrita y cursiva </em> </strong>.</p>
Estructura básica
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Etiquetas HTML más utilizadas
<DIV> (Division) - Permite dividir la página en bloques o contenedores en los que se puede
almacenar información; sería el equivalente a una estructura dentro de la estructura. Ideal
para ser utilizada con hojas de estilos CSS. Ejemplo:
<DIV ID=“encabezado”> Aquí demás etiquetas </DIV>

<DIV ID=“navegación”> Aquí demás etiquetas </DIV>
<H1> a <H6> (Heading) - Establece un nivel de jerarquía entre los títulos donde H1 es el
principal y H6 se encuentra seis niveles por debajo. Cada uno ofrece un tamaño
preestablecido que luego puede ser cambiado por las hojas de estilo. Ejemplo:
<H1> Título Aquí </H1>

<P> (Paragraph) - Sirve para escribir cualquier párrafo de texto normal. Ejemplo:
<P> Información aquí . </P>
<STRONG> y <EM> - Permiten resaltar el texto en negrita o cursiva. Ejemplo:
<STRONG> Texto resaltado. </STRONG>

<EM> Textos en cursiva. </EM>
<UL> (Unordered List)- Identifica el inicio de una lista representada por viñetas; cada viñeta
a su vez se representa con la etiqueta <LI>. Ejemplo:
<UL>
<LI> Viñeta 1. </LI>
<LI> Viñeta 12. </LI>
</UL>
<OL> (Ordered list) - Permite la creación de una lista numerada de elementos. Ejemplo:
<OL>
<LI> Primero. </LI>
<LI> Segundo. </LI>
</OL>
<DL> (Definition List) - Ideal para crear glosarios ofrecen estructuras que pueden ser
aprovechadas para el desarrollo de diseños . Se utiliza en conjunto con las etiquetas <DT>
término a definir y <DD> descripción.
<DL>
<DT> Término a definir. </DT>
<DD> Definición. </DD>
</DL>
<A> (Anchor) - Permite la creación de hipervínculos entre páginas. Ejemplo:
<A HREF=“Punto al que se quiere enlazar”> Nombre del enlace </A>
Atributo Hypertext Reference que contiene la ruta de acceso al

enlace. Se pueden aplicar diferentes tipos de atributos que
permiten aplicar otro tipo de propiedades a la etiqueta en la que
se ejecuten.
Sobre los atributos

- Los atributos siempre se ponen en la etiqueta de inicio.
-Siempre después del atributo se debe poner el símbolo igual (=) y entre comillas (“ ”) el
valor.
- Entre el nombre del atributo, el símbolo de igual y las comillas no deben existir espacios en
blanco.
- Si en una etiqueta existen diferentes atributos el orden de los mismo no afecta el
resultado.
<IMG> (Image) - Permite insertar imágenes. No cuenta con una etiqueta de cierre
convencional </img>, en su lugar se utiliza />. Diferentes atributos se aplican para su uso.
Ejemplo:
<IMG SRC=“Ruta donde se encuentra la imagen” WIDTH=“Ancho de la imagen”

HEIGHT=“Alto de la Imagen” ALT=“Descripción para programas de accesibilidad”
TITLE=“Descripción de la imagen no visible de manera directa” />
<TABLE> - Permite la creación de tablas. Se utiliza en conjunto con las etiquetas <TR> (Table
Row) para la creación de filas; y <TD> (Table Data) o celdas en las que se publicará el
contenido (Tenga en cuenta que las filas son horizontales) . Ejemplo:
<TABLE>
<TR>
<TD> Primera celda</TD> <TD> Segunda celda </TD>
</TR>
</TABLE>
* Se puede utilizar la etiqueta <TH> (Table Heading) para aplicar el formato de negrita y
centrado a la primera fila de la tabla.
Caracteres especiales
Se escriben en el código de HTML de manera especial para evitar problemas con ciertos
navegadores web (Browsers). Empiezan por el símbolo & seguido de un valor predefinido y
finalizando con punto y coma ; .
Carácter Código Definición en inglés

A Á Mayúscula con tílde
á á Minúscula con tílde
ñ ñ Letra ñ
ü ü Diéresis
© © Copyright
Espacio en banco Non breakable Space
protegido
Bibliografía
MULLER, PETER. Css un juego de niños, crea tu sitio web. PC-Cuadernos técnicos. Barcelona.
http://www.pc-cuadernos.com

Fundamentos de HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fundamentos de HTML

Uploaded by

Copyright:

Available Formats

Fundamentos de HTML

Compilado por Andrés Felipe Gallego Aguilar

CSS, Java, AJAX

HTML (Hypertext Markup Language)

HT (Hypertext) – Permite la creación de hipervínculos.

M (Markup) – Asigna etiquetas (tags); que permiten que el navegador web

<p> Bienvenidos a esta clase </p>

L (Language) – Existen diferentes reglas, elementos y atributos que aplicados

HTML – Elemento maestro.

Brinda instrucciones precisas al navegador para que interprete el código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<HEAD> Aquí contenido </HEAD>

- La primera etiqueta en abrirse debe ser la última en cerrarse (Anidación). Ejemplo:

<p> Este es un párrafo que se encuentra resaltado por <strong>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<DIV ID=“encabezado”> Aquí demás etiquetas </DIV>

<H1> Título Aquí </H1>

<P> Información aquí . </P>

<STRONG> y <EM> - Permiten resaltar el texto en negrita o cursiva. Ejemplo:

<STRONG> Texto resaltado. </STRONG>

<A HREF=“Punto al que se quiere enlazar”> Nombre del enlace </A>

Atributo Hypertext Reference que contiene la ruta de acceso al

Sobre los atributos

<IMG SRC=“Ruta donde se encuentra la imagen” WIDTH=“Ancho de la imagen”

Carácter Código Definición en inglés

You might also like