• 2
  • 7 RepliesReplies
  • 104792 ReadTimes Read
  • 19 PointsPoints

Topic: Etiquetas basicas de html. Para principiantes

Usuario: Lean
Rango: Fundador
Mensajes: 6782
Points: 236
Perfil: View Profile
Pais:
ar
Etiquetas basicas de html. Para principiantes
July 09, 2013 - 09:48 09:48
Etiquetas basicas de html

HTML es el lenguaje por el cual construimos una página web. Este lenguaje se basa principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados de nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para poder crear o al menos modificar una página web.



* <HTML>: indica el comienzo del documento HTML.
* <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página.

* <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

* <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

* <A>: define los enlaces.

* <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.


* <P>: el texto dentro de esta etiqueta forma un párrafo.

* <IMG>: imágenes.

* <BR />: salto de línea.

* <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.

* <B> y <STRONG>: se utilizan para resaltar el texto.

* <U>: texto subrayado.

* <I>: texto en cursiva.

Ejemplo de página básica

<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado de la página</h2>
<h3>Encabezado de menor tamaño</h3>
<p>Este es el texto de un párrafo.</p>
<p>Este es el texto de otro párrafo. Dentro de este párrafo,
pueden ir palabras
<b>en negrita</b>, <i>en cursiva</i> o lo
que quieras.
</p>
<p>También podemos poner listas como la siguiente:</p>
<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>
</html>

Quedaria asi: (Abrir spoiler)

Show content
Título de la página

Encabezado de la página

Encabezado de menor tamaño

Este es el texto de un párrafo.

Este es el texto de otro párrafo. Dentro de este párrafo, pueden ir palabras en negrita, en cursiva o lo que quieras.

También podemos poner listas como la siguiente:

  • Guión número uno.
  • Guión número dos.
  • Guión número tres.




Consejo de Atributos

<body bgcolor=?>
Establece el color de fondo, usando nombres o valores hex
<body text=?>
Establece el color del texto, usando nombres o valores hex
<body link=?>
Establece el color de los enlaces, usando nombres o valores hex
<body vlink=?>
Establece el color de los enlaces, usando nombres o valores hex
<body alink=?>
Establece el color de los enlaces con un clic

Etiquetas de texto

<pre> </ pre>
Crea texto preformateado
<h1> </ h1>
Crea un título grande
<h6> </ h6>
Crea un título pequeño
<b> </ b>
Crea texto en negrita
<i> </ i>
Crea texto en cursiva
<tt> </ tt>
Crea, o máquina de escribir estilo de texto-teletipo
<cite> </ cite>
Crea una cita, por lo general en cursiva
<em> </ em>
Hace hincapié en la palabra (con cursiva o negrita)
<strong> </ strong>
Hace hincapié en la palabra (con cursiva o negrita)

Enlaces
<a href="URL"> </ a>
Crea un hipervínculo
<a href="mailto:EMAIL"> </ a>
Crea un enlace de correo
<a name="NAME"> </ a>
Crea una ubicación de destino dentro de un documento
<a href="#NAME"> </ a>
Enlaces a ese lugar de destino en otra parte del documento

Formato

<p></p>
Crea un nuevo párrafo
<p align=?>
Alinea un párrafo a la izquierda, derecha o al centro
<br />
Inserta un salto de línea

<ol> </ ol>
Crea una lista numerada
<li> </ li>
Precede a cada elemento de la lista, y añade un número
<ul> </ ul>
Crea una lista con viñetas

Elementos gráficos

<img src="name">
Agrega una imagen
<img src="name" align=?>
Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo
<img src="name" border=?>
Ajusta tamaño del borde alrededor de una imagen
<hr />
Inserta una regla horizontal
<hr size=?>
Establece el tamaño (altura) de la regla
<hr width=?>
Establece la anchura de la regla, en porcentaje o valor absoluto

Tablas

<table> </ table>
Crea una tabla
<tr> </ tr>
marcha cada fila en una tabla
<td> </ td>
Pone en marcha cada celda de una fila
<th> </ th>
Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado)

Atributos de la tabla

<table border=#>
Establece el ancho de borde alrededor de celdas de la tabla
<table cellspacing=#>
Ajusta la cantidad de espacio entre las celdas de la tabla
<table cellpadding=#>
Ajusta la cantidad de espacio entre el borde de una celda y su contenido
<td colspan=#>
Establece el número de columnas de una celda debe abarcar
<td rowspan=#>
Establece el número de filas de una célula debe abarcar (por defecto = 1)
<td nowrap>
Evita las líneas dentro de una célula se rompa para adaptarse a

Formularios

Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la apariencia de un formulario.
<form> </ form>
Crea todas las formas
<select name="nombre" múltiples size=?> </ select>
Crea un menú desplegable. Tamaño establece el número de elementos de menú visible antes de yo u necesidad de desplazarse.
<option>
Pone en marcha cada elemento de menú
<select name="NAME"> </ select>
Crea un menú desplegable
<textarea name="nombre" cols=40 rows=8> </ textarea>
Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura.
<input type="checkbox" name="NAME">
Crea una casilla de verificación. Texto siguiente etiqueta.
<input type="radio" name="nombre" value="x">
Crea un botón de radio. Texto sigue etiquetas
<input type=text name="foo" size=20>
Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.
<input type="submit" value="NAME">
Crea un botón Enviar
<input type="image" border=0 name="NAME" src="name.gif"> type="image"
Crea un botón Enviar con una imagen
<input type="reset">
Crea un botón de reinicio
You do not have permission to give points
point 19 Points

Users who gave points in this topic » eva24 (1 Pts) » EduardO (6 Pts) » nodensdorian (6 Pts) » Snoopix (3 Pts) » Príncipe_Azul (3 Pts) 

no avatar
Usuario: eva24
Rango: Recién Llegada
Mensajes: 17
Points: 0
Mi web: http://www.genielin.com
Perfil: View Profile
Re:Etiquetas basicas de html. Para principiantes
Reply #1 July 09, 2013 - 11:38 11:38
Gracias,, nos vendrá muy bien a much@s

Un saludo

Usuario: Lean
Rango: Fundador
Mensajes: 6782
Points: 236
Perfil: View Profile
Pais:
ar
Re:Etiquetas basicas de html. Para principiantes
Reply #2 July 09, 2013 - 11:39 11:39
Gracias,, nos vendrá muy bien a much@s

Un saludo
Gracias a vos por comentar!

Usuario: EduardO
Rango: Nuevo Usuario
Mensajes: 875
Points: 15
Mi web: http://www.gamerzperu.com/
Perfil: View Profile
Pais:
pe
Re:Etiquetas basicas de html. Para principiantes
Reply #3 July 09, 2013 - 12:20 12:20
Definitivamente eres un Crack Lean. Felicitaciones +6 Puntos y Favoritos!

Me sirvirá de mucho. Muchas gracias por compartir!

Saludos!

no avatar
Usuario: nodensdorian
Rango: Nuevo Usuario
Mensajes: 207
Points: 27
Mi web: http://www.ardiforos.com.ar/
Perfil: View Profile
Re:Etiquetas basicas de html. Para principiantes
Reply #4 July 23, 2013 - 11:42 11:42
Fooo, Genial! Por fin tengo tiempo de verlo con detenimiento. Hay un par de etiketas que no conocía, ya lo tengo en word e impreso, ahora me resta estudiarlo, que es lo más pesado si no me distrae la mosca que vuela, jajaja. Excelente Lean-sensei, espero el próximo artículo sobre este lenguaje. ;D

Abrazos!

Usuario: nikooo14
Rango: Excelente User
Mensajes: 235
Points: 122
Mi web: http://servidornolimit.net
Perfil: View Profile
Pais:
cl
Re:Etiquetas basicas de html. Para principiantes
Reply #5 July 23, 2013 - 03:49 15:49
lnnxoiansxnas al mas de alguno les servirá jjaa

Usuario: Lean
Rango: Fundador
Mensajes: 6782
Points: 236
Perfil: View Profile
Pais:
ar
Re:Etiquetas basicas de html. Para principiantes
Reply #6 July 23, 2013 - 04:26 16:26
ifugoefugieruggdfdf

no avatar
Usuario: manifighter
Rango: Recién Llegado
Mensajes: 2
Points: 0
Mi web: http://washingtonpremiersoccer.com/forum/index.php
Perfil: View Profile
Pais:
am
Re:Etiquetas basicas de html. Para principiantes
Reply #7 June 05, 2015 - 09:54 09:54
gracias por la información útil

 

TAGS



top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines