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

[CR] HTML (#4): Listy, automatyczne przewijanie strony

Object Storage Arubacloud
+4 głosów
4,786 wizyt
pytanie zadane 31 maja 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=-5Tn5CYPT5k

Cały kod indexu znajduje się w paczce możliwej do pobrania - ze względu na zawartość (slajdy o monitorach) przekracza limit 15.000 znaków. Tutaj wersja skrócona:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Monitory komputerowe</title>
	<meta name="description" content="Zobacz wszystko, co powienieneś wiedzieć o monitorach komputerowych w technikum informatycznym." />
	<meta name="keywords" content="budowa, zasada działania, CRT, LCD, złącza, wady, zalety, parametry monitorów, oznaczenia, maski, rodzaje matryc: TN, PVA, MVA, IPS, wymiar przekątnej, rozdzielczość, wielkość plamki, wielkość piksela, jasność, kontrast, bad pixel, PDP, OLED, VGA, DSUB, HDMI, DVI, jaki monitor kupić, porównanie CRT vs LCD" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	
	<script src="jquery.scrollTo.min.js"></script>
	
	<script>
		
		jQuery(function($)
		{
			//zresetuj scrolla
			$.scrollTo(0);
			
			$('#link1').click(function() { $.scrollTo($('#budowacrt'), 500); });
			$('#link2').click(function() { $.scrollTo($('#zasadacrt'), 500); });
			$('#link3').click(function() { $.scrollTo($('#maskicrt'), 500); });
	
			$('.scrollup').click(function() { $.scrollTo($('body'), 1000); });
		}
		);
		
		//pokaż podczas przewijania
		$(window).scroll(function()
		{
			if($(this).scrollTop()>300) $('.scrollup').fadeIn();
			else $('.scrollup').fadeOut();		
		}
		);
	
	
	</script>
	
</head>

<body>
	
	<div id="logo">Wykład #1: Monitory komputerowe</div>
	
	<div id="container">
	
		<a href="#" class="scrollup"></a>
	
		<div id="spis">
			
			<ol>
				<li>
					Monitory kineskopowe CRT
					<ul>
						<li><a id="link1" href="#">Budowa monitora</a></li>
						<li><a id="link2" href="#">Zasada działania</a></li>
						<li><a id="link3" href="#">Maska. Rodzaje masek</a></li>
						<li><a id="link4" href="#">Wady i zalety</a></li>
						<li><a id="link5" href="#">Dobór parametrów</a></li>
					</ul>
				</li>
				<li>
					Monitory ciekłokrystaliczne LCD
					<ul>
						<li><a id="link6" href="#">Budowa monitora</a></li>
						<li><a id="link7" href="#">Zasada działania</a></li>
						<li><a id="link8" href="#">Podział matryc</a></li>
						<li><a id="link9" href="#">Wady i zalety</a></li>
						<li><a id="link10" href="#">Dobór parametrów</a></li>						
					</ul>
				</li>
				<li>
					Sposoby podłączenia monitorów
					<ul>
						<li><a id="link11" href="#">DSUB</a></li>
						<li><a id="link12" href="#">DVI</a></li>
						<li><a id="link13" href="#">HDMI, Display Port</a></li>
					</ul>
				</li>	
				<li>
					Dodatkowe informacje
					<ul>
						<li><a id="link14" href="#">Przyszłość monitorów i wyświetlaczy?</a></li>
						<li><a id="link15" href="#">Wykorzystane źródła</a></li>
					</ul>
				</li>					
			</ol>
			
		</div>
		

		<!-- ######################## SLAJD 1.1 ######################## -->
		
		<div class="slajd">
		
			<h1 id="budowacrt">Budowa monitora CRT</h1>
			
			CRT to akronim od <strong>Cathode-Ray Tube</strong>, czyli lampy kineskopowej wyposażonej w działo elektronowe. W języku polskim pod tym słowem przyjęto potoczną nazwę skrótową, synonim dla wyrażenia monitor CRT – czyli oznaczenie modeli monitorów komputerowych, których wyświetlacz oparty jest na lampie obrazowej zwanej kineskopem. Właściwe określenie to monitor kineskopowy.
			<br /><br />
			
			<div style="float:left; width:480px; padding-left:20px;">
				<img src="img/budowa-crt.png" alt="crt" />
			</div>
			<div style="float:left; width:280px; text-align:left;">
				[1] lampa katodowa (kineskopowa) w formie szklanej próżniowej tuby<br /><br />
				[2] działa elektronowe wraz z układami skupiającymi wiązki<br /><br />
				[3] wiązki elektronów<br /><br />
				[4] cewka odchylająca<br /><br />
				[5] luminofor<br /><br />
				[6] maska<br /><br />
				[7] anoda
			</div>
			<div style="clear:both;"></div>

		</div>
		
		<!-- ######################## SLAJD 1.2 ######################## -->
		
		<div class="slajd">
		
			<h1 id="zasadacrt">Zasada działania monitora CRT</h1>
			
			Zasada tworzenia obrazu w kolorowym monitorze CRT polega na wysyłaniu w kierunku przedniej szyby powleczonej warstwą luminoforu, <strong>trzech wiązek elektronów</strong> (po jednej dla każdego składowego koloru RGB) za pomocą trzech dział elektronowych umieszczonych w tylnej części próżniowej tuby kineskopu. Wiązki te są kierowane za pomocą silnego pola magnetycznego (<strong>cewki odchylające</strong>) tak, aby trafiały w odpowiedni obszar na luminoforze.
			<br /><br />
			<strong>Luminofor jest to świecący pigment (fosfor)</strong>, materiał mający własności świecenia pod wpływem padającego nań promieniowania. Tworząc obraz wiązki przemiatają ekran wzdłuż pojedynczej poziomej linii, zwanej linią wybierania, od lewej do prawej, rozświetlając punkty luminoforu i powodując ich jaśniejsze bądź ciemniejsze świecenie, w zależności od chwilowego napięcia sterującego działem elektronowym.
			<br /><br />
			
			<div style="width:790px; background-color:#314004;padding:5px;font-weight:700;color:#fff;">
				Częstotliwość pozioma
			</div>
			<div style="width:790px; background-color:#dedede; padding:5px;">
				częstotliwość z jaką monitor rysuje pojedynczą linię obrazu, mierzona w kilohercach [kHz]
			</div>	
			
			<br />			
			Po narysowaniu linii obrazu i osiągnięciu prawego brzegu ekranu wiązki są chwilowo wygaszane, po czym cewki odchylające kierują je na początek następnej linii ku dołowi ekranu i proces następuje od nowa, aż do zapełnienia całego ekranu linia po linii. Gdy cały ekran się zapełni, wiązki znowu zostają wygaszone, po czym cały cykl rysowania obrazu zaczyna się od nowa od góry ekranu (od pierwszej linii).
			<br /><br />
			
			<div style="width:790px; background-color:#314004;padding:5px;font-weight:700;color:#fff;">
				Częstotliwość odświeżania (pionowa)
			</div>
			<div style="width:790px; background-color:#dedede;padding:5px;">
				częstotliwość z jaką monitor rysuje cały ekran (wszystkie linie obrazu) - podawana w hercach [Hz]. Aby uniknąć migotania ekranu i zmęczenia oczu, obraz w pionie powinien być rysowany 85 razy w ciągu sekundy (częstotliwość odświeżania 85 Hz)
			</div>
			
		</div>
		
		<!-- ######################## SLAJD 1.3 ######################## -->
		
		<div class="slajd">
		
			<h1 id="maskicrt">Rodzaje masek w monitorach CRT</h1>
			
			Przed warstwą luminoforu znajduje się tzw. <strong>maska</strong> (ang. shadow mask), która pełni funkcję filtru dbającego o to, aby elektrony uderzały idealnie w powierzchnię wyznaczonych pól luminoforu (subpikseli) - co pozytywnie wpływa na jakość obrazu.
			<br /><br />
			
			<div style="width:265px; float:left; text-align:center; font-size:14px;">
				<img src="img/maska1.png" alt="maska1" />
				<br />perforowana (IBM Delta)
			</div>
			<div style="width:260px; float:left; text-align:center; font-size:14px;">
				<img src="img/maska2.png" alt="maska2" />
				<br />szczelinowa<br />(Trinitron, Diamondtron)
			</div>
			<div style="width:265px; float:left; text-align:center; font-size:14px;">
				<img src="img/maska3.png" alt="maska3" />
				<br />szczelinowo-perforowana<br />(NEC Cromaclear)
			</div>
			<div style="clear:both;"></div>
			
			<br />
			
			<div style="width:790px; background-color:#314004;padding:5px;font-weight:700;color:#fff;">
				Maska perforowana
			</div>
			<div style="width:790px; background-color:#dedede; padding:5px;">
				występowała w pierwszych monitorach CRT, została opracowana przez firmę IBM. Jej największą wadą jest zbyt duża powierzchnia, co wpływa na obniżenie jasności obrazu
			</div>	
			
			<br />
			
			<div style="width:790px; background-color:#314004;padding:5px;font-weight:700;color:#fff;">
				Maska szczelinowa
			</div>
			<div style="width:790px; background-color:#dedede; padding:5px;">
				została po raz pierwszy zastosowana w kineskopach NEC Cromaclear. Stanowi kompromis między dwoma poprzednimi rozwiązaniami - kosztem nieznacznej utraty jakości obrazu zrezygnowano z dwóch drutów stabilizujących. Również koszt produkcji tej maski jest dużo niższy
			</div>	
			
			<br />
			
			<div style="width:790px; background-color:#314004;padding:5px;font-weight:700;color:#fff;">
				Maska szczelinowo-perforowana
			</div>
			<div style="width:790px; background-color:#dedede; padding:5px;">
				częstotliwość z jaką monitor rysuje pojedynczą linię obrazu, mierzona w kilohercach [kHz]
			</div>	
			
		</div>
		
	</div>
	
	<div id="stopka">Strona wykonana w kursie html Mirosława Zelenta</div>

</body>
</html>

Paczka z odcinka: POBIERZ​

1 odpowiedź

0 głosów
odpowiedź 9 grudnia 2020 przez Patryk213 Nowicjusz (170 p.)

Witam mam problem nie wczytuje mi sie tlo

Kod w HTML

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title>Monitor</title>
    
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
    <link rel="stylesheet" href="style/css" type="text/css" />
</head>

<body>
    
    
</body>
</html>

CSS

body
{
    /* Background pattern from Toptal Subtle Patterns */
    background-image: url("img/tlo.png");
}

 

>

komentarz 9 grudnia 2020 przez Pooki Obywatel (1,500 p.)
Czy tlo.png na pewno znajduje się w folderze img ? Pytam bo prawdopodobnie podałeś zły adres do pliku.
komentarz 10 grudnia 2020 przez SzkolnyAdmin Szeryf (86,360 p.)
Ewentualnie plik ma podwójne rozszerzenie tlo.png.png.
komentarz 10 grudnia 2020 przez CubeStorm Pasjonat (15,020 p.)

@Patryk213, błąd łatwo znaleźć w konsoli, (zbadaj element, console) znajduje się tam odpowiedni error gdy strona nie znajdzie pliku. Znajdziesz w nim również ścieżkę do tego pliku - sprawdź czy jest poprawna.

komentarz 10 grudnia 2020 przez VBService Ekspert (252,660 p.)

@Patryk213, Tu masz błąd wink, href="style/css"

<link rel="stylesheet" href="style/css" type="text/css" />

ma być . kropka,

<link rel="stylesheet" href="style.css" type="text/css" />

chyba, że chodziło Tobie o

<link rel="stylesheet" href="style/style.css" type="text/css" />

 

komentarz 10 grudnia 2020 przez Patryk213 Nowicjusz (170 p.)

@Pooki, 

Cześć mam w folderze.

komentarz 10 grudnia 2020 przez Patryk213 Nowicjusz (170 p.)
Zmieniłem przy href="style.css" i nadal jest białe tło.

<link rel="stylesheet" href="style.css" type="text/css" />
komentarz 10 grudnia 2020 przez Patryk213 Nowicjusz (170 p.)

@CubeStorm,

Jest jakiś błąd ale nie wiem o co chodzi w tym.

komentarz 10 grudnia 2020 przez VBService Ekspert (252,660 p.)

A wstaw kod css bezpośrednio do html-a.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>Monitor</title>
    
    <meta name="description" content="Opis w Google">
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku">

    <!-- <link rel="stylesheet" href="style.css" type="text/css" /> -->

<style>
body
{
    /* Background pattern from Toptal Subtle Patterns */
    background-image: url("img/tlo.png");
}
</style>

</head>

<body>
    
    
</body>
</html>

 

1
komentarz 11 grudnia 2020 przez VBService Ekspert (252,660 p.)
edycja 11 grudnia 2020 przez VBService

Po analizie tego obrazka, który udostępniłeś wink

i tego

zrób tak jak na tym obrazku poniżej (zaznacz tego checkbox-a), prawdopodobnie okaże się, że w folderze img masz tlo.png.png (błąd ten często się pojawia z tego powodu jak na obrazku zaznaczono w czerwonej ramce)

1
komentarz 11 grudnia 2020 przez Patryk213 Nowicjusz (170 p.)

 VBService

Dzięki działa było zwiekszone rosszerzenie png.png

Podobne pytania

+1 głos
1 odpowiedź 1,319 wizyt
pytanie zadane 22 lutego 2017 w Nasze poradniki przez Mirosław Zelent Nałogowiec (34,750 p.)
+2 głosów
0 odpowiedzi 1,396 wizyt
+3 głosów
1 odpowiedź 3,113 wizyt

92,536 zapytań

141,377 odpowiedzi

319,456 komentarzy

61,922 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!

...