CURSO DE HTML Y CSS
Gustavo adolfo grueso
MENU
Conceptos básicos
Que es HTML
Etiquetas HTML
LOS EDITORES DE TEXTO
PROGRAMA CON HTML
Etiquetas HTML
Conceptos básicos
Debemos tener claro algunos conceptos antes de iniciar a crear una pagina web. Por
ello te invito a conocer los aspectos claves en este fin.
Hola soy Gust
Internet es un conjunto descentralizados de redes interconectadas, que permiten que
muchas redes puedan incluirse en la red con un protocolo TCPIP, esto quiere decir en
Te invito a ver el siguiente video para aclarar los conceptos básicos en esta
pocas palabras que recibe todas las redes.
Guía menciona-dos, para esto debes dar clic sobre el tutor para aclara los con-
ceptos
TCPIP Es un protocolo de conexión, la forma como se entienden los sistemas, este es
compatible con cualquier sistema operativo por eso permite que cualquier ordenador u
otro dispositivo se pueda conectar entre si
Web: Sistema de gestión de información más popular para la trasmisión de datos a
través de internet
HTTPS Este es un protocolo de transferencia de hipertexto que se utiliza mucho para
acceder a páginas web
TCP Este es un protocolo de transmisión de información muy utilizado para transferir
tipos de datos en paginas web.
FTP este es un protocolo de red para la transferencia de archivos entre sistemas conec-
tados a una red
Prueba tu conocimiento
Teniendo en cuenta la información que consultaste en la sesión anterior, resuelve la siguiente prueba
Nombre completo
Programa de formacion
Correo electronico
Telefono
Selecciona las opciones correctas para las siguientes afirmaciones
HTTP Seleccione las Capas del protocolo TCPIP
Se utiliza para guardar información web Aplicación
Se utiliza para ingresar a una pagina web Transporte
Se utiliza para transferencia de datos Internet
Se utiliza para transferir hipertexto Conexión
Enviar formulario
QUE ES HTML Historia de HTML
“HTML es un lenguaje de marcado que se El origen de HTML se remonta a 1980,
Clic en el tutor para ampliar la
utiliza para el desarrollo de páginas de Inter- cuando el físico Tim Berners-Lee, traba- definición
net. Se trata de la siglas que corresponden a jador del CERN (Organización Europea
HyperText Markup Language, es decir, Len- para la Investigación Nuclear) propuso
guaje de Marcas de Hipertexto”. un nuevo sistema de “hipertexto” para
compartir documentos.
Los sistemas de “hipertexto” habían sido
¿Para qué me sirve? desarrollados años antes. En el ámbito de
la informática, el “hipertexto” permitía
que los usuarios accedieran a la infor-
mación relacionada con los documentos
Se usa indicar como va ordenado el conteni- electrónicos que estaban visualizando.
do de una página web. Esto lo hace por medio De cierta manera, los primitivos sistemas
de las marcas de hipertexto las cuales son eti- de “hipertexto” podrían asimilarse a los
quetas conocidas en inglés como tags. enlaces de las páginas web actuales.
¿Cómo funciona?
A partir de etiquetas las cuales son fragmen-
tos de texto rodeados por corchetes angulares
< > , que tienen funciones y usos específicos y
se utilizan para escribir código HTML.
Etiquetas HTML
Una estructura HTML se empieza con la etiqueta <html> y aca-
En este curso utilizaremos una serie de etiquetas en la construc- ba con </html>. Todo lo que esté en medio será la página web.
ción practica de una pagina web, para esto te dejo las etiquetas Dentro de <html></html> se encuentran 2 partes diferenciadas.
básicas que se deben tener en cuenta en el momento de realizar La primera <head></head> es la cabecera de la página. Aquí
las actividades planteadas. irán cierta información que no es directamente el contenido
de la página. Aquí se pone el título de la página, los metadatos,
<html> (Abrimos el documento) estilos, código javascript (todo esto se estudiará en capítulos
<head> (Abrimos el head) venideros). La primera que se suele estudiar es <title></title>,
</head> (Cerramos el head) que indica el título de la página (lo que el navegador pone en la
<body> (Abrimos el body) parte superior izquierda).
</body> (Cerramos el body)
</html> (Cerramos el documento) La segunda parte es <body></body>. Aquí va propiamente el
<H1> (Encabezado principal) contenido de la página: fotos, párrafos, formularios, etc. Por
<br /> (Salto de línea) ejemplo, siguiendo con el ejemplo de la página anterior, el si-
<title>: para definir el titulo de una página guiente código, podemos cambiar el título de la página.
<link> y <style>: ambas van dentro del <head>, y sirven para
aplicar estilos CSS
<h1>, <h2>, <h3>….<h6>: encabezados
<table>, <tr> y <td>: son las tablas, las filas y las celdas
<div>: es un elemento «contendedor»
<a>: para añadir enlaces
<img> es la etiqueta con la que se insertan las imágenes
<li>, <ol>, <ul>: son las etiquetas que controlan las listas orde-
nadas y desordenadas
<b>: convierte el texto a negrita
<i>: lo mismo pero para aplicar cursiva al formato de un texto
<p>: con esta etiqueta determinamos un texto de párrafo
<br />: esta otra hace un salto de línea simple.
LOS EDITORES DE TEXTO
Es necesario que para avanzar en este curso utilicemos algunos de estos editores
de texto, los cuales también son considerados IDES, queriendo decir que usted
podrá hacer mucho más con estos que simplemente escribir código.
Este es el momento para conocer los editores más frecuentes en el mercado y lue-
go seleccionaremos el se adapta mejor a las necesidades del trabajo a desarrollar.
Sublime Text
Sublime Text es un editor de texto y editor de código fuente está escrito en C++ y
Python para los plugins.1Desarrollado originalmente como una extensión de Vim, con
el tiempo fue creando una identidad propia, por esto aún conserva un modo de edición
tipo vi llamado Vintage mode.2 Descarga para PC
Se puede descargar y evaluar de forma gratuita. Sin embargo no es software libre o de
código abierto3y se debe obtener una licencia para su uso continuado, aunque la ver-
sión de evaluación es plenamente funcional y no tiene fecha de caducidad.
Descarga para movil
PROGRAMA CON HTML
Ya tenemos instalado un editor de texto y conocemos las etiquetas básicas de HTML, ¿Como realizaremos la siguiente actividad?
este es el momento de aplicar nuestros conocimientos e iniciar a programar.
1. Lee detalladamente la explicación
2. Observa el ejemplo
3. Escribe en el cuadro de texto el código contenido en el ejemplo
4. Abra el editor Sublime Text y cree un FOLDER llamado Mantenimiento
5. Dentro del folder mantenimiento cree un archivo llamado index.html
6. Digite el código en el editor de código Sublime Text
7. Pruebe el código abriéndolo con el explorador de su preferencia
8. Grade los avances hasta terminar las sesiones
9. Entregue al instructor sus avances al finalizar
Ejercicios
Ahora desarrollaremos las actividades que se plantean a continuación, primero se encuentra la explicación, segundo un ejemplo desa-
rrollado y en el tercer momento un cuadro de texto para copiar el código.
Nota: Debes concatenar
Estructura básica de una pagina
Toda página Web utiliza esta estructura
básica. Los puntos suspensivos (...) mues-
tran dónde insertaría la información adi-
cional. Es muy importante que siempre
que se inicie una página se realice me-
diante la estructura.
Titulo y párrafo
<title>: Establece el título de la página
Web, vamos a insertar el titulo “Manteni-
miento de Equipos de Computo” y cerra-
mos la etiquete </title>
<p>: Indica un párrafo, en este momento
seleccionaremos un párrafo que indique
que es un mantenimiento de equipos de
computo y lo pegaremos entre las etique-
tas de párrafo, al finalizar se cierra la eti-
queta </p>
<H1>: Encabezado principal
<br>: salto de linea
<link>: Define la relación entre un documento y
un recurso externo
<style>: Define un estilo para la información de
un documento
<link> y <style> van dentro del <head>
<h1>,<h2>,<h3>: son para títulos, subtítulos o
encabezados
<div>: es un elemento «contendedor»
<table>, <tr> y <td>: son las tablas, las filas y las
celdas
<li>, <ol>, <ul>: son las etiquetas que controlan
las listas ordenadas y desordenadas
<a>: es para añadir enlaces
<img>: es para insertar imágenes
<hr>: es un salto de página, pero añadiendo una
linea
<p>: es para añadir un texto de parrafo
<i>: convierte el texto en cursiva
<b>: convierte el texto en negrilla
<!–…–>: es para hacer un comentario sin que
afecte la pagina
<button>: es para hacer un boton clickeable
<cite>: Define el título de un trabajo
<span>:Define una pequeña sección de un do-
cumento para poder resaltarlo
<map>: Define un mapa de imagen del cliente
<area>: Define un área dentro de un mapa de
imagen
<iframe>: Define un frame en línea osea una
pagina
Ejercicio practico de HTML
En este espacio realizaremos un ejercicio práctico de uso de las Etiquetas THML,
basado en un video tutorial de YouTube, este ejercicio practico tiene como fina-
lidad el afianzar en el conocimiento del entorno practico de Sublime Text e inte-
ractuar con las etiquetas que aprendimos en actividades anteriores.
https://www.youtube.com/watch?v=L4WL960wT7E
Referentes bibliograficos
https://codigofacilito.com/articulos/que-es-html
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
https://uniwebsidad.com/libros/xhtml/capitulo-1/breve-historia-de-html
https://www.haciaelautoempleo.com/etiquetas-html-basicas/
