Pobierz HTML tutorial for class 1 i więcej Skrypty w PDF z Informatyka tylko na Docsity!
Podstawowa struktura strony w języku HTML
("ciało strony widoczne w przeglądarce") 1
Po wpisaniu kodu np. w Notatniku. Stronę zapisujemy podając nazwę i po kropce rozszerzenie html – np.: strona_pierwsza.html 3. Przy zapisywaniu strony wybieramy w opcji Zapisz jako typ – opcję: Wszystkie pliki Wynik zapisania i uruchomienia powyższego kodu:
Komentarze
W trakcie pracy nad dużym dokumentem stosuj komentarze. Są one bardzo przydatne, zwłaszcza gdy nad jedną stroną pracuje kilku projektantów. Komentarze bardzo ułatwiają poruszanie się po kodzie strony. Komentarze nie są wyświetlane w oknie przeglądarki.
Do umieszczania komentarza służy znacznik:
Język HTML5 wykorzystuje kilka znaczników, które służą do określenia i wstępnego formatowania większych partii treści witryny.
Do elementów blokowych możemy zaliczyć :
nagłówki, akapity, cytaty, linie poziome, listy oraz znaczniki: ** , , , **
Cechą charakterystyczną każdego ze znaczników blokowych jest to, że tworzy on zupełnie nowy element, który jest oddzielony od pozostałych wyraźną przerwą.
UWAGA:
Znaczniki w języku HTML5 piszemy małymi literami. Znaczniki powinny być kończone znakiem / np.
.
nagłówek
Specyfikacja HTML5 przewiduje możliwość utworzenia nagłówków. Element ten jest wykorzystywany m.in. do wygodnego dzielenia większej partii tekstu na mniejsze części. Podczas tworzenia strony mamy do dyspozycji sześć zróżnicowanych rozmiarów nagłówków.
Przykład : nagłówek stopnia 1 - 1 nagłówek stopnia 2 nagłówek stopnia 3 nagłówek stopnia 4 nagłówek stopnia 5 nagłówek stopnia 6 - 2
Wynik zapisania i uruchomienia powyższego kodu:
Podstawowe znaczniki języka HTML
Elementy blokowe
1
2
linia pozioma - specyfikacja języka HTML5 przewiduje możliwość umieszczania na
stronie poziomej linii, która może służyć jako pseudograficzny przerywnik dla większej partii publikowanej treści. - 5
Przykład :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec errat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec errat
Wynik zapisania i uruchomienia powyższego kodu:
Zachowanie pierwotnego formatowania
- znacznik
- tworzy nowy blok i zachowuje ręcznie nadane
formatowanie. Bardzo przydatny przy prezentowaniu np. fragmentu kodu na stronie WWW.
Przykład - chcę aby na stronie został wyświetlony kod programu dokładnie w taki sposób jak został zapisany (sformatowany):
n=int(input("wpisz liczbę całkowitą ")) d= c = d <= n/ ld = 0
for i in range(c): if (n % d == 0): ld = ld + 1 print("Liczba dzielnikow wlasciwych wiekszych od 1: ") print( ld,"\n")
5
Wynik zapisania i uruchomienia powyższego kodu:
Elementy – i
- jedną z nowości wprowadzonych w języku HTML5 jest możliwość wydzielenia grupy elementów stanowiących logiczną całość. Na przykład chcę przedstawić tabelę wraz z podpisem lub przykładowy listing kodu wraz z podpisem. - 6
Do łączenia kilku elementów w logiczną całość używamy znacznika , który możemy uzupełnić znacznikiem , odpowiadającym za podpis danej grupy elementów
Przykład:
Przykład użycia znaczników umożliwiających wydzielanie grupy elementów
Tabela 1. Przykład wykorzystania znacznika <pre>
=================
| Prosta tabela |
| 1 | 2 | | 3 | 4 | | 5 | 6 | ================
Jakiś dowolny inny tekst
Wynik zapisania i uruchomienia powyższego kodu:
6
Lista definicji – znacznik
Konstrukcja listy:
Pierwsze słowo definiowane Opis pierwszego słowa definiowanego Drugie słowo definiowane Opis drugiego słowa definiowanego
Wynik zapisania i uruchomienia powyższego kodu:
Grupowanie znaczników – znacznik
Znacznik jest odpowiedzialny za grupowanie znaczników. Służy do tworzenia warstw w dokumencie WWW. Umożliwia stosownie styli CSS na większej liczbie znaczników. Może być stosowany z innymi elementami np. tabelami i listami. Może pełnić również funkcje strukturalne podobnie jak znaczniki strukturalne wprowadzone przez HTML5.
Przykład:
Pierwsze blok tekstu
Drugi blok tekstu
Nagłówek stopnia pierwszego
Wynik zapisania i uruchomienia powyższego kodu:
Elementy wstawiane to znaczniki, które wykorzystujemy podczas pracy nad małymi fragmentami większych bloków i za ich pomocą nadajemy semantyczne znaczenie. Na przykład jeżeli chcemy wyróżnić jedno słowo wchodzące w skład całego akapitu, to wtedy możemy mówić o elemencie wstawianym.
Cechą charakterystyczną każdego z elementów wstawianych jest to, że nie tworzy on nowej części strony, która jest oddzielona od pozostałych wyraźną przerwą.
Oto niektóre (nie wszystkie) z wybranych elementów wstawianych.
Znacznik
- koniec akapitu i przejście do nowej linii (nazywany czasami znacznikiem
złamania linii) - 5
Przykład :
To jest przykładowy tekst stanowiący akapit numer 1.
To jest przykładowy tekst stanowiący akapit numer 2.
Wynik zapisania i uruchomienia powyższego kodu:
Znacznik - wyświetlanie akcentowanego fragmentu tekstu w postaci
czcionki pochyłej.
Przykład :
To jest element wyróżniony czcionką pochyłą.
Wynik zapisania i uruchomienia powyższego kodu:
5
Podstawowe znaczniki języka HTML
Elementy wstawiane
Znacznik - służy do zaznaczenia odwołania w tekście do
tytułu konkretnej pracy (książki, artykułu , filmu, itd.). Zaznaczony fragment tekstu zostanie wyświetlony w postaci kursywy.
Przykład :
To jest wyróżniony tytuł książki: HTML5. Podręcznik programisty.
Wynik zapisania i uruchomienia powyższego kodu:
Znacznik - fragment tekstu zostanie wyświetlony w postaci kursywy.
Przykład :
To jest wyróżniony tytuł książki: HTML5. Podręcznik programisty.
Wynik zapisania i uruchomienia powyższego kodu:
Znacznik - służy do oznaczania cytatu umieszczonego w większym bloku tekstu –
np. w akapicie. Tekst oznaczony tym znacznikiem będzie wyświetlony w cudzysłowie.
Przykład :
To jest tekst wyróżniony cudzysłowem.
Wynik zapisania i uruchomienia powyższego kodu:
Znacznik - index górny
Przykład :
To jest zmienna równa x2.
Wynik zapisania i uruchomienia powyższego kodu:
Znacznik - index dolny
Przykład :
To jest zmienna x2.
Wynik zapisania i uruchomienia powyższego kodu:
Znacznik - przeznaczony do oznaczania kodu
programistycznego na stronie. Oznaczony kod ma domyślnie ustawioną czcionkę o stałej szerokości.
Przykład :
Listing 1
ul.lista { display: list-item; list-style-type: none; color: red; margin-left:4em; text-indent: -1em; }
Znacznik - służy do umieszczania tekstu przekreślonego
Przykład :
To jest tytuł książki skreślonej z wykazu: HTML5. Podręcznik programisty.
Wynik zapisania i uruchomienia powyższego kodu:
