HTML - Zaliczaj.pl

Transkrypt

HTML - Zaliczaj.pl

Ćwiczenie 1
Pierwszy dokument HTML:
<html>
<body>
Tekst
</body>
<html>
</head>
<body>
Tekst
</body>
<html>
Ćwiczenie 5
Formatowanie tekstu, wyrównywanie tekstu – atrybut align znacznika p, zmiana kroju,
wielkości i koloru czcionki – znacznik font
Uwaga: wszystkie ćwiczenia zapisujemy pod nazwami nr_cwiczenia.html w utworzonym na
pulpicie folderze o nazwie html.Do pisania stron wykorzystujemy notatnik
Ćwiczenie 2
Uzupełniamy dokument o znacznik DOCTYPE i sekcję nagłówka HEAD:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
</head>
<body>
Tekst
</body>
<html>
Ćwiczenie 3
Polskie znaki. W sekcji nagłówka uzupełniamy znacznik META:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
</head>
<body>
Tekst
</body>
<html>
Ćwiczenie 4
Uzupełniamy nagłówek podając tytuł strony TITLE:
<html>
<head>
<title>Moja strona</title>
<html>
<head>
</head>
<body>
<p align=”center”> <font face=comic_sans_ms size=5 color=blue><b><i>
Tekst</i></b></font> </p>
</body>
<html>
Ćwiczenie 6
Tworzymy odnośnik do innej strony:
<html>
<head>
</head>
<body>
<p align=”center”> <font face=comic_sans_ms size=5 color=blue><b><i> Nauka
tworzenia linków: </i></b></font> </p>
<br><a href="1.html">ćwiczenie 1</a>
<br><a href="http://www.onet.pl">ONET </a>
</body>
<html>
Porównaj wygląd strony bez znaczników <br>
Ćwiczenie 7
Tworzenie listy wypunktowanej i numerowanej.
<html>
<head>
</head>
<body>
<p align=”center”> <font face=comic_sans_ms size=5 color=blue><b><i> Nauka tworzenia
linków: </i></b></font> </p>
<br><a href="http://www.onet.pl">ONET </a>
<br> lista numerowana <br>
<ol type="1">
<li> jeden
<li> dwa
<li> trzy
</ol>
<br> lista numerowana <br>
<ol type="A">
<li> jeden
<li> dwa
<li> trzy
</ol>
<br> lista wypunktowana <br>
<ul type="square">
<li> jeden
<li> dwa
<li> trzy
</ul>
<br> lista wypunktowana <br>
<ul type="circle">
<li> jeden
<li> dwa
<li> trzy
</ul>
</body>
<html>
Ćwiczenie 8
Tło na stronie zamiast koloru:
<body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#CC66CC"
alink="#FF6666" background="file:nazwa">
Ćwiczenie 9
Wstawianie tabeli.
<table border=3>
<tr bgcolor=#00ffff >
<td colspan=3 width=500 align="center"><b>Lista ocen z matematyki</b></td>
</tr>
<tr >
<td bgcolor=yellow align="center">Lp.</td>
<td bgcolor=orange>Nazwisko i imię</td>
<td bgcolor=gold align="center">Ocena</td>
</tr>
<tr>
<td align="center">1.</td>
<td>Nowak Jan</td>
<td align="center">5</td>
</tr>
<tr>
<td>Osa Alicja</td>
<td align="center">4,5</td>
</tr>
<tr>
<td>Kowalski Paweł</td>
<td align="center">3,5</td>
</tr>
</table>
Ćwiczenie 10
Wstawiamy rysunek:
Zmiana kolorów w dokumencie HTML
<IMG SRC="nazwa_pliku">
<body text=brown bgcolor=beige link=green vlink=gray alink=red>
i tworzymy linie:
Porównaj zmiany wyglądu strony po zastosowaniu znacznika:
<body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#CC66CC"
alink="#FF6666">
Zmień kolor strony na zielony, a jej tekst na niebieski.
<hr SIZE=3 WIDTH="100%">
Ćwiczenie 11
Tworzymy formularze:
<form action="mailto:adres pocztowy" method="post"
enctype="text/plain"></b>imię:;<input name="imię" size=50>
<p>nazwisko:;<input name="nazwisko" size=45>
<br>
<br><b>Przycisk opcji:</b>
<br>Jakie znasz języki:
<br><input type="checkbox" name="język" value="angielski">angielski
<br><input type="checkbox" name="język" value="niemiecki">niemiecki
<br><input type="checkbox" name="język" value="rosyjski">rosyjski
<br>
<br><b>Pole wyboru:</b>
<br>Podaj swoj± płeć"
<br><input type="radio" name="plec" value="kobieta" checked>kobieta
<br><input type="radio" name="plec" value="mężczyzna">meżczyzna
<br>
<br><b>Przycisk, któremu można dołożyć skrypt wykonujacy jakieś dzialanie.</b>
<br><button>ten przycisk nic jeszce nie robi</button>
<br>
<br><b>Rozwijana lista:</b>
<br><select name="samochody"><option>Fiat 126p<option>Honda
Civic<option>Rower</select>
<br>
<br><b>Pole tekstowe (komentarz):</b>
<br><textarea name="komentarz" rows=10 cols=50 >WSTEP</textarea>
<br>
<br><b>Wysyłanie formularza i jego czyszczenie</b>
<p><input type="submit" value="wyslij informację">
<p><input type="reset" value="usuń informację">
<p></form>
Ćwiczenie 12
Ramki. Utwórz trzy dokumenty: gora.html, lewy.html i prawy html.
Za pomocą znacznika frame stwórz dokument . Dokument góra zajmuje 25% wysokości
ekranu, a dokument prawy 30 % szerokości okna.
W dokumencie ramki zapisz następujący kod:
<HTML>
<HEAD>
<TITLE>Edytory HTML</TITLE>
</HEAD>
<FRAMESET ROWS="25%,*%">
<FRAME SCROLLING="no" NAME="gora" SRC="gora.html">
<FRAMESET COLS="30%,*%">
<FRAME SCROLLING="auto" NAME="lewy" SRC="lewy.html">
<FRAME SCROLLING="yes" NAME="prawy" SRC="prawy.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>
</HTML>
W dokumencie lewy.html spróbuj stworzyć menu, które ładuje do okna prawego nowy
dokument.
Wykorzystaj znacznik target.
TARGET="_blank"
TARGET="_self"
TARGET="_parent"
TARGET="_top"
W pierwszym przypadku przywoływany dokument zostanie załadowany do nowego, pustego
okna (uruchomi nową kopię przeglądarki.
W drugim przypadku (przypadek domyślny) nowy dokument zamieni w ramce dokument,
z którego dokonujemy skoku.
W trzecim przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii
dla bieżącego dokumentu.
W czwartym przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu
pierwszego w hierarchii naszych skoków, a więc na samą "górę".
Znacznik TARGET=”PRAWY” załaduje nowy dokument do ramki o nazwie prawy.

HTML - Zaliczaj.pl

Transkrypt

Podobne dokumenty

Wprowadzenie do języka html

Potrzebne polecenia

Robert Kubica DRUGI w Monte Carlo - Polak w Northampton

TWORZENIE WITRYNY INTERNETOWEJ

Tagi HTML Przykład Rozwiązaniem zadania powinien być program

Konspekt - Budowa i struktura dokumentu HTML

Podstawy języka HTML

Zapisz do PDF - MissZmyslow.pl

Projekty - Politechnika Wrocławska

Podstawy HTML 2 - Publiczne Gimnazjum w Trzebieszowie