Elementos basícos del HTML

Referencias HTML

Sin duda alguna,  la base de casi cualquier sitio web, es el html,  bien es cierto, que hoy en día, el lenguaje de programación principal de casi todos los sitios web, es el PHP, pero el HTML es necesario sobre todo para el diseño en si, junto al CSS. Por eso, es lo primero que debe de aprender una persona, si quiere diseñar sitio webs, en HTML  que como digo arriba, es la base de todo, después viene el javascript, el CSS y el PHP, que son los lenguajes más usadas para el desarrollo web, en entorno linux, windows aun se usa el ASP, pero cada vez menos.

En este artículo, vamos a ver los elementos más básicos del HTML, por donde se debe  empezar a aprender, y que prácticamente se usan en todos los sitios webs.

Tags Básicos

<html></html>
Crea un documento HTML
<head></head>
Stea el título y otra información que no se visualizará en la página web
<body></body>
Setea la parte visible de la página
Header Tags
<title></title>

Pone el nombre del documento en la barra del título

Atributos del Body
<body bgcolor=?>
Setea el color de fondo, usando nombres o valores hex
<body text=?>
Setea el color del texto, usando nombres o valores hex
<body link=?>
Setea el color de los enlaces, usando nombres o valores hex
<body vlink=?>
Setea el color de los enlaces visitados, usando nombres o valores hex
<body alink=?>
Setea el color de los enlaces al ser presionados, usando nombres o valores hex

Tags de texto

<pre></pre>
Crea texto preformateado
<hl></hl>
Crea un título grande
<h6></h6>
Crea un título pequeño
<b></b>
Crea texto en negritas
<i></i>
Crea texto en itálicas
<tt></tt>
Crea texto teletipo
<cite></cite>
Crea una cita, usando itálicas
<em></em>
Enfatiza una palabra
<strong></strong>
Enfatiza una palabra (con itálicas or negritas)
<font size=?></font>
Setea el cuerpo de la fuente de 1 a 7
<font color=?></font>
Setea el color de la fuente, usando nombres o valores hex

Enlaces

<a href=”URL”>
Crea un hipervínculo
<a href=”mailto:EMAIL”>
Crea un enlace de email
<a name=”NAME”>
Crea un enlace dentro del documento
<a href=”#NAME”>
Vincula a ese target dentro del documento

Formatting

<p></p>
Crea un párrafo nuevo
<p align=?>
Alinea un párrafa (izquierda, centro, derecha)
<br>
Inserta un salto de línea
<blockquote>
</blockquote>
Justifica el texto a ambos lados
<dl></dl>
Crea un lista de definición
<dt>
Precede cada término de definición
<dd>
Precede cada definición
<ol></ol>
Crea un lista numerada
<li></li>
Precede cada ítem de una lista y le agrega un número
<ul></ul>
Crea una lista con puntos
<div align=?>
Un tag genérico utilizado para formatear grandes bloques de HTML, también usado para stylesheets

Elementos Gráficos

<img src=”name”>
Agrega una imagen
<img src=”name” align=?>
Alinea una imagen an image
<img src=”name” border=?>
Setea el grosor del borde de la imagen
<hr>
Inserta una linea horizontal
<hr size=?>
Setea la altura de una linea
<hr width=?>
Setea el ancho de la linea, en porcentaje o números absolutos
<hr noshade>
Inserta una linea horizontal sin sombra

Tablas

<table></table>
Crea una tabla
<tr></tr>
Setea cada row de la tabla
<td></td>
Setea cada celda de la tabla
<th></th>
Setea el header de la tabla (una celda normal, con texto centrado y resaltado)

Atributos de las Tablas

<table border=#>
Setea el grosor del borde de la tabla
<table cellspacing=#>
Setea la cantidad de espacio entre las celdas
<table cellpadding=#>
Setea la cantidad de espacio entre el borde de las celdas y su contenido
<table width=# or %>
Setea el ancho de la tabla – en pixel o en porcentaje de acuerdo al ancho del documento
<tr align=?> or align=?>
Setea la alineación delas celdas (izquierda, centro, derecha)
<tr valign=?> or valign=?>
Setea la alineación vertical de las celdas (arriba, nedio, abajo)
<td colspan=#>
Setea la cantidad de columnas dentro de una celda
<td rowspan=#>
Setea la cantidad de rows que una celda despliega (por defecto=1)
<td nowrap>
Previene que se rompa una linea dentro de la celda

Frames

<frameset></frameset>
tag dentro de un documento de frames
<frameset rows=”value,value”>
Define las filas de un frame, usando números o porcentaje para definir el largo
<frameset cols=”value,value”>
Define las columnas de un frame, usando números o porcentaje para definir el largo
<frame>
Define un solo frame – o región – dentro de frameset
<noframes></noframes>
Define lo que aparecerá en navegadores que no soporten frames

Atributos de los Frames

<frame src=”URL”>
Especifica que documento html será desplegado
<frame name=”name”>
Nombra al frame or región, para que pueda ser llamado desde otro frame
<frame marginwidth=#>
Define los márgenes derecho e izquierdo del frame; debe ser igual o mayor a 1
<frame marginheight=#>
Define los márgenes de arriba y abajo del frame; debe ser igual o mayor a 1
<frame scrolling=VALUE>
Setea si el frame tendrá barra de desplazamiento o no; el valor debe ser “yes,” “no,” o “auto. ” El default es “auto”.
<frame noresize>
Previeve al usuario de cambiar el tamaño del frame

Formularios

Para forms funcionales, deberá correr un script de CGI. El HTML sólo crea la apariencia del formulario.
<form></form>
Crea el formulario
<select multiple name=”NAME” size=?>
Crea un menú de desplazamiento. Size setea el número de ítems visibles antes de tener que desplazarse.
<option>
Setea cada ítem del menú
<select name=”NAME”>
Crea un menú desplegable
<textarea name=”NAME” cols=40 rows=8>
Crea una área de texto.
<input type=”checkbox” name=”NAME”>
Crea una checkbox.
<input type=”radio” name=”NAME” value=”x”>
Crea un radio button.
<input type=text name=”foo” size=20>
Crea un área de texto de una sola línea. Size setea el largo en caracteres.
<input type=”submit” value=”NAME”>
Crea un botón de envio.
<input type=”image” border=0 name=”NAME” src=”name.gif”>
Crea un botón de envio utilizando una imagen.

Con estas referencias basícas, puedes empezar a aprender HTML, o si ya tienes nociones,  siempre es bueno tener a mano, estas referencias.

Soy Angel García,diseñador web especializado en WordPress y community manager. Creador de WebmasterCreativo, mi blog, de desiño web en WordPress y redes sociales. Además soy licenciado en Historia.

1 comentario en “Elementos basícos del HTML

Deja un comentario

Finalidad: Dejar un comentario sobre el artículo

Legitimación: Tu consentimiento
Destino: Tus datos se guardan en los servidores de Skylium, hosting de este blog

Derecho: Podras ejercer tu derecho a accer, modificar o eliminar tus datos