Scribd Logo
Upload

Welcome to Scribd!

  • Podstawy HTML

    Uploaded by

    marcin
    3 views2 pages
    POdstawy html notatki

    Original Title

    podstawy-html

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    POdstawy html notatki

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views2 pages

    Podstawy HTML

    Uploaded by

    marcin
    POdstawy html notatki

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Lekcja 1. Podstawy HTML.

    W folderze klasy utworzyć podfolder i nazwać go HTML.


    Wszystkie nazwy będziemy pisać małymi znakami, nie będziemy stosować polskich liter, a zamiast
    spacji używać będziemy „_”. Długość nazw nie będzie przekraczać 8 znaków + 3 znaki rozszerzenia.
    Otworzyć program notatnik.

    Ćwiczenie 1
    Strony internetowe możemy tworzyć za pomocą zawansowanych edytorów, ale znając kody HTML
    wystarczy zwykły notatnik.
    Otworzyć notatnik i zapisać pusty dokument w folderze HTML, nadać mu nazwę: index.html (niektóre
    przeglądarki akceptują rozszerzenie – htm).
    Zamknąć plik i otworzyć folder HTML, odszukać w nim zapisany plik i otworzyć go. Otworzy się pusta
    strona w przeglądarce Internet Explorer,
    Przejść z powrotem do edycji źródła, w tym celu w oknie dokumentu kliknąć prawym przyciskiem
    myszy i z menu wybrać opcję Pokaż źródło, lub wybrać na pasku menu Widok, a następnie Źródło.

    Ćwiczenie 2
    Napisać: swoje imię i nazwisko, nacisnąć Enter, informacje o klasie, nacisnąć Enter nazwę swojej
    szkoły.
    Zapisać plik i odświeżyć stronę www. Widoczne są wszystkie wpisane informacje, ale nie w trzech
    wierszach.
    W źródle ustawić kursor zaraz za nazwiskiem i wpisać <BR> (polecenia HTML można pisać wielkimi
    lub małymi literami). Za nazwą klasy umieść kod <BR> i za nazwą szkoły również umieść kod <BR>.
    Zapisać plik i odświeżyć stronę www. Napis został połamany na 3 wiersze.

    Ćwiczenie 3
    Na końcu źródła wpisać dyrektywę rysującą linię poziomą <HR>.
    Zapisać plik i odświeżyć stronę www.

    Ćwiczenie 4
    W źródle, poniżej dyrektywy <HR> wpisać dyrektywę początku animowanego teksu <MARQUEE>,
    poniżej wpisać tekst, który ma pojawić się na stronie www, np. To jest moja pierwsza strona
    internetowa,
    poniżej wpisać dyrektywę końca animowanego tekstu </MARQUEE>.
    Zapisać plik i odświeżyć stronę www. .

    Ćwiczenie 5
    Na początku źródła wstawić polecenie określające kolor czcionki <FONT Color=”blue”>, za nazwą
    klasy wpisać dyrektywę końca formatu czcionki - </FONT>. Zapisać plik i odświeżyć stronę www.
    Dwa pierwsze wiersze napisane są niebieską czcionką, nazwa szkoły jest w kolorze domyślnym –
    czarnym.

    Ćwiczenie 6
    Ustawić kursor na początku źródła i nacisnąć 4 razy Enter. W czterech pustych wierszach umieścić
    początek struktury dokumentu HTML.
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    Umieścić kursor poniżej ostatniego wpisu w źródle i napisać koniec struktury dokumentu.
    </BODY>
    </HTML>
    Początek i koniec dokumentu – oznaczamy znacznikami <HTML> i </HTML>
    Nagłówek zawierający informacje o dokumencie (np. tytuł, autor, słowa kluczowe) – oznaczamy
    znacznikami <HEAD> i </HEAD>
    Treść dokumentu – zawarta jest pomiędzy znacznikami <BODY> i </BODY>. Aktualnie są tam
    wszystkie do tej pory wpisane polecenia.
    Zapisać plik i odświeżyć stronę www. Nie widać żadnej różnicy, ale jeżeli nie wprowadzimy struktury
    strona może być źle wyświetlana w Internecie.

    Ćwiczenie 7
    Ustawić kursor za pierwszym, wcisnąć spację i dopisać BgColor=”red” (otrzymamy <BODY
    BgColor=”red”>
    Zapisać plik i odświeżyć stronę www. Kolor tła stworzonej strony został zmieniony z domyślnego
    (białego) na czerwony.

    Ćwiczenie 8
    Na stronie www.liceumtwarda.edu.pl/it poszukać pliku „baby1.jpg”. Skopiować go i wkleić do foldera
    HTML.

    Ćwiczenie 9
    W wierszu powyżej końcowego polecenia </BODY> wpisać <IMG SRC=”baby1.jpg”>,
    Zapisać plik i odświeżyć stronę www. Został umieszczony obrazek. Jeżeli jest on zbyt wysoki pojawi
    się pasek przewijania z prawej strony, a jeżeli jest zbyt szeroki pojawi się pasek przewijania na dole
    okna. Wpisując odpowiednie parametry można modyfikować rozmiary obrazka. Jeżeli plik graficzny
    znajduje się w innym folderze niż strona www w poleceniu <IMG SRC=”baby1.jpg”> nazwę pliku
    należy poprzedzić ścieżką dostępu do tego pliku.

    Ćwiczenie 10
    W źródle zmienić nazwę pliku graficznego z baby1.jpg na baby2.jpg.
    Zapisać plik i odświeżyć stronę www. Zamiast obrazka widać prostokąt ze znakiem x. Efekt taki
    zobaczymy zawsze, gdy przeglądarka nie może znaleźć pliku graficznego (np.: jest zła nazwa lub
    ścieżka dostępu do pliku).

    Ćwiczenie 11
    W źródle zmienić dyrektywę <BODY BgColor=”red”> na <BODY Background=”baby1.jpg”>.
    Zapisać plik i odświeżyć stronę www. Tło strony zostało zmienione z czerwonego na obrazek. Jeżeli
    obrazek jest zbyt duży zostanie przycięty, a jeśli jest zbyt mały zostanie nim „zatapetowane” całe tło
    (podobnie jak tapeta pulpitu w ustawieniu sąsiadująco).

    Ćwiczenie 12 - Samodzielnie
    Wykorzystując wcześniejsze ćwiczenia dokonaj własnych modyfikacji strony.
    Przykładowo:
     wstaw inny obrazek,
     zmień kolor czcionki,
     zmień tło na inny kolor lub obrazek,
     wstaw obrazek pomiędzy kod <MARQUEE></MARQUEE>.

    You might also like