Curso de HTML1

CURSO DE HTML
(ARQUITECTURA DE LA PAGINA WEB)

El Lenguaje de Marcas de Hipertexto o en sus siglas en ingles HTML (HyperText Markup
Language) es un lenguaje de programación que ayuda al desarrollo estructural de una
página web mediante un programa que ejecute lo ya mencionado.
Los pasos para entender de qué manera se constituye la creación de una página web
mediante HTML, van desde el programa a utilizar y la funcionalidad de cada código que
estaremos usan. En este caso, el programa a utilizar se llama SublimeText, allí se pondrá
en práctica los códigos o el lenguaje de programación a utilizar. El primer paso es, crear un
archivo mediante el programa para guardar todas las modificaciones que realicemos
mediante el programa, el cual se guardara como “index.html”.
El .html es el tipo de archivo que se ejecutara con el navegador, el cual, procesara los
códigos utilizados en SublimeText y se ilustrara en el navegador como una página web
cualquiera. Esto solo es una forma de ver nuestro trabajo.
Como se muestra en la imagen, se tiene que entender que el lenguaje de programación en
HTML son etiquetas con diversos usos y utilidades, el cual van a formando la estructura de
cada elemento que vaya a conformar nuestra página web. En este caso, para abrir una
etiqueta se utiliza el símbolo “<” el cual va estar presidida por el nombre de la etiqueta
que queremos utilizar “<html>”, entonces, las etiquetas lo que van hacer es moldear los
elementos dentro de ella antes de cerrarla, que, en este caso, para cerrar una etiqueta se
utiliza “</” presidida con el mismo nombre de la etiqueta. Ahora, cada etiqueta, a su vez
tiene una tributo o característica de este objeto, y estos atributos tienen un valor el cual
se pone entre comillas
<etiqueta atributo= “valor”> </etiqueta>

<h1 color= “rojo” tamaño= “grande” bordes “negros”> </h1>
 <!DOCTYPE htm> Presidida de la etiqueta de abajo para dar forma a la página web
 <html> </html> Es la etiqueta donde estará toda la página web
 <head> </head> Estará lo que no vemos en la página web o el nombre de la página
en la pestaña del navegador
 <title> </title> Etiqueta de texto para colocar títulos
 <body> </body> etiqueta que se utiliza para el cuerpo de la pagina
 <h1> </h1> Etiqueta para texto que indica el tamaño de la fuente
Nota: SEO, acrónimo de Search Engine Optimization -en castellano optimización de

motores de búsqueda-, son el conjunto de acciones y técnicas que se emplean para
mejorar el posicionamiento (la visibilidad) en buscadores de un sitio web en Internet,
dentro de los resultados orgánicos en los motores de búsqueda
Nota: Al seleccionar los números que están presididos por la h, es más fácil cambiarlos en
simultaneo cuando, los seleccionas a ambos con el mouse apretando “Ctrl”
 <p> </p> Etiqueta para párrafos

 <b> </b> Etiqueta de estilo de texto “negrita”
 <i> </i> Etiqueta de estilo de texto “ITALICA”
 <strike> </strike> Etiqueta de estilo de texto “rayada”
 <small> </small> Etiqueta de estilo de texto “pequeña”
Nota: Hay etiquetas que completa la linea y otras que se ajustan

 <a href= “”> </a> Etiqueta para crear enlace y redirigirte a otra pagina
Nota: Hay dos tipos de enlace o rutas, las locales (la que tenemos nosotros) y la externas
(las que no tenemos guardada de forma local), y esto lo que quiere decir es que, si colocas
Facebook.com, en vez de redirigirte a la página de Facebook, no lo hara, porque lo que
esta haciendo ese enlace es redirigirte a un enlace local que no tenemos, la diferencia de
una u/o la otra está en que, para redirigirte a una página web se necesita colocar
“https//:” (HyperText Transfer Protocol Secure) que es el protocolo seguro de
transferencia de hipertexto, allí, en este caso, si te redirige a la página oficial de Facebook.
Nota: Cuando quiere redirigirte a un enlace local que este en otra carpeta, bastara con
colocar <a href= “nombre de la carpeta/index.html” </a> y cuando esta en otro carpeta
pero a la vez, en la misma y quiere volver al enlace inicial, bastara con colocar ../ y esta se
puede repetir las veces que quieras retroceder al igual cuando quieras entrar a varias
carpetas <a href= “nombre de la carpeta/nombre de la segunda carpeta/index.html”
</a>
 <br> Etiqueta que completa la línea
Nota: Esta etiqueta se utiliza cuando quieres tener más párrafos, y que completa la línea,
ya que, al introducir una etiqueta o código, estos tienen un espacio que puede abarcar
todo el espacio o un espacio determinado, para que esto no ocurra, se utiliza
 target= "_blank" esto no es una etiqueta sino un atributo que se le da.
Nota: Este atributo sirve para redirigir a otra página sin necesidad de sacarte de la pagina
inicial, es decir, para abrir un enlace en otra pestaña. Este atributo se utiliza de la siguiente
manera
<a href= “https//:Facebook.com” target= “index.html”> </a>
 <ul> </ul> Etiqueta para formar una lista sin orden (con puntos)
 <li> </li> Etiqueta para mostrar los elementos de la lista
 <ol> </ol> Etiqueta para formar una lista por números
<ol>
<li> Agua </li>

<li> Caramelos </li>
<li> Gasolina </li>
<li> Gasolina </li>
<li> Carro 0KM </li>
</ol>
Nota: Estas etiquetas se utiliza para formas listas, la etiqueta <ul> </ul> para formar una
lista pero sin orden (con puntos), la etiqueta <li> </li> para cada elemento que conforma
la lista y <ol> </ol> para hacer que la lista se ordene pero de forma numérica.
 <img src=””> </img> Etiqueta para insertar imágenes

 <img src=”” width=”” height=””> </img> Etiqueta para modificar los pixels
 <video src=””> </video> Etiqueta para insertar video
 <audio src=””> </audio> Etiqueta para insertar audio
 <div> </div> Etiqueta para ordenar elementos en HTML
Nota: Para las etiquetas de <div> </div> estos son, fundamentalmente útiles a la hora de
desarrollar una página web, sin embargo, esta etiqueta tiene mucho más potencial al
momento de trabajar con CCS que con HTML. Y por otra parte, cuando se maneja las
etiquetas de audio y video, siempre se debe de colocare el atributo de controls para que
se muestre el reproductor, y en audio, siempre se debe de colocar el formato de audio
que se quiere introducir.
 <form> </form>
 <Input type=”” name=””>
Nota: En los atributos de la etiqueta, sirve para indicar al lenguaje de programación para
qué sirve el input, el inputo por lo general se utiliza para captar cierta información en
específico que introduzca la persona que interactúa con la página, y los atributos son los
indicadores que muestran como el inputo va interactuar con dicho usuario, para el caso
del name, se indica que tipo de información va a captar, y en el type, como lo va a captar.
<form> <input type=”Password” name=”Contraseña”> </form>

 <Input type=”email” name=””> Etiqueta para colocar correo en la casilla
 <Input type=”password” name=””> Etiqueta para colocar contraseña en la casilla
 <Input type=”texto” name=””> Etiqueta para colocar texto en la casilla
 <Input type=”numer” name=””> Etiqueta para colocar numeros en la casilla
 <Input type=”color” name=””> Etiqueta para colocar color en la casilla
 <Input type=”ranger” name=””> Etiqueta para colocar un rango de enviar en la
casilla
 <Input type=”date” name=””> Etiqueta para colocar el fecha en la casilla
 <Input type=”time” name=””> Etiqueta para colocar la hora en la casilla
 <Input type=”submit” name=””> Etiqueta para colocar un boton de enviar en la
casilla
 <Input type=”button” name=””> Etiqueta para colocar un boton en la casilla
 <Input type=”ranger” min=”” max=””> Atributo de rango, el cual se fija el rango
minimo y el maximo
 <Input type=”button” value=””> Atributo de boton, se le asigna un nombre
 <Input type=”button” required=””> Atributo que se le da a la etiqueta para que el
usuario tenga que llenarlo obligatoriamente
 <textarea> </textarea> Etiqueta para insertar casilla de texto
 <textarea readonly=””> </textarea> Etiqueta para insertar una casilla que
contenga texto pero que solo se pueda leer y no modificar
METADATOS
En palabra sencillas, el metadato es lo que describe la información de los datos. En este
caso, si el dato fuera una imagen, objeto, videos, etc, los metadatos describen la
información que estos tienen, si la imagen tiene letras, si tiene nombre, si el video tiene
subtitulo, si tiene descripción, las imágenes que aparecen, entre otras muchas cosas más.
Esto funciona debido hay una inteligencia artificial que reconoce esto y va almacenando la
información. La forma en como se implementa los metadatos en HTML es con la siguiente
etiqueta:
 <meta charset= “”>
Otra cosa muy importante a tener en cuenta e que estos tipos de etiquetas que trabajan
con metadatos se ubican entre las etiquetas de <head> </head> ya que ahí está toda la
información que no se visualiza en la página. Un ejemplo para poder entender esto más a
fondo es que, al momento de crear una página web, hay palabras que llevan acentos, pero
el navegador en vez de mostrar el acento, va a mostrar por defectos unos símbolos.
En este caso para solucionar este problema se necesita decodificar la página, empleando
la etiqueta de metadatos de la siguiente manera:
 <meta charset= “utf-8”
Aquí se puede observar como la decodificación utilizando la etiqueta arreglo el problema.
 <meta name=”keywords” content=””> etiqueta para colocar las palabras claves

que al introducirlo en el buscador de google, pueda aparecer.
 <meta name=”description” content=””> Etiqueta para describir la pagina, que de
igual forma, tiene también la misma función que la etiqueta de arriba, y esto sirve
de referencia al buscador google para asi poder aparecer cuando buscan la pagina
creada
 <meta name=”author” content=””> Etiqueta para colocar el autor de la pagina
 <meta name=”copyright” content=””> Si la pagina tiene contenido con copyright,
se introduce el nombre de la compañia
 <meta name=”robots” content=””> Etiqueta para colocar si tu pagina es indexada
o no indexada.
Nota: Indexada o no indexada se refiere a aparecer en las SERP (paginas de resultados de

búsqueda), en pocas palabras, al momento de googlear tu pagina, aparecer en el motor de
búsqueda. Cuando colocas indexada aparecerá, cuando colocas no indexada esta, no
aparecerá al buscarla, se mantendrá oculta.
HTML SEMANTICO
El HTML semántico es la forma en como los códigos ocupan un espacio en la página web
de forma semántica. Es decir, cada código tiene un uso, pero aparte de ese uso, ese
código va en algún lugar de la página dependiendo el fin de la etiqueta o código.
Por ejemplo, en la siguiente etiquetas, se muestra un ejemplo de como, semánticamente
debe de utilizarse las etiquetas de acuerdo con el fin que estas cumplan, en el caso de:
 <header> </header> Encabezado de la pagina

 <nav> </nav> Etiqueta para insertar barra de navegación
Estas dos etiquetas sirven principalmente para crear todo lo que conlleva el encabezado
de la pagina, logo, nombre de la página, barra de navegación, opciones, etc.
 <article> </article> Para crear articulos

 <section> </section> Para dividir los artículos por secciones si son mas de un
articulo
 <aside> </aside> Para colocar una barra al costado que se desplazca hacia un lado
Sin embargo, en HTML, solo se lleva el orden de los códigos, pero al visualizar el trabajo en
el navegador, ese orden no se hará presente debido a que HTML desarrolla la base de la
página, ya luego con CCS es que este orden si se hace presente.
 <Footer> </footer> Etiqueta para colocar todo lo que va en el pie de pagina, el
logo, contacto, redes sociales, si tiene copyright la pagina, etc.
 <table> </table> para insertar una tabla tipo excel

 <tr> </tr> Para insertar una fila entera en la tabla
 <td> </td> Para insertar columna
 <table border=”5px”> </table> Para colocar la forma de una tabla
La manera en como se emplea una table es, que cada vez que se abra un <tr> se tiene que
abrir un <td>, ya que, con cada columna, se inserta también la información que se va a
suministrar por cada columna, además de eso, el atributo border no se recomienda
utilizarlo mucho ya que el estilo usualmente se da con CCS pero a modo de ejemplo se
coloca, quedando algo asi al momento de insertar los codigo:
 <img src=”” alt=”” title=””> El atributo “alt” es muy importante para el SEO, ya que
esto hace que cuando la imagen no se cargue, muestre el nombre de la imagen, al
igual que “title” pero a diferencia de este, muestra el nombre x que coloquemos y
se mostrara cuando pasemos el cursor por encima de la imagen
 <center> </center> Esta etiqueta sirve para centrar, se puede usar para cualquier
tipo de cosas, como en imágenes, tablas, texto, pero no se recomienda usar este
código porque lo que hace este, se puede hacer con CCS.
 <a href=”#codigo”> </a> Esta etiqueta lo que busca es, que si hay un parrafo
entero lleno información, lo que hace es redirigirte a un punto en específico del
párrafo, o que en CCS se conoce como selector, en pocas palabras, es como un
enlace que te manda a un punto del párrafo.
 Id=”codigo” Y con este atributo, se puede ejecutar la etiqueta anterior, atributo
que si bien se le puede dar a otras etiquetas para identificarlo, si en el párrafo hay
mil palabras de “hola” esta id lo que hace es identificar un hola en específico (al
que se le dio el atributo) y redirigir a ese hola con ayuda del código de arriba.
 <link rel=”.icon” href=”.ico”> Esta etiqueta junto con sus atributos buscan insertar
una imagen en la pestaña. La imagen debe de ser “.ico” el cual puede colocarse
cambiándole el nombre, en el primer atributo se pone el formato que es “.icon”.
Esta etiqueta va en el apartado de <head>.
CURSO DE CCS
(DISEÑO DE LA PAGINA WEB)
Hoja de estilo en cascada o en ingles Cascading style sheets (CCS) es un lenguaje de
programación que personaliza la estructura inicial desarrollada en HTML para que esta
tenga un estilo predeterminado. Como cambiar los colores de algún elemento, como sus
dimensiones, tamaño, letras, posición, para que tenga sombra, etc, etc, etc.
Hay formas de trabajar con CCS:
 El estilo en línea
 Utilizando la etiqueta <style> de forma directa o como atributo
 Por un archivo externo utilizando la etiqueta <link>
 O utilizando la etiqueta @import (no se utilizara)
Las dos formas más utilizadas en utilizando las etiquetas de style como atributo de forma
directa
O utilizando un archivo externo mediante la etiqueta link
Nota: La formas más práctica y común, es trabajar utilizando un archivo externo, el cual,
para crear dicho archivo lo que basta es agregar .ccs junto con el nombre del archivo en
sublimtext o cualquier otro programa para utilizar el lenguaje de programación, se abre un
nuevo archivo, se crea y se coloca el nombre junto con el .ccs. De esta manera estaríamos
trabajando con dos tipos de archivos, uno donde está el desarrollo de la estructura de la
página web en HTML y otra donde se agregará y se personalizará dicha estructura, pero
aparte, de manera que, si tenemos un error, se podría ubicar más rápido ese error
separando ambas partes. Ten en cuenta que la etiqueta <link> se coloca en el archivo
donde estará la estructura de la página en HTML, luego es que se crea y se abre en el
sublimtext como otra pestaña, y de manera simultánea se estaría trabajando de este
modo.
El selector, es el elemento a seleccionar en este apartado, y en este caso, hay varios tipos
selectores como:
 Universal (*): Selecciona todos los elementos
 De tipo: Los de tipos no es más que seleccionar el elemento añadiéndolo en el

apartado de “selector” el código o etiqueta que deseas darle estilo
 Clases (.): Es la forma de darle estilo a varios elementos a la vez sin necesidad de
seleccionarlos a todos
 ID (#): Esta son exclusivamente para un elemento, no se puede usar de forma

repetitiva ya que eso acarrearía problemas al momento de utilizar Javascript, esa
es la diferencia entre este y los otros selectores además de que este tienes más
rango de especificidad
 Por atributo []: Es la formar de seleccionar, pero con los atributos, estos se
encierran en un corchete y se coloca de la misma forma en cómo se colocaría un
atributo a una etiqueta
 Descendiente: Es la forma de seleccionar un elemento por descendencia, es decir,

seleccionar uno o más elementos, así estén dentro o fuera de un contenedor o un
código que las contenga y esta pueda combinarse con los otros modos de selección
 Pseudoclase (hover): Es la forma de selección que busca cambiar el color de un
elemento cuando esté por debajo del cursor, es decir, cambia el color del
elemento cuando pasas el mouse encima del elemento en cuestión.
La propiedad no es más que el apartado para darle estilo a lo que ha seleccionado, como
el tamaño, posición y color de lo que desees darle estilo, si tendrá sombras o bordes, etc,
etc, etc.

Curso de HTML1

Cargado por

Copyright:

Formatos disponibles

Curso de HTML1

Cargado por

Información del documento

Título 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 HTML1

Cargado por

Copyright:

Formatos disponibles

CURSO DE HTML

(ARQUITECTURA DE LA PAGINA WEB)

<etiqueta atributo= “valor”> </etiqueta>

Nota: SEO, acrónimo de Search Engine Optimization -en castellano optimización de

 <p> </p> Etiqueta para párrafos

Nota: Hay etiquetas que completa la linea y otras que se ajustan

 <br> Etiqueta que completa la línea

 target= "_blank" esto no es una etiqueta sino un atributo que se le da.

<a href= “https//:Facebook.com” target= “index.html”> </a>

<li> Agua </li>

 <img src=””> </img> Etiqueta para insertar imágenes

<form> <input type=”Password” name=”Contraseña”> </form>

 <meta charset= “”>

 <meta charset= “utf-8”

Aquí se puede observar como la decodificación utilizando la etiqueta arreglo el problema.

 <meta name=”keywords” content=””> etiqueta para colocar las palabras claves

Nota: Indexada o no indexada se refiere a aparecer en las SERP (paginas de resultados de

 <header> </header> Encabezado de la pagina

 <article> </article> Para crear articulos

 <table> </table> para insertar una tabla tipo excel

Hay formas de trabajar con CCS:

 De tipo: Los de tipos no es más que seleccionar el elemento añadiéndolo en el

 ID (#): Esta son exclusivamente para un elemento, no se puede usar de forma

 Descendiente: Es la forma de seleccionar un elemento por descendencia, es decir,

También podría gustarte