• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[CR] HTML (#1): Tworzenie stron www, pierwszy projekt, wiedza podstawowa

VPS Starter Arubacloud
+5 głosów
14,179 wizyt
pytanie zadane 4 kwietnia 2016 w Nasze poradniki przez Mirosław Zelent Nałogowiec (34,750 p.)

CR = Code Review. O co chodzi? Zajrzyj tutaj
Pełna lista wszystkich Code Review? Zajrzyj tutaj

https://www.youtube.com/watch?v=k2IydkL3EOs

Kod z odcinka:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Najlepsze filmy!</title>
	<meta name="description" content="Przed Tobą spis moich ulubionych filmów. Sprawdź, czy znasz je wszystkie. Uczta dla kinomaniaka!" />
	<meta name="keywords" content="film, kino, najlepsze filmy, top filmy" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>

<body>
	<h1>Najlepsze filmy!</h1>
	
	Komedia: 
	<a href="http://www.filmweb.pl/Forrest.Gump" target="_blank" title="Zobacz na Filmwebie!">
		Forrest Gump (1994)
	</a>
	
	<br /><br />
	
	<a href="http://www.filmweb.pl/Forrest.Gump" target="_blank" title="Run Forrest, run!">
	<img src="img/forrest.jpg" />
	</a>

	<br /><br />
	
	Horror: 
	<a href="http://www.filmweb.pl/Obcy" target="_blank" title="Zobacz na Filmwebie!">
		Obcy 8 pasażer Nostromo (1979)
	</a>
	
	<br /><br />
	
	<a href="http://www.filmweb.pl/Obcy" target="_blank" title="One ugly bastard!">
		<img src="img/alien.jpg" />
	</a>

</body>
</html>

Paczka z odcinka: POBIERZ​

komentarz 15 lipca 2017 przez Eleander Nowicjusz (240 p.)
Witam

niestety wpisanei textu z 1 lekcji:

<a href="http://www.filmweb.pl/Forrest.Gump" target="_blank" title="Run Forrest, run!">
    <img src="img/forrest.jpg" />
    </a>

powoduje wyswietlenie sie malego kwadracika w chrome.Zamiast zdjecia Toma Hanksa.

Co robię źle?
1
komentarz 10 czerwca 2018 przez Jason_Nr_1 Bywalec (2,980 p.)

Sluchaj laugh!,

Jak wybrałeś samemu i sciagnąłeś Zdjecie z Internetu, to aby zdjecie byloby widoczne na twojej Stronie,

musisz zmienic Imie Podannego zdjecia samodzielnie, albo wpisać nazwe zdjecia w kod:

Przykład.:

sciagnąłeś zdjecie o nazwie Tomhanks.jpg, no to wpisujesz nazwe w kodzie:

<img src="img/Tomhanks.jpg" />,

a nie: <img src="img/forrest.jpg" />

 

A jeśli nie dziala,

Nie umiesiciłeś zjedcia do Folderu o nazwie img.

3 odpowiedzi

+6 głosów
odpowiedź 4 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Już od dawna czekałem na sekcję "nasze poradnikiyes

Dobra w tym odcinku warto zauważyć tylko że każda grafika dodana na stronę czyli znacznik <img> powinien zawierać alt="" czyli text alternatywny.

budowa: 

<img src="..." alt="to jest mój obrazek">

 

+2 głosów
odpowiedź 4 kwietnia 2016 przez mitelak Pasjonat (23,330 p.)

1. Jak PATYL wspomniał alt przy obrazkach
2. Usunięte zamknięcia w tagach "self-closing" np. <meta />. Nie jest to błąd w żadnym wypadku, ale jest pozostałością po xHTML, więc jest to wyłącznie moja decyzja :D
3. Nie zostawiamy pustego tekstu bez znaczników. Dlatego pozwoliłem sobie wrzucić go włącznie z linkiem w tag <p> co przy okazji rozwiązało nam kolejny problem 4.
4. Usunięte tagi <br>, które używa się do łamania linii w tekście, a nie do oddzielania elementów od siebie. Paragraf <p> rozwiązuje nam ten problem ponieważ automatycznie kolejny paragraf jest w następnej linii.
5. Mogę się z czymś mylić więc w razie co pisać! :D 

Kod poniżej:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>Najlepsze filmy!</title>
	<meta name="description" content="Przed Tobą spis moich ulubionych filmów. Sprawdź, czy znasz je wszystkie. Uczta dla kinomaniaka!">
	<meta name="keywords" content="film, kino, najlepsze filmy, top filmy">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>

<body>
	<h1>Najlepsze filmy!</h1>
	
    <p>Komedia:
	<a href="http://www.filmweb.pl/Forrest.Gump" target="_blank" title="Zobacz na Filmwebie!">
		Forrest Gump (1994)
	</a></p>
	
	<a href="http://www.filmweb.pl/Forrest.Gump" target="_blank" title="Run Forrest, run!">
	<img src="img/forrest.jpg" alt="Kadr z filmu Forest Gump">
	</a>
	
    <p>Horror:
	<a href="http://www.filmweb.pl/Obcy" target="_blank" title="Zobacz na Filmwebie!">
		Obcy 8 pasażer Nostromo (1979)
	</a></p>
	
	<a href="http://www.filmweb.pl/Obcy" target="_blank" title="One ugly bastard!">
		<img src="img/alien.jpg" alt="Kadr z filmu Obcy">
	</a>

</body>
</html>

 

+2 głosów
odpowiedź 9 kwietnia 2016 przez Comandeer Guru (599,730 p.)
W naszej organizacji Coders Community pojawiło się już odpowiednie repozytorium ;) https://github.com/CodersCommunity/CodeReview-HTML-01
komentarz 9 kwietnia 2016 przez efiku Szeryf (75,160 p.)
Od razu dodam, że każdy znający gita może się dołączyć. Wystarczy napisać do założycieli na pw lub spytać na IRC. Generalnie nasze CR będziemy wrzucać na GH.

Podobne pytania

+3 głosów
0 odpowiedzi 5,178 wizyt
+6 głosów
1 odpowiedź 8,011 wizyt
0 głosów
1 odpowiedź 459 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...