From 4b5e9d86eb65eb58c5830241565ccab6e071a4b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Axel=20Mart=C3=ADnez?= Date: Sun, 3 May 2020 20:40:05 -0500 Subject: [PATCH 1/3] #4 Starting to work on the HTML section --- ...40b622142f1c98125abcfe89a76a661b0e8e343910 | 1 + ...5f540baf0b997ce3a8b3dd34d4f42282d4dac52cd0 | 6 + ...8d864592ff3425a74bf3ae2a28315ecc329bc2adba | 208 ++++++++ ...60dc575af6889af59395627feabd935ef34f3b05d8 | 95 ++++ ...c5f1c7dea631f4069eda83ad8311f33bbef324f4b6 | 84 ++++ ...a15c6e7a7381dedd82145e8aced7df03e25c5bfaa0 | 116 +++++ ...d0fd3bc09c75f5f8100254c71373728ed180204c0a | 97 ++++ ...bc15b9e18e5fe554657dd6d61de3dd55540baeb9b6 | 97 ++++ ...bbd88a225998b65767a08e481c31115be4211f841a | 6 + ...c9a8ce5bbc80d8c5e728871541446950d6b636438b | 71 +++ ...890fe999c0ebb8db7069468f86f3370822b94f63f2 | 95 ++++ ...ab99c916ea361109b6a273924347c2e00d1d3aa1ec | 39 ++ ...b874352b9de25900f1e65787b9885f1b346518d86d | 122 +++++ ...0517215d645f46eb1b8a8156ff85d98570a8cd3748 | 27 + ...05d370b47f6c2f9a68b6b86109bf61e72ffdf30416 | 95 ++++ ...029a48f9508588c9accfe48aad5bba3e08e9f2d8ae | 96 ++++ ...188dd5f7eac914cb427e4fe367737e5ee7f665f12b | 108 ++++ ...ff2a8e837ac98c701be193a4385596243f50f9fe39 | 193 ++++++++ ...dc9c244eaebbdea4e57a8e7b1b202650e3a899be71 | 92 ++++ ...d2e6983434a630160f26a76aad9e8b41d3c6302719 | 164 +++++++ ...97fab3d6dd735404419e86f0b4744590da71af369a | 403 +++++++++++++++ ...edf9f65edfc9406c1f40e84d567ff2278da01406d5 | 97 ++++ ...885dff25a6aa19daf5eb6258b29ec7c59023f27cc3 | 343 +++++++++++++ ...2988df56f9423131d9f7e9524ba144539b8ea5eee7 | 96 ++++ ...041e2b3da73ef7b276dc821d3c6519fac9a0bb5e3f | 33 ++ ...c7946d61dec0a9121fbff4e24f296ffdfb86396aff | 2 + ...6ae077ae054c035a1eda633f55792b232ddd05b563 | 190 ++++++++ ...cedc74971f7721200d9260cac2062eb1c6f7289ddc | 32 ++ ...88799466659ccfe8d45e1154b80cdf0de076b1ced8 | 73 +++ ...97c9a65d67e31e268c166e95482a2eb6172ab696e7 | 116 +++++ ...c394d1f566c0cccd55ea38f27948972b6522cf6dfd | 188 +++++++ ...8c7ae3184a6fafe787529b3b84b82b20a38fbb6bfb | 78 +++ ...3a73418e06aeef63e2105aa5acbde1f7f1735719a9 | 95 ++++ ...a3d9661bab09d86e55ea080277e959dcad787b705d | 73 +++ ...ec98ddf97c77f714b7d9b25e9014cc4e7f1bccc242 | 249 ++++++++++ ...e1a58f028efad4a0c5dd4eb95f062736c7261be8b4 | 113 +++++ ...2b3b1dfaa0e6a2b9eb9d5003a242782c51f0367843 | 6 + ...91e12caf5a0cf71dea03253dcf6fee2f716cee2853 | 150 ++++++ ...57b215a6e74a0cb3f9fb8c63707c0b4ba3a71c5cd4 | 6 + ...273848309946e0c98dd0c8f813150ef32469319627 | 95 ++++ ...87eeb267c8ab60daed955d1b6696c562776fcdac19 | 95 ++++ ...b0a144348469005a28b5db9393d9631c78e576d2b4 | 8 + ...73ae2a9a11652a15e34f75927433ca11f19ed76510 | 95 ++++ ...a447f9d0c3babb2ffca7cd21061d13c0bca9a71380 | 248 ++++++++++ ...c3fd30b4e0993f429c344140fd189cbdc5912babeb | 6 + ...395d0a9084862d4118797d32845cf205c94b6d7804 | 4 + ...b0d52757eeed06ab01b07d38e9d4fa7e4121826664 | 285 +++++++++++ ...33c4d95ecc8afccc3ece23326c30563833b6c3efc1 | 176 +++++++ ...9e92a9b502e3545daa9d29315b3dccffbd7e8f8813 | 64 +++ ...03d729dbd951ad80cb90b15669b72c45b9348c9222 | 89 ++++ ...489cb98efd6e76adc5d0355b3d13c2e281c1870ea2 | 6 + ...6f9b23867947d16429763bb22beaa574fd81c52a30 | 243 +++++++++ ...e0c12ea05461721c4aff433af5b3615cf6023124f8 | 52 ++ ...39a4176e4e0f99430e49ae8cf8cb3c7b8c5fde4913 | 95 ++++ ...7ce82d4d8ef151c83246ab1dbe11a566c48a12a1c0 | 35 ++ ...90df36c293f3abdb6dae4b29677d524717bb109179 | 461 ++++++++++++++++++ ...1f36a8ff95b21bf5781647b1b06fdeaababbcf7280 | 23 + ...e4866e72617fd2ac9a161c8a383d2cbf8ea5794f6a | 121 +++++ ...b43185dd502775c0c3a7045f35528781ebbef4f557 | 4 + ...4d7c43dd347621d133c73eb3c7c914f155840503b2 | 95 ++++ ...6a7f0fba3d5710d88775e2f5f2d717b51cea920fa8 | 10 + ...4d80981c0c91a39aa4a672ed65e6e9e32ab490123c | 134 +++++ ...cb78e3c2993d61f9aed523f0c336358313875e6146 | 152 ++++++ ...f61d96c9051ee1589b3d53f7a586b6931d69c60d71 | 115 +++++ ...3df2dc9193937d95f2a5ca2933d7e2dd4b2037969e | 77 +++ ...0bf87de0acc8cfe6b698543009d95ad7be0ef1b2fc | 62 +++ ...b50e67cf7a400fc2f428894028b995428b5f5f33d6 | 6 + ...70a777a7d62cdea4fa79895564367fd2952fbce9bb | 4 + ...7d44824a2a6622f35095a0c955bbec736f6b900c9e | 4 + ...21e44901fa054b0c062b73e37d7980ea78fe510623 | 8 + ...9e5b08916d0cd60490eaac72f7627110bb2e52267a | 96 ++++ ...e628c1b9b07023a4a386a2ba94c587af83c11c8b04 | 71 +++ ...85a5015277dce2af42bf90705900ace4af4880ced6 | 116 +++++ ...1baea0fcbce19cf93bfda8ff51b75ec1bdca93ed19 | 100 ++++ ...d9b9a54c5733014339298666e306bacfbbd607a47e | 72 +++ ...3b63a93beeea195b938c9c504e2795bcb391cb3842 | 124 +++++ ...dbfc2cda106cb93b7cf99eab79a8481004e21115b9 | 132 +++++ ...13db3ad08151354314985c98eb9618e35ac20e0ded | 60 +++ ...e8dbcf3b7746df878244fb244e2f49c078b27a01a4 | 97 ++++ ...c03182bc64b796f84cc2f1bd298d66936a7e1b2762 | 250 ++++++++++ .ruby-version | 1 + Gemfile | 9 + Gemfile.lock | 67 +++ _includes/footer.html | 10 +- _includes/head.html | 2 +- _includes/table-of-contents.html | 4 +- _layouts/default.html | 2 +- _layouts/post.html | 10 +- _posts/2015-02-01-html-basics.md | 10 +- _posts/2015-02-02-html-syntax.md | 25 +- index.html | 2 +- 91 files changed, 8256 insertions(+), 31 deletions(-) create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/01/107e0f3b8607d3fda4aa5f540baf0b997ce3a8b3dd34d4f42282d4dac52cd0 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/02/5b0f42020713249259a68d864592ff3425a74bf3ae2a28315ecc329bc2adba create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/04/13ffb07a1a53093d779160dc575af6889af59395627feabd935ef34f3b05d8 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/05/a4eff32fc666cc3a2b4fc5f1c7dea631f4069eda83ad8311f33bbef324f4b6 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/08/18b99276a4be52bd90a3a15c6e7a7381dedd82145e8aced7df03e25c5bfaa0 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/0b/4c1063b0b60a2caba02ed0fd3bc09c75f5f8100254c71373728ed180204c0a create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/10/1ac0207f036f142559c2bc15b9e18e5fe554657dd6d61de3dd55540baeb9b6 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/15/53c4c1697311b0472af9bbd88a225998b65767a08e481c31115be4211f841a create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/18/cc3949f43561c4b8478ac9a8ce5bbc80d8c5e728871541446950d6b636438b create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1b/0be99ec92cdf0a48dcb1890fe999c0ebb8db7069468f86f3370822b94f63f2 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1c/caabefcb7d8deaa4b885ab99c916ea361109b6a273924347c2e00d1d3aa1ec create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1f/c086e8cb92247076823eb874352b9de25900f1e65787b9885f1b346518d86d create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/24/918d8fc9f5ee2d11978a0517215d645f46eb1b8a8156ff85d98570a8cd3748 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/29/cf41dca86cce44ebadf205d370b47f6c2f9a68b6b86109bf61e72ffdf30416 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/2594f5c96f11a060e15c029a48f9508588c9accfe48aad5bba3e08e9f2d8ae create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/b581f907788bc1153391188dd5f7eac914cb427e4fe367737e5ee7f665f12b create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/dee23bee5428ceeea4f6ff2a8e837ac98c701be193a4385596243f50f9fe39 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2b/2aa9c3e63dc572ec1b58dc9c244eaebbdea4e57a8e7b1b202650e3a899be71 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2e/e0d3f8a4b47c161dcec4d2e6983434a630160f26a76aad9e8b41d3c6302719 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/30/1d53593e14f1d191e76a97fab3d6dd735404419e86f0b4744590da71af369a create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/34/8fecb4ceceaff60e9a79edf9f65edfc9406c1f40e84d567ff2278da01406d5 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/39/fcd8bbede8c0acc09aa8885dff25a6aa19daf5eb6258b29ec7c59023f27cc3 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec15e1d31ca0423312f82988df56f9423131d9f7e9524ba144539b8ea5eee7 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec81544b9f884a2d63e0041e2b3da73ef7b276dc821d3c6519fac9a0bb5e3f create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/44/30080ca9e70b93fa0185c7946d61dec0a9121fbff4e24f296ffdfb86396aff create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/745521c4077337b8b5526ae077ae054c035a1eda633f55792b232ddd05b563 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/ba59d41e0b1d47b05ae2cedc74971f7721200d9260cac2062eb1c6f7289ddc create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/46/95106623d257e2b3333488799466659ccfe8d45e1154b80cdf0de076b1ced8 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/49/7b6295ef2e77c4af6b3b97c9a65d67e31e268c166e95482a2eb6172ab696e7 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/4f/f85112d6d16903006bf7c394d1f566c0cccd55ea38f27948972b6522cf6dfd create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/370ec4c68d2759daf3368c7ae3184a6fafe787529b3b84b82b20a38fbb6bfb create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/806e5d8a0c027f9d720a3a73418e06aeef63e2105aa5acbde1f7f1735719a9 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5e/d4bf4c63c5d0e60fd4a8a3d9661bab09d86e55ea080277e959dcad787b705d create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5f/f04db3d5d81708d5f9f9ec98ddf97c77f714b7d9b25e9014cc4e7f1bccc242 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/61/716c9a8874b7f15759e4e1a58f028efad4a0c5dd4eb95f062736c7261be8b4 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/773d25c45cabd93b74482b3b1dfaa0e6a2b9eb9d5003a242782c51f0367843 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/d3f00de45e60986d732291e12caf5a0cf71dea03253dcf6fee2f716cee2853 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/65/bb89c6c8200458f9793757b215a6e74a0cb3f9fb8c63707c0b4ba3a71c5cd4 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/67/5591cf4e2f0c4b8595e1273848309946e0c98dd0c8f813150ef32469319627 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/6f/4a988aff2e125573c64887eeb267c8ab60daed955d1b6696c562776fcdac19 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/70/9bde5e12618b5ef63364b0a144348469005a28b5db9393d9631c78e576d2b4 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/81/aa50565c3fbad385c9ee73ae2a9a11652a15e34f75927433ca11f19ed76510 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/82/799e5b8d10cd776a5ed6a447f9d0c3babb2ffca7cd21061d13c0bca9a71380 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/36f8a4a3b9159be4d4dec3fd30b4e0993f429c344140fd189cbdc5912babeb create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/69fc9fd32bdbf975601c395d0a9084862d4118797d32845cf205c94b6d7804 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/95/b1e049b02e91e337f515b0d52757eeed06ab01b07d38e9d4fa7e4121826664 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/96/b4873d98b00742a997e433c4d95ecc8afccc3ece23326c30563833b6c3efc1 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9a/4431b8a5102f2ec4bf8f9e92a9b502e3545daa9d29315b3dccffbd7e8f8813 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9c/a6ce1f6e3e379ba2d32003d729dbd951ad80cb90b15669b72c45b9348c9222 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a0/481fc0bb70827a9152f3489cb98efd6e76adc5d0355b3d13c2e281c1870ea2 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a1/a5213c6a5ec13c2a2bc06f9b23867947d16429763bb22beaa574fd81c52a30 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ad/13886a41e7e0be6678c7e0c12ea05461721c4aff433af5b3615cf6023124f8 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b3/a925c845f2301b51b84b39a4176e4e0f99430e49ae8cf8cb3c7b8c5fde4913 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b4/68373364d164fe226a527ce82d4d8ef151c83246ab1dbe11a566c48a12a1c0 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b8/43ec2af6c0f005ab2f6590df36c293f3abdb6dae4b29677d524717bb109179 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b9/c7d5c7818aeb0463edc11f36a8ff95b21bf5781647b1b06fdeaababbcf7280 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ba/db9665daa616d9554ff5e4866e72617fd2ac9a161c8a383d2cbf8ea5794f6a create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c1/5cdab27d90e81f31c300b43185dd502775c0c3a7045f35528781ebbef4f557 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c7/4744fbaf1674c1358ff24d7c43dd347621d133c73eb3c7c914f155840503b2 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/cf/de8b70103ddc0b273e626a7f0fba3d5710d88775e2f5f2d717b51cea920fa8 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d0/2dbe2c16bb860cb79a544d80981c0c91a39aa4a672ed65e6e9e32ab490123c create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/2b6f8dacdababcd18d37cb78e3c2993d61f9aed523f0c336358313875e6146 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/e1a33dd5b4c861813d6df61d96c9051ee1589b3d53f7a586b6931d69c60d71 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/dd/94b34e2994f1633362343df2dc9193937d95f2a5ca2933d7e2dd4b2037969e create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/de/de1b69269ded73a4e5c40bf87de0acc8cfe6b698543009d95ad7be0ef1b2fc create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e0/9620ea34075a95f68402b50e67cf7a400fc2f428894028b995428b5f5f33d6 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e1/507beb143444029b2fb070a777a7d62cdea4fa79895564367fd2952fbce9bb create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e4/d11cef783e0bd98fdd3c7d44824a2a6622f35095a0c955bbec736f6b900c9e create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e9/facdbdc971f0964128d121e44901fa054b0c062b73e37d7980ea78fe510623 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/eb/dc293d1dca1fe51c45099e5b08916d0cd60490eaac72f7627110bb2e52267a create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ed/4b6fbe14cb7172f1bfd7e628c1b9b07023a4a386a2ba94c587af83c11c8b04 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ee/fd1588456c77af0471a285a5015277dce2af42bf90705900ace4af4880ced6 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/36ae9f0e25d086374f201baea0fcbce19cf93bfda8ff51b75ec1bdca93ed19 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/50728110c481fbc8bca6d9b9a54c5733014339298666e306bacfbbd607a47e create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/f0444d05c2b19785f7d43b63a93beeea195b938c9c504e2795bcb391cb3842 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f6/5f35a2aa048d9205fa90dbfc2cda106cb93b7cf99eab79a8481004e21115b9 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f9/9621b4181eb81fa8b06313db3ad08151354314985c98eb9618e35ac20e0ded create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fa/28d20aba294ec7c5da78e8dbcf3b7746df878244fb244e2f49c078b27a01a4 create mode 100644 .jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fe/478c2e99fa078c67123ec03182bc64b796f84cc2f1bd298d66936a7e1b2762 create mode 100644 .ruby-version create mode 100644 Gemfile create mode 100644 Gemfile.lock diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 b/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 new file mode 100644 index 0000000..a55a63c --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 @@ -0,0 +1 @@ +I"°{"source"=>"/Users/amartinez/Documents/tequilajs/marksheet", "destination"=>"/Users/amartinez/Documents/tequilajs/marksheet/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>":title.html"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>[".sass-cache", ".jekyll-cache", "gemfiles", "Gemfile", "Gemfile.lock", "node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>[], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"127.0.0.1", "baseurl"=>nil, "show_dir_listing"=>false, "permalink"=>":title.html", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>"1..6", "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false, "syntax_highlighter"=>"rouge", "syntax_highlighter_opts"=>{:guess_lang=>true}, "coderay"=>{}}, "name"=>"MarkSheet", "description"=>"A free tutorial to learn HTML and CSS", "livereload_port"=>35729, "serving"=>true, "watch"=>true, "url"=>"http://localhost:4000"}:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/01/107e0f3b8607d3fda4aa5f540baf0b997ce3a8b3dd34d4f42282d4dac52cd0 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/01/107e0f3b8607d3fda4aa5f540baf0b997ce3a8b3dd34d4f42282d4dac52cd0 new file mode 100644 index 0000000..3a19ce8 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/01/107e0f3b8607d3fda4aa5f540baf0b997ce3a8b3dd34d4f42282d4dac52cd0 @@ -0,0 +1,6 @@ +I"

Seguramente ya estás familiarizado con los editores de documentos, como Microsoft Word, con el que puedes darle estructura a tus documentos con títulos, párrafos, listas, tablas, imágenes, negritas y texto en itálicas.

+ +

HTML provee a grosso modo el mismo número de elementos para dar formato. La diferencia principal es que dar formato en Word se hace de manera visual, mientras que el código HTML es puramente semántico: eres tú quien provee de significado a tu texto.

+ +

The same way you use ♫ notes ♬ to write music, you use HTML to write webpages.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/02/5b0f42020713249259a68d864592ff3425a74bf3ae2a28315ecc329bc2adba b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/02/5b0f42020713249259a68d864592ff3425a74bf3ae2a28315ecc329bc2adba new file mode 100644 index 0000000..a8087bf --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/02/5b0f42020713249259a68d864592ff3425a74bf3ae2a28315ecc329bc2adba @@ -0,0 +1,208 @@ +I"ßB

Syntax

+ +

In Sass, nesting CSS rules allows to define hierarchy selectors:

+ +
.title{
+  strong{}
+  em{}
+}
+ +

This will be compiled into:

+ +
.title{}
+.title strong{}
+.title em{}
+ +

Because strong and em appear within the .title rule (between the 2 curly braces { }), both will be prepended with the parent selector .title.

+ +

Nesting purpose

+ +

Because CSS priority can be tricky, it’s common to use be specific when writing selectors, by combining multiple classes/tags to prevent CSS rules to cancel each other out.

+ +
.description{}
+.description p{}
+.description p a{}
+.description p a:hover{}
+.description p strong{}
+.description table{}
+.description table tr{}
+.description table tr:nth-child(2n){}
+.description table th,
+.description table td{}
+.description table td.empty,
+.description table th.empty{}
+.description table th{}
+ +

To prevent rewriting .description, let’s use the ampersand &:

+ +
.description{}
+  p{}
+  p a{}
+  p a:hover{}
+  p strong{}
+  table{}
+  table tr{}
+  table tr:nth-child(2n){}
+  table th,
+  table td{}
+  table th{}
+  table td.empty,
+  table th.empty{}
+}
+ +

You can go even further by replacing & p and & table with & to create nested selectors:

+ +
.description{}
+  p{
+    a{
+      &:hover{}
+    }
+    strong{}
+  }
+  table{
+    tr{
+      &:nth-child(2n){}
+    }
+    th,
+    td{
+      &.empty{}
+    }
+    th{}
+  }
+}
+ +

Remember HTML nesting? The indentation in Sass allows to replicate how HTML elements are nested.

+ +

Notice how we only wrote table and .empty once for example.

+ +

It will generate exactly the CSS we started with:

+ +
.description{}
+.description p{}
+.description p a{}
+.description p a:hover{}
+.description p strong{}
+.description table{}
+.description table tr{}
+.description table tr:nth-child(2n){}
+.description table th,
+.description table td{}
+.description table td.empty,
+.description table th.empty{}
+.description table th{}
+ +

The ampersand parent selector

+ +

When you nest selectors in Sass, it basically adds a space between the parent selector and the child one. So:

+ +
//scss
+.parent{
+  .child{}
+}
+
+// becomes in css
+.parent .child{}
+ +

The space between .parent and .child defines a hierarchy: this selector targets HTML elements with class="child" nested within class="parent".

+ +

Now, what if you want to use pseudo-selectors like :hover? Or you want to have a selector with joined classes? You can use the ampersand which is shortcut for the parent selector:

+ +
//scss
+.parent{
+  &:hover{}
+  &.other-class{}
+}
+
+// becomes in css
+.parent:hover{}
+.parent.other-class{}
+ +

Notice how there is no space between .parent and either :hover or .other-class.

+ +

The .parent.other-class will target HTML elements that have class="parent other-class".

+ +

Full example

+ +
.post-content{}
+.post-content a{}
+.post-content a:hover{}
+.post-content aside{}
+.post-content blockquote{}
+.post-content code{}
+.post-content h3{}
+.post-content h3 a{}
+.post-content h4{}
+.post-content h4:before{}
+.post-content h4:after{}
+.post-content p{}
+.post-content p:first-child{}
+.post-content p:last-child{}
+.post-content ul{}
+.post-content ul ul{}
+.post-content ul ul ul{}
+.post-content dl{}
+.post-content dl:before{}
+.post-content dl dt{}
+.post-content dl dd{}
+.post-content pre{}
+.post-content pre code{}
+.post-content table{}
+.post-content table tr{}
+.post-content table tr:nth-child(2n){}
+.post-content table th,
+.post-content table td{}
+.post-content table th{}
+.post-content table td.empty,
+.post-content table th.empty{}
+.post-content table code{}
+.post-content table pre{}
+.post-content table pre:before{}
+ +
.post-content{
+  a{
+    &:hover{}
+  }
+  aside{}
+  blockquote{}
+  code{}
+  h3{
+    a{}
+  }
+  h4{
+    &:before{}
+    &:after{}
+  }
+  p{
+    &:first-child{}
+    &:last-child{}
+  }
+  ul{
+    ul{
+      ul{}
+    }
+  }
+  dl{
+    &:before{}
+    dt{}
+    dd{}
+  }
+  pre{
+    code{}
+  }
+  table{
+    tr{
+      &:nth-child(2n){}
+    }
+    th,
+    td{
+      &.empty{}
+    }
+    th{}
+    code{}
+    pre{
+      &:before{}
+    }
+  }
+}
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/04/13ffb07a1a53093d779160dc575af6889af59395627feabd935ef34f3b05d8 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/04/13ffb07a1a53093d779160dc575af6889af59395627feabd935ef34f3b05d8 new file mode 100644 index 0000000..9a36c8e --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/04/13ffb07a1a53093d779160dc575af6889af59395627feabd935ef34f3b05d8 @@ -0,0 +1,95 @@ +I"O

Alongside the several font-* properties, CSS provides many text-* properties.

+ +

text-align

+ +

The text-align property must be applied on a block-level element and defines how its text and children inline elements are horizontally aligned.

+ +
body{ text-align: left;}
+ +

The most used values are:

+ + + +

These values correspond to the same alignment buttons you find in Microsoft Word or Photohop:

+ +

+ +

The justify value is not recommended. Although it might look visually appealing because it forms a rectangle of text, it is very hard to read.

+ +

The text-align default value is start. Basically, start can either be left or right, depending on the direction set on the HTML document.

+ +

direction is a CSS property that can either be ltr (left to right) or rtl (right to left):

+ + + +

text-decoration

+ +

The text-decoration property is used to add a line on your text.

+ +

Default value: none

+ +
.deleted{ text-decoration: line-through;}
+ +
+

Deleted

+
+ +

Possible values:

+ + + +

By default, HTML links (<a>) have a text-decoration: underline; applied to them. One of the first things coders usually do is to remove this default styling:

+ +
a{ text-decoration: none;}
+ +

text-indent

+ +

The text-indent property allows to add space before the first letter of the first line of a block-level element.

+ +

Default value: 0 (zero)

+ +
blockquote{ text-indent: 30px;}
+ +
+
People always make the mistake of thinking art is created for them. But really, art is a private language for sophisticates to congratulate themselves on their superiority to the rest of the world. As my artist’s statement explains, my work is utterly incomprehensible and is therefore full of deep significance.
+
+ +

Notice how only the first line is indented. If you want to offset the whole block of text, use paddings.

+ +

As for the font-size property, you can use px, em, or even % values.

+ +

text-shadow

+ +

If you’ve ever used Photoshop, you’ve probably used the drop shadow tool. In CSS, you can add shadow to a text, to make it either fancier or more readable.

+ +

You define:

+ + + +
h1{ text-shadow: 0 2px 5px rgba(0,0,0,0.5);}
+ +
+

Hello World

+
+ +

Only the x and y values are required. The blur defaults to 0 (zero), while the color defaults to the color of the text.

+ +

This property is tricky, so use it with parsimony and don’t go crazy!

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/05/a4eff32fc666cc3a2b4fc5f1c7dea631f4069eda83ad8311f33bbef324f4b6 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/05/a4eff32fc666cc3a2b4fc5f1c7dea631f4069eda83ad8311f33bbef324f4b6 new file mode 100644 index 0000000..44e5ede --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/05/a4eff32fc666cc3a2b4fc5f1c7dea631f4069eda83ad8311f33bbef324f4b6 @@ -0,0 +1,84 @@ +I"]

Up until now, we’ve been looking at isolated snippets of HTML code. But an HTML document (or webpage, it means the same thing) requires a specific structure in order to be valid.

+ +

Why do we care about validating an HTML document?

+ + + +

Doctype

+ +

The first information to provide is the type of HTML document we’re writing: the Doctype.

+ +

Think of the doctype as the version of a car throughout the years: a Ford Fiesta bought in 1986 was a Fiesta 2. If you buy one today, it’s a Fiesta 7.

+ +

There used to be multiple versions of HTML coexisting (XHTML and HTML 4.01 have been competing standards). Nowadays, HTML 5 is the norm.

+ +

To tell the browser that the HTML document is an HTML 5, just start your document with the following line:

+ +
<!DOCTYPE html>
+ +

That’s it. Just set it and forget it.

+ +

You may wonder why this HTML 5 doctype doesn’t mention the number “5”. The W3C thought the previous doctype definitions were too confusing and took the opportunity to simplify it by removing any mention of the HTML version.

+ +

The <html> element

+ +

Apart from the doctype line, all your HTML document must be wrapped inside an <html> element:

+ +
<!DOCTYPE html>
+<html>
+  <!-- The rest of your HTML code is here -->
+</html>
+ +

The <html> is technically the ancestor of all HTML elements.

+ + + +

The same way attributes carry additional information for an HTML element, the <head> element carries additional information for the whole webpage.

+ +

For example, the title of the page (displayed on the tab) is located in the <head>:

+ +
<head>
+  <title>My fabulous blog</title>
+</head>
+ +

Other HTML elements can appear in the <head>, and only in the <head>:

+ + + +

<body>

+ +

While the <head> only contains metadata not meant to be displayed anywhere (apart from the <title>), the <body> element is where we write all our content. Everything inside the <body> will be displayed in the browser window.

+ +

A complete valid HTML document

+ +

Combining all these requirements, we can write a simple and valid HTML document:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MarkSheet</title>
+    <meta name="description" content="A simple HTML and CSS tutorial">
+  </head>
+  <body>
+    <p>Hello World!</p>
+  </body>
+</html>
+ +

If you view this example in your browser, you’ll see that:

+ + + +

The W3C provides a Markup Validation Service to check any HTML document for errors and warnings.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/08/18b99276a4be52bd90a3a15c6e7a7381dedd82145e8aced7df03e25c5bfaa0 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/08/18b99276a4be52bd90a3a15c6e7a7381dedd82145e8aced7df03e25c5bfaa0 new file mode 100644 index 0000000..0d762b8 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/08/18b99276a4be52bd90a3a15c6e7a7381dedd82145e8aced7df03e25c5bfaa0 @@ -0,0 +1,116 @@ +I"ë)

The CSS position property is versatile and powerful. It allows to set or alter an element’s position. It has 4 possible values:

+ + + +

It’s often used alongside the 4 coordinates properties:

+ + + +

static

+ +

This is the default position value: static elements just follow the natural flow. They aren’t affected by any left, right, top or bottom value.

+ +

relative

+ +

When the position is set to relative, an element can move according to its current position.

+ +
<p>Well, Ja should know his own business, I thought, and so I grasped the spear and clambered up toward the red man as rapidly as I could - being so far removed from my simian ancestors as I am</p>
+<p>I imagine the slow-witted sithic, as Ja called him, suddenly realized our intentions and that he was quite likely to lose all his meal instead of having it doubled as he had hoped</p>
+<p>When he saw me clambering up that spear he let out a hiss that fairly shook the ground, and came charging after me at a terrific rate</p>
+ +
p{ border: 1px solid blue;}
+ +
+

Well, Ja should know his own business, I thought, and so I grasped the spear and clambered up toward the red man as rapidly as I could - being so far removed from my simian ancestors as I am

+

I imagine the slow-witted sithic, as Ja called him, suddenly realized our intentions and that he was quite likely to lose all his meal instead of having it doubled as he had hoped

+

When he saw me clambering up that spear he let out a hiss that fairly shook the ground, and came charging after me at a terrific rate

+
+ +

Let’s move the second paragraph:

+ +
<p>Well, Ja should know his own business, I thought, and so I grasped the spear and clambered up toward the red man as rapidly as I could - being so far removed from my simian ancestors as I am</p>
+<p class="second">I imagine the slow-witted sithic, as Ja called him, suddenly realized our intentions and that he was quite likely to lose all his meal instead of having it doubled as he had hoped</p>
+<p>When he saw me clambering up that spear he let out a hiss that fairly shook the ground, and came charging after me at a terrific rate</p>
+ +
.second{ position: relative; border-color: red; left: 20px; top: 10px;}
+ +
+

Well, Ja should know his own business, I thought, and so I grasped the spear and clambered up toward the red man as rapidly as I could - being so far removed from my simian ancestors as I am

+

I imagine the slow-witted sithic, as Ja called him, suddenly realized our intentions and that he was quite likely to lose all his meal instead of having it doubled as he had hoped

+

When he saw me clambering up that spear he let out a hiss that fairly shook the ground, and came charging after me at a terrific rate

+
+ +

The red paragraph has moved 20px from the left and 10px from the top, relative to its natural position, where it’s supposed to be.

+ +

Notice how the blue paragraphs haven’t moved at all. By using relative positioning, the red paragraph can freely move without disrupting the layout. The only thing out of place is itself. All the other elements don’t know that element has moved.

+ +

absolute

+ +

When the position is set to absolute, an element can move according to the first positioned ancestor.

+ +

“Positioned?? What is a positioned element?”

+ +

A positioned element is one whose position value is either relative, absolute or fixed. So unless the position is not set or static, an element is positioned.

+ +

The characteristic of a positioned element is that it can act as a reference point for its child elements.

+ +

Let’s imagine a simple hierarchy:

+ +
<section>
+  I'm in position relative.
+  <p>
+    I'm in position absolute!
+  </p>
+</section>
+ +
section {
+  background: gold;
+  height: 200px;
+  padding: 10px;
+  position: relative; /* This turns the <section> into a point of reference for the <p> */
+}
+
+p {
+  background: limegreen;
+  color: white;
+  padding: 10px;
+  position: absolute; /* This makes the <p> freely movable */
+  bottom: 10px; /* 10px from the bottom */
+  left: 20px; /* 20px from the left */
+}
+ +
+
+ I'm in position relative. +

+ I'm in position absolute! +

+
+
+ +

The yellow section has a height of 200px and its position set to relative, which turns it into a point of reference for all my child elements.

+ +

As the green paragraph’s position is set to absolute, it can freely move according to the yellow section. By setting both bottom and left values, it will move from the bottom left corner.

+ +

What happens if we set both left AND right?

+ +

If the width is not set, applying left: 0 and right: 0 will stretch the element across the whole width. It’s the equivalent of setting left: 0 and width: 100%.

+ +

If the width is set, then the right value is discarded.

+ +

fixed

+ +

When the position is set to fixed, it acts like absolute: you can set left/right and top/bottom coordinates.

+ +

The only difference is that the point of reference is the viewport. It means that a fixed element won’t scroll with the page ; it is fixed on the screen.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/0b/4c1063b0b60a2caba02ed0fd3bc09c75f5f8100254c71373728ed180204c0a b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/0b/4c1063b0b60a2caba02ed0fd3bc09c75f5f8100254c71373728ed180204c0a new file mode 100644 index 0000000..e76b53c --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/0b/4c1063b0b60a2caba02ed0fd3bc09c75f5f8100254c71373728ed180204c0a @@ -0,0 +1,97 @@ +I"÷

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
+ +

Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen..

+ +

Lo que ves entre signos de mayor qué y menor qué < and > +What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/10/1ac0207f036f142559c2bc15b9e18e5fe554657dd6d61de3dd55540baeb9b6 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/10/1ac0207f036f142559c2bc15b9e18e5fe554657dd6d61de3dd55540baeb9b6 new file mode 100644 index 0000000..d92d9a4 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/10/1ac0207f036f142559c2bc15b9e18e5fe554657dd6d61de3dd55540baeb9b6 @@ -0,0 +1,97 @@ +I"

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>
+Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/15/53c4c1697311b0472af9bbd88a225998b65767a08e481c31115be4211f841a b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/15/53c4c1697311b0472af9bbd88a225998b65767a08e481c31115be4211f841a new file mode 100644 index 0000000..6c8563a --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/15/53c4c1697311b0472af9bbd88a225998b65767a08e481c31115be4211f841a @@ -0,0 +1,6 @@ +I"4

Seguramente ya estás familiarizado con los editores de documentos, como Microsoft Word, con el que puedes darle estructura a tus documentos con títulos, párrafos, listas, tablas, imágenes, negritas y texto en itálicas.

+ +

HTML provee a grosso modo el mismo número de elementos para dar formato. La diferencia principal es que dar formato en Word se hace de manera visual, mientras que el código HTML es puramente semántico: eres tú quien provee de significado a tu texto.

+ +

De la misma manera en que usas ♫ notas ♫ para escribir música, utilizas HTML para escribir páginas web.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/18/cc3949f43561c4b8478ac9a8ce5bbc80d8c5e728871541446950d6b636438b b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/18/cc3949f43561c4b8478ac9a8ce5bbc80d8c5e728871541446950d6b636438b new file mode 100644 index 0000000..a7cd85a --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/18/cc3949f43561c4b8478ac9a8ce5bbc80d8c5e728871541446950d6b636438b @@ -0,0 +1,71 @@ +I"F

Setting 4 values

+ +

When all 4 sides (top, bottom, left and right) are involved in a CSS property, that CSS property also acts as a shorthand property.

+ +

For example, the padding property can be used on its own to apply the same value to all 4 sides, but also comes in 4 variations (padding-top, padding-bottom, padding-left and padding-right) to target a specific side.

+ +
blockquote{ padding: 20px;}
+/* Is equivalent to */
+blockquote{ padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;}
+ +

But where the padding property becomes interesting, is that it can get up to 4 values. You can thus set a different value for all sides at once:

+ +
blockquote{ padding: 20px 0 10px 50px;}
+ +

The order is top, right, bottom and left.

+ +

Setting 2 or 3 values

+ +

By putting 2 values, the first one will be applied for top and bottom, the second one for right and left:

+ +
blockquote{ padding: 20px 0;}
+/*
+       top
+       20px
+left         right
+ 0             0
+      bottom
+       20px
+*/
+ +

How to remember the shorthand order

+ +

There’s an easy way to remember which value will be applied.

+ +

Instead of focusing on the values you’ve entered, think about the values you havent’.

+ + + +

Other properties that can act as “wheel” shorthands

+ +

Any property that applies to all 4 sides:

+ + + +

“So border is a shorthand property that includes border-width which is another shorthand property?”

+ +

Indeed. border is (in that order) a shorthand for:

+ + + +

However, you can not mix the two:

+ +
blockquote{ border: 1px 0 solid green;}
+/* Won't work */
+ +

But you can omit the width in border and set it separately:

+ +
blockquote{ border: solid yellow; border-width: 1px 0;}
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1b/0be99ec92cdf0a48dcb1890fe999c0ebb8db7069468f86f3370822b94f63f2 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1b/0be99ec92cdf0a48dcb1890fe999c0ebb8db7069468f86f3370822b94f63f2 new file mode 100644 index 0000000..2aa61c2 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1b/0be99ec92cdf0a48dcb1890fe999c0ebb8db7069468f86f3370822b94f63f2 @@ -0,0 +1,95 @@ +I"á

HTML stands for HyperText Markup Language:

+ + + +

Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.

+ +

Here is a sample paragraph in HTML:

+ +
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1c/caabefcb7d8deaa4b885ab99c916ea361109b6a273924347c2e00d1d3aa1ec b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1c/caabefcb7d8deaa4b885ab99c916ea361109b6a273924347c2e00d1d3aa1ec new file mode 100644 index 0000000..555ddbc --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1c/caabefcb7d8deaa4b885ab99c916ea361109b6a273924347c2e00d1d3aa1ec @@ -0,0 +1,39 @@ +I"ř

The line-height property, when applied to block-level element, defines, as its name literally suggests, the height of each line. It is not to be confused with the line spacing (a.k.a “leading”) found in most graphical softwares (like Photoshop) which determines the amount of space between lines in a paragraph. Although they both carry the same purpose (spacing lines of text), they do so in different ways.

+ +

The line-height property uses the following units:

+ + + +

The unitless values basically act like percentages. So 150% is equal to 1.5. The latter is just more compact and readable.

+ +

Why line-height is important

+ +

The purpose of the line-height is to define a readable line spacing for your text. Because readibility is dependent upon the size of the text, it is recommended to use a dynamic value that is relative to the size of the text. Using px is therefore not recommended because it defines a static value.

+ +

In some cases, using px does come in handy (when you wish to vertically align text according to another element and not according to the font size).

+ +

Because using % or em values can have unexpected values, the recommended method is unitless numbers:

+ + + +
body{ font-size: 16px; line-height: 1.5;}
+ +

The computed line height will thus be 16 * 1.5 = 24px.

+ +

Line-height inheritance

+ +

Because the line-height property is inherited by the child elements, it will remain consistent no matter what font-size is subsequently applied.

+ +
body{ font-size: 16px; line-height: 1.5;}
+blockquote{ font-size: 18px;}
+ +

The blockquote element will have a line height of 27px.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1f/c086e8cb92247076823eb874352b9de25900f1e65787b9885f1b346518d86d b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1f/c086e8cb92247076823eb874352b9de25900f1e65787b9885f1b346518d86d new file mode 100644 index 0000000..ab45515 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/1f/c086e8cb92247076823eb874352b9de25900f1e65787b9885f1b346518d86d @@ -0,0 +1,122 @@ +I"ô

There is a difference between what is written in your HTML code, and what is displayed in the browser.

+ +

As we’ve already seen, HTML tags like <p> are only read by the browser (to know what kind of content is written), but are not displayed by the browser.

+ +

We’ve also seen how it’s possible to write HTML comments in your code, to help the human reading the code, without having these comments being displayed by the browser.

+ +

Another kind of written code ignored by the browser is whitespace, which includes:

+ + + +

Line-breaks

+ +

Line-breaks and empty lines (which are a succession of line-breaks) in HTML code are ignored by the browser. They only account for a single space.

+ +
<blockquote>
+The original idea of the web was that it should be a collaborative
+
+
+space
+
+
+where you can communicate through sharing information.
+</blockquote>
+ +
+
+ The original idea of the web was that it should be a collaborative space where you can communicate through sharing information. +
+
+ +

In order to actually force a line-break, you need to use the <br> HTML element:

+ +
<p>At its best, life is completely<br>unpredictable.</p>
+ +
+

At its best, life is completely
unpredictable.

+
+ +

Tabulations

+ +

A tabulation is a special character obtained by pressing the “Tab” key. It usually moves the cursor to the next tab stop, but sometimes is converted to 2 spaces.

+ +

Anyway, like a regular space, a tabulation is invisible. It’s also ignored by the browser:

+ +
<p>
+  Let's push      this text
+  with tabulations.
+</p>
+ +
+

+ Let's push this text + with tabulations. +

+
+ +

If you want to add space before a word, you’ll have to use CSS, which we’ll cover in the next chapter.

+ +

If you want to close an HTML element, you first have to close all its children elements.

+ +

Tree format

+ +

As HTML elements can be nested within each other, you have to keep track of the order in which they have been opened, as it will affect the order in which they are closed.

+ +
<article><p>This code is written on a <strong>single</strong> line.</p></article>
+ +
+

This code is written on a single line.

+
+ +

As it can be hard to keep track of the order in which HTML elements have been opened, it is recommended to write HTML in a tree format:

+ +
<article>
+  <p>
+    This code is written on
+    <strong>multiple</strong>
+    lines but will be nevertheless
+    be displayed on a
+    <em>single</em>
+    one.
+  </p>
+</article>
+ +
+
+

+ This code is written on + multiple + lines but will be nevertheless + be displayed on a + single + one. +

+
+
+ +

The tree format allows to visually replicate the nesting levels of your HTML code. It’s thus easy to see that:

+ + + +

Write HTML for you to read

+ +

Tabulations, empty lines, successive spaces, and line-breaks, are dismissed by the computer, and are all converted into a single space.

+ +

An HTML document is both written and read by a human, but only read by a computer. Considering tabulations, spaces and line-breaks don’t affect the way a browser will read and subsequently display your webpage, you may as well format your document in the most readable way for you.

+ +

There aren’t specific rules concerning HTML formatting, but there are implicit conventions, specifically:

+ + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/24/918d8fc9f5ee2d11978a0517215d645f46eb1b8a8156ff85d98570a8cd3748 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/24/918d8fc9f5ee2d11978a0517215d645f46eb1b8a8156ff85d98570a8cd3748 new file mode 100644 index 0000000..f848712 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/24/918d8fc9f5ee2d11978a0517215d645f46eb1b8a8156ff85d98570a8cd3748 @@ -0,0 +1,27 @@ +I"

There is no such thing as an unstyled HTML element. Every webpage uses at least one CSS: the User agent Stylesheet.

+ +

The user agent stylesheet

+ +

This CSS file is included in the browser and is called:

+ + + +

Although each browser has its own User agent CSS, they are all fairly similar.

+ +

Applying a CSS reset

+ +

A browser’s default styles can interfere with the styles we actually want to apply. That’s why a CSS reset has been devised to provide a consistent base across all browsers.

+ +

It’s particularly useful for normalizing the text size and removing all margins.

+ +

You can find (and download) the HTML 5 reset.css of this website. Just include it in your <head> before your own stylesheet.

+ +
<head>
+  <link rel="stylesheet" type="text/css" href="reset.css">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/29/cf41dca86cce44ebadf205d370b47f6c2f9a68b6b86109bf61e72ffdf30416 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/29/cf41dca86cce44ebadf205d370b47f6c2f9a68b6b86109bf61e72ffdf30416 new file mode 100644 index 0000000..066465f --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/29/cf41dca86cce44ebadf205d370b47f6c2f9a68b6b86109bf61e72ffdf30416 @@ -0,0 +1,95 @@ +I"ŕ

HTML significa HyperText Markup Language:

+ + + +

Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.

+ +

Here is a sample paragraph in HTML:

+ +
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/2594f5c96f11a060e15c029a48f9508588c9accfe48aad5bba3e08e9f2d8ae b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/2594f5c96f11a060e15c029a48f9508588c9accfe48aad5bba3e08e9f2d8ae new file mode 100644 index 0000000..509a059 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/2594f5c96f11a060e15c029a48f9508588c9accfe48aad5bba3e08e9f2d8ae @@ -0,0 +1,96 @@ +I"

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/b581f907788bc1153391188dd5f7eac914cb427e4fe367737e5ee7f665f12b b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/b581f907788bc1153391188dd5f7eac914cb427e4fe367737e5ee7f665f12b new file mode 100644 index 0000000..41157ff --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/b581f907788bc1153391188dd5f7eac914cb427e4fe367737e5ee7f665f12b @@ -0,0 +1,108 @@ +I"(

There many CSS properties that require size units:

+ + + +

The most used units are:

+ + + +

Pixels

+ +

Because computer screens use pixels to display the content, it is the most common size unit in CSS.

+ +

It can be used to fix the width of an element:

+ +
body{ width: 400px;}
+ +

Or set the text size:

+ +
body{ font-size: 20px;}
+ +

Pixels in CSS are straightforward because they define absolute values: they are not affected by other inherited CSS properties.

+ +

They are also widely used for positioning and spacing purposes.

+ +

Percentages

+ +

Percentages are relative units: they rely upon the element’s parent and/or ancestor.

+ +

For example, block-level elements like paragraphs naturally take up the whole width available. The following CSS rule will resize them to half of the width available.

+ +
p{ width: 50%;}
+ +

Percentages can help set other CSS properties, like text size:

+ +
strong{ font-size: 150%;}
+ +
<p>There are <strong>important</strong> challenges ahead of us.</p>
+ +
+

There are important challenges ahead of us.

+
+ +

Em

+ +

em is a relative unit: it depends upon the value of the element’s font-size.

+ +

For example, if the parent has a font-size of 20px and you apply font-size: 0.8em to a child element, this child element will render a font-size of 16px.

+ +

Don’t confuse the em CSS size unit and the em CSS selector, which targets <em> HTML elements

+ +

The em unit is interesting as you define font sizes of HTML elements relative to one another. To design a pleasing and easy to read webpage, you need consistent visual depth. For example, you want your <h1> to be twice as big as your body text, your <h2> only 1.5 times as big, and your sidebar slightly smaller. This could easily be achieved in CSS:

+ +
body{ font-size: 16px;}
+h1{ font-size: 2em;}        /* = 32px */
+h2{ font-size: 1.5em;}      /* = 24px */
+aside{ font-size: 0.75em;}  /* = 12px */
+ +

If you decide to change the size of your body text, the relative sizes of your headings and sidebar will change accordingly, and your webpage will remain visually balanced.

+ +

By just changing one value, all other values are altered:

+ +
body{ font-size: 20px;}
+h1{ font-size: 2em;}        /* = 40px */
+h2{ font-size: 1.5em;}      /* = 30px */
+aside{ font-size: 0.75em;}  /* = 16px */
+ +

Rem

+ +

The rem unit is similar to em, but instead of depending upon the parent’s value, it relies upon the root element’s value, which is the <html> element.

+ +
html{ font-size: 18px;}
+body{ font-size: 1rem;}     /* = 18px */
+h1{ font-size: 2rem;}       /* = 36px */
+h2{ font-size: 1.5rem;}     /* = 27px */
+ +

The difference between rem and em is that rem values are fixed while em values can multiply between each other.

+ +

If you set your html{ font-size: 18px;}:

+ + + +

Quick example where 2em is different from 2rem:

+ +
html{ font-size: 20px;}
+p{ font-size: 0.8rem;}        /* = 16px */
+p span{ font-size: 2em;}      /* = 16px * 2 = 32px */
+p strong{ font-size: 2rem;}   /* = 20px * 2 = 40px */
+ +

The span rely upon the p font-size value while the strong rely upon the html font-size value.

+ +

Which unit to use?

+ +

I’d recommend pixels to start with: as they’re absolute values, they aren’t affected by the element’s context. They are straightforward, allow to set the text size, image dimensions, border width, position coordinates…

+ +

Percentage and em values can be used alongside pixels, for relative text sizes especially.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/dee23bee5428ceeea4f6ff2a8e837ac98c701be193a4385596243f50f9fe39 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/dee23bee5428ceeea4f6ff2a8e837ac98c701be193a4385596243f50f9fe39 new file mode 100644 index 0000000..94f1f0a --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2a/dee23bee5428ceeea4f6ff2a8e837ac98c701be193a4385596243f50f9fe39 @@ -0,0 +1,193 @@ +I"Ŕ-

Colors are widely used in CSS, whether for text color, background color, gradients, shadows, borders… There are several ways to define colors in CSS, each with their own pros and cons.

+ +

The color property defines the color of the text. It is pretty straightforward. What is more important is the different types of color units available.

+ +

Color names

+ +

CSS provides 145 colors names, from the most basic (black, white, orange, yellow, blue…) to the more specific (lawngreen, orchid, crimson…).

+ +
body{ color: black;}
+a{ color: orange;}
+ +

Because the color names are hard to remember, and because you probably want very specific colors, color names are not often used.

+ +

rgb

+ +

Computer monitors, TVs, mobile phones, all use the RGB color model to display colors. Basically, each color is defined by a combination of Red, Green, and Blue. The are 256 possible values for Red, Green or Blue. Because computers start counting at 0 (zero), the maximum value is 255.

+ +

Considering a color is the result of a combination of Red, Green and Blue, and because each of these 3 colors have 256 possible values, there are 256 * 256 * 256 = 16,777,216 possible colors available.

+ +

Because the RGB model is directly related to how colors are physically rendered, it has become a CSS color unit.

+ +

For example, the red color of this website is 219 amounts of Red, 78 of Green, and 68 of Blue:

+ +
a{ color: rgb(219, 78, 68);}
+ +

The black color is no amount of either Red, Green or Blue:

+ +
body{ color: rgb(0, 0, 0);}
+ +

On the other side of the spectrum, white is the full amount of each Red, Green and Blue:

+ +
body{ color: rgb(255, 255, 255);}
+ +

rgba

+ +

The rgba color unit is rgb to which we add an alpha value (ranging from 0 to 1, in decimal values), which defines how transparent the color is:

+ +
body{ color: rgba(0, 0, 0, 0.8);}
+ +

A slightly transparent black color.

+ +

The purpose of a color being transparent is to blend with the background, and consequently look slightly different depending on the context. It is particularly useful for background colors.

+ +

hsl and hsla

+ +

HSL is another way to define a color. Think of it as a color wheel.

+ +

Image

+ +

Instead of a color being a combination of Red, Green and Blue, you define:

+ + + +

Again, the red color of this website is define this way in HSL:

+ +
a{ color: hsl(4, 68%, 56%);}
+ +

4 indicates it’s red +68% indicates the red is quite prominent +56% indicates it’s halfway between black and white

+ +

The hsl color unit is easier to understand than rgb because the expected result is clearer. You basically define a color in 3 separate steps, and can play around with each value to come up with the color you want. If you want a yellow shade, you can start with a value like hsl(50, 68%, 56%), and alter the Saturation and Lightness value to find the specific shade you’re looking for.

+ +

I consider hsl to be human-readable, whereas rgb is more computer-readable.

+ +

hsla is the same as hsl, with the added value of being able to define an alpha value:

+ +
body{ color: hsla(4, 68%, 56%, 0.5);}
+ +

A transparent red color.

+ +

Hexadecimal

+ +

Colors in CSS can also be defined with hexadecimal values, like #db4e44.

+ +

To understand what hexadecimal values are, let’s look at how binary and decimal work:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + </tr> +
+ binary + 2 possible values + 01
+ decimal + 10 possible values + 0123456789
+ hexadecimal + 16 possible values + 0123456789ABCDEF
+
+ +

Consider the 0-9 numbers and the A-F letters as symbols.

+ +

Humans use the decimal system. We have 10 symbols to form numbers.

+ +

In hexadecimal, we have 16 symbols to form numbers. Because 0-9 are not enough symbols, we also use A-F. And it starts at zero. So:

+ + + +

Do I have to remember this?

+ +

Not at all! It is here to provide an explanation of how hexadecimal values work. The most important thing to remember is that there are 16 hexadecimal symbols.

+ +

Just like RGB, a hexadecimal color value is a combination of Red, Green, and Blue, each of them being represent as a hexadecimal value, like DB for Red, 4E for Green, and 44 for Blue.

+ +

Because Red, Green or Blue can only have 2 symbols, their possible values are 16 * 16 = 256, which mirrors the RGB color unit!

+ +

Why not use RGB then?

+ +

Usually, when choosing colors, you don’t write them directly. You either use a color picker, or copy/paste it from Photoshop, or choose a colour palette somewhere.

+ +

Hexadecimal values are easier to copy and paste, as they only comprise 6 characters.

+ +

Photoshop one field for hex

+ +

It is easier to copy paste a single field than 3 separate ones.

+ +

In CSS, you only need to prepend a hexadecimal color value with a hash #.

+ +

Which one to pick?

+ +

If you don’t intend to use any transparent color, stick to hexadecimal values, as they are easier to copy/paste and don’t take much space in your code.

+ +

If you want some transparency, convert your color from hex to rgba, and use the rgba color unit.

+ +

If you want to play around with your color directly in the browser, try hsl.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2b/2aa9c3e63dc572ec1b58dc9c244eaebbdea4e57a8e7b1b202650e3a899be71 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2b/2aa9c3e63dc572ec1b58dc9c244eaebbdea4e57a8e7b1b202650e3a899be71 new file mode 100644 index 0000000..6fc8935 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2b/2aa9c3e63dc572ec1b58dc9c244eaebbdea4e57a8e7b1b202650e3a899be71 @@ -0,0 +1,92 @@ +I"‰

Because an HTML element is rendered as a rectangle, it can have up to 4 borders: top, bottom, left and right. You can set a border on all sides at once, or on each side individually.

+ +

Border types and location

+ +

A CSS border has 3 properties:

+ + + +

It also has 4 possible sides:

+ + + +
blockquote{ border-color: yellow; border-style: solid; border-width: 1px;}
+ +

The shorthand property border allows to define all 3 properties at once:

+ +
blockquote{ border: 1px solid yellow;}
+ +

Single border

+ +

If you want to set a border on only one of the four sides, you need to include the border’s position in the CSS property. For example, for a bottom border, you can write:

+ +
blockquote{ border-bottom-color: yellow; border-bottom-style: solid; border-bottom-width: 1px;}
+ +

As for the border property, each side has its shorthand version:

+ +
blockquote{ border-bottom: 1px solid yellow;}
+ +

What if I want 3 borders? Do I have to set them individually?

+ +

As you would have guessed, the quickest way to have 3 borders is to set all 4 of them and then remove the one you don’t want:

+ +
blockquote{ border: 1px solid yellow; border-left: none;}
+ +

Shorthand combinations

+ +

Because there exist 3 border properties and 4 border locations, there are 12 combinations possible:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
borderborder-colorborder-styleborder-width
border-topborder-top-colorborder-top-styleborder-top-width
border-bottomborder-bottom-colorborder-bottom-styleborder-bottom-width
border-leftborder-left-colorborder-left-styleborder-left-width
border-rightborder-right-colorborder-right-styleborder-right-width
+
+ +

That’s a lot of CSS properties available. You’ll usually end up using the 5 shorthand versions only:

+ + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2e/e0d3f8a4b47c161dcec4d2e6983434a630160f26a76aad9e8b41d3c6302719 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2e/e0d3f8a4b47c161dcec4d2e6983434a630160f26a76aad9e8b41d3c6302719 new file mode 100644 index 0000000..5a936ed --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/2e/e0d3f8a4b47c161dcec4d2e6983434a630160f26a76aad9e8b41d3c6302719 @@ -0,0 +1,164 @@ +I" 5

When you find yourself writing the same code over and over again, it feels like Sass mixins might help you out.

+ +

Sass mixins are CSS functions that you can include whenever you want.

+ +

Syntax

+ +

Remember how we wrote @keyframes when creating CSS animations? The Sass mixin syntax is fairly similar:

+ +
@mixin overlay() {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+ +

The name of this mixin is overlay. You can reference this mixin in any CSS rule by using @include:

+ +
.modal-background{
+  @include overlay();
+  background: black;
+  opacity: 0.9;
+}
+ +

As usual, this .scss will be compiled into .css:

+ +
.modal-background{
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: black;
+  opacity: 0.9;
+}
+ +

Reusability

+ +

The main purpose of a mixin is to make a set of properties reusable.

+ +

Like Sass variables (where you define your values on a single location), Sass mixins allow you to define properties on a single location.

+ +

The previous mixin can be reused in other rules:

+ +
.modal-background{
+  @include overlay();
+}
+
+.product-link{
+  @include overlay();
+}
+
+.image-pattern{
+  @include overlay();
+}
+ +
.modal-background{
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.product-link{
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.image-pattern{
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+ +

Parameters

+ +

Because mixins are functions and because you might want to alter the output, mixins can accept parameters.

+ +

For example, this border-radius mixin prevents rewriting vendor prefixes and takes the actual radius value as a parameter:

+ +
@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+      -ms-border-radius: $radius;
+          border-radius: $radius;
+}
+
+.box{
+  @include border-radius(3px);
+}
+ +
.box{
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+      -ms-border-radius: 3px;
+          border-radius: 3px;
+}
+ +

The mixin circumvents the hassle of having to write all vendor prefixes, and uses the $radius to allow defining the same radius value for every vendor property.

+ +

Optional parameters

+ +

If you want a parameter to have a default value while providing the possibility to set one occasionally, you can create optional paramaters:

+ +
@mixin label($text: "Code", $background: $yellow, $color: rgba(black, 0.5)) {
+  position: relative;
+  &:before{
+    background: $background;
+    color: $color;
+    content: $text;
+    display: inline-block;
+    font-size: 0.6rem;
+    font-weight: 700;
+    height: 1rem;
+    left: 0;
+    letter-spacing: 0.1em;
+    line-height: 1rem;
+    padding: 0 0.5em;
+    position: absolute;
+    text-transform: uppercase;
+    top: 0;
+  }
+}
+ +

This mixin is the one used by this website to add labels in the top left corner of code snippets. It has 3 optional parameters, each of them with their own default value set with a colon :.

+ +

This mixin is used several times throughout the code:

+ +
div.highlighter-rouge{
+  @include label();
+  &.css{
+    @include label("CSS", $blue, white);
+  }
+  &.scss{
+    @include label("SCSS", #c69, white);
+  }
+}
+ +

The div.highlighter-rouge will use the mixin’s default values:

+ + + +

The .css and .scss versions, because their parameters are set, will use different labels and colors.

+ +

Mixin libraries

+ +

If you don’t want to spend time writing your own Sass mixins, you can use any of the following mixin libraries:

+ + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/30/1d53593e14f1d191e76a97fab3d6dd735404419e86f0b4744590da71af369a b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/30/1d53593e14f1d191e76a97fab3d6dd735404419e86f0b4744590da71af369a new file mode 100644 index 0000000..da27845 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/30/1d53593e14f1d191e76a97fab3d6dd735404419e86f0b4744590da71af369a @@ -0,0 +1,403 @@ +I"q]

We’ve just seen how CSS transitions are just a way to animate CSS properties between a starting state, and an end state.

+ +

SO CSS transitions are specific kind of animations, where:

+ + + +

Well what if you want:

+ + + +

CSS animations allow all of this, and more.

+ +

CSS animations are like mini movies where you are the director giving out instructions (CSS rules) to your actors (HTML elements) for different scenes (keyframes).

+ +

Animation properties

+ +

Like the transition property, animation is a shorthand property for several others:

+ + + +

Quick example

+ +

To animate a loading button, you could write a bouncing animation:

+ +
@keyframes bouncing{
+  0%  { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
+  100%{ bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);}
+}
+
+.loading-button{ animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both;}
+ +
+ Loading +
+ +

You first need to write the actual bouncing animation using keyframes and naming it bouncing. Then you can use that animation by applying it to .loading-button.

+ +

I used the shorthand animation property, and included all options:

+ + + +

@keyframes

+ +

Before applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in an animation. They are defined using percentages:

+ + + +

You can also use the keywords from and to instead of 0% and 100% respectively.

+ +

You can define as many keyframes as you want, like 33%, 4% or even 29.86%. In practice, you’ll only write a few.

+ +

Each keyframe is CSS rule, meaning that you can write CSS properties just like usual.

+ +

To define an animation, just write the keyword @keyframes followed by its name:

+ +
@keyframes around {
+  0%  { left: 0; top: 0;}
+  25% { left: 240px; top: 0;}
+  50% { left: 240px; top: 140px;}
+  75% { left: 0; top: 140px;}
+  100%{ left: 0; top: 0;}
+}
+p{ animation: around 4s linear infinite;}
+ +
+

Hello

+
+ +

Notice how the start 0% and the end 100% have the same CSS rules. This ensures that the animation loops perfectly. Because the iteration count is set to infinite, the animation will go from 0% to 100%, and then back to 0% instantly and indefinitely.

+ +

animation-name

+ +

The animation’s name is used at least twice:

+ + + +
@keyframes whatever{
+  /* ... */
+}
+
+.selector{ animation-name: whatever;}
+ +

Like CSS class names, animation names can only include:

+ + + +

It can not start with a number or two dashes.

+ +

animation-duration

+ +

Just like transition durations, animation durations can be set in seconds 1s or milliseconds 200ms.

+ +
.selector{ animation-duration: 0.5s;}
+ +

It defaults to 0s, which means no animation at all.

+ +

animation-timing-function

+ +

Just like transition timing functions, animation timing functions can use keywords like linear, ease-out, or be defined using custom cubic bezier functions.

+ +
.selector{ animation-timing-function: ease-in-out;}
+ +

It defaults to ease.

+ +

Because CSS animations use keyframes, you can set a linear timing function and simulate an specific cubic bezier curve by defining a lot of very specific keyframes. Check out Bounce.js to generate advanced animations.

+ +

animation-delay

+ +

Just like transition delays, animation delays can be set in seconds 1s or milliseconds 200ms.

+ +

It defaults to 0s, which means no delay at all.

+ +

It’s useful when triggering multiple animations in sequence.

+ +
.a,.b,.c{ animation: bouncing 1s;}
+.b{ animation-delay: 0.25s;}
+.c{ animation-delay: 0.5s;}
+ +

animation-iteration-count

+ +

By default, animations are only played once (value of 1). You can set 3 types of values:

+ + + +
.selector{ animation-duration: infinite;}
+ +

animation-direction

+ +

The animation’s direction defines in which order the keyframes are read.

+ + + +

It’s easier to visualise if the animation’s iteration count is set to infinite.

+ +
+

Normal: 0% --> 100%

+
+

Reverse: 100% --> 0%

+
+

Alternate: 0% <--> 100%

+
+

Alternate reverse: 100% <--> 0%

+
+
+ +

animation-fill-mode

+ +

An animation’s fill mode defines what happens before the animation starts and after it ends.

+ +

When you define keyframes you define CSS rules to be applied at different step of the animation. Now, these CSS rules can clash with the ones already applied on the elements being animated.

+ +

The fill mode allows to tell the browser if the animation’s styles should also be applied outside of the animation.

+ +

Let’s imagine a button that is:

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + </tr> +
animation-fill-modeBefore the animationStart of the animationEnd of the animationAfter the animation
noneDefaultStartEndDefault
forwardsDefaultStartEndEnd
backwardsStartStartEndDefault
bothStartStartEndEnd
+
+ +
+

+ 1. Before the animation + 2. During the animation + 3. After the animation +

+

None: the animation styles do not affect the default style

+

+ Default red + From blue to green + Back to red again +

+
+

Forwards: the last styles applied at the end of the animation are retained afterwards

+

+ Default red + From blue to green + Remains green +

+
+

Backwards: the animation's styles will already be applied before the animation actually starts

+

+ Already blue + From blue to green + Back to red again +

+
+

Both: the styles are applied before and after the animation plays

+

+ Already blue + From blue to green + Remains green +

+
+
+ + + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/34/8fecb4ceceaff60e9a79edf9f65edfc9406c1f40e84d567ff2278da01406d5 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/34/8fecb4ceceaff60e9a79edf9f65edfc9406c1f40e84d567ff2278da01406d5 new file mode 100644 index 0000000..2a3bb96 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/34/8fecb4ceceaff60e9a79edf9f65edfc9406c1f40e84d567ff2278da01406d5 @@ -0,0 +1,97 @@ +I"V

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
+ +

Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen..

+ +

Lo que ves entre signos de mayor qué y menor qué +What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/39/fcd8bbede8c0acc09aa8885dff25a6aa19daf5eb6258b29ec7c59023f27cc3 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/39/fcd8bbede8c0acc09aa8885dff25a6aa19daf5eb6258b29ec7c59023f27cc3 new file mode 100644 index 0000000..0a16552 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/39/fcd8bbede8c0acc09aa8885dff25a6aa19daf5eb6258b29ec7c59023f27cc3 @@ -0,0 +1,343 @@ +I"Y

When we talk about gradients in CSS, we talk about gradients of colors.

+ +

There are 2 types of gradients in CSS:

+ + + +

A gradient is considered a background image and must be used with the according property.

+ +

linear-gradient

+ +

The syntax for linear gradients is quite complex, but the basic idea is to define:

+ + + +

Let’s start with a simple 2 color gradient:

+ +
div{ background-image: linear-gradient(red, blue);}
+ +
<div>A simple vertical background gradient</div>
+ +
+
A simple vertical background gradient
+
+ +

By default:

+ + + +

Changing the direction

+ +

If the top to bottom direction doesn’t suit you, you can alter it by either:

+ + + +

This direction must be set before the colors:

+ +
div{ background-image: linear-gradient(to bottom right, yellow, purple); width: 200px;}
+ +
<div>A diagonal gradient from the top left corner to the bottom right one</div>
+ +
+
A diagonal gradient from the top left corner to the bottom left one
+
+ +

If you want a more specific angle, you can use a value in degrees:

+ + + +
div{ background-image: linear-gradient(20deg, green, blue); width: 150px;}
+ +
<div>A diagonal gradient with an angle of 20 degrees</div>
+ +
+
A diagonal gradient with an angle of 20 degrees
+
+ +

Adding more colors

+ +

You can insert as many colors as you want. They will be equally distributed along the axis:

+ + + +
div{ background-image: linear-gradient(orange, grey, yellow); width: 150px;}
+ +
<div>A rather ugly gradient, but you get the idea</div>
+ +
+
A rather ugly gradient, but you get the idea
+
+ +

Setting specific color stops

+ +

If you don’t want colors to equally distributed, you can set specific color stop positions, using either percentages % or pixels px:

+ +
div{ background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px;}
+ +
<div>An even uglier gradient, but you get the idea</div>
+ +
+
An even uglier gradient, but you get the idea
+
+ +

In this setup:

+ + + +

radial-gradient

+ +

While linear gradients follow a single-line axis, radial gradients spread out in all directions. Their syntax is fairly similar to linear ones, as they both have color stops. But instead of specifying a direction you need to specify:

+ + + +
div{ background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px;}
+ +
<div>This looks like the sun, doesn't it?</div>
+ +
+
This looks like the sun, doesn't it?
+
+ +

By default:

+ + + +

start position

+ +

The start position works like background positions. You set it with the at keyword.

+ +
div{ background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px;}
+ +
<div>A gloomy day.</div>
+ +
+
A gloomy day.
+
+ +

end position

+ +

By default, the shape will end at the farthest corner. You can either choose:

+ + + +

The difference is both hard to grasp and to visualize, so I won’t go into details. Mozilla has a good description of the different values.

+ +
div{ background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
+div:hover{ background-image: radial-gradient(farthest-side at 20px 20px, green, blue)}
+ +
<div>Hover this green star in the sky to see it expand.</div>
+ +
+
Hover this green star in the sky to see it expand.
+
+ +

fixed size

+ +

Instead of setting both start and end positions, you can just set specific dimensions:

+ +
div{ background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px;}
+ +
<div>A small violet disc in a sea of pink.</div>
+ +
+
A small violet disc in a sea of pink.
+
+ +

CSS gradients are powerful, considering how endless the options are.

+ +

The examples of this page are voluntarily “ugly”, with pronounced color differences, to better explain what how each property works.

+ +

But it’s quite easy to write more subtle gradients, especially for buttons:

+ +
.button-grey  { background-image: linear-gradient(#f2f2f2, #f2f2f2);}
+.button-yellow{ background-image: linear-gradient(#fce374, #fcdf5b);}
+.button-orange{ background-image: linear-gradient(#f58a38, #f57c20);}
+.button-red   { background-image: linear-gradient(#ed6d64, #ed574c);}
+.button-purple{ background-image: linear-gradient(#847bba, #7568ba);}
+.button-blue  { background-image: linear-gradient(#42b0e3, #2ba9e3);}
+.button-green { background-image: linear-gradient(#97cc76, #8bcc62);}
+ +
+ Button + Button + Button + Button + Button + Button + Button +
+ + + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec15e1d31ca0423312f82988df56f9423131d9f7e9524ba144539b8ea5eee7 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec15e1d31ca0423312f82988df56f9423131d9f7e9524ba144539b8ea5eee7 new file mode 100644 index 0000000..67366bf --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec15e1d31ca0423312f82988df56f9423131d9f7e9524ba144539b8ea5eee7 @@ -0,0 +1,96 @@ +I"

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
+ +

Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen..

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec81544b9f884a2d63e0041e2b3da73ef7b276dc821d3c6519fac9a0bb5e3f b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec81544b9f884a2d63e0041e2b3da73ef7b276dc821d3c6519fac9a0bb5e3f new file mode 100644 index 0000000..c31d3bb --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/43/ec81544b9f884a2d63e0041e2b3da73ef7b276dc821d3c6519fac9a0bb5e3f @@ -0,0 +1,33 @@ +I"h +

The padding is the space between an element’s border and its content.

+ +

The amount of space can be defined using any of the size units.

+ +
blockquote{ padding: 20px;}
+ +

As for borders, the padding can be set individually for any of the 4 sides.

+ +
blockquote{ padding-bottom: 20px;}
+ +

Because the padding lies between the border and the content, it’s easier to visualize the inner space with a border applied:

+ +
blockquote{ background: yellow; border: 1px solid blue;}
+ +
+
+ Good night, good night! Parting is such sweet sorrow, that I shall say good night till it be morrow. +
+
+ +

Adding a padding will provide space between the textual content and the borders:

+ +
blockquote{ background: yellow; border: 1px solid blue; padding: 20px;}
+ +
+
+ Good night, good night! Parting is such sweet sorrow, that I shall say good night till it be morrow. +
+
+ +

Notice how the element’s background stretches until its borders. Applying padding allows to extend that background.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/44/30080ca9e70b93fa0185c7946d61dec0a9121fbff4e24f296ffdfb86396aff b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/44/30080ca9e70b93fa0185c7946d61dec0a9121fbff4e24f296ffdfb86396aff new file mode 100644 index 0000000..26eae4c --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/44/30080ca9e70b93fa0185c7946d61dec0a9121fbff4e24f296ffdfb86396aff @@ -0,0 +1,2 @@ +I"L

Webpages mostly consist of text. Historically, stylesheets for print software (like Adobe Indesign, QuarkXPress, or even Microsoft Word) were only meant to format text. Although CSS also allows to alter the layout of a webpage, formatting text with CSS is the first thing people usually do.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/745521c4077337b8b5526ae077ae054c035a1eda633f55792b232ddd05b563 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/745521c4077337b8b5526ae077ae054c035a1eda633f55792b232ddd05b563 new file mode 100644 index 0000000..201417f --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/745521c4077337b8b5526ae077ae054c035a1eda633f55792b232ddd05b563 @@ -0,0 +1,190 @@ +I"3?

CSS transitions allow to smoothly go from one element’s state to another. How it works is that individual properties are animated from an initial to a final state.

+ +

You can define:

+ + + +

You can set each CSS property individually, or use the shorthand version: transition. In that case, only the duration is mandatory.

+ +

Keep in mind that a transition is a specific kind of animation, where there’s only a start and an end state.

+ +

Quick example

+ +

Transitions are often used on hover states.

+ +
a{ background: lightgrey; color: grey;}
+a:hover{ background: yellow; color: red;}
+a.with-transition{ transition: 1s;}
+ +
+ Without transition + With transition +
+ +

Instead of the hover CSS rules being instantaneous, both the background and the text colors are slowly animated.

+ +

transition-duration

+ +

A transition’s duration is the only CSS property needed to create a transition. It can either be set in seconds 2s or milliseconds 100ms.

+ +

If you want your transition to last half a second, you can either write 0.5s or 500ms. Depending on how fast you want your transitions to be, one unit might be easier and/or quicker to write.

+ +
a{ background: lightgrey; color: grey;}
+a:hover{ background: yellow; color: green;}
+a.with-fast-transition{ transition-duration: 0.5s;}
+a.with-slow-transition{ transition: 3s;}
+ +
+ Without transition + A 0.5s transition + A 3s transition +
+ +

transition-property

+ +

Only 1/3 of CSS properties can be animated. Mozilla has a complete list.

+ +

By default, the transition-property property has a value of all, which simply means it will animate all possible properties.

+ +

You can decide to only animate 1 or several properties.

+ +
a{ background: lightgrey; color: grey;}
+a:hover{ background: yellow; border: 5px solid blue; color: green;}
+a.with-background-transition{ transition-duration: 2s; transition-property: background;}
+a.with-all-transition{ transition-duration: 2s;}
+ +
+ Without transition + With only background transition + With all transitions +
+ +

The border property is fully animatable and allows to easily visualize the slow (2 seconds) transition.

+ +

transition-timing-function

+ +

The timing function determines how each property’s value is calculated during the transition.

+ +

By default, the transition is eased: it accelerates at the start and slows down at the end.

+ +

You can meaning that the transition will happen at a constant speed. Timing functions can make the transition accelerate and/or slow down.

+ +

The easiest way to visualize timing functions is by altering position properties, like left.

+ +
div{ left: 0; position: relative; transition: 1s;}
+main:hover div{ left: 200px;}
+.ease{ transition-timing-function: ease;} /* Default behavior */
+.linear{ transition-timing-function: linear;} /* Constant speed */
+.ease-in{ transition-timing-function: ease-in;}
+.ease-out{ transition-timing-function: ease-out;}
+.ease-in-out{ transition-timing-function: ease-out;}
+ +
<main>
+  <p><strong>Ease</strong>: slow start, fast middle, slow end</p>
+  <div class="ease"></div>
+  <p><strong>Linear</strong>: constant speed</p>
+  <div class="linear"></div>
+  <p><strong>Ease In</strong>: slow start, fast end</p>
+  <div class="ease-in"></div>
+  <p><strong>Ease Out</strong>: fast start, slow end</p>
+  <div class="ease-out"></div>
+  <p><strong>Ease In Out</strong>: like ease, but with more pronounced acceleration/deceleration curves</p>
+  <div class="ease-in-out"></div>
+</main>
+ +
+

Ease: slow start, fast middle, slow end

+
+

Linear: constant speed

+
+

Ease In: slow start, fast end

+
+

Ease Out: fast start, slow end

+
+

Ease In Out: like ease, but with more pronounced acceleration/deceleration curves

+
+
+ +

Keep in mind that all transitions take the same amount of time (1 second).

+ +

If you want to visualize how other timing functions work, check out this Easing Functions Cheat Sheet.

+ +

cubic-bezier

+ +

If all these pre-defined timing functions don’t suit you, you can write your own using cubic bezier functions.

+ +

The website cubic-bezier.com is a simple tool to visually write your own curves.

+ +

transition-delay

+ +

A delay will define how long the transitions has to wait before actually starting.

+ +

Like transition-duration, you can either use seconds s or milliseconds ms.

+ +
a{ background: blue; color: white; transition: all 1s;}
+div:hover a{ background: red;}
+a.with-delay{ transition-delay: 1s;}
+ +
<div>
+  <p>Hover the grey area</p>
+  <a>Without any delay</a>
+  <a class="with-delay">With a second delay</a>
+</div>
+ +
+
+

Hover the grey area

+ Without any delay + With a second delay +
+
+ + + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/ba59d41e0b1d47b05ae2cedc74971f7721200d9260cac2062eb1c6f7289ddc b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/ba59d41e0b1d47b05ae2cedc74971f7721200d9260cac2062eb1c6f7289ddc new file mode 100644 index 0000000..0e1530e --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/45/ba59d41e0b1d47b05ae2cedc74971f7721200d9260cac2062eb1c6f7289ddc @@ -0,0 +1,32 @@ +I"­

In CSS, some properties can be grouped together under another property, to save time and space. The font property regroups (in this particular order):

+ + + +

You can thus define 6 properties through a single one:

+ +
body{ font: italic small-caps bold 16px/1.5 Arial, sans-serif;}
+ +

They have to be written in this particular order and there must be a slash / between the font-size and the line-height.

+ +

Although I’ve defined all 6 properties, only the font-size and font-family are mandatory. You can thus omit to define the other properties if you intend to keep their default values:

+ +
body{ font: bold 16px/1.5 Arial, sans-serif;}
+ +

Because font-style and font-variant have not been defined, they’ll use their default value normal.

+ +

Beware! If you’ve previously define one of the font properties and use the font shorthand afterwards, it will override the previously defined values.

+ +
body{ font-size: 16px; line-height: 1.5;}
+ul{ font: 14px Georgia, serif;}
+ +

In the font shorthand, the line-height has not been defined, and will lose its ancestor’s value of 1.5 and will revert to its default value medium (which is usually 1.2).

+ +

Other shorthand properties exist, like background, border and margin.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/46/95106623d257e2b3333488799466659ccfe8d45e1154b80cdf0de076b1ced8 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/46/95106623d257e2b3333488799466659ccfe8d45e1154b80cdf0de076b1ced8 new file mode 100644 index 0000000..4f25a13 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/46/95106623d257e2b3333488799466659ccfe8d45e1154b80cdf0de076b1ced8 @@ -0,0 +1,73 @@ +I"·

While paragraphs and lists are meant to identify whole blocks of text, we sometimes want to provide meaning to a word (or a few words) within a text.

+ +

Strong

+ +

For important words, use the <strong> tag:

+ +
<p>
+  This is <strong>important</strong> but this is not.
+</p>
+ +
+

+ This is important but this is not. +

+
+ +

By default, <strong> elements are displayed in bold, but keep in mind that it is only the browser’s default behavior. Don’t use <strong> only to put some text in bold, but rather to give it more importance.

+ +

Emphasis

+ +

For emphasized words, use the <em> tag:

+ +
<p>
+  This is <em>emphasized</em> but this is not.
+</p>
+ +
+

+ This is emphasized but this is not. +

+
+ +

By default, <em> elements are displayed in italic, but keep in mind that it is only the browser’s default behavior. Don’t use <em> only to put some text in italic, but rather to give it stress emphasis.

+ +

Abbreviations

+ +

Abbreviations like W3C or CD can use the <abbr> element:

+ +
<p>
+  I just bought a <abbr>CD</abbr>.
+</p>
+ +

You can add a title attribute to specify the abbreviation’s description, which will appear by hovering the element:

+ +
<p>
+  I just bought a <abbr title="Compact Disc">CD</abbr>.
+</p>
+ +
+

+ I just bought a CD. +

+
+ +

Inline quotes

+ +

The <blockquote> element is a block-level element. It has an inline version: <q>:

+ +
<p>
+  He said <q>“Hello World”</q> and just left.
+</p>
+ +
+

+ He said “Hello World” and just left. +

+
+ +

Other inline elements

+ +

There are plenty of other inline semantic elements to choose from, but we’ve covered the most common ones.

+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/49/7b6295ef2e77c4af6b3b97c9a65d67e31e268c166e95482a2eb6172ab696e7 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/49/7b6295ef2e77c4af6b3b97c9a65d67e31e268c166e95482a2eb6172ab696e7 new file mode 100644 index 0000000..1b531e3 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/49/7b6295ef2e77c4af6b3b97c9a65d67e31e268c166e95482a2eb6172ab696e7 @@ -0,0 +1,116 @@ +I"F

When your write HTML code, you write text. But what is usually displayed in the browser is also text.

+ +

Although images, videos, and music have grown in popularity, websites still mostly comprise text content, such as this particular paragraph you are currently reading.

+ +

Paragraphs

+ +

Paragraphs <p> are the most used HTML element, as they act as the default block-level element and are quick to write.

+ +
<p>
+  Rank grass, waist high, grows upon the plain of Phutra—the gorgeous flowering grass of the inner world, each particular blade of which is tipped with a tiny, five-pointed blossom—brilliant little stars of varying colors that twinkle in the green foliage to add still another charm to the weird, yet lovely, landscape.
+</p>
+ +

Lists

+ +

Lists come in 3 variations:

+ + + +

HTML lists require a specific structure:

+ + + +

Unordered lists

+ +

They are the most commonly used types of lists. They are meant to group together a list of indiviudal items, in no particular order.

+ +
<p>My shopping list:</p>
+<ul>
+  <li>Milk</li>
+  <li>Bread</li>
+  <li>Chocolate</li>
+  <li>More chocolate</li>
+</ul>
+ +

List items are displayed with bullet points.

+ +
+

My shopping list:

+ +
+ +

Ordered lists

+ +

Ordered lists are used when the order of its items is relevant.

+ +
<ol>
+  <li>Step one</li>
+  <li>Step two</li>
+  <li>????</li>
+  <li>PROFIT!!!</li>
+</ol>
+ +

Ordered lists are automatically numbered by the browser. You don’t need to include the numbers in your HTML.

+ +

Definition lists

+ +

Definition lists are for items that come in pairs. They must include pairs of <dt> definition terms and <dd> definition descriptions as direct children.

+ +
<dl>
+  <dt>Web</dt>
+  <dd>The part of the Internet that contains websites and webpages</dd>
+  <dt>HTML</dt>
+  <dd>A markup language for creating webpages</dd>
+  <dt>CSS</dt>
+  <dd>A technology to make HTML look better</dd>
+</dl>
+ +
+
+
Web
+
The part of the Internet that contains websites and webpages
+
HTML
+
A markup language for creating webpages
+
CSS
+
A technology to make HTML look better
+
+
+ +

Definition lists are rarely used because their use cases are very specific, and only happen when the key changes every time. Tables with 2 columns are the more popular alternative.

+ +

Blockquotes

+ +

Blockquotes are used to identify a citation.

+ +
<p>Sir Tim Berners-Lee said:</p>
+<blockquote>
+  “The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.”
+</blockquote>
+ +
+

Sir Tim Berners-Lee said:

+
+ “The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.” +
+
+ +

Headings

+ +

There are 6 levels of headings available, ranging from <h1> to <h6>, 1 being the most important one.

+ +

Headings are meant to be used along with paragraphs and lists, to draw a natural structure to your document. As headings carry more semantic weight, be careful to keep the balance between important and “normal” content.

+ +

Only using headings in a HTML document wouldn’t make sense: if everything feels important, nothing really is. You need to provide depth in your structure.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/4f/f85112d6d16903006bf7c394d1f566c0cccd55ea38f27948972b6522cf6dfd b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/4f/f85112d6d16903006bf7c394d1f566c0cccd55ea38f27948972b6522cf6dfd new file mode 100644 index 0000000..ea36b41 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/4f/f85112d6d16903006bf7c394d1f566c0cccd55ea38f27948972b6522cf6dfd @@ -0,0 +1,188 @@ +I"-

We’ve seen how there are mainly 2 types of HTML elements: block-level elements and inline ones. We’ve also mentioned a few alternatives, like list-item or table-cell.

+ +

The display property allows to change the type of HTML element. By default, a paragraph <p> (a block-level element) will have a default display value of block, but can be rendered as an inline one:

+ +
p{ display: inline;}
+ +

Why not use an HTML inline element, like <span> then?

+ +

Because you choose an HTML element for its meaning, not its rendering. If we’ve decided that a paragraph is what suited our content best, we must not change the tag only for styling purposes. CSS is here to take care of the styling.

+ +

In short, display allows to alter the type of an element without changing its meaning.

+ +

Each display options have specific rendering behaviors:

+ + + +

display: block

+ +

This will turn any element into a block element.

+ +

This technique is often used on links in order to increase their clickable zone, which can be easily evaluated by setting a background color.

+ +
.menu a{ background: red; color: white;}
+ +
<ul class="menu">
+  <li>
+    <a>Home</a>
+  </li>
+  <li>
+    <a>Features</a>
+  </li>
+  <li>
+    <a>Pricing</a>
+  </li>
+  <li>
+    <a>About</a>
+  </li>
+</ul>
+ +
+ +
+ +

If we turn these links into blocks, we increase their target area:

+ +
.menu a{ background: red; color: white; display: block;}
+ +
+ +
+ +

display: inline

+ +

This turns any element into inline elements, as if they were just simple text.

+ +

It’s often used to create horizontal navigations, where list items are semantically but not visually useful.

+ +
<ul class="menu">
+  <li>
+    <a>Home</a>
+  </li>
+  <li>
+    <a>Features</a>
+  </li>
+  <li>
+    <a>Pricing</a>
+  </li>
+  <li>
+    <a>About</a>
+  </li>
+</ul>
+ +
+ +
+ +
.menu li{ display: inline;}
+ +
+ +
+ +

display: list-item

+ +

The only HTML elements displayed as list-item are the (unsurprisingly) list items <li> but also the definition descriptions <dd>.

+ +

A list item is rendered with a bullet point (if in an unordered list <ul>) or with a incremental number (if within an ordered list <ol>).

+ +

Because the rendering of these bullet points and numbers varies across browsers, and is also hard to style in CSS, the display: list-item rule is never used. Actually, it is common for <li>s to be rendered as display: block or display: inline, as they are more flexible to style.

+ +

display: none

+ +

Applying display: none; to an HTML element removes it from your webpage, as if it never existed in your code.

+ +
.gone-baby-gone{ display: none;}
+ +
<p>Did I hear someone speaking??</p>
+<p class="gone-baby-gone">Hahahahahah</p>
+<p>I must be dreaming...</p>
+ +
+

Did I hear someone speaking??

+

Hahahahahah

+

I must be dreaming...

+
+ +

There are 3 paragraphs in the code, but only 2 appear, as if the 2nd one never existed.

+ +

visibility: hidden

+ +

The CSS property visibility is slightly similar to display. Applying visibility: hidden; hides an element from your page, but only turns it invisible: it still takes up the space it was supposed to.

+ +
.hollow-man{ visibility: hidden;}
+ +
<p>So far away from me </p>
+<p class="hollow-man">So far i just can't see</p>
+<p class="hollow-man">So far away from me</p>
+<p class="hollow-man">You're so far away from me</p>
+<p>You're so far away...</p>
+ +
+

So far away from me

+

So far i just can't see

+

So far away from me

+

You're so far away from me

+

You're so far away...

+
+ +

There are 5 paragraphs in the code, only 2 appear, but the space that the hidden paragraphs were supposed to take is still there, but you can’t see them.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/370ec4c68d2759daf3368c7ae3184a6fafe787529b3b84b82b20a38fbb6bfb b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/370ec4c68d2759daf3368c7ae3184a6fafe787529b3b84b82b20a38fbb6bfb new file mode 100644 index 0000000..6fe9205 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/370ec4c68d2759daf3368c7ae3184a6fafe787529b3b84b82b20a38fbb6bfb @@ -0,0 +1,78 @@ +I"¤

There are 2 CSS preprocessors to choose from:

+ + + +

They both have been around for several years. We’re going to use Sass.

+ +

Sass vs SCSS

+ +

Sass has 2 syntaxes available:

+ + + +

The difference between Sass and SCSS is quite subtle.

+ +

Remember that:

+ + + +

We’re actually going to write SCSS but still call it Sass.

+ +

Why SCSS first

+ +

We’re gonna use SCSS for a few reasons:

+ + + +

Features

+ +

What Sass provides1 is:

+ + + +

DRY code

+ +

Everything about Sass is to provide tools to prevent repeating yourself in your code: it’s the DRY principle, which stands for Don’t repeat yourself.

+ + + +

Installing Sass

+ +

Head towards http://sass-lang.com/install to install Sass on your computer.

+ +
+
    +
  1. +

    and any CSS preprocessor for that matter, but I’ll refer to Sass only from now on. ↩

    +
    2. +
+
+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/806e5d8a0c027f9d720a3a73418e06aeef63e2105aa5acbde1f7f1735719a9 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/806e5d8a0c027f9d720a3a73418e06aeef63e2105aa5acbde1f7f1735719a9 new file mode 100644 index 0000000..c42c451 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/56/806e5d8a0c027f9d720a3a73418e06aeef63e2105aa5acbde1f7f1735719a9 @@ -0,0 +1,95 @@ +I"

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.

+ +

Here is a sample paragraph in HTML:

+ +
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5e/d4bf4c63c5d0e60fd4a8a3d9661bab09d86e55ea080277e959dcad787b705d b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5e/d4bf4c63c5d0e60fd4a8a3d9661bab09d86e55ea080277e959dcad787b705d new file mode 100644 index 0000000..ef98c0a --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5e/d4bf4c63c5d0e60fd4a8a3d9661bab09d86e55ea080277e959dcad787b705d @@ -0,0 +1,73 @@ +I"ů

The purpose of CSS is to define the layout and styling of your HTML elements. The syntax is very simple:

+ +
/* A CSS rule */
+selector{ property: value;}
+ +

You can read that as:

+ +
who{ what: how;}
+ +

CSS is a 3-part process:

+ + + +

This whole block (selector/property/value) is a CSS rule.

+ +

Quick example

+ +

Let’s say you want to change the color of all your blockquotes.

+ +
<blockquote>Something something</blockquote>
+ +

Focus on the tag name (and forget about the angle brackets <> and the text). In our case, all that remains is “blockquote”. There’s a direct relation between the tag name and the selector.

+ +

Let’s use that in our CSS as a selector, and let’s apply some styling:

+ +
blockquote{ background: lightgreen;}
+ +

Interesting. But now, the text color doesn’t really match the background color. Let’s improve that:

+ +
blockquote{
+  background: lightgreen;
+  color: darkgreen;
+}
+ +

So 2 things happened:

+ + + +

The <blockquote> HTML tag is a block element. It has an inline counterpart: <q>. As they both serve the same purpose (but in different contexts), we’d like to style them identically. We could copy-paste the CSS rule and just change the selector, but there is as you would have guessed, a quicker way:

+ +
q,
+blockquote{
+  background: lightgreen;
+  color: darkgreen;
+}
+ +

Now we have 2 selectors and 2 properties. We consequently have a set of selectors and a set of properties (with their respective values).

+ +

We can have multiple selectors, multiple properties, and sometimes (but rarely) multiple values.

+ +

Comments

+ +

As in HTML, it can be handy to write CSS comments:

+ +
/* This is a CSS comment */
+q,
+blockquote{
+  background: lightgreen;
+  color: darkgreen;
+}
+/*
+Comments are only meant to be read by humans
+and won't be parsed by the computer
+*/
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5f/f04db3d5d81708d5f9f9ec98ddf97c77f714b7d9b25e9014cc4e7f1bccc242 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5f/f04db3d5d81708d5f9f9ec98ddf97c77f714b7d9b25e9014cc4e7f1bccc242 new file mode 100644 index 0000000..dbc6be5 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5f/f04db3d5d81708d5f9f9ec98ddf97c77f714b7d9b25e9014cc4e7f1bccc242 @@ -0,0 +1,249 @@ +I"9J

The Web is meant to provide a platform to share information easily across the Internet, no matter which device the information is viewed on. While the only disparaties between computers accessing the Web consisted mostly upon different screen resolutions, the rapid growth of mobile devices has changed the requirements: a website needs to be accessible on mobile in order to be relevant.

+ +

What options are available to handle mobile devices?

+ +
    +
  1. Not doing anything and let mobile users zoom in to read your website
    2. +
  2. Create a second website, like m.facebook.com, and redirect mobile devices to that website
    3. +
  3. Use responsive web design
    4. +
+ +

Device, browser, viewport

+ +

Before going further, we need to define some terms:

+ +
+
device
+
the hardware used: smartphone, tablet, pc or laptop
+
browser
+
the software running: Firefox, Google Chrome, Safari, Internet Explorer
+
viewport
+
the region within the browser that actually displays the webpage
+
+ +

Difference between a device, a browser, and a viewport

+ +

Responsive web design

+ +

The idea behind responsive web design is to make your website adapt to fit to any device. It does so by targetting devices with your CSS and applying certain styles on these devices only.

+ +

Responsiveness relies upon the properties of either the device or the viewport. For example:

+ + + +

Depending on the answer to these questions, a responsive CSS will apply different or additional CSS rules.

+ +

Up until now, every part of our CSS was used by every device that accessed our webpage. Responsive web design allows us to apply certain styles in certain cases.

+ +

media queries

+ +

We need to write blocks in our CSS that will only be used by devices that match that block’s criterias. These blocks are called media queries.

+ +

The media query syntax is reminiscent of the animation keyframes syntax, as it defines a block within the CSS, in which you write additional CSS rules that are only applied in certain cases.

+ +
/* This part is read by every device/viewport */
+body{ font-size: 14px;}
+
+@media (min-width: 1200px) {
+  /* This part is only read by viewports wider than 1200 pixels */
+  body{ font-size: 16px;}
+}
+ +

Here, the default text size is 14px. But to accomodate for larger viewports, the text size is set to 16px if the viewport is wider than 1200 pixels.

+ +

Keep in mind that we’re talking about the viewport, not the device’s.

+ +

On mobile, considering browsers are running in fullscreen, the two widths are interchangeable. If you’re on desktop, resize your browser window to see media queries being activated/desactivated.

+ +

Several parameters

+ +

You can require 2 conditions for a media query to be activated.

+ +
body{ font-size: 18px;}
+
+@media (min-width: 1000px) and (orientation: landscape) {
+  body{ font-size: 20px;}
+}
+ +

The font size will only be set to 20px if the viewport is at least 1000px wide and in landscape mode (as opposed to portrait mode).

+ +

You can also use not and only. These are called logical operators.

+ +

Several CSS rules

+ +

You can include as many CSS rules as you want in the media query.

+ +
body{ font-size: 14px;}
+.button{ display: block;}
+.title{ text-align: center;}
+
+@media (min-width: 1200px) {
+  body{ font-size: 16px;}
+  .container{ margin: 0 auto; width: 960px;}
+  .button{ display: inline-block;}
+  .title{ text-align: left;}
+}
+ +

Parameters

+ +

Media queries require parameters which act like conditions that need to be filled in order for the media query to be activated.

+ +

By writing @media (min-width: 1200px), we tell the browser to read this block only if the viewport is wider than 1200px.

+ +

width

+ +

The width parameter is the most used one in responsive web design. This comes from the fact that webpages are read vertically: we scroll to read the hidden content. As a result, the width is fixed and constrained, while the height of the website is variable.

+ +

Because we don’t (usually) scroll horizontally, we need to fit our design within the available viewport width. Media queries allow to perform checks on this width, and apply certain styles if the viewport is wider than (min-width) or narrower than (max-width) a specific amount of pixels.

+ +

You can use either:

+ + + +

These parameters accept pixels, ems and rems.

+ +

Every time you resize your viewport, the browser checks the CSS for media queries that include width parameters, and applies its styles accordingly.

+ +

height

+ +

The height parameter works like the width one, expect it performs its checks on the viewport’s height.

+ +

You can use min-height and max-height.

+ +

It’s rarely used, as websites are mainly scrollable vertically, and rarely need to adapt their design for shorter viewports.

+ +

orientation

+ +

The orientation parameter can detect if the viewport is in either of the following modes:

+ + + +
@media (orientation: portrait) {
+  /* For vertical viewports */
+}
+
+@media (orientation: landscape) {
+  /* For horizontal viewports */
+}
+ +

Although it’s mostly used for tablets and smartphones, be aware that even on a widescreen monitor, the viewport can be in portrait if its width is smaller than its height.

+ +

On mobile, even if you’re holding your device in portrait mode, if the keyboard shows up, the viewport can be considered as landscape, considering how its height becomes smaller than its width.

+ +

resolution

+ +

The resolution parameter is relevant to the device’s pixel density, and can be expressed in either dots per inch dpi or dots per centimeter dpcm.

+ +

It depends on:

+ + + +

The pixel density basically tells how crisp your display is (the higher the dpi, the crisper the display).

+ +
@media (min-resolution: 300dpi) {
+  /* */
+}
+ +

Desktop screens usually have a pixel density around 100 dpi. Smartphones on the other hand have an incredible range of dpi. For example:

+ + + +

What role does CSS play here? Well, higher resolution screens will render text very clearly: individual pixels become hardly noticable, and letters look absolutely smooth.

+ +

The problem is with images on Retina displays for example. It’s a long topic, so read this “CSS Techniques for Retina Displays” article on sitepoint.

+ +
+

Image density in CSS

+
+

Source: sitepoint.com

+
+
+ +

A use case would be to provide a default background image for every device, and apply high resolution background images on Retina displays.

+ +
/* 40x40 logo */
+.logo{ background-image: url(marksheet-logo.png); background-size: 40px 40px;}
+
+@media (min-resolution: 300dpi) {
+  /* 80x80 logo resized to 40x40 */
+  .logo{ background-image: url(marksheet-logo@2x.png);}
+}
+ +

Keep in mind that the background size must be set. Otherwise, the @2x Retina image would take twice the space.

+ +

The @2x suffix is just Apple’s notation for Retina images, and has been adopted as the de facto default notation in CSS.

+ +

Mobile-first or desktop-first

+ +

Usually, you want to focus on the full width desktop version first, as it features a more complex design that includes columns, hover states, absolute positioning, floats etc.

+ +

But designing the mobile version first is actually easier considering a “HTML is almost 100% responsive out of the box”. Most web designs on mobile are only focusing on vertical layouts, with no or very few columns, because scrolling is natural on mobile devices.

+ +

Using the Flow is straightforward to design a mobile site: just order your HTML elements in the way you want them to be displayed. Simply by writing your HTML code, you’re already designing your mobile website. Header first, menu afterwards, then your content, and a footer at the end. Voilà!

+ +

A mobile-first CSS would use min-width media queries in order to apply specific rules for larger viewports:

+ +
/* General CSS rules for every viewport, including smartphones */
+body{ }
+.title{ }
+.button{ }
+
+@media (min-width: 768px) {
+  /* Rules for tablets and bigger viewports */
+}
+
+@media (min-width: 992px) {
+  /* Rules for laptops, small desktop screens and bigger viewports */
+}
+
+@media (min-width: 1200px) {
+  /* Rules for larger desktop screens only */
+}
+ +

A desktop-first approach starts with styles for large screens and min-width media queries in order to apply specific rules for larger viewports:

+ +
/* General CSS rules for every viewport, including large desktop screens */
+body{ }
+.title{ }
+.button{ }
+
+@media (max-width: 1199px) {
+  /* Rules for laptops, small desktop screens, and smaller viewports */
+}
+
+@media (max-width: 991px) {
+  /* Rules for tablets and smaller viewports */
+}
+
+@media (max-width: 767px) {
+  /* Rules for smartphones only */
+}
+ +

Notice how the desktop-first max-width values are 1 fewer than the mobile-first min-width. For example:

+ + + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/61/716c9a8874b7f15759e4e1a58f028efad4a0c5dd4eb95f062736c7261be8b4 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/61/716c9a8874b7f15759e4e1a58f028efad4a0c5dd4eb95f062736c7261be8b4 new file mode 100644 index 0000000..19f41b4 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/61/716c9a8874b7f15759e4e1a58f028efad4a0c5dd4eb95f062736c7261be8b4 @@ -0,0 +1,113 @@ +I"@

La Web

+ +

Hemos visto cómo las computadoras en Internet se comunican en diferentes idiomas llamados protocolos, para intercambiar correos electrónicos, archivos, mensajes de chat…

+ +

Uno de estos protocolos se llama HTTP. Es el protocolo con el que las computadoras comparten Páginas Web entre sí, como la que ahora estás leyendo.

+ +

La Web es la parte de Internet donde las Páginas Web son compartidas. Puedes decir que estás navegando la Web si el URL comienza con http://.

+ +

Página Web

+ +

Una Página Web es un documento escrito en HTML que se comparte a través de la Web.

+ +

TĂş abres estos documentos con un navegador Web.

+ +

Para tener acceso a una página web puedes:

+ + + +

Debido a que recordar URLs es engorroso, la Web en un origen se basó en documentos interligados para hacer que fuera más fácil para los usuarios navegar la Web.

+ +

Sitio Web

+ +

Un Sitio Web es simplemente una colección de Páginas Web que se encuentran en un mismo dominio.

+ + + +

Abriendo una página Web en tu navegador

+ +

Al navegar a http://marksheet.io/web.html, estás pidiendo a una computadora en Internet que obtenga el documento web.html.

+ +

En ese caso, tu computadora es el cliente. Tu estás pidiendo al servidor Marksheet (donde el sitio web está alojado) que obtenga el archivo llamado web.html.

+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ Cliente + Tu computadora + + Hola computadora Marksheet! Quisiera el archivo web.html por favor. +
+ Servidor + La computadora MarkSheet + + Déjame ver si está ahí... +
+ Cliente + Tu computadora + + Está bien, esperaré. +
+ Servidor + La computadora Marksheet + + Oh, aquí está, te lo enviaré. +
+ Cliente + Tu computadora + + Lo tengo, ¡gracias! +
+
+ +

Tu navegador ahora puede mostrar web.html.

+ +

El archivo no se guarda en tu computadora: sólo se despliega temporalmente mientras lo navegas. Si quieres ir a http://marksheet.io/web.html después, tu computadora le preguntará a la computadora Marksheet otra vez por ese archivo, si es que existe aún. De este modo, se asegura de que siempre tienes la última versión del archivo.

+ +
+
Web
+
La parte de Internet que utiliza el protocolo HTTP
+
Página Web
+
Un documento escrito en HTML.
+
Sitio Web
+
Una colección de Páginas Web en el mismo dominio.
+
Navegador
+
Un programa que puede abrir Páginas Web con el fin de mostrarlas.
+
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/773d25c45cabd93b74482b3b1dfaa0e6a2b9eb9d5003a242782c51f0367843 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/773d25c45cabd93b74482b3b1dfaa0e6a2b9eb9d5003a242782c51f0367843 new file mode 100644 index 0000000..f752ddc --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/773d25c45cabd93b74482b3b1dfaa0e6a2b9eb9d5003a242782c51f0367843 @@ -0,0 +1,6 @@ +I"¦

While HTML is about defining the content of a webpage, CSS is about styling a webpage. It means setting colors, fonts, dimensions, margins, positions, of a webpage’s elements.

+ +

HTML is inert. CSS is fluid.

+ +

CSS brings a webpage to life, by applying a coat of paint on its static content, and elevates its purpose through color, space, emphasis and motion.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/d3f00de45e60986d732291e12caf5a0cf71dea03253dcf6fee2f716cee2853 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/d3f00de45e60986d732291e12caf5a0cf71dea03253dcf6fee2f716cee2853 new file mode 100644 index 0000000..b44105d --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/d3f00de45e60986d732291e12caf5a0cf71dea03253dcf6fee2f716cee2853 @@ -0,0 +1,150 @@ +I"Â"

Internet no es lo mismo que la Web (la red). Internet es más grande, más viejo y más variado.

+ +

Imagina cómo algunos caminos están interconectados en todo el mundo: pequeñas calles conectan a las avenidas de la ciudad que se convierten en vías que se unen a las carreteras y autopistas nacionales e internacionales. Puedes conducir desde tu casa hacia cualquier otra casa en el mundo1. No hay un centro particular en esta red.

+ +

Internet es algo similar. Pero en lugar de caminos, son cables. Y en lugar de casas, son computadoras. Y en vez de autos viajando por esta red, tenemos informaciĂłn.

+ +

Fue inventado en 1969 para conectar a las computadoras a lo largo y ancho de Estados Unidos. Hoy en día miles de millones de dispositivos (incluyendo PCs, laptops, teléfonos celulares, televisiones, refrigeradores…) están interconectados.

+ +

Cliente y Servidor

+ +

Generalmente, una conexiĂłn en Internet tiene lugar entre 2 computadoras Ăşnicamente:

+ + + +

Un cliente es un programa que puede adoptar muchas formas:

+ + + +

Cada uno de estos programas obtendrá la información desde un servidor, donde algo se almacena (un sitio web, tus correos, mensajes, películas). Aunque los programas cliente también envían información al servidor, usualmente no la almacenan, mientras que los servidores sí lo hacen.

+ +

Un servidor puede ser considerado una computadora dedicada que siempre está conectada a Internet, cuyo único propósito es entregar (o servir) el contenido.

+ +

Aunque cualquier dispositivo conectado a Internet puede ser ambos un cliente y un servidor al mismo tiempo, la mayorĂ­a de los dispositivos que usamos son considerados clientes, porque nosotros Ăşnicamente obtenemos datos, y no servimos nunguno.

+ +

DirecciĂłn IP

+ +

Al igual que toda casa tiene una direcciĂłn postal Ăşnica y especĂ­fica, cada computadora conectada a Internet recibe una direcciĂłn IP, con el fin de poder ser identificada en la red.

+ +

Una direcciĂłn IP normalmente aparece como una combinaciĂłn de 4 nĂşmeros: 91.198.174.192.

+ +

Dominios

+ +

Aunque las direcciones IP son Ăştiles para que las computadoras puedan reconocerse entre sĂ­ gracias a que son Ăşnicas, son difĂ­ciles de leer y de recordar para nosotros los humanos.

+ +

Es por eso que se crearon los dominios en 1985. Los dominios asocian una direcciĂłn IP como 91.198.174.192 con una cadena de texto como wikipedia.org. Como resultado, ambos son intercambiables: puedes ir a http://91.198.174.192 o http://wikipedia.org y terminar exactamente en el mismo sitio web.

+ +

Un dominio consta de 3 partes, que se leen de derecha a izquierda:

+ + + +

Piensa en los dominios como una forma de nombrar computadoras que se conectan a Internet.

+ +

¿Cómo compro un dominio? +No puedes comprar un dominio de hecho, pero puedes rentarlo de quien esté administrando los TLD que quieres incluir en él. +Las compañías que administran los dominios de Internet se llaman registradores (domain registrars). Los más famosos son Namecheap y Gandi.

+ +

Protocolos

+ +

El propĂłsito de interconectar todas estas computadoras es para que puedan interactuar unas con otras. Y al igual que los humanos hablan diferentes idiomas, las computadoras en Internet hablan utilizando protocolos.

+ +

Cada uno tiene un propĂłsito diferente:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProtocoloUtilizado paraCreado en
+ FTP + Transferencia de Archivos.1971
+ SMTP + Enviar correos electrĂłnicos.1971
+ IMAP + Recibir correos electrĂłnicos1986
+ IRC + Chat1988
+ HTTP + Navegar por documentos HTML (páginas Web)1989
+
+ +

URL

+ +

Ahora que hemos visto que existen los dominios y los protocolos, podemos construir un URL: Uniform Resource Locator. (Localizador de Recursos Uniforme)

+ +

Por ejemplo, el URL de página actual es http://marksheet.io/internet.html, y puede ser dividido en 3 partes:

+ + + +

Este URL es Ăşnico y define

+ + + +

Los URLs pueden ser más complejos a la vista. Puedes leer acerca de la anatomía de un URL. (artículo en inglés)

+ +
+
Internet
+
Una red muy grande de computadoras conectadas una a la otra.
+
Protocolo
+
Un conjunto de reglas, como un idioma en el que las computadoras se comunican entre sĂ­.
+
DirecciĂłn IP
+
Una combinaciĂłn de nĂşmeros como 91.198.174.192 que actĂşa como un identificador Ăşnico para una computadora conectada a Internet.
+
Dominio
+
Un texto como marksheet.ioque actúa como un identificador único para una computadora conectada a Internet. +La diferencia con las direcciones IP es que los dominios son más fáciles de leer para los humanos.
+
+ +
+
    +
  1. +

    Que no estĂ© a la mitad del ocĂ©ano, obviamente. ↩

    +
    2. +
+
+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/65/bb89c6c8200458f9793757b215a6e74a0cb3f9fb8c63707c0b4ba3a71c5cd4 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/65/bb89c6c8200458f9793757b215a6e74a0cb3f9fb8c63707c0b4ba3a71c5cd4 new file mode 100644 index 0000000..9bc737f --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/65/bb89c6c8200458f9793757b215a6e74a0cb3f9fb8c63707c0b4ba3a71c5cd4 @@ -0,0 +1,6 @@ +I"

If you’ve found yourself having to repeat code throughout your CSS, replace several instances of the same value, or lose yourself in a mess of selectors, CSS preprocessors are for you.

+ +

You can choose between Sass and Less. Both include variables, functions, reusable components and other syntax enhancers that will save you a lot of time.

+ +

Preprocessors are, as their name suggest, tools that have their own language and will generate regular CSS files.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/67/5591cf4e2f0c4b8595e1273848309946e0c98dd0c8f813150ef32469319627 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/67/5591cf4e2f0c4b8595e1273848309946e0c98dd0c8f813150ef32469319627 new file mode 100644 index 0000000..20e7f92 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/67/5591cf4e2f0c4b8595e1273848309946e0c98dd0c8f813150ef32469319627 @@ -0,0 +1,95 @@ +I"í

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.

+ +

Here is a sample paragraph in HTML:

+ +
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/6f/4a988aff2e125573c64887eeb267c8ab60daed955d1b6696c562776fcdac19 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/6f/4a988aff2e125573c64887eeb267c8ab60daed955d1b6696c562776fcdac19 new file mode 100644 index 0000000..f1e802f --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/6f/4a988aff2e125573c64887eeb267c8ab60daed955d1b6696c562776fcdac19 @@ -0,0 +1,95 @@ +I" 

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Here is a sample paragraph in HTML:

+ +
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/70/9bde5e12618b5ef63364b0a144348469005a28b5db9393d9631c78e576d2b4 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/70/9bde5e12618b5ef63364b0a144348469005a28b5db9393d9631c78e576d2b4 new file mode 100644 index 0000000..e808404 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/70/9bde5e12618b5ef63364b0a144348469005a28b5db9393d9631c78e576d2b4 @@ -0,0 +1,8 @@ +I" 

Seguramente ya estás familiarizado con los editores de documentos, como Microsoft Word, con el que puedes darle estructura a tus documentos con títulos, párrafos, listas, tablas, imágenes, negritas y texto en itálicas.

+ +

HTML provides roughly the same elements of formatting. The key difference is that formatting text in Microsoft Word is visual, whereas HTML code is purely semantic: you provide meaning to your text.

+ +

HTML provee a grosso modo el mismo número de elementos para dar formato. La diferencia principal es que dar formato en Word se hace de manera visual, mientras que el código HTML es puramente semántico: you provide meaning to your text.

+ +

The same way you use ♫ notes ♬ to write music, you use HTML to write webpages.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/81/aa50565c3fbad385c9ee73ae2a9a11652a15e34f75927433ca11f19ed76510 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/81/aa50565c3fbad385c9ee73ae2a9a11652a15e34f75927433ca11f19ed76510 new file mode 100644 index 0000000..2d8405b --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/81/aa50565c3fbad385c9ee73ae2a9a11652a15e34f75927433ca11f19ed76510 @@ -0,0 +1,95 @@ +I"

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/82/799e5b8d10cd776a5ed6a447f9d0c3babb2ffca7cd21061d13c0bca9a71380 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/82/799e5b8d10cd776a5ed6a447f9d0c3babb2ffca7cd21061d13c0bca9a71380 new file mode 100644 index 0000000..32fa2a1 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/82/799e5b8d10cd776a5ed6a447f9d0c3babb2ffca7cd21061d13c0bca9a71380 @@ -0,0 +1,248 @@ +I"Ń<

The common properties case

+ +

Sometimes you find yourself writing the same set of properties across different CSS rules.

+ +

For example, let’s say your design makes use of small spaced uppercase letters throughout the page: buttons, navigation bar, sidebar headings, tabs…

+ +

Something like this:

+ +
+

Small spaced uppercase letters

+
+ +

How would that look like in your CSS? You could:

+ + + +

Common CSS Class

+ +
.small-uppercase{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+ +

Having a .small-uppercase CSS rule is semantically incorrect because you’d end up writing your HTML as <p class="small-uppercase"> which reverts to basically writing styles within your HTML.

+ +

Combine the selectors

+ +

Because a CSS rule can accept any number of selectors, you could combine the shared properties under a list of selectors:

+ +
.button,
+.navigation a,
+.sidebar h3,
+.tabs a{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+ +

This approach remains semantically valid because each selector describes the HTML element they’re attached to.

+ +

However, there are 2 problems:

+ + + +

Sass helps solving these problems.

+ +

Sass @extend syntax

+ +

A Sass @extend allows to inherit CSS properties from another selector:

+ +
// scss
+.small-uppercase{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+
+.modal-background{
+  @extend .small-uppercase;
+}
+
+.product-link{
+  @extend .small-uppercase;
+}
+
+.image-pattern{
+  @extend .small-uppercase;
+}
+
+// generated css
+.small-uppercase,
+.modal-background,
+.product-link,
+.image-pattern{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+ +

The @extend will regroup common properties under a list of selectors.

+ +

The list is easily maintainable because you only add selectors one by one, and directly in the related selector.

+ +

Your HTML remains semantic because each element keeps its descriptive class name.

+ +

Difference with mixins

+ +

Well, you might be thinking “Wait, isn’t it just like mixins then?”?

+ +

There are 2 differences:

+ + + +

Let’s reuse our overlay mixin, and also write a .overlay rule:

+ +
// scss
+@mixin small-uppercase() {
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+
+.modal-background{
+  @include small-uppercase();
+}
+
+.product-link{
+  @include small-uppercase();
+}
+
+.image-pattern{
+  @include small-uppercase();
+}
+
+// generated css
+
+.modal-background{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+
+.product-link{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+
+.image-pattern{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+ +

The list of properties is simply repeated as many times as the @include overlay() is called.

+ +

A Sass @extend is more efficient, as it only writes the common properties once.

+ +

Placeholders

+ +

Well, you might be thinking “The .small-uppercase isn’t semantic! I could use it in my HTML!”?

+ +

You’re right, and that’s why placeholders exist in Sass.

+ +

If you don’t want or need the .small-uppercase selector, transform it into a Sass placeholder by replacing the dot with a percentage sign %:

+ +
// scss
+%small-uppercase{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+
+.modal-background{
+  @extend %small-uppercase;
+}
+
+.product-link{
+  @extend %small-uppercase;
+}
+
+.image-pattern{
+  @extend %small-uppercase;
+}
+
+// generated css
+.modal-background,
+.product-link,
+.image-pattern{
+  color: lightslategrey;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+ +

Note that the generated CSS doesn’t include the .small-uppercase selector anymore. That’s because the %small-uppercase rule is only here to provide a location for common properties.

+ +

Difference between extend, placeholders and mixins

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DefinitionReferencingCombines selectors?Allows parameters?Can be used on its own?
Mixins@mixin name()@include name()NoYesNo
ExtensionsAny class@extend .classYesNoYes
Placeholders%placeholder@extend %placeholderYesNoNo
+
+ +

When in doubt, use mixins. They generate more CSS lines and are less elegant than extend/placeholders, but they are straightforward.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/36f8a4a3b9159be4d4dec3fd30b4e0993f429c344140fd189cbdc5912babeb b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/36f8a4a3b9159be4d4dec3fd30b4e0993f429c344140fd189cbdc5912babeb new file mode 100644 index 0000000..7af6d3f --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/36f8a4a3b9159be4d4dec3fd30b4e0993f429c344140fd189cbdc5912babeb @@ -0,0 +1,6 @@ +I"Ö

Seguramente ya estás familiarizado con los editores de documentos, como Microsoft Word, con el que puedes darle estructura a tus documentos con títulos, párrafos, listas, tablas, imágenes, negritas y texto en itálicas.

+ +

HTML provides roughly the same elements of formatting. The key difference is that formatting text in Microsoft Word is visual, whereas HTML code is purely semantic: you provide meaning to your text.

+ +

The same way you use ♫ notes ♬ to write music, you use HTML to write webpages.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/69fc9fd32bdbf975601c395d0a9084862d4118797d32845cf205c94b6d7804 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/69fc9fd32bdbf975601c395d0a9084862d4118797d32845cf205c94b6d7804 new file mode 100644 index 0000000..e965ca8 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/8c/69fc9fd32bdbf975601c395d0a9084862d4118797d32845cf205c94b6d7804 @@ -0,0 +1,4 @@ +I"d

The Web was created to share documents via Internet, and HTML is the language in which these documents are written.

+ +

While text has always been the primary medium, HTML evolved to incorporate other types of content like images and videos.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/95/b1e049b02e91e337f515b0d52757eeed06ab01b07d38e9d4fa7e4121826664 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/95/b1e049b02e91e337f515b0d52757eeed06ab01b07d38e9d4fa7e4121826664 new file mode 100644 index 0000000..94e8822 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/95/b1e049b02e91e337f515b0d52757eeed06ab01b07d38e9d4fa7e4121826664 @@ -0,0 +1,285 @@ +I"P

We’ve seen so far how CSS allows us to apply colors, set fonts, tweak the text settings, position elements, space them, decorate them, move them around.

+ +

CSS transforms are a collection of functions that allow to shape elements in particular ways:

+ + + +

transform properties

+ +

There are 3 CSS transform properties available:

+ + + +

Note that unlike background and border, transform is not a shorthand property.

+ +

We’ll only use transform here.

+ +

Doesn’t break the Flow

+ +

To prevent unexpected behavior, transformed elements do not affect the Flow. Whether rotated, scaled or translated, they won’t affect other elements.

+ +

translate

+ +

The translate() function allows to move an element across the plane (on the x and y axis). It accepts either:

+ + + +

It’s like using relative positioning with left and top values.

+ +

Let’s redo our circuit animation using translation instead of left/top positioning:

+ +
@keyframes translating {
+  0%  { transform: translate(0, 0);}
+  25% { transform: translate(240px, 0);}
+  50% { transform: translate(240px, 140px);}
+  75% { transform: translate(0, 140px);}
+  100%{ transform: translate(0, 0);}
+}
+p{ animation: translating 4s linear infinite;}
+ +
+

Hello

+
+ + + +

Remember: transform is the CSS property, translate() is the CSS value attached to that property (and also happens to be a function).

+ +

You can use translateX() and translateY() to only move your element along the x and y axis respectively.

+ +

rotate

+ +

The rotate() function allows to make an element revolve around a fixed point. By default, it revolves around the element’s center. Think of it as vinyl being played on a turntable.

+ +

rotate() accepts only 1 parameter, which is an angle value defined in degrees deg, gradians grad, radians rad or turns turn (with 1 turn being equivalent to a full circle).

+ +
@keyframes rotating {
+  0%  { transform: rotate(0deg);}
+  100%{ transform: rotate(360deg);}
+}
+p{ animation: rotating 4s linear infinite;}
+ +
+

Vinyl

+
+ + + +

scale

+ +

The scale() function allows to resize an element. It can either expand or shrink it. The function accepts either:

+ + + +

The range of possible value is:

+ + + +
@keyframes scaling {
+  0%  { transform: scale(1);}
+  20%{ transform: scale(2);}
+  40%{ transform: scale(0.5);}
+  60%{ transform: scale(0);}
+  80%{ transform: scale(-1);}
+  100%{ transform: scale(1);}
+}
+p{ animation: scaling 10s steps(1) 0s infinite;}
+ +
+

scale(1): normal size

+

scale(2): double size

+

scale(0.5): half size

+

scale(0): zero size (invisible)

+

scale(-1): mirrored

+
Scaling
+
+ + + +

Like translate(), the scale() function has x and y versions: scaleX() and scaleY() to resize horizontally and vertically respectively.

+ +

skew

+ +

The skew() function allows to distort an element, by dragging its sides along a line basically.

+ +

This transform function is rarely used, as its effects are quite unpredictable, and its results not necessarily appealing. Nevertheless, let’s see how it works.

+ +

Like scale(), the skew() functions accepts either:

+ + + +

And like rotate(), skew() only accepts angle values like degrees deg.

+ +
@keyframes skewing {
+  0%  { transform: skew(0deg);}
+  20% { transform: skew(10deg);}
+  40% { transform: skew(45deg);}
+  60% { transform: skew(90deg);}
+  80% { transform: skew(120deg);}
+  100%{ transform: skew(0deg);}
+}
+p{ animation: skewing 10s steps(1) 0s infinite;}
+ +
+

skew(0deg): no distortion

+

skew(10deg): subtle horizontal distortion

+

skew(45deg): quarter distortion

+

skew(90deg): half distortion (invisible)

+

skew(120deg): same as -60deg

+
Skewing
+
+ + + +

3d functions

+ +

We’ve seen how transform functions operate on a plane, along the x and y axis.

+ +

For example:

+ + + +

But all these functions also have a 3d version.

+ +

For example, translate() has a translate3d() version that performs transformation along 3 dimensions, which means it includes the z axis as well (and as such, a standalone translateZ() function exists as well).

+ +

The z parameter basically make the element move closer and further, whether we increase or decrease its value. It’s like zooming in and out.

+ +
@keyframes zooming {
+  0%  { transform: translate3d(0, 0, 0);}
+  100%{ transform: translate3d(0, 0, 200px);}
+}
+p{ animation: zooming 5s alternate;}
+ +
+
Original
+

Transformed

+
+ + + +

The green block rise 200px “upwards”, as if coming closer to us, along the z axis.

+ +

perspective: 500; needs to be applied to the parent element in order for the 3d space to become active. Alternatively, transform: perspective(500px); can be used as well.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/96/b4873d98b00742a997e433c4d95ecc8afccc3ece23326c30563833b6c3efc1 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/96/b4873d98b00742a997e433c4d95ecc8afccc3ece23326c30563833b6c3efc1 new file mode 100644 index 0000000..495be56 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/96/b4873d98b00742a997e433c4d95ecc8afccc3ece23326c30563833b6c3efc1 @@ -0,0 +1,176 @@ +I"%

Because we don’t want to style all our HTML elements at once, we need to be able to target a subset of these HTML elements.

+ +

CSS selectors define which elements we want our styling to be applied to.

+ +

Generic tag selectors

+ +

Targeting generic HTML tags is easy: just use the tag name.

+ +
a{ /* Links */ }
+p{ /* Paragraphs */ }
+ul{ /* Unordered lists */ }
+li{ /* List items */ }
+ +

There’s a direct connection between the name of the HTML tag and the CSS selector used.

+ +

Classes

+ +

Considering we probably don’t want to style all paragraphs or all titles identically, we need to differentiate them.

+ +

Of all HTML attributes, the class attribute is the most important for CSS. It allows us to define a group of HTML elements that we can target specifically. Just put a dot . in front of the class name you want to use:

+ +
.date {
+  color: red;
+}
+ +

On one side, there is the HTML class attribute with the value date. It must match the name of the CSS class.

+ +

You can use any name for your CSS class, as long as it doesn’t start with a number.

+ +

The .date class selector will target all HTML elements that have the class="date" attribute. So, the following HTML elements will all be styled:

+ +
<p class="date">
+  Saturday Feb 21
+</p>
+<p>
+  The event will be on <em class="date">Saturday</em>.
+</p>
+ +
+

Saturday Feb 21

+

The event will be on Saturday.

+
+ +

Bear in mind that the tag name is irrelevant. Only the class HTML attribute is.

+ +

IDs

+ +

You can also use the id attribute in your HTML, and target it with a hash # in your CSS:

+ +
#tagline{ color: orange;}
+ +
<h1 id="tagline">This heading will be orange.</h1>
+ +

ID are similar to Classes, as they rely upon an HTML attribute.

+ +

Example

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTMLPossible CSS selectorsWhat it means
<p></p>
pEvery <p>
<div class="global"></div>
 + div
+ .global
+ div.global		Every <div>
+ Every elements with class=”global”
+ Every <div> with class=”global” + 
<ul id="menu">
 + #menu
+ ul#menu + 		+ The only element with id=”menu”
+ The only <ul> with id=”menu” +
+ 
<ol class="dico">
+  <li>Un cobaye</li>
+  <li>Des cobaux</li>
+</ol>
+ 		+ li
+ ol li
+ .dico li + 		+ Every <li>
+ Every <li> with an <ol> as ancestor
+ Every <li> with a class="dico" element as ancestor +
+
+ +

Combining selectors

+ +

Let’s reuse our previous example where we want our dates to be red:

+ +
.date {
+  color: red;
+}
+ +
<p class="date">
+  Saturday Feb 21
+</p>
+<p>
+  The event will be on <em class="date">Saturday</em>.
+</p>
+ +
+

Saturday Feb 21

+

The event will be on Saturday.

+
+ +

What if we want our dates that are in em elements to blue instead? We can add the following CSS rule:

+ +
em.date {
+  color: blue;
+}
+ +

The em.date combines:

+ + + +

It will only apply to <em class="date"></em> HTML elements. It won’t affect other .date or em.

+ +

Hierarchy selectors

+ +

A space in a selector defines a ancestor/descendant relationship. Let’s say we want the links in our header to be in red:

+ +
header a {
+  color: red;
+}
+ +

This can be read from right to left as: “Select all a elements that are within a header element”. This will prevent all other links (that aren’t in the header) to remain unaffected.

+ +

Pseudo-class selectors

+ +

HTML elements can have different states. The most common case is when you hover over a link. It’s possible in CSS to apply a different style when such an event occurs.

+ +

Pseudo-class selectors are attached to usual selectors and start with a colon ::

+ +
a {
+  color: blue;
+}
+
+a:hover {
+  color: red;
+}
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9a/4431b8a5102f2ec4bf8f9e92a9b502e3545daa9d29315b3dccffbd7e8f8813 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9a/4431b8a5102f2ec4bf8f9e92a9b502e3545daa9d29315b3dccffbd7e8f8813 new file mode 100644 index 0000000..7fc62fd --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9a/4431b8a5102f2ec4bf8f9e92a9b502e3545daa9d29315b3dccffbd7e8f8813 @@ -0,0 +1,64 @@ +I"

The dimensions (or height and width) of an element are dynamic, as they fluctuate in order to fit the content. It is somehow possible to set specific dimensions.

+ +
blockquote{ width: 600px;}
+ +

The blockquote will not take up the whole width available, but will remain 600px wide in any situation:

+ + + +

Because we’ve only set the width, the blockquote remains fluid in height: the height becomes the variable dimension to fit the blockquote’s content.

+ +

Setting both height and width

+ +

By setting the dimensions of an element, it will remain fixed no matter the length of its content.

+ +

What happens if the content is longer than the element can contain?

+ +

Because we prevent the element to dynamically alter its dimensions, there is a chance the content will be longer than the element accomodates for and will subsequently overflow.

+ +

The default behavior can be surprising: the content will be displayed anyway!

+ +
blockquote{ background: yellow; height: 50px; width: 100px;}
+ +
<blockquote>The content er... finds a way</blockquote>
+ +
+
The content er... finds a way
+
+ +

CSS overflow

+ +

The overflow CSS property allows us to manage the case of content being longer than its container.

+ +

The default value is visible: the content will be displayed anyway, because “Why would you want to prevent content from being read by the user if it’s present in the code?”. You can consider HTML as prevalent to CSS.

+ +

By applying overflow: hidden;, you simply forbid any overflowing content to be seen.

+ +
+
The content er... finds a way
+
+ +

If you want your content to overflow but still want to make it accessible, you can decide to display scrollbars by applying overflow: scroll.

+ +
+
The content er... finds a way
+
+ +

A better option is use overflow: auto, as the scrollbars will only appear if the content is overflowing, but will remain hidden until then.

+ +
+
The content er... finds a way
+
+ +

Beware of fixed dimensions

+ +

Applying specific dimensions are often required for a design to look visually appealing but can have unintended consequences. In that regard:

+ + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9c/a6ce1f6e3e379ba2d32003d729dbd951ad80cb90b15669b72c45b9348c9222 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9c/a6ce1f6e3e379ba2d32003d729dbd951ad80cb90b15669b72c45b9348c9222 new file mode 100644 index 0000000..3a486ed --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/9c/a6ce1f6e3e379ba2d32003d729dbd951ad80cb90b15669b72c45b9348c9222 @@ -0,0 +1,89 @@ +I"

When writing HTML content like paragraphs, lists or links, you provide meaning to your text. But you might want to group some of these elements together.

+ +

For example, a blog’s webpage can be divided in 4 parts:

+ + + +

There are some structural HTML elements you can use as containers for other elements.

+ + + +

The header is usually the first HTML element in the code. It acts as an introduction to the webpage, with the logo, a tagline, and navigation links.

+ +
<header>
+  <p>
+    <a>
+      <img src="my-logo.jpg" alt="Tibitaco logo">
+    </a>
+    <em>A cool website</em>
+  </p>
+  <ul>
+    <li>
+      <a href="home.html">Home</a>
+      <a href="about.html">About</a>
+      <a href="contact.html">Contact</a>
+    </li>
+  </ul>
+</header>
+ + + +

As opposed to the header, the footer is usually the last element of a page, where the main navigation links are repeated and secondary ones added.

+ +
<footer>
+  <p>MarkSheet.io | Copyright 2015</p>
+  <ul>
+    <li>
+      <a href="home.html">Home</a>
+    </li>
+    <li>
+      <a href="about.html">About</a>
+    </li>
+    <li>
+      <a href="contact.html">Contact</a>
+    </li>
+  </ul>
+  <ul>
+    <li>
+      <a href="privacy-policy.html">Privacy Policy</a>
+    </li>
+    <li>
+      <a href="terms-of-use.html">Terms of use</a>
+    </li>
+  </ul>
+</footer>
+ +

Main

+ +

The main element contains, as its name suggests, the most important content of the page, the one that defines the purpose of the page.

+ +

While all webpages of a website contain common elements (like the header, the navigation, the footer…), the main element focuses on unique content.

+ +

For example, the article you are currently reading lies within the main element of this webpage, because its content is unique throughout the whole MarkSheet website.

+ +

Aside

+ +

The aside element usually lives alongside the main and contains additional information related to the main content.

+ +

Section

+ +

The section element allows to group

+ +

Sections themselves don’t carry a specific meaning. It’s more about the relation between its child elements rather than its own meaning within the overall page.

+ +

The MarkSheet homepage displays 3 sections:

+ + + +

They all reside within the homepage main element, but are divided logically to group similar content and provide more meaning to the page’s structure.

+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a0/481fc0bb70827a9152f3489cb98efd6e76adc5d0355b3d13c2e281c1870ea2 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a0/481fc0bb70827a9152f3489cb98efd6e76adc5d0355b3d13c2e281c1870ea2 new file mode 100644 index 0000000..ea5d5a8 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a0/481fc0bb70827a9152f3489cb98efd6e76adc5d0355b3d13c2e281c1870ea2 @@ -0,0 +1,6 @@ +I"¸

You’re certainly already acquainted with document editors, like Microsoft Word, with which you can structure your document with titles, paragraph, lists, tables, images, bold and italic text.

+ +

HTML provides roughly the same elements of formatting. The key difference is that formatting text in Microsoft Word is visual, whereas HTML code is purely semantic: you provide meaning to your text.

+ +

The same way you use ♫ notes ♬ to write music, you use HTML to write webpages.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a1/a5213c6a5ec13c2a2bc06f9b23867947d16429763bb22beaa574fd81c52a30 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a1/a5213c6a5ec13c2a2bc06f9b23867947d16429763bb22beaa574fd81c52a30 new file mode 100644 index 0000000..033d27c --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/a1/a5213c6a5ec13c2a2bc06f9b23867947d16429763bb22beaa574fd81c52a30 @@ -0,0 +1,243 @@ +I"58

We’ve seen how there are mainly 3 types of CSS selectors:

+ + + +

All of these selectors can have pseudo-classes attached to them. A pseudo-class:

+ + + +

Syntax

+ +

A pseudo-class can’t exist on its own. It must be attached to a selector. The pseudo-class will only define a particular state of that selector.

+ +

The syntax looks like this:

+ +
.selector:pseudo-class{ }
+ +

There is no space between the selector and the pseudo-class, to signify that they are linked together.

+ +

:hover

+ +

For example, a common pseudo-class used is :hover, which will apply a CSS style when the targeted element is hovered. Let’s test it on links.

+ +
a{ color: blue;}
+a:hover{ color: red;}
+ +
+

Hover this link and see how it turns red.

+
+ +

The first line defines how all <a> HTML elements should look like (blue).
+The second line defines how <a> should look like when hovered (red).

+ +

The second line targets the same HTML elements but only when something specific happens (in this case, being hovered).

+ +

:visited

+ +

This pseudo-class targets links that have been visited. By default, links are blue and turn purple when you’ve visited them. Google results work like that.

+ +
a{ color: dodgerblue;}
+a:visited{ color: rebeccapurple;}
+ +
<a href="https://www.google.com">Google</a>
+<a href="https://twitter.com">Twitter</a>
+<a href="https://www.facebook.com">Facebook</a>
+<a href="https://www.mozilla.org">Mozilla</a>
+<a href="http://marksheet.io/visited.html">MarkSheet</a>
+ +
+ Google + Twitter + Facebook + Mozilla + MarkSheet +
+ +

Applying a different for visited links is often overlooked but comes in handy for users browsing a list of results. It easily helps them visualize where they have already been.

+ +

:focus

+ +

This pseudo-class happens when an HTML element is in focus. This is particularly useful for HTML inputs.

+ +
.form-input{ border: 2px solid grey; padding: 5px;}
+.form-input:focus{ background: lightyellow; border-color: blue; outline: none;}
+ +
+ +
+ +

The outline: none; rule removes the glow from the input.

+ +

:first-child and :last-child

+ +

These pseudo-classes are related to the HTML hierarchy. They target HTML elements depending on the order in which they appear in the code.

+ +
<ul>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+</ul>
+ +
li:first-child{ background: greenyellow;}
+li:last-child{ background: lightsalmon;}
+ +
+ +
+ +

As you can see, no CSS class is applied to the first and last <li>. Their position in the hierachy defines whether the CSS rule is applied.

+ +

If we were to add a 5th list item, and using the same CSS, the styling would automatically change:

+ +
+ +
+ +

:nth-child

+ +

This pseudo-class is a more global version of :first-child and :last-child. With :nth-child, you can calculate which child element you want to target.

+ +

For example, if you want to target the second child, you would use :nth-child(2):

+ +
li:nth-child(2){ background: violet;}
+ +
+ +
+ +

odd and even

+ +

While using a number is straightforward, the :nth-child comes with 2 keywords:

+ + + +
li:nth-child(odd){ background: gold;}
+ +
+ +
+ +

The n iterator

+ +

The most powerful aspect of :nth-child is how it can target elements based upon calculations by using the n keyword.

+ +

The n value increments from zero 0 to the number of child elements present.

+ +

What if you want to target every third element?

+ +
li:nth-child(3n){ background: hotpink;}
+ +
+ +
+ +

In our case, n starts at zero and ends at six.

+ +

Computers start counting at zero. And because there are seven elements in our list, we will go up until six, because 0-1-2-3-4-5-6 represents seven items.

+ +

You can read :nth-child(3n) as “Target each element whose position is dividable by 3”. In our case, it targeted both the 3rd and 6th list items:

+ + + +

n + 1

+ +

What if you want to target the 1st item and every third item after that?

+ +
li:nth-child(3n+1){ background: limegreen;}
+ +
+ +
+ +

The 3n+1 has two parts:

+ + + +

This is how the calculations were processed:

+ + + +

The n iterator is very versatile. It’s hard to find the right calculation, so just test it out to find the right selection.

+ +

Other pseudo-classes

+ +

There are dozens of pseudo-classes available, some of them for very specific states. The most used ones are the ones we’ve covered.

+ + + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ad/13886a41e7e0be6678c7e0c12ea05461721c4aff433af5b3615cf6023124f8 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ad/13886a41e7e0be6678c7e0c12ea05461721c4aff433af5b3615cf6023124f8 new file mode 100644 index 0000000..d63d368 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ad/13886a41e7e0be6678c7e0c12ea05461721c4aff433af5b3615cf6023124f8 @@ -0,0 +1,52 @@ +I"

font-size

+ +

We’ve already covered CSS size units, which are used to set the font size among other things.

+ +
p{ font-size: 16px;}
+ +

Bear in mind that setting a font size of 16px won’t make each letter 16px high. The actual size of each letter depends on the font-family used.

+ +

font-style

+ +

This property can make your text italic:

+ +
h2{ font-style: italic;}
+ +

Default value: font-style: normal;.

+ +

Another possible value is oblique but is never used.

+ +

font-weight

+ +

This property can make your text bold:

+ +
h2{ font-weight: bold;}
+ +

Default value: font-weight: normal;.

+ +

Depending on the font-family used, there is a range of font weights available, from 100 to 900:

+ +
font-weight: 100; /* Thin */
+font-weight: 200; /* Extra Light */
+font-weight: 300; /* Light */
+font-weight: 400; /* Which is like font-weight: normal; */
+font-weight: 500; /* Medium */
+font-weight: 600; /* Semi Bold */
+font-weight: 700; /* Which is like font-weight: bold; */
+font-weight: 800; /* Extra Bold */
+font-weight: 900; /* Ultra Bold */
+ +

Very few fonts provide all 9 weights. The Exo font is one of them.

+ +

You’ll mostly find 400 (normal) and 700 (bold), and sometimes 300 (light) and 500 (medium).

+ +

font-variant

+ +

This property turn your text into small caps:

+ +
h2{ font-variant: small-caps;}
+ +

Default value: font-variant: normal;.

+ +

It’s not a widely used property.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b3/a925c845f2301b51b84b39a4176e4e0f99430e49ae8cf8cb3c7b8c5fde4913 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b3/a925c845f2301b51b84b39a4176e4e0f99430e49ae8cf8cb3c7b8c5fde4913 new file mode 100644 index 0000000..76f5cef --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b3/a925c845f2301b51b84b39a4176e4e0f99430e49ae8cf8cb3c7b8c5fde4913 @@ -0,0 +1,95 @@ +I"F

In HTML, you’ll mainly come across 2 types of HTML elements:

+ + + +

Block elements are meant to structure the main parts of your page, by dividing your content in coherent blocks.

+ +

Inline elements are meant to differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.

+ +
<p>Have you seen this <a href="http://www.youtube.com">amazing video</a> on YouTube?</p>
+ +

Opening and closing tags

+ +

All block-level elements have an opening and closing tags.

+ +

As a result, self-enclosing elements are inline elements, simply because their syntax don’t allow them to contain any other HTML element.

+ +
+ + + + + + + + + + + + + + + + +
Have opening and closing tagsSelf-enclosing
Block elements + <p> + </p> +
+ <ul> + </ul> +
+ <ol> + </ol> + 		+ Impossible +
Inline elements + <a> + </a> +
+ <strong> + </strong> +
+ <em> + </em> + 		+ <input> +
+ <br> +
+ <img> +
+
+ +

Other types of HTML elements

+ +

There are several exceptions to the block/inline elements, but the ones you will most often encounter are:

+ + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b4/68373364d164fe226a527ce82d4d8ef151c83246ab1dbe11a566c48a12a1c0 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b4/68373364d164fe226a527ce82d4d8ef151c83246ab1dbe11a566c48a12a1c0 new file mode 100644 index 0000000..7e07711 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b4/68373364d164fe226a527ce82d4d8ef151c83246ab1dbe11a566c48a12a1c0 @@ -0,0 +1,35 @@ +I"Ŕ

Let’s say we want to change the text color of a webpage. It would be tedious to specify a color for every HTML element:

+ +
p,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6{ color: grey;}
+ +

Value propagation

+ +

The color value can be inherited from an ancestor. Considering we want to alter the whole webpage, we will choose the ancestor of all HTML elements, the body tag:

+ +
body{ color: grey;}
+ +

All child and descendant elements will inherit the value grey from their common ancestor body, which naturally encompasses all elements.

+ +

We could also use the html tag.

+ +

Inherited properties

+ +

Only a few CSS properties can be inherited from ancestors. They are mainly text properties:

+ + + +

Some HTML elements don’t inherit from their ancestors. Links for example don’t inherit the color property.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b8/43ec2af6c0f005ab2f6590df36c293f3abdb6dae4b29677d524717bb109179 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b8/43ec2af6c0f005ab2f6590df36c293f3abdb6dae4b29677d524717bb109179 new file mode 100644 index 0000000..e3aad6c --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b8/43ec2af6c0f005ab2f6590df36c293f3abdb6dae4b29677d524717bb109179 @@ -0,0 +1,461 @@ +I"Ŕ[

While navigating the Web, a user’s interaction is mostly only to click on links in order to navigate through webpages.

+ +

But the Web understands that a user is sometimes required to provide his own input. These types of interaction include:

+ + + +

To accomodate for these needs, HTML provides interactive form controls:

+ + + +

These controls use different HTML tags, but most of them use the <input> tag. Because it is a self-closing element, the type of input is defined by its type attribute:

+ +
<!-- A text input -->
+<input type="text">
+<!-- A checkbox -->
+<input type="checkbox">
+<!-- A radio button -->
+<input type="radio">
+ +
+ +
+ +
+ +
+ +

The Form element

+ +

The <form> is a block-level element thats defines an interactive part of a webpage. As a result, all form controls (like <input>, <textarea> or <button>) must appear within a <form> element.

+ +

Two HTML attributes are required:

+ + + +

Usually, the form information is sent to a server. How this data will then be processed goes beyond the scope of this tutorial.

+ +

Think of a form as a collection of input controls that work together to perform a single operation. If you wrote a login form, you could have 3 controls:

+ + + +

These 3 HTML elements would be enclosed within a single <form action="/login" method="POST">.

+ +

You could similarly add a signup form within the same HTML page, in a separate <form> element.

+ +

Text inputs

+ +

Almost all forms require textual input from users, in order for them to enter their name, email, password, address… Text form controls come in different variations:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Text<input type="text">Allows any type of character
Email<input type="email">Might display a warning if an invalid email is entered
Password<input type="password">Shows dots as characters
Number<input type="number">Up/Down keyboard keys can be used
Telephone<input type="tel">Can trigger an autofill
Multiple line text<textarea></textarea>Can be resized
+
+ +

Although these inputs look very similar and allow users to enter any kind of text (even wrong input), their type provides specific semantics to the input, by defining what kind of information it is supposed to contain.

+ +

Browsers can subsequently slightly alter a control’s interface to increase its interactivity or hint at what kind of content is expected.

+ +

For example, password inputs show dots instead of characters.

+ +
+ +
+ +

And number inputs allow their value to be increased/decreased using up and down keys.

+ +
+ +
+ +

Placeholders

+ +

Text inputs can display a placeholder text, that will disappear as soon as some text is entered.

+ +
<input type="text" placeholder="Enter your name">
+ +
+ +
+ +

If you start typing something, you’ll see the text “Enter your name” disappear.

+ +

Labels

+ +

Because form elements on their own are not very descriptive, they are usually preceded by a text label.

+ +
<label>Email</label>
+<input type="email">
+ +
+ + +
+ +

While placeholders already provide some hint at what content is expected, labels have the advantage of remaining visible at all times, and can be used alongside other types of form controls, like checkboxes or radio buttons.

+ +

Although you could use short paragraphs to describe form elements, using <label> is semantically more valid because they only exist within forms, and can be paired with a specific form control by using the for attribute and matching its value with the input’s id.

+ +
<label for="first_name">First name</label>
+<input id="first_name" type="text">
+ +
+ + +
+ +

Clicking on the label will focus the text input and place the text cursor inside. While this pairing seems useless, it will come in handy with checkboxes and radio buttons.

+ +

Checkboxes

+ +

Checkboxes are form controls that only have 2 states: checked or unchecked. They basically allow the user to say “Yes” or “No” to something.

+ +
<input type="checkbox"> Remember me
+ +
+ Remember me +
+ +

Because it can be hard to click on a small checkbox, it is recommended to wrap a <label> around the checkbox and its description.

+ +
<label>
+  <input type="checkbox"> I agree to the terms
+</label>
+ +
+ +
+ +

You can click on “I agree to the terms” to toggle the checkbox.

+ +

By default, a checkbox input is unchecked. You can mark it as checked by using the simply called checked attribute.

+ +
<label>
+  <input type="checkbox" checked> Use as my billing address
+</label>
+ +
+ +
+ +

Radio buttons

+ +

You can present the user a list of options to choose from by using radio buttons.

+ +

For this form control to work, your HTML code needs to group a list of radio buttons together. This is achieved by using the same value for the name attribute:

+ +
<label>Marital status</label>
+<label>
+  <input type="radio" name="status">
+  Single
+</label>
+<label>
+  <input type="radio" name="status">
+  Married
+</label>
+<label>
+  <input type="radio" name="status">
+  Divorced
+</label>
+<label>
+  <input type="radio" name="status">
+  Widowed
+</label>
+ +
+ +
+ +
+ +
+ +
+ +
+ +

Because all radio buttons use the same value for their name attribute (in this case the value "status"), selecting one option will unselect all other ones. Radio buttons are said to be mutually exclusive.

+ +

Difference between radio buttons and checkboxes

+ +

While a checkbox exists on its own, radio buttons can only appear as a list (which means having at least 2 options).

+ +

Also, clicking a checkbox is optional while choosing one of the radio buttons is mandatory. That’s why it is impossible to uncheck a radio button unless choosing a sibling option. But in the end, one of the radio buttons is always selected.

+ + + +

If the number of options to choose from takes up too much space, you can use <select> dropdown menus.

+ +

They work like radio buttons. Only their layout is different.

+ +
<select>
+  <option>January</option>
+  <option>February</option>
+  <option>March</option>
+  <option>April</option>
+  <option>May</option>
+  <option>June</option>
+  <option>July</option>
+  <option>August</option>
+  <option>September</option>
+  <option>October</option>
+  <option>November</option>
+  <option>December</option>
+</select>
+ +
+ +
+ +

Multiple choice dropdown menus

+ +

If you add the multiple attribute, you can provide the ability to select multiple choices.

+ +
<label>Which browsers do you have?</label>
+<select multiple>
+  <option>Google Chrome</option>
+  <option>Internet Explorer</option>
+  <option>Mozilla Firefox</option>
+  <option>Opera</option>
+  <option>Safari</option>
+</select>
+ +
+ +
+ +
+ +

Select multiple options by maintaining Ctrl (or âŚ) and clicking. This can be a good alternative to using multiple checkboxes in a row.

+ +

Example: a complete signup form

+ +
<form action="/signup" method="POST">
+  <p>
+    <label>Title</label>
+    <label>
+      <input type="radio" name="title" value="mr">
+      Mr
+    </label>
+    <label>
+      <input type="radio" name="title" value="mrs">
+      Mrs
+    </label>
+    <label>
+      <input type="radio" name="title" value="miss">
+      Miss
+    </label>
+  </p>
+  <p>
+    <label>First name</label>
+    <input type="text" value="first_name">
+  </p>
+  <p>
+    <label>Last name</label>
+    <input type="text" value="last_name">
+  </p>
+  <p>
+    <label>Email</label>
+    <input type="email" value="email">
+  </p>
+  <p>
+    <label>Phone number</label>
+    <input type="tel" value="phone">
+  </p>
+  <p>
+    <label>Password</label>
+    <input type="password" value="password">
+  </p>
+  <p>
+    <label>Confirm your password</label>
+    <input type="password" value="password_confirm">
+  </p>
+  <p>
+    <label>Country</label>
+    <select>
+      <option>Canada</option>
+      <option>France</option>
+      <option>Germany</option>
+      <option>Italy</option>
+      <option>Japan</option>
+      <option>Russia</option>
+      <option>United Kingdom</option>
+      <option>United States</option>
+    </select>
+  </p>
+  <p>
+    <label>
+      <input type="checkbox" value="terms">
+      I agree to the <a href="/terms">terms and conditions</a>
+    </label>
+  </p>
+  <p>
+    <button>
+      Sign up
+    </button>
+  </p>
+</form>
+ +
+
+

+ + + + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ +

+

+ +

+
+
+ +

There are other form controls available, but we’ve covered the ones who’ll mostly use.

+ +

It’s time to start styling our page.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b9/c7d5c7818aeb0463edc11f36a8ff95b21bf5781647b1b06fdeaababbcf7280 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b9/c7d5c7818aeb0463edc11f36a8ff95b21bf5781647b1b06fdeaababbcf7280 new file mode 100644 index 0000000..0638f75 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/b9/c7d5c7818aeb0463edc11f36a8ff95b21bf5781647b1b06fdeaababbcf7280 @@ -0,0 +1,23 @@ +I"“

Show file extensions

+ +

Let’s say you have a solar eclipse picture on your computer, it will show up as:

+ +

Solar Eclipse

+ + + +

A file’s extension defines the type of file it is (in this case, an image). For HTML files, the extension is .html.

+ +

By default, file extensions are hidden. In this tutorial, we’ll need to be able to edit these extensions. So follow these instructions to display file extensions:

+ + + +

Download a good Web browser

+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ba/db9665daa616d9554ff5e4866e72617fd2ac9a161c8a383d2cbf8ea5794f6a b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ba/db9665daa616d9554ff5e4866e72617fd2ac9a161c8a383d2cbf8ea5794f6a new file mode 100644 index 0000000..0b15037 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ba/db9665daa616d9554ff5e4866e72617fd2ac9a161c8a383d2cbf8ea5794f6a @@ -0,0 +1,121 @@ +I"Q"

As the Web grew in popularity in the 90s, the intent to apply a specific design to a website grew as well. Web developers relied upon specific HTML tags to enhance webpages:

+ + + +

Several HTML attributes could also be used:

+ + + +

Why avoid tables

+ +

But most of all, in order to create columns, visually align elements, and generally position elements relatively to each other, Web developers used the <table> element to design their webpages because it naturally provided a visual grid:

+ +
<table>
+  <thead>
+    <tr>
+      <th>Logo</th>
+      <th colspan="2">Tagline</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th colspan="3">Copyright 2015</th>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Left menu</td>
+      <td>Main content</td>
+      <td>Right sidebar</td>
+    </tr>
+  </tbody>
+</table>
+ +

This approach was cumbersome for several reasons:

+ + + +

That is why using tables for layout purposes was slowly abandoned, and CSS was used instead.

+ +

What CSS is

+ +

CSS stands for Cascading Style Sheets. Its purpose is to style markup languages (like HTML or XML). Therefore, CSS is worthless on its own, unless associated with an HTML document.

+ +

CSS brings an HTML document to life, by choosing fonts, applying colors, defining margins, positioning elements, animating interactions, and much more.

+ +

How CSS works

+ +

How CSS works is by selecting an HTML element (like a paragraph), choosing a property to alter (like the color), and applying a certain value (like red):

+ +
p{ color: red;}
+ +

The word “Style” can be deceiving. You might think CSS is only used to change the text’s color, size, and font. But CSS is able to define an HTML document’s layout, by defining heights, widths, inner and outer margins, positions, columns…

+ +

Where do I write CSS?

+ +

CSS as an attribute

+ +

You can write CSS directly on an HTML elements, by using the style attribute:

+ +
<p style="color: red;">This text is important.</p>
+ +

CSS in the <head>

+ +

You can use a <style> tag in the <head> of your HTML document:

+ +
<html>
+  <head>
+    <title>Hello World</title>
+    <style type="text/css">
+      p{ color: red;}
+    </style>
+  </head>
+  <body>
+    <p>This paragraph will be red.</p>
+  </body>
+</html>
+ +

CSS in a separate file

+ +

You can write your CSS in a separate file with a .css extension, and then link it to your HTML by using the <link> HTML tag.

+ +
p{ color: red;}
+ +
<html>
+  <head>
+    <title>Hello World</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <p>This paragraph will be red.</p>
+  </body>
+</html>
+ +

It is the HTML document who “calls” the CSS file, in this case a file called style.css located in the same folder as the HTML file.

+ +

This 3rd method of using a separate CSS file is preferred.

+ +

Why not style directly in the HTML?

+ +

Because we want to separate the content (HTML) from its presentation (CSS).

+ +

If you want to visualize the purpose of this distinction, head towards the wonderful CSS Zen Garden: each design uses the exact same HTML but a different CSS each time.

+ +

It makes maintenance easier as well: the same CSS file can be used for a whole website. It provides flexiblity: focus on the content on one side, the styling on the other. SEO purposes, different concerns.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c1/5cdab27d90e81f31c300b43185dd502775c0c3a7045f35528781ebbef4f557 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c1/5cdab27d90e81f31c300b43185dd502775c0c3a7045f35528781ebbef4f557 new file mode 100644 index 0000000..ab8ff61 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c1/5cdab27d90e81f31c300b43185dd502775c0c3a7045f35528781ebbef4f557 @@ -0,0 +1,4 @@ +I"t

Even without applying any CSS, an HTML document is already styled. Its content follows a natural Flow, directly dependent on the HTML structure.

+ +

But webpages often want elements to be positioned in a certain way to accomodate for particular design needs, which requires breaking the Flow.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c7/4744fbaf1674c1358ff24d7c43dd347621d133c73eb3c7c914f155840503b2 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c7/4744fbaf1674c1358ff24d7c43dd347621d133c73eb3c7c914f155840503b2 new file mode 100644 index 0000000..2aa61c2 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c7/4744fbaf1674c1358ff24d7c43dd347621d133c73eb3c7c914f155840503b2 @@ -0,0 +1,95 @@ +I"á

HTML stands for HyperText Markup Language:

+ + + +

Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.

+ +

Here is a sample paragraph in HTML:

+ +
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+ +

If Tetris has taught me anything it's that errors pile up and accomplishments disappear.

+ +

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/cf/de8b70103ddc0b273e626a7f0fba3d5710d88775e2f5f2d717b51cea920fa8 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/cf/de8b70103ddc0b273e626a7f0fba3d5710d88775e2f5f2d717b51cea920fa8 new file mode 100644 index 0000000..f1fcbd5 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/cf/de8b70103ddc0b273e626a7f0fba3d5710d88775e2f5f2d717b51cea920fa8 @@ -0,0 +1,10 @@ +I"”

By default, every HTML element is rendered in the browser as a rectangle. The dimensions of that rectangle are dynamic: they vary according to the content of that element. You can consider these rectangles as fluid, altering their shape to fit the content.

+ +

That is because a webpage is a living element: just resize your browser window to see how most elements will adapt automatically to fit within the available space.

+ +

This is the default behavior of a webpage. But because the design of a webpage often requires to fix elements in place, with specific dimensions, CSS allows us to alter or even cancel this fluid behavior.

+ +

A block-level element, like a paragraph, will horizontally take up all the space it can, which by default is the width of your browser. Vertically, the paragraph will adapt its height to the length of its content.

+ +

Many parameters are taken into account: the length of the content, the font used, its size, its spacing, the element’s padding, the borders, if it’s floating, its positioning…

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d0/2dbe2c16bb860cb79a544d80981c0c91a39aa4a672ed65e6e9e32ab490123c b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d0/2dbe2c16bb860cb79a544d80981c0c91a39aa4a672ed65e6e9e32ab490123c new file mode 100644 index 0000000..2bcff36 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d0/2dbe2c16bb860cb79a544d80981c0c91a39aa4a672ed65e6e9e32ab490123c @@ -0,0 +1,134 @@ +I"›

The purpose of HTML tags is to deliver meaning to a document. Don’t be concerned about how your webpage looks like. Focus on the significance of each tag you’ll use.

+ +

Depending on the content you’re writing, you can choose the appropriate element that matches the meaning of your text.

+ +

This range of elements is wide enough to both accomodate for general purpose matter (like paragraphs or lists), and more specific content like <output> (to display the result of a calculation) or <progress> (to display the progress of a task).

+ +

Structure elements: organizing your page

+ +

Structure elements allow you to organize the main parts of your page. They usually contain other HTML elements.

+ +

Here’s what a typical webpage could include:

+ + + +

Text elements: defining your content

+ +

Inside these structure elements, you usually find text elements meant to define the purpose of your content.

+ +

You’ll mainly use:

+ + + +

Inline elements: distinguishing your text

+ +

Because text elements can be long but with varied content, inline elements allow to distinguish parts of your text.

+ +

There are a lot of inline elements available, but you’ll usually come across the following:

+ + + + + +
<article>
+  <h1>Main title of the page</h1>
+  <h2>A subtitle</h2>
+  <p>
+    Something something an other stuff and some <em>emphasis</em> and even <strong>important</strong> words.
+  </p>
+  <p>
+    Another paragraph.
+  </p>
+  <ul>
+    <li>One</li>
+    <li>Two</li>
+    <li>Three</li>
+  </ul>
+  <blockquote>
+    Once said
+  </blockquote>
+</article>
+<aside>
+  <h3>My latest posts</h3>
+  <ul>
+    <li><a href="#">One</a></li>
+    <li><a href="#">One</a></li>
+    <li><a href="#">One</a></li>
+  </ul>
+</aside>
+ +

Generic elements

+ +

When apparently no semantic element seems suited for your content but you still want to insert an HTML element (either for grouping or styling purposes), you can settle for one of the two generic elements:

+ + + +

Although these HTML elements don’t actually mean anything, they will come in handy when we’ll start using CSS.

+ +

Don’t overthink semantics

+ +

There are about 100 semantic HTML elements to choose from. That’s a lot. It can be overwhelming to go through that list and choose the appropriate element for your content.

+ +

But don’t spend too much time worrying about that. If you stick to the following list for now, you’ll be well enough:

+ +
+ + + + + + + + + + + +
StructureTextInline
+ header
+ h1
+ h2
+ h3
+ nav
+ footer
+ article
+ section + 		+ p
+ ul
+ ol
+ li
+ blockquote + 		+ a
+ strong
+ em
+ q
+ abbr
+ small +
+
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/2b6f8dacdababcd18d37cb78e3c2993d61f9aed523f0c336358313875e6146 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/2b6f8dacdababcd18d37cb78e3c2993d61f9aed523f0c336358313875e6146 new file mode 100644 index 0000000..0e3d61a --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/2b6f8dacdababcd18d37cb78e3c2993d61f9aed523f0c336358313875e6146 @@ -0,0 +1,152 @@ +I"ď

Ahora mismo estás usando un navegador Web para leer esta página web escrita en HTML.

+ +

Documentos HTML

+ +

Las páginas web son Documentos HTML, como otros archivos en tu computadora. Son sólo archivos de texto con una extensión .html.

+ +

En tu computadora, probablemente tienes diferentes tipos de archivos:

+ + + +

Cada uno de estos tipos de archivos puede ser abierto por un programa en especĂ­fico. Algunos de estos programas sĂłlo pueden abrir estos archivos, mientras que otros pueden abrir y crear archivos.

+ +

Por default, las extensiones de archivos están ocultas. En este tutorial, necesitaremos poder editar estas extensiones. Así que deberás seguir estas instrucciones para mostrar las extensiones de archivo en tu computadora: +Windows: Mostrar u ocultar las extensiones de nombre de archivo +Mac: Mostrar u ocultar las extensiones de los nombres de archivos

+ +

Por ejemplo:

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProgramaTipo + Puede abrir estos archivos + + También puede crear estos archivos? +
Microsoft WordEditor de textos + .doc + .docx + SĂ­
PaintGráficos + .jpg + .gif + .bmp + Sí
VLCReproductor de video + .avi + .mpg + No
iTunesReproductor de mĂşsica + .mp3 + .wav + .aiff + No
FirefoxNavegador Web + .html + No
Notepad++Editor de texto + .text + .html + SĂ­
+
+ +

El programa que se usa para abrir documentos HTML es un navegador, como Firefox o Google Chrome. +El programa que se usa para crear documentos HTML es un editor de texto, como Notepad++ o Sublime Text.

+ +

CĂłdigo fuente HTML

+ +

El cĂłdigo HTML se ve asĂ­:

+ +
<p>Hola Mundo</p>
+ +

Este código está escrito con un editor de texto. Puedes ver las etiquetas <p>y </p> que representan un párrafo.

+ +

Cuando un navegador lo abre, estas etiquetas no se muestran, más bien se interpretan en el navegador:

+ +
+

Hola Mundo

+
+ +

El navegador ve las etiquetas <p> y </p> y entiende que Hola Mundo es un párrafo.

+ +

Recuerda que un documento HTML puede ser abierto de 2 maneras:

+ + + +

Lista de navegadores Web

+ +

Como la Web se ha convertido en el uso principal de Internet, cada computadora y smartphone viene con un navegador instalado por default.

+ +

Los más populares son:

+ + + +

Lista de editores de texto

+ +

Los más populares son:

+ + + +

Necesitarás installar alguno para escribir HTML y CSS.

+ +

Aunque el resto de este tutorial no requiere que escribas el cĂłdigo, es recomendable que pruebes los ejemplos por tu cuenta.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/e1a33dd5b4c861813d6df61d96c9051ee1589b3d53f7a586b6931d69c60d71 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/e1a33dd5b4c861813d6df61d96c9051ee1589b3d53f7a586b6931d69c60d71 new file mode 100644 index 0000000..e0cd1ed --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/d4/e1a33dd5b4c861813d6df61d96c9051ee1589b3d53f7a586b6931d69c60d71 @@ -0,0 +1,115 @@ +I"q

An HTML document is a living document

+ +

Even without any CSS applied, an HTML document already has its own rules:

+ + + +

This natural behavior is logical.

+ +

Fluidity

+ +

In HTML, the content is King.

+ +

All block elements are fluid. They will naturally adapt their layout to accommodate their inner content:

+ + + +
+
+ A block element will fill up the whole width available, while its height will vary automatically according to the size of its content. +
+
+ This element will be pushed downwards depending on the height of its predecessors. +
+
+ + + + + +

Ordering

+ +

HTML elements are displayed in the order in which they are written in the code. +First in the code -> first in the browser.

+ +

Each block appears in the order in which they appear in the HTML code, from top to bottom.

+ +
<p>First</p>
+<p>Second</p>
+<p>Third</p>
+<p>Fourth</p>
+<p>Fifth</p>
+ +
+

First

+

Second

+

Third

+

Fourth

+

Fifth

+
+ +

Stacking

+ +

A browser has 3 dimensions.

+ +

Each HTML element belongs to an imaginary layer.

+ +

The stack order depends on how elements are nested: child elements appear on top of their respective parents.

+ + + +
<div>
+  This parent is behind
+  <p>
+    This nested child appears <strong>on top</strong> of its parent
+  </p>
+</div>
+ +
+
+ This parent is behind +

+ This nested child appears on top of its parent +

+
+
+ +

Breaking the flow

+ +

While the browser’s default behavior is efficient, it may not be sufficient for your design needs.

+ +

Several CSS properties allow to disrupt the Flow:

+ + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/dd/94b34e2994f1633362343df2dc9193937d95f2a5ca2933d7e2dd4b2037969e b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/dd/94b34e2994f1633362343df2dc9193937d95f2a5ca2933d7e2dd4b2037969e new file mode 100644 index 0000000..c59e1c9 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/dd/94b34e2994f1633362343df2dc9193937d95f2a5ca2933d7e2dd4b2037969e @@ -0,0 +1,77 @@ +I"©

The background of an HTML element is what appears behind the text. Although CSS allows to apply a background on any type of HTML element, it’s mostly used on block-level elements.

+ +

Backgrounds are only applied on the targeted element. But considering most HTML elements have a transparent background, applying a background on the body will look like it’s applied on all elements.

+ +

background-color

+ +

Default value: transparent +Inherited by children elements: no.

+ +

As we’ve already covered the different ways to define a color in CSS, applying a background color is straightforward:

+ +
body{ background: #f2eee9;}
+ +

The whole element will be filled with a plain background color. Bear in mind to always to choose an appropriate text color to keep your content easy to read.

+ +

background-image

+ +

Because plain colors are usually not sufficient, CSS allows to apply images as backgrounds for elements.

+ +

Applying a background image only requires to specify its URL:

+ +
body{ background-image: url(images/diagonal-pattern.png);}
+ +

The behavior of the image (how it repeats itself, where it is positioned, how it is sized) is defined by other background properties. The background-image only defines which image to use.

+ +

Bear in mind that the HTML element doesn’t take into consideration the dimensions of its background image. Even if the image is bigger than the element it’s applied to, the element won’t resize to fit the image, as the image is purely decorative and is here to support the element.

+ +

The difference between HTML images <img> and CSS background images

+ +

The HTML <img> element is for images that are part of the content, while CSS background images are purely decorative.

+ +

The logo of a company, the thumbnail of a gallery, the picture of a product… These are all considered content and should use the HTML <img> element.

+ +

A diagonal pattern, a beautiful landscape, a cart icon… These can be considered as decorative, as they support the content but are not part of it. If they were to disappear, the webpage would still make sense.

+ +

As for many dual choices, the frontier between content and styling is blurry. Some visual techniques are easier to achieve with CSS backgrounds. Just ask yourself if the image you’re using is essential to the page. If so, use <img> element.

+ +

Gradients

+ +

CSS also allows to define color gradients as background images, in 2 different shapes:

+ + + +

We cover that in a chapter 8.3: CSS gradients. The only thing to know for now is that background gradients are considered as background images:

+ +
body{ background-image: linear-gradient(white, grey);}
+ +

background-position

+ +

By default, a background image will repeat itself indefinitely. You can specify where its original position, by choosing a horizontal x value, and a vertical y one.

+ +

For each coordinate, you either use:

+ + + +
body{ background-position: right bottom;}
+ +

You can mix different coordinate units:

+ +
body{ background-position: center 20px;}
+ +

background-repeat

+ +

By default, a background image will repeat itself indefinitely. You can choose to make it repeat only horizontally, only vertically, or not at all.

+ +
body{ background-repeat: repeat-x;} /* Only horizontally */
+body{ background-repeat: repeat-y;} /* Only vertically */
+body{ background-repeat: no-repeat;} /* The background image will only appear once */
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/de/de1b69269ded73a4e5c40bf87de0acc8cfe6b698543009d95ad7be0ef1b2fc b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/de/de1b69269ded73a4e5c40bf87de0acc8cfe6b698543009d95ad7be0ef1b2fc new file mode 100644 index 0000000..3aa0cde --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/de/de1b69269ded73a4e5c40bf87de0acc8cfe6b698543009d95ad7be0ef1b2fc @@ -0,0 +1,62 @@ +I"•

CSS provides several font properties, that directly affect text rendering. The font-family property defines which font to use.

+ +

Generic font families

+ +

Fonts are grouped in 5 generic families:

+ + + +

cursive and fantasy are never used.

+ +

Because the font-family property is inherited by all HTML children elements, you can apply a font for the whole HTML document by applying it on the ancestor of all HTML elements: the <body> element.

+ +
body{ font-family: sans-serif;}
+ +

With this CSS rule, the webpage will use the sans-serif font defined by the user in his preferences.

+ +

Web-safe fonts

+ +

The problem with using generic font names is that the design of your webpage will rely upon the font set by the user in his settings.

+ +

As you probably want your webpage to look the same on anyone’s computer, you’ll want to define a specific font to be used. To do so, just use the name of the font.

+ +
body{ font-family: Arial;}
+ +

Your webpage will use Arial provided it is installed on the user’s computer. If the Arial font is not available on the user’s computer, it will use the browser’s default serif font (which is usually Times).

+ +

Arial is a safe choice though, because it is installed on all Windows and Mac computers, and on most Linux systems. That is why Arial is considered a web-safe font: you can safely use it in your CSS and be almost sure that the user’s computer will have it installed.

+ +

There are 9 web-safe fonts:

+ + + +

Applying a list of fonts

+ +

Although using any of these values for the font-family property is a safe bet, you can define fallback values by writing a list of font families:

+ +
body{ font-family: Arial, Verdana, sans-serif;}
+ +

By defining multiple values for font-family, the browser will look for the first value Arial and use it. If it’s not available, it will use the following one Verdana. Finally, if that one isn’t available either, it will use the browser’s default sans-serif font.

+ +

It is good practice to use a generic family as the last value. If you can’t define the specific font to use, you can at least define the type of font you want.

+ +

Because designers want to use more original fonts but still want their webpage to look exactly the same on anyone’s computer, it is possible to include a font in a webpage. That way, they make sure the font is available even if it’s not present on the user’s computer, simply because the website provides the font.

+ +

We’ll look into this method called @font-face, and see how services like Google Fonts or Typekit can help you.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e0/9620ea34075a95f68402b50e67cf7a400fc2f428894028b995428b5f5f33d6 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e0/9620ea34075a95f68402b50e67cf7a400fc2f428894028b995428b5f5f33d6 new file mode 100644 index 0000000..3a19ce8 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e0/9620ea34075a95f68402b50e67cf7a400fc2f428894028b995428b5f5f33d6 @@ -0,0 +1,6 @@ +I"

Seguramente ya estás familiarizado con los editores de documentos, como Microsoft Word, con el que puedes darle estructura a tus documentos con títulos, párrafos, listas, tablas, imágenes, negritas y texto en itálicas.

+ +

HTML provee a grosso modo el mismo número de elementos para dar formato. La diferencia principal es que dar formato en Word se hace de manera visual, mientras que el código HTML es puramente semántico: eres tú quien provee de significado a tu texto.

+ +

The same way you use ♫ notes ♬ to write music, you use HTML to write webpages.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e1/507beb143444029b2fb070a777a7d62cdea4fa79895564367fd2952fbce9bb b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e1/507beb143444029b2fb070a777a7d62cdea4fa79895564367fd2952fbce9bb new file mode 100644 index 0000000..a7b2fc3 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e1/507beb143444029b2fb070a777a7d62cdea4fa79895564367fd2952fbce9bb @@ -0,0 +1,4 @@ +I"é

For a while, CSS has remained one-sided: one color, one state, one instant, one device.

+ +

Throughout the years, it has developed new features that alter interactions, intermediate states, and even time.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e4/d11cef783e0bd98fdd3c7d44824a2a6622f35095a0c955bbec736f6b900c9e b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e4/d11cef783e0bd98fdd3c7d44824a2a6622f35095a0c955bbec736f6b900c9e new file mode 100644 index 0000000..c3b604b --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e4/d11cef783e0bd98fdd3c7d44824a2a6622f35095a0c955bbec736f6b900c9e @@ -0,0 +1,4 @@ +I"I

Antes de adentrarnos en el aspecto técnico y práctico de la programación, necesitas tener un entendimiento básico de cómo funciona el entorno subyacente.

+ +

Esta introducción tiene como fin proveerte de un resumen rápido acerca de Internet y la Web.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e9/facdbdc971f0964128d121e44901fa054b0c062b73e37d7980ea78fe510623 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e9/facdbdc971f0964128d121e44901fa054b0c062b73e37d7980ea78fe510623 new file mode 100644 index 0000000..c8a384b --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e9/facdbdc971f0964128d121e44901fa054b0c062b73e37d7980ea78fe510623 @@ -0,0 +1,8 @@ +I"í

You’re certainly already acquainted with document editors, like Microsoft Word, with which you can structure your document with titles, paragraph, lists, tables, images, bold and italic text.

+ +

Seguramente ya estás familiarizado con los editores de documentos, como Microsoft Word, con el que puedes darle estructura a tus documentos con títulos, párrafos, listas, tablas, imágenes, negritas y texto en itálicas.

+ +

HTML provides roughly the same elements of formatting. The key difference is that formatting text in Microsoft Word is visual, whereas HTML code is purely semantic: you provide meaning to your text.

+ +

The same way you use ♫ notes ♬ to write music, you use HTML to write webpages.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/eb/dc293d1dca1fe51c45099e5b08916d0cd60490eaac72f7627110bb2e52267a b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/eb/dc293d1dca1fe51c45099e5b08916d0cd60490eaac72f7627110bb2e52267a new file mode 100644 index 0000000..c3ba0ba --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/eb/dc293d1dca1fe51c45099e5b08916d0cd60490eaac72f7627110bb2e52267a @@ -0,0 +1,96 @@ +I";

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
+ +

Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen..

+ +

Lo que ves entre signos de mayor qué y menor qué < y > son etiquetas de HTML. Éstas definen donde algo comienza y donde termina.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ed/4b6fbe14cb7172f1bfd7e628c1b9b07023a4a386a2ba94c587af83c11c8b04 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ed/4b6fbe14cb7172f1bfd7e628c1b9b07023a4a386a2ba94c587af83c11c8b04 new file mode 100644 index 0000000..b543866 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ed/4b6fbe14cb7172f1bfd7e628c1b9b07023a4a386a2ba94c587af83c11c8b04 @@ -0,0 +1,71 @@ +I"Ą

Images are the first non-textual content to have appeared on the Web. Most image formats you can find on your computer can also be displayed in your browser: .jpg, .gif (animated or not), .png (transparent or not), .bmp…

+ +

Syntax

+ +

Images use the <img> element, which is a self-closing element (it only has an opening tag).

+ +

The src attribute defines the location of the image. As with links, you can either use relative or absolute URLs.

+ + + +
<p>
+  Look at this spacecraft landing!
+  <br>
+  <img src="soyuz-spacecraft.jpg">
+</p>
+ +
+

+ Look at this spacecraft landing! +
+ +

+
+ +

Dimensions

+ +

Every image has 2 dimensions: a width and a height. The previously shown spacecraft image is 394 pixels wide and 284 high.

+ +

When inserting an image in HTML, you don’t need to specify its dimensions: the browser will automatically display it in full size.

+ +

If you want to alter the dimensions of an image, although it is possible in HTML, it’s recommended to use CSS, as we’ll see in later chapters.

+ +

Block or inline?

+ +

Although an image has a width and a height, and is visually a big rectangle, an image is not an HTML block element but actually an inline element.

+ +

This is due to the <img> element being a self-closing element: it can’t technically contain any other HTML element, and is thus considered an inline element, like <a>, <strong> or <em>.

+ +

This inline behavior can have unexpected results:

+ +
<p>
+  There is a frog
+  <img src="frog.jpg">
+  in the middle of the paragraph!
+</p>
+ +
+

+ There is a frog + + in the middle of the paragraph! +

+
+ +

Because in HTML the content is king, images will be displayed regardless of the quirky layout it might induce, and thoughtfully so.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ee/fd1588456c77af0471a285a5015277dce2af42bf90705900ace4af4880ced6 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ee/fd1588456c77af0471a285a5015277dce2af42bf90705900ace4af4880ced6 new file mode 100644 index 0000000..8ebd4b3 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ee/fd1588456c77af0471a285a5015277dce2af42bf90705900ace4af4880ced6 @@ -0,0 +1,116 @@ +I"N,

One of the first reasons people turn to Sass is the existence of CSS variables.

+ +

Have you ever had to search and replace many occurrences of the same CSS value? If so, variables will help you out.

+ +

Syntax

+ +

You need to prepend a variable with a $ dollar sign:

+ +
$yellow: #fce473;
+ +

This line doesn’t do anything apart from defining a variable, in our case a shade of yellow:

+ +
#fce473
+ +

We can then use it throughout our CSS, whenever a color unit is required:

+ +
.quote{ border-left: 5px solid $yellow;}
+ +

This .scss file will be compiled into a .css file, where all variables will be replaced with their actual value:

+ +
.quote{ border-left: 5px solid #fce473;}
+ +

Why is it called a variable? +Well here, the value #fce473 is variable. Meaning the name $yellow remains fixed but the value can change.

+ +

Set your variable only once

+ +

To illustrate the purpose of using variables, you need to use it more than once, like this pink shade:

+ +
#ff1493
+ +
$pink: #ff1493;
+.quote{ border-left: 5px solid $pink;}
+.button{ background: $pink;}
+.sidebar a:hover{ border-bottom-color: $pink;}
+.footer a{ color: $pink;}
+ +

This will be compiled into:

+ +
.quote{ border-left: 5px solid #ff1493;}
+.button{ background: #ff1493;}
+.sidebar a:hover{ border-bottom-color: #ff1493;}
+.footer a{ color: #ff1493;}
+ +

If you decided to go for a different shade of pink:

+ +
Old pink
+
New pink
+ +

You’d only have to change the color value once:

+ +
$pink: #c71585;
+ +

And the resulting CSS would be automatically updated:

+ +
.quote{ border-left: 5px solid #c71585;}
+.button{ background: #c71585;}
+.sidebar a:hover{ border-bottom-color: #c71585;}
+.footer a{ color: #c71585;}
+ +

Even more abstraction

+ +

Now let’s say you actually don’t want to use pink as your primary color, but green!

+ +
#32cd32
+ +

You’d have to define a $green: #32cd32; variable and replace all the instances of $pink with $green in your SCSS.

+ +

There is a better way:

+ +
// Defining color values
+$yellow: #fce473;
+$pink: #c71585;
+$green: #32cd32;
+$blue: #1d90ff;
+
+// Defining color types
+$primary-color: $green;
+
+.quote{ border-left: 5px solid $primary-color;}
+.button{ background: $primary-color;}
+.sidebar a:hover{ border-bottom-color: $primary-color;}
+.footer a{ color: $primary-color;}
+ +

Instead of directly referencing the variable $green, you define a primary color variable that is set to $green.

+ +

When you think about it, you don’t really want to use $green throughout your CSS. What you actually want is use your primary color, which happens to be green.

+ +

If you decided to use $blue as your primary color, you’d only have to modify a single line.

+ +

For any type of value

+ +

We’ve used variables to define colors, but you can set any type of content:

+ +
// Colors
+$yellow:              #fce473;
+$pink:                #c71585;
+$green:               #32cd32;
+$blue:                #1d90ff;
+
+$primary-color:       $blue;
+$secondary-color:     $yellow;
+
+// Fonts
+$serif:               "Lora", "Playfair Display", Georgia, serif;
+$sans-serif:          "Roboto", "Source Sans Pro", "Open Sans", Arial, sans-serif;
+$monospace:           "Inconsolata", monospace;
+
+$primary-font:        $sans-serif;
+$secondary-font:      $serif;
+
+// Spacing
+$mobile-space:        10px;
+$desktop-space:       35px;
+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/36ae9f0e25d086374f201baea0fcbce19cf93bfda8ff51b75ec1bdca93ed19 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/36ae9f0e25d086374f201baea0fcbce19cf93bfda8ff51b75ec1bdca93ed19 new file mode 100644 index 0000000..aeaf343 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/36ae9f0e25d086374f201baea0fcbce19cf93bfda8ff51b75ec1bdca93ed19 @@ -0,0 +1,100 @@ +I"đ

Behind the word float, an endless sea of possibilities (and misbehaviors).

+ +

float is probably the most difficult CSS concept to grasp. Its behavior can be intriguing, unexpected, and magical. Probably because, of all positioning properties there are, it is the one that most influences its surroundings.

+ +

In other words, applying a float not only modifies the element it’s applied upon but also alters its ancestors, siblings, descendants, and following elements.

+ +

float can only have one of these 3 values:

+ + + +

When to use float

+ +

The purpose of floating an element is to push it to one side and make the text wrap around it.

+ +

To explain the behaviour, let’s use a common example: floating an image within a paragraph.

+ +
<p>
+  <img src="http://placehold.it/150x150">
+  The bells of the neighbouring church made a jangling tumult, a cart carelessly driven smashed, amid shrieks and curses, against the water trough up the street.  Sickly yellow lights went to and fro in the houses, and some of the passing cabs flaunted unextinguished lamps. And overhead the dawn was growing brighter, clear and steady and calm.
+</p>
+ +
+

+ + It was while the curate had sat and talked so wildly to me under the hedge in the flat meadows near Halliford, and while my brother was watching the fugitives stream over Westminster Bridge, that the Martians had resumed the offensive. So far as one can ascertain from the conflicting accounts that have been put forth, the majority of them remained busied with preparations in the Horsell pit until nine that night, hurrying on some operation that disengaged huge volumes of green smoke. +

+
+ +

The problem when inserting an image within a text is that an image must fit on a single line of text, and will therefore extend the height of the line it’s on. In our case, our image is 150px high.

+ +

What we want is to wrap the text around the image:

+ +
img{ float: left;}
+ +
+

+ + It was while the curate had sat and talked so wildly to me under the hedge in the flat meadows near Halliford, and while my brother was watching the fugitives stream over Westminster Bridge, that the Martians had resumed the offensive. So far as one can ascertain from the conflicting accounts that have been put forth, the majority of them remained busied with preparations in the Horsell pit until nine that night, hurrying on some operation that disengaged huge volumes of green smoke. +

+
+ +

As you can see, the image is pushed to the left, and the text that follows just wraps around the image:

+ + + +

What if the text isn’t long enough?

+ +
+

+ + He heard footsteps running to and fro in the rooms, and up and down stairs behind him +

+
+ +

The floating image will overflow because it’s higher than its yellow container. And as you can actually see, it even visually breaks this paragraph you’re reading.

+ +

I’ve intentionally left this layout error to showcase why floats are unpredictable: they can even break their parent’s siblings!

+ +

Because float: left takes the image out of the flow, the yellow paragraph’s height is only the height of its text. In other words, the height of the image isn’t taken into account.

+ +

Float = block

+ +

Floating elements will have a display: block applied to them automatically, and will mostly behave like blocks:

+ + + +

Clearing the float

+ +

The clear property allows to push elements after the float. It can only be applied on block elements.

+ +
<p>
+  <img src="http://placehold.it/150x150">
+  <span>He heard footsteps running to and fro in the rooms, and up and down stairs behind him</span>
+</p>
+ +
img{ float: left;}
+span{ clear: left; display: block;}
+ +
+

+ + He heard footsteps running to and fro in the rooms, and up and down stairs behind him +

+
+ +

Instead of having the text pushed next to the image, the clear: left pushes the text below the image.

+ +

It’s different from having no float or clear at all, as the image is on its own line and not on the same line as the text.

+ +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/50728110c481fbc8bca6d9b9a54c5733014339298666e306bacfbbd607a47e b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/50728110c481fbc8bca6d9b9a54c5733014339298666e306bacfbbd607a47e new file mode 100644 index 0000000..3b10a22 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/50728110c481fbc8bca6d9b9a54c5733014339298666e306bacfbbd607a47e @@ -0,0 +1,72 @@ +I"ń

An HTML element can be targeted by multiple CSS rules. Let’s use a simple paragraph for example:

+ +
<p class="message" id="introduction">
+  MarkSheet is a free HTML and CSS tutorial.
+</p>
+ +

We can alter this paragraph just by using its tag name:

+ +
p{ color: blue;}
+ +

Or we can use its class name:

+ +
.message{ color: green;}
+ +

Or we can use its id:

+ +
#introduction{ color: red;}
+ +

Because the browser can only pick one color to apply on this paragraph, it will have to decide which CSS rule takes priority over other ones. This is what CSS priority (or CSS specificity is about).

+ +

In our example, the paragraph will be red because an #id selector is more specific and thus more important than other selectors.

+ +

Order of CSS rules

+ +

If similar selectors are in your CSS, the last one defined will take priority.

+ +
p{ color: green;}
+p{ color: red;}
+/* Paragraphs will be red */
+ +

The 100 measure

+ +

One quick way to figure out how “powerful” a CSS rule is, is by measuring the specificty of the selectors:

+ + + +

The selector with the highest “score” will prevail, no matter the order in which the CSS rules appear.

+ +
#introduction{ color: red;}
+.message{ color: green;}
+p{ color: blue;}
+ +
<p class="message" id="introduction">
+  MarkSheet is a free HTML and CSS tutorial.
+</p>
+ +
+

+ MarkSheet is a free HTML and CSS tutorial. +

+
+ +

The #introduction{ color: red;} rule is more specific than the others because ids must be unique throughout a webpage, and can thus only target one element.

+ +

.message{ color: green;} can target any HTML element with a class="message" attribute, and is consequently less specific. Same goes for p{ color: blue;} which can target any HTML paragraph.

+ +

How to avoid conflicts

+ +

While writing your CSS, it’s easy to write conflicting rules, where the same property is applied several times.

+ +

To avoid that:

+ + +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/f0444d05c2b19785f7d43b63a93beeea195b938c9c504e2795bcb391cb3842 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/f0444d05c2b19785f7d43b63a93beeea195b938c9c504e2795bcb391cb3842 new file mode 100644 index 0000000..929c8f8 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/ef/f0444d05c2b19785f7d43b63a93beeea195b938c9c504e2795bcb391cb3842 @@ -0,0 +1,124 @@ +I"!

An HTML document is like a big family tree, with parents, siblings, children, ancestors, and descendants.

+ +

It comes from the ability to nest HTML elements within one another.

+ +

Nesting

+ +

Let’s write a simple paragraph and enhance it by differentiating parts of the text, by inserting two inline elements:

+ +
<p>
+  Sir <strong>Alex Ferguson</strong> once said about Filipo Inzaghi:<q>"That lad must have been born offside."</q>.
+</p>
+ +

Sir Alex Ferguson once said about Filipo Inzaghi: "That lad must have been born offside.".

+ +

In this setup:

+ + + +

The fact that <strong> is displayed in bold is only the browser’s default behavior. Remember that you have to choose HTML elements according to their meaning, not how they look like.

+ +

In this case:

+ + + +

Order

+ +

How nesting works depends on the location of opening and closing tags.

+ +

Because an HTML element comprises an opening tag, a closing tag, and everything in between, a child element must be closed before closing the parent element.

+ +
<!-- This is INVALID code! :-( -->
+<p>
+  This HTML code won't work because I the "strong" tag is opened here <strong>but is only closed after the paragraph.
+</p></strong>
+ +

Because the <strong> was opened after the <p> (and is thus considered a child of <p>), the <strong> element must be closed before its parent <p>.

+ +
<!-- This is valid code. :-) -->
+<p>
+  This HTML code will work because I the "strong" tag is opened <strong>and closed</strong> properly.
+</p>
+ +

Depth

+ +

Because child elements can themselves contain other child elements, it’s possible to write a deeper hierarchy within an HTML document.

+ +

Our above paragraph could be part of a blog article:

+ +
<article>
+  <h1>Famous football quotes</h1>
+  <p>
+    Sir <strong>Alex Ferguson</strong> once said about Filipo Inzaghi:<q>"That lad must have been born offside"</q>.
+  </p>
+  <p>
+    When criticized by John Carew, <strong>Zlatan Ibrahimovic</strong> replied: <q>"What Carew does with a football, I can do with an orange"</q>.
+  </p>
+  <p>
+    <strong>George Best</strong> said <q>"I spent a lot of money on booze, birds and fast cars. The rest I just squandered."</q> when asked about his lifestyle.
+  </p>
+</article>
+ +
+
+

Famous football quotes

+

+ Sir Alex Ferguson once said about Filipo Inzaghi:"That lad must have been born offside". +

+

+ When criticized by John Carew, Zlatan Ibrahimovic replied: "What Carew does with a football, I can do with an orange". +

+

+ George Best replied "I spent a lot of money on booze, birds and fast cars. The rest I just squandered" when asked about his lifestyle. +

+
+
+ +

In this setup:

+ + + +

The family tree analogy still applies when traversing several layers of HTML nesting:

+ + + +

Block and inline nesting

+ +

Block elements can contain either block or inline elements.

+ +

However, inline elements can only contain other inline elements 1.

+ +
<!-- This is INVALID code! :-( -->
+<strong>
+  <p>You can't put a paragraph inside a "strong" tag.
+</strong>
+ +

Just remember ancestor/descendant, parent/child, and siblings. This hierarchy will be useful in CSS.

+ +
+
    +
  1. +

    the link element <a> is the only exception. ↩

    +
    2. +
+
+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f6/5f35a2aa048d9205fa90dbfc2cda106cb93b7cf99eab79a8481004e21115b9 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f6/5f35a2aa048d9205fa90dbfc2cda106cb93b7cf99eab79a8481004e21115b9 new file mode 100644 index 0000000..4966d3b --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f6/5f35a2aa048d9205fa90dbfc2cda106cb93b7cf99eab79a8481004e21115b9 @@ -0,0 +1,132 @@ +I"n

Links are essential in HTML, as the Web was initially designed to be an information network of documents linked between each other.

+ +

The “HyperText” part of HTML defines what kind of links we use: hypertext links, a.k.a hyperlinks.

+ +

In HTML, links are inline elements written with the <a> tag.

+ +

The href attribute (hypertext reference) is used to define the target of the link (where you navigate to when you click).

+ +
<p>
+  To search for something, visit <a href="http://www.google.com">Google</a>.
+</p>
+ +
+

+ To search for something, visit Google. +

+
+ +

Links are the primary interaction of a webpage: you navigate from one document to another by clicking on links.

+ +

There are 3 types of target you can define.

+ + + +

Anchor targets

+ +

Anchor target to navigate within the same page. By prepending your href with #, you can target an HTML element with a specific id attribute.

+ +

For example, <a href="#footer"> will navigate to the <div id="footer"> within the same HTML document. This type of href is often used to navigate back to the top of the page.

+ +

Relative URLs

+ +

If you want to define a link to another page of the same website, you can use relative URLs.

+ +

But relative to what? Well, relative to the current page.

+ +

Let’s use a simple example where the folder my-first-website contains 2 HTML files:

+ + + +

In home.html, you want to define a link to contact.html.

+ +

As the two files are in the same folder, you can simply write in home.html:

+ +
<p>
+  Go to the <a href="contact.html">contact page</a>.
+</p>
+ +
+

+ Go to the contact page. +

+
+ +

On an actual website, the process is similar.

+ +

Let’s say you have a website called http://ireallylovecats.com on which you have 2 webpages: one.html and two.html:

+ + + +

In index.html you could write the following link:

+ +
<p>
+  Visit the <a href="gallery.html">Gallery</a>!
+</p>
+ +

Remember: websites are hosted on computers just like the one you’re currently using. They are simply called “servers” because their sole purpose is to host websites. But they still have files and folders like “regular” computers.

+ +

Absolute URLs

+ +

If you wanted to share your cats gallery with a friend, you wouldn’t be able to just send gallery.html, as this relative URL only works for HTML documents that are on the same computer or same domain.

+ +

You need the complete URL to your HTML document: http://ireallylovecats.com/gallery.html.

+ +

This URL can be segmented in 3 parts:

+ + + +

This absolute URL is self-sufficient: no matter where you use the link form, it contains all the information required to find the correct file, on the correct domain, with the correct protocol.

+ +

You usually use absolute URLs defining a link from your website to another website.

+ +

In your http://ireallylovecats.com/gallery.html file, you could write:

+ +
<p>
+  Find more images of my cats on my <a href="https://twitter.com/ireallylovecats">Twitter account</a>!
+</p>
+ + + +

Let’s say you want to link from the first to the second. The most direct approach is to use the absolute URL. So you add <a href="http://ireallylovecats.com/gallery.html">Go the second page</a> in your index.html file.

+ +

Because the two files are in the same directory, you could use the relative URL by using <a href="first-blog-post.html">. This is useful if you decide to move your directory: your links won’t be broken because the link targets are relative to each other, as long as you move both files simultaneously and keep them in the same directory. This relative approach is particularly useful when switching domains.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f9/9621b4181eb81fa8b06313db3ad08151354314985c98eb9618e35ac20e0ded b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f9/9621b4181eb81fa8b06313db3ad08151354314985c98eb9618e35ac20e0ded new file mode 100644 index 0000000..87c82c1 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/f9/9621b4181eb81fa8b06313db3ad08151354314985c98eb9618e35ac20e0ded @@ -0,0 +1,60 @@ +I"1

If padding adds space inside an element (between its border and its content), margins adds space outside between an element and other elements.

+ +
<p>Hey, you know what sucks?</p>
+<p>vaccuums</p>
+<p>Hey, you know what sucks in a metaphorical sense?</p>
+<p>black holes</p>
+<p>Hey, you know what just isn't cool?</p>
+<p>lava?</p>
+ +
+

Hey, you know what sucks?

+

vaccuums

+

Hey, you know what sucks in a metaphorical sense?

+

black holes

+

Hey, you know what just isn't cool?

+

lava?

+
+ +
p{ margin: 40px;}
+ +
+

Hey, you know what sucks?

+

vaccuums

+

Hey, you know what sucks in a metaphorical sense?

+

black holes

+

Hey, you know what just isn't cool?

+

lava?

+
+ +

Merging vertical margins

+ +

Let’s have a title and a subtitle.

+ +
.title{ margin-bottom: 30px;}
+.subtitle{ margin-top: 15px;}
+ +
<h1 class="title">MarkSheet</h1>
+<h2 class="subtitle">A simple HTML/CSS tutorial</h2>
+ +
+

MarkSheet

+

A simple HTML/CSS tutorial

+
+ +

As the title of this section may have hinted at the answer, the margin between the two elements will be 30px, and not 45px. That is because margins that “touch” each other will merge with each other.

+ +

“That’s weird!”

+ +

You can consider an element’s margin as the minimum space it want to stay away from other elements.

+ +

It’s like the element saying: “Ok, I want the next element to be at least 30px away from me. If it’s more, why not. But at least 30px please!”

+ +

Choosing between margin and padding

+ +

Tricky question. This question comes up when no border nor background is applied. Indeed: if a border or a background is set on either element, the visual rendering will be different. But if none is present, and considering margins and paddings are transparent, the result will look the same.

+ +

Ask yourself why you’re spacing things. Is it to allow the inner content to breath more? Or is to allow the whole element to breath more? It’s padding in the first case, margin in the second.

+ +

Also, considering how margins can merge.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fa/28d20aba294ec7c5da78e8dbcf3b7746df878244fb244e2f49c078b27a01a4 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fa/28d20aba294ec7c5da78e8dbcf3b7746df878244fb244e2f49c078b27a01a4 new file mode 100644 index 0000000..d9e444e --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fa/28d20aba294ec7c5da78e8dbcf3b7746df878244fb244e2f49c078b27a01a4 @@ -0,0 +1,97 @@ +I"g

HTML significa (en Inglés) HyperText Markup Language:

+ + + +

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se resume en definir lĂ­mites, para saber dĂłnde algo comienza y donde termina.

+ +

Aquí hay un párrafo de muestra en HTML:

+ +
<p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
+ +

Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen..

+ +

Lo que ves entre signos de mayor qué y menor qué +What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

+ +

Each of them carry a specific meaning. In this case, p stands for paragraph.

+ +

They usually go in pairs:

+ + + +

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

+ +

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

+ +

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

+ +

Where to write HTML

+ +

You’ve probably come across simple text files, those that have a .txt extension.

+ +

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

+ +

Open your text editor, and copy paste the following:

+ +
<p>This is my firstwebpage!</p>
+ +

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

+ +

This is my firstwebpage!

+ +

Remember:

+ + + +

Attributes

+ +

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

+ +

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

+ +
<a href="http://www.mozilla.com/firefox">Download Firefox</a>
+ +
Download Firefox
+ +

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

+ +

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

+ +

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

+ +
<img src="#" alt="Description of the image">
+ +

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

+ +

Comments

+ +

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

+ +

A comment starts with <!-- and ends with -->.

+ +
<!-- This sentence will be ignored by the browser -->
+<p>Hello World!</p>
+ +

Hello World!

+ +

Self-enclosing elements

+ +

Some HTML elements only have an opening tag:

+ +
<br> <!-- line-break -->
+<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
+<input type="text"> <!-- text input -->
+ +

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fe/478c2e99fa078c67123ec03182bc64b796f84cc2f1bd298d66936a7e1b2762 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fe/478c2e99fa078c67123ec03182bc64b796f84cc2f1bd298d66936a7e1b2762 new file mode 100644 index 0000000..c3a51cf --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fe/478c2e99fa078c67123ec03182bc64b796f84cc2f1bd298d66936a7e1b2762 @@ -0,0 +1,250 @@ +I" -

HTML tables are meant for tabular data only, which is any type of content that can be semantically arranged in rows and columns.

+ +

It’s like having a spreadsheet in Excel.

+ +

Syntax

+ +

Building a table in HTML requires a specific structure:

+ + + +

This hierarchy is required, and all 3 elements are necessary to build a table.

+ +

When writing the code, you need to define your table cells from left to right, and then from to bottom.

+ +
<table>
+  <tr>
+    <td>John Lennon</td>
+    <td>Rhythm Guitar</td>
+  </tr>
+  <tr>
+    <td>Paul McCartney</td>
+    <td>Bass</td>
+  </tr>
+  <tr>
+    <td>George Harrison</td>
+    <td>Lead Guitar</td>
+  </tr>
+  <tr>
+    <td>Ringo Starr</td>
+    <td>Drums</td>
+  </tr>
+</table>
+ +
+ + + + + + + + + + + + + + + + + +
John LennonRhythm Guitar
Paul McCartneyBass
George HarrisonLead Guitar
Ringo StarrDrums
+
+ +

As you can see, a table in HTML is relatively verbose: there are a lot of tags for just a few rows of data.

+ +

thead, tfoot and tbody

+ +

Just like a webpage can have a header and a footer, a table can have a head, a body, and a foot. As anything in HTML, this is purely for semantic reasons: providing more structure to your table.

+ +

<thead>, <tfoot> and <tbody> are collections of rows. As such, they are direct children of <table> and direct parents of one or more <tr>. In short, they add one level of hierarchy.

+ +

<thead> and <tfoot> are used as a summary of the columns.

+ +

Let’s enhance the previous table with a head and a body:

+ +
<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Instrument</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Lennon</td>
+      <td>Rhythm Guitar</td>
+    </tr>
+    <tr>
+      <td>Paul McCartney</td>
+      <td>Bass</td>
+    </tr>
+    <tr>
+      <td>George Harrison</td>
+      <td>Lead Guitar</td>
+    </tr>
+    <tr>
+      <td>Ringo Starr</td>
+      <td>Drums</td>
+    </tr>
+  </tbody>
+</table>
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameInstrument
John LennonRhythm Guitar
Paul McCartneyBass
George HarrisonLead Guitar
Ringo StarrDrums
+
+ +

tfoot particularity

+ +

Let’s also add a foot to the table:

+ +
<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Instrument</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th>Name</th>
+      <th>Instrument</th>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>John Lennon</td>
+      <td>Rhythm Guitar</td>
+    </tr>
+    <tr>
+      <td>Paul McCartney</td>
+      <td>Bass</td>
+    </tr>
+    <tr>
+      <td>George Harrison</td>
+      <td>Lead Guitar</td>
+    </tr>
+    <tr>
+      <td>Ringo Starr</td>
+      <td>Drums</td>
+    </tr>
+  </tbody>
+</table>
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameInstrument
NameInstrument
John LennonRhythm Guitar
Paul McCartneyBass
George HarrisonLead Guitar
Ringo StarrDrums
+
+ +

Although we’ve added a <tfoot> before the <tbody>, it still appears at the end.

+ +

It comes from the fact that the <tbody> can contain a lot of rows. But the browser wants to render the foot before receiving all of the (potentially numerous) rows of data. That’s why the <tfoot> is first in the code.

+ +

colspan and rowspan

+ +

You can merge columns or rows by using the rowspan and colspan respectively.

+ +

Keep in mind that in order to merge columns you need to use the rowspan attribute, as it allows to span a column across several rows.

+ +
<table>
+  <tr>
+    <th colspan="2">Michael Jackson Singles</th>
+  </tr>
+  <tr>
+    <th rowspan="3">1979</th>
+    <td>Don't Stop 'Til You Get Enough</td>
+  </tr>
+  <tr>
+    <td>Rock with You</td>
+  </tr>
+  <tr>
+    <td>Off the Wall</td>
+  </tr>
+</table>
+ +
+ + + + + + + + + + + + + + +
Michael Jackson Singles
1979Don't Stop 'Til You Get Enough
Rock with You
Off the Wall
+
+ +

The “Michael Jackson Singles” cell spans across 2 columns, so the following row includes two cells.

+ +

Because the cell “1979” spans across 3 rows, the 2 following rows only include a one cell, to allow space for the “1979” column.

+ +

It can be hard to keep track of how many cells are either missing or superfluous. One easy way to build a complete 2 by 4 table first, and then remove cells while adding colspan and rowspan attributes.
+In our case, we are supposed to have 8 cells. We only write 5 cells, but the colspan="2" and rowspan="3" add 3 additional cells.

+ +:ET \ No newline at end of file diff --git a/.ruby-version b/.ruby-version new file mode 100644 index 0000000..24ba9a3 --- /dev/null +++ b/.ruby-version @@ -0,0 +1 @@ +2.7.0 diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..c1ec69c --- /dev/null +++ b/Gemfile @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +source "https://rubygems.org" + +git_source(:github) {|repo_name| "https://github.com/#{repo_name}" } + +# gem "rails" + +gem "jekyll", "~> 4.0" diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..6cbeacc --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,67 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.7.0) + public_suffix (>= 2.0.2, < 5.0) + colorator (1.1.0) + concurrent-ruby (1.1.6) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.7) + ffi (1.12.2) + forwardable-extended (2.6.0) + http_parser.rb (0.6.0) + i18n (1.8.2) + concurrent-ruby (~> 1.0) + jekyll (4.0.0) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (>= 0.9.5, < 2) + jekyll-sass-converter (~> 2.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 3.0) + safe_yaml (~> 1.0) + terminal-table (~> 1.8) + jekyll-sass-converter (2.1.0) + sassc (> 2.0.1, < 3.0) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.2.1) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.3) + listen (3.2.1) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.3.6) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (4.0.4) + rb-fsevent (0.10.4) + rb-inotify (0.10.1) + ffi (~> 1.0) + rexml (3.2.4) + rouge (3.18.0) + safe_yaml (1.0.5) + sassc (2.3.0) + ffi (~> 1.9) + terminal-table (1.8.0) + unicode-display_width (~> 1.1, >= 1.1.1) + unicode-display_width (1.7.0) + +PLATFORMS + ruby + +DEPENDENCIES + jekyll (~> 4.0) + +BUNDLED WITH + 2.1.4 diff --git a/_includes/footer.html b/_includes/footer.html index 18213fa..70ca6ce 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -4,8 +4,9 @@

- MarkSheet is free and always will be. - If this website has been valuable to you, please consider making a donation. + MarkSheet es gratuito y siempre lo será. + Si este sitio web ha sido de valor para tí, por favor considera hacer una donación. +

@@ -14,10 +15,11 @@ {% include share.html %}

- MarkSheet by Jeremy Thomas is licensed under a Creative Commons BY-NC-SA 4.0 International License. + MarkSheet por Jeremy Thomas tiene una licencia de Creative Commons BY-NC-SA 4.0 International License.

+

- The underlying source code used to format and display this website is licensed under the MIT license. + El código fuente utilizado para dar formato y mostrar este sitio web está bajo la licencia MIT license.

Powered by diff --git a/_includes/head.html b/_includes/head.html index 22dc2f3..b168b80 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,7 +1,7 @@ - {{ page.title | strip_html }} - Free tutorial to learn HTML and CSS + {{ page.title | strip_html }} - Tutorial Gratuito para aprender HTML y CSS diff --git a/_includes/table-of-contents.html b/_includes/table-of-contents.html index 228d590..f1f9519 100644 --- a/_includes/table-of-contents.html +++ b/_includes/table-of-contents.html @@ -7,10 +7,10 @@

Web

- 3 lessons + 3 lecciones - For absolute beginners + Para completamente principiantes
    diff --git a/_layouts/default.html b/_layouts/default.html index cc454e5..9528f19 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,7 +16,7 @@
    - Close + Cerrar
    {% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 3757db2..ed3d396 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -41,14 +41,14 @@

    {{ page.subtitle }}

    {% if page.next %} - Next article + ArtĂ­culo sigiuente {% endif %} {% if page.previous %} - Previous article + ArtĂ­culo anterior {% endif %} @@ -64,14 +64,14 @@

    {{ page.subtitle }}