Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Readme.md #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Readme.md #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,9 @@ Como navegador puedes ocupar alguno de los siguiente:

Como editor de texto te recomendamos uno de los siguientes:

- [Atom](https://atom.io/)
- [Visual Studio Code](https://code.visualstudio.com)
- [Sublime](https://www.sublimetext.com/)

En esta guía ocuparemos ATOM pero es muy similar a Sublime y puedes utilizar este útlimo si lo prefieres.

***Con el editor de texto instalado pasemos a la siguiente sección***

## ¿Qué es lo que vamos a crear?
Expand Down Expand Up @@ -57,6 +55,8 @@ Si buscamos en google, posiblemente encontremos desde respuestas muy complejas a

***JS (JavaScript):*** Es un lenguaje de programación que permite modificar dinámicamente elementos de HTML y CSS y de esta forma agregar componentes y comportamientos nuevos a la página web así como agregar diversos tipos de animaciones e interactuar con información de otros sitios web.

***HTML (Lenguaje de Marcado de Hipertexto):*** Es el lenguaje estándar utilizado para crear y diseñar páginas web. Define la estructura y el contenido de una página web al proporcionar un conjunto de etiquetas que describen cómo se deben mostrar los elementos en un navegador web.

![](https://media.giphy.com/media/ZEobigiRBFc7S/giphy.gif)

### Primeros pasos con una página web:
Expand All @@ -69,7 +69,7 @@ Vamos a crear una carpeta nueva en el escritorio. Le puedes llamar como tu quier

#### Segundo paso:

Luego abriremos la carpeta en **Atom** (o el editor de texto que estes ocupando).
Luego abriremos la carpeta en el editor de texto que estés ocupando.

- Puede ser arrastrando la carpeta hacia el editor de texto
- O abriéndola desde el editor de texto.
Expand Down Expand Up @@ -111,6 +111,8 @@ Al abrirlo en el navegador te debería aparecer algo como esto:

***Felicidades!! Ya estás escribiendo tú primera página web!!!*** Aún no tiene el aspecto esperado y aparecen algunos carácteres extraños, pero vamos paso a paso.

Te recomendamos instalar la extension Live Server y ocuparla para ver tu index.html

### Recapitulemos

Fueron sólo 5 pasos, fácil ¿cierto?.
Expand All @@ -125,6 +127,8 @@ Porque es una convención, se subentiende que es el archivo índice que inicia u

El que sea *.html* dice que es un archivo que se interpretará como HTML, es decir el navegador abrirá y leerá su contenido, en la siguiente sección aprenderemos más sobre HTML.

Puedes obtener más información sobre HTML en el siguiente link: https://developer.mozilla.org/es/docs/Web/HTML

## ¿Qué es HTML?

HTML significa "HyperText Markup Language" - en español, **Lenguaje de Marcas** de HyperTexto.
Expand Down Expand Up @@ -182,7 +186,7 @@ Ahora ya tenemos la estructura de nuestra página.

![html-Autocompletado](./assets/img/html_estructura01.png)

¡No olvides guardar la página!, para ello utiliza, **Ctrl + s(Windows, Linux)** o **cmd + s(Mac)** , Atom borrará el punto azul en el nombre de nuestro archivo cuando esta guardado.
¡No olvides guardar la página!, para ello utiliza, **Ctrl + s(Windows, Linux)** o **cmd + s(Mac)** , el editor de texto borrará el punto azul en el nombre de nuestro archivo cuando esta guardado.

### El título de la página

Expand Down Expand Up @@ -981,7 +985,7 @@ Primero crearemos una carpeta llamada `css` al interior de `assets`.
└───style.css
~~~

Luego crearemos con **ATOM** este nuevo archivo, botón derecho sobre la nueva carpeta creada y seleccionaremos `new file` con el nombre `style.css`
Luego crearemos con **el editor de tecto** este nuevo archivo, botón derecho sobre la nueva carpeta creada y seleccionaremos `new file` con el nombre `style.css`

El nombre no importa, lo importante es que sea `.css` para que sepa que estamos escribiendo CSS. Para decirle a nuestra página que este será el archivo que utilizaremos debemos ocupar la etiqueta *link* dentro del `<head>`.

Expand All @@ -991,7 +995,7 @@ Escribiremos lo siguiente.
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
```

>En Atom si se escribe link y luego se autocompleta con `tab`, la línea para agregar un CSS externo se escribe sola. Quedando nuestro head de la siguiente manera:
>En el editor de texto si se escribe link y luego se autocompleta con `tab`, la línea para agregar un CSS externo se escribe sola. Quedando nuestro head de la siguiente manera:

~~~html
<!DOCTYPE html><html><head>
Expand Down