Nest

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

Założony przez Gutaj.

Formatowanie Tekstu


Pogrubienie Czcionki
Kod:
<b>Pogrubiony Tekst</b>



Tekst Kursywą
Kod:
<i>Tekst Pisany Kursywą</i>



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



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

Jak Powiększyć Czcionke
Kod:
<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
Kod:
<font size="10"><b>Tekst</b></font>



Podkreślenie
Kod:
<font size="10"><u>Tekst</u></font>



Kursywa
Kod:
<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.

Kod:
<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.

Kod:
<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

Kod:
<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"

Kod:
<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.


Kod:
<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


Kod:
<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
Kod:
<img src="ścieżka do obrazka" alt="Tekst Alternatywny"/>



Obrazek o określonym rozmiarze

Kod:
<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.

Kod:
<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

Kod:
<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??

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



gdzie zamiast umiejscowienie dajemy

Cytat:"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:
:facepalm: :facepalm: :facepalm:

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...
[Obrazek: mega+fp+9gag.jpg]

Kod:
<font size="10"><b>Tekst</b></font>
Tak to sie moze 10 lat temu kodowalo, choć i w to wątpie...
Kod:
<span style="font-size:10pt;font-weight:bold">Tekst</span>
Next
Kod:
<font color="red">Czerwony Tekst</font>
No k... j/w
Kod:
<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...
Kod:
<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ć:

Cytat:Pogrubienie Czcionki
Kod:
<b>Pogrubiony Tekst</b>

Kod:
<strong>Pogrubiony Tekst</strong>

Cytat:Tekst Kursywą
Kod:
<i>Tekst Pisany Kursywą</i>

Kod:
<em>Pochylony tekst</em>

Cytat:Tekst Podkreślony
Kod:
<u>Twój Podkreślony Tekst</u>

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

wujas napisał(a):
Kod:
<span style="red">Czerwony Tekst</span>

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

Kod:
<span style="color: red;">Czerwony Tekst</span>
Migający tekst:

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

Przekreślony tekst:

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

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

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

Akapit wyr. do środka:

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

Akapit wyr. do prawej:

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

Akapit wyjustowany:

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

Podobne wątki

Szablon html

10.11.2014, 17:25
Ostatni post: Snake_

CSS Plik html nie chce czytać css

21.08.2014, 21:08
Ostatni post: SLAVOO

Pomoc w HTML

29.09.2013, 13:47
Ostatni post: MixTape

Nauka HTML/CSS - od czego zacząć?

  • wowojtus
  • 10
27.05.2013, 10:48
Ostatni post: Na55

Jak pokazać kod html na stronie www

05.05.2012, 11:45
Ostatni post: adam-as

Skocz do:

Użytkownicy przeglądający ten wątek:

1 gości