Repositorio para curso web-coursera-andes
Para insertar un codigo base en un archivo html en el editor, oprimimos:
- Ctrl + Space o tambien podemos escribir en el archivo:
- ! La diferencia entre estos dos, es que el primero me agrega la opcion en español para tildes
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>y los scripts de CSS y Javascript
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>En cambio la segunda opcion agrega la opcion del idioma en ingles.
<html lang="en">En elcurso se da otra opcion para trabajar y es trabajar todo en la herramiente Codespaces de Github, con la cual se puede desarrollar software en un navegador.
- Para usar codespaces se necesita tener una cuenta de Github
- Dentro de Github creamos un nuevo repositorio
New repostory - Una vez creado el repositorio, crear un codespace haciendo click en la opcion
<> code, en la pestaña codespaces, click en el botoncreate codespaces on main
- Asi podemos ver el editor VSC pero en una pestaña del navegador
Tener en cuenta que el codigo que hagamos en codespaces no se guardará automaticamente, hay unos paso previos que tenemos que hacer para guardar los cambios.
- hacer click en la barra de herramientas
Control de codigo fuenteesta vista nos mostrará los archivos a los que les hicimos cambios. - Para agregar los archivos que queremos agregar le hacemos click a los 3 puntos
... > Changes > Stage All Changes - Despues agregar un mensage de commit que describa los cambios que hemos realizado y agregamos estos cambios con el boton
commit - final mente sincronizamos los cambios, haciendo click en el boton nuevamente que ahora dice
Sync Changes, esto nos muestra un modal con un mensaje advirtiendonos que la accion hara cambios en nuestro repositorio. Hacemos click enOK. - Para previsualizar la pagina debemos instalar la extensionn
Live serveren el codespace. Lo podemos hacer igual que en VSC en la barra lateral vamos aextensionesy buscamos la extension.
En HTML se pueden crear titulos que van desde el h1 hasta el h6.
Es un bloque de texto y entre párrafo y párrafo el navegador se encargará de dejar un espacio vertical.
Nota: VSC nos permite agregar texto generico de relleno, para hacer esto no situamos donde queremos agregar el texto y excribimos lorem*1.
- El numero que va despues del asterisco es equivalente alnumero de lineas que queremos insertar
Un aspecto interesante de los parrafos es que los espacios adicionales, las tabulaciones y los saltos de linea se eliminan en el documento final.
Párrafo1 - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Párrafo2 - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
HTML prove tres tipos diferentes de listas:
-
Lista Numerada: Donde cada elemento de la lista esta precedido por un número
-
Para hacer una lista numerada utilizamos la etiqueta ol(Order List) y cada uno de los elementos de la lista se incluyen dentro de una etiqueta li(List Item).
<ol> <li>Enter Sandman<li> <li>Master of Puppets</li> </ol> //View in the Browser 1. Enter Sandman 2. Master of Puppets
-
Se puede modificar la lista para que el orden de los numeros sea descendente, para hacer esto hay que colocar dentro de la etiqueta ol el atributo reversed asignandole el valor true.
<ol reversed="true"> <li>Enter Sandman</li> <li>Master of Puppets</li> <li>One</li> </ol> //View in the Browser 2. Master of Puppets 1. Enter Sandman
-
-
Lista de Viñetas: Donde cada elemento esta precedido por una viñeta que usualmente es un circulo
- Esta lista se crea con la etiqueta ul(Unorder list) y cada uno de los elementos de la lista se incluyen dentro de una etiqueta li(List Item).
<ul> <li>Enter Sandman<li> <li>Master of Puppets</li> </ul> //View in the Browser * Enter Sandman * Master of Puppets
- Esta lista se crea con la etiqueta ul(Unorder list) y cada uno de los elementos de la lista se incluyen dentro de una etiqueta li(List Item).
-
Lista de Definiciones: Donde cada elemento de la lista es un termino junto con su definición.
- Para crear una lista de definiciones usamos la etiqueta dl(definition List) y cada termino para definir se incluye dentro de una etiqueta dt(definition term) y la definicion del termino se incluye dentro de una etiqueta dd(definition description).
<dl> <dt>Enter Sandman<dt> <dt>Master of Puppets</dt> </dl> //View in the Browser * Enter Sandman * Master of Puppets
- Para crear una lista de definiciones usamos la etiqueta dl(definition List) y cada termino para definir se incluye dentro de una etiqueta dt(definition term) y la definicion del termino se incluye dentro de una etiqueta dd(definition description).
```html
<table>
<thead>
<tr>Filas
<th>celdas del encabezado</th>
</tr>
</thead>
<tbody>
<tr>Filas
<td>celdas en el cuerspo de la tabla</td>
</tr>
</tbody>
</table>
```
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent