Computation for Linguists

HTML and Javascript, Day 1

Dr. Andrew M. Byrd

2025-09-10

Review

  • What did you learn last time?

Our Goal

For the next two weeks:

  • Learn the basics of HTML and CSS

  • Do a teeny bit of programming with JavaScript

  • Create a personal homepage at GitHub Pages, that is a simplified version of this

Our Goal

Create a webpage that showcases you, which you can use to promote yourself for internships and future jobs

How LaTeX Works

  • Let’s review how LaTeX works.

LaTeX → HTML

Moving from LaTeX to HTML

By and large, things in HTML function much more so like LaTeX environments. In HTML, these are called tags. Both environments & tags:

  • Have opening and closing markers
  • Wrap content
  • Describe what that content is (a paragraph, a list, a section) rather than how it looks.
    • In HTML, indicating how something looks is done using style sheets (CSS), which we’ll talk about in a few days

LaTeX vs. HTML Terminology

LaTeX HTML
Preamble (\documentclass) Doctype + Head (<head>)
Document body (\begin{document}) Body (<body>)
Command (\emph{}) Inline tag (<em>)
Environment (\begin{itemize}) Element (<ul>...</ul>)
Comment: % ... Comment: <!-- ... -->
  • To “comment” (<!--# ... -->) within RStudio, press “Ctrl + Shift + C” or “⌘ + Shift + C”

Tags vs. Elements?

  • Tags:
    • These are things marked in < >
    • Usually comes in pairs: <p> ... </p>, <emph> ... </emph>, etc.
    • Can be self-contained: <img src="cat.jpg" alt="Cat">
  • Elements:
    • The tags plus everything within.
      • <p> Hello World! </p>

Let’s create an HTML file

  • Find the folder in RStudio that you’d like to create an html file.
  • Click on “New File”, then “R HTML”
  • Delete the “r” in the file extension (.rhtml).
  • Create a file called “test.html”.

Preamble (LaTeX)

\documentclass{article}
\usepackage{graphicx}
\title{My Page}
\date{2025-09-10}
\author{Andrew M. Byrd}

HTML (doctype + head)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
    <meta name="author" content="Andrew M. Byrd">
    <meta name="date" content="2025-09-10">
    <meta name="description" content="Personal homepage for Andrew Byrd">
  </head>
  • Copy and paste this code into your “test.html” file.
    • How similar is the HTML head to the LaTeX preamble?
  • Click on “test.html” in your RStudio folder, select “View in Web Browser”.
    • What happens?

Document Body (LaTeX)

\begin{document}
\maketitle
Hello world!
\end{document}

Document Body (HTML)

<body>
  <h1>Hello World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>
  • Copy & paste this code into test.html.

Headings & Paragraphs

  • In LaTeX (three deep):
\section{About Me}
I study linguistics.

\subsection{Interests}
Historical linguistics, NLP.
  • In HTML (six deep: <h1>-<h6>):
<h1>About Me</h1>
<p>I study linguistics.</p>

<h2>Interests</h2>
<p>Historical linguistics is awesome.</p>
<p>NLP is cool, too.</p>
  • Copy and paste the HTML code into your test.html file. Try running the code without <p>...</p>. What does this tag do?

Paragraphs

  • Browsers will automatically treat plain text as if it were wrapped in a paragraph
  • But…
    • Screen readers won’t know where your paragraphs begin and end.
    • Also, once we load in style sheets (CSS), we may have specific instructions for paragraphs, like setting margins

Activity: Build Your Own Website!

Activity, Step One: Analyze

  • Download this html file and analyze its code.
  • Identify how to:
    • emphasize a word
    • make a word strong
    • add an html link anchor to a word or string of words
    • add an image
    • add an unordered list

Activity, Step Two: Build

  • Create firstname_lastname.html. Add to it:
    1. A head and body.
    2. Two <p> elements talking about yourself (or whatever you want). Use <h1> and <h2>.
    3. Emphasize one word and make another word strong.
    4. Add a link that points to your GitHub profile (mine is https://github.com/Winjapati).
    5. Add an image of yourself (or whatever you want).
    6. Add a simple unordered list (<ul>).
    7. Save and view the file by, “Open with Browser.”
    8. Sync with your GitHub.