Príkazový riadok a HTMLThe command line and HTML

Today you learn three things: moving around the command line, working in the vi editor and making your first page that runs on sigma. New terms are in the table of terms.

Why the command line

On your own computer you click icons and windows with the mouse. A server does not work like that: it has no monitor and no mouse, and you connect to it remotely. When you connect to sigma, all you see is a line where you type commands. This is called the command line or the terminal.

You also have a terminal in Kubeflow (in VS Code through the ☰ → Terminal → New Terminal menu). Kubeflow and sigma both run Linux, so the commands you learn today work the same on both.

The prompt: how you know where you are

When the terminal waits for your command, it prints a prompt at the start of the line. It tells you who you are, which computer you are on and which folder you are in:

jovyan@vscode-0:~$      ← Kubeflow: user jovyan, computer vscode-0, folder ~
jn123ab@sigma:~$        ← sigma: your TUKE login, computer sigma, folder ~

The ~ sign means your home folder. You type the command after the $ sign and confirm it with Enter.

Basic commands

These commands are enough for the whole semester:

Paths to files

A path says where a file or folder is. Folders in it are separated by a slash /.

How to save work and nerves

• The Tab key completes file and folder names. Type the first letters and press Tab. If nothing is completed, there is no such file in the folder.
• The up arrow brings back your previous commands, so you do not have to type them again.
• If a command gets stuck and the prompt does not come back, press Ctrl + C.
• rm deletes permanently; there is no recycle bin in the terminal. Before deleting, check where you are with pwd.
• Try new commands in the ~/pieskovisko folder. Your assignments are in ~/web and you do not want to break them.

The vi editor

Vi is a text editor that runs directly in the terminal. You will find it on every Linux server, even where there is no other editor. Sometimes you end up in it by accident, for example when you run git commit without -m on a server and Git opens an editor for the commit message. That is why you need to know at least how to open it, type something, save and close it.

A bit of history

One of the most-read questions of all time on Stack Overflow is “How do I exit the Vim editor?”. Millions of programmers have read it, so if it happens to you, you are not alone. Bill Joy wrote vi in 1976 for the ADM-3A terminal. That terminal had arrows printed on the keys H J K L, which is why you can still move with them in vi. The Esc key sat where Tab is today, so it was easy to reach. And the Home key carried a tilde ~. That is why ~ means the home folder today.

How to start vi

Type vi followed by a file name and press Enter:

vi o-mne.txt

If the file exists, it opens. If it does not, vi creates it the first time you save. Empty lines are marked with a tilde ~ on the left edge.

Why nothing is typed when you press keys

Vi has modes. After it starts it is in normal mode, and there the keys do not type text, they run commands. That is why vi seems not to react or to do strange things. You can type only in insert mode.

Steps: open, type, save and close

1. Type vi o-mne.txt and press Enter. The file opens in normal mode.
2. Press i. -- INSERT -- appears at the bottom and you can type.
3. Type your text. Move between lines with the arrow keys.
4. Press Esc. -- INSERT -- disappears and you are back in normal mode.
5. Type :wq and press Enter. Vi saves the file, closes and you are back in the terminal.

How to close vi

You type all of these in normal mode (if you are not sure, press Esc first) and confirm them with Enter:

If you type :q and vi answers E37: No write since last change, the file has unsaved changes. Decide: :wq saves them, :q! throws them away.

When you are lost and do not know what is going on: press Esc twice, type :q! and press Enter. Vi closes without saving and you are back in the terminal. This always works.

Editing text in normal mode

Vi in Kubeflow

In Kubeflow the vi command starts Vim, an improved vi. Everything described above works in it. If you want a simpler editor without modes, use nano: you type right after it starts, and the controls are listed at the bottom (Ctrl + O saves, Ctrl + X closes). Do not use Ctrl + W in the terminal: the terminal runs in the browser, and the browser would close the whole Kubeflow tab.

Kubeflow and sigma: two computers

You work on two computers at once, and it helps to know what happens where:

Kubeflow  ~/web/ti/cv01/  ── save (SFTP) ──>  sigma  ~/public_html/ti/cv01/
    │                                              │
    └── commit + push ──> GitHub                   └──> https://sigma.tuke.sk/student/name.surname/ti/cv01/

• You write code in Kubeflow. Every file you save in VS Code is uploaded to sigma automatically.
• On sigma the web server shows only what is in the public_html folder.
• You submit a task by committing and pushing your changes to GitHub. Nothing is committed to sigma; files are only uploaded there.
• You accept the teacher’s assignment in Classroom 50. GitHub creates your own repository for it, and you clone it into ~/web/ti/cv01. The steps are in guide 04 Submitting.

The skeleton of an HTML page

HTML is plain text in which tags tell the browser what is a heading, what is a paragraph, what is an image and so on. Every HTML page has the same skeleton:

• <!doctype html> says this is HTML5.
• <html lang="sk"> wraps the whole page and sets its language.
• <head> holds information about the page that is not displayed: the encoding <meta charset="utf-8"> (so that special characters display correctly), the mobile setting <meta name="viewport" ...>, the browser tab title <title> and the link to the style file <link rel="stylesheet" href="style.css">.
• <body> holds everything you see on the page.

In VS Code you do not have to type the skeleton by hand: type an exclamation mark ! into an empty .html file and press Tab.

The most common elements

CSS in a nutshell

HTML says what is on the page, CSS says how it looks. We write styles into a separate file style.css. Every rule looks like selector { property: value; }. The selector says which elements the rule applies to:

h2 { color: #a3274f; }            /* all h2 headings turn burgundy */
table, th, td { border: 1px solid #999; }

Example 1: first steps in the terminal

cd ~
mkdir pieskovisko
cd pieskovisko
pwd
mkdir -p projekt/css
touch projekt/index.html
ls -la projekt
cp projekt/index.html kopia.html
mv kopia.html zaloha.html
rm zaloha.html

Example 2: vi in short

vi o-mne.txt        opens (or creates) the file
i                   insert mode, you type
Esc                 back to normal mode
:wq                 save and quit
cat o-mne.txt       check what is in the file

Example 3: on sigma

ssh jn123ab@sigma.tuke.sk
pwd
ls -la
ls public_html/ti/cv01
exit

If ls prints “No such file or directory”, the folder does not exist yet:

mkdir -p public_html/ti/cv01
chmod 755 public_html

chmod 755 lets the web server read the folder. Without it the browser shows 403 Forbidden.

The path of a file on sigma and its address on the web:

/home/jn123ab/
└── public_html/            ->  https://sigma.tuke.sk/student/name.surname/
    └── ti/
        └── cv01/
            └── index.html  ->  https://sigma.tuke.sk/student/name.surname/ti/cv01/

Example 4: an AI prompt for your first page

You do not write the page by hand, you give it to an AI. A good prompt says exactly what you want to get:

Create a simple web page in HTML5 (set the lang attribute to the page language,
UTF-8 encoding) and a separate style.css file. No JavaScript and no frameworks
(no Bootstrap).

It is a single page (index.html) and it contains:
- a header with an h1 heading and a menu linking to sections on the same page
  using anchors (href="#..."),
- sections with h2 headings, at least two paragraphs of text, an emphasised word
  (strong, em),
- an unordered and an ordered list,
- a table with a header (thead) and at least 3 rows, with visible cell borders,
- an image from the file obrazok.jpg in the same folder, with an alt attribute,
- a link to an external website that opens in a new tab,
- a footer with my name and the year.

Keep the CSS simple and readable: font, limited content width and centring,
heading colour, menu items side by side, table borders, the image must not
overflow the page.

Add short comments in English to both the HTML and the CSS explaining what every
element is for, so that I understand the code.

Page topic: [FILL IN]

Why the prompt is written this way:

• language and UTF-8: special characters display correctly,
• no JavaScript and no frameworks: you get only HTML and CSS, which you understand today,
• the list of elements: the AI leaves nothing out and adds nothing extra,
• comments in the code: you can read the code and explain it, which is what you do at the defence,
• the project topic: everyone gets a different page.

When the result is not right, do not rewrite the whole prompt. Tell the AI exactly what to fix, for example: “The table cells have no borders, fix the CSS.”

You also get the tasks as the assignment cv01 in Classroom 50, in the file README.md in your repository.

Link to the assignment cv01: accept the assignment
(for B. Stehlíková’s groups; other groups get the link from their lab teacher)

code-server --install-extension Natizyskunk.sftp