HTML I ty możesz nauczyć się języka HTML

Formatowanie Tekstu

Pogrubienie Czcionki

<b>Pogrubiony Tekst</b>

Tekst Kursywą

<i>Tekst Pisany Kursywą</i>

Tekst Podkreślony

<u>Twój Podkreślony Tekst</u>

Widzisz już minimalne podstawy umiesz ;-) czas na coś troche trudniejszego czyli formatowanie tekstu ;-)

Jak Powiększyć Czcionke

<font size="10">Tekst Powiekszony</font>

po size w cudzysłowach jest dana cyfra która odpowiada rozmiarowi pisanej czcionki jeżeli napiszemy tam np od 1 do 2-3 to czcionka będzie mała a jak 10-12 to będzie duża. Formatowanie takiej czcionki możną także połączyć z pogrubieniem, podkreśleniem czy stworzeniem kursywy a robimy to w ten sposób

Pogrubienie

<font size="10"><b>Tekst</b></font>

Podkreślenie

<font size="10"><u>Tekst</u></font>

Kursywa

<font size="10"><i>Tekst Powiekszony</i></font>

No dobra jestem fajny umiem dość ciekawie ale jak zmienić kolor czcionki??. Jest to jeszcze bardziej proste niż myślisz po prostu zmieniamy atrybut "size" na "color" ponadto zamiast cyfer wpisujemy dany kolor w języku angielskim lub po prostu paletke kolorów taką jak "c30a0a" te cyferki z literkami tworzą jakis kolor np ten co podałem to ciemny czerwony ;-) wszystkie te kody możemy ustalić w gimpie, photoshopie a nawet paincie !!!. Stwórzmy teraz przykład czcionki z czerwonym napisem.

<font color="red">Czerwony Tekst</font>

Odnośniki

Brawo udało ci się widzisz jak szybko sie uczysz? Teraz jeszcze coś z innej beczki często widzisz na stronach różne napisy które do czegoś prowadzą np "Kontakt" "Strona Główna" itp. Nazwę jaką noszą to odnośniki a tworzy je sie w bardzo podobny sposób co formatowanie czcionki.

<a href="Adres Strony(odnosnika)">Tekst który chcesz aby sie wyświetlał jako odnośnik</a>

No wszystko ładnie pięknie ale dla mnie to mało chce więcej i inaczej to może stwórzmy obrazek jako odnośnik

<a href="linkodnosnika"><img src="adresobrazka"></a>

No dobrze odnośnik działa ale chce aby on otwierał się w nowej karcie jak na to zaradzić?
Odpowiedz jest bardzo prosta pomoże nam w tym komenda "_blank"

<a href="linkodnosnika" target="_blank">Tekst</a>

I teraz po kliknięciu na odnośnik będzie on się otwierał w nowej karcie. Nie raz jak najadę na jakiś odnośnik pokazuje mi się jakis napis o co w tym chodzi?? I tutaj też sprawa jest bardzo prosta ten tekst który ci się pokazuje to tytuł odnośnika który można dodać w prosty sposób title="Twój Tytuł" pokaże na przykładzie

O to odnośnik z tytułem.

<a href="linkodnosnika" title="Twój Tytuł">Tekst</a>

Dodatkowo możesz sobie pozwolić na dodatkowy chwyt który pozwala google łatwiej zdefiniować o co chodzi w tym linku pomaga to np w pozycjonowaniu. podam na przykladzie naszego forum

<a href="mybboard.pl" title="MyBBoard.pl" alt="Twoje forum o mybb">MyBBoard</a>

Obrazki

Czas na obrazki co jak i gdzie zaraz wszystko sie dowiemy.

Zwykły obrazek z tekstem alternatywnym

<img src="ścieżka do obrazka" alt="Tekst Alternatywny"/>

Obrazek o określonym rozmiarze

<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" />

Gdzie x i y podajemy szerokość i wysokość w pixelach możemy także stworzyć to w procentowej skali czyli np jak mamy obrazek i damy 50% to bedzie w rozmiarze o 50% mniejszym niż normalnie.

<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%" />

Posiadamy ładny obrazek ale przydała by się mu ramka ?? nic bardziej prostego

<img src="ścieżka dostępu" alt="Tekst alternatywny" border="1" />

gdzie zamiast 1 dajemy swoją liczbę. No dobrze wszystko pieknie ale chce aby mój obrazek był na środku albo z boku jak to zrobic??

<img  src="ścieżka dostępu" alt="Tekst alternatywny" align="umiejscowienie />

gdzie zamiast umiejscowienie dajemy

"Left" - Obrazek po lewej stronie względem tekstu
"Right" - To samo tylko że po prawej
"Top" - Tekst ustawiony na górze obrazka
"bottom" - tekst ustawiony na dole obrazka (Ta opcja jest domyślna)
"middle" - tekst ustawiony na średniej wysokości względem obrazka

Blue napisał 08.01.2011, 21:37:
Poprawiłam tytuł wątku

Ujmę to tak:


Czy my mamy 2000 rok?
Przecież istnieje coś takiego jak CSS, który służy do określania wyglądu... przykładowo FONT jest już przestarzały, tak samo jego wartości jak COLOR, SIZE itp.
ALIGN w obrazkach czy tabelach również powinien być zastąpiony przez CSS.

IMO idea fajna, ale wykonanie...

<font size="10"><b>Tekst</b></font>

Tak to sie moze 10 lat temu kodowalo, choć i w to wątpie...

<span style="font-size:10pt;font-weight:bold">Tekst</span>

Next

<font color="red">Czerwony Tekst</font>

No k... j/w

<span style="color:red">Czerwony Tekst</span>

Z tym IMG to nawet nie patrzyles co wstawiasz bo raz dajesz przestarzałą składnie, a raz taga zamkniętego xhtml'owo ale z atrybutami z ery tabelkowej siatki strony...

<img src="o.png" alt="Tekst alternatywny" style="width:x;height:x;border:0" />

Podam jeszcze kilka alternatyw, które według mnie warto stosować:

Pogrubienie Czcionki

<b>Pogrubiony Tekst</b>

<strong>Pogrubiony Tekst</strong>

Tekst Kursywą

<i>Tekst Pisany Kursywą</i>

<em>Pochylony tekst</em>

Tekst Podkreślony

<u>Twój Podkreślony Tekst</u>

<span style="text-decoration: underline;">Tekst podkreślony</span>

<span style="red">Czerwony Tekst</span>

Wkradł Ci się błąd, powinno być:

<span style="color: red;">Czerwony Tekst</span>

Migający tekst:

<span style="text-decoration:blink"></span>

Przekreślony tekst:

<span style="text-decoration:overline"></span>

Akapit wyr. do lewej (d-ślny):

<p style="text-align:left"></p>

Akapit wyr. do środka:

<p style="text-align:center"></p>

Akapit wyr. do prawej:

<p style="text-align:right"></p>

Akapit wyjustowany:

<p style="text-align:justify"></p>