Learn Ruby from Scratch/

...

/

A Brief Detour: HTML

A Brief Detour: HTML

Learn about HTML, the language understood by all browsers!

We'll cover the following...

HTML

HTML (HyperText Markup Language) is the language used by browsers to display content. So many of the nice-looking websites we run into look that way because HTML tells them exactly how to format the displayed text.

An HTML element

The big idea is that HTML uses these elements to mark up parts of the text. These elements then say how to modify that marked text or how to use it for other purposes.

Each element has an opening angular bracket (<), followed by the name of that tag, followed by a closing angular bracket (>), like so: <html>, <head>, <body>, and <title>.

Let’s see how these elements are applied to other texts!

Tags

An HTML element is applied to a text by enclosing it between an opening and closing tag, like so:

<b> Ruby </b>

The above is an instruction to display “Ruby” in bold. Here, <b> is the opening tag, and </b> is the closing tag.

In general, the closing tag is exactly like the opening tag but with an extra slash before the tag name.

The </html>, </head>, </body>, and </title> elements are examples of closing tags.

Some basic elements

Here are some basic elements that are foundational to static webpage development:

  • The entire document must be enclosed between the <html> </html> tags.

  • Everything visible to the user is enclosed within the <body> </body> tags.

Notice how the following html file has <head> and <body> elements nested within the <hmtl> element.

    html
    output
    Notice how the text enclosed within the <body> </body> tags is displayed.
    

    The <head> element is used to include meta information regarding the formatting of the entire document.
    

    A basic example
    

    In the example below, we create a table using the <table> element.
    

      

    • Each row of this table is created by nesting a <tr> element inside the <table> </table> tags.
      • 

    • Similarly, each cell of a row is created by nesting a <td> element inside <tr> <\tr> tags.
      • 

    

    <html>
  <body>
    <table>
    <tr>
      <td>HTML</td>
      <td>is</td>
      <td>easy</td>
      <td>peasy!</td>
     </tr>

    <tr>
      <td>Ruby</td>
      <td>is</td>
      <td>super</td>
      <td>duper!</td>
    </tr>
    </table>
  </body>
</html>

    

    The HTML code above creates a table with two rows, and each row has four cells. We’ll display the browser output from this code shortly. First, we need to create borders for the table and its cells.
    

    To do that, we need to apply some styles. The information in the <style> element does just that. See how the <style> element is nested inside the <head> element.
    

      html
      output
      Copying an HTML code like the one shown above into a new text file on the computer and saving the file with an .html extension is all it takes to create a basic web page. You can now open it up in your browser.