13. Рад на тексту

Садржај

  1. 1 Вежба
Ставимо неки наслов на веб страницу (нпр. "HTML-основе"). 
HTML разликује шест нивоа (величина) наслова, а следећа табела приказује свих 6 тагова и одговарајуће наслове:

 

<h1>HTML-основе</h1>

HTML-основе

<h2>HTML-основе</h2>

HTML-основе

<h3>HTML-основе</h3>

HTML-основе

<h4>HTML-основе</h4>

HTML-основе

<h5>HTML-основе</h5>

HTML-основе

<h6>HTML-основе</h6>

HTML-основе

По дифолту текст је поравнат уз леву маргину. Ако желимо да наш наслов, или било који други елемент странице, буде центриран, требамо га ставити између тагова <center> и </center>:

<center>ОВО ЈЕ ЦЕНТРИРАН ТЕКСТ</center>

што ће дати слиједећи резултат:
 

ОВО ЈЕ ЦЕНТРИРАН ТЕКСТ

Уколико посебно не нагласимо којим фонтом желимо да буде исписан текст на нашој страници, броузер ће користити дифолт фонт (то је обично Times New Roman).
Основни таг којим можемо мењати фонт на HTML stranici je <font> таг, а он може имати три атрибута: face, size и color.
Атрибутом face дефинисан је тип фонта којим желимо да наш текст буде исписан. На једној страници можемо користити и више различитих фонтова, али водимо рачуна да не претерамо у "украшавању". Осим тога, водимо рачуна да корисник који учитава нашу страницу мора имати инсталиран тај фонт на свом рачунару. У супротном његов броузер ће приказати текст у дифолт фонту. Зато на својим страницама немојмо користити неке егзотичне фонтове, већ користимо само широко распрострањене фонтове.

Ако желимо да наша страница буде исписана рецимо "Arial" фонтом (којим је исписана и ова страница коју управо читамо), онда требамо  написати:

<font face="Arial"> Ovde staviti tekst. </font>

Ако користимо неке егзотичније фонтове онда би било добро да наведемо и неколико алтернативних фонтова, један за другим, одвојених зарезом. Ако посетилац наше странице на свом рачунару нема инсталиран први фонт са листе, он ће га приказати у слиједећем са листе, и тако даље. На примјер:

<font face="Comic Sans MS,Arial,Courier">

Ево примера неколико популарних фонтова које можемо користити на својим страницама:

Verdana
Arial
Courier
Bedrock
Times New Roman
Comic Sans MS

Следећа ствар која се може мењати је величина слова, а она се дефинише  преко size атрибута. HTML разликује 7 величина слова које носе вредности од 1 до 7. Подразумиевана (дифолт) величина је 3. Ако су слова величине 3 сувише мала можемо задати величину фонта од рецимо 5, на следећи начин:

<font size="5">

Ево листе са величинама фонта од 1 до 7 па одаберимо величину која нам одговара:

veličina 1, veličina 2, veličina 3, veličina 4, veličina 5, veličina 6, veličina 7.

Атрибутом color којим можемо мењати боју текста (као што је направљено у овом одељку). За овај атрибут важи исто правило као и код дефинисања боја <body> тагом. Дакле, ако желимо да у неком делу текста променимо боју фонта у црвену ставићемо:

<font color="#ff0000"> Ovdje ide tekst. </font>

Толико о кориштењу <font> тага. Наравно могућности уређивања текста се не завршавају на овом тагу. У HTML документима постоји могућност писања подебљаним (bold или strong) словима и курзивом (italic), као и могућност подвлачења (underline) и прецртавања (strike) текста. Следећа табела  приказује одговарајуће тагове као и резултате њихове примјене:

<b>bold</b>

bold

<strong>strong</strong>

strong

<i>italic</i>

italic

<u>underline</u>

underline

<strike>strike</strike>

strike

Осим тога могу се писати и слова у индексу или експоненту. Индекс се додаје помоћу тага <sub>, а експонент помоћу тага <sup>. Следећа табела приказује пример њихове примене:

 

H<sub>2</sub>O

H2O

2<sup>2</sup>=4

22=4

Текст се у броузеру аутоматски ломи на крају реда. То може бити незгодно ако желимо да неке фразе буду целе у једном реду. Ово се може постићи уметањем тог дијела текста између тагова:

<nobr> Ovdje ide tekst koji se neće prelomiti na kraju reda </nobr>

Уколико је текст превелик да стане у један ред на монитору, на дну прозора ће се појавити хоризонтални "клизач"  (
scrollbar) и корисник ће морати скроловати да би га прочитао. Будимо опрезни са кориштењем овог тага јер није баш угодно скроловати кроз километарски дуг ред. Уколико желимо дозволити нашем реду да се преломи, али на точно одређеном мјесту, то можемо постићи кориштењем <wbr> тага. Овај таг не захтева завршни таг. За разлику од <br> тага који ће обавезно преломити ред, овај таг ће преломити ред само ако је то неопходно тј. ако је текст прије њега предугачак да би стао у један ред.

Као прво да видимо како можемо прећи у нови ред или започети нови одељак. Кад пишемо текст у Notepad-у прелазак у нови ред се постиже притиском на тастер ENTER (или RETURN). Међутим ово неће довести до преласка у нови ред и на нашој HTML страници. Наиме, да би броузер прешао у нови ред, то му морамо експлицитно наредити одговарајућим тагом. Таг за прелазак у нови ред је <br> таг. Он не захтијева одговарајући завршни таг (што је и разумљиво).

Прелазак у нови одељак постиже се <p> тагом. Он има исти учинак као и претходни таг с том разликом што ће направити мали размак између редова. На крају одељка можемо ставити и његов завршни таг, али већина броузера га не захтева, тако да га слободно можемо изоставити.
Текст се по дифолту поравнава уз лијеву маргину. Центрирање одељка или поравнање одељка уз десну маргину се постиже
align атрибутом. Align атрибут може имати три вриједности:
 

left

center

right

Дакле, одговарајући тагови за свако од наведених поравнања требају изгледати овако:

<p align="left">
<p align="center">
<p align="right">

Ако нам чак ни прелазак у нови одељак  није довољан да нагласимо прелазак на неку нову целину унутар наше странице, најбоље решење би било да повучемо једну хоризонталну линију, попут линије изнад овог одјељка. Линију можемо повући помоћу <hr> тага. Овај таг црта танку сиву линију преко цијеле странице. Ако нисмо задовољни изгледом ове линије и за то има рјешења. Наиме и овај таг може садржавати  одговарајуће атрибуте којима можемо регулисаи изглед ваше линије.
Ако не желимо да линија буде осенчана већ потпуно црна ставимо атрибут
noshade. Ако нисмо задовољни димензијама линије, можемо ју промијенити помоћу два атрибута: size и width. Атрибутом size одређујемо дебљину линије у пикселима, а атрибутом width одређујемо дужину линије или у пикселима или у процентима ширине странице. Овај таг такође може садржати align атрибут којем можемододелити исте вредности као и за одељак . Боју линије можемо регулисати помоћу color атрибута на већ описани начин за дефинисање боја у
HTML документима.
Тако на пример, ако желимо повући неосјенчану црвену линију која ће бити центрирана и чија ће дебљина износити 6 пиксела а протезат ће се преко 50% ширине странице, требамо написати:

<hr noshade align="center" size="6" width="50%" color="#ff0000">

и добићете следећу  линију:


 

Напомена:

Немојмо заборавити ставити симбол за проценте (%) у width тагу, иначе ће броузер мислити да смо му задали ширину линије у пикселима, а не у процентима ширине странице.
Оне украсне линије које виђамо на неким веб страницама нису задане овим тагом, већ представљају слике убачене помоћу једног другог тага, о којем ћемо говорити у делу о убацивању графичких елемената у веб странице.

У обичним едиторима текста тастер "TAB" служи за увлачење (енгл. indent) текста тј. за остављање одређеног броја празних места на почетку реда (обично се увлачи први ред пасуса). У Notepad-у такође можемо увући ред притискањем тастера "TAB" међутим ово неће имати никаквог ефекта на текст који ће бити приказан у броузеру (баш као што је био случај и са преласком у нови ред). Међутим и у HTML документу можемо увући ред за одређени број мјеста кориштењем слиједеће ознаке:

&nbsp;

Ова ознака оставља једно празно мјесто. Ако желимо оставити пет празних места једноставно ставите пет оваквих ознака једну за другом:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

У следећем примеру ставили смо пет оваквих ознака на почетак "одјељка" :

     xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx
xxxx xx xxxxx xx x xxxxx xxxxxxxx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx
xxxxxxx xxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx.

А одговарајући ХТМЛ код изгледа овако:

<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx
xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx
xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx
xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx.

Вежба

Отворите програм Notepad (Start->Accessories->Notepad)
У њему унесите следећи код

Оквир за текст

<html>
<head>
<title>Мој HTML dokument</title>
</head>
<body BGCOLOR="#FFFF00">
<h1><center>Мој HTML фајл</center></h1>
<hr>
<h1>Име и презиме</h1>
<h2>ученик</h2>
<h3>Основне школе</h3>
<h4>Херој Радмила Шишковић</h4>
<h5>Осми разред</h5>
<h6>Име и презиме</h6>
<br>
<p> Адреса
<address>
Увод у ХТМЛ/име и презиме/е-пошта
</address>
</body>
</html>
  • Промените боју позадине заменом кода боје Light Blue (светло плава) (користитие кодове на страни).
  • Замените текст Име и презиме својим именом и презименом а текст е-пошта вашом е-маил адресом .
  • Сачувајте на диск рачунара фајл под својим именом и презименом користећи енглеску латиницу без размака са екстензијом  html.
  • Отворите у свом броузеру ову датотеку.
  • Позовите наставника
Comments