Листе (набрајања) на веб страни

Набрајања или листе се често срећу на сајтовима. На слици са десне стране дат је један пример са сајта http://www.rts.rs. Постоје три врсте набрајања и то:

  • уређене
  • неуређене и
  • дефиниционе листе

html_liste

Таг за почетак уређене листе је <ol> од ordered list. Ставке набрајања се уводе тагом <li> – list item. Уређене листе користе један од следећих начина нумерисања ставки: арапске бројеве, римске бројеве, мала и велика слова енглеског алфабета. Арапски бројеви су подразумевани тип нумерисања, док се остали наводе помоћу атрибута type у оквиру тага <ol type=“a“>.

Таг за почетак неуређене листе је <ul> од unordered list. Ставке набрајања се уводе тагом <li>.Неуређене листе користе један одhtml_listexample знакова: тачка, квадрат, круг. Подразумевани тип је тачка, док се остали наводе помоћу атрибута type у оквиру тага <ul type=“square“> односно  <ul type=“circle“>.

Таг за почетак дефинициоиине листе је <dl> од description list. Ставке набрајања се уводе тагом <dt> – definition term, док се објашњења наводе помоћу тага <dd> – definition description.

Преузми фајлове за вежбање и распакуј их у посебан фолдер.

Креирај листе на основу узора.

1. пример:

html_liex1Наслов листе има следеће особине: врста фонта Cambria,14pt, italic, green (#009933), лево поравнање текста, размак између речи 5 пиксела и висина реда 120%.

Ставке набрајања имају следеће особине: врста фонта Comic Sans MS, позиција ознаке за нумерисање је inside, види се водећа нула и боја текста је #6699FF.

2. пример:

html_liex2

Наслов листе има исте особине као у претходном примеру.

Ставке набрајања имају следеће особине: врста фонта Cambria, позиција ознаке за нумерисање је inside, за нумерисање се користи подразумевани тип (1. 2. …) и боја текста је #6699FF.

3. пример

html_liex3Наслов листе има исте особине као у првом примеру.

Појмови који се објашњавају су исписани бојом #FF3300, величина текста је 11pt и врста фонта Cambria. Објашњења су само искошена.

Posted on 16. marta 2014., in 8. разред. Bookmark the permalink. Postavite komentar.

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se /  Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se /  Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se /  Promeni )

Povezivanje sa %s

%d bloggers like this: