HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl"

Janina Andrzejewska
9 lat temu
Przeglądów:

HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1.

Marginesy strony: <body leftmargin= szerokość rightmargin= szerokość topmargin= szerokość bottommargin= szerokość > (leftmargin-lewy, rightmargin-prawy, topmargin-od góry, bottommargin-od dołu,

1 HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze 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: <font face= nazwa czcionki >treść</font> - wielkość czcionki: <font size= x >treść</font> (gdzie x od 1 do 7) - kolor czcionki: <font color= kolor >treść</font> - pogrubienie: <b>tekst</b> - pochylenie: <i> tekst </i> - podkreślenie: <u> tekst </u> - indeks górny: <sup> tekst </sup> - indeks dolny: <sub> tekst </sub> - zmniejszenie o jeden stopień: <small> tekst </small> - zwiększenie o jeden stopień: <big> tekst </big> - przekreślenie: <s> tekst </s> 4. Formatowanie tekstu (akapitu): - justowanie: <p align= justify > tekst </p> - wyśrodkowanie: <p align= center > tekst </p> - do lewej: <p align= left > tekst </p> - do prawej: <p align= right > tekst </p> - nowa linia: <br> - dodatkowy odstęp między wierszami: <p> - &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).

2 Fragment tabeli podającej różne sposoby podawania kolorów w HTML

3 HTML 2 Imię_ nazwisko_html-2.html 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> 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> 3. Tekst migający: <blink>tekst migający</blink> 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 > z dysku J: \w folderze HTML 5. Lista numerowana: <ol> oraz <li> Przykłady: <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.

4 HTML 3 Imię_ nazwisko_html-3.html 1. Grafika na stronie - <img src> <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 2. Bez ramki <img src="tarcza.gif" border="0"> Wyśrodkowanie <p align="center"><img src="tarcza.gif"></p> (inne: left, right) 3. Zmiana rozmiarów grafiki <img src="tarcza.gif" border="0" width="196" height="195"> Gimnazjum nr 1 w Barcinie 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 <p><img src="tarcza.gif" align="top">tekst</p> <p><img src="tarcza.gif" align="middle">tekst</p> <p><img src="tarcza.gif" align="bottom">tekst</p> z dysku J: \w folderze HTML 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=" 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 Ćwiczenie: Korzystając z NOTATNIKA utwórz stronę pod nazwą html-3.htm 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

5 HTML-3 <a href="../html-3/html-3.htm">link do HTML-3</a> HTML-1 <a href="../html-1/html-1.htm">link do HTML-1</a> HTML-2 <a href="../html-2/html-2.htm">link do HTML-2</a>

6 HTML 4 Imię_ nazwisko_html-4.html Tabela - <table> - Wiersz - - Komórka - <td> 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 Dolny i górny margines marginheight= y z dysku J: \w folderze HTML <table border="2" width="100" height="70"> <td> <p align="center">treść1</td> </table> 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"> <td align="center" width="100" valign="top">treść 1</td> <td align="center" width="100" valign="bottom">treść 2</td> </table> <table border="1" width="298" height="90"> <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> <td height="60" align="center">treść4</td> <td height="60" align="center" bgcolor="red">treść5</td> <td height="60" align="center">treść6</td> </table> Ćwiczenie: Korzystając z NOTATNIKA utwórz stronę pod nazwą html-4.htm z następującymi elementami: - kolor strony dowolne, - wstaw tabele wg wzoru, - połącz linkiem ze stroną główną (z 1 ćwiczenia)

Podobne dokumenty

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka > tytuł dokumentu treść dokumentu