Miller Gómez

Blog en el cual se emitirán temas relacionados a lenguajes de programación en modo básico y a la instalación de programas y consejos de los mismos para una mejor experiencia del usuario básico o intermedio.

Creación de Página Web Básica (II) Etiquetas

  6:13:00    

Creación de Página Web Básica (II) : Etiquetas

Hemos iniciado un curso de creación de página web básica y esta es nuestro segundo post, si te perdiste la primera sesión aquí los temas:
El lenguaje HTML se basa en etiquetas, por eso es importante entender la sintaxis.
Las etiquetas van dentro de los símbolos < y >  como por ejemplo las etiquetas que vimos en la primera parte del curso: html, head, body, title
  • <html>
  • <head>
  • <title>
  • <body>
Las etiquetas van a la par, una etiqueta que abre y otra que cierra 
  • <html> ... </html>
  • <head> ... </head>
  • <title>  ...  </title>
  • <body> ... </body>
Los puntos suspensivos refiere que entre las etiquetas va algún contenido o más etiquetas

A continuación veamos otras etiquetas más usadas en la elaboración de una página web:

Encabezados
Nos permiten organizar los títulos en sus diversos tamaños, y se representa de la siguiente manera
  • <h1> ... </h1>
  • <h2> ... </h2>
  • <h3> ... </h3>
  • <h4> ... </h4>
  • <h5> ... </h5>
  • <h6> ... </h6>
Párrafo
La etiqueta de párrafo nos permite ingresar texto a nuestra web.
  • <p> ... </p>
* Los navegadores ignoran el salto de línea al presionar intro o enter y para ello existe la etiqueta:
  • <br>
Esta etiqueta no necesita etiqueta de cierre.

Imágenes
Para ingresar imágenes utilizamos la etiqueta : <img /> seguido del atributo src="..." donde va la dirección donde guarda la imagen el cual debe ir todo el nombre, incluida la extensión de la imagen.
  • <img src="MiPrimeraWeb/imagenes/foto.jpg" />
Listas
Para ingresar listas utilizamos la siguiente sintaxis
<ul>
    <li> ... </li>
    <li> ... </li>
    <li> ... </li>
</ul>
Esto nos mostrará como resultado una lista de 3 contenidos, donde <ul> </ul> es la etiqueta que inicia una lista y <li> </li> es cada contenido de la lista que se debe ingresar, puede tener uno a mochos.

Tablas
Para la distribución del contenido en ocasiones suelen utilizar tablas. Las tables tienes las siguientes etiquetas básicas: table, tr, td. La estructura es la siguiente:
<table>
    <tr>
        <td> ... </td>
        <td> ... </td>
        <td> ... </td>
    </tr>
    <tr>
        <td> ... </td>
        <td> ... </td>
        <td> ... </td>
    </tr>
</table>
Iniciamos con la apertura <table> luego la etiqueta <tr> </tr> que representa la fila de la tabla, en el ejemplo hay 2 etiquetas <tr> </tr> lo cual quiere decir que existe 2 filas en la tabla. En seguida tenemos 3 etiquetas <td> </td> dentro de cada fila, eso quiere decir que existe 3 columnas por cada fila.

A continuación veamos un ejemplo de cada uno de ellos en el archivos que editamos en la primera lección del curso.





Descarga el proyecto haciendo click aquí 
Descargar proyecto del vídeo click aquí

   /

  No Comments

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)