Alkalmazott Informatikai Tanszék

Slides:



Advertisements
Hasonló előadás
Microsoft Excel Függvények I.
Advertisements

BPS Web 2.0 Felhasználói kézikönyv. A szerkesztő főoldala A bejelentkezett felhasználóA szerkesztő főmenürendszere Stílusformázások Nyelv- és nézetváltás.
HTML nyelv Hiper-Text Markup Language 1. óra.
HTML nyelv.
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
FRAME-k (keretek). FRAME-k A frame-ek (keretek) segítségével a képernyőt felosztva egyszerre jeleníthetünk meg több webes dokumentumot a képernyőn. Fejlec.html.
2. óra. Emlékeztető Hello Világ! Ez Makk Marci honlapja!
Amit a HTML-ről érdemes tudni
Honlap készítés Érdekességek.
Stílus, mesteroldal, témák
HTML nyelv.
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
HTML parancsok használata
Leírónyelvek: HTML és XHTML
© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.
Hernyák Zoltán XML és HTML.
WEBOLDALFEJLESZTÉS
Készítette: Nagy-Szakál Zoltán 2007.
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
A HTML alapjai Havlik Barnabás Készítette:
HTML dokumentum felépítése
Programozás I Függvények általános jellemzői
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript.
Vizuális és web programozás II.
HTML oldal felépítése Készítette: Pataki Arnold
Ismerkedés a szövegszerkesztéssel
Bevezetés a Stíluslapok használatába - gyakorlati feladatsor
Webszerkesztés Stíluslapok (CSS).
CSS.
Buris Katalin V. földrajz - informatika
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
XHTML – a tanultak összefoglalása
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
A <DIV> tag és formázás CSS-sel
DOKUMENTUMOK KÉSZÍTÉSE WORD 2007 SZÖVEGSZERKESZTŐVEL II. rész.
CSS A CSS bemutatása.
HTML nyelv.
Microsoft Word Oberhuber Balázs.
Térképészet Színmodellek.
Hyper Text Markup Language
6. óra. Összefoglalás (egy feladaton keresztül) Betűtípus, betűszín, betűméret Háttérszín, alapértelmezett betűszín Címsorok Igazítás Kép, link, táblázat.
Honlap készítés 2. óra.
Érdekességek. Tudod-e? Mit jelent a „www”? A) Wild Windows Wave B) World Wide Web C) Wide World Web.
Az Internet alkalmazásának lehetőségei Áttekintés.
Web-grafika II (SVG) 8. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 5. gyakorlat Kereszty Gábor.
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás.
Web-programozás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Előadás Tananyag: A WWW A HTML nyelv alapjai.
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
Tananyag: 3. Előadás A HTML nyelv alapjai Kép beillesztés Navigációk
Html nyelv (HyperText Markup Language)
Első lépések a szövegszerkesztő használatában
Karakterek formázása.
Táblázatok.
Weblap-szerkesztés. Információs hálózati szolgáltatások Internet fontosabb szolgáltatásai (szóbeli) Elektronikus levelezési rendszer használata (szóbeli)
Ficsor Lajos CPP2 / 1 Származtatási mechanizmus a C++ nyelvben Ficsor Lajos Miskolci Egyetem Általános Informatikai Tanszék.
Java web programozás 2..
A színek szerepe a térképészetben
Webszerkesztés. IP cím pl: Domain cím - DNS pl: ország nevehttp:// számítógép címe World Wide Web Webszerverre.
1 Műszaki kommunikáció 8. előadás vázlat Dr. Nehéz Károly egyetemi adjunktus Miskolci Egyetem Alkalmazott Informatikai Tanszék.
A <DIV> tag és formázás CSS-sel
Informatikai rendszerek
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
CSS Cascading Style Sheet HTML.
Cascading Style Sheet.
Html parancsok.
MS Office Word 2010 Szövegszerkesztés.
Előadás másolata:

Alkalmazott Informatikai Tanszék CSS alapjai Dr. Nehéz Károly egyetemi adjunktus Miskolci Egyetem Alkalmazott Informatikai Tanszék

CSS (Cascading Style Sheet) CSS segítségével a HTML lapok formázására nyílik mód. A formázás és a megjelenített adatok függetlenné válhatnak. A nyelv specifikációja 1996 óta létezik. Ismert változatai: CSS1, CSS2, CSS3 A CSS alkalmas arra, hogy a dokumentum stílusát a megjelenítési módszer függvényében adja meg, így elkülöníthető a dokumentum formája a képernyőn, nyomtatási lapon ‘braille’ eszközön megjelenítve. A szabványt a www konzurcium felügyeli. World Wide Web Consortium (http://www.w3.org/) Forrás: http://www.prog.hu/cikkek/907/Bevezetes+a+CSS+alapjaiba.html

<html> <head> <title>Minta HTML</title> </head> <body> <ul> <font color="blue"><li>Első sor</font></li> <font color="blue"><li>Második sor</font></li> </ul> <font color="blue"><p><font size="6">Új bekezdés</font></p> <p><font size="6">Második bekezdés</font></p> </body> </html>

<html> <head> <title>Minta HTML</title> <style type ="text/css"> li { color: blue } p { font-size: 28px } </style> </head> <body> <ul> <li>Első sor</li> <li>Második sor</li> </ul> <p>Új bekezdés</p> <p>Második bekezdés</p> </body> </html>

CSS elemek Minden CSS utasításnak 2 fő része van: a szelektor, és a deklaráció. A szelektor azt a HTML elemcsoportot jelöli ki, amit formázni szeretnénk (pl. P, UL, H1 stb.) A deklaráció írja le a szelektorban megadott HTML jelölők (tag) formázását. Ennek általában több része van (paraméter, érték), ugyanis meg kell adni, hogy mit akarunk a szelektorban formázni (pl. szín - color), utána pedig azt, hogy hogyan akarjuk formázni (pl. fehér - white).

CSS elemek LI {color: blue} deklaráció paraméter érték A példában a LI lesz a szelektor (ami a HTML-ben a felsorolás eleme (list item)). A deklarációt mindig kapcsos-zárójelek közé tesszük. Itt a deklaráció paramétere a color (szín), és az értéke blue (kék). szelektor

HTML és CSS kapcsolata Egy adott HTML-hez három módon lehet CSS-t kapcsolni: <link> tag, melynek segítségével külső, .css kiterjesztésű fájlokat rendelhetünk a dokumentumhoz. (pl. <link rel=StyleSheet type= "text/css" href=”valami.css” title="cím"> ). <style type="text/css"> valamint </style> tagek között helyezzük el a CSS utasításokat, a HTML <head> részében. style attribútum használata egy adott HTML tag esetén. Ezek a stílusmegadások lokálisak. (pl. <p style=" color:red">A szöveg színe ‘red’ …</p> )

Feladat Készítsünk egy bekezdést, melyben a betűszín kék legyen, a félkövérré alakított szöveg pedig 15 pixel nagyságú. Ezután készítsünk még egy sort, de az ne új bekezdés legyen, hanem sortörés. <html> <head> <title>Példa a CSS alapokra</title> <style type="text/css"> P { color : blue } /* a bekezdés szövege kék színű lesz */ B { font-size : 15 px } /* a félkövér szöveg mérete 15 pixel lesz */ </style> </head> <body> <P>Ez a szöveg kék <B>ez félkövér, kék és 15 pixel nagyságú</B></P> <BR>Ez a szöveg fekete és normál méretű<B>, de ez már félkövér 15 pixel nagyságú!</B> </body> </html>

Öröklődés   <html>   <head>   <title>Öröklődés</title>   <style type="text/css">   P { color: blue }   </style>   </head>   <body>   <p>Ez a rész kék,<em> de ez is, az öröklődés miatt...</em></p>   </body> <html> Az <em> kiemelés színe öröklődik. Az öröklés nem minden attribútum esetében történik meg automatikusan. Azt, hogy melyik attribútumok öröklődnek és melyek nem, a CSS specifikációban vannak definiálva.

Csoportosítás Szelektorok csoportosítása: P, UL, EM {color: white} Deklarációk csoportosítása P {color: blue; font-size: 15px;}

A class szelektor <head> <style type="text/css"> <html>   <head>   <style type="text/css">   P.kek {color: blue}   </style>   </head>   <body>   <p class="kek">Ez a bekezdés kék színű.</p>   <p>Ez már nem kék színű, mivel nincs hozzárendelve   a Class.</p>   </body> </html> <head> <style type="text/css"> .kek {color: blue} </style> </head> <body> <p class="kek">Ez kék lesz</p> <b class="kek">Ez is kék lesz</b> <h2 class="kek">Sőt, még ez is</h2> </body> </html>