5 Elementos básicos de HTML
Ejemplo de una pagina completa:
Haremos el encabezado navegación, contenido y pie de pagina como todas paginas tienen.
[*]En el encabezado va el logo y su eslogan si gusta.
[*]Las opciones de navegación(menú).
[*] Seccion de contenido con sus imágenes.
[*] En el pie de pagina va el copyright.
Explicación:
1. Divisiones: <div></div>
Div (división) es un contenedor de elementos que puede agrupar párrafos, listas y graficos en una caja o box que almacenan otras cajas y les dan formato mendiante un estilo CSS.
Para poder identificar los elementos usamos un atributo id dentro de la etiqueta correspondiente, es recomendado usar comentario en el final de una etiqueta para saber donde acaba el elemento.
Los elementos div nos permiten crear cuadros en nuestra pagina web que a su vez sirven para almacenar otros elementos de HTML , representado graficamente.
2. Titulos: <h1></h1> y <h2></h2>
Los elementos heading (1-6) definen a los titulos por orden importancia empezando desde el 1 como el de mayor valor y sucesivamente.
3. Listas: viñetas y numeracion: <ul></ul> y <ol></ol>
Las listas ordenadas y no ordenadas son muy importantes para estructurar el contenido en nuestra página web.
Viñetas: lista no ordenada.
Una lista está compuesta por dos elementos:
[*]<ul></ul> significa "unordered list" es decir "lista no ordenada" que es el principio y el final de la lista con viñetas.
[*]<li></li> que marcan los elementos dentro de la lista.
Numeraciones: lista ordenada.
Una lista está compuesta por dos elementos:
[*]<ol></ol> significa "ordered list" es decir "lista ordenada" que es el principio y el final de la lista con numeraciones.
[*]<li></li> significa "list item" que marcan los elementos dentro de la lista.
4. Hipervínculos: <a></a>
Los hyperlinks o hipervínculos son el elemento html para mostrar un link o enlace web.
Los hipervínculos siempre tienen la misma estructura, la etiqueta a que significa anchor.
[*]href es la abreviatura de "Hypertext Reference" es donde se pone la ruta de la página a donde se llegara al hacer clic, y cambia en la misma ventana del navegador, puede ser un nombre de archivo o una URL.
[*]El atributo title es opcional, solo se pone si usted gusta que se muestre un texto cuando el puntero del ratón este encima del hipervínculo.
[*]Entre <a> y </a> se coloca un texto que el navegador mostrara en subrayado azul por defecto.
5. Resaltar texto: <strong></strong> y <em></em>
Los elementos strong y em sirven para resaltar texto, ambos son elementos inline.
[*]<Strong> define algo muy resaltado, mayormente llamado "negrita"
[*]<Em> significa emphasize(enfatizar), llamado "cursiva".
Ejemplo de una pagina completa:
Haremos el encabezado navegación, contenido y pie de pagina como todas paginas tienen.
[*]En el encabezado va el logo y su eslogan si gusta.
[*]Las opciones de navegación(menú).
[*] Seccion de contenido con sus imágenes.
[*] En el pie de pagina va el copyright.
<html>
<head>
<title>Barra de titulo</title>
</head>
<body>
<div id="contenedor">
<div id="encabezado">
<h1>Paginas web</h1>
<p>creacion de paginas en html</p>
</div><!--encabezado-->
<div id="navegacion">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#">servicios</a></li>
<li><a href="#">contactos</a></li>
</ul>
</div><!--navegacion-->
<div id="contenido">
<h2>Lorem ipsum.</h2>
<p>dolor sit amet, <strong>consectetur adipiscing elit</strong>.
Quisque eu augue odio. <em>Vivamus id massa in orci porta indum.
<em> Aenean consequat dui <strong><em>vitae lectus ullamcorper
aliquam volutpat</strong></em> erat sollicitudin. Praesent a
libero non dolor hendrerit pellentesque. Maecenas in lorem.</p>
</div><!--contenido-->
<div id="pie">
<p>creativehacks.com copyright todos los derechos reservados.</p>
</div><!--pie-->
</div>
</body>
</html>
Explicación:
1. Divisiones: <div></div>
Div (división) es un contenedor de elementos que puede agrupar párrafos, listas y graficos en una caja o box que almacenan otras cajas y les dan formato mendiante un estilo CSS.
Para poder identificar los elementos usamos un atributo id dentro de la etiqueta correspondiente, es recomendado usar comentario en el final de una etiqueta para saber donde acaba el elemento.
<body>
<div id="contenedor">
<div id="encabezado">
</div><!--encabezado-->
<div id="navegacion">
</div><!--navegacion-->
<div id="contenido">
</div><!--contenido">
<div id="pie">
</div><!--pie-->
</div>
</body>
Los elementos div nos permiten crear cuadros en nuestra pagina web que a su vez sirven para almacenar otros elementos de HTML , representado graficamente.
2. Titulos: <h1></h1> y <h2></h2>
Los elementos heading (1-6) definen a los titulos por orden importancia empezando desde el 1 como el de mayor valor y sucesivamente.
<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3>
<h4>Titulo 4</h4>
<h5>Tiutlo 5</h5>
3. Listas: viñetas y numeracion: <ul></ul> y <ol></ol>
Las listas ordenadas y no ordenadas son muy importantes para estructurar el contenido en nuestra página web.
Viñetas: lista no ordenada.
Una lista está compuesta por dos elementos:
[*]<ul></ul> significa "unordered list" es decir "lista no ordenada" que es el principio y el final de la lista con viñetas.
[*]<li></li> que marcan los elementos dentro de la lista.
<ul>
<li>Arroz</li>
<li>Papaya</li>
<li>Tomate</li>
</ul>
Numeraciones: lista ordenada.
Una lista está compuesta por dos elementos:
[*]<ol></ol> significa "ordered list" es decir "lista ordenada" que es el principio y el final de la lista con numeraciones.
[*]<li></li> significa "list item" que marcan los elementos dentro de la lista.
<ol>
<li>primera</li>
<li>segunda</li>
<li>tercera</li>
</ol>
4. Hipervínculos: <a></a>
Los hyperlinks o hipervínculos son el elemento html para mostrar un link o enlace web.
Los hipervínculos siempre tienen la misma estructura, la etiqueta a que significa anchor.
<a href="..." title="...">Texto visible</a>
[*]href es la abreviatura de "Hypertext Reference" es donde se pone la ruta de la página a donde se llegara al hacer clic, y cambia en la misma ventana del navegador, puede ser un nombre de archivo o una URL.
[*]El atributo title es opcional, solo se pone si usted gusta que se muestre un texto cuando el puntero del ratón este encima del hipervínculo.
[*]Entre <a> y </a> se coloca un texto que el navegador mostrara en subrayado azul por defecto.
<p>visita <a href="http://www.creativehacks.com" title="Creative
Hacks - tutoriales">CreativeHacks</a> donde encontraras bastantes
tutoriales para armar tu web</p>
5. Resaltar texto: <strong></strong> y <em></em>
Los elementos strong y em sirven para resaltar texto, ambos son elementos inline.
[*]<Strong> define algo muy resaltado, mayormente llamado "negrita"
[*]<Em> significa emphasize(enfatizar), llamado "cursiva".
<p>este texto tiene ejemplos de <strong>negrita</strong>y de <em>
cursiva</em></p>