Las paginas HTML deben comenzar con la etiqueta
<!DOCTYPE html>
Su función es decirle al navegador que tipo de pagina va a ejecutar, en este caso una pagina HTML 5
No tiene etiqueta de finalización
La etiqueta <HTML></HTML> Indica al navegador donde empieza y donde termina el código HTML
El atributo lang="en-US" indica el lenguaje.
La etiqueta <HEAD></HEAD> Indica donde empieza y donde termina el bloque del encabezado
Los siguientes elementos pueden ir dentro del elemento <head> :
-
<title>Titulo de la pagina, se muestra en la
pestaña del navegador
-
<Style> Permite incluir código CSS
-
<Base> especifica la base URL / objetivo para
todos los URL relativos en un documento.
-
<Link> Permite Incluir archivos u otras paginas
dentro de la nuestra
-
<Meta> Proporciona meta-datos sobre el documento
HTML
-
<Script> Permite incluir código JavaScript
principalmente
- <Noscript>define un contenido alternativo para los usuarios que tienen scripts de discapacidad en su navegador o tener un navegador que no admite la escritura
La etiqueta <FOOTER></FOOTER> Indica donde empieza y donde termina el pie de pagina o la parte final de la pagina.
Las etiquetas <H1></H1> a la <H6></H6> Indica el tamaño del titulo o subtítulos
La etiqueta <p></p> Indica el comienzo y el fin de un párrafo. El atributo title="Tool tip" indica un mensaje flotante cuando se pasa el cursor por encima.
Los vínculos se definen con la etiqueta <a></a>, es obligatorio el atributo HREF para indicar la pagina o el archivo que queramos vincular.
Ejemplo:
<a href=”http://cursorapidohtml.blogspot.com”>Curso Rápido HTML </a>
Es importante establecer el concepto de direcciones relativas y absolutas cuando hablemos de archivos externos a nuestra pagina. Una dirección absoluta indica el destino completo como por ejemplo ”http://cursorapidohtml.blogspot.com” o una local como “C:/imagen.jpg”. La dirección relativa se asume que estamos en la ubicación de nuestro sitio web sin importar donde este realmente por ejemplo “index.html” (en nuestro sitio) o “./imágenes/imagen.jpg” (una carpeta dentro de nuestro sitio) o “../main.js” (una carpeta anterior a la actual).
Las imágenes se definen con la etiqueta <IMG>.
Ejemplo:
<img src="imagen.jpg" alt="Hola" width="104" height="142">
Los Atributos :
src = ”imagen.jpg” indica el archivo de imagen.
alt = “Hola” indica un mensaje flotante cuando se pasa el cursor por encima.
width =”104” indica el ancho.
height = “142” indica el alto.
La etiqueta <hr> dibuja una línea horizontal.
La etiqueta <br> hace un salto de línea.
La etiqueta <pre></pre> define un texto pre-formateado
Formatear Texto:
- <B> El texto en negrita.
- <Strong> Texto importante.
- <I> El texto en cursiva.
- <Em> Texto con énfasis.
- <Marca> Marcado de texto.
- <Small> Pequeño texto.
- <Del> El texto eliminado.
- <Ins> El texto insertado.
- <Sub> Subíndice texto.
- <Sup> Superíndice texto.
Ejemplo: <!-- Escriba su comentario aquí -->
La <input> etiqueta especifica un campo de entrada donde el usuario puede introducir datos.
El atributo type=”” indica que tipo de entrada
El atributo value=”” le indica un valor según el Tipo
Consejo: Utilice la <label> elemento para definir etiquetas para <input> elementos.
El atributo TYPE puede ser:
-
button (Botón).
-
checkbox (Caja de Chequeo).
-
color (Selector de Color).
-
date (Fecha).
-
datetime-local (Fecha y Hora).
-
email (Correo Electrónico).
-
file (Archivo).
-
hidden (Oculto).
-
image (Imagen).
-
month (Mes).
-
number (Número).
-
password (Clave).
-
radio (Botón circular).
-
range (Rango).
-
reset (Botón de Reset).
-
search (Botón de Búsqueda).
-
submit (Botón de Enviar).
-
tel (Teléfono).
-
text (Texto normal).
-
time (Hora).
-
url (Dirección web).
- week (Mes).
Listas
Para hacer listas se usan dos etiquetas combinadas <UL> y <LI> .
<UL></UL> define donde empieza y donde termina la lista y sus atributos generales.
<LI></LI> define los elementos.
Ejemplo:
<ul>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
El atributo CSS list-style-type puede ser :
Disc
<ul style="list-style-type:disc" >
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
Circle
<ul style="list-style-type:circle" >
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
Square
<ul style="list-style-type:square" >
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
None
<ul style="list-style-type:none" >
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
También puede hacer listas ordenadas con la etiqueta <OL></OL> y con el atributo TYPE define como es el orden.
TABLAS
Las tablas son una manera muy poderosa de ubicar la información en la
pantalla, se define con las etiquetas <TABLE>
</TABLE> <TH> </TH> <TR></TR> <TD>
</TD>.
<TABLE> </TABLE> Define el comienzo y el fin de la tabla.
<TH> </TH> Define una celda como encabezado.
<TR></TR> Define una columna.
<TD> </TD> Define una celda.
Veamos un ejemplo:
<table style="width:100%; border:1px solid black; border-collapse: collapse;" >
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Pedro</td>
<td>Pérez</td>
<td>50</td>
</tr>
<tr>
<td>Eva</td>
<td>Martínez</td>
<td>24</td>
</tr>
</table>
BLOQUES
Los bloques permiten agrupar elementos dentro de nuestra pagina y aplicar
características a estos, se usan dos etiquetas básicamente <DIV> </DIV> y <SPAN> .
<DIV> </DIV> Define un bloque en varias líneas
<SPAN> Define un bloque en una sola línea.
IDENTIFICADORES Y CLASES
Los atributos ID=”nombre del id”
y CLASS=”nombre de la clase”
permiten identificar cualquier elemento de nuestra pagina o agruparlos en una
CLASE (Recuerda la programación orientada a objetos) y aplicarles
características, atributos y eventos.
¿Cual es la diferencia con DIV o SPAN?
La principal diferencia es que con DIV y SPAN solo estamos dentro del ámbito de HTML, mientras que con ID y CLASS podemos acceder des CSS o desde JavaScript.
Todos los elementos de la pagina pueden tener identificador y clase.
Su utilidad la veremos mas adelante pero sin duda es muy bueno que te acostumbres a usarlos.
No hay comentarios.:
Publicar un comentario
Deja tus comentarios y preguntas