HTML5 - informacje. Źródło. Struktura. Elementy. Atrybuty SVG.
|
|
|
- Wiktor Madej
- 6 lat temu
- Przeglądów:
Transkrypt
1 HTML5 - informacje Źródło Struktura <!doctype html> <html> <head> <meta charset="utf-8"> <title>example document</title> </head> <body> <p>example paragraph</p> </body> </html> Elementy <header> - nagłówek strony, obejmuje wewnątrz np. nawigację, <h1> (jeśli h1 jest tytułem strony, a nie tytułem rozdziału), <p>, element odnośników do innych podstron <nav> - wszystko, co będzie się powtarzać na każdej stronie serwisu; <footer> - stopka, czyli informacje o prawach autorskich, wersji, data, itp.; może zawierać <p> - wszystko, co będzie powtarzać się na każdej innej stronie serwisu; <main> - oznacza semantyczną sekcję, która jest główną częścią strony, głównym wątkiem, tzn. zawiera elementy, które nie powtarzają się na innych stronach w serwisie (czyli nie obejmuje nagłówka, stopki i menu); na każdej stronie istnieje tylko jedna sekcja <main> i nie może być wewnątrz <article>, <aside>, <nav>, <footer>, <header>. <article> - obejmuje np. cały artykuł w gazecie; artykuł podzielony jest na rozdziały <section>, a wewnątrz rozdziałów mogą być <h1>, <p>, <ul>; <section> - coś w rodzaju rozdziału, zawiera w sobie <h1>, <p>, itp. <> - unikaj jeśli możesz; partie tekstu umieszczaj w <nav>, <article> i <section>; <aside> - notka poboczna, może obejmować np. <h1>, <p>; <figure> - obrazek z podpisem cytat z podaniem źródła; może zawierać <figcaption>; <video>, <audio> - muszą mieć atrybut src= plik.avi ; może mieć atrybuty: autoplay, controls (atrybuty te nie mają wartości); też atrybut type='video/ogg; codecs="theora, vorbis"'; <strong> - ostrzeżenia, uwypuklenia (mocniejsze niż <b>); <canvas> - pojemnik / miejsce na obiekt z animacją wektorową (np. napisaną w JavaScript), grą, może zastąpić flasha; animacja jest w locie przerabiana na bitmapę; ma atrybuty width oraz height; Atrybuty target - jest na nowo dopuszczony w HTML5, ale powinno się go używać w bardzo rzadkich sytuacjach z dwóch względów: przeglądarki mobilne nie obsługują zakładek, a przeglądarki stacjonarne pozostawiają te ustawienia użytkownikowi (i tak powinno pozostać); translate= yes/no - informacja, czy przeglądarka może próbować tłumaczyć tekst na język użytkownika; SVG Znacznik <svg> jest kontenerem zawierającym figury. Atrybut cx oraz cy odnoszą się do położenia koła (circle) względem pojemnika <svg>, zaś atrybuty rx / ry określają zaokrąglenie rogów w prostokącie. 1
2 <svg width="300px" height="100px"> <circle r="50px" cx="50px" cy="50px" fill="green"> <ellipse cx= 80px cy= 200px rx= 100px ry= 50px style= fill: red; stroke: black; > <rect width="300px" height="200px" y="30px" x="30px" style= stroke-width:5px; stroke:#000000; fill:#ff0000; fill-opacity:0.7; > <line x1="0" y1="0" x2="260px" y2="340px" stroke="red" stroke-width="3px"> <text x= 30px y= 50px style= font-family:dejavu; font-size:30px; >Jakiś tekst</text> </svg> Powiększanie, przenikanie i transformacje Uwaga: Przenikanie nie działa w przypadku przejścia z display: none do display: block i odwrotnie, ani w przypadku każdej innej wartości display (blok albo jest, albo nie ma go... nic pośredniego). Rozwiązaniem tego problemu jest (zamiast display: none; ) zdefiniowanie bloku o parametrach: width: 0px; height: 0px. Można także zamiast tego wykorzystać visibility: collapse. Po najechaniu myszką na element <> powiększy się od w ciągu 2 sekund do rozmiaru 100px i zmieni kolor na zielony w ciągu 4 sekund: {width: 50px; background-color: red; transition: width 2s, background-color 4s;} :hover {width: 100px; background-color: green;} Do obracania elementów służy atrybut transform : {transform: rotate(7deg);} Aby uzyskać płynny efekt animacji: {animation: wlasnanazwaefektu 10s infinite linear;} Uwaga: Zamiast wartości infinite możemy dać normal (wykona się tylko raz) dowolną liczbę powtórzeń, np. 3. Poniższa wartość procentowa dotyczy części tych 10 wlasnanazwaefektu { 0% {transform: rotate(0deg);} 10% {transform: rotate(-25deg);} 20% {transform: rotate(47deg);} 30% {transform: rotate(-125deg);} 40% {transform: rotate(-25deg);} 50% {transform: rotate(25deg);} 60% {transform: rotate(165deg);} 70% {transform: rotate(42deg);} 80% {transform: rotate(180deg);} 90% {transform: rotate(-300deg);} 100%{transform: rotate(360deg);} } Gradienty: {background-image: linear-gradient(red, yellow);} {background-image: linear-gradient(to right, red, yellow);} {background-image: radial-gradient(red 5%, yellow 15%, green 60%);} z przezroczystością: {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));} 2
3 Uwaga: można podać więcej kolorów niż 2. Czcionki Zamiast wielkości określanej w pikselach, należy używać wartości small, medium, large, itp. W pliku CSS można importować czcionki z serwisu Google: url( 400italic,700italic&subset=latin,latin-ext); Podpisy pod fotkami <img src="fotka.jpg" alt="jakaś fotka" /> <p>fotka z konferencji.</p> używaj tego: <figure> <img src="fotka.jpg" alt="jakaś fotka"> <figcaption> <p>fotka z konferencji.</p> </figcaption> </figure> Odwołanie do stylów <link rel="stylesheet" href="glowny.css" type="text/css" /> używaj tego (bez type ): <link rel="stylesheet" href="glowny.css"> Należy unikać importowania stylów (@import), gdyż spowalnia to renderowanie całej strony. Odwołanie do skryptów <script type="text/javascript" src="moj-skrypt.js"></script> używaj tego (bez type ): <script src="moj-skrypt.js"></script> Formularz z Dzięki zastosowaniu atrybutu type= - przeglądarka sprawdza, czy wpisany tekst ma postać a. Zastosowanie atrybutu placeholder powoduje wyświetlanie w polu formularza domyślnego adresu tekstu w kolorze szarym, który znika po kliknięciu w pole. Atrybut required powoduje zaś, iż pole zostanie otoczone czerwoną ramką, gdy przy wysyłaniu pozostanie puste (jako błąd). Atrybut pattern określa warunki jakie musi spełnić wpis (wielkość liter, długość ciągu): <input name=" " type=" " placeholder="domyslny@ .com" required="required" "autofocus=autofocus" pattern="^([a-za-z0-9\.\_\-])+@([a-za-z0-9\.\-])+\.([a-z]{2,4}$)"> Legenda: ^ - zaczyna się na (element początkowy, początek wiersza); $ - kończy się na (element końcowy, koniec wiersza); + - conajmniej jedno wystąpienie poprzedzającego znaku (znaków);? - najwyżej jedno wystąpienie poprzedzającego znaku;. - kropka oznacza dowolny znak; \ - symbol, który następuje po tym ukośniku, nie jest symbolem wieloznacznym - czyli należy odczytywać go dosłownie. 3
4 Audio Przeglądarka Firefox odtwarza nieopatentowane formaty: WAV (PCM 8/16 bps), OGG (.ogg,.oga,.ogv,.ogx,.spx,.opus), WebM., MP4 (niektóre, np. kodowane jako AAC). Odtworzony zostanie plik.ogg, a jeśli przeglądarka nie rozpoznaje tego formatu, to plik.mp3: <audio autoplay="autoplay" controls="controls"> <source src="plik.ogg"> <source src="plik.mp3"> <a href= plik.ogg >Pobierz muzykę.</a> </audio> Video Przeglądarka Firefox odtwarza nieopatentowane formaty OGG (kodek video Theora, kodek audio Vorbis), WebM (kodek video VP8, audio Vorbis), a także MP4 (częściowo, niektóre kodery, w tym video H.264, oraz audio AAC). Przeglądarka spróbuje odtworzyć plik film.ogv. Jeśli nie będzie znała tego formatu, spróbuje zastosować wersję drugą, potem trzecią. Atrybut preload ładuje wstępnie plik do pamięci: <video controls preload="auto"> <source src="film.ogv"> <source src="film.mp4"> <p>twoja przeglądarka jest przestarzała i nie potrafi odtworzyć tego pliku. <a href="film.mp4">możesz go jednak pobrać na dysk.</a> </p> </video> Menu <nav> <span>link 1</span><span>Link 2</span> </nav> <nav class="menu"> <ul> </ul> </nav> a w części CSS:.menu ul{ text-align: center; margin-bottom: 10px; float: left; width: 100%; list-style-type: none; } W menu opartym na <li> można tworzyć podmenu (wewnętrz <li> tworzymy <ul>). Aby automatycznie rozwijało się i najechaniu myszką i zwijało, należy w CSS: ul { // Wewnętrzne <ul> visibility: collapse;} Inne ciekawe właściwości Block - elementy typu block (np. ) domyślnie wypełniają całą przestrzeń horyzontalnie, tzn. nie tolerują elementów przed sobą ani za sobą (stawiają za sobą znak łamania wiersza). Można zdefiniować ich wymiary (szerokość i wysokość). 4
5 Inline elementy zachowują się podobnie do liter w zdaniu (np. img, span), mogą występować w jednej linii i tylko w tej sytuacji działa właściwość vertical-align. Wyrównanie poziome tych elementów (text-align) nie działa na każdego z osobna (można wyrównać poziomo tylko całą linię, czyli wszystkie elementy razem). Inline-block elementy blokowe, które tkwią obok siebie w jednej linii i zachowują się jak wyrazy w zdaniu. List-item elementy blokowe, które zachowują się jak elementy <li>. Float powoduje, że element staje się typu block, jest siłą przesunięty (wyrównany) w lewy prawy bok i jest opływany (otaczany) przez pozostałe elementy tej warstwy. Jeśli nie chcemy, aby z jakiejś strony był otaczany innymi elementami, używamy np. atrybutu clear: left. Element typu float może swoimi gabarytami wychodzić poza element nadrzędny; jeśli nie chcemy, aby tak było, możemy dać elementowi nadrzędnemu parametr overflow: auto;. Position przesuwa blok linię umieszczając je automatycznie w nowej warstwie (nawet jeśli nie zadeklarujemy z-index ): nadaje im nową pozycję względem miejsca, gdzie normalnie jest ich miejsce, ale w zależności także od otaczających je elementów (relative może być typu block inline ), względem całego dokumentu html (absolute tylko typ block ; element odrywany jest od warstwy elementu macierzystego, nie wpływa na położenie innych elementów i inne elementy nie wpływają na jego położenie; jeśli element jest wewnątrz elementu z position: relative, wtedy będzie pozycjonowany względem tego nadrzędnego elementu, a nie względem strony html) względem przeglądarki (fixed element utrzymuje swoją pozycję nawet wtedy, gdy dokument html jest przewijany; jest odrywany od warstwy całego dokumentu html). Z każdą z powyższych wartości position związana jest także wartość z-index (i tylko z nią). Im większa wartość z-index tym warstwa znajduje się wyżej, ale tylko pod warunkiem, że znajduje się w tej samej przestrzeni position (warstwa posiadająca z-index: 1 i position: absolute będzie wyżej niż warstwa z z-index: 50 i mająca position: relative - bo została ona oderwana z macierzystego elementu). Warstwy mogą mieć też wartości ujemne, wtedy przesuwają się pod spód standardowej domyślnej warstwy. Wartość static nie zmienia domyślnego zachowania bloku, bo jest domyślna nawet jeśli jej nie zadeklarujemy (element zachowuje się jak zwykły blok, a wartości top, left, oraz zindex, itp. - nie mają w tym przypadku zastosowania). Co wybrać: float czy position: absolute? Jeśli element ma być opływany przez inne elementy, wybierz float. Tak samo jak chcemy wyrównać do prawej dwa bloki (np. kolumny zrobione z -ów) użyjmy float (wzajemnie dopasują swoje położenie obok siebie). Jeśli element ma nie wchodzić w interakcje (związane z położeniem) z innymi elementami, wybierz position. <a> - Specyfikacja HTML5 pozwala na otaczanie elementów blokowych linkami, nawet całych paragrafów i zawartości mieszanej. Ten sposób jest przydatny dla małych ekranów smartfonów. Jednakże Google odradza taką filozofię, gdyż jej maszyny mają w tym przypadku problem z indeksowaniem stron w wyszukiwarce i analizą ich zawartości. 5
Sierpień 2015 rozwiązanie plik: index.htlm
Sierpień 2015 rozwiązanie plik: index.htlm strona główna //ustalamy położenie wyświetlania
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Laboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
HTML5 Nowe znaczniki header nav article section aside footer
Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści
Tło CSS 3. Gabriela Panuś
Tło CSS 3 Gabriela Panuś body { background-color: kolor; TŁO - CSS } TŁO OBRAZKOWE background-image: url(tlo.jpg); /* podajemy ścieżkę do tła */ body { } background: #6495ed url(image/obrazek.png); Właściwości
Powtórzenie materiału: CSS3 Spis treści
Powtórzenie materiału: CSS3 Spis treści Kolory...2 Jednostki...3 Czcionka...3 Elementy blokowe...3 Cienie...5 Gradient...5 Zgodność z przeglądarkami...6 Kolory Wartości kolorów w CSS podawać można na 4
CSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Responsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
Alfabetyczna lista stylów
Tematy: Kaskadowe arkusze stylów Alfabetyczna lista stylów Uwaga: wiele stylów CSS3 nie jest ciągle interpretowanych przez przeglądarki Styl Znaczen CSS1 CSS2 CSS3 IE FF A animation Zbiorcza definicja
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 4 HTML 5 i CSS 3.0 Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML
Multimedia i interfejsy. Ćwiczenie 5 HTML5
Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych
Systemy internetowe HTML + CSS - dodatki
Systemy internetowe HTML + CSS - dodatki West Pomeranian University of Technology, Szczecin; Faculty of Computer Science HTML 5 Sekcja to tematyczna grupa treści (dane kontaktowe, materiały dydaktyczne,
Układy witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
rk HTML 4 a 5 różnice
rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się
Podstawy pozycjonowania CSS
Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"
Tworzenie Stron Internetowych. odcinek 8
Tworzenie Stron Internetowych odcinek 8 CSS jednostki Jednostki miary stosuje się w poleceniach dotyczących np. wielkośd czcionki lub rozmiarów marginesów. Zapis składa się z znaku "+" (domyślny) lub "
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J
APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J PLAN PREZENTACJI Wprowadzenie do css Budowa stylu - selektor cecha wartość Klasa i identyfikator selektora Jednostki Miary
Języki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki
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.
Style CSS Wstęp 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. Podstawową zaletą i zadaniem stylów jest oddzielenie
Tworzenie Stron Internetowych. odcinek 8
Tworzenie Stron Internetowych odcinek 8 CSS jednostki Jednostki miary stosuje się w poleceniach dotyczących np. wielkość czcionki lub rozmiarów marginesów. Zapis składa się z znaku "+" (domyślny) lub "
2. Prezentacja wizualna
2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia
Multimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski
Multimedia w HTML5 Statyczne witryny internetowe 2TI/TOR Marek Kwiatkowski Cele lekcji: Poznanie zasady umieszczania plików multimedialnych w HTML5 Zrozumienie istoty stosowania nowych znaczników w HTML5
Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY
Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY Zadanie maj 2015 rok Wykonaj zestaw grafik oraz stronę internetową dla zespołów medycznych zgodnie z wymaganiami dotyczącymi bazy danych, grafiki i strony internetowej.
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 3 Struktura semantyczna i formularze mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Design stackoverflow.com Design coursesweb.net Design accessibleculture.org
Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
za pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
Tworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
A P L I K A C J E I N T E R N E T O W E KONSPEKT nr 3 (DIV, galeria, formularze)
1 BLOK DOKUMENTU Polecenie div (blok, sekcja) odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach
<ul> <ul> </ul> </ul>
Tworzenie list z CSS namiot materac latarka mapa koc namiot materac latarka mapa koc Lista (wykaz) umożliwia tworzenia uszeregowanych grup informacji
Przedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
I. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Z CSS3 szybciej i przyjemniej
1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki
Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...
Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Mailingi HTML. Specyfikacja techniczna
Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna
I. Pozycjonowanie elementów
Wykład 4 - część I. I. Pozycjonowanie elementów 1 I. Pozycjonowanie elementów Model blokowy Każdy element użyty w kodzie XHTML tworzy na stronie blok. W związku z tym strona XHTML w rzeczywistości składa
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 12.10.2016 r.) Zajęcia: grupa 2: środa 12:00-13:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:
Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
I. Formatowanie tekstu i wygląd strony
I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE LOGO CONTACT NAV CONTENT SIDEBAR FOOTER PRACA DOMOWA CONTENER LOGO HOME CONTACT DROPDOWN DROPDOWN CONTENT_WRAP Lista UL Lista UL Lista UL SIDEBAR_LEFT WIDTH:20% NO BACKGROUND WIDTH:65% H4
Technika pracy nad układem strony
Układ strony Technika pracy nad układem strony nad układem strony pracujemy: krok po kroku, testując witrynę po wprowadzeniu jakiejkolwiek zmiany, sprawdzamy poprawnośd kodu HTML, CSS oraz wygląd w przeglądarkach,
Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Arkusze stylów CSS Cascading Style Sheets
Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację
Zawartość specyfikacji:
Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie
Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets, CSS) Mechanizm służący do definiowania stylu prezentacji dokumentów w Internecie. Arkusz stylów CSS to lista
DOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites
CSS + HTML Front end publikacji internetowej Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites 1 CSS + pocięcie grafiki Struktura folderów reset.css Cięcie grafiki w Photoshopie 2 Nasza
CSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Elementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?
PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014 BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2 Perfomance + Joomla =? 3 Google PageSpeed
Technologie Informacyjne
Technologie Informacyjne Wykªad 7 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 23 HTML HTML Sªu»y do deniowania struktury dokumentu: akapity nagªówki
Znaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
p { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
2. MATERIAŁ NAUCZANIA
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów oraz wstawiania plików multimedialnych. 2. MATERIAŁ NAUCZANIA 2.1. Wstawianie
Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.
Kaskadowe arkusze stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają np. określać rozmiar i kolor czcionki, definiować odstępy
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma
Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}
Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.
Systemy internetowe Wykład 2 CSS
Systemy internetowe Wykład 2 CSS CSS - definicja CSS (Cascading Style Sheets) kaskadowe arkusze stylów CSS - język opisujący w jaki sposób elementy HTML będą wyświetlane na ekranie komputera, tabletu,
Hyper Text Markup Language
Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na
Responsive web design : projektowanie elastycznych witryn w HTML5 i CSS3 / Ben Frain. Wyd. 2. Gliwice, cop Spis treści
Responsive web design : projektowanie elastycznych witryn w HTML5 i CSS3 / Ben Frain. Wyd. 2. Gliwice, cop. 2016 Spis treści Zespół wydania oryginalnego 11 O autorze 13 O korektorach merytorycznych 15
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.
JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na
HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl
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:
plansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>
Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie
STRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37
Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników
Programowanie w Sieci Internet o HTML 5 i CSS 3.0 słów kilka. Kraków, 17 października 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ
Programowanie w Sieci Internet o HTML 5 i CSS 3.0 słów kilka Kraków, 17 października 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ Plan zajęć HTML5: struktura HTML5, elementy HTML5, HTML forms,
Elementy div i style CSS w praktyce
Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze
Aplikacje internetowe
Aplikacje internetowe HTML 5 Wprowadzenie Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi
AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ
Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa
Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Projektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.
Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub
RESPONSYWNE Waldemar Korłub INTERFEJSY Klasy urządzeń klienckich Responsywne style CSS Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska Klasy urządzeń klienckich Desktopy z zewnętrznymi
KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)
Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego
Nowoczesne Technologie WWW
INP002295W Test zaliczeniowy A 10.06.2016 Nowoczesne Technologie WWW 1. Napisz szablon poprawnej i responsywnej strony HTML5 w polskiej wersji językowej:
Formaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia
Grafika i multimedia na stronie Formaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia Grafika na stronie HTML niezbędny
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze
Wprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
PORADNIK KODOWANIA: CSS
PORADNIK KODOWANIA: CSS Przygotowane przez Jakuba Skórzyńskiego SPIS TREŚCI Wstęp... 3 Jak zacząć?. 4 Składnia 5 Klasy i unikaty.. 7 Rzeczy ważne 8 Najważniejsze komendy 9 Porady i Triki. 11 2 Wstęp Nazywam
Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.
Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać
Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:
1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera
Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.
Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej