HTMLcodes.knit

Dee Chiluiza, PhD
Northeastern University
Introduction to data analysis using R, R Studio and R Markdown
Short manual series: HTML Codes

Introduction. The traditional was to work HTML documents is by using HTML codes, however, currently, CSS codes are preferred. This document will guide through the very basic HTML codes you need to start your first R Markdown HTML report. As any other programming language, HTML and CSS can become as complicated as you want them to be, but as part of your learning curve, first learn some basics and later on, it will be easier to add more and more complicated codes.

The main frame of your document

As indicated on the R Markdown file, my recommendation for your first Rmd file is to start fresh with a document containing only the YALM header, nothing else, and below the header, start by adding the following codes:

Notice that there are basically three sections:
1. <HTML> to </HTML>
2. <HEAD> to </HEAD>
3. <BODY> to </BODY>

Sections 2 and 3 are embedded inside the HTML section. The HEAD section has a lot of functions that can add format to your presentation, but for now we will not worry about it, we will work only with the BODY section. Therefore, start by entering the codes as follows:

</BODY>
</HTML>

This will allow you to remember that the HEAD section is empty (you can fill it later on) and you can also see that the space inside the BODY section is available.

Codes to organize the main body of your document

The main body of your report is inserted in the BODY section, including the introduction, data analysis sections, observations, conclusions, bibliography, and your R chunks.

Important. On HTML language, when you open a code, you must close it once it is no longer needed, otherwise all your document, from the code and forward, will be affected. To close a code, use the / line inside the code; observe the examples below. The codes that do not need to be closed are <P>, <BR>, and <HR>.

The codes that you need to prepare your first document are:

- Code to make your text bold:
- Code to make your text cursive:
- Code to underline your text:
- Code to change size and color of your text:
- Code to create a horizontal line:
- Code to center your text, fig, tables.
- Code to enter a new line
- Code to enter a double line
- Code to highlight text

Let’s practice.

Original text: I want to bold the white fox’s house.
Enter codes: I want to bold the white fox’s <B>house</B>.
Result: I want to bold the white fox’s house.

Original text: I want cursive and underlined text.
Enter codes: I want <I>cursive</I> and <U>underlined</U> text .
Result: I want cursive and underlined text.

Original text: I want this text blue.
Enter codes: I want this text <FONT COLOR=“blue”>blue</FONT>.
Result: I want this text blue.

Original text: I want this text red and bold.
Enter codes: I want this text <B><FONT COLOR=“red”>red and bold</FONT></B>.
Result: I want this text red and bold.

Original text: This text small blue, this text big green.
Enter codes: This text <FONT SIZE = 1 COLOR=“blue”> small blue</FONT>, this text <FONT SIZE = 4 COLOR=“green”>big green</FONT>.
Result: This text small blue, this text big green.

Original text: I want to highlight the three pig’s homes.
Enter codes: I want to highlight the three pig’s <MARK>homes</MARK>.
Result: I want to highlight the three pig’s homes.

To create lines, the codes look like this:
<BR>First line of my text, single space.
<BR>Second line of my text, single space.
<P>Third line of my text, double space.
<BR>Fourth line of my text, single space.
The result is the following:
First line of my text, single space.
Second line of my text, single space.

Third line of my text, double space.
Fourth line of my text, single space.

To center a text:
I want to center this portion of text.
<CENTER>I want to center this portion of text.</CENTER>

I want to center this portion of text.

Codes to create tables

Tables are used in HTML language to organize information. Do not confuse with the tables you prepare using R language, those tables are related to your data. With HTML, you can prepare informative tables such as the following:

The table above contains one row and two cells in the row.

To create a column using HTML language, the sequence is the following:
Indicate the beginning of the table, then indicate the row, then each cell. For example:

For 1 x 2 table, the sequence would be:

Table
row - cell - cell

For 2 x 2 table, the sequence would be:

Table
row - cell - cell
row - cell - cell

Remember than in HTML language, every code must be closed:

Table
row - cell/cell - cell/cell - /row
row - cell/cell - cell/cell - /row
/Table

Now that you understand the logic of the language, you are ready for the actual codes:

For table, the codes are: <TABLE> and </TABLE>
For rows, the codes are: <TR> and </TR>
For cells, the codes are: <TD> and </TD>

The content of your table goes inside the cells, therefore, it must be entered in between the <TD></TD> codes.

Let’s practice.
Create the following table:

France	Ecuador
Colombia	Canada

Enter the following codes on your Rmd file:

<TABLE border=“1”>
<TR> <TD>France</TD> <TD>Ecuador</TD> </TR>
<TR> <TD>Colombia</TD> <TD>Canada</TD> </TR>
</TABLE>

Notice that I enter border=“1” on the opening table code.
The codes below will help you change the size of your tables and format rows and cells.

TABLE

< table style=“width:100%” >
< table border=“2” >
< table style=“border:1px solid black;” >
< >

To add a caption to a table

<table>
<caption> Caption or title of the table </caption>
<tr><td></td><td></td><tr>
</table>

Some important notes

If the table is set to 100%, the sum of all columns should add to 100 too.
e.g., table 80%, contains two columns, 50% and 30%
Columns are set using th or td inside tr.

Disclaimer: This short series manual project is a work in progress. Until otherwise clearly stated, this material is considered to be draft version.

Dee Chiluiza, PhD
07 August, 2021
Boston, Massachusetts, USA
Bruno Dog