Skip to content

Commit

Permalink
Fix html
Browse files Browse the repository at this point in the history
  • Loading branch information
@tapnisu
tapnisu committed Jun 25, 2024
1 parent ea7c201 commit 8943128
Showing 1 changed file with 32 additions and 22 deletions.
54 changes: 32 additions & 22 deletions posts/html.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ HTML-документа и на основе создать свою

## Лабораторная работа №1.2

---
Напишите что-то на подобии этого при помощи html:

<font>
<u style="text-decoration-color:#ff5555">
Expand All @@ -355,8 +355,6 @@ HTML-документа и на основе создать свою
<hr color="#000000" align="right" width="500px" size="5">
</p>

---

## Лабораторная работа №2

### Тема: "Вставка изображений в HTML-документ"
Expand All @@ -378,24 +376,34 @@ HTML-документа и на основе создать свою
Расширения картинки можете использовать
любые (`*.gif`, `*.png`, `*.jpg`)

| Код | Описание |
| :------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| `<img src="pc.jpg">` | Без атрибутов - текст по умолчанию находится снизу картинки |
| `<img src="pc.jpg" align="right">` | align="right" - картинка справа, текст слева |
| `<img src="pc.jpg" align="left">` | align="left" - картинка слева, текст обтекает справа |
| `<img src="pc.jpg" align="bottom">` | align="bottom" - как и по умолчанию, текст внизу |
| `<img src="pc.jpg" align="middle">` | align="middle" - текст посредине картинки |
| `<img src="pc.jpg" align="top">` | align="top" - текст вверху картинки |
| `<img src="pc.jpg" vspace="10">` | vspace - задаёт расстояние между текстом и рисунком (по вертикали). В примере расстояние равно 10 пикселям (точкам) |
| `<img src="pc.jpg" hspace="20">` | hspace - задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задается в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам) |
| `<img src="pc.jpg" alt="Сайт для сайтостроителей">` | alt - задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer — работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись "Сайт для сайтостроителей". Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой |
| `<img src="pc.jpg" width="150">` | width - задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!) |
| `<img src="pc.jpg" height="150">` | height - задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!) |
| `<img src="pc.jpg" border="0">` | border - задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0 |
| `<p align="center"><img src="pc.jpg"></p>` | `<p></p>` - размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например: `align="left"` - слева, `align="center"` - в центре, `align="right"` - справа |
| `<body background="pc.jpg" bgcolor="#000000">...</body>` | `background="Ваш_фон.jpg" - Ваша картинка будет фоном HTML странички. В атрибуте background="Ваш_фон.jpg" нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.` |

Пример: `<img src="pc.jpg" align="left" vspace="10" border="3" alt="Сайт для сайтостроителей uzeron.com">`
| Код | Описание |
| :-------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| `<img src="pc.jpg">` | Без атрибутов - текст по умолчанию находится снизу картинки |
| `<img src="pc.jpg" align="right">` | align="right" - картинка справа, текст слева |
| `<img src="pc.jpg" align="left">` | align="left" - картинка слева, текст обтекает справа |
| `<img src="pc.jpg" align="bottom">` | align="bottom" - как и по умолчанию, текст внизу |
| `<img src="pc.jpg" align="middle">` | align="middle" - текст посредине картинки |
| `<img src="pc.jpg" align="top">` | align="top" - текст вверху картинки |
| `<img src="pc.jpg" vspace="10">` | vspace - задаёт расстояние между текстом и рисунком (по вертикали). В примере расстояние равно 10 пикселям (точкам) |
| `<img src="pc.jpg" hspace="20">` | hspace - задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задается в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам) |
| `<img src="pc.jpg" alt="Сайт для сайтостроителей">` | alt - задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer — работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись "Сайт для сайтостроителей". Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой |
| `<img src="pc.jpg" width="150">` | width - задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!) |
| `<img src="pc.jpg" height="150">` | height - задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!) |
| `<img src="pc.jpg" border="0">` | border - задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0 |
| `<p align="center"><img src="pc.jpg"></p>` | `<p></p>` - размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например: `align="left"` - слева, `align="center"` - в центре, `align="right"` - справа |
| `<body background="Ваш_фон.jpg">...</body>` | `background="Ваш_фон.jpg"` - ваша картинка будет фоном блока. В атрибуте `background="Ваш_фон.jpg"` нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. |

Пример:

```html
<img
src="pc.jpg"
align="left"
vspace="10"
border="3"
alt="Сайт для сайтостроителей uzeron.com"
/>
```

### Задание №2

Expand All @@ -406,7 +414,9 @@ HTML-документа и на основе создать свою
Для того чтобы вставить картинку в html –
документ воспользуйтесь тегом

![`<img src="1" width="250" height="200">`](/html/test-2-task-2.webp)
```html
<img src="1" width="250" height="200" />
```

Запишите программный код:

Expand Down

0 comments on commit 8943128

Please sign in to comment.