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.

Etiquetas

Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

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

Creación de Página Web Básica

  21:56:00    

Para la creación de Páginas Web es necesario saber que es HTML
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.
Una vez definido el lenguaje a utilizar, nos estaremos preguntando que herramientas vamos a utilizar para ello. Existen múltiples herramientas, desde la más compleja hasta la más simple como un bloc de notas.


Ustedes pueden seguir este tutorial abriendo un bloc de notas Inicio - Programas - Accesorios - Bloc de Notas.

 Crearemos un nuevo archivo con el nombre index.html dentro de una Carpeta llamada MiPrimeraWeb.

Fíjense en las flechas rojas los pasos a seguir.

 Debemos tomar en cuenta que una páginas web consta básicamente de dos partes, Cabecera y Cuerpo (Por llamarlo de una manera didáctica). Y estas partes indicaremos en el código.


Como ven en la imagen anterior, en el archivo: index.html primero indicamos el lenguaje que vamos a utilizar con la etiqueta: html, luego indicamos los datos de cabecera con la etiqueta head, note que dentro de head lleva inscrito otra etiqueta : title que nos servirá para poner nombre a nuestra proyecto de página web, en seguida tenemos la etiqueta body dentro del cual llenaremos todo nuestro contenido.

 Hemos modificado un par de líneas que verás a continuación, luego de editarlas presionamos las teclas CONTROL + G (o sino podemos ir a archivo guardar) y damos doble click a nuestro archivo index.html dentro de la carpeta MiPrimeraWeb para ver los resultados.

De este modo tenemos creado nuestro primer proyecto web básico.

Descargar proyecto del vídeo click aquí

 Recuerda el temario a desarrollar en el curso:






   /

  No Comments

Suscribirse a: Entradas (Atom)