create account

Linki i Zdjęcia - HTML by fervi

View this thread on: hive.blogpeakd.comecency.com
· @fervi ·
$1.36
Linki i Zdjęcia - HTML
<div class="text-justify">

**Powoli oswajamy się z podstawowymi znacznikami HTML, dzisiaj przejdziemy do paru ciekawszych, które budowały całe strony internetowe (i po części dalej to robią).**

https://steemitimages.com/0x0/https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_960_720.jpg

## Linki - znacznik A

Możliwość skakania po stronach internetowych towarzyszy nam od bardzo dawna - to dzięki tagowi "A" możemy przechodzić na kolejne strony artykułów (jeśli jest on podzielony), możemy oglądać inne strony dostępne w portalu (np. z kontaktem) czy przeglądać inne strony (jak np. w Google). Ten tag daje nam naprawdę masę możliwości i dlatego warto i wręcz należy go znać.

Najpierw zróbmy adres bezpośredni. Taki adres wskazuje bezpośrednio na jaką stronę chcemy przejść, dla przykładu Google.pl

```
<a href="https://www.google.pl">Link do Google</a>
```
<a href="https://www.google.pl">Link do Google</a>

Czyli mamy tak. W znaczniku a mamy href, który wskazuje stronę na jaką chcemy przejść. Poza znacznikiem mamy tekst, który przedstawia pod jaką nazwą ma być nasz link ukryty.

___

Teraz spróbujmy wygenerować link pośredni. Taki link przydaje się by zaoszczędzić troszkę rozmiaru strony - wskazując bezpośrednio jaki plik (lub adres) ma zostać uruchomiony.

```
<a href="index.php">Link do index.php</a>
```
<a href="index.php">Link do index.php</a>

Po naciśnięciu na link (na normalnej stronie hehe :D) zostanie załadowany plik, który znajduje się w tym samym katalogu co uruchomiona strona. Za pomocą znaków specjalnych typu ../ czy / możemy przechodzić do pozostałych katalogów. Zaletą takiego stosowania adresów oprócz zaoszczędzenia trochę bajtów jest to, że przenosząc stronę na inną domenę wszystkie linki działają od razu.

## IMG - Obrazy

Strony internetowe to nie tylko tekst, ale często obrazy. Do tego stosujemy znacznik img.

```
https://cdn.pixabay.com/photo/2013/06/23/15/54/london-140785_960_720.jpg
```

Jak takie zdjęcie umieścić na stronie?

```
<img src="https://cdn.pixabay.com/photo/2013/06/23/15/54/london-140785_960_720.jpg">
```

<img src="https://cdn.pixabay.com/photo/2013/06/23/15/54/london-140785_960_720.jpg">

Czyli w znaczniku img w src (źródło) dajemy adres do zdjęcia. Oczywiście jeśli jest to możliwe to zalecam redukować adres. Wiele firm po prostu przechowuje u siebie dane zdjęcie zmniejszając tak nie tylko link, ale także optymalizując zdjęcie i przechowując je, by w razie awarii głównego serwera - mieć je na zapas.

## Na razie to tyle

Nie chciałem tworzyć bardzo rozbudowanego tekstu, szczególnie, że tego trzeba się nauczyć ;) Niech każdy przeczyta i przyswoi wiedzę na spokojnie!

</div>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorfervi
permlinklinki-i-zdjecia-html
categorypolish
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["polish","busy","pl-artykuly","pl-programowanie","pl-html"],"users":[],"links":["https://www.google.pl","https://index.php"],"image":["https://steemitimages.com/0x0/https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_960_720.jpg","https://cdn.pixabay.com/photo/2013/06/23/15/54/london-140785_960_720.jpg"]}
created2018-09-15 15:07:30
last_update2018-09-15 15:07:30
depth0
children6
last_payout2018-09-22 15:07:30
cashout_time1969-12-31 23:59:59
total_payout_value1.150 HBD
curator_payout_value0.208 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,660
author_reputation-1,650,858,928,265
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,370,400
net_rshares1,179,157,865,101
author_curate_reward""
vote details (58)
@coincollecto ·
Dobra robota Fervi. Pierwsza lekcja dla mnie jak zostać budowniczym zaliczona. Pozdrawiam.
properties (22)
authorcoincollecto
permlinkre-fervi-linki-i-zdjecia-html-20180915t195259683z
categorypolish
json_metadata{"tags":["polish"],"app":"steemit/0.1"}
created2018-09-15 19:53:00
last_update2018-09-15 19:53:00
depth1
children0
last_payout2018-09-22 19:53:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length90
author_reputation1,008,913,985,923
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,389,913
net_rshares0
@johnstaff ·
Chic  article. I learned a lot of new things. I signed up and voted. I will be glad to mutual subscription))))
properties (22)
authorjohnstaff
permlinkre-fervi-linki-i-zdjecia-html-20180915t150925445z
categorypolish
json_metadata{"tags":["polish"],"app":"steemit/0.1"}
created2018-09-15 15:09:27
last_update2018-09-15 15:09:27
depth1
children0
last_payout2018-09-22 15:09:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length110
author_reputation-506,307,167,152
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,370,573
net_rshares0
@kuchniawedwoje ·
Dobry początek. Jeszcze 2 dni temu w ten sposób można było wstawiać zdjęcia do wpisów na steemit - korzystając z czystego html. Teraz to działa w wypadku komentarzy: 
 <img src="https://cdn.pixabay.com/photo/2013/06/23/15/54/london-140785_960_720.jpg">
... ale w przypadku wpisów już nie :( 
Portal wymusza hostowanie zdjęć na ich serwerze: steemitimages.com. Co o tym myślisz?
properties (22)
authorkuchniawedwoje
permlinkre-fervi-linki-i-zdjecia-html-20180918t060248157z
categorypolish
json_metadata{"tags":["polish"],"image":["https://cdn.pixabay.com/photo/2013/06/23/15/54/london-140785_960_720.jpg"],"app":"steemit/0.1"}
created2018-09-18 06:02:48
last_update2018-09-18 06:02:48
depth1
children0
last_payout2018-09-25 06:02:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length377
author_reputation2,356,011,027,480
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,553,791
net_rshares0
@mizej ·
Haha! Dlaczego nie natrafiłem na ten materiał dwa lata temu gdy dopiero zaczynałem z HTML
properties (22)
authormizej
permlinkre-fervi-linki-i-zdjecia-html-20180915t153819471z
categorypolish
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["polish"],"users":[],"links":[],"image":[]}
created2018-09-15 15:38:18
last_update2018-09-15 15:38:18
depth1
children2
last_payout2018-09-22 15:38:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length89
author_reputation3,484,001,117,927
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,372,960
net_rshares0
@fervi ·
No niestety, chociaż HTML to stara rzecz, nawet są graficzne edytory "WYSIWYG" (What you see is what you get)
properties (22)
authorfervi
permlinkre-mizej-re-fervi-linki-i-zdjecia-html-20180915t173242770z
categorypolish
json_metadata{"tags":["polish"],"app":"steemit/0.1"}
created2018-09-15 17:32:42
last_update2018-09-15 17:32:42
depth2
children1
last_payout2018-09-22 17:32:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length109
author_reputation-1,650,858,928,265
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,381,369
net_rshares0
@mizej ·
Może i stara rzecz, ale przydatna. Mnie pomogła zobrazować, na czym polega programowanie (taka analogia i to WIELKA ANALOGIA). No i zachęciło mnie do zainteresowania się innymi językami programowania. Podobało mi się to, ponieważ od razu widziałem efekty tego, co robie, to było dla mnie jak klocki lego ;D
properties (22)
authormizej
permlinkre-fervi-re-mizej-re-fervi-linki-i-zdjecia-html-20180915t210258496z
categorypolish
json_metadata{"tags":["polish"],"app":"steemit/0.1"}
created2018-09-15 21:02:57
last_update2018-09-15 21:02:57
depth3
children0
last_payout2018-09-22 21:02:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length306
author_reputation3,484,001,117,927
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,393,670
net_rshares0