Wypełniamy je zgodnie z polecaniami np. w miejscu: "Tu wpis tytuł strony" wpisujemy tytuł strony. Od razu mówię, że warto też wszystkie pliki (obrazki, muzykę, odnośniki itp.) trzymać w jednym folderze. To ułatwia sprawę, kiedy będziemy je dodawać do strony. Nie będzie trzeba podawać całego źródła pliku ale tylko nazwa i rozszerzenie. Naszą stronkę zapisujemy w formacie html (ja zapisałam jako kurs.html). Cała nasza stronka to plik tekstowy i tak wygląda w notatniku po dodaniu treści:
A tak wygląda po wyświetleniu w przeglądarce:
Jak widać, nie ma Polskich znaków. Co zrobić, aby były? Na górze sekcji head trzeba dopisać: <meta charset="utf-8"/> . Ważne też, aby ustawać "koduj UTF-8(bez BOM)" (w części "format").
Ta dam! Już są! :) Ustawiłam już także tło. W sekcji body wpisałam po prostu: bgcolor="yellow". Całość tego znacznika musi wyglądać tak: <body bgcolor="yellow"> .
Wygląda on tak. W części gdzie jest treść strony zmieniłam także rozmiar tekstu. Zrobiłam to za pomocą: <hn></hn>. W miejscu "n" wpisujemy odpowiednią liczbę od 1 - 6. Jedynka jest największa, a szóstka to najmniejsza czcionka. Oczywiście po środku <hn></hn> znajdzie się nasz tekst. Oto efekt:
A jak zrobić tło obrazkowe? To też jest bardzo proste! Robimy to tak, jak z kolorem. Różnica polega na tym, że zamiast "bgcolor" wpisujemy "background" i ścieżka do obrazka. Wygląda to tak: <body background="kwiaty.jpg"> .
Teraz dodamy tytuł i zmienimy kolor tekstu w następujący sposób:
Nad treścią strony napisałam: <h1>ANIME</h1> , ustawiając wielkość czcionki. Potem treść strony "otoczyłam" znacznikiem: <font color="(tu podałam nazwę koloru po angielsku - green)"></font> . Tekst jest pomiędzy tymi dziubkami. Efekt?
(Zapomniałam zrobić screena, jak to wygląda z tytułem. :( )
Teraz zrobimy tak zwane "pudełko", aby tekst był ładnie otoczony. :)
Jak to zrobić? Tak:
#pud
{
background: red;
width: 1000px;
heigth: 2000px;
margin-left: auto;
margin-right: auto;
}
</style>
<div id="pud">
<font color="white"><center><h1>ANIME</h1></center></font>
<font color="green"><h4>Anime (jap. アニメ?) – skrót słowny w języku japońskim, pochodzący od angielskiego słowa "animation", które jest wymawiane po japońsku animēshon. Oznacza ono film animowany, z tym że w Japonii terminem tym określa się wszystkie filmy i seriale animowane, bez względu na kraj ich pochodzenia. Natomiast poza Japonią słowo anime służy do określenia japońskich filmów animowanych oraz stylu japońskiej animacji[1]. Teoria o pochodzeniu terminu anime od francuskiego słowa animé (animowany) lub les dessins animés (animowane obrazy)[2] jest dyskusyjna[1]. Obie formy – pierwotna animēshon i skrócona anime – są używane przez Japończyków[3][4].</h4></font>
</div>
Wszystko znajduje się w sekcji body. Generalnie chodzi o to, że to co chcemy umieścić w "pudełku" otaczymy divami. Każdy z nich ma swoje oznaczenie (id). Cały div wygląda tak: <div id="pud"></div>.
Natomiast sekcja style służy do wystylizowania diva:
background - kolor diva;
width - szerokość (w pikselach);
height - wysokość (w pikselach);
margin - left - margines lewy (auto oznacza, że przeglądarka automatycznie dopasowuje margines)
margin-right - margines lewy;
Na końcu jest domknięty style: </style> .
Dodamy obrazek za pomocą następującego znacznika: <img src="ścieżka dostępu" alt="Tekst alternatywny" /> .
W miejscu "ścieżka dostępu" podajemy ścieżkę dostępu do obrazka. Ustalamy takze szerokość i wysokość:
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="Xpx" height="Xpx"/> .Efekt?
UWAGA!! Pamiętajcie, aby domknąć znaczniki: html </html> , head </head> i body </body> .
Brak komentarzy:
Prześlij komentarz