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

Kod źródłowy HTML - proszę o ocenę

Object Storage Arubacloud
0 głosów
2,112 wizyt
pytanie zadane 2 października 2016 w HTML i CSS przez Polly Nowicjusz (150 p.)
edycja 2 października 2016 przez ScriptyChris

HTML: http://pastebin.com/4Kxg9HYm  (wkleić do przeglądarki)

<!DOCTYPE HTML>
<html lang="pl">
<head>
 
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   
    <title>TechNews</title>
   
    <meta name="description" content="Strona internetowa poświęcona internetowi i programowaniu. Newsy informatyczne. Newsy hakerskie." />
    <meta name="keywords" content="gry, komputerowe, konsole, informatyka, haker, hacker, newsy, wiadomosci, programowanie" />
   
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
   
    <link href="css/fontello.css" rel="stylesheet" type="text/css" />
   
</head>
 
<body>
 
  <div class="navi sticky">
            <ol>
                <li><a href="index.htm">Główna</a></li>
                <li><a href="poland.htm">Polska</a></li>
                <li><a href="ad.htm">Reklama</a></li>
                <li><a href="contact.htm">Napisz do mnie</a></li>
                <li><a href="info.htm">O autorach</a></li>
            </ol>
  </div>
  <div class="cointainer">
    <div class="content">
        <h1 class="istitle"><a href="index.htm">TechNews</a></h1>
        <span class="sr">Reklamy</span>
        <div class="conad">
            <div class="textad"><a href="myad.htm" target="_blank">Zatrudnij programistę webowogo</br>Kup stronę internetową (html i css)</a></div>
            <div class="textad"><a href="#" target="_blank">Tu może być twoja reklama</br>Kup Reklamę</a></div>
            <div class="textad"><a href="#" target="_blank">Tu może być twoja reklama</br>Kup Reklamę</a></div>
            <div class="dives"></div>
        </div> 
        </br></br>
       
        <div class="news1">
            <div class="titlenews"><a href="korea-polnocna.htm" class="link1"><h2>W Korei Północnej istnieje... 28 stron internetowych<h2></a></br></div>
            <div class="fotonews"><a href="bzwbk-hackerzy.htm" class="link1"><img src="img\n6.jpg"></a></div>
            <div class="textnews">Korea Północna to najbardziej niedostępny, odizolowany i... zacofany kraj na świecie. Działa tam jednak internet, w którym znajduje się... 28 stron. Jak wyciekła ta tajemnica?</div>
            <div class="dives"></div>
        </div> 
        </br></br>
        </br></br>
        <div class="news1">
            <div class="titlenews"><a href="bzwbk-hackerzy.htm" class="link1"><h2>Smartfony Xiaomi w Polsce</h2></a></br></div>
            <div class="fotonews"><a href="bzwbk-hackerzy.htm" class="link1"><img src="img\n7.jpg"></a></div>
            <div class="textnews">Xiaomi ma już dystrybutora na polskim rynku. Jest nim ABC Data. ,,Eleganckie, innowacyjne, wydajne, a do tego przystępne cenowo". Smartfony dostępne w oficjalnej sprzedaży: Mi 5, Redmi Note 3 oraz Redmi 3S.</div>
            <div class="dives"></div>
        </div> 
        </br></br>
        </br></br>
        <div class="news1">
            <div class="titlenews"><a href="bzwbk-hackerzy.htm" class="link1"><h2>Jak hakerzy zarabiają na graczach?</h2></a></br></div>
            <div class="fotonews"><a href="bzwbk-hackerzy.htm" class="link1"><img src="img\n5.jpg"></a></div>
            <div class="textnews">Jednym z najczęstszych ataków na graczy jest wyłudzanie danych uwierzytelniających (phishing). Atak ten zwykle wygląda w ten sposób:</br> - Gracz otrzymuje wiadomość mailową z prośbą o zalogowanie się do platformy gier online, np. Steam.</br>- Kliknięcie w link znajdujący się w mailu skutkuje przejściem na fałszywą stronę WWW,</br>- Gracz podaje Login i hasło.</br>To najprostsza droga do przejęcie konta przez hakerów.</div>
            <div class="dives"></div>
        </div> 
        </br></br>
        </br></br>
        <div class="news1">
            <div class="titlenews"><a href="bzwbk-hackerzy.htm" class="link1"><h2>ESET ostrzega klientów BZWBK przed hackerami</h2></a></br></div>
            <div class="fotonews"><a href="bzwbk-hackerzy.htm" class="link1"><img src="img\n1.jpg"></a></div>
            <div class="textnews">ESET ostrzega przed falą wiadomości phishingowych (czyli podszywaniem się cyberprzestępców za osoby godne zaufania) klientów Banku Zachodniego WBK. Pułapka ma za zadanie przechwycenie danych potrzebnych do logowania w serwisie BZ WBK – Numeru Identyfikacyjnego Klienta i jego hasła.</div>
            <div class="dives"></div>
        </div> 
        </br></br>
        </br></br>
        <div class="news1">
            <div class="titlenews"><a href="bzwbk-hackerzy.htm" class="link1"><h2>Wyciek danych z Last.fm – w tym wiele kont Polaków</h2></a></br></div>
            <div class="fotonews"><a href="bzwbk-hackerzy.htm" class="link1"><img src="img\n2.jpg"></a></div>
            <div class="textnews">Coraz mniej jest popularnych serwisów które jeszcze nie ogłosiły utraty danych dziesiątek milionów użytkowników. Do grona ofiar włamania dołączył popularny w Polsce serwis muzyczny Last.fm. Do sieci wyciekło ponad 43 miliony kont użytkowników, w tym także Polaków.</div>
            <div class="dives"></div>
        </div> 
        </br></br>
        </br></br>
        <div class="news1">
            <div class="titlenews"><a href="bzwbk-hackerzy.htm" class="link1"><h2>Hakerzy z NSA zhakowani</h2></a></br></div>
            <div class="fotonews"><a href="bzwbk-hackerzy.htm" class="link1"><img src="img\n3.jpg"></a></div>
            <div class="textnews">W sieci pojawiła się oferta sprzedaży plików wykradzionych rzekomo z serwerów The Equation Group – elitarnej grupy włamywaczy, powiązanej dzięki dokumentom Snowndena z NSA. Pliki wyglądają na prawdziwe.
            W kilku niezależnych miejscach – na Twitterze, Pastebinie, GitHubie, imgurze i Tumblrze pojawiły się informacje o aukcji, na której sprzedawane są pliki The Equation Group. Sprzedawca nie ujawnia swojej tożsamości.</div>
            <div class="dives"></div>
        </div> 
        </br></br>
        </br></br>
        <div class="news1">
            <div class="titlenews"><a href="bzwbk-hackerzy.htm" class="link1"><h2>Wyciek danych z Opery - Czy można było zapobiec?</h2></a></br></div>
            <div class="fotonews"><a href="bzwbk-hackerzy.htm" class="link1"><img src="img\n4.jpg"></a></div>
            <div class="textnews">,,Wyciek loginów i haseł z usługi Opera Sync pokazuje, że proste połączenie nazwy użytkownika i hasła nie jest już wystarczające, aby zagwarantować odpowiedni poziom bezpieczeństwa danych w serwisach online. Cyberprzestępcy nieustannie wyszukują słabe ogniwa w systemach informatycznych, aby przechwycić dane logowania do rozmaitych serwisów internetowych, zwłaszcza bankowych. Zabezpieczenie serwisu dwustopniowym mechanizmem autoryzacji dostępu z wykorzystaniem SMS ogranicza do minimum ryzyko włamania na konto użytkownika. Dzisiaj prawie każdy posiada telefon komórkowy lub smartfona, na który możemy dostarczyć SMS z jednorazowym hasłem dostępu. W ten sposób urządzenie mobilne zmienia się w narzędzie, które stanowi dodatkową warstwę bezpieczeństwa, bez konieczności inwestowania w dodatkową infrastrukturę IT''</div>
            <div class="dives"></div>
        </div> 
        </br></br>
        </br></br>
        <div class="news1">
            <div class="titlenews"><a href="polish-tor.htm" class="link1"><h2>Polski TOR</h2></a></br></div>
            <div class="fotonews"><a href="polish-tor.htm" class="link1"><img src="img\n0.jpg"></a></div>
            <div class="textnews">Polski kawałek sieci cebulowej jest stosunkowo wąski. Jednak jest warty uwagi. Oto najpopularniejsze polskie strony w sieci TOR.</div>
            <div class="dives"></div>
        </div> 
        <span class="sr">Reklamy</span>
        <div class="conad">
            <div class="textad"><a href="myad.htm" target="_blank">Zatrudnij programistę webowogo</br>Kup stronę internetową (html i css)</a></div>
            <div class="textad"><a href="#" target="_blank">Tu może być twoja reklama</br>Kup Reklamę</a></div>
            <div class="textad"><a href="#" target="_blank">Tu może być twoja reklama</br>Kup Reklamę</a></div>
            <div class="dives"></div>
        </div> 
        </br></br>
    </div>
  </div>
  <div class="footer">TechNews &copy; 2016</div>
   
 
</body>
</html>

CSS:

body{
	background-image: url("black.png");
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	margin: 0 !important;
	font-size: 18px;
}

h1{
	text-align: center;
	font-size: 50px;
}

.navi{
	margin-left: auto;
	margin-right: auto;
	background-color: #303030;
	border-bottom: 3px solid #111111;
}

.cointainer{
	margin-top: 105px;
	width: 1000px;
	border: 1px solid white;
	background-color: black;
	color: white;
	min-height: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.content{
	background-color: black;
	width: 900px;
	padding-left: 50px;
	padding-right: 50px;
}

.footer{
	background-color: black;
	color: white;
	padding: 30px;
	text-align: center;
}

/*navi*/
ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	line-height: 400%;
	display: inline-block;
	height: 80px;
}

ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
}

ol > li
{
	float: left;
	height: 83px;
	padding-left: 30px;
	padding-right: 30px;
	border-right: 1px solid #222;
}

ol > li:hover
{
	background-color: #363636;
}

ol > li:hover > a
{
	color: #fff;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

.link1{
	color: white;
	text-decoration: none;
}

.news1{
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid white;
}

.dives{
	clear: both;
}

.titlenews:hover a{
	color: orange;
}

.fotonews{
	float: left;
	padding-right: 30px;
}

.textnews{
	font-size: 15px;
}

.sr{
	font-size: 10px;
}

.istitle a{
	text-decoration: none;
	letter-spacing: 3px;
	color: white;
}

.istitle:hover a{
	color: #ddd;
}

.foto{
	width: 250px;
	height: 160px;
}

.textad{
	float: left;
	text-align: center;
	border: 1px solid white;
	width: 290px;
	height: 70px;
}
.textad:hover a{
	float: left;
	text-align: center;
	font-size: 19px;
	width: 290px;
	color: #f0f0f0;
}

.conad{
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid white;
}

.textad a{
	color: silver;
}

#presence{
	color: #eeccdd;
}

#presence:hover{
	color: #abc;
}

 

Krytyka mile widziana

1 odpowiedź

+2 głosów
odpowiedź 2 października 2016 przez Eimens Maniak (69,240 p.)
wybrane 2 października 2016 przez Polly
 
Najlepsza
  • Title za krótkie... 
  • brak semantyki, (zero znaczników HTML'a 5)
  • nazwy klas - poczytaj o camelCase
  • </br></br> bardzo zły nawyk, do tego lepiej wykorzystać margin/padding
  • każdy img powinien mieć title
  • źle napisane menu, (brak odpowiednich znaczników)  

 Sporo błędów, jak czegoś nie wiesz to nie kombinuj tylko poczytaj w internecie, tam naprawdę dużo jest... 

1
komentarz 2 października 2016 przez Comandeer Guru (602,340 p.)

Hmm… camelCase w przypadku klas w CSS jest bardzo rzadko używane. 

komentarz 2 października 2016 przez Polly Nowicjusz (150 p.)
Dzięki za ocenę :)
komentarz 2 października 2016 przez mbabane Szeryf (79,280 p.)
o nawet nie wiedzialem ze ta notacja ma taka nazwe
3
komentarz 2 października 2016 przez IBB Gaduła (3,020 p.)
  • każdy img powinien mieć title

Każdy element img musi mieć atrybut "alt", "title" jest całkowicie opcjonalny

komentarz 2 października 2016 przez jpacanowski VIP (101,940 p.)
  • </br></br> bardzo zły nawyk, do tego lepiej wykorzystać margin/padding

No i warto podkreślić, że nie istnieje coś takiego jak </br>
Za to <br> i <br/> jak najbardziej...

<br> powinno się używać do łamania tekstu.

1
komentarz 2 października 2016 przez Comandeer Guru (602,340 p.)

Każdy element img musi mieć atrybut "alt", "title" jest całkowicie opcjonalny

Hmm… AFAIR jeśli w kodzie jest img[title]:not([alt]), to AT wówczas wykorzysta [title] jako tekst alternatywny? Nie wiem, czy przypadkiem nie jest to zapisane nawet w technikach WCAG.

No i warto podkreślić, że nie istnieje coś takiego jak </br> 

Istnieje w trybie XML  ;) 

komentarz 2 października 2016 przez Eimens Maniak (69,240 p.)

Hmm… camelCase w przypadku klas w CSS jest bardzo rzadko używane. 

No w JS pewnie już częściej, ja jakoś tak przyjąłem :)  

1
komentarz 2 października 2016 przez IBB Gaduła (3,020 p.)

Hmm… AFAIR jeśli w kodzie jest img[title]:not([alt]), to AT wówczas wykorzysta[title] jako tekst alternatywny? Nie wiem, czy przypadkiem nie jest to zapisane nawet w technikach WCAG.

Niekoniecznie, przeglądarki i ATs różnie interpretują atrybut "title" - niektóre czytniki ekranu całkowicie ignorują ten atrybut (chyba że użytkownik zmieni ustawienia). Dlatego nigdy nie powinno się polegać na "title" - można stosować go jako środek do zapewnienia dodatkowej informacji, ale nie gdy atrybut ten zawiera kluczową informację, która nie jest przekazana w żaden inny sposób. 

Nie jest mi znana żadna technika WCAG 2.0, która zalecałaby dodanie alternatywnego tekstu do obrazka za pomocą atrybutu "title". Zawsze najlepszym rozwiązaniem jest zastosowanie do tego celu atrybutu "alt" - jego obecność jest też wymagana przez specyfikację HTML5 (poza wyjątkowymi sytuacjami, które nie dotyczą tego przykładu) - win-win :)

W ogóle specjaliści do spraw dostępności już od wielu lat odradzają stosowanie atrybutu "title" - obecnie jedyną sytuacją, gdy atrybut ten jest rzeczywiście postrzegany jako pomocny, to dodanie go do elementu iframe, by opisać jego funkcję. Specyfikacja HTML5 również odradza używanie go:

Warning: Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Kilka ciekawych artykułów na ten temat:

komentarz 2 października 2016 przez Comandeer Guru (602,340 p.)

Heh, to ciekawe, bo odniosłem takie wrażenie właśnie po przeczytaniu o [title] u Paciello – widać nocne czytanie nie zawsze mi służy ;)

Nie jest mi znana żadna technika WCAG 2.0, która zalecałaby dodanie alternatywnego tekstu do obrazka za pomocą atrybutu "title".

Raczej chodziło mi o zapis typu "jeśli niemożliwe jest zastosowanie atrybutu [alt], tekst alternatywny podany w [title]", ale nie umiem tego zlokalizować. Prawdopodobnie czytałem to gdzieś w kontekście innego artykułu od Paciello Group, w którym pisali na temat tego, że brak [alt] nie jest już błędem w WCAG tak długo, jak długo obrazek ma "dostępną nazwę". Pytanie brzmi: czy [title] było na liście "dostępnych nazw"?

W sumie ciekawi mnie jak JAWS/NVDA traktuje [title] na linkach – trzeba będzie sobie posłuchać w najbliższym czasie.

Podobne pytania

0 głosów
3 odpowiedzi 273 wizyt
pytanie zadane 19 października 2016 w Nasze projekty przez kieryk123 Początkujący (300 p.)
+1 głos
4 odpowiedzi 1,092 wizyt
pytanie zadane 1 lipca 2017 w HTML i CSS przez DraveS Początkujący (300 p.)
0 głosów
5 odpowiedzi 711 wizyt
pytanie zadane 11 września 2017 w Java przez Patryk Moros Początkujący (470 p.)

92,624 zapytań

141,482 odpowiedzi

319,822 komentarzy

62,005 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...