CS50. Семінар 7.

Вступ

У семінарі №7 ми дізнаємось, як змінювати права на доступ до файлів у системі Linux, повторимо основи функціонування протоколів TCP та IP і створимо просту веб-сторінку із використанням HTML та CSS.

Дозволи у Linux

У системі Linux є потужна підтримка прав доступу до файлів. Система дозволяє обмежити можливості читання, запису або виконання файлів, використовуючи систему дозволів (permissions).

Види дозволів

Як уже було зазачено, на кожен файл може бути наданий дозвіл на читання (r), запис (w) або виконання (x) файлу. Дозволи розділяють на три групи: для поточного користувача (або власника файлу) (u), для групи користувачів (g) та для всіх інших користувачів (o). Схематично дозволи позначають як на малюнку нижче:

Є ще один варіант позначення дозволів - за допомогою трьох чисел від 0 до 7, де перше число - дозвіл для користувача, друге - дозвіл для групи, третє - дозвіл для всіх. Числа від 0 до 7 означають наступне:

0 - немає доступу до файлу;

1 - дозвіл на виконання (--x);

2 - дозвіл на запис (-w-);

3 - дозвіл на виконання і запис (-wx);

4 - дозвіл на читання (r--);

5 - дозвіл на читання та виконання (r-x);

6 - дозвіл на запис та читання (rw-);

7 - повний доступ до файлу (rwx);

Таким чином, повний доступ до файлу для всіх користувачів виглядатиме так: 777.

Перегляд прав на доступ до файлів

Команда

ls -l

виводить список файлів у директорії та вказує для кожного файла права доступу. Приклад роботи команди:

Зміна прав доступу на файл. Команда chmod

За допомогою команди chmod можна змінювати права доступу на файл. Є два варіанти використання команди chmod - із числовими кодами дозволів або із буквеними означеннями груп та дозволів для них.

chmod код файл

Встановити права доступу, використовуючи трьохцифровий код. Наприклад, виклик

chmod 777 file

призведе до встановлення всіх дозволів на файл із іменем file для всіх користувачів.

chmod [група][оператор][права] файл

група: значення u, g, o або a (всі користувачі)
оператор: + (додати права), - (забрати права) або = (встановити права)
права: літери r, w, x та їх комбінації.

Щоб встановити такі самі права доступу, як у попередньому прикладі, необхідно виконати команду:

chmod a=rwx file

chmod 555 або chmod a+rx

Дає всім права на читання та запуск.

chmod 711 directory

Типові права доступу для директорій.

chmod 644 file.txt

Рекомендовано використовувати для не-PHP файлів.

chmod 600 file.php

Рекомендований режим для файлів PHP.

Протокол TCP/IP

TCP/IP - це набір стандартів, правил, що визначають, як дані передаються по мережі. Важливою частиною стандарту є адреси та порти.

IP-адреса

Кожен комп'ютер в мережі Інтернет, або в локальній мережі, має власну унікальну адресу - чотири числа, від 0 до 255, розділених точкою (наприклад, 192.168.0.1). Ця адреса визначає пристрій адресата даних.

Порт

Порт - це ідентифікатор, за допомогою якого пристрої визначають, який тип даних міститься у відправлених або прийнятих пакетах. Порт вказується через двокрапку після адреси пристрою (наприклад, 192.168.0.1:80).

Найбільш часто використовувані порти:

21: FTP, File Transer Protocol
25: SMTP: Електронна пошта
53: DNS: Domain Name System (переклад ip-адреси в адресу у словесному вигляді)
80: HTTP - веб-сторінки
443: HTTPS: захищена веб-сторінка.

HTTP: Hyper Text Transfer Protocol

Абревіатура HTTP з англійської мови розшифровується як "Протокол передачі гіпертексту". Це набір правил, що описує, як треба передавати та інтерпретувати сторінки в інтернеті.

Гіпертекст

Гіпертекст - це, дослівно, "надтекст" - мова розмітки і форматування тексту, що широко використовується в мережі Інтернет. Гіпертекст дозволяє створити сторінку із текстом, на якій є більше інформації ніж у звичайному тексті: посилання на інші сторінки, зображення, відео- та аудіозаписи. Будь-яка веб-сторінка форматується за допомогою гіпертексту. Інтернет-браузери, такі як Інтернет-Експолрер або Гугл Хром - це додатки, які вміють відтворювати на екрані гіпертекст, перетворюючи його відформатовану, гарну веб-сторінку.

Приклади того, що можна створити застосовуючи гіпертекст:

Як виглядає код, написаний за допомогою гіпертексту (формує посилання на інтернет-сторінку):

Протокол передачі

Протокол передачі гіпертексту - стандарт, який визначає, як гіпертекстові документи слід передавати з сервера на клієнт (тобто у веб-браузер). Протокол працює за допомогою механізму запитів та відповідей.

Типовий HTTP-запит

Запит складається з полів. У полях вказується наступна інформація:

Типова HTTP-відповідь

Інформація у відповіді:

HTML та CSS

HTML та CSS (гіпертекстова мова розмітки та каскадні таблиці стилів відповідно) - це основні стандарти та мови розмітки, що використовуються в Інтернет.

Мова гіпертекстової розмітки HTML

Мова HTML (HyperText Markup Language) - це мова, що використовується для текстової розмітки сайтів. Розмітка робиться за допомогою тегів, кожен з яких задає різні атрибути для відображення тексту. На практиці треба завжди виконувати наступне: закривати всі теги, перевіряти сторінки за допомогою валідатора (допоможе знайти помилки), розділяти розмітку та стилі (зберігати в окремих файлах).

Каскадні таблиці стилів CSS

За допомогою каскадних таблиць стилів можна задавати вигляд різних тегів. В CSS, замість тегів використовуються так звані селектори.

Селектори можна застосувати за певного унікального блоку, що має ідентифікатор (#id) або до групи блоків, яка називається класом (.class)

Практичний приклад

Створіть два файли, web.html та style.css. У першому файлі, запишіть заготовку нашої веб-сторінки:

<html>
  <head>
    <title>Example webpage</title>
    <basefont size=4>
  </head>
</html>

Це створить пусту сторінку із заголовком Example Webpage:

В коді все, що знаходиться між трикутними дужками, це теги. Кожен тег має своє значення. Наприклад, тег html - це базовий тег, він вказує на початок та кінець веб-сторінки. Тег head вказує на параметри сторінки. Тег title визначає заголовок, тобто те що записується вгорі сторінки коли вона завантажується. Зверніть увагу, що до кожного тегу є парний закриваючий тег - так браузер розуміє, де потрібно припинити дію тегу.

Змінимо код, замінивши заголовок на Section Webpage:

<html>
  <head>
    <title>Section Webpage</title>
    <basefont size=4>
  </head>
</html>

Вміст веб-сторінки (її тіло) знаходиться всередині тегу body. Додамо цей тег.

<html>
  <head>
    <title>Section Webpage</title>
    <basefont size=4>
  </head>
  <body>
  </body>
</html>

Оскільки тіло сторінки поки що пусте, то її вигляд не змінився. Всередину тегу body можна додати простий текст, або вставити будь-які інші HTML-теги. Додамо до сторінки заголовки найвищого (h1) та найнижчого (h6) рівнів за допомогою відповідних тегів:

<html>
  <head>
    <title>Section Webpage</title>
    <basefont size=4>
  </head>
  <body>
    <h1> Welcome! </h1>
    <h6> This is fun! </h6>
  </body>
</html>

Розмістимо на сторінці зображення кролика і абзац із надписом. Знайдіть у Google зображення кролика або будь-яке інше зображення, і скопіюйте посилання на нього:

http://s3.amazonaws.com/assets.prod.vetstreet.com/04/71/ec29a3d143ccb82ba28402c1cff6/bunny-in-a-field-thinkstock-178046407.jpg

Тепер за допомогою тегу p можна вставити абзац із надписом, а за допомогою тегу img можна вставити зображення на сторінку.

За допомогою параметрів тегу p текст можна вирівняти, наприклад, по правому краю екрана. Додамо декілька абзаців, що демонструють ці можливості:

<html>
  <head>
    <title>Section Webpage</title>
    <basefont size=4>
  </head>
  <body>
    <h1> Welcome! </h1>
    <h6> This is fun! </h6>
    <p>Подивіться, який милий кролик: <img src="http://s3.amazonaws.com/assets.prod.vetstreet.com/04/71/ec29a3d143ccb82ba28402c1cff6/bunny-in-a-field-thinkstock-178046407.jpg"></p>
    <p>Ще один абзац</p>
    <p align="right">Абзац, вирівняний вправо.</p>
  </body>
</html>

Застосуємо тег ul, щоб створити список. Наступний код створює список з декількома елементами (додайте його до нашої веб-сторінки):

<ul>
  <li>Carrots</li>
  <li>Jacob</li>
  <li>Lettuce</li>
</ul>

Додамо до веб-сторінки стилі, щоб зробити її гарнішою. Відкрийте файл style.css, і напишіть там наступний код:

/* Селектор для тега body - встановлює колір тла*/
body {
	background-color: lightblue;	
}

/* Селектор для іменованого блока, встановлює колір */
#pretty_color {
	color: purple;
}

/* Селектор для класу - встановлює шрифт */
.pretty_font {
  font-family: "Brush Script MT", cursive;
}

Після створення, CSS-файл необхідно підключити до вихідного коду HTML-сторінки. Для цього треба додати наступний рядок в секцію head нашого HTML-файлу:

<link rel = "stylesheet" type="text/css" href="style.css">

Включення файлу таблиці стилів змінить вигляд HTML-сторінки:

Встановіть в одному з абзаців (всередині тега p) атрибут id="pretty_color":

<html>
  <head>
    <title>Section Webpage</title>
    <basefont size=4>
    <link rel = "stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1> Welcome! </h1>
    <h6> This is fun! </h6>
    <!--Змінюємо колір абзацу -->
    <p id = "pretty_color">Подивіться, який милий кролик: <img src="http://s3.amazonaws.com/assets.prod.vetstreet.com/04/71/ec29a3d143ccb82ba28402c1cff6/bunny-in-a-field-thinkstock-178046407.jpg"></p>
    <p>Ще один абзац</p>
    <p align="right">Абзац, вирівняний вправо.</p>
    <ul>
      <li>Carrots</li>
      <li>Jacob</li>
      <li>Lettuce</li>
    </ul>
  </body>
</html>

Колір тексту в одному з абзаців зміниться на фіолетовий (як вказано у файлі style.css):

В іншому абзаці встановіть атрибут class = "pretty_font":

<html>
  <head>
    <title>Section Webpage</title>
    <basefont size=4>
    <link rel = "stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1> Welcome! </h1>
    <h6> This is fun! </h6>
    <p id = "pretty_color">Подивіться, який милий кролик: <img src="http://s3.amazonaws.com/assets.prod.vetstreet.com/04/71/ec29a3d143ccb82ba28402c1cff6/bunny-in-a-field-thinkstock-178046407.jpg"></p>
    <!--Змінюємо шрифт абзацу -->
    <p class = "pretty_font">Another paragraph</p>
    <p align="right">Абзац, вирівняний вправо.</p>
    <ul>
      <li>Carrots</li>
      <li>Jacob</li>
      <li>Lettuce</li>
    </ul>
  </body>
</html>

Додавши наступний текст у файл style.css, можна змінити колір усіх абзаців:

p {
  color: white;
}

Більше інформації про HTML та CSS можна знайти на сайті WWW Consortium. Там є детальна документація про різні теги, їх властивості тощо.