Prezentacje html
Hej dzisiaj pokażę wam jak zrobić prezentację html , nie jest to trudne ani łatwe , Ale dzisiaj pokażę i wytłumaczę wam to krok po kroku w najłatwiejszy sposób .Dzisiaj prezka 2 ramkowa.
Krok 1 - Grafika
Można ją zrobić w zwykłym paincie każdy powinien mieć ten program ,ja moją robiłam w paincie.Ale najlepsze programy to photoscape i gimp można pobrać za darmo.Ja będę pracować na tej !
Krok 2 - Kod Html na obraz
Najpierw trzeba wrzucić obraz ifotos.pl albo inny darmowy program do linkowania obrazów. I skopiowac link .Otwórz notatnik w komputerze i wklej kod html na obraz :
<div style="background:url(Tu wklej zkopiowany link do grafiki zostawiając nawiasy ); width: tu napisz wysokośc prezentacji w pixelach px; height: tu szerokośc obrazka w pixelachpx; overflow: auto; margin-top: 0px; margin-left: 0px;">
Do mojej grafiki uzupełniny kod html wykląda tak :
<div style="background:url(http://s3.ifotos.pl/img/Poradnikh_eahxnnq.png); width: 882px; height: 597px; overflow: auto; margin-top: 0px; margin-left: 0px;">
Krok 3 -Kod html do na 1 ramkę :
Prezentacje potrzebóję 2 osobnych kodów na 2 ramki chyba że chcemy jedną ramkę to wystarczy ten kod do góry i ten poniżej i gotowe .Kod wygląda tak:
<div style="width: wysokośc ramki w pixelach px; height: szerokośc ramki w pixelax px; margin-top: odległośc od gury do 1 ramki w pixelach px; margin-left: odległośc od lewej krawędzi do zaczęcia 1 ramki w pixelach px; overflow: auto">
TEKST</div>
Uzupełniony kod do mojej prezki wygląda tak :
<div style="width: 400px; height: 247px; margin-top: 40px; margin-left: 40px; overflow: auto">TEKST</div>
Da nam to taki efekt :
Krok 4 - Kod html na 2 ramkę
Teraz kod uzupełniamy tak jak ten powyżej ale odległośc od górnej krawędzi miezymy od końca pierwszej ramki do zaczęcia drugiej .Kod html na drugą wyglonda tak :
<div style="width:wysokośc ramki w pixelach px; height:szerokośc ramki w pixelach px; margin-top:Odległośc od końca pierwszej do zaczęcia drugiej ramki px; margin-left: odległośc od lewej krawędzi do zaczęcia drugiej ramki px; overflow: auto">
TEKST</div>
</div>
Mój uzupełniony kod wygląda tak:
<div style="width: 399px; height: 245px; margin-top: 38px; margin-left: 36px; overflow: auto">
TEKST</div>
</div>
Da to efekt:
Krok 5 - Kończenie
Połącz wszystkie kody html i wklej je na howrse w trybie html , i przejdz do normalnego i możesz pisac prezka gotowa!
Mój gotowy kod wygląda tak:
<div style="background:url(http://s3.ifotos.pl/img/Poradnikh_eahxnnq.png); width: 882px; height: 597px; overflow: auto; margin-top: 0px; margin-left: 0px;"><div style="width: 400px; height: 247px; margin-top: 40px; margin-left: 40px; overflow: auto">
TEKST</div><div style="width: 399px; height: 245px; margin-top: 38px; margin-left: 36px; overflow: auto">
TEKST</div>
</div>
Uwaga ! możesz korzystac z mojej prezki ale nie możesz nic zmieniac i muwic że ty ją zrobiłęs,mam nadzieje że pomogłam w razie pytań pisz w komentarzach albo na jestem wampirka* , komentujcie pls .
Krok 1 - Grafika
Można ją zrobić w zwykłym paincie każdy powinien mieć ten program ,ja moją robiłam w paincie.Ale najlepsze programy to photoscape i gimp można pobrać za darmo.Ja będę pracować na tej !
Najpierw trzeba wrzucić obraz ifotos.pl albo inny darmowy program do linkowania obrazów. I skopiowac link .Otwórz notatnik w komputerze i wklej kod html na obraz :
<div style="background:url(Tu wklej zkopiowany link do grafiki zostawiając nawiasy ); width: tu napisz wysokośc prezentacji w pixelach px; height: tu szerokośc obrazka w pixelachpx; overflow: auto; margin-top: 0px; margin-left: 0px;">
Do mojej grafiki uzupełniny kod html wykląda tak :
<div style="background:url(http://s3.ifotos.pl/img/Poradnikh_eahxnnq.png); width: 882px; height: 597px; overflow: auto; margin-top: 0px; margin-left: 0px;">
Krok 3 -Kod html do na 1 ramkę :
Prezentacje potrzebóję 2 osobnych kodów na 2 ramki chyba że chcemy jedną ramkę to wystarczy ten kod do góry i ten poniżej i gotowe .Kod wygląda tak:
<div style="width: wysokośc ramki w pixelach px; height: szerokośc ramki w pixelax px; margin-top: odległośc od gury do 1 ramki w pixelach px; margin-left: odległośc od lewej krawędzi do zaczęcia 1 ramki w pixelach px; overflow: auto">
TEKST</div>
Uzupełniony kod do mojej prezki wygląda tak :
<div style="width: 400px; height: 247px; margin-top: 40px; margin-left: 40px; overflow: auto">TEKST</div>
Da nam to taki efekt :
Teraz kod uzupełniamy tak jak ten powyżej ale odległośc od górnej krawędzi miezymy od końca pierwszej ramki do zaczęcia drugiej .Kod html na drugą wyglonda tak :
<div style="width:wysokośc ramki w pixelach px; height:szerokośc ramki w pixelach px; margin-top:Odległośc od końca pierwszej do zaczęcia drugiej ramki px; margin-left: odległośc od lewej krawędzi do zaczęcia drugiej ramki px; overflow: auto">
TEKST</div>
</div>
Mój uzupełniony kod wygląda tak:
<div style="width: 399px; height: 245px; margin-top: 38px; margin-left: 36px; overflow: auto">
TEKST</div>
</div>
Da to efekt:
Krok 5 - Kończenie
Połącz wszystkie kody html i wklej je na howrse w trybie html , i przejdz do normalnego i możesz pisac prezka gotowa!
Mój gotowy kod wygląda tak:
<div style="background:url(http://s3.ifotos.pl/img/Poradnikh_eahxnnq.png); width: 882px; height: 597px; overflow: auto; margin-top: 0px; margin-left: 0px;"><div style="width: 400px; height: 247px; margin-top: 40px; margin-left: 40px; overflow: auto">
TEKST</div><div style="width: 399px; height: 245px; margin-top: 38px; margin-left: 36px; overflow: auto">
TEKST</div>
</div>
Uwaga ! możesz korzystac z mojej prezki ale nie możesz nic zmieniac i muwic że ty ją zrobiłęs,mam nadzieje że pomogłam w razie pytań pisz w komentarzach albo na jestem wampirka* , komentujcie pls .
Mi pomogłaś :) znasz też jakieś inne strony do linkowania obrazków?
OdpowiedzUsuń