Bases del HTML

 Contenido


El html es un lenguaje estandart de marcas para elaborar páginas Web, se refiere a marcas porque utiliza etiquetas, que no es más que

palabras o letras claves demarcadas dentro de los signos "Menor que" & "Mayor que"; con la salvedad que en la mayoría de las etiquetas se tiene un inicio y un final, por ejemplo:

(Etiqueta inicio) Contenido (/Etiqueta cierre)

tambien existen algunas etiquetas que utilizan solo al inicio como: (br) y (hr)
La primera "break-row" equivale a un retorno de carro y la segunda genera una linea divisoria "horizontal-row"

Estructura básica

una página web tiene tres elementos básicos:

  1. Todo documento Html debe comenzar con una declaración del tipo (!DOCtype html)
  2. Luego se define el espacio de la página (Html) (/Html)
  3. Dentro del espacio de la página se encuentran HEAD y BODY
  4. Dentro de (Body) se desarrolla el contenido de la web page(/Body)

 
Copia, pega en un (archivo.html)  y comienza ya!
 
 
<!DOCtype html> 
<HTML>
<HEAD> <!-- CARACTERISTICAS -->  </HEAD>
  <BODY>
<!-- Contenido de la Página --> 
</BODY>
</HTML >
 

Que es JavaScript

JavaScript es el lenguaje de programacion del HTML y de la WEB, es el lenguaje que todos los desarrolladores deben aprender:

  1. html define el contenido de las páginas web
  2. CSS especifica las caracteristicas de las páginas web
  3. JavaScript para programar el comportamiento de las páginas web

  4. Este lenguaje no es exclusivo de las páginas web, muchos programadores de escritorio y servidores utilizan javascript.

Que es una etiqueta y su estructura

Una etiqueta es un comando marcado entre los símbolos "<         >", esta contiene la información a mostrar entre la Marca inicial y la Marca final, la marca final se reconoce porque dentro de los símbolos  "<       >"  se repite la etiqueta pero inicia con el signo de división "< /      >".

 Es decir una etiqueta se encuentra entre las marcas inicial y final; dentro de estas marcas se encuentra la información a suministrar por la web page y será visualizada de acuerdo a su denominación, por ejemplo:

< P > coloca el texto en forma de párrafo </P >

<H1> presenta el texto como el más importante: Titulo principal </H1>

<H2> presenta el texto como el segundo en importancia: Título Secundario </H2>

<H3> presenta el texto como el tercero en importancia: Título Terciario </H3>

<H6> es el texto más pequeño </H6>

 

Como definir una tabla

Para definir una tabla se debe tomar en cuenta que el lenguaje esta estructurado para generar la tabla por filas, las diferentes etiquetas indican la ubicación de las filas y se definen de la siguiente manera:

Table = define una tabla
Tbody = cuerpo de la tabla
Tr = Table row = cada una de las filas que conforman la tabla
Td = Table Data cell = cada una de las celdas de datos correspondiente a una fila



Ejemplo de una tabla 3 x 3 con encabezado:

< table ><tbody>

< tr ><td>  A  </td><td>  B  </td><td>  C  </td></tr>

< tr ><td> 1.1 </td><td> 1.2 </td><td> 1.3 </td>< tr >

< tr ><td> 2.1 </td><td> 2.2 </td><td> 2.3 </td>< tr >

< tr ><td> 3.1 </td><td> 3.2 </td><td> 3.3 </td>< tr >

</tbody></table>


 A  B  C 
1.11.21.3
2.12.22.3
3.13.23.3


Como generar un listado

Las etiquetas LO & LU nos permiten generar listas o viñetas ordenadas numéricamente ("Ordered List") o también listados sin numeración iniciando con un punto negro ("Un-ordered List"), se utiliza la misma estructura de marcas inicial y final con la etiqueta deseada, tomando en cuenta que cada item de la lista debe estar entre las marcas

 < Li > Elemento de lista < /Li  >


Ejemplo de listado ordenado:   (Ordered List)

  1. Elemento Ordenado "A"
  2. Elemento Ordenado "B"
  3. Elemento Ordenado "C"
Codificacion:
< Lo >
< Li > Elemento A </ Li >
< Li > Elemento B </ Li >
< Li > Elemento C </ Li >
</ Lo >

Ejemplo de listado sencillo:   (Un-Ordered List)

  • Elemento A listado sencillo
  • Elemento B listado sencillo
  • Elemento C listado sencillo
Codificacion:
< Lu >
< Li >Elemento A listado sencillo</ Li >
< Li >Elemento B listado sencillo</ Li >
< Li >Elemento C listado sencillo</ Li >
</ Lu >




ATRIBUTOS

Las etiquetas se complementan con atributos que se anexan inmediatamente después de cada elemento o comando y cada atributo puede tener un valor asignado que influye directamente en el comportamiento de la etiqueta, guardando siempre las siguientes características:
  • Todos los elementos HTML pueden usar atributos
  • Los atributos proveen información adicional al elemento al cual se aplica
  • Los atributos se especifican en la etiqueta de inicio
  • Los atributos usualmente vienen en pares   Nombre = "Valor"

Ejemplo:     <a>  </a>

 La etiqueta "A" esta definida como HYPERLINK o hipervinculo, este nos presenta un texto que al hacer CLICK sobre él nos lleva a otro lugar dentro de la misma página o fuera de ella. Esto depende del valor del atributo href

<a href="#Valor" >TEXTO MOSTRADO</a>

Si  href = "#Valor" ; entonces el Numeral "#" nos indica que la busqueda se realizará dentro de la misma página, seguido del Valor que nos ubica el cursor donde se encuentre el atributo id="Valor" dentro de una etiqueta HYPERLINK.

Dentro de este articulo se incluyó una etiqueta de hipervinculo de anclaje identificada "id" como "UNO" y el texto mostrado se corresponde con el titulo "ATRIBUTOS"

Estructura hipervinculo de anclaje:
<a href="#UNO" >ATRIBUTOS</a>

La siguiente estructura nos permite ubicar el cursor sobre el TITULO del presente artículo que se encuentra ubicado en la primera fila, al aplicar click sobre el siguiente texto mostrado:

IR A ATRIBUTOS

El cual tiene la siguiente estructura:
<a href="#UNO" >IR A ATRIBUTOS</a>

cuando se necesita un hipervinculo fuera de la página el valor href equivale al URL
como es el caso del icono inferior  PREV la etiqueta HYPERLINK esta mostrando una imagen mas no un texto y su valor href no es mas que la dirección URL de la página principal de la revista de la siguiente manera:

<a href="https://terazoom.blogspot.com">
<img src="https://............/imagen.jpg" />
</a>

la etiqueta IMG es la que permite mostrar una imagen y su atributo SRC no es más que la dirección URL donde se encuentra ubicada dicha imagen en la red, así como las demás etiquetas, la IMG acepta varios atributos que pueden ayudar a conformar el tamaño y características de la imagen mostrada.

El punto final de esta reflexión es que "al hacer click sobre la imagen el cursor se ubica sobre la página cuya dirección URL se encuentra asociada al atributo SRC.
Realiza la prueba: hacer click sobre la imagen ubicada abajo y a la izquierda de la presente página y cargará de nuevo la pagina inicial.


Resumen de atributos:
Se escriben dentro de la etiqueta inicial
Al lado derecho del elemento o comando
Posee un valor dentro de comillas que define la accion a tomar






Comentarios

Entradas populares de este blog

YamahaFzr 1000 / La Leyenda

Contruye distorsión para guitarra eléctrica