Cabe destacar que Los bookmarks ocupan el título de la página cuando se guarda, además tiene mucho valor en el SEO de un sitio web.
##Codificación
Agregaremos la codificación (standard que define el cómo se muestran las letras en el html) para que el navegador muestre los textos correctamente y entienda cuando hemos agregado una letra distinta, como por ejemplo la ñ. Para agregar esto hay que agregar la siguiente línea dentro de las marcas `` `` :
las letras que acepta, por defecto no acepta las ñ
``
La página debería quedar así:
~~~html
<title> HACK GIRLS </title>
~~~
Sin el meta charset los tildes y ñ (caracteres especiales) no se verán correctamente dentro de nuestro documento
##Atributos y valores
En la etiqueta `` vemos que hay algo nuevo que no habíamos visto en otras etiquetas, en primer lugar la marca no se cierra, y la regla es simple, si la etiqueta no tiene contenido no se cierra, y para pasarle valores adicionales se ocupan **atributos** y **valores**, donde `charset` sería el *atributo* y `utf-8` el *valor*.
Son diversos los atributos y valores que se pueden pasar a cada etiqueta, dos atributos muy importantes que estudiaremos más adelante son el **id** y la **clase**.
##Cabeza y cuerpo
La información de la página dentro del head es para el navegador, la información que está dentro del cuerpo es para el usuario.
El navegador lee dentro de ambas etiquetas, pero las del head no las muestras, las ocupa para determinar ciertoas parámetros, en cambio el body se lo muestra al usuario.
##Etiquetas Básicas:
*Todo lo que veremos desde ahora se debe escribir dentro del* **body** *(hasta que se indique lo contrario), por ende dentro de las etiquetas* ````
###Párrafos:
Si escribes en el archivo index.html :
~~~html
<title> HACK GIRLS </title>
hola a todos !!!
hola hola hola
hola !!!
~~~
Al refrescar el navegador, éste te leerá de la siguiente forma:
Si te fijas, el navegador no respeta la sintaxis de párrafos y se lee como si estuviera todo escrito en una misma línea.
Lo que pasa es que HTML es un lenguaje de marcas y para separar cada línea del texto y se pueda leer todo en varias líneas, deben de existir etiquetas de por medio.
Vamos a aprender la primera etiqueta y la más sencilla de todas: `p`.
Se abre con `` y debido a que contiene información se debe cerrar con `
`. Todo el contenido que se encuentre dentro de estas marcas pasa a tener la **propiedad de párrafo**. Por ejemplo, escribamos esto en nuestro archivo index.html: ~~~html hola a todos !!! hola hola hola hola !!!Hola a todos
Este es mi segundo párrafo
~~~ *No olvidar que esto se escribe dentro del body.* Refrescamos el navegador y quedaría algo así:  Ves, ahora **si** respeta que sea un párrafo!!! Puedes agregar la cantidad y largo que quieras. En Sublime Text si se escribe "p" (o cualquier marca) y luego tab, se autocompleta la etiqueta por si sola.
###Titulares (Títulos) y Sub titulares:
Una página web también tiene títulos!
La marca para los títulos es `` **más** un número del `1` al `6`. Siendo `` para el subtítulo del subtítulo del subtítulo del subtítulo del subtítulo del título! por ejemplo escribamos en nuestro archivo index.html: ~~~html hola a todos !!! hola hola hola hola !!!
Hola a todos
Este es mi segundo parrafo
Este es mi tercer parrafo
~~~ Refrescamos el navegador y se debería ver algo como esto:  Se puede ver que el titular `` es muy pequeño, incluso menor que los párrafos.
### Imágenes:
La etiqueta para agregar imágenes es
~~~html
![]()
~~~
Donde `src` es *source* , que en español es fuente y que es un **atributo** de la etiqueta de imágen. `alt` es otro **atributo** de la etiqueta `img`, que te permite describir(brevemente), la imagen en caso de que no se pueda cargar la imagen por escases de internet, o en navegadores de solo texto.
Esta etiqueta no necesita cerrarse como lo hacen las anteriores.
Para agregar imágenes utilizando esa etiqueta puedes hacerlo de dos maneras:
`-`Directo de una URL de ineternet.
`-`Desde una imagen desde tu proyecto (desde tu computador).
##### Imágenes Desde internet:
Buscas en el google la imagen que quieras, y luego haciendo click en "ver imagen" , ésta te llevará a una url terminada en .jpg o .png
Esa url debes copiarla y pegarla detro de los `" "` del source
~~~html
~~~
Entonces si esto lo agregamos en nuestro archivo index.html:
~~~html
hola a todos !!!
hola hola hola
hola !!!
Hola a todos
Este es mi segundo parrafo
Este es mi tercer parrafo
~~~
Refrescamos el navegador:
#####Imágenes desde el computador:
Para esto debes crearte una carpeta **dentro** de tu proyecto llamada *images* y ahí ir integrando las imagenes que quieres en tu proyecto:
~~~
proyecto_web
└───index.html
images
└─── ejemplo.jpg
~~~
*Puede ser formato jpg, png, jpeg, ahí debes ver que formato es tu imagen. Importante que las imágenes estén en una carpeta que se llame images dentro de la carpeta de donde está tú proyecto*
En ese ejemplo yo estoy agregando una imagen a mi carpeta *images* con el nombre de *ejemplo* y de formato *.jpg*
Entonces para agregarla en mi web se copia la ruta de donde se encuentra mi imagen en el `src` de la siguiente manera:
~~~html
~~~
Donde *images* es el nombre de la carpeta donde se encuentra mi imagen + `/` + *ejemplo* (nombre de mi imagen) `.jpg`(formato)
###Links:
Los links se hacen con la etiqueta ``:
~~~html
~~~
Esta etiqueta es un poco distinta a las demás, es una copia entre la de imágenes y las anteriores, ya que esta **si** se cierra.
Siendo `href` el lugar donde se pone la página web donde apunta el contenido (link de referencia), y es un **atributo** de la etiqueta ``
Por ejemplo:
~~~html
Link al evento
~~~
Aquí se está transformando a la frase *Link al evento* en un hipervínculo. Y al hacerle *click* en ella , te enviará al link escrito dentro de las `" "` del `href`
Por ende lo que hace esta etiqueta es darle la **propiedad de hipervículo** al contenido de ésta, apuntándolo al link que se encuentra en `href`
Si pongo link sin `href`, no me llevará a ninguna parte. Y si al link no le pongo texto(contenido) ,pero si `href`, no se podrá ver el link por ninguna parte y por ende no se podrá hacer nada.
Si yo quisiera que el lnk me habriera en una página nueva, hay que agregarle a la etiqueta el **atributo** `target="_blank"`, quedando de esta forma:
~~~html
Link al evento
~~~
*Importante resaltar que todos los* **atributos** (`href` , `target`, etc...) *se escriben dentro de la etiqueta `< ... >` no fuera, ya que pasaría a ser texto.*
Ahora trata de transformar una imagen en hipervículo.
Si necesitas ayuda, no dudes en preguntar a tu mentor.
Hagamos un pueqeño resumen de lo que hemos aprendido:
~~~html
<title> HACK GIRLS </title>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam consequuntur omnis minima dolorem adipisci officiis enim optio tenetur quos aliquid, saepe, corporis dignissimos? Harum debitis veritatis voluptas, illum iste deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolorem dignissimos expedita repellendus ducimus natus possimus, molestiae architecto, aperiam officiis, amet consequatur, nisi. Est accusamus eum quos natus architecto modi.
Si quieres saber más del evento haz click aquí
~~~
Esto se vería así:
- Primero se está llamando una imagen que se encuentra dentro de la carpeta *images* y que se llama *logo_emp*.
- Luego se pone un título ``(Titular principal).
- Luego un sub sub título.
- Luego viene un párrafo con bastante texto.
- Luego un párrafo que a su vez con tiene un link (``).
- luego se llama a una imagen desde el internet.
### listas ordenadas:
Para definir una lista de elementos ordenados ocuparemos la etiqueta ``, pero dentro de esta lista debemos definir elementos, eso lo haremos con la etiqueta `- `
Las listas ordenadas tienen un número o letra, esto lo modifcaremos más adelante con CSS.
~~~html
Esta es una lista ordenada
- Lista 1
- Lista 2
~~~
###listas desordenadas:
Las listas desordenadas tienen bullets, esto también es modificable con CSS.
Para definir una lista de elementos desordenados ocuparemos la etiqueta ``, y dentro de esta lista debemos definir elementos, eso lo haremos con la etiqueta `- `
~~~html
Esta es una lista desordenada
- Lista 1
- Lista 2
~~~
###Tablas
Es posible agregar tablas con datos ocupando la etiqueta ``, dentro de una tabla debemos especificar las filas y las celdas dentro de las filas utilizando `` y `` cada etiqueta tr especifica una nueva fila, y cada etiqueta td una celda.
~~~html
Celda 1
Celda 2
Celda 3
Celda 4
~~~
Celda 1
Celda 2
Celda 3
Celda 4
###Divs:
Los divs son etiquetas que permiten anidar a otras etiqueta y le damos estilo propio a la agrupación (esto lo haremos más adelante con CSS).
Envuelve varias etiquetas, y todas las etiquetas envueltas por él, están bajo la influencia del div.
~~~html
Titular 1
Titular 2
Párrafo 1
~~~
###Span:
La etiqueta span es similar a los divs pero sirve para etiquetar texto, una parte de una palabra, una palabra o más. (luego con CSS, hace más sentido, por ahora es bueno que la conozcas)
~~~html
Lorem Ipsum
~~~
##El inspector de elementos
El inspector de elementos, es un aherramienta que podemos abrirla haciendo click derecho sobre la página y luego inspect nos muestra el código completo de la página y nos permite modificarlo. Con esta herramienta pueden ver el código de cualquier página web.
Puedes aprender más sobre él [aquí](https://developer.mozilla.org/es/docs/Tools/Page_Inspector)
Juega un rato con él, inspecciona lo que llevas de tu página, y mira sitios de tu interes.
***
Ahora vamos a saltar al diseño de nuestra página web, luego continuaremos con más html.
Nosotros estabamos aprendiendo HTML, que vendría siendo el esqueleto de nuestro sitio web, ahora le añadiremos la "piel", el diseño, y eso lo hacemos con CSS.
#¿Qué es CSS?
CSS es acrónimo de Cascading Style Sheet, o sea hojas de estilo que se pueden incorporar dentro de HTML para darle forma y color a nuestra voluntad.
Hay tres formas de incorporar CSS dentro de una página web.
- La primera es con un conjunto de atributos y valores dentro de la etiqueta del mismo HTML.
- La segunda consiste en agregar el CSS dentro del head del mismo documento HTML.
- La tercera forma consiste en utilizar un archivo externo.
Pero en esta guía solo veremos la tercera forma, por archivo externo.
##Cargando un CSS externo:
La tercera forma para incluir CSS en una página web consiste en agregar un link a un CSS externo, con externo se refiere a fuera de la página, pero puede estar dentro del mismo servidor, o se puede cargar desde otro sitio.
Primero creamos un archivo nuevo, dentro de la carpeta de nuestro proyecto, llamado miestilo.css
~~~
proyecto_web
└───miestilo.css
index.html
images
└─── ejemplo.jpg
~~~
El nombre no importa, lo importante es que sea `.css` para que sepa que estamos escribiendo CSS.
Para agregar un link a un css ocuparemos la etiqueta link dentro del ``.
~~~html
~~~
En Sublime Text si se escribe link y luego se autocompleta con tab, la línea para agregar un CSS externo se escribe sola.
Quedando de esta manera:
~~~html
<title> HACK GIRLS </title>
.
.
.
~~~
Con esto estamos agregando el CSS del archivo miestilo.css a nuestra página web.
##Sintaxis:
Se escribe en el archivo de `.css`:
~~~css
etiqueta {
propiedad: valor;
}
~~~
Por ejemplo empecemos por cambiarle el color a la letra de algún título.
Tomando lo anterior:
~~~html
<title> HACK GIRLS </title>
Evento Hack Rails
Por más mujeres en emprendimiento y tecnología
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsam consequuntur omnis minima dolorem adipisci officiis enim
optio tenetur quos aliquid, saepe, corporis dignissimos?
Harum debitis veritatis voluptas, illum iste deserunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quo dolorem dignissimos expedita repellendus ducimus natus
possimus, molestiae architecto, aperiam officiis, amet consequatur,
nisi. Est accusamus eum quos natus architecto modi.
Si quieres saber más del evento haz click aquí
~~~
Para cambiarle el color a todo el contenido del título ``
~~~css
h1 {
color: red;
}
~~~
*Esto se escribe en el archivo de css `miestilo.css`.*
Lo que hace el código anterior es tomar todas las etiquetas tipo `h1` y darles el color rojo.
Esta es una lista ordenada
- Lista 1
- Lista 2
- `, y dentro de esta lista debemos definir elementos, eso lo haremos con la etiqueta `
- `
~~~html
Esta es una lista desordenada
- Lista 1
- Lista 2
` cada etiqueta tr especifica una nueva fila, y cada etiqueta td una celda. ~~~html
~~~Celda 1 Celda 2 Celda 3 Celda 4
###Divs: Los divs son etiquetas que permiten anidar a otras etiqueta y le damos estilo propio a la agrupación (esto lo haremos más adelante con CSS). Envuelve varias etiquetas, y todas las etiquetas envueltas por él, están bajo la influencia del div. ~~~htmlCelda 1 Celda 2 Celda 3 Celda 4 ~~~ ###Span: La etiqueta span es similar a los divs pero sirve para etiquetar texto, una parte de una palabra, una palabra o más. (luego con CSS, hace más sentido, por ahora es bueno que la conozcas) ~~~htmlTitular 1
Titular 2
Párrafo 1
Lorem Ipsum
~~~ ##El inspector de elementos El inspector de elementos, es un aherramienta que podemos abrirla haciendo click derecho sobre la página y luego inspect nos muestra el código completo de la página y nos permite modificarlo. Con esta herramienta pueden ver el código de cualquier página web. Puedes aprender más sobre él [aquí](https://developer.mozilla.org/es/docs/Tools/Page_Inspector) Juega un rato con él, inspecciona lo que llevas de tu página, y mira sitios de tu interes.*** Ahora vamos a saltar al diseño de nuestra página web, luego continuaremos con más html.  Nosotros estabamos aprendiendo HTML, que vendría siendo el esqueleto de nuestro sitio web, ahora le añadiremos la "piel", el diseño, y eso lo hacemos con CSS. #¿Qué es CSS? CSS es acrónimo de Cascading Style Sheet, o sea hojas de estilo que se pueden incorporar dentro de HTML para darle forma y color a nuestra voluntad. Hay tres formas de incorporar CSS dentro de una página web. - La primera es con un conjunto de atributos y valores dentro de la etiqueta del mismo HTML. - La segunda consiste en agregar el CSS dentro del head del mismo documento HTML. - La tercera forma consiste en utilizar un archivo externo. Pero en esta guía solo veremos la tercera forma, por archivo externo. ##Cargando un CSS externo: La tercera forma para incluir CSS en una página web consiste en agregar un link a un CSS externo, con externo se refiere a fuera de la página, pero puede estar dentro del mismo servidor, o se puede cargar desde otro sitio. Primero creamos un archivo nuevo, dentro de la carpeta de nuestro proyecto, llamado miestilo.css ~~~ proyecto_web └───miestilo.css index.html images └─── ejemplo.jpg ~~~ El nombre no importa, lo importante es que sea `.css` para que sepa que estamos escribiendo CSS. Para agregar un link a un css ocuparemos la etiqueta link dentro del ``. ~~~html ~~~En Sublime Text si se escribe link y luego se autocompleta con tab, la línea para agregar un CSS externo se escribe sola.Quedando de esta manera: ~~~html <title> HACK GIRLS </title> . . . ~~~ Con esto estamos agregando el CSS del archivo miestilo.css a nuestra página web. ##Sintaxis: Se escribe en el archivo de `.css`: ~~~css etiqueta { propiedad: valor; } ~~~ Por ejemplo empecemos por cambiarle el color a la letra de algún título. Tomando lo anterior: ~~~html <title> HACK GIRLS </title>
Evento Hack Rails
Por más mujeres en emprendimiento y tecnología
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam consequuntur omnis minima dolorem adipisci officiis enim optio tenetur quos aliquid, saepe, corporis dignissimos? Harum debitis veritatis voluptas, illum iste deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolorem dignissimos expedita repellendus ducimus natus possimus, molestiae architecto, aperiam officiis, amet consequatur, nisi. Est accusamus eum quos natus architecto modi.
Si quieres saber más del evento haz click aquí
` ~~~css h1 { color: red; } ~~~ *Esto se escribe en el archivo de css `miestilo.css`.*  Lo que hace el código anterior es tomar todas las etiquetas tipo `h1` y darles el color rojo.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent