Page 1 of 2

notatki-html

Posted: Sun Jan 08, 2006 4:15 pm
by OktawiaN :)
Mam problem. Wpisuje ciagle w <body> <body bgcolor=red> a tlo sie nie zmienia. Jak mozna zmienic kolor tla notatki??

Posted: Sun Jan 08, 2006 4:28 pm
by Raist
Nie mozesz wewnatrz kodu deklarowac body ;) Jezeli chcesz zrobic tlo to stworz tabele np:

<table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#00000>
<tr>
<td></td>
</tr>
</table>

Rozbuduj i dostosuj do wlasnych potrzeb :)

Posted: Sun Jan 08, 2006 6:05 pm
by WojD
albo

<div style="background: #CC0000; width: 100%">

treść

</div>

Posted: Sun Jan 08, 2006 6:16 pm
by OktawiaN :)
Dzieki. Wojda sposob jest najlepszy ;)
Moze spiszecie jakies pomocne kody, ktore moga byc uzywane w Cantr??

Posted: Sun Jan 08, 2006 6:38 pm
by WojD
Dobra - zaraz napisze tutorial.

Posted: Sun Jan 08, 2006 6:54 pm
by Jifer
Hehe... po co tutorial...

Pamiętaj tylko o 2 rzeczach:

1.Jeśli robisz coś oprócz tekstu i chcesz zrobić coś w bardziej zaawansowany sposób rób to w tabeli lub w div'ie. Nacisk kładę jednak na div. Jeśli średnio znasz się na stronach, to po prostu załóż, że są lepsze.
Jak bardzo potrzebujesz wiedzieć, to mogę wyjaśnić, lub zajżyj na linkas poniżej. Wejdź w css->wstawianie->wydzielone bloki

2.Program Cantr w notatkach uznaje spacje i entery. W ramach tabeli musisz je sam definiować (<br> <p> i inne)

Całą resztę znajdziesz tutaj:
http://www.kurshtml.boo.pl
To wg. mnie najlepszy poradnik jak znalazłem. Mało jaka książka mu dorównuje. Podaje nawet zachowania pewnych skryptów dla konkretnych przeglądarek.

Poza twoimi umiejętnościami i zasadami Cantr nic Cię nie ogranicza.

mini tutorial HTML

Posted: Sun Jan 08, 2006 7:35 pm
by WojD
Podane niżej tagi (x)HTML moga być bez problemów stosowane w notatkach. A rezultat ich stosowania mozna zobaczyć w prosty sposób - skopiujcie poniższy tekst i wklejcie do notatki. A potem EKSPERYMENTUJCIE!



Ogólne uwagi:

wszystkie tagi poza <br> <p> i <img> musza mieć tag zamykający - <h3>ZAWSZE ZAMYKAMY TAGI</h3>

przy zapisywaniu notatki tekst i kod są formatowane przez specjalny skrypt, który automatycznie dodaje nowe wiersze, jeślinie chcemy podzielenia tekstu czy obrazków - między tagami nie może być spacji ani nowych wierszy


1. Formatowanie i umieszczanie tekstu

Code: Select all

 <br>Tekst przykładowy  br<br>
- wymuszone złamanie wiersza

Code: Select all

<div>Tekst przykładowy  div</div>
- tag div służy do pozycjonowania zawartości i zostanie omówiony dalej.

Code: Select all

<em>Tekst przykładowy  em</em>
równoważne

Code: Select all

<i>Tekst przykładowy  i </i>
kursywa

Code: Select all

<h1>Tekst przykładowy  h1,<h1>
- nagłowek 1 stopnia

Code: Select all

<h2>Tekst przykładowy  h2,<h2>
- nagłowek 2 stopnia

Code: Select all

<h3>Tekst przykładowy  h3,<h3>
- nagłowek 3 stopnia

Code: Select all

<h4>Tekst przykładowy  h4,<h4>
- nagłowek 4 stopnia

Code: Select all

<h5>Tekst przykładowy  h5,<h5>
- nagłowek 5 stopnia

Code: Select all

<h6>Tekst przykładowy  h6</h6>
- nagłowek 6 stopnia

Code: Select all

<p>Tekst przykładowy  p</p>
- nowy akapit

Code: Select all

<span>Tekst przykładowy  span</span>
- tag span służy do specjalnego formatowania fragmentu zawartości i zostanie omówiony dalej

Code: Select all

<strong>Tekst przykładowy  strong</strong>
równoważne

Code: Select all

<b> Tekst przykładowy  b </b>
wytłuszczenie

2. Linki:

Code: Select all

<a>Tekst przykładowy  a</a>
<b>Nie wolno stosować w notatkach linków zewnętrznych. Można natomiast użyć linku do

Code: Select all

<a>miejsca do którego odsyłamy</a>
(kotwicy) wewnątrz notatki</b>

3. Listy:
<ol>Tekst przykładowy ol</ol> Lista numerowana
<ul>Tekst przykładowy ul</ul> Lista wypunktowana
<li>Tekst przykładowy li</li> Punkt listy

Przykładowy kod listy:

Code: Select all

          <ol>
          <li>Punkt 1</li>
          <li>Punkt 2</li>
          <li>Punkt 3</li>
          </ol>


4. Tabele:


Przykładowy kod tabeli:

Code: Select all

          <table>
          <tr>
          <td>wiersz 1 komórka 1</td>
          <td>wiersz 1 komórka 2</td>
          </tr>
          <tr>
          <td>wiersz 2 komórka 1</td>
          <td>wiersz 2 komórka 2</td>
          </tr>
          </table>


5. Obrazy:

EDIT: Obrazki dodajemy wyłącznie przy pomocy systemu dostępnego na stronie tworzenia notatek. System podaje kod, który należy wkleić w oknie edycji notatki.


6. Tagi <div> i <span> oraz korzystanie z atrybutu style

Przy pomocy tagu <div> można między innymi pozycjonować treść i nadać kolor tła. Najlepiej jest to zrobić przy użyciu stylów. Polega to na umieszczeniu w tagu atrybutu style="" - na przykład:

Code: Select all

<div>
TREŚĆ
</div>


background: kolor tła - hex (#FFFFFF = biały; #000000 = czarny;) lub angielska nazwa koloru (red, blue, navy, white, black)
width: szerokość w pikselach
height: wysokość w pikselach
color: kolor tekstu - hex (#FFFFFF = biały; #000000 = czarny;) lub angielska nazwa koloru (red, blue, navy, white, black)
text-align: wyrównanie tekstu (domyślnie do lewej) left, center, right

W podobny sposób - przy pomocy tagu <span> można wydzielić fragment tekstu, do którego zastosujemy inne niż dla reszty zasady. Na przykład:

Code: Select all

<div>
TREŚĆ jakaś TREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ <span>jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ </span>jakaśTREŚĆ jakaśTREŚĆ jakaśTREŚĆ jakaś
</div>


Dotyczy to również wierszy i komórek tabeli - oraz innych tagów w ograniczonym zakresie.

Posted: Sun Jan 08, 2006 9:16 pm
by Jifer
Co nie zmienia faktu, że formatowania style=" można używać niemalże do wszystkiego. w <table style=""> można formatować nawet text, przezroczystość (firefox nie uznaje) i masę innych.
Widzę Wojd, że też lubisz w tym się bawić :]
Dam do tego powyżej tylko drobną uwagę (świetne streszczenie. Esencja tego co potrzebne), a mianowicie: dlaczego od razu X? Nie wystarczą zwykłe tagi HTML?

(mała propozycja Wojd: wszystkie kody zrób w ramkach "code". Będzie czytelniejsze i "niekumaci" -bez obrazy- będą wiedzieli o co chodzi)

takie tam spostrze&#380;enia o IE i FF ;)

Posted: Sun Jan 08, 2006 9:37 pm
by NiKnight
Firefox nie uznaje bo trzyma się zaleceń W3C, dzięki temu strony są prawidłowo czytane. Niestety Microsoft zamiast forsować swoje rozwiązania w organizacji W3C woli je od razu stosować, dlatego dochodzi do bardzo złych sytuacji, gdzie strona może być oglądana tylko przez IE. Co dla uzytkowników Linuxa, BSD czy innego systemu jest strasznie kłopotliwe :/

Dobrze, że podaliście kody, mam tylko nadzieję, że forma notatki nie będzie górować nad jej treścią :wink:

Posted: Sun Jan 08, 2006 9:49 pm
by WojD
:)

dlaczego (x)html ?

Z prostej przyczyny: wierzę, że za niedługi czas kod szablonów Cantr zostanie dostosowany do zaleceń W3C czyli własnie do XHTML'a - im mniej będzie kolizji w kodzie tym sprawniej wszystko będzie działać

Poza tym xhtml to esencja html - dodatkowo oczyszczona z wszelkich brudów...

(x) dlatego, że nie do końca jest to czysty kod - trzeba by tak naprawdę narzucic reguły, których 'zwykli smiertlnicy' nie zrozumieją chociazby bez poznania xml'a

style - szablony maja byc oparte na css'ach (arkuszach stylów) - użycie stylów inline (sorry za żargon - czyli takich w tagach <div style=""> zapewni, że większość tak zrobionych notatek zachowa swój wygląd. Nie wiem, czy szablony będa 100% bazować na klasach - jeśli tak, to problemów nie będzie żadnych - ale jesli nie - to czasem notki mogłyby by zabawnie się zmienić...

Jifer wrote:Widzę Wojd, że też lubisz w tym się bawić :]


Bawić? Nie cierpię tego. To moja praca...



No dobra...


Lubię :)


Zrobiłem w ramkach code - ale nie wiem, czy jest czytelniej...

Posted: Mon Jan 09, 2006 12:37 pm
by Jifer
Jest czytelniej :]
Twoja praca? Co konkretnie robisz? Pytam, bo ja biegnę właśnie w tym kierunku. To mnie kręci. Design stron i grafika. Jedno i drugie.
Chociaż przyznam szczerze, że nie przepadam za php... w moim odczuciu to strasznie zawiły język... wolę pascala lub c++
Właśnie kończę licka i ruszam dalej na infę... ciężko będzie się dostać :(

Co do Xa macie rację. Zwróciłem jedynie na to uwagę, gdyż tagi są lekko pozmieniane. Osobiście bywa, że mam problemy, które wynikają z przyzwyczajenia do starego html i css2

Tworzenie statycznych stron jest problemem... właśnie przez przeglądarki. Np. FF nie pozwala na zmianę kolorystyki scrollbara. To spory minus.
Przekonałem się jednak, że poza pewnymi ograniczeniami "estetycznymi" (bo FF również nie uznaje stałego tła zdefiniowanego za pomocą css / html) to sprawuje się najlepiej. Czyta strony idealnie, nie ma problemów z ramkami i ustawianiem, co natomiast jest problemem w IE.

Jest jeszcze jedna rzecz. Są pewne rzeczy, które programiści z Opery, Mozilli, Netsapea pomineli: np. Java.
Zapraszam na:
http://secure.onet.pl/midasplayer/login ... Findex.jsp
zrozumiecie o co mi chodzi.

Posted: Mon Jan 09, 2006 12:54 pm
by marol
Jifer wrote:Chociaż przyznam szczerze, że nie przepadam za php... w moim odczuciu to strasznie zawiły język... wolę pascala lub c++
Yyy? Toż to prawie to samo... A co do IE - gdzieś przeczytałem coś takiego:
Internet Explorer służy do przeglądania Internetu z twojego komputera i odwrotnie.
:D

Posted: Mon Jan 09, 2006 12:59 pm
by NiKnight
Mała dygresja:

Chociaż przyznam szczerze, że nie przepadam za php... w moim odczuciu to strasznie zawiły język... wolę pascala lub c++


PHP poznałem na tyle, że jestem w stanie stworzyć prostą gierkę a la Cantr, zresztą tworzyłem ale musiałem przestać (czas). Niestety w porównaniu z Javą PHP jest strasznie nieuporządkowany, do tworzenia stron jednak bardziej sie nadaje niż Java (a dokładnie JSP, servlety i applety), jest po prostu łatwiejszy i w niektórych przypadkach szybszy :)

Zresztą język dobiera się do problemu a nie odwrotnie :wink:

Posted: Mon Jan 09, 2006 2:22 pm
by WojD
Jifer wrote:Twoja praca? Co konkretnie robisz?


http://wojd.eu.org

jest w profilu zresztą ;)



Jifer wrote: Czyta strony idealnie, nie ma problemów z ramkami i ustawianiem, co natomiast jest problemem w IE.


Niestety - wiekszosc userow nada korzysta z IE - statsy ze strony mojego klienta:

Internet Explorer 79 %
Mozilla 16.2 %
Opera 3.8 %
Netscape 0.6 %
Konqueror 0 %


Ludzie sklaniaja sie w strone Mozilli - to z mojego portfolio statsy:

Internet Explorer 58.5 %
Mozilla 31 % 31 %
Opera 7.5 %
Netscape 1.6 %
Konqueror 0.3 %
Google 0.1 % [LOL!]


Jifer wrote: Jest jeszcze jedna rzecz. Są pewne rzeczy, które programiści z Opery, Mozilli, Netsapea pomineli: np. Java.
Zapraszam na:
http://secure.onet.pl/midasplayer/login ... Findex.jsp
zrozumiecie o co mi chodzi.


Niezupełnie - to system płatności onetplayera i midasplayera jest niekompatybilny z normalnymi przegladarkami i microsoftocentryczny ;) Widzisz - to aplikacje mają być dla przeglądarek www a nie przeglądarki dla aplikacji www

Posted: Mon Jan 09, 2006 2:42 pm
by marol
Cantr:
1. Mozilla Firefox 1.x 40.2 %
2. Internet Explorer 6.x 33.0 %
3. Opera 8.x 9.3 %
4. Internet Explorer 5.x 7.2 %
5. Mozilla Firefox 7.2 %
6. Mozilla 1.x 1.0 %
Unknown 2.1 %