Curso de Desarrollo Web - Nivel Básico.

Introducción.
¿Qué HTML?
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el lenguaje
de marcado que usamos para estructurar y dar significado a nuestro contenido web, por ejemplo,
definiendo párrafos, encabezados y tablas de datos, o insertando imágenes y videos en la página.
¿Qué CSS?
Es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML, por
ejemplo, establecer colores de fondo y tipos de letra, y distribuir nuestro contenido en múltiples
columnas.
¿Qué JavaScript?
Es un lenguaje de secuencias de comandos que te permite crear contenido de actualización
dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás. (Está bien, no
todo, pero es sorprendente lo que puedes lograr con unas pocas líneas de código JavaScript).
SublimeText
SublimeText es un editor de texto y editor de código fuente. Está escrito en C++ y Python para los
plugins. Desarrollado originalmente como una extensión de Vim, con el tiempo fue creando una
identidad propia. Aún conserva un modo de edición tipo vi llamado Vintage mode.
Desarrollo Web:
Consiste en la construcción de portales o páginas web, haciendo uso de lenguajes de

maquetación (HTML), estilos (CSS), animaciones y efectos (JS).
Desarrollador Web:
Es un programador especializado o dedicado de forma específica, en desarrollo de aplicaciones

web o aplicaciones que se ejecutan mediante HTTP desde un servidor o navegador web.
<!DOCTYPE html> — el tipo de documento. Es un preámbulo requerido. Anteriormente, cuando
HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto
de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía
significar la verificación automática de errores y algunas otras cosas de utilidad. Sin embargo, hoy
día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para
que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.
<html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página

entera y, a veces, se le conoce como el elemento raíz (root element).
<head></head> — el elemento <head>. Este elemento actúa como un contenedor de todo aquello
que quieres incluir en la página HTML que no es contenido visible por los visitantes de la página.
Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que
aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del
juego de caracteres, etc.
<title></title> — el elemento <title> establece el título de tu página, que es el título que aparece
en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para
describir la página cuando es añadida a los marcadores o como favorita.
<body></body> — el elemento <body>. Encierra todo el contenido que deseas mostrar a los
usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio
reproducibles, y demás.
Como ya sabemos el <body> es donde se desarrolla el cuerpo de nuestra web, aquí les dejo un
esquema de la estructura web, donde aparecen unos elementos que desarrollaremos en clases
posteriores
Pueden evidenciar que en todo el lenguaje los elementos tienen una sintaxis <html> </html>
donde:
* <html> Expresa el inicio del código html
* </html> Expresa el fin de un código html
Ejemplo 1:
Para escribir un párrafo utilizamos
<p></p>
donde:
* <p> Expresa el inicio de un párrafo
* </p> Expresa el fin de un párrafo
Las partes principales del elemento son:
La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por
paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener
efecto el elemento —en este caso, dónde es el comienzo del párrafo—.
La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de
cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso
dónde termina el párrafo—.
El contenido: este es el contenido del elemento, que en este caso es sólo texto.
El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al

elemento.
Este elemento como pueden notar, no presenta una etiqueta de cierre </img>, pero si presenta
una serie de argumentos. Esto en html es posible con algunos elementos.
El atributo src="" es la ubicación en nuestro código fuente de la imagen a mostrar en nuestra

web.
El atributo alt="" es el nombre que mostrará nuestra web, en caso de presentar problema con la
carga de la imagen.
El elemento <a> </a> se utiliza para crear hipervínculos en la web, donde el texto que se ubica
entre las etiquetas, lo muestra en la web, solo nos queda agregar un atributo con la dirección a
donde no enviará al darle clic
Con el atributo href="" podemos agregar la dirección a donde quiero que me dirija el hipervínculo
de la web
Otros elementos con una sola etiqueta tenemos <audio> <video>
Existen formatos preestablecidos para html, entre ellos tenemos:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Al incluir el contenido, podremos evidenciar como cambia el tamaño de los textos en nuestra web
Ajustes Visuales en CCS3.
Primeramente debemos crear una carpeta, con las siguiente subcarpetas, donde alojaremos los
códigos según su tipo de lenguaje y una para las imágenes a incluir en nuestra web.
debemos evitar nombres en Mayúscula, MAYÚSCULA, con acentos o símbolos.
Buscamos en el menú Archivo - Abrir Carpeta y buscamos la carpeta raíz, es decir, donde se
encuentran estas subcarpetas creadas.
Aquí podemos evidenciar como aparecen nuestras carpetas en sublimetext.
Creamos un archivo que llamaremos index.html, el cual contendrá todo el código html de la web.
obtendremos el siguiente resultado. guardamos los cambios ejecutado y abrimos con el navegador
Primero agreguemos un párrafo en el body de nuestra web. La función Lorem ipsum, se encuentra
en todos los editores de texto, con la finalidad de hacer pruebas son un texto predeterminado.
Ejemplo: escribimos dentro del <p>lorem</p> y tabulamos (sangría o el botón que se encuentra
sobre la mayúscula sostenida 🔁)
Así de esta manera podemos ver nuestro párrafo en la web.
Incluir código CSS3

Para incluir CSS3:
- Primero debemos crear un nuevo archivo.
- Cambiamos la sintaxis a CSS
- Luego agregamos lo que se muestra en la imagen anterior
- Guardamos el archivo estilo.css en la carpeta css
En el lenguaje css la sintaxis cambia, con este código estamos cambiando el estilo de los párrafos
en toda nuestra web, colocando el texto de color rojo
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en
este caso, los elementos <p>). Para dar estilo a un elemento diferente, solo cambia el selector.
Declaración
Una sola regla como color: red; específica a cuál de las propiedades del elemento quieres dar
estilo.
Propiedades
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una
propiedad del elemento <p>). En CSS, seleccionas qué propiedad quieres afectar en tu regla.
Valor de la propiedad
A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad, para
elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos
valores para color además de red).
Nota las otras partes importantes de la sintaxis:
- Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ({}).
- Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.
- Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.
Solo nos falta hacer referencia del CSS en en HTML, esto se realiza en el <head> ya que es la parte
de la web que no se muestra en el navegador.
<link href="css/estilo.css" rel="stylesheet" type="text/css">
Utilizamos el elemento link, para hacer referencia a un archivo que se encuentre en nuestra
carpeta local.
Luego usamos el atributo href para dar la ubicación de nuestro archivo carpeta css y el archivo
estilo.css.
Guardamos los cambios, actualizamos el navegador y obtenemos lo siguiente:

Le incluimos otras propiedades:
p{
color: red;
width: 500px;
border: 1px solid black;
}
width: Ancho del texto 500 píxeles
border: el borde del recuadro de 1 pixel de ancho y de color negro (solid black)
Obtenemos como resultado

Así como se personalizan las propiedades de un elemento podemos hacerlo con otros elementos
Primera forma CSS
Primera forma html (incluimos tres elementos p, li y h1)

Vista en el Navegador
Segunda forma
El HTML y las vista en el navegador se mantienen iguales, pero esta segunda forma nos permite
personalizar los elementos por separados. Ejemplo:
resultado
Como todos los elementos html tienen atributos, también cuentan con propiedades de CSS que
aplicar desde el archivo de estilos.css
Ajustes y Elementos Dinámicos con JS
La primera forma de insertar JavaScript en HTML es directa. Puedes hacerlo utilizando la etiqueta
<script> </script> que debe envolver todo el código JS que escribas. Se puede agregar el código JS:
entre las etiquetas <head>

entre las etiquetas <body>
Dependiendo de dónde agregues el código JavaScript en tu archivo HTML, la carga será diferente.
Por lo general se recomienda agregarlo en la sección <head> para que permanezca separado del
contenido de tu archivo HTML. Pero colocarlo dentro de <body> puede ayudar a mejorar la
velocidad de carga, ya que el contenido del sitio web se cargará más rápido, y solo después de eso
se procesará el JavaScript. Para este ejemplo, echemos un vistazo al siguiente archivo HTML que
debe mostrar la hora actual:
Lugar donde agregar lenguaje JS
En este momento, el código anterior no contiene JavaScript y, por lo tanto, no puede mostrar la
hora. Podemos agregar el siguiente código para asegurarnos de que muestre la hora correcta:
cambien la etiqueta h1 por h2, para que el color cambie a negro
Ahora intentemos agregar el código en un archivo aparte, un .js en su carpeta personal
Cada desarrollador puede escribir desde cero estas líneas de código, pero en la web tenemos la
opción de copiar fracciones de códigos, para ejecutar acciones específicas (hora, carrusel de
imágenes, efectos, otros)
Si creamos un nuevo con el siguiente código, podemos hacer textos parpadeantes
Le hacemos referencia en el <head>
Y lo llamamos en el body, esta es otra forma de anexar códigos js

Observamos los resultados, la palabra hola debe parpadear
con todo esto podemos iniciar a conocer el código y sintaxis de js en el mismo html, esto con la
intención de ir familiarizándonos con el lenguaje y luego creamos archivos independientes para
este tipo de código
Agregamos la función "Alert", en Js nos permite generar mensajes de alerta, en cualquier ocasión,
en este caso al iniciar la web se muestra
Resultado del Código

Agregamos el elemento <a> que nos permite hacer enlaces e incluimos en sus atributos el
lenguaje js. Le otorgamos la orden que al hacer clic ejecute la función utilizada para generar
mensajes de alertas
Recordemos que en el atributo href="#", el # puede ser sustituido o reemplazado por la dirección
de un archivo y cuando haga clic en el enlace, automaticamente se inicie la descarga
Obteniendo los siguientes resultados
El elemento <marquee> en html, nos permite hacer un cintillo móvil, donde se coloca
informaciones relevantes o actualizaciones diarias (este elemento se encuentra la página del
banco de venezuela, donde se muetra los valores actuales de las divisas)
Resultado
Incluyendo este script, podemos obtener la fecha actual, concatenado con cualquier texto
tendremos información para nuestra web
Resultado
Contenido Programático
Mi Primera Web
En este coninido se desarrolla la estructura básica de una página web y elementos importantes
Los comentarios: son fragmentos del código obviados por el navegador, es aquí donde el
desarrollador ubica orientaciones, identifican porque su elementos es el siguiente 

<html lang="es">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="Shortcut Icon" type="image/x-icon" href="imagenes/favicon.svg" />
Aquí tenemos detallada por comentarios, la estructura básica de una web
Aquí se incluye:
➡️header, elemento que corresponde al menú de navegación de nuestra web
➡️footer, también conocido como pie de página.


<link rel="Shortcut Icon" type="image/x-icon" href="imagenes/favicon.svg" />
(Esta imagen puede ser formato jpg, png, ico, svg, otros y su resultado se muestra en la siguiente
imagen)
La estructura de nuestra web se visualiza en el navegador de la siguiente manera, solo nos queda
darle estilo y animación con CSS y JS
Una vez creada la estructura de la web en el archivo index.html , ahora podemos copiarlo y
pegarlo creando todas las ramificaciones de nuestra web, como se muestra en esta imagen
debemos tener presente:
- En los nombres de los archivos y creados, imágenes, html, audios, otros. Se recomiendo utilizar
letra minúscula y evitar el uso de la ñ
- La carpeta que contiene toda la web, recibe el nombre de Carpeta de Raíz o Principal
Aquí podemos ir agregando la dirección de los hipervínculos

Ejemplo 1: si el documento se encuentra en la misma carpeta (como es mi caso), se coloca el
nombre del archivo directamente <li><a href="index.html">Inicio</a></li>
De esta forma cuando se haga clic en el link de inicio en nuestra web, nos mostrará en pantalla el
archivo index
Ejemplo 2: si el documento se encuentra en una subcarpeta antes, se coloca el nombre del archivo
y se antepone un punto <li><a href="./index.html">Inicio</a></li>
Y para regresar a la carpeta principal o de raíz se anteponen dos puntos <li><a

href="../index.html">Inicio</a></li>
Ejemplo 3: si el documento se encuentra en una subcarpeta despues, se coloca el nombre de las

subcarpetas separadas por un "/" <li><a href="/ejemplo/index.html">Inicio</a></li>
Al abrir el index.html con el navegador, se muestra la web y los link cambian a color azul. Al ir dar
clic uno a uno, podemos ir viendo la variación de la web en los dos elementos que señalo
Quedando de la siguiente manera

Curso de Desarrollo Web - Nivel Básico.

Cargado por

Información del documento

Descripción original:

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 de Desarrollo Web - Nivel Básico.

Cargado por

Copyright:

Formatos disponibles

Introducción.

Consiste en la construcción de portales o páginas web, haciendo uso de lenguajes de

Es un programador especializado o dedicado de forma específica, en desarrollo de aplicaciones

<html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página

El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al

El atributo src="" es la ubicación en nuestro código fuente de la imagen a mostrar en nuestra

Otros elementos con una sola etiqueta tenemos <audio> <video>

Existen formatos preestablecidos para html, entre ellos tenemos:

debemos evitar nombres en Mayúscula, MAYÚSCULA, con acentos o símbolos.

Incluir código CSS3

<link href="css/estilo.css" rel="stylesheet" type="text/css">

Guardamos los cambios, actualizamos el navegador y obtenemos lo siguiente:

width: Ancho del texto 500 píxeles

Obtenemos como resultado

Primera forma CSS

Primera forma html (incluimos tres elementos p, li y h1)

Ajustes y Elementos Dinámicos con JS

entre las etiquetas <head>

Y lo llamamos en el body, esta es otra forma de anexar códigos js

Resultado del Código

<!--UTF-8 (8-bit Unicode Transformation Format) es un formato de codificación de caracteres

<meta name="viewport" content="width=device-width, initial-scale=1">

Aquí podemos ir agregando la dirección de los hipervínculos

Y para regresar a la carpeta principal o de raíz se anteponen dos puntos <li><a

Ejemplo 3: si el documento se encuentra en una subcarpeta despues, se coloca el nombre de las

También podría gustarte