Creación de Página Web Básica (II) Etiquetas
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>
- <html> ... </html>
- <head> ... </head>
- <title> ... </title>
- <body> ... </body>
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>
La etiqueta de párrafo nos permite ingresar texto a nuestra web.
- <p> ... </p>
- <br>
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" />
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í
0 comentarios:
Publicar un comentario