Znaczniki fizyczne i logiczne czcionki

Podobne dokumenty
Tekst humanistyczny. Tekst naukowy na stronie www

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

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.

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

Kilka dobrych i ważnych rad na początek

Edukacja na odległość

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

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Podstawowe znaczniki języka HTML.

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

Znaczniki języka HTML

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

I. Formatowanie tekstu i wygląd strony

Ćwiczenie 4 - Tabele

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

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

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

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:

e r T i H M r e n L T n

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Kaskadowe arkusze stylów (CSS)

HTML - podstawowe znaczniki

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

Tekst podstawowe znaczniki

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6

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

Najprostszy dokument HTML. <html> <body> Dowolny tekst. </body> </html>

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

Języki programowania wysokiego poziomu. CSS Wskazówki

Krój czcionki można wybrać na wstążce w zakładce Narzędzia główne w grupie przycisków Cz cionka.

Ćwiczenie 9 - CSS i wstawianie CSS

za pomocą: definiujemy:

KATEGORIA OBSZAR WIEDZY

Witryny i aplikacje internetowe

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

Podstawy edycji tekstu

Szczegółowy opis języka HTML5 znajdziemy w specyfikacji, która jest dostępna pod adresem

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

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

Czcionki. Rodzina czcionki [font-family]

Powtórzenie materiału: CSS3 Spis treści

Krok 1: Stylizowanie plakatu

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

CSS - layout strony internetowej

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Zadanie 1. Stosowanie stylów

Sylabus Moduł 4: Grafika menedżerska i prezentacyjna

Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

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

6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU

Projektowanie aplikacji internetowych. CSS w akcji

plansoft.org Zmiany w Plansoft.org

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

HTML podstawowe polecenia

Sylabus Moduł 2: Przetwarzanie tekstów

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

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

Podstawy HTML. Tworzenie stron internetowych. Tomasz Piłka. Ucz się, jak gdybyś miał żyć wiecznie, żyj jak gdybyś miał umrzeć jutro

1.Formatowanie tekstu z użyciem stylów

HTML (HyperText Markup Language)

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

Test z przedmiotu. Witryny i aplikacje internetowe

HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.

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

Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość

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

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Elementy blokowe. To jest tytuł pierwszego stopnia. Katalog Produktów. To jest tytuł drugiego stopnia. To jest tytuł trzeciego stopnia

Wydział Zarządzania AGH. Katedra Informatyki Stosowanej. Podstawy VBA cz. 1. Programowanie komputerowe

CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między

Osadzenie pliku dźwiękowego na stronie www

Ćwiczenie 2 Tekst podstawowe znaczniki.

Programowanie WEB PODSTAWY HTML

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Wprowadzenie do Internetu zajęcia 2

CSS - 2. Właściwości tekstu, czcionek

Technologie Informacyjne

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0

Pierwsza strona internetowa

Tło CSS 3. Gabriela Panuś

1.5. Formatowanie dokumentu

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

Grafika 3D program POV-Ray - 1 -

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)

Ćwiczenie 8 Kolory i znaki specjalne

Ćwiczenie 10 - Selektory

DOKUMENTÓW W EDYTORACH

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.

ZASADY STOSOWANIA LOGO 2 WERSJA PODSTAWOWA 3 WERSJA CZARNA I BIAŁA 4 POLE OCHRONNE 5 MINIMALNA WIELKOŚĆ 6 KOLORY 7 TYPOGRAFIA

Ćwiczenie 5 Multimedia

Zasady tworzenia prezentacji multimedialnych

Formatowanie komórek

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

CEGIELNIA ŁĄKA Książka Znaku wersja skrócona

Tworzenie stron internetowych w kodzie HTML Cz 5

Formatowanie c.d. Wyświetlanie formatowania

Transkrypt:

Znaczniki fizyczne i logiczne czcionki Znaczniki fizyczne - atrybuty Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów. Czcionka pogrubiona <B> </B> To jest czcionka pogrubiona (bold) Czcionka pochylona <I> </I> To jest czcionka pochylona (italic) Czcionka migająca <BLINK> </BLINK> To jest czcionka migająca (blink) - jest to rozszerzenie Netscape'a, nie znajdujące się w specyfikacji HTML 4. Czcionka podkreślona <U> </U> To jest czcionka podkreślona (underline) Czcionka o stałej szerokości znaku <TT> </TT>

To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype) Czcionka przekreślona <STRIKE> </STRIKE> Czcionka przekreślona Alternatywnie jest używane równoważne polecenie <S></S>. Oba polecenia istnieją w specyfikacji HTML 4 i są w dalszym ciągu interpretowane przez przeglądarki, ale autorzy specyfikacji zalecają ich stopniowe zastępowanie przez nowsze konstrukcje języka. Superskrypt (indeks górny) <SUP> </SUP> Czcionka z superskryptem Subskrypt (indeks dolny) <SUB> </SUB> Czcionka z subskryptem Duża czcionka (+1 punkt) <BIG> </BIG> Duża czcionka Mała czcionka (-1 punkt) <SMALL> </SMALL> Mała czcionka

Znaczniki logiczne - style Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego stylu Cytat blokowy <CITE> </CITE> To jest cytat (citation) Definicja <DFN> </DFN> <DFN>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarka interpretuje DFN jako kursywę (IE4) lub nie wyróżnia czcionki (NC4). Na przykład: Internet Explorer 5 to najnowsza przeglądarka firmy Microsoft. Element usunięty Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem <DEL>, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.: <del>dokument dotyczący naszej polityki sprzedaży nie jest już dostępny.</del> Polecenie jest interpretowane przez IE4 i 5. Element wstawiony Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem INS. <ins>to jest nowe opracowanie tematu.</ins> To jest nowe opracowanie tematu Polecenie jest interpretowane przez IE4 i 5. Skrót i akronim Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów.

<ABBR lang="pl">prof.</abbr> <ACRONYM lang="en">www</acronym> Czcionka mocno wyróżniona <STRONG> </STRONG> To jest czcionka mocno wyróżniona (strong) Czcionka wyróżniona (emfaza) <EM> </EM> To jest czcionka wyróżniona (emphasis) Kod (tekst programu) <CODE> </CODE> To jest kod (code) Czcionka wprowadzana z klawiatury <KBD> </KBD> Czcionka z klawiatury Przykład <SAMP> </SAMP> Przykład (sample) Zmienna (słowo kluczowe języka)

<VAR> </VAR> Zmienna (variable) Kolory czcionki Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Poniżej przedstawiamy listę 16 podstawowych barw stosowanych w dokumentach internetowych - są one widoczne w przeglądarkach Netscape Navigator i Microsoft Internet Explorer. Naturalnie możemy w dowolny sposób kombinować barwy z atrybutami i stylami. Składnia: <FONT COLOR="nazwa_koloru"> </FONT> tekst próbny - black tekst próbny - olive tekst próbny - teal tekst próbny - red tekst próbny - blue tekst próbny - maroon tekst próbny - navy tekst próbny - gray tekst próbny - lime tekst próbny - fuchsia tekst próbny - white(tutaj jest kolor white, ale nie widać go ze względu na kolor tła) tekst próbny - green tekst próbny - purple tekst próbny - silver tekst próbny - yellow tekst próbny - aqua Wielkość czcionki Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników <FONT SIZE="xx"> </FONT>. Na przykład: To jest tekst normalny To jest tekst nieco większy.

To jest tekst nieco mniejszy. I znów tekst normalny. A teraz całkiem już spory. I całkiem malutki. Czcionka normalna ma przypisaną wartość 3 (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7. Gdy redagujemy tekst, możemy w dowolnej chwili zmienić wielkość czcionki, przypisując jej wartość bezwzględną z przedziału 1-7, posługując się podanym wyżej parametrem. Możemy jednak także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość. <FONT SIZE="+x"> </FONT> Na przykład: To jest tekst normalny, który teraz powiększamy o 1, a następnie zmniejszamy o 1, po czym powracamy do standardowej wielkości. Czcionka bazowa Czcionka ma domyślną wielkość 3, ale w dowolnym momencie możemy ją zmienić za pomocą polecenia: <BASEFONT SIZE="x"> Oznacza ono, że od tego momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości. Gdy x=5, <BIG> wprowadzi czcionkę o wielkości 6, <SMALL> - o wielkości 4, <FONT SIZE=-3> zmniejszy czcionkę do 2 punktów itd. Uwaga: polecenie BASEFONT jest uznane za przestarzałe i zalecane jest rezygnowanie z niego w dokumentach. Zmiana kroju czcionki Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie <FONT FACE="nazwa_kroju"> </FONT>. Pozwala ono zmienić krój czcionki dla danego dokumentu. Na przykład: To jest tekst, który zapewne widzisz jako Verdana. A teraz zmieniamy go na moment na Arial, przechodzimy do kroju courier, aby powrócić do Verdany. Możemy nawet podać listę krojów, oddzielonych przecinkami, dzięki czemu w przeglądarce odbiorcy zostanie zastosowany jeden z nich (na dobrą sprawę nie wiemy, jakimi dysponuje, więc należy być ostrożnym). Szczególnie warto polecać w takich sytuacjach stosowanie ciągu w rodzaju <FONT FACE="Verdana, Arial, 'Arial CE', Helvetica">, gdyż zabezpieczymy się w ten sposób przed ryzykiem niepoprawnego wyświetlania polskich znaków w Windows 3.1. Uwaga: polecenie FONT FACE jest określane jako przestarzałe i sugeruje się rezygnowanie z niego na rzecz stylów.