Elektroda.pl
Elektroda.pl
X

Search our partners

Find the latest content on electronic components. Datasheets.com
Please add exception to AdBlock for elektroda.pl.
If you watch the ads, you support portal and users.

HTML - zła interpretacja przeglądarek...

Eufor 02 Sep 2011 19:10 4342 38
Optex
  • #1
    Eufor
    Level 17  
    Witam :)
    Otóż robię stronę www w celu nauczenia się HTML, Adres tej strony tutaj. Jak zauważycie szablon stron składa się z czterech części: logo, skróty, panel boczny, panel z treścią. Jak można podejrzeć w źródle, widać że zaznaczyłem aby panel boczny (pierwszy od lewej) miał 150px a panel z treścią 550px czyli razem 700px co wpisałem w właściwości tabeli, jednak takie ustawienie wygląda jak powinno tylko w Firefoxie a w innych przeglądarkach wszystko jest pomieszane np: panel boczny ma 700px a panel treści 550px lub panel boczny 550px a treści 150px.

    Oto cały kod strony głównej:
    Code:
    <!DOCTYPE html PUBLIC "EUFOR 2011">
    

    <html style="scrollbar-base-color: black">
       <head>
          <title>Eufor</title>
          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
          <link rel="Shortcut icon" href="Grafika/ikona.ico" />
                    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
                    {lang: 'pl'}
                    </script>
       </head>
       <body leftmargin="x50" rightmargin="x50" topmargin="y10" bottommargin="y10" text="black" background="Grafika/background.jpg" bgproperties="fixed" vlink="black" link="black" alink="black">
    <font face="Verdana">
                <table width="700" align="center" cellspacing="3" cellpadding="0">
                   <tr>
                      <td colspan="0" align="center" valing="middle"><img src="Grafika/logo.png" alt="Ładowanie czekaj..." /></td>
                   </tr>
                   <tr>
                      <td background="Grafika/nawigacja.png" height="30" colspan="0" align="center" valing="middle">
                         <font face="Verdana">
                            <a href="index.html"><img src="Grafika/1nawi.jpg" alt="Ładowanie" border="0" onmouseover="this.src = 'Grafika/1nawi2.jpg'" onmouseout="this.src = 'Grafika/1nawi.jpg'" /></a>
                            <a href="kontakt.html"><img src="Grafika/2nawi.jpg" alt="Ładowanie" border="0" onmouseover="this.src = 'Grafika/2nawi2.jpg'" onmouseout="this.src = 'Grafika/2nawi.jpg'" /></a>
                                                                    <a href="download.html"><img src="Grafika/3nawi.jpg" alt="Ładowanie" border="0" onmouseover="this.src = 'Grafika/3nawi2.jpg'" onmouseout="this.src = 'Grafika/3nawi.jpg'" /></a>
                                                                    <a href="info.html"><img src="Grafika/4nawi.jpg" alt="Ładowanie" border="0" onmouseover="this.src = 'Grafika/4nawi2.jpg'" onmouseout="this.src = 'Grafika/4nawi.jpg'" /></a>
                         </font>
                   <tr>
                      <td background="Grafika/linki.png" height="480" width="150" valign="top">
                            <img src="Grafika/menu.jpg" hspace="44"/>
                                                                    <p align="left">
                               <ul type="square">
                                  <li><a href="czat.html">Czat</a></li>
                                  <li> Link </li>
                                  <li> Link </li>
                               </ul>
                                                                            </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <fieldset><legend><b>Odwiedzin</b></legend>
    <div style="padding:0px;font-size:9px;font-family:Verdana;text-align:center;"><img src="http://www.darmowylicznik.pl/licznik.php?id=40690" alt="Licznik odwiedzin" style="border:0px; width:100px; height:20px;"><script language="JavaScript">var adpol='<counter absolute;top:-1000px;">';var adpol2=adpol.replace('counter','div style="position:'); document.write(adpol2);</script><script language="JavaScript"> document.write('</div>') </script></div>
    </fieldset>
    <br>
    <fieldset><legend><b>Udostępnij</b></legend>
    <script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script>
    <fb:like href="http://eufor.strefa.pl" font="Verdana" layout="button_count" show_faces="true" width="122"></fb:like>
    <g:plusone size="medium"></g:plusone>
    </fieldset>
                            <td background="Grafika/glowna.png" width="550" valign="top">
                            <br>
                            Witaj na stronie eufor.strefa.pl
                            <br>
                            <blink>Strona w budowie!</blink>               
                      </td>
                   </tr>
                </table>
          <p align="center"><b><i><small><font color="gray" face="Comic Sans MS">
                   © 2011 Eufor
                                            <br>
                                            <script type = "text/javascript">
    var deszczowcepl_dayname = 0;
    </script>
    <script type = "text/javascript" src = "http://www.deszczowce.pl/skrypty/data.php"></script>
                                            <br>
                                            Poprawne działanie tylko w <blink>Mozilla Firefox</blink>
          </font></small></i></b></p>
            </font>
       </body>
    </html>


    Czy ktoś może zdiagnozować ten błąd? Jeśli zauważycie nowe błędy to także bym prosił o jakąś uwagę, po raz pierwszy bawię się w HTML i może to wyglądać banalnie :) No i jeszcze na razie nie używam CSS gdyż nie za bardzo rozumiem gdzie zapisać te style na ftp, no ale sam HTML na razie mi chyba wystarczy :)
  • Optex
  • Helpful post
    #2
    MVStudio
    Level 10  
    Co do Html'a.
    Po pierwsze. Masz źle ustalony Doctype.
    Tu masz opis o tym: http://www.w3schools.com/tags/tag_DOCTYPE.asp

    Po drugie. Zmień kodowanie strony z ISO-8859-2, twój kod:
    Code: html4strict
    Log in, to see the code

    na utf-8, na ten kod:
    Code: html4strict
    Log in, to see the code


    Zgodność kodu Html z wytycznymi W3 (World Wide Web Consortium)
    możesz sprawdzić tutaj: http://validator.w3.org/
    wpisując adres do miejsca na serwerze gdzie masz ten plik,
    lub załadować plik (upload), lub sama treść (jego zawartość).

    :arrow: --------------------------------------------------------------------- :arrow:

    Jeśli chodzi o CSS.
    Plik o nazwie "nazwa.css", gdzie zamiast "nazwa" wpisujesz dowolną nazwę
    umieszczasz na serwerze w tym samym katalogu co plik Html, oto kod (wpisany pomiędzy tag <head>..</head>):
    Code: html4strict
    Log in, to see the code


    lub w dowolnym katalogu, za pośrednictwem odpowiedniego kodu pokazujesz przeglądarce
    gdzie ma go znaleźć, oto kod:
    Code: html4strict
    Log in, to see the code


    Do edycji Html'a i CSS'a najlepiej jakbyś używał specjalnego edytora,
    np. jEdit (darmowy program do użytku pod Windows, Mac OS, OS/2, Unix, VMS).

    To były przykłady gdy CSS jest umieszczony w oddzielnym pliku.
    Są inne sposoby poza tym. Takie jak inline (kod umieszczony w linii kodu Html) jaki użyłeś:
    Code: html4strict
    Log in, to see the code


    i embedded, kod odseparowany od Html w pliku Html i umieszczony w tagu <head>:
    Code: css
    Log in, to see the code


    Zgodność kodu CSS z wytycznymi W3 (World Wide Web Consortium)
    możesz sprawdzić tutaj: http://jigsaw.w3.org/css-validator/
    Code: select_listing
    Log in, to see the code
  • #3
    Eufor
    Level 17  
    Dzięki takiej odpowiedzi potrzebowałem :) Bardzo mi pomogłeś, jeszcze raz dzięki :)

    Dodano po 18 [minuty]:

    Mam jednak mały problem :) CSS na razie nie dotykam pierw muszę naprawić to co jest teraz, po pierwsze na kodowaniu UTF-8 nie ma Polskich znaków i musi być UTF-8xA3 a po drugie strona do sprawdzania kodu HTML jaką mi podałeś pokazuje tylko taki błąd:
    Code:
    Sorry, I am unable to validate this document because on line 42 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
    

    The error was: utf8 "\xA3" does not map to Unicode

    Albo po prostu nie potrafię jej obsługiwać, strona dalej źle działa w innych przeglądarkach, teraz spróbuję zmienić jej wielkości za pomocą CSS. Chyba że masz lepszy pomysł :)

    Dodano po 44 [minuty]:

    Chyba użyje tego: http://www.kurshtml.edu.pl/css/rozmiary,tabele.html
    No ale to po południu teraz idę na dwór, jak macie lepsze pomysły to dajcie znać :)
  • #4
    scrabypl
    Level 25  
    Eee...
    UTF-8 jest międzynarodowym standardem.
    I tak, są tam polskie znaki. Twój program je po prostu ciulowo obsługuje.
  • #5
    MVStudio
    Level 10  
    Co do błędu jaki ci wyskakuje po wprowadzeniu pliku do validatora.

    Po pierwsze.
    Do edycji Html'a i CSS'a najlepiej jakbyś używał specjalnego edytora,
    np. jEdit (darmowy program do użytku pod Windows, Mac OS, OS/2, Unix, VMS).

    Po drugie.
    Polskie znaki będą widoczne jak wpiszesz ten kod:
    Code: html4strict
    Log in, to see the code


    Co do nauki Html'a. Jesli nie masz problemu z jezykiem angielskim, jest pelno tutoriali do nauki czy to z portalu Linda czy z VTC.
  • Optex
  • #6
    Eufor
    Level 17  
    Normalnie do edycji HTML używam programu HateML ale teraz kiedy zmieniałem kodowanie użyłem bezpośredniej edycji na serwerze być może dlatego bez xA3 nie ma polskich znaków, ale większym problem są te rozmiary komórek tabeli w różnych przeglądarkach.
    Użycie <td style="width: 20em; height: 10em"> zamiast <td background="Grafika/linki.png" height="480" width="150" valign="top"> nie pomaga, chyba zostało mi przepisanie tabeli na nowo i sprawdzanie usterki metoda prób i błędów :(

    Jeśli chodzi o angielski to umiem tyle co nauczyłem się w grach czy językach programowych :)

    Dodano po 1 [godziny] 24 [minuty]:

    Dobra, kombinowałem kombinowałem i udało się :) Na razie tylko strona główna ale działa oto link: http://eufor.strefa.pl
    Dla ciekawskich, zastosowałem dwie tabele które wyglądają jak jedna:
    Code:
       <table width="710">
    
          <tr>
             <td height="100" bgcolor="gray"> logo </td>
          </tr>
          <tr>
             <td height="30" bgcolor="gray"> nawigacja </td>
          </tr>
       </table>   
       <table>
          <tr>
             <td width="150" height="480" bgcolor="gray">  menu </td>
             <td width="550" height="480" bgcolor="gray">  dane </td>
          </tr>
       </table>

    Wszystkim dzięki za pomoc :)
    Tematu nie zamykam, może się jeszcze przyda.
  • #7
    Eufor
    Level 17  
    Właśnie zastosowałem zewnętrzny styl CSS i mam kolejny mały problem, otóż na swojej stronie mam odsyłacze tekstowe które domyślnie są podkreślone a ja tego nie chcę, dlatego zastosowałem brak dekoracji:
    Code:
    ul
    
    {
    text-decoration: none;
    }

    Jednak to nie działa, selektor jest dobry, sprawdzałem. Czy ktoś wie jak pozbyć się podkreślenia odsyłacza? Najlepiej przez CSS no ale ewentualnie może być w HTML :)

    Dodano po 1 [godziny] 26 [minuty]:

    Dobra zastosowałem:
    style="text-decoration: none;"
    bezpośrednio przy każdym linku.
  • #8
    MVStudio
    Level 10  
    może ten twój selektor "ul" ma "div'a" nad soba ??

    z drugiej strony samo "ul" nigdy nie występuje
    więc mogę ci zaproponować takie rozwiązanie:

    Code: css
    Log in, to see the code
  • #9
    fearnot

    Level 12  
    Hej!

    Mogę coś zasugerować?
    Jeżeli uczysz się HTML to porzuć naukę stawiania stron na tabelkach - to relikt przeszłości. W chwili obecnej tworzy się strony oparte o divy - bardzo łatwe do nauczenia i bardzo wdzięczne podczas tworzenia.

    Pozdrawiam
    Krzysiek
  • #10
    Eufor
    Level 17  
    Hym struktura tabeli na div'ach?
    Uczę się ze strony kurs html, i nie widziałem tam strony opartej na div tylko właśnie na tabeli :) Masz może link do instrukcji na div? Byłbym wdzięczny.
  • Helpful post
    #12
    fearnot

    Level 12  
    Jeżeli nie znasz angielskiego, to (moim zdaniem) będzie Ci bardzo ciężko.
    Tak jak ktoś wyżej napisał , spróbuj wsłuchać się w materiały wideo z Lynda.com - są w dość prostym angielskim.

    Jeżeli chcesz kodować strony www jak należy, powinieneś nauczyć się tworzyć je w oparciu o div (tabele zostaw do prezentacji danych tabelarycznych) i szablony css.

    Masz parę tutków po angielsku.
    http://www.nrjdesign.com/websitedesignresourceshtml/how-to-build-basic-css-layout.html
    http://www.ehow.com/how_5843267_make-website-using-div-tags.html
    http://www.colorplexstudios.com/articles/div_web_design_tutorial/
    http://www.maxdesign.com.au/articles/process/
    http://woork.blogspot.com/2008/01/three-column-fixed-layout-structure.html
    http://simplebits.com/notebook/2004/09/08/centering/
    http://www.sitepoint.com/breaking-out-of-the-box/


    Jak nie dasz rady, to poszukaj w księgarni jakiejś AKTUALNEJ książki o tworzeniu stron (zanim ją kupisz, sprawdź czy uczą w niej tabelek czy divów).

    Powyższe nie wyczerpuje tematu naturalnie. Jeżeli chcesz zostać koderem, to musisz objąć chociaż w podstawach Adobe Photoshop.
    Jeżeli chcesz również projektować strony www, to Adobe Photoshop/Gimp trzeba będzie opanować lepiej niż w podstawowym zakresie.

    Pozdrawiam
  • #13
    Eufor
    Level 17  
    Jeśli o to chodzi to jestem w technikum na kierunku mechatronik i kodowania w zakresie html chcę się nauczyć bardziej rekreacyjnie :) Po prostu lubię poznawać nowe języki, ciekawi mnie to i tyle, stworzyłem jakąś tam stronkę teraz postaram się przerobić ją na div'y :) Dzięki za te linki.

    Dodano po 2 [godziny] 58 [minuty]:

    Już mniej więcej rozumiem zasadę strony opartej na div'ach ale z tego co widzę nie jest to już tak przyjemne jak tabela :) Z chęcią się tego nauczę ale teraz muszę poznać też BASCOM a przy okazji uczę się MS-DOS, CSS i jQuerry :D Do tego dochodzi szkoła i czasu brak :(
  • Helpful post
    #14
    D214d3k
    Level 39  
    To zabezpieczenie przed kopiowaniem danych nic nie zabezpiecza (no może przed głupszymi dziećmi z podstawówki) a irytuje na przykład mi przeszkadza w gestach myszy (od których jestem uzależniony).
    Zwłaszcza jeśli ktoś się dopiero uczy warto od razu na divach i z przerzuceniem wszystkich parametrów do CSS.
    Na początku można się zainspirować dobrym gotowcem ale nie kopiować go po wsze czasy :).
    Link
  • #15
    Eufor
    Level 17  
    Jak mówiłem na razie nie mam czasu na przepisanie strony na div'y ale w przyszłości to zrobię :) Że blokada PPM dużo nie daje też wiem ale podoba mi się taki bajerek :) Dzięki za link do tego szablonu teraz w 100% rozumiem zasadę div, z początku nie byłem do końca pewien jak to działa ale po przejrzeniu indexu i styli css załapałem, teraz wydaje się to proste :)
  • #16
    D214d3k
    Level 39  
    Można zassać 3 wersje tu. W licencji jest napisane, że layouty są całkowicie bezpłatne do zastosowań prywatnych i biznesowych. Tu chwalą się nim na devianart. Jak się do niego dorwałem w pierwszych krokach wywaliłem tą szarą przerwą u góry :). W CSS opis samego menu ma ponad 100 linii kodu.
  • #17
    Eufor
    Level 17  
    Z tym że ja jestem osobą którą niesatysfakcjonują 'gotowce' i nawet jeśli wyjdzie mi to gorzej to wole to zrobić sam ;d tak już mam, ale to na pewno mi się przyda :) A może ktoś wie coś na temat skryptów logowania w php, znalazłem takowych całe mnóstwo ale tych na prawdę dobrych nie rozumiem, czy ktoś ma skrypt dzięki któremu po zalogowaniu będzie mi pokazywało treść danej strony lub przekierowywało mnie do jakiejś pod strony? Ale potrzebowałbym dobrego opisu gdyż nie kapuję php :(
  • #18
    D214d3k
    Level 39  
    Ja używam takiego Link. Po zalogowaniu przenosi na login_success i tam umieszczasz tajne treści. Robisz folder o sobie znanej nazwie i po dopisaniu w przeglądarce domena.pl/nazwa_folderu pojawia się panel logowania jeśli formularz jest pliku index.php lub index.htm Jeśli nie musisz dopisać mojadomena.pl/nazwa_folderu/moje_logowanie.htm Jest to jakieś zabezpieczenie chociaż są ogólnodostępne programy które pobierają (prawie) całą zawartość strony.
  • #19
    Eufor
    Level 17  
    Ehh po kilku nie udolnych zastosowaniach skryptów php stwierdziłem ze najlepsze będzie użycie hasła oferowanego przez usługodawcę serwera, jedyny minus to brak okna logowania na stronie tylko w postaci wyskakującego okienka ale przynajmniej wiem że to bezpieczny sposób :)

    A teraz z innej beczki, podobnie jak ze skryptem logowania potrzebuję skryptu dzięki któremu będę mógł wysyłać i pobierać pliki z mojego serwera ale php dalej nie rozumiem :(
  • Helpful post
    #20
    D214d3k
    Level 39  
    A to musi być skrypt? Ja bardzo sobie chwalę wtyczkę FireFTP do FF. Publikacja dzięki temu ustrojstwu jest tak łatwa jak wrzucanie na pendrive. Ale jak chcesz upload to masz. Działa fajnie tylko nadpisuje piki bez zapytania.
  • #21
    Eufor
    Level 17  
    Klient FTP jest ciekawym rozwiązaniem a zwłaszcza ten wbudowany w przeglądarkę jednak jego zalety kończą się kiedy idę np. do szkoły i nie mogę go użyć :( Dlatego potrzebuję skryptu który i tak będzie umieszczony na stronie zabezpieczonej hasłem :) Skrypt który mi podałeś muszę rozgryźć a potem coś o nim powiem ale z góry dzięki :)

    Dodano po 18 [minuty]:

    Dobra nie rozumiem tego, mam podane trzy kody:

    html:
    Code:
     <form enctype="multipart/form-data" action="uploader.php" method="post">
    
     <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
     Wybierz plik do wysłania: <input name="uploadedfile" type="file" /> <br />
     <input type="submit" File" value="Upload />
     </ Form>


    php:
    Code:
     / / Jeżeli plik ma być umieszczone 
    
     $ TARGET_PATH = "uploads /";

     / * Dodaj oryginalną nazwę pliku do naszej ścieżki docelowej. 
     Wynik jest "uploads / filename.extension" * /
     $ TARGET_PATH = $ TARGET_PATH.  basename ($ _FILES ['UploadedFile'] ['name']);


    Code:
     $ TARGET_PATH = "uploads /";
    

     $ TARGET_PATH = $ TARGET_PATH.  basename ($ _FILES ['UploadedFile'] ['name']);

     if (move_uploaded_file ($ _FILES ['UploadedFile'] ['tmp_name'], $ TARGET_PATH)) {
         echo "Plik".  basename ($ _FILES ['UploadedFile'] ['name']).
         "Zostało przesłane";
     } Else {
         echo "Wystąpił błąd podczas wysyłania pliku, spróbuj ponownie!";
     }


    Gdzie mam podać ścieżkę do zapisu pliku, gdzie zapisać te kody php pod jaką nazwą i gdzie podać do nich ścieżkę? I czy jeszcze o czymś powinienem wiedzieć? :)
  • #22
    D214d3k
    Level 39  
    uploads / to jest aktualna ścieżka docelowa musisz zrobić taki katalog w folderze gdzie są te pliki lub zadeklarować inny folder.
    Code:
                $target_path = "../pliki/uploads/";
    
    $target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
    if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path))
    {
    echo "</br>Plik ".  basename( $_FILES['uploadedfile']['name']).
    " został przesłany na serwer.";
    }
    else
    {
     echo "</br> Błąd wysyłania pliku. Spróbuj jeszcze raz";
    }
    U mnie to wygląda tak a teraz bawię się z multiuploaderem który pyta ile chce okienek i wysyła kilka na raz.
  • #23
    Eufor
    Level 17  
    No dobra wgrałem treść html w index treść php umieściłem w pliku uploader.php wszędzie podałem ścieżki no i na stronie z kodem html mam tylko tekst: Wybierz plik do wysłania, ścieżkę do wybranego pliku i przycisk przeglądaj. A gdzie jest przycisk wyślij czy coś w tym stylu?
  • #24
    D214d3k
    Level 39  
    Code: html4strict
    Log in, to see the code

    Brak " po upload?
  • #25
    Eufor
    Level 17  
    Sorry can't allow you access today"

    Tylko tyle się dzieje :(
  • #26
    D214d3k
    Level 39  
    Operator hostingu zabronił bezpośredniego wgrywania plików. Domyślam się, że po to by nie można było wysłać pliku exe.
  • #27
    Eufor
    Level 17  
    Ehh czyli mogę się pożegnać z takimi skryptami?
  • #28
    D214d3k
    Level 39  
    Być może gdyby wyraźnie zaznaczyć, że można przesyłać tylko na przykład zdjęcia serwer nie blokował by.

    Popatrz co możesz wstawić w pola ze znakami zapytania i przetestuj.
    Code: html4strict
    Log in, to see the code


    enctype
    type
  • #29
    Eufor
    Level 17  
    type:
    • image
    dla elementu INPUT pole w postaci grafiki

    enctype:
    image/jpeg: Obraz JPEG JFIF; Zdefiniowany w RFC 2045 i RFC 2046

    Chodzi o takie wartości?
    Bo enctype jest zrozumiałe ale type jest dziwnie wyjaśnione :)
  • #30
    Xamil
    Level 16  
    Eufor wrote:
    Sorry can't allow you access today"

    Tylko tyle się dzieje :(


    A prawa katalogu ustawione dobrze?