Scribd
Cargar
23 vistas7 páginas

Codigo HTML

Cargado por

ordonezmarcela947
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
23 vistas7 páginas

Codigo HTML

Cargado por

ordonezmarcela947
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

CODIGO HTML

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y


desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos,
una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará
una comprensión básica de HTML y cuál es su función.
ESTRUCTURA HTML
Antes de ver los códigos básicos, debes saber que la primera línea de tu documento HTML
siempre debe contener la etiqueta <!DOCTYPE html>. Esto hará que el código de tu sitio sea
legible en cualquier navegador. Ahora bien, un documento HTML bien armado tiene cuatro
etiquetas esenciales para que el contenido se distribuya correctamente. Estas son:

1. HTML
<html> está al inicio de un documento HTML e indica a los navegadores que la página
tiene código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje,
la etiqueta de cierre </html> será el último elemento del documento.

2. Encabezado
<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal función
es contener toda la información del funcionamiento del sitio. Debido a esto, es un código
encriptado que las personas que entran a la página no pueden ver.

3. Título de la página
<title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo.
Es el título que puedes ver en las pestañas del navegador.

4. Cuerpo
<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de
otra forma, comprende todo el contenido visible del sitio. Aquí podrás insertar texto,
imágenes, videos o cualquier otra funcionalidad que desees mostrar.

Ejemplo de las cuatro etiquetas esenciales:

Si creas un documento .html con este código y lo abres en tu navegador, verás algo
como esto:
Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta
<BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo.
<body background="fondo.gif">

Color en el fondo: <body style="background-color:#FF0000;"> </body>

Títulos y subtítulos

<h1> <h2>… <h6> son etiquetas que funcionan para agregar títulos y subtítulos en el cuerpo del
texto, lo cual ayuda a jerarquizar la información. Por cierto, te recomendamos utilizar la etiqueta
H1 sólo una vez dentro del contenido.

Ejemplo:

<h1>Esta es una etiqueta H1. Utilízala en el título.</h1>


<h2>Esta es una etiqueta H2. Utilízala en los encabezados de secciones.</h2>
<h3>Esta es una etiqueta H3. Utilízala en sub-secciones.</h3>
<h4>Esta es una etiqueta H4. No se usan muy a menudo.</h4>
<h5>Esta es una etiqueta H5.</h5>
<h6>Esta es una etiqueta H6.</h6>

Resultado:

Párrafos

Las etiquetas <p> y <br> te ayudarán a organizar el texto en párrafos y saltos de línea.
Ejemplo:

<p>Tu primer párrafo.</p>


<p>Tu segundo párrafo.</p>
<p>Un enunciado.<br>
Un segundo enunciado (pegado al primero).</p>

Imágenes
<img> con esta etiqueta podrás agregar imágenes al cuerpo de tu página. Combinarlo con el
atributo src te permitirá especificar la ubicación donde se encuentra la imagen, y el atributo alt te
ayudará a darle un título a esa imagen para que lo lean buscadores como Google.
La estructura de los atributos es la siguiente: primero viene la palabra o abreviatura que lo define
(en este caso src es abreviatura de “source” o fuente), luego el signo igual (=) y al último el
modificador del atributo entre comillas dobles (“_”) o simples (‘_’).

<img src="images/firefox-icon.png" alt="Mi imagen de prueba">

Hipervínculos
<a> te permite insertar un hipervínculo a la página. Por ejemplo, el link hacia tus redes sociales
o hacia otro sitio web con el que desees conectar tu página.
Ejemplo:
1. Elige algún texto. Nosotros elegimos «Manifesto Mozilla».
2. Encierra el texto en un elemento <a>, así:
<a>Manifesto Mozilla</a>
3. Proporciónale al elemento <a> un atributo href, así:
<a href="">Manifesto Mozilla</a>
4. Completa el valor de este atributo con la dirección web con la que quieras conectar al
vínculo:
<a href="https://www.mozilla.org/es-AR/about/manifesto/">Manifesto Mozilla</a>

Listas e índices
<ol> sirve para agregar listas numeradas y <ul> para agregar bullets, los cuales mejoran la
legibilidad de tus textos.
Ejemplo:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>

Tablas:
las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser
declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a
las filas contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro con
un ejemplo:
Aquí, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera
fila de la tabla, encima de las celdas comunes.

El elemento caption sirve para agregar titulo a la tabla:

ATRIBUTO COLOR: El color del texto puede ser definido mediante el atributo color.

También se puede usando notación RGB


Para agregar color a la tabla
<TABLE BGCOLOR="codigo de color">
Para cambiar el color a la fila
<TR BGCOLOR="codigo de color">
Para cambiar el color a la celda
<TD BGCOLOR="codigo de color">
Para cambiar el color del borde
<TABLE BORDERCOLOR="codigo de color">
INSERTAR VINCULO A LA PAGINA:

<a href="../reference/uri-url.html">Definición de URI y URL</a>

También podría gustarte