HTML
By : Carlos Anton
Que Es HTML ?
Hyper Text Markup Language
Es el lenguaje estándar para crear paginas web
Describe La Estructura
Le indica al explorador que y como mostrarlo
Consiste De Etiquetas
Las etiquetas indican párrafos, títulos, vínculos, ect
HTML consiste en nodos
El Nodo padre es el primer círculo azul mientras que sus hijos son los que están abajo
HTML funciona a partir de ramas y cada una tiene una principal función.
<html> es el nodo principal o la etiqueta principal mientras que <body> y los demás son
sus hijos
Que es una etiqueta ?
Una etiqueta consta de 3 partes.
<soy-una-etiqueta> ( APERTURA DE LA ETIQUETA )
Acá va el contenido de la etiqueta
</soy-una-etiqueta> ( CIERRE DE LA ETIQUETA
Para crear una etiqueta consta de poner el símbolo ( Mayor que y Menor que ) <>
Para Cerrarla basta con poner ( / ) antes del nombre de la etiqueta
Estructura de HTML
<html> ( Abrir código HTML )
<head> ( Generar Descripciones que no suelen ser visibles )
<title> El título de mi página </title> ( Titulo )
</head> ( Cerrar Head )
<body> ( Elementos visibles en la pagina )
<h1> un heading o titulo </h1> ( Titulo)
<p> un párrafo </p> ( Parrafo )
</body> ( Cerrar Body )
</html> ( Cerrar HTML )
La Meta Es Crear Un Blog con su.
Nombre del blog
Titulo
Descripción
Imagen
Texto del articulo
El primer archivo que vamos a crear lo vamos a nombrar como ( [Link] ) el index es obligatorio
no puedes poner ( [Link] ) o otra cosa solamente ( [Link] )
Después pondremos el símbolo de ( ! ) y presionaremos la tecla ( TAB )
Y Se generara esto >>>>
La etiqueta <!DOCTYPE> Interpreta nuestro código a HTML 5
Si nosotros llegáramos a borrarlo la página web detectaría el código como código antiguo
y se generarían errores que existían en las páginas programadas con código antiguo en los
años 90.
<html>
Es la etiqueta raíz o el padre de todo documento HTML.
<head>
Es la etiqueta que da características que no necesariamente son visibles para el usuario
<title>Document</title> Es el título de la pagina.
<body>
Dentro de esta etiqueta estará todo el
contenido visible para el usuario.
Lo que esta adentro de body ( Sera visible en la web para todos los usuario )
Los ( heading ) son etiquetas que se utilizan para crear títulos o sub títulos o sub sub títulos
y se utilizan con la etiqueta <h1> hasta llegar a la <h6> la numero 1 es la mas grande
mientras que las demás se hacen más pequeñas mientras llega al numero 6.
Los ( párrafos ) son etiquetas que se utilizan para crear textos o párrafos normales y se
utilizan con la etiqueta <p>
Para separar un texto de otro solo basta con utilizar la etiqueta <hr> esta crea una línea y
un espacio entre el texto de arriba y el de anajo
La etiqueta <span> se utiliza para seleccionar un texto en especifico con esta le podras dar
color, forma y tamaño a través del lenguaje (CSS) como por ejemplo el texto llamado
( mucho mas largo ) es color azul ya que fue seleccionado con la etiqueta span y atravez de
ella se le deio la orden de tener el color azul a través del código <span style=”color_blue”>
con el lenguaje CSS
La Etiqueta <!—Comentario> se utiliza para crear un comentario en el codigo
Para crear un texto que tenga vínculo con otra página solo basta con poner la etiqueta
<a href=”[Link] de la pagina).com”>NOMBRE DEL TEXTO</a>
esta te abrirá la pagina
Pero si quieres que el link te cree una pagina nueva en vez de sustituir la que tenias
abierta solo basta con poner
<a target=”_blank” href=”[Link] de la pagina).com”>NOMBRE DEL
TEXTO</a>
Para crear una imaen dentro de nuestra web solo basta con poner <img src=”UBICACIÓN” />
Pero si quieren darle un tamaño a tu imagen o reducirla solo basta con poner width=”VALOR”
<form> es una etiqueta para crear formularios para poder interactuar con el usuario.
<action=”/PAGINA WEB” method=”GET O POST”> ( esto se utiliza para enviar formularios
<input> es para crear controles interactivos
<value> para meterle un comentario dentro del control interactivo
<type> para darle un tipo a nuestro control interactivo
<id> para darle una id de referencia a nuestro control interactivo
<name> para darle un nombre a nuestro control interactivo
<placeholder> para meterle un comentario semi visible a nuestro control interactivo
<label> para poner una especificación en el control interactivo
<label for=”(ID)”>NOMBRE DE LA ESPECIFICACION”</label> For para darle interaccion a la
especificación con el control interactivo a través de la ID
<textarea>CONTENIDO<textarea> Para crear un cuadro de comentarios
<cols=”50”> determinar lo ancho del comentario
<rows=”10”> determinar lo alto del comentario
<input type=”submit”> un botón para enviar comentario
Tipos de botones
Listas no ordenadas y ordenadas
<ul> genera una lista no ordenada osea con puntos *
<ol> genera una lista ordenada osea con números, letras o símbolos
<li>NOMBRE</li> genera la lista con su respectivo nombre
<li style=”list-style-type: lowner-(modelo);”>NOMBRE</li<> genera un modelo osea
remplaza los números por letras, símbolos o números romanos, ect
Crear Tablas
<table> crear tabla
<table style=”width: 500px;”> darle tamaño a la tabla
<thead> crear cabeza de la tabla
<tbody> contenido de la tabla
<tfoot> Conclusión o resultado de la tabla
<tr> crear columna
<td> añadir información a la columna
Dentro de la etiqueta head escribimos
<style>
Table, th, td {
Border: 1px solid black;
}
</style>
Esto creara rallas divisoras a nuestra tabla para una mejor presentación a través del
lenguaje CSS