Linki i Zdjęcia - HTML by fervi

View this thread on steempeak.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)
post_id62,522,935
authorfervi
permlinklinki-i-zdjecia-html
categorypolish
json_metadata{"image":["https:\/\/steemitimages.com\/0x0\/https:\/\/cdn.pixabay.com\/photo\/2015\/12\/04\/14\/05\/code-1076536_960_720.jpg"],"format":"markdown","community":"busy","tags":["polish","busy","pl-artykuly","pl-programowanie","pl-html"],"users":[],"links":["https:\/\/www.google.pl","https:\/\/index.php"],"app":"busy\/2.5.6"}
created2018-09-15 15:07:30
last_update2018-09-15 15:07:30
depth0
children6
net_rshares1,179,157,865,101
last_payout2018-09-22 15:07:30
cashout_time1969-12-31 23:59:59
total_payout_value1.150 SBD
curator_payout_value0.208 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length2,660
author_reputation39,204,266,552,701
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (58)
@johnstaff ·
Chic  article. I learned a lot of new things. I signed up and voted. I will be glad to mutual subscription))))
properties (22)
post_id62,523,097
authorjohnstaff
permlinkre-fervi-linki-i-zdjecia-html-20180915t150925445z
categorypolish
json_metadata{"app":"steemit\/0.1","tags":["polish"]}
created2018-09-15 15:09:27
last_update2018-09-15 15:09:27
depth1
children0
net_rshares0
last_payout2018-09-22 15:09:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length110
author_reputation-506,342,573,332
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@mizej ·
Haha! Dlaczego nie natrafiłem na ten materiał dwa lata temu gdy dopiero zaczynałem z HTML
properties (22)
post_id62,525,236
authormizej
permlinkre-fervi-linki-i-zdjecia-html-20180915t153819471z
categorypolish
json_metadata{"links":[],"app":"busy\/2.5.6","image":[],"community":"busy","tags":["polish"],"format":"markdown","users":[]}
created2018-09-15 15:38:18
last_update2018-09-15 15:38:18
depth1
children2
net_rshares0
last_payout2018-09-22 15:38:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length89
author_reputation3,485,155,998,247
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@fervi ·
No niestety, chociaż HTML to stara rzecz, nawet są graficzne edytory "WYSIWYG" (What you see is what you get)
properties (22)
post_id62,532,842
authorfervi
permlinkre-mizej-re-fervi-linki-i-zdjecia-html-20180915t173242770z
categorypolish
json_metadata{"app":"steemit\/0.1","tags":["polish"]}
created2018-09-15 17:32:42
last_update2018-09-15 17:32:42
depth2
children1
net_rshares0
last_payout2018-09-22 17:32:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length109
author_reputation39,204,266,552,701
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@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)
post_id62,543,878
authormizej
permlinkre-fervi-re-mizej-re-fervi-linki-i-zdjecia-html-20180915t210258496z
categorypolish
json_metadata{"app":"steemit\/0.1","tags":["polish"]}
created2018-09-15 21:02:57
last_update2018-09-15 21:02:57
depth3
children0
net_rshares0
last_payout2018-09-22 21:02:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length306
author_reputation3,485,155,998,247
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@coincollecto ·
Dobra robota Fervi. Pierwsza lekcja dla mnie jak zostać budowniczym zaliczona. Pozdrawiam.
properties (22)
post_id62,540,509
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
net_rshares0
last_payout2018-09-22 19:53:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length90
author_reputation659,005,271,928
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@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)
post_id62,687,874
authorkuchniawedwoje
permlinkre-fervi-linki-i-zdjecia-html-20180918t060248157z
categorypolish
json_metadata{"tags":["polish"],"app":"steemit\/0.1","image":["https:\/\/cdn.pixabay.com\/photo\/2013\/06\/23\/15\/54\/london-140785_960_720.jpg"]}
created2018-09-18 06:02:48
last_update2018-09-18 06:02:48
depth1
children0
net_rshares0
last_payout2018-09-25 06:02:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length377
author_reputation2,356,254,637,000
root_title"Linki i Zdjęcia - HTML"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000