Desarrollo web N15. Table Cordiales Saludos ![15_portada.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23xLFhthdZWxeYkgmHJ4UhGowB1AVx9cmvV5v7UMD3tdk8TNmdKmwYdJxULC1PuwQGRdg.png) ## Table Es necesario conocer las tablas si se desea tabular algunos datos y como conocimiento general porque puede ocurrir que estemos revisando una web antigua y seguro encontraresmos una tabla por allí, en la actualidad está en desuso, no es muy usada ya que es más fácil hacer una estructura parecida y mejor con **CSS**. La sintaxis básica de las tablas se muestra en el siguiente código y posteriormente en la captura de pantalla, la cual nos sirve para entender la estructura: ~~~

HTML

CSS

~~~ Donde **table** es el elemento principal de la tabla, **tr** es **table raw** (fila de tabla) y **td** es **table data**. Es muy fácil hacer esta estructura al tener muy claro: **table, tr y td**. Las tablas para poder visualizarlas debemos colocarle un estilo de borde (visto en la publicación anterior). Sin esto no podemos ver su estructura. En la siguiente captura podemos ver una fila con tres datos. Un **tr** con tres **td**. ![15_table_01.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23xAtxkPZcbARcyk95oHKMJBHeW6vLD85RLMQ4gFfZiL2VhqqGRxGPdusFgbHqu2xQBAQ.png) En la sigyiente captura de pantalla ya podemos apreciar una tabla como la conocemos, Aquí tenemos **dos filas** con tres columnas: **seis datos**. ![15_table_02.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23xAu7v9Uz1AspQcEiSv8ptac8poYRb768FnyrqXGqTdAMhWXdhbfeptZXZAb4n2NffQC.png) Una forma de agregarle encabezados a una tabla es por medio de **th** lo cual es **table header**, encabezado de tabla. ![15_table_03.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23xLHhZcyq2XKSL7kfPwFZfZ6UZEe15WBuwAkb5Xfkms16cLHU1FjhTaBscUtcu7Ghuf8.png) Las tablas se podrían hacer más complejas pero no está dentro de la finalidad de este curso. 💻 Código ~~~ Desarrollo Web

Desarrollo Web - Publicación 15

Tablas

Nombres	Apellidos	Edad
Juan	Pérez	18
José	Alcalá	20
María	Flores	40

~~~ Este tema está dentro de los fundamentos básicos de **HTML**. Como en otras oportunidades ya he mencionado que estas publicaiones te permitirán saber de que trata todo lo referente a los conceptos básicos de HTML y con la finalidad de que algún lector se interese por el tema. ![banner_inkscape.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/Ep3gmpQ5xJr2GW8C24umtKacAvpNVFNk15Wuw9Wxpa4MGiobdbd4vh2TY9g8quv1XfH.png) 📍 https://inkscape.org/es/ ## Marco a una imagen Inkscape nos da la posibilidad de agregarle un **marco** a una imagen, de forma automática. Para comenzar el proceso debemos primereramente seleccionar la imagen. ![15_insk_01.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23yx3VmP6GkSyUxntwomAG6eFdeT2zkLiCMc2ME77Y3YNMSzmxaZ5nMm96jdEqY82YtTV.png) Después de selccionar la imagen, debemos entrar a: **Extensiones/Generar desde trayecto/Marco** ![15_insk_02.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23wgguE1UcQME4ZN7rrCwL6MgMhhPvyAnAwiT6Uyn9BsSP1S33nbwNYYmKUdpt6UYR8r1.png) Podemos seleccionar el color que deseamos para el marco y el **Ancho de trazo**. Luego **Aplicar** ![15_insk_02a.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23y9B9iMxSYu6PBSZegeWAUPyfWtC3YRVSjLJhbpr6GrfLnjaY8o3qjynok2ULPC7n9Xs.png) Como al colocar el marco queda separado de la imagen, debemos agruparlo. Para agruoarlo debemos seleccionar todo, y **Ctrl + G** así la imagen y el marco quedan fucionados. ![15_insk_04.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23zSE46ZmAETpnaE3rhVxUXayrQ3o8ANwjJFkCwvtBaofVNDeCc355p4cDvfxLEP5ykXD.png) Así queda la imagen con el marco. ![15_insk_03.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23zm1JaNpaD7axPFWGcBGV4QXw8RWfD1i6NJp4LHKLpAw3pJ3aXPmmiZsdV663HhkNMnz.png) Ahora corresponde exportar la imagén, como lo vimos en una publicación pasada. ![15_insk_05.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23wCV8Lv8TjUMExEPQj4f7LKMm2hFZMvgLP8Hbp9xkn1jFSbwE1EWCwoCwmmh6q4VGW4i.png) Luego buscamos la carpeta donde deseamos exportar la imagen, y **Guardar**. ![15_insk_06.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23wr7vW2VFBoEd1SYrDJTcopoXHF5w81NvstAXmARMZNjLKuGk7U6oFpzK3qmfRNbx6WL.png) Revisamos en nuestro explorador de archivos, para revisar la imegen. Listo. ![15_insk_07.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/243zkJc15rqxvNhNXevMkpz5x654JX61NTUYeeGzawuec8JA47tAWyEFJMBsK16VroGQK.png) Estas son las nociones básicas de **Inkscape** tratadas hasta ahora en estas publicaciones. **Aprendimos:** ✅ Crear nuestro favicoin ✅ Importar imágenes ✅ Exportar imágenes ✅ Redimensionar imágenes ✅ Guardar una captura de pantalla como imagen ✅ Realizar un separador para nuestra web ✅ Extracción de una parte de una foto ![banner_git_repo_local.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/Ep3gj5DzhT4Ec2QJkEvRsEFRW457K7yx47Uje3eUMcYWf8BkdJsendcar18bJw79DXQ.png) Corresponde al finalizar esta jornada actualizar nuestro repositorio local. Con la práctica constante de **git**, se realizan los comandos de forma natural, sin mucho esfuerzo. eso sí, debes estudiar git diariamente. Será parte de tu formación profesional. te sorprenderás que en todas las ofertas de empleo se solicita el **conocimiento de Git**. ![15_git.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23tcJV1dCP4qQ7skTnR2scd8fRopWyiXZbqcSuX9tHwQ7vR6TxzEkPQrvfny36oexP4kB.png) 💻 Código ~~~ rafael@rafd:~$ cd desarrolloweb/ rafael@rafd:~/desarrolloweb$ git status On branch main Untracked files: (use "git add ..." to include in what will be committed) web_15/ nothing added to commit but untracked files present (use "git add" to track) rafael@rafd:~/desarrolloweb$ git add web_15/ rafael@rafd:~/desarrolloweb$ rafael@rafd:~/desarrolloweb$ git commit -m "Tables" [main 1039453] Tables 3 files changed, 47 insertions(+) create mode 100644 web_15/images/favicon.ico create mode 100644 web_15/images/marco_ejercicio.png create mode 100644 web_15/index.html rafael@rafd:~/desarrolloweb$ rafael@rafd:~/desarrolloweb$ git log --oneline 1039453 (HEAD -> main) Tables 14a12ac border a79f9a4 Agregando README a6780ac Agregando .gitignore 2b09e38 HTML div d50b401 HTML Images Attributes src, alt. Width and height 11298ac HTML Links -url and image 17416f9 HTML style:color, font, size 696e7d7 Add carpeta web_8 y web_9 78113cc creando repositorio desarrolloweb rafael@rafd:~/desarrolloweb$ ~~~ ##### Resumen de comandos **git**, utilizados hasta ahora: 1. git init --initial-branch=main 2. git config user.name "**Nombre_XXX**" 3. git config user.email "**correo@dominio.com**" 4. git config --list 5. git status 6. git add . 7. git commit -m "Mensaje del commit" 8. git log 9. git commit --amend 10. git add **Nombre directorio o archivo** 11. git log --oneline 12. git commit 13. touch .gitignore 14. touch README.md ![banner_linea.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23xp6bkE556i1h2Mqd1gNaEUyrgZukGyvQSVeLGsXTmgRdfv64X9B1eiqGknjtCAPZNmD.png) ##### Mis 8 últimas publicaciones de esta serie de **Desarrollo Web**. 📌 [N07. ✅ Reinicio ➕ Geany](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n07-reinicio-geany) 📌 [N08. Metadatos - head](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n08-metadatos) 📌 [N09. head (favicon - estilos - scripts)](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n09-head-favicon-estilos-scripts) 📌 [N10. Atributo HTML style](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n10-atributo-html-style) 📌 [N11. HTML Links](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n11-html-links) 📌 [N12. HTML Images](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n12-html-images) 📌 [N13. El elemento div](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n13-el-elemento-div) 📌 [N14. Estilo border ](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n14-estilo-border) ![banner_linea.png](https://files.peakd.com/file/peakd-hive/rafaelaquino/23xp6bkE556i1h2Mqd1gNaEUyrgZukGyvQSVeLGsXTmgRdfv64X9B1eiqGknjtCAPZNmD.png) [Mi twitter](https://twitter.com/Rafa_elaquino) Nos vemos en una próxima entrega! Rafael Aquino

RE: Skin Cancer Story part 2