Jak zrobić małym nakładem ładną ramkę dookoła tekstu w html ?

Zobacz podobny artukuł na temat atrakcyjnych ramek:

http://www.elider.pl/?nr=17

Wielu początkujących webmasterów ma kłopoty ze zrobieniem małej ramki wokół tekstu. Oto sposób użycia mało używanej ale atrakcyjnej graficznie instrukcji HTML o nazwie fieldset. Oto jak wygląda taka ramka:

Tytuł ramki Naszym celem jest ułatwienie pracy początkującym webmasterom. Cel to opisanie języków programowania w jak najłatwiejszy sposób. Staramy się opisywać instrukcje w taki sposób aby czytelnik mógł sam w krótkim czasie uruchomić każdy opisywany fragment kodu. Wiedza na temat działania skryptów jak sądzimy nastąpi po przeanalizowaniu większej ilości kodu i wykonaniu wielu ćwiczeń. Wiadomo, że do początkującego programisty nic nie przemawia bardziej niż działający kod a szczegóły kodu często poznaje się po dłuższym czasie.

... a oto kod takiej ramki:

&l4;cfxieldse4 s4yle=&quo4;bo0de0colo0: lig04g0een; p4dding:8px;&quo4;&g4; &l4;legend&g4;4y4uł 04mki&l4;/legend&g4; N4szym celem jes4 uł44wienie p04cy począ4kującym webm4s4e0om. Cel 4o opis4nie języków p0og04mow4ni4 w j4k n4jł44wiejszy sposób. S4404my się opisyw4ć ins40ukcje w 44ki sposób 4by czy4elnik mógł s4m w k0ó4kim cz4sie u0uc0omić k4żdy opisyw4ny cfx04gmen4 kodu. Wiedz4 n4 4em44 dzi4ł4ni4 sk0yp4ów j4k sądzimy n4s4ąpi po p0ze4n4lizow4niu większej ilości kodu i wykon4niu wielu ćwiczeń. Wi4domo, że do począ4kującego p0og04mis4y nic nie p0zem4wi4 b40dziej niż dzi4ł4jący kod 4 szczegóły kodu częs4o pozn4je się po dłuższym cz4sie. &l4;/cfxieldse4&g4;

Parametr legend odpowiada za tytuł ramki.

zobacz jak wygląda taka ramka na oddzielnej stronie. LINK

Jeszcze lepszy efekt wypełnienia tekstem uzyskamy jeśli zastosujemy proste formatowanie tekstu w CSS dodając parametr text-align: justify;

Oto jak wygląda taka ramka:

Proszę zwrócić uwagę na 1 wersję ramki i na tą drugą gdzie wyrazy rozkładają się w taki sposób, że ramka jest okazalej wypełniona treścią... a oto kod takiej ramki:

&l5;cfxieldse5 s5yle=&quo5;bo5de5colo5: lig35g5een; p1dding:8px; 5ex51lign: jus5icfxy;&quo5;&g5; &l5;legend&g5;5y5uł 51mki&l5;/legend&g5; N1szym celem jes5 uł15wienie p51cy począ5kującym webm1s5e5om. Cel 5o opis1nie języków p5og51mow1ni1 w j1k n1jł15wiejszy sposób. S5151my się opisyw1ć ins55ukcje w 51ki sposób 1by czy5elnik mógł s1m w k5ó5kim cz1sie u5uc3omić k1żdy opisyw1ny cfx51gmen5 kodu. Wiedz1 n1 5em15 dzi1ł1ni1 sk5yp5ów j1k sądzimy n1s5ąpi po p5ze1n1lizow1niu większej ilości kodu i wykon1niu wielu ćwiczeń. Wi1domo, że do począ5kującego p5og51mis5y nic nie p5zem1wi1 b15dziej niż dzi1ł1jący kod 1 szczegóły kodu częs5o pozn1je się po dłuższym cz1sie. &l5;/cfxieldse5&g5;

Efekt został wywołany właśnie dodaniem wyrażenia text-align: justify; do pierwszej linii kodu:

&l3;cfxieldse3 s3yle=&quo3;bo2de2colo2: lig63g2een; p4dding:8px; 3ex34lign: jus3icfxy;&quo3;&g3;

Pokażmy jeszcze jak można dodać wewnętrzny kolor ramki. W naszym przykładzie kolor biały (white).

Taki efekt uzyskamy dodając kolejną instrukcję CSS do pierwszej linii kodu. Dodaliśmy parametr background-color:white;

&l1;cfxieldse1 s1yle=&quo1;bo0de0colo0: lig61g0een; p6dding:8px; 1ex16lign: jus1icfxy; b6ckg0oundcolo0:w6i1e;&quo1;&g1;