Podstawowe znaczniki języka HTML.



Podobne dokumenty
HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

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

Odsyłacze. Style nagłówkowe

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language)

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

przygotował: mgr Szymon Szewczyk PODSTAWY

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Wprowadzenie do języka HTML

HTML podstawowe polecenia

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.

Edukacja na odległość

Test z przedmiotu. Witryny i aplikacje internetowe

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Programowanie WEB PODSTAWY HTML

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Tworzenie stron internetowych w kodzie HTML Cz 5

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.

I. Wstawianie rysunków

Witryny i aplikacje internetowe

Co to jest html? I.Struktura strony:

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Ćwiczenie 4 - Tabele

KATEGORIA OBSZAR WIEDZY

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Języki programowania wysokiego poziomu. HTML cz.2.

Formatowanie komórek

Tabela z komórkami nagłówkowymi (wyróżnionymi)

Podstawy języka HTML (HyperText Markup Language)

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

I. Menu oparte o listę

Ćwiczenie 1 Deklarowanie metainformacji.

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

Tworzenie stron internetowych w oparciu o język HTML

Wybrane znaczniki HTML

Włącza i wyłącza automatyczny hinting. Pozwala na określenie czy chcemy, aby hinting był stosowany również do większych czcionek.

Konspekt do lekcji elementy informatyki dla klasy 4e Liceum Ogólnokształccego

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

I. Formatowanie tekstu i wygląd strony

CSS. Kaskadowe Arkusze Stylów

p { color: yellow; font-weight:bold; }

Technologie Internetowe

I. Dlaczego standardy kodowania mailingów są istotne?

KATEGORIA OBSZAR WIEDZY

HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8

Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp

2 Podstawy tworzenia stron internetowych

Hyper Text Markup Language

EDYCJA TEKSTU MS WORDPAD

RAMKI. Czym są ramki w dokumencie HTML?

Znaczniki języka HTML

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista

Tworzenie stron internetowych w kodzie HTML Cz 7

Moduł IV Internet Tworzenie stron www

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Tworzenie Stron Internetowych. odcinek 5

TEMAT: Moja pierwsza strona WWW. Grzegorz Mazur

Dokument hipertekstowy

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

HTML cd. Ramki, tabelki

ZNACZNIKI META. Znacznik META

Sylabus Moduł 4: Grafika menedżerska i prezentacyjna

Krótki przegląd własności języka CSS

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Sylabus Moduł 2: Przetwarzanie tekstów

Języki programowania wysokiego poziomu. CSS Wskazówki

1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę

CSS - layout strony internetowej

Specyfikacja mailingu GG Network

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

INTERSTENO 2013Ghent World championship professional word processing

Ćwiczenie 2 Tekst podstawowe znaczniki.

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW

Alfabetyczna lista stylów

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

URL:

Zmiana kolorów tła strony

Tworzenie stron internetowych RAMKI

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

Tutorial. HTML Rozdział: Ramki

OGÓLNE WYMAGANIA DOTYCZĄCE SPOSOBU PRZYGOTOWANIA PRAC DYPLOMOWYCH (wytyczne dla Studentów)

Transkrypt:

Podstawowe znaczniki języka HTML. Struktura dokumentu. <HTML></HTML> Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. <HEAD></HEAD> Sposób użycia Sekcja HEAD zawiera podstawowe informacje o dokumencie. <BODY></BODY> Sposób użycia Sekcja BODY zawiera konkretną treść dokumentu: znaczniki i tekst strony WWW. Atrybuty 1. BGCOLOR = kolor umożliwia ustalenie koloru tła dokumentu. 2. BACKGROUND= nazwa pliku umożliwia ustalenie pliku graficznego, który będzie tłem dokumentu. 3. TEXT= kolor umożliwia ustalenie koloru tekstu dokumentu. 4. LINK= kolor umożliwia ustalenie koloru odsyłaczy. 5. VLINK= kolor umożliwia ustalenie koloru odsyłaczy, które już były użyte. 6. ALINK= kolor umożliwia ustalenie koloru aktywnych odsyłaczy. 7. LEFTMARGIN= x umożliwia ustalenie lewego marginesu strony na x pikseli. (IE). 8. TOPMARGIN= x umożliwia ustalenie górnego marginesu strony na x pikseli (IE). <TITLE></TITLE> Sposób użycia Tekst zawarty między znacznikami jest tytułem strony widocznym w belce tytułowej przeglądarki. używany jest w sekcji HEAD. 1

<META></META> Sposób użycia Szczegółowo opisuje zawartość dokumentu. Atrybuty 1. HTTP-EQUIV= refresh CONTENT= x umożliwia ustalenie odświeżania strony co x sekund. 2. HTTP-EQUIV= refresh CONTENT= x; URL= http://.../strona.html umożliwia ustalenie automatycznego wczytania nowej strony po x sekundach. 3. HTTP-EQUIV= content-type CONTENT= text/html; charset=strona kodowa deklaracja strony kodowej dokumentu np. iso-8859-2, windows- 1250. 4. HTTP-EQUIV= Creation-Date CONTENT= data umożliwia ustalenie informacji o dacie utworzenia dokumentu. 5. NAME= keywords CONTENT=wyrazy kluczowe umożliwia ustalenie informacji o wyrazach kluczowych dokumentu. 6. NAME= description CONTENT= informacje umożliwia ustalenie informacji o zawartości strony. 7. Name= author CONTENT= autor strony umożliwia ustalenie informacji o autorze strony. 8. HTTP-EQUIV= reply-to CONTENT= e-mail umożliwia podanie adresu e-mail osoby odpowiedzialnej za stronę. 9. NAME= generator CONTENT=nazwa generatora umożliwia ustalenie informuji o nazwie generatora dokumentów HTML. <!-- --> Sposób użycia Komentarz niewidoczny w oknie przeglądarki, tylko w kodzie HTML. 2

Formatowanie tekstu. <P></P> Sposób użycia Oznacza blok nowego akapitu. Atrybuty 1. ALIGN=center umożliwia wyśrodkowanie tekstu. 2. ALIGN=right umożliwia wyrównanie tekstu do prawej strony. 3. ALIGN=left umożliwia wyrównanie tekstu do lewej strony. <BR> Sposób użycia Złamanie wiersza bez nowego akapitu. <B></B> Sposób użycia Czcionka pogrubiona. <I></I> Sposób użycia Czcionka pochylona. <BLINK></BLINK> Sposób użycia Czcionka migająca. (NC) <U></U> Sposób użycia Czcionka podkreślona. <STRIKE></STRIKE> Sposób użycia Czcionka przekreślona. 3

<SUP></SUP> Sposób użycia Indeks górny. <SUB></SUB> Sposób użycia Indeks dolny. <FONT></FONT> Sposób użycia Ustala czcionkę. Atrybuty 1. COLOR= kolor umożliwia ustalenie koloru czcionki. 2. SIZE= x umożliwia ustalenie wielkości czcionki od 1 do 7. 3. SIZE= +x umożliwia powiększenie dotychczasowej wielkości czcionki o 1. 4. FACE= nazwa kroju umożliwia ustalenie kroju czcionki np. Arial. <Hn></Hn> Sposób użycia Nagłówek powoduje utworzenie nowego akapitu i wpisany tekst przyjmuje wartość n od 1 do 7. H1 to największy nagłówek, a H7 najmniejszy. Atrybuty 1. ALIGN=center umożliwia wyśrodkowanie nagłówka. 2. ALIGN=right umożliwia wyrównanie nagłówka do prawej strony. 3. ALIGN=left umożliwia wyrównanie nagłówka do lewej strony. 4

<HR> Sposób użycia Linia poziona. Atrybuty 1. NOSHADE umożliwia ustalenie linii pozbawiona cieniowania. 2. SIZE=x umożliwia ustalenie grubości linii na x pikseli. 3. WIDTH=x umożliwia ustalenie długości linii na x pikseli. 4. WIDTH=x% - umożliwia ustalenie długości linii na x% szerokości strony. 5. ALIGN=center umożliwia wyśrodkowanie linii. 6. ALIGN=right umożliwia wyrównanie linii do prawej strony. 7. ALIGN=left umożliwia wyrównanie linii do lewej strony. 8. COLOR= nazwa koloru umożliwia ustalenie koloru linii. <CENTER></CENTER> Sposób użycia Wyśrodkowanie. <RIGHT></RIGHT> Sposób użycia Wyrównanie do prawej strony. <LEFT></LEFT> Sposób użycia Wyrównanie do lewej strony. <JUSTIFY></JUSTIFY> Sposób użycia Wyjustowanie. 5

<UL> <LI> <LI> </UL> Sposób użycia Lista nieuporządkowana wyświetla wykaz nienumerowany. Atrybuty 1. TYPE=disc symbol czarnego krążka. 2. TYPE=circle symbol okręgu (NC). 3. TYPE=square symbol kwadracika. <OL> <LI> <LI> </OL> Sposób użycia Lista uporządkowana sporządza wykaz numerowany. Atrybuty 1. START=x lista zaczyna numerowania od liczby x. 2. TYPE=A numerowanie wg wielkich liter. 3. TYPE=a numerowanie wg małych liter. 4. TYPE-I numerowanie wg liczb rzymskich. 5. TYPE=1 numerowanie wg liczb arabskich. Odsyłacze. <A href= nazwa >tekst świadczący o istnieniu odsyłacza</a> Sposób użycia Tworzy połączenie do pliku po podaniu nazwy pliku lub do strony WWW po podaniu jej adresu. <A href=mailto:e-mail>tekst świadczący o istnieniu odsyłacza</a> Sposób użycia Odsyłacz umożliwiający internaucie wysłanie poczty e-mail ze strony. 6

<A href= #nazwa >tekst świadczący o istnieniu odsyłacza</a> Sposób użycia Odsyłacz umożliwiający internaucie przejście do określonego wcześniej miejsca na stronie WWW nazwa. Miejsce to ustala się przy użyciu znacznika <A NAME= nazwa >. Grafika. <IMG SRC= nazwa pliku > Sposób użycia Umożliwia umieszczenie grafiki na stronie. Atrybuty 1. ALT=tekst umożliwia ustalenie alternatywnego tekstu. 2. ALIGN=center umożliwia wyśrodkowanie grafiki. 3. ALIGN=right umożliwia wyrównanie grafiki do prawej strony. 4. ALIGN=left umożliwia wyrównanie grafiki do lewej strony. 5. ALIGN=texttop umożliwia dorównanie górnej krawędzi grafiki do poprzedzającej go linii tekstu. 6. ALIGN=top umożliwia wyrównanie linii tekstu do górnej krawędzi grafiki. 7. ALIGN=middle umożliwia wyrównanie linii tekstu do środka grafiki. 8. ALIGN=bottom umożliwia wyrównanie linii tekstu do dolnej krawędzi grafiki. 9. BORDER=x umożliwia ustalenie grubości ramki grafiki na x pikseli. 10. WIDTH=x umożliwia ustalenie szerokości grafiki w x pikselach. 11. WIDTH=x% - umożliwia ustalenie szerokości grafiki w x procent. 12. HEIGHT=x umożliwia ustalenie wysokości grafiki w x pikselach. 13. HEIGHT=x% - umożliwia ustalenie wysokości grafiki w x%. 14. HSPACE=x umożliwia ustalenie dodatkowego odstępu wokół grafiki na x pikseli. 15. VSPACE=x umożliwia ustalenie dodatkowego odstępu w pionie wokół grafiki na x pikseli. 7

Tabele. <TABLE></TABLE> Sposób użycia W ramach znaczników TABLE umieszcza się definicje rzędów, komórek, tytuł tabeli, nagłówki wierszy i kolumn oraz dane mające znajdować się w tabeli. Atrybuty 1. BORDER=x umożliwia ustalenie obramowania tabeli o szerokości x. 2. WIDTH=x umożliwia ustalenie szerokości tabeli na x pikseli. 3. WIDTH=x% - umożliwia ustalenie szerokości tabeli na x% szerokości okna przeglądarki. 4. HEIGHT=x umożliwia ustalenie wysokości tabeli na x pikseli. 5. HEIGHT=x% - umożliwia ustalenie wysokości tabeli na x% wysokości okna przeglądarki. 6. BGCOLOR=nazwa koloru umożliwia ustalenie koloru tła tabeli. 7. BORDERCOLOR=nazwa koloru umożliwia ustalenie koloru obramowania tabeli. <TH></TH> Sposób użycia nagłówka używany w ramach znaczników TABLE. Atrybuty 1.ROWSPAN=x umożliwia łączenie x wierszy. 2. COLSPAN=x umożliwia łączenie x kolumn. <TR></TR> Sposób użycia wiersza używany w ramach znaczników TABLE. 8

<TD></TD> Sposób użycia kolumny używany w ramach znaczników TABLE. Atrybuty 1.ROWSPAN=x umożliwia łączenie x wierszy. 2. COLSPAN=x umożliwia łączenie x kolumn. 3. ALIGN=center umożliwia poziome wyśrodkowanie tekstu w komórce. 4.ALIGN=left umożliwia poziome wyrównanie do lewej strony tekstu w komórce. 5. ALIGN= right umożliwia poziome wyrównanie do prawej strony tekstu w komórce. 6. VALIGN=top umożliwia pionowe wyrównanie do górnego brzegu komórki. 7. VALIGN=center umożliwia pionowe wyrównanie do środka komórki. 8. VALIGN=bottom umożliwia pionowe wyrównanie do dolnego brzegu komórki. <CAPTION></CAPTION> Sposób użycia opisu tabeli używany w ramach znaczników TABLE. Atrybuty 1. top umożliwia domyślne umieszczenie opisu nad tabelą. 2. bottom umożliwia umieszczenie opisu pod tabelą. 9