ПАРАГРАФИ ПРЕФОРМАТИРАН И...
TRANSCRIPT
![Page 1: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/1.jpg)
HTML ПАРАГРАФИ, ПРЕФОРМАТИРАН И ФОРМАТИРАН ТЕКСТ
aс. Елена Първанова НПГ по КТС гр.Правец
Т е х н и ч е с к и у н и в е р с и т е т - С о ф и я
5 лекция
Модул 1: HTML
![Page 2: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/2.jpg)
1
СЪДЪРЖАНИЕ
HTML елемент за параграф ........................................................................................ 3
Коментари в HTML ................................................................................................... 4
Елементи за форматиране на текст в HTML .................................................................... 5
Елемент за преформатиран текст ................................................................................ 9
Елемент за представяне на компютърен код в HTML ........................................................ 10
![Page 3: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/3.jpg)
2
Когато завъшите тази лекция:
o ще се запознаете с HTML елемента за създаване на параграф;
o ще знаете как да поставяте коментар към кода на уеб страница;
o ще се запознаете с различните видове форматирания на текст с HTML;
o ще се запознаете с HTML елемента за преформатиран текст;
o ще се запознаете как се представяне на компютърен код в HTML.
![Page 4: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/4.jpg)
3
HTML елемент за параграф
В HTML параграф се дефинита с непразен елемент <p> (фиг.1).
ПРИМЕР ЗА ПАРАГРАФ С АТРИБУТ <STYLE>
<p> Параграф в уеб страница </p> <p style=" text-align:center"> Центриран параграф в уеб страница </p> <p style=" text-align:justify"> Двустранно подравнен параграф в уеб страница </p>
Фигура 1. Параграфи с HTML
![Page 5: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/5.jpg)
4
Коментари в HTML
Коментарите в HTML се поставят, за да дадат пояснения към кода или да не се престават
части от него (фиг.2). Записват между символите <!-- -->.
<!-- Това е коментар -->
<p>Това е параграф.</p>
<!-- <p>Това е параграф, който не се показва в браузъра.</p> -->
Фигура 2
![Page 6: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/6.jpg)
5
Елементи за форматиране на текст в HTML
Използват се следните елементи за форматиране на текст:
<b> Прави текст получерен
<em> Акцентира върху даден текст, обикновено с курсив
<i> Текст курсив
<small> Определя по-малък текст
<strong> Акцентира върху даден текст, обикновено с получерен шрифт
<sub> Форматира текст като долен индекс
<sup> Форматира текст като горен индекс
<ins> Определя вмъкнат текст
<del> Определя изтрит текст
<mark> Определя маркиран текст
![Page 7: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/7.jpg)
6
ПРИМЕР С РАЗЛИЧНИ ФОРМАТИРАНИЯ НА ТЕКСТ фиг.3
<p>Нормален текст <br/>
<b>Получерен текст</b></p>
<p>Нормален текст <br/>
<em>Акцентиран текст с em</em></p>
<p>Нормален текст <br/>
<i>Текст курсив</i></p>
<p>Нормален текст <br/>
<small>Малък текст</small></p>
<p>Нормален текст <br/>
<strong>Акцентиран текст със strong</strong></p>
![Page 8: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/8.jpg)
7
<p>Нормален текст <br/>
Tекст с <sub>долен</sub> индекс</p>
<p>Нормален текст <br/>
Текст с <sup>горен</sup> индекс</p>
<p>Нормален текст <br/>
<ins>Вмъкнат</ins> текст</p>
<p>Нормален текст <br/>
<del>Изтрит</del> текст</p>
<p>Нормален текст <br/>
<mark>Маркиран</mark> текст</p>
![Page 9: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/9.jpg)
8
Фигура 3
![Page 10: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/10.jpg)
9
Браузърите показват <strong> и <b>, <em> и <i> по един същ начин. Съществува
обаче разлика в значението на тези елементи: <b> и <i> дефинират удебелен и
курсив текст, а <strong> и <em> означават, че текстът е "важен" и от значение.
Елемент за преформатиран текст
Елемент <pre> създава преформатиран текст (фиг.4). Той запазва форматирането и
разстоянията в текст, така както е въведен във файла с код на HTML. Използва се за
равноширок шрифт, който е различен от стандартния.
<pre> Базови атрибути на елемент width - определя ширина на изображението в пиксели height - височината на изображението в пиксели </pre>
![Page 11: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/11.jpg)
10
Фигура 4. Преформатиран текст с HTML
Елемент за представяне на компютърен код в HTML
Елемент <code> представя части от програми в уеб страница (фиг.5). Елементът не
представя отместването на вътре и преминаването на нов ред. За това се вмъква в
елемента <pre>.
![Page 12: ПАРАГРАФИ ПРЕФОРМАТИРАН И ФОРМАТИРАНuktc.daisyner.com/teaching/lectures/HTML/5-web-design-html-paragr… · html ПАРАГРАФИ, ПРЕФОРМАТИРАН](https://reader036.vdocuments.mx/reader036/viewer/2022062414/5f074b427e708231d41c458a/html5/thumbnails/12.jpg)
11
<code> int a, b;
double avg;
avg = (a + b)/2.0;
</code>
Фигура 5