Curso HTML

CURSO HTML
Que es html?
Hyper Text Markup Languaje
Es el leguaje estándar para crear páginas web, la cual describe la estructura (esqueleto de cómo
debe escribirse nuestra página de qué y cómo se va a mostrar).
Le indica al explorador que y como mostrarlo.
Consiste de etiquetas.
Las etiquetas indican párrafos, títulos, vínculos etc.
COMO FUNCIONA HTML?
Es como una estructura de árbol
Esta es la Este es el nodo raíz o Padre

raiz Esta es la
Estos son los nodos hijos

QUE ES UNA ETIQUETA HTML?
< Soy una etiqueta > (abre etiqueta con el signo mayor o menor)
Acá va el contenido de la etiqueta
< /Soy una etiqueta > (cierra etiqueta con el signo mayor y menor más el “/ ”)
ESTRUCTURA DE HTML
¿Qué son los atributos en HTML Ejemplos?

Los atributos se agregan a una etiqueta para proporcionar al navegador más
información sobre cómo debe aparecer o comportarse la etiqueta.
Los atributos constan de un nombre y un valor separados por un signo igual (=),
con el valor entre comillas dobles.
¿Qué es una propiedad y un atributo de una etiqueta HTML?

Un atributo HTML es un valor o propiedad que añades a una etiqueta HTML.
Este otorgará una propiedad o comportamiento específico a la propia etiqueta,
por lo que es muy importante que los conozcas
En el caso de no tener instalado Visual Studio Code debe ir al siguiente link, seleccionar
según el equipo en el que esté trabajando
https://code.visualstudio.com/download
Crear una carpeta llamada “HTML”

Abrir Visual Studio Code
Una vez abierto Visual Studio Code, abrir la carpeta creada llamada HTML
Crear un archivo llamado index.html
Observación: Para poder escribir en nuestro archivo se debe realizar lo siguiente:
1. Posicionar dentro del archivo creado
2.- Escribir el signo de exclamación y luego presionar la tecla tab, lo que nos arroja es lo
siguiente:
Ahora agregamos contenido a nuestra estructura html:
Después guardamos los cambios y lo ejecutamos para ver el resultado en el browser.

Vamos a File, selecionamos Save o bien podemos guardar los cambios
con la tecla Ctrl + S
Dos maneras de ejecutarlo:
1ero.- Seleccionamos Run luego seleccionamos Start Debugging
2do.- Presionamos Shift + alt + r
Nos debería aparecer lo siguiente:
Le hacemos doble click al archivo index.html y nos abre el browser
Con la etiqueta
<title>Tecnología a un click</title>
Le indica al motor de búsqueda lo que necesita el usuario, es importante poner un título

que haga referencia a lo que nosotros queremos mostrar.
Ahora vamos a modificar nuestro:
<body>
Cursor debe estar identado o tener una separación, tal como lo muestra la
imagen.
</body>
Es importante que debemos dejar a lo menos dos espacios.
Ejemplo:
Agregamos una etiqueta <h1> </h1> dentro del <body> como se muestra en la imagen
Guardamos con Ctrl + s en Visual Studio code y actualizamos el browser

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>, estas
etiquetas nos permite mostrar titulos y subtitulos
Etiquetas <p> </p> nos permite agregar parrafos

Agregamos una etiqueta <p> </p> dentro del <body> como se muestra en la imagen
Etiquetas <hr> nos permite agregar una separación, veamos el ejemplo
Nota: Esta etiqueta nos permite también separar secciones

Etiquetas  Esta etiqueta nos permite agregar comentarios
Nota: No aparece en el browser ya que es un comentario nada más.
Etiquetas <span> </span> permite seleccionar una parte del párrafo, pero sin alterar el
contenido del parrafo
Para este ejemplo aplicamos CSS para mostrar cómo funciona la etiqueta <span>
Etiquetas <br> </br> No permite hacer saltos de líneas
Nota: Se pueden hacer más de un salto de línea

Etiquetas <a> </a> estas son etiquetas de hipervínculo estas son utilizadas con href, para
poder ir a otra pagina
Luego al hacer click en “Ir a portal Inacap”, nos re direcciona al portal Inacap
Propiedad target nos permite abrir una nueva pestaña y cargar la página que fue
referenciada
Etiquetas <img /> estas son etiquetas para mostrar imágenes al usuario, cabe mencionar
que en esta etiqueta podemos cerrarla directamente como se indica.
Esta etiqueta lleva un atributo llamado SRC
El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página,
que puede ser una URL relativa o absoluta
Pero para que nuestro trabajo se vea más ordenado vamos a crear una carpeta llamada
imagen, luego voy mover el archivo Imagen_html.JPG a la carpeta creada llamada
IMAGEN
Ahora debemos referenciar nuevamente la imagen
<img src="IMAGEN/Imagen_html.JPG" />
Guardamos y actualizamos el browser.

Propiedades width y height con esta propiedad podemos indicar el ancho y alto de la
imagen
La imagen ahora es más pequeña que en las imágenes anteriores.

En la siguiente imagen fue modificado el ancho y el alto de la imagen y su resultado es el
siguiente:
En esta imagen el alto(height) es más pequeño que el ancho(width)
Nota: Lo ideal es mantener un estándar de la imagen para que no se vea deformada.
El elemento <form>
Etiquetas <form> </form> Esta etiqueta es un formulario en la cual podemos recopilar

información por parte del usuario.
Dentro del <form> debemos agregar los diferentes campos que necesitamos para
recopilar información del usuario
El elemento o etiquetas <input>
El <input> se puede mostrar de varias maneras, según el atributo type.
Utilizando etiquetas <form></form>, <input /> , resultado

Etiquetas <label> </label> permite dar un título o descripción al campo del formulario,
además al usar esta etiqueta <label> hacemos que el formulario sea más fácil de usar.
Aquí agregaremos lo siguiente:
<form> 

<label>Nombre :</label>
<input />
</form>
El resultado es el siguiente:
Ahora pondremos un foco a la etiqueta Nombre, en esta imagen cuando actualizamos el browser
en la etiqueta nombre el cursor aparece inmediatamente dentro del recuadro
Propiedad name , placeholder, type

Name : Cada input debe tener un atributo name para que los datos se manden. Si no tiene los
datos de ese input no se mandarán.
Placeholder: Es el texto que aparece dentro de un campo de texto en un formulario

antes de que el usuario lo complete, sirviéndonos de gran ayuda para clarificar qué tipo de
información hay que introducir en dicho campo.
El elemento o etiquetas <input>
El <input > se puede mostrar de varias maneras, según el atributo type. <input type>
Ejemplo1 : <input type=”submit”
<input type="submit" id="nombre" name="nombre" placeholder="nombre"/>

Ejemplo 2: <input type=”radio”
<input type="radio" id="nombre" name="nombre" placeholder="nombre"/>
Ejemplo 3: <input type=”text”
<input type="text" id="nombre" name="nombre" placeholder="nombre"/>
Existen más tipos como password, checkbox, file,mail etc.
Ejemplo 4: <input type=”password”
<input type="password" id="nombre" name="nombre" placeholder="nombre"/>
Ejemplo 5: <input type=”checkbox”
<input type="checkbox" id="nombre" name="nombre" placeholder="nombre"/>

Ejemplo 6: <input type=”file”
<input type="file" id="nombre" name="nombre" placeholder="nombre"/>
En esta imagen ya seleccionamos un archivo

Ahora vamos agregar más campos a nuestro formulario.
<form> 

<label for="nombre">Nombre :</label>
<input type="text" id="nombre" name="nombre" placeholder="nombre"/>
<br><br>
<label for="apellido">Apellido :</label>
<input type="text" id="apellido" name="apellido"
placeholder="apellido"/>
<br><br>
<textarea id="comentario " placeholder="Ingrese comentario"
name="comentario"></textarea>
</form>
La etiqueta <textarea> </textarea> esta etiqueta nos permite agregar comentario a nuestro
formulario.
<textarea id="comentario " placeholder="Ingrese comentario"

name="comentario"></textarea>
Si necesitamos que la caja sea más grande utilizaremos los siguientes atributos como cols y rows
Ahora agregamos una etiqueta para comentario

Agregamos una etiqueta de tipo submit esto nos permite enviar toda la información que se
encuentra en el formulario.
<input type="submit"/>
Ahora debemos especificar a donde queremos que los datos se van almacenar.
El atributo action define la acción a realizar cuando se envía el formulario.
El atributo method especifica el método HTTP (GET o POST) que se va a usar cuando se envíen los
datos
<form action="/formulario" method="get">
<form action="/formulario" method="post">
¿Cuándo usar GET?
Cuando usamos este método los datos serán visibles en la URL de la página de envío.
La longitud de una URL es limitada (2048 caracteres)
Ejemplo Get
<form action="/formulario" method="GET">

Hacemos click en el botón enviar y el resultado es el siguiente: En la URL aparecen los datos
¿Cuándo usar POST?
Siempre que haya datos confidenciales hay que usar POST. Este método no muestra la información
en la URL y no tiene limitación de tamaño.
Ejemplo de POST:
<form action="/formulario" method="post">

Hacemos click en el botón enviar y el resultado es el siguiente: En la URL NO aparecen los datos
¿Dónde podemos ver la información enviada?
Nos posicionamos en el browser, hacemos click derecho y seleccionamos la opción Inspeccionar

Después que se abre seleccionamos red o network e inspeccionamos y en la opción Carga útil, ahí
es donde podemos visualizar la información enviada.
Nota: La información enviada ya sea por “Get o Post” no es segura, dado que de igual forma
podemos ver la información, para tener seguridad en los datos debemos utilizar certificados que
nos permiten encriptar los datos
Asignación de valores por defectos a los formularios es “value”
<input value="Nombre_persona" type="text" id="nombre" name="nombre"

placeholder="nombre"/>
<br><br>
<label for="apellido">Apellido :</label>
<input value="Apellido_persona" type="text" id="apellido"
name="apellido" placeholder="apellido"/>
<br><br>
Ejemplo value, resultado
Al enviar la información no da como resultado lo siguiente: guarda el valor por defecto
BOTONES
El problema con el siguiente <input type="submit"/>

Es que no podemos agregar etiquetas dentro de esta, por eso utilizaremos lo siguiente:
<button type="reset">Enviar</button>
El “reset” nos deja los campos con los valores definidos anteriormente
Al hacer click en el botón enviar, esta borra los datos ingresados y lo deja con los valores
predefinidos anteriormente.
Cuando creamos un botón submit este por defecto toma el valor del submit que vimos
anteriormente
Resumen de botones:
<button type="button">Tipo Boton</button>


<button type="reset">Tipo reset</button>

<button type="submit">Tipo submit</button>


Lo interesante de las etiquetas de <button> </button> es que podemos incluir más etiquetas
dentro de ellas y se pueden personalizar.
Las listas
<ul> </ul> Es una lista no ordenada
<li> </li> Es un ítem de la lista
Ejemplo
<ol> </ol> Es una lista ordenada
Ejemplo 2
Para este ejemplo si queremos cambiar el valor que queremos comenzar, debemos hacer lo
siguiente: agregamos un value y le definimos un valor para este ejemplo value=”30”
<ol>
<li value="30">Lista numero 1</li>
<li>Lista numero 2</li>
</ol>
Anidar listas
<ol>
<li value="30">Lista numero 1</li>
<li>
<ol>
<li>Sub lista 1</li>
</ol>
</li>
</ol>
Agregamos una lista ordenada <ol></ol> y dentro de ella un ítem de la lista <li></li>
Ahora para modificar la sub lista y que en ella aparezcan letras se debe agregar lo siguiente:
En la sub lista, en la etiqueta <li> agregamos style
<ol>
<li style="list-style-type:lower-alpha">Sub lista 1</li>
</ol>
Las tablas estas se dividen filas y columnas donde cada columna puede tener una cabecera y un
pie, estas las podemos listar, como también podemos distribuir el contenido dentro de ella etc.
Para definir una tabla utilizaremos las etiquetas y atributo <tabla></tabla>
Para definir una tabla utilizaremos las etiquetas y atributo <tr></tr> (table row)
Ejemplo
<table>
<tr>
<th> Producto </th>
<th> Precio </th>
</tr>
</table>
El resultado de agregar las etiqueta <table> y <tr>
La etiqueta <td> define la celda de una tabla que contiene datos.
Ahora agregaremos otra etiqueta <td></td> (table data cell)
Ahora agregamos <td>
<tr>
<td> Arroz </td>
<td> 450 </td>
</tr>
El resultado de esto es el siguiente:
Agregamos más información y el resultado es el siguiente:

Para que nuestra tabla quede con mejor apariencia utilizaremos una pequeña pincelada de css
En la cabecera <head> </head> incluiremos los siguiente:
<style>
table,tr,th,td{
border:1px solid black;
}
</style>
El resultado de esto es el siguiente:
Nota: Ahora nuestra tabla se encuentra en un recuadro
Ahora a la tabla le agregamos un ancho de la siguiente manera:

<table style="width: 300px;">
Las etiquetas <thead> </thead> nos permite agrupar las cabeceras de una tabla
Las etiquetas <tbody> </tbody> nos permite agrupar el contenido de las celdas
Las etiquetas <tfood> </tfood> nos permite mostrar el el resultado de una columa
<thead>
<tr>
<th> Producto </th>
<th> Precio </th>
</tr>
</thead>
<tbody>
<tr>
<td> Arroz </td>
<td> 450 </td>
</tr>
<tr>
<td> Fideos </td>
<td> 550 </td>
</tr>
</tbody>
Aquí agregamos la etiqueta <tfoot></tfoot>

Curso HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso HTML

Cargado por

Copyright:

Formatos disponibles

CURSO HTML

Hyper Text Markup Languaje

Le indica al explorador que y como mostrarlo.

Las etiquetas indican párrafos, títulos, vínculos etc.

COMO FUNCIONA HTML?

Es como una estructura de árbol

Esta es la Este es el nodo raíz o Padre

Estos son los nodos hijos

¿Qué son los atributos en HTML Ejemplos?

¿Qué es una propiedad y un atributo de una etiqueta HTML?

Crear una carpeta llamada “HTML”

Después guardamos los cambios y lo ejecutamos para ver el resultado en el browser.

Le hacemos doble click al archivo index.html y nos abre el browser

Le indica al motor de búsqueda lo que necesita el usuario, es importante poner un título

Guardamos con Ctrl + s en Visual Studio code y actualizamos el browser

Etiquetas <p> </p> nos permite agregar parrafos

Nota: Esta etiqueta nos permite también separar secciones

Nota: Se pueden hacer más de un salto de línea

Guardamos y actualizamos el browser.

La imagen ahora es más pequeña que en las imágenes anteriores.

En esta imagen el alto(height) es más pequeño que el ancho(width)

Nota: Lo ideal es mantener un estándar de la imagen para que no se vea deformada.

Etiquetas <form> </form> Esta etiqueta es un formulario en la cual podemos recopilar

El <input> se puede mostrar de varias maneras, según el atributo type.

Utilizando etiquetas <form></form>, <input /> , resultado

Aquí agregaremos lo siguiente:

<form>

Propiedad name , placeholder, type

Placeholder: Es el texto que aparece dentro de un campo de texto en un formulario

Ejemplo1 : <input type=”submit”

<input type="submit" id="nombre" name="nombre" placeholder="nombre"/>

<input type="radio" id="nombre" name="nombre" placeholder="nombre"/>

Ejemplo 3: <input type=”text”

<input type="text" id="nombre" name="nombre" placeholder="nombre"/>

Existen más tipos como password, checkbox, file,mail etc.

Ejemplo 4: <input type=”password”

<input type="password" id="nombre" name="nombre" placeholder="nombre"/>

Ejemplo 5: <input type=”checkbox”

<input type="checkbox" id="nombre" name="nombre" placeholder="nombre"/>

<input type="file" id="nombre" name="nombre" placeholder="nombre"/>

En esta imagen ya seleccionamos un archivo

<form>

<textarea id="comentario " placeholder="Ingrese comentario"

Ahora agregamos una etiqueta para comentario

El atributo action define la acción a realizar cuando se envía el formulario.

<form action="/formulario" method="get">

<form action="/formulario" method="post">

¿Cuándo usar GET?

La longitud de una URL es limitada (2048 caracteres)

<form action="/formulario" method="GET">

¿Cuándo usar POST?

<form action="/formulario" method="post">

¿Dónde podemos ver la información enviada?

Nos posicionamos en el browser, hacemos click derecho y seleccionamos la opción Inspeccionar

Asignación de valores por defectos a los formularios es “value”

<input value="Nombre_persona" type="text" id="nombre" name="nombre"

Al enviar la información no da como resultado lo siguiente: guarda el valor por defecto

El problema con el siguiente <input type="submit"/>

<button type="button">Tipo Boton</button>

<button type="submit">Tipo submit</button>

<ul> </ul> Es una lista no ordenada

<li> </li> Es un ítem de la lista

En la sub lista, en la etiqueta <li> agregamos style

Para definir una tabla utilizaremos las etiquetas y atributo <tabla></tabla>