Git и GitHub, HTML, CSS: основные понятия, примеры

4 (80%) 4 vote[s]

Вы можете уже знать Git, если раньше использовали его в качестве программного обеспечения для контроля версий, чтобы поддерживать несколько версий своего программного обеспечения. Но в наши дни он используется для гораздо большего. Люди используют его не только для создания версий своего кода и для совместной работы с другими, но также для развертывания своего кода со своих локальных компьютеров на каком-либо промежуточном сервере или на каком-либо тестовом сервере и, в конечном итоге, на рабочем сервере. Таким образом, он фактически стал довольно интегральным инструментом, когда речь заходит о развертывании вашего кода в облаке.

Git и GitHub

Кратко о Git:

  1. Git может отслеживать изменения, внесенные в код, синхронизировать код между разными людьми, тестировать изменения в коде без потери оригинала и возвращаться к старым версиям кода.
  2. GitHub — это веб-сайт, на котором хранятся репозитории Git в Интернете, чтобы облегчить сотрудничество, которое позволяет Git. Репозиторий — это просто место для отслеживания кода и всех изменений в коде.
  3. Git команды:
    • git clone <url>: возьмите репозиторий, хранящийся на сервере (например, GitHub), и загрузите его
    • git add <filename(s)>: добавить файлы в промежуточную область для включения в следующий коммит
    • git commit -m «message»: сделайте снимок репозитория и сохраните его с сообщением об изменениях
    • git commit -am <filename(s)> «message»: добавлять файлы и фиксировать изменения в одном
    • git status: печать того, что в данный момент происходит с хранилищем
    • git push: отправлять любые локальные изменения (коммиты) на удаленный сервер
    • git pull: вытащить все удаленные изменения с удаленного сервера на локальный компьютер
    • git log: распечатать историю всех коммитов, которые были сделаны
    • git reflog: распечатать список всех ссылок на коммиты
    • git reset —hard <commit>: сбросить хранилище до данного коммита
    • git reset —hard origin/master: сбросить репозиторий в исходное состояние (например, версию, клонированную из GitHub)
  4. При объединении разных версий кода, например, при использовании git pull, может возникнуть конфликт слияния, если разные версии имеют разные данные в одном и том же месте. Git попытается позаботиться о слиянии автоматически, но если два пользователя редактируют, например, одну и ту же строку, конфликт слияния придется разрешать вручную.
    • Чтобы разрешить конфликт слияния, просто локально удалите все ненужные строки и код и отправьте результаты.

HTML

Кратко о HTML:

  1. HTML (язык разметки гипертекста) используется для разметки структуры веб-страницы.
  2. <!DOCTYPE html> помещается в начале файла HTML, чтобы указать браузеру, что используется HTML5.
  3. HTML состоит из тегов. Теги обычно идут парами, а данные находятся между тегами. Как правило, теги имеют отступ, чтобы помочь визуализировать их иерархию, но любой отступ является чисто стилистическим. Теги также могут иметь атрибуты, которые являются полями данных, иногда обязательными, а иногда и необязательными, которые предоставляют браузеру дополнительную информацию о том, как отображать данные.
  4. Некоторые общие теги HTML:
    • <html></html>: содержимое сайта;
    • <head></head>: метаданные о странице, полезные для браузера при отображении страницы;
    • <title></title>: название страницы;
    • <body></body>: тело (всё содержимое) страницы;
    • <h1></h1> : заголовок (h1 — самый большой заголовок, h6 — самый маленький заголовок);
    • <ul></ul> : неупорядоченный список
    • <ol></ol> : упорядоченный список
      • <li></li>: Элемент списка (должен быть внутри либо <ul></ul> или <ol></ol>)
    • <img src=»path/to/img.jpg» height=»200″ width=»300″>: изображение хранится в src атрибуте, который также может быть URL:
      • обратите внимание, что это один тег без конечного тега;
      • и  height, и width не обязательно (если оно опущено, браузер автоматически изменит размер изображения); также можно использовать процент: height=50% для автоматического масштабирования изображения до определенной части страницы.
    • <table></table>: таблица:
      • <th></th>: заголовок таблицы;
      • <tr></tr>: строка таблицы;
      • <td></td>: данные таблицы (ячейка).
    • <form></form>: форма, которая может быть заполнена и отправлена ​​пользователем:
      • <input type=»text» placeholder=»Full Name» name=»name»>: поле ввода:
        • type указывает тип данных;
        • placeholder отображается серым цветом перед заполнением поля;
        • name идентификатор поля ввода;
      • <button></button>: кнопка, используемая для отправки формы.
  5. Объектная модель документа — это способ концептуализации веб-страниц путем представления их в виде взаимосвязанной иерархии узлов. В HTML узлами DOM будут различные теги и содержащиеся в них данные, причем <html></html>тег находится в самой верхней части дерева. Хотя на первый взгляд это может показаться немного неинтуитивным, эта модель станет очень полезной в будущем.

CSS

Кратко о каскадных таблицах стилей:

  • CSS (каскадные таблицы стилей) — это язык, используемый для взаимодействия и стилизации HTML, изменяющий его внешний вид в соответствии с рядом правил. CSS делает сайты красивыми.
  • CSS может быть применен к HTML различными способами:
    • Атрибут style: <h5 stylecolor:blue;text-align:center;»></h5>
      • Передаваемые через точку с запятой свойства CSS style будут применяться ко всему, что содержится в теге.
    • В тегах <style></style>: это полезная парадигма для использования при многократном повторении одного и того же стиля на странице. Перечисленные свойства будут применяться ко всем перечисленным тегам.
    • Отдельный .css файл: добавьте <link rel=»stylesheet» href=»path/to/styles.css»> в заголовок и переместите код в отдельный файл CSS (тот же формат, который используется внутри <style></style>тегов).
      • Часто это даже лучшая парадигма, потому что она разделяет две совершенно разные вещи: структуру (HTML) и стиль (CSS), и в то же время его легче управлять и читать.
  • Некоторые общие свойства CSS (те, которые принимают аргументы в пикселях, часто могут принимать процент или просто auto):
    • color: blue, color: #0c8e05: может быть 1 из ~ 140 именованных цветов или иметь шестнадцатеричное значение, представляющее значение RGB.
    • text-align: left: выравнивает текст по left; другие возможные аргументы center, right или justify.
    • background-color: teal: устанавливает цвет фона в том же формате, что и свойство color.
    • height: 150px: устанавливает высоту области.
    • width: 150px: устанавливает ширину области.
    • margin: 30px: устанавливает поле вокруг всех четырех сторон области.
      • также могут быть разбиты на margin-leftmargin-right, margin-top и margin-bottom.
    • padding: 20px : устанавливает отступ вокруг текста внутри области.
      • можно разбить так же, как margin.
    • font-family: Arial, sans-serif: устанавливает семейство шрифтов, которое будет использоваться:
      • разделенный запятыми список предоставляет альтернативы в случае, если браузер не поддерживает определенный шрифт;
      • общие семейства, такие как sans-serif будут использовать настройки браузера по умолчанию.
    • font-size: 28px: устанавливает размер шрифта.
    • font-weight: bold: устанавливает вес («жирность») шрифта в качестве (bold), относительной мере (lighter) или числе (200).
    • border: 3px solid blue: устанавливает границу вокруг области.
  • Существует множество свойств CSS, которые можно использовать по-разному. Посмотрите обширную документацию для получения дополнительной информации.

Секционирование с помощью HTML и CSS

  • Два специальных тега позволяют разбить веб-страницу на разделы:
    • <div></div>: вертикальное разделение веб-страницы.
    • <span></span>: раздел веб-страницы внутри, например, текста.
  • И <div></div>, и <span></span> на самом деле мало что делает, но они позволяют маркировать разделы веб-страницы.
  • Можно ссылаться на различные разделы веб — страницы при помощи атрибутов id и class. Атрибуты id уникально идентифицируют элементы. Может быть произвольное количество элементов одного id с разными данным class.
  • На id можно ссылаться в CSS с помощью #id, а на class можно ссылаться при помощи .class. Поэтому id и class можно использовать для стилизации одних и тех же типов областей (например, 3 разных <div></div>) различными способами.

GitHub Pages

  • GitHub Pages — это функция GitHub, которая позволяет развертывать хранилище в Интернете.
  • Просто выделите GitHub Pages в разделе «Настройки», выберите основную ветку и нажмите «Сохранить».
  • По умолчанию хранилище будет развернуто по адресу username.github.io/repository.
  • GitHub Pages автоматически обновляется при обновлении хранилища.

Видео, как загрузить и установить Git и создать первый репозиторий на GitHub:

Или в цикле статей Git на сайте htmlacademy.ru.

Практические примеры

border

Исходный код:

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page!</title>
            <style>
                div {
                    border: 5px dotted red;
                }
            </style>
    </head>
    <body>
        <div>
            Hello, world!
        </div>
    </body>
</html>

class

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

Смотреть код:

div_span

This is the top of my web page.
This is the middle of my web page.
This is the bottom of my web page.

Смотреть код:

font

Hello, world!

Исходный код:

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page!</title>
            <style>
                div {
                    font-family: Arial, sans-serif;
                    font-size: 28px;
                    font-weight: bold;
                }
            </style>
    </head>
    <body>
        <div>
            Hello, world!
        </div>
    </body>
</html>

form

Смотреть код:

headings

Смотреть код:

id

Смотреть код:

image1

cat

Смотреть код:

image2

cat

Смотреть код:

link

Click here!

Смотреть код:

lists

My Web Page! An Unordered List:
  • One Item
  • Another Item
  • Yet Another Item
An Ordered List:
  1. First Item
  2. Second Item
  3. Another Item Here
  4. Fourth Item

Смотреть код:

size

Исходный код:

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page!</title>
        <style>
            div {
                background-color: teal;
                width: 500px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div>
            Hello, world!
        </div>
    </body>
</html>

style 1

Смотреть код:

style 2

Смотреть код:

style 3

Смотреть код:

CSS файл:

table

Смотреть код:

Также смотрите другие статьи на нашем сайте.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 796

Популярные записи