4 html

.gitignore

@@ -2,6 +2,7 @@
 _config.yml
 .sass-cache
 _site
+.jekyll-cache
 
 # Editor settings
 .vscode

.ruby-version

@@ -0,0 +1 @@
+2.7.0

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"

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

_includes/footer.html

@@ -4,8 +4,9 @@
       <input type="hidden" name="cmd" value="_s-xclick">
       <input type="hidden" name="hosted_button_id" value="GSADMWUPJMCUJ">
       <p>
-        <strong>MarkSheet</strong> is <strong>free</strong> and <strong>always</strong> will be.
-        <em>If this website has been valuable to you, please consider making a donation.</em>
+        <strong>MarkSheet</strong> es <strong>gratuito</strong> y <strong>siempre</strong> lo será.
+        <em>Si este sitio web ha sido de valor para tí, por favor considera hacer una donación.</em>
+
       </p>
       <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
       <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
@@ -14,10 +15,11 @@
     {% include share.html %}
 
     <p>
-      <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">MarkSheet</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com/" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-SA 4.0 International License</a>.
+      <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">MarkSheet</strong> por <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com/" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a> tiene una licencia de <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-SA 4.0 International License</a>.
     </p>
+
     <p>
-      The underlying source code used to format and display this website is licensed under the <a href="http://opensource.org/licenses/mit-license.php">MIT license</a>.
+        El código fuente utilizado para dar formato y mostrar este sitio web está bajo la licencia  <a href="http://opensource.org/licenses/mit-license.php">MIT license</a>.
     </p>
     <p>
       Powered by

_includes/head.html

@@ -1,7 +1,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>{{ page.title | strip_html }} - Free tutorial to learn HTML and CSS</title>
+  <title>{{ page.title | strip_html }} - Tutorial Gratuito para aprender HTML y CSS</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
   <meta property="og:type" content="website">
   <meta property="og:url" content="http://marksheet.io">

_includes/table-of-contents.html

@@ -7,10 +7,10 @@ <h3>
           <a href="/introduction.html">Web</a>
         </h3>
         <small>
-          <span>3</span> lessons
+          <span>3</span> lecciones
         </small>
         <em>
-          For absolute <strong>beginners</strong>
+          Para completamente <strong>principiantes</strong>
         </em>
       </div>
       <ol class="toc-content">

_layouts/default.html

@@ -16,7 +16,7 @@
       </div>
       <div id="close" class="page-close">
         <a class="page-close-button">
-          Close
+          Cerrar
         </a>
       </div>
     {% endif %}

_layouts/post.html

@@ -41,14 +41,14 @@ <h2>{{ page.subtitle }}</h2>
         {% if page.next %}
           <a class="breadcrumb-next" href="{{ page.next.url }}">
             <i class="fa fa-angle-right"></i>
-            <span>Next article</span>
+            <span>Artículo sigiuente</span>
           </a>
         {% endif %}
 
         {% if page.previous %}
           <a class="breadcrumb-previous" href="{{ page.previous.url }}">
             <i class="fa fa-angle-left"></i>
-            <span>Previous article</span>
+            <span>Artículo anterior</span>
           </a>
         {% endif %}
       </header>
@@ -64,14 +64,14 @@ <h2>{{ page.subtitle }}</h2>
       <nav class="pagination">
         {% if page.previous %}
           <a class="pagination-previous" href="{{ page.previous.url }}">
-            <em>&larr; Previous</em>
+            <em>&larr; Anterior</em>
             <strong>{{ page.previous.title }}</strong>
           </a>
         {% endif %}
 
         {% if page.next %}
           <a class="pagination-next" href="{{ page.next.url }}">
-            <em>Next &rarr;</em>
+            <em>Siguiente &rarr;</em>
             <strong>{{ page.next.title }}</strong>
           </a>
         {% endif %}
@@ -82,5 +82,5 @@ <h2>{{ page.subtitle }}</h2>
 
 <a id="top" class="elevator">
   <i class="fa fa-angle-up"></i>
-  <span>Back to top</span>
+  <span>Regresar al inicio</span>
 </a>

_posts/2015-02-01-html-basics.md

@@ -1,12 +1,12 @@
 ---
 layout: chapter
-title: "HTML <strong>Basics</strong>"
-subtitle: "HTML is like <strong>Word</strong> but for the <strong>Web</strong>"
+title: "HTML: Las <strong>Bases</strong>"
+subtitle: "HTML es como <strong>Word</strong> pero para la  <strong>Web</strong>"
 section: html
 ---
 
-You're certainly already acquainted with document editors, like **Microsoft <strong>Word</strong>**, 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 <strong>Word</strong>**, 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**: eres tú quien provee de  _significado_ a tu texto.
 
-The same way you use ♫ **notes** ♬ to write **music**, you use **HTML** to write **webpages**.
+De la misma manera en que usas ♫ **notas** ♫ para escribir **música**, utilizas **HTML** para escribir **páginas web**.

_posts/2015-02-02-html-syntax.md

@@ -1,27 +1,28 @@
 ---
 layout: post
-title: "HTML <strong>Syntax</strong>"
-subtitle: "As any language, HTML has <strong>rules</strong>"
+title: "HTML: La <strong>Sintaxis</strong>"
+subtitle: "Como cualquier lenguaje, HTML tiene <strong>reglas</strong>"
 section: html
 ---
 
-**HTML** stands for **H**yper**T**ext **M**arkup **L**anguage:
+**HTML** significa (en Inglés) **H**yper**T**ext **M**arkup **L**anguage:
 
-* **HyperText** means that it uses the HTTP part of the Internet
-* **Markup** means the code you write is annotated with keywords
-* **Language** means it can be read by both a human and a computer
+* **HyperText** significa que usa la parte HTTP de Internet
+* **Markup** significa que el código que escribes tiene palabras clave
+* **Language** significa que puede ser leído por ambos: computadoras y seres humanos
 
-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_.
+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:
+Aquí hay un párrafo de muestra en HTML:
 
 {% highlight html %}
-<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
+<p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen.
+</p>
 {% endhighlight %}
 
-<div class="result"><p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p></div>
+<div class="result"><p>Si Tetris me ha enseñado algo, es que los errores se acumulan y los logros desaparecen..</p></div>
 
-What you see in **angle brackets** `<`{:.language-html} and `>`{:.language-html} are HTML **tags**. They define where something _starts_ and where it _ends_.
+Lo que ves entre signos de  **mayor qué** y **menor qué** `<`{:.language-html} y `>`{:.language-html} son **etiquetas** de HTML. Éstas definen donde algo _comienza_ y donde _termina_.
 
 Each of them carry a specific **meaning**. In this case, `p`{:.language-html} stands for **paragraph**.
 
@@ -61,7 +62,7 @@ Remember:
 
 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 **a**nchor tag): 
+For example, the `href` attribute is used to define the target of a **link** (which uses an **a**nchor tag):
 
 {% highlight html %}
 <a href="http://www.mozilla.com/firefox">Download Firefox</a>

index.html

@@ -23,7 +23,7 @@ <h2>a free HTML and CSS tutorial</h2>
     {% include carbon.html %}
 
     <a class="start" href="/introduction.html">
-      Start reading
+        Comienza a leer
     </a>
   </div>
 </section>