HTML – 1 rama strony.txt

Transkrypt

Gimnazjum nr 1 w Barcinie
gimbarcin.pl
HTML – 1
UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia.
Pamiętaj plik musi mieć rozszeżenie .html, a w nazwie twoje imię i nazwisko– np. dzisiejszy plik to:
Imię_ nazwisko_html-1.html
Do każdego ćwiczenia
możesz wykorzystać plik
rama strony.txt
z dysku J: w folderze HTML
edytuj go i zapisz pod nową
nazwą dla danego ćwiczenia
z rozszerzeniem html
1. Tło strony
- Jednolity kolor: <body bgcolor="kolor tła" >
lub <body bgcolor="#rrggbb" >
2. Marginesy strony:
<body leftmargin=”szerokość” rightmargin=”szerokość”
topmargin=”szerokość” bottommargin=”szerokość”>
(leftmargin-lewy, rightmargin-prawy, topmargin-od góry, bottommargin-od dołu,
wymiary w pikselach)
3. Formatowanie czcionki:
- krój czcionki: treść
- wielkość czcionki: treść (gdzie x od 1 do 7)
- kolor czcionki: treść
- pogrubienie: tekst
- pochylenie: tekst 
- podkreślenie: tekst 
- indeks górny: tekst 
- indeks dolny: tekst 
- zmniejszenie o jeden stopień: tekst 
- zwiększenie o jeden stopień: <big> tekst </big>
- przekreślenie: <s> tekst </s>
4. Formatowanie tekstu (akapitu):
- justowanie: tekst 
- wyśrodkowanie: tekst 
- do lewej: tekst 
- do prawej: tekst 
- nowa linia: 
- dodatkowy odstęp między wierszami: 
- &nbsp- dodatkowa spacja
Ćwiczenie: Korzystając z NOTATNIKA utwórz stronę pod nazwą HTML-1 z następującymi elementami:
- umieść nazwę strony w sekcji <TITLE> twoje imię i nazwisko</TITLE>
- ustaw kolor strony aqua,
- ustaw marginesy po 50 pikseli,
- wpisz tekst „ćwiczenie – 1 – HTML” i ustaw parametry: kolor czerwony, wielkość – 3,
- umieść „Imię i nazwisko” z parametrami (krój: calibri, kolor niebieski, wielkość – 7,pogrubiona, środek strony),
- umieść tekst „Gimnazjum nr 1” z parametrami: (krój Arial, czerwony, wielkość – 6, pochylona, środek strony),
- umieść tekst „w Barcinie” z parametrami :(kolor zielony, wielkość – 5, podkreślona, środek strony),
- umieść dzisiejszą datę z parametrami : (czarny, po prawej, wielkość – 3).
gimbarcin.pl
Fragment tabeli podającej różne sposoby podawania kolorów w HTML
gimbarcin.pl
HTML – 2
1. Tło strony z obrazka <body background=”uwaga-1”>
Uwaga-1: w to miejsce wstaw nazwę pliku z rozszerzeniem, jeżeli obrazek znajduje się
w innym miejscu podaj także ścieżkę dostępu.
Np. <body background=”foto.jpg”> lub <body background=”h:\www\foto.jpg”>
2. Animacja tekstu: <marquee>tekst< /marquee>
<marquee behavior=”typ”>tekst< /marquee>
rama strony.txt
z dysku J: \w folderze HTML
Typ: scroll – od prawej do lewej, alternate – od prawej do lewej odbija i powraca, slide - od prawej do lewej tylko raz.
<marquee direction=”kierunek”>tekst< /marquee> - Left – w lewo, right – w prawo, up – w górę, down – w dół
<marquee bgcolor=”kolor”>tekst< /marquee> - kolor paska pod przesuwającym się tekście
<marquee width=”x” height=”y”>tekst< /marquee> lub <marquee width=”x%” height=”y%”>tekst<
/marquee>
x- szerokość w pikselach, y – wysokość, x%,y% szerokość i wysokość w % jaką zajmować będzie pasek.
<marquee loop=”k”>tekst< /marquee> - k-ilość powtórzeń
<marquee scrollamount=”x”>tekst< /marquee> - x-szybkość przesuwania tekstu
Przykład:
<marquee scrollamount=”x” width=”x” height=”y” direction=”kierunek” bgcolor=”kolor” behavior=”typ” >tekst<
/marquee>
<blink>tekst migający</blink>
5. Lista numerowana: <ol> oraz <li>
3.
Tekst migający: <blink>tekst migający</blink>
Przykłady:
4. Kreska pozioma: <hr>
<hr width =”50%”> - linia na połowę ekranu
<hr width =”250”> - o długości 250 pikseli
<hr align=”left”> do lewej strony
<hr align=”center”> do środka strony
<hr align=”right”> do prawej strony
<hr noshade> bez cienia
<hr size=”20”> o grubości 20 pikseli
<hr color=”kolor x”> o kolorze x
Przykład: <hr width =”50%” size=”20” color=”red”>
<ol>
<li>pierwszy element listy</li>
<li> drugi element listy</li>
<li> trzeci element listy</li>
<ol type=”typ”>
<li>pierwszy element podlisty</li>
<li> drugi element podlisty </li>
<li> trzeci element podlisty </li>
</ol></ol>
- type=”A” – wystąpią litery A,B,C – stosujemy
wewnątrz znacznika <ol>
- type=”a” – wystąpią litery a,b,c
- type=”I” – wystąpią liczby rzymskie I,II,III
Ćwiczenie: Korzystając z NOTATNIKA utwórz stronę pod nazwą html-2.htm
z następującymi elementami:
- nazwa strony <TITLE>- twoje imię i nazwisko
- kolor strony – własne tło wykonane w programie Paint,
- marginesy po 50 pikseli,
- umieść tekst „ćwiczenie – 2 – HTML” (czarny, wielkość – 3, po lewej, pogrubiony),
- pierwsza linia pozioma bez dodatkowych parametrów,
- umieść tekst „Imię i nazwisko” (niebieski, wielkość – 24, ARIAL, pogrubiona, środek strony, animacja w
prawo),
-druga linia o grubości 5 pikseli, czerwona, na połowę ekranu,
- umieść tekst – „Gimnazjum nr 1 w Barcinie” – wyśrodkowany, pogrubiony, o wielkości 5,
- umieść tekst „klasa – nr” (wielkość 5, animacja w lewo na pasku zielonym),
-trzecia linia o grubości 10 pikseli, niebieska, o długości 850 pikseli,
- lista numerowana – trzy dowolne imiona – numeracja typ: 1, 2, 3,
-podlista numerowana – trzy dowolne imiona – numeracja typ: A, B, C,
- umieść tekst „Gimnazjum nr 1 w Barcinie” (wielkość – 28, poruszający się),
- ostatnia linia pozioma bez dodatkowych parametrów.
gimbarcin.pl
HTML – 3
1. Grafika na stronie - <img
src>
rama strony.txt
<img src=”ścieżka dostępu i nazwa pliku”> lub
<img src="tarcza.gif"> bez ścieżki dostępu – plik graficzny
znajduje się w tym samym folderze co strona
<img src="tarcza.gif" border="0">
<img src="tarcza.gif">
2. Bez ramki
Wyśrodkowanie
(inne: left, right)
3. Zmiana rozmiarów grafiki
<img src="tarcza.gif" border="0" width="196" height="195">
Wielkości podajemy w pikselach
4. Etykieta rysunku (pojawia się po najechaniu myszką)
<img src="tarcza.gif" border="0" width="196" height="195" title=opis rysunku>
5.
Tekst alternatywny – gdy obrazek się nie wyświetli
<img src="tarcza.gif" alt=”tekst alternatywny”>
6. Wzajemne położenie tekstu i obrazu
<img src="tarcza.gif" align="top">tekst
<img src="tarcza.gif" align="middle">tekst
<img src="tarcza.gif" align="bottom">tekst
7. Odsyłacze -link do innej podstrony - <a href>
- tekst jako odsyłacz do strony WWW:
<a href=”adres strony”>opis słowny</a>
<a href="http://www.gimbarcin.pl">strona gimnazjum</a>
<a href="wp.pl">wp.pl</a>
<a href=”adres strony”> <img src="nazwa pliku></a> - link do strony na
obrazku
<a href=”mailto:adres poczty> opis słowny</a> - odsyłacz do poczty
z następującymi
elementami:
- kolor strony – własne tło wykonane w programie Paint,
- wstaw linie,
- wstaw logo szkoły z pojawiającym się opisem (tarcza) po najechaniu myszką na obrazek
- wstaw grafikę i opis wg wzoru,
- wstaw link do pierwszej strony – html-1.htm
- na stronie html-1.htm wstaw link do strony html-2.htm i html-3.htm
- na stronie html-2.htm wstaw link do pierwszej strony – html-1.htm i html-3.htm
- na stronie html-3.htm wstaw link do pierwszej strony – html-1.htm i html-2.htm
gimbarcin.pl
HTML-3
<a href="../HTML-3/HTML-3.htm">LINK do HTML-3</a>
HTML-1
HTML-2
gimbarcin.pl
HTML – 4
-
Tabela - <table>
Wiersz - <tr>
Komórka - <td>
rama strony.txt
Parametry pomocnicze:
Grubość obramowania – border=”x”
Położenie obiektu w komórce – valign=”middle”
Middle – środek, top – u góry, bottom – na dole
- align=”center” - położenie obiektu w komórce (left, right)
- wysokość komórki – height=”y”
- szerokość komórki – width=”x”
- kolor wypełnienia – bgcolor=”kolor”
- kolor obramowania – bordercolor=”kolor”
Lewy i prawy margines – marginwidth=”x”
<table border="2" width="100" height="70">
<tr>
<td>
treść1</td>
</tr>
</table>
Dolny i górny margines – marginheight=”y”
Poziome łączenie komórek - <td colspan="x"> gdzie "x" oznacza liczbę komórek do połączenia w poziomie
<table border="1" width="23%" height="76">
<tr>
<td align="center" width="100" valign="top">treść 1</td>
<td align="center" width="100" valign="bottom">treść 2</td>
</tr>
</table>
<table border="1" width="298" height="90">
<tr>
<td height="60" align="center" bgcolor="blue">treść1</td>
<td height="60" align="center">treść2</td>
<td height="60" align="center" bgcolor="green">treść3</td>
</tr>
<tr>
<td height="60" align="center" bgcolor="red">treść5</td>
</tr>
</table>
- kolor strony – dowolne,
- wstaw tabele wg wzoru,
- połącz linkiem ze stroną
główną (z 1 ćwiczenia)
z następującymi elementami:

HTML – 1 rama strony.txt

Transkrypt

Podobne dokumenty

Śmiertelny wypadek na trasie Głogówek - Rzepcze

Kędzierzyn-Koźle: Młodzież w roli dziennikarzy śledczych

Kaczmarkowie mistrzami plaży. ZDJĘCIA

Depresja nastolatków to zjawisko coraz częstsze

tytuł dokumentu <meta http

Kurs języka migowego w Nysie

„Autor widmo” w kinie pod chmurką

Zostań potencjalnym dawcą szpiku i uratuj komuś życie!

Najmłodszy mieszkaniec zoo