Skocz do zawartości

[Poradniki] Podstawy HTML dla zielonych


Akaexus

Rekomendowane odpowiedzi

539u7k.jpg

HTML jest to język wykorzystywany do tworzenia stron internetowych. Osobom które dopiero zaczynają interesować się ów językiem na początku może wydawać się ż jest on trudny, ale wcale tak nie jest. HTML jest językiem łatwym do zapamiętania i szybkim do nauczenia. Znając podstawy można już zrobić całkiem fajną stronkę.

2evsot4.jpg

  •  
  • Przede wszystkim chęci nauczenia się go, albowiem trudno jest zrozumieć coś czego się nie chce.
  • Trochę czasu
  • Edytor tekstowy-Może być nawet podstawowy Notatnik, który każdy posiada, ale na dłuższą metę polecał bym pobrać jakiś program do pisania stron internetowych np."KED"
  • Konto na jakimś hostingu stron internetowych np. cba.pl


    122i2b6.jpg

    Pogrubiony -
    Pochylony -
    Podkreślony -
    Przekreślony - <STRIKE> </STRIKE>
    Migający - <BLINK> </BLINK>
    O stałej szerokości znaku - <TT> </TT>


    Wyróżniony - <EM> </EM>
    Mocno wyróżniony - <STRONG> </STRONG>
    Cytat - <CITE> </CITE>
    Definicja - <DFN> </DFN>
    Kod - <CODE> </CODE>
    Przykład - <SAMP> </SAMP>
    Tekst wprowadzany z klawiatury - <KBD> </KBD>
    Zmienna programu - <VAR> </VAR>
    Skrót - <ABBR> </ABBR>
    Akronim - <ACRONYM> </ACRONYM>
    Cytat - <Q> </Q>
    Cytat blokowy - <BLOCKQOUTEQ> </BLOCKQOUTEQ>

    Duża czcionka - <BIG> </BIG>
    Mała czcionka - <SMALL> </SMALL>

    Tekst sformatowany

    - <PRE> </PRE>
    Indeks górny - <SUP> </SUP>
    Indeks dolny - <SUB> </SUB>

    Copyright - ?�??
    Twarda spacja -
    Przejście do nowej linii - <br />
    Komentarz (najczęściej w wyglądach css) - <!-- -->
    Rozmiary akapitu:
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

    Akapit - <p> </p>
    Wcięcie tekstu - <blockquote> </blockquote>
    Numerowanie:
    <ol>
    <li>pierwszy element listy</li>
    <li>drugi element listy</li>
    </ol>

    Wypunktowanie:
    <ul>
    <li>pierwszy element listy</li>
    <li>drugi element listy</li>
    </ul>

    Justowanie - <div align="justify"></div>
    Nowy wiersz tabeli - <tr> </tr>
    Kolumna tabeli - <th> </th>
    Pole plik - <input type="file" name=" value=" /> (do hostingów)

    2621qox.jpg

    Podstawową informacją jaką powinniście wiedzieć są słowaCo jest otwarte w HTML'u musi być zamknięte w HTML'u". Tak więc idąc tymi słowami cokolwiek zostaje otwarte musi być zamknięte, czyli np. Otwarcie pogrubionej czcionki- -Zamknięcie pogrubionej czcionki, przez dodanie/".

    Szkieletem każdej strony internetowej jest poniższy wzór bez którego nie da się zrobić strony:

    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-2"
    http-equiv="content-type">
    <title></title>
    </head>
    <body>
    <br>
    </body>
    </html>

    Wyjaśnienie struktury:

    <html>-Otwarcie HTML
    <head>-Otwarcie HEAD
    <meta content="text/html; charset=ISO-8859-2"
    http-equiv="content-type">
    - Kodowanie tekstu dzięki któremu wyświetlać się będą polskie litery.
    <title></title>- Tytuł naszej strony
    </head>-Zamknięcie head
    <body> -Otwarcie body (Po body piszemy tekst itd.)
    <br> -Odstęp
    </body>- Zamknięce body
    </html> - Zamknięcie HTML, czyli całej strony

    Dla leniwych mam gotowiec szkieletu podstawowej strony internetowej(Wklejamy podbody"):

    <table width="100%" cellspacing="0" cellpadding="5">
    <tr>
    <td colspan="2" bgcolor="#5ba0d5">
    <table width="100%" cellspacing="0" cellpadding="5">
    <tr>
    <td align="center" valign="middle" bgcolor="white"> <br><b>LOGO</b><br /> </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td width="100" valign="top" bgcolor="#5ba0d5">
    <table width="100%" cellspacing="0" cellpadding="5">
    <tr>
    <td bgcolor="white"><b>MENU</b><br />- Link 1<br />- Link 2<br />- Link 3</td>
    </tr>
    </table>
    <br />
    <table width="100%" cellspacing="0" cellpadding="5">
    <tr>
    <td bgcolor="white"><b>MENU 2</b><br />- Link</td>
    </tr>
    </table>
    </td>
    <td valign="top" bgcolor="#5ba0d5">
    <table width="100%" cellspacing="0" cellpadding="5">
    <tr>
    <td height="100%" valign="top" bgcolor="white"><b>TREŚĆ STRONY</b><br /><br />Jakis tekst...</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td colspan="2" align="center" bgcolor="#5ba0d5">
    <table width="100%" cellspacing="0" cellpadding="3">
    <tr>
    <td align="center" valign="middle" bgcolor="white"><b>STOPKA</b></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>



    cooltext833267512.png

    Dobrze, przejdzmy teraz do rzeczy, czyli do tworzenia strony internetowej. Aby było łatwiej zrozumieć każdą czynność wypiszę w punktach.
    1.  
    2. Otwieramy swój edytor tekstowy np. notatnik
    3. Wpisujemy po kolei podstawę strony, czyli:


    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-2"
    http-equiv="content-type">
    <title></title>
    </head>
    <body>
    <br>
    </body>
    </html>
    3. Wpisujemy tytuł swojej strony np: <title> Pierwsza strona </title>
    4. Teraz za body wpisujemy to co ma być w stronie za pomocą kodów html np. <h1 style="text-align: center;">Test</h1>
    , czyli wyśrodkowany nagłówek. Ja proponuję wstawić mój szkielet strony umieszczony w spoilerze.
    5. Gotową stronkę zapisujemy jako index z rozszerzeniem .html (index.html)
    6. Zakładamy konto na darmowym hostingu www.cba.pl
    7. Logujemy się na utworzone przez siebie konto i wchodźimy w Konta FTP-Menadżr plików. Wpisujemy nazwę użytkownika FTP przysłaną na adres e-mail po zarejestrowaniu się,a w miejsce hasła wpisujemy swoje hasło na cba
    8. Klikamy Przeglądaj, po czym Przyślij, a następnie szukamy swojego pliku index. Zaznaczamy go i klikamy Dodaj, aż w końcu klikamy na zielonyptaszek" (wyślij).
    9. W przeglądarkę wpisujemy swój adres strony internetowej i podziwiamy naszą stronę.
    10. Gotowe!

    Poradnik został stworzony dla osób które nie mają zielonego pojęcia o HTML , oraz o tworzeniu stron internetowych, a chciały by się nauczyć.

    Poradnik by Riddle. Zakaz kopiowania.

    //By Ś P John Riddle




Post autorstwa skopiowany ze starego forum.

  • Like 1
Odnośnik do komentarza

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...