Informatikai rendszerek

Slides:



Advertisements
Hasonló előadás
HTML nyelv.
Advertisements

CSS médiatípusok - példák
Amit a HTML-ről érdemes tudni
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.
VFP programozása report készítése menü készítése dinamikus elemek
A HTML alapjai Havlik Barnabás Készítette:
Kliensoldali Programozás
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
HTML oldal felépítése Készítette: Pataki Arnold
Webszerkesztés Stíluslapok (CSS).
Webszerkesztés Űrlapok a HTML-ben. Űrlap létrehozása Űrlapunk tartalma a … elemek között fog helyetfoglalni Egy lapon több űrlap is elhelyezhető Több.
Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem
CSS.
Buris Katalin V. földrajz - informatika
Számítógépes Grafika 2. gyakorlat Programtervező informatikus (esti) 2011/2012 őszi félév.
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
Formanyomtatványok létrehozása Dreamweaverrel E-business 6. előadás.
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.
Űrlapok és keretek.
A <DIV> tag és formázás CSS-sel
Űrlapok.
CSS A CSS bemutatása.
HTML nyelv.
Delphi Készítette: Rummel Szabolcs Elérhetőség:
Hyper Text Markup Language
Honlap készítés 4. óra.
4. óra. Emlékeztető Igazítások Háttérszín, szövegszín Háttérkép Meta adatok.
Eu-háló Partnerszervezeti Kommunikációs Center január 17.
ADATBÁZISKEZELÉS ŰRLAPOK.
1 Verseny 2000 gyakorlat ASP. 2 Gyakorlat Web létrehozása: Frontpage 2000 New Web:
HTML 2. Űrlapok
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)
Webprogramozó tanfolyam Űrlapok (form-ok). Űrlapok a HTML-ben Biztosan mindenki találkozott már vele – Űrlap példapélda Felhasználási lehetőségei – Regisztráció,
Violet nails Készítette: Csőke Vivien. Bevezetés Téma: Violet nails - műkörömkészítő weblapjának elkészítése A weboldal elérhető az alábbi címen: violetnails.atw.hu.
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Webprogramozó tanfolyam
Számítógépes Grafika 4. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
Java web programozás 2..
Számítógépes Grafika 3. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
Weboldalba ágyazott interaktív feladatok GeoGebra módra Papp-Varga Zsuzsanna ELTE IK Média- és Oktatásinformatika Tanszék
A Google Drive használata. Mire jó? A Google Drive segítségével a fotókat, videókat, fájlokat és sok más tartalmat egy biztonságos felhőtárhelyen keresztül.
A <DIV> tag és formázás CSS-sel
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
Információ és kommunikáció
Webprogramozó tanfolyam
HTML, XML szerkesztés Vezető: Majzik Zsuzsa
Alapok.
Alkalmazott Informatikai Tanszék
Fejlett Programozási Technikák 2.
Alkalmazott Informatikai Tanszék
CSS Cascading Style Sheet HTML.
Fejlett Programozási Technikák 2.
Cascading Style Sheet.
JavaScript a böngészőben
Html parancsok.
Alkalmazott Informatikai Tanszék
JavaScript a böngészőben
Előadás másolata:

Informatikai rendszerek HTML alapjai gyakorlat 2

A HTML alapjai A html állományok alapfelépítése: <html> <head> <title> dokumentum címe </title> </head> <body> dokumentum tartalma </body> </html>

Egyéb szövegformázások <address> postacímet jelöl ki.</address> <blink> ez itt villog, de csak netscape-ben! </blink> <MARQUEE> ez egy mozgó szöveg </MARQUEE> <big> nagyobb karakterméret </big> <blockquote> szövegblokk - érdemes kipróbálni!</blockquote> <code> programkód - a más betűstílus miatt érdemes használni</code> <s> keresztülhúzott szöveg</s> <small> kisebb betűméret </small> <strong> vastagított megjelenés </strong> <sub> alsó index </sub> <sup> felső index </sup>

Html linkek Szintakszis: <a href="url"> Link text </a> Példa: <a href="http://www.uni-miskolc.hu" target="_blank">Miskolci Egyetem</a> Horgony: <a name="teszt">teszt</a> Link a horgonyra: <a href="#teszt">ugorj a teszt horgonyra</a> E-mail küldés: <a HREF="mailto:htmlinfo@htmlinfo.hu">írj nekem</a> Link szinezése: <body link="#808080" vlink="red">

Képek linkelése Szintakszis: <IMG SRC="kepek/pelda.gif"> Paraméterek: width="x" height="y" border="z" alt="szöveg" align="right" (left,center,right,middle) Példa: <p> <img src="logo.gif" alt=„cég logó" width="100" height="100" align="middle" > This is some text. This is some text. This is some text. </p>

Űrlap vezérlők Egyszerű űrlap két szövegmezővel: <form> Keresztnév: <input type="text" name="firstname"> <br> Vezetéknév: <input type="text" name="lastname"> </form>

Űrlap vezérlők Rádió gombok: <form> <input type="radio" name=”nem" value=”férfi"> Férfi <br> <input type="radio" name=”nem" value=”nő"> Nő </form> Alapértelmezetten bejelölt gomb a checked=”checked” attribútummal adható meg.

Űrlap vezérlők Checkboxok <form> <input type="checkbox" name="bicikli"> Van egy biciklim <br> <input type="checkbox" name="auto"> van egy autom </form>

Űrlap vezérlők Legördülő menük <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>

Űrlap vezérlők Szövegmező Díszített legördülő <textarea rows="10" cols="30"> Ide egy hosszabb szöveg írható </textarea> <select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </select>

Email küldés <form name="fel11" action="mailto:hivatalos@tferi.hu" method="post" enctype="text/plain"> Kérem a nevét! <input type="text" name=”mintaUserNev"> <br> <input type="submit" value="Mehet!"> <br> <input type="reset" value="Mégsem"> </form>

<html> <head><title>Űrlapok készítése - Példa</title></head> <body> <form name="urlap_1" method="post" action="mailto:myd@netposta.net"> <input type="radio" name="valasztogomb_1" checked>1. választógomb <input type="radio" name="valasztogomb_1">2. választógomb <input type="radio" name="valasztogomb_1">3. választógomb <br><br> <input type="checkbox" name="jelolonegyzet_1" checked>1. jelölőnégyzet <input type="checkbox" name="jelolonegyzet_2">2. jelölőnégyzet <input type="checkbox" name="jelolonegyzet_3" checked>3. jelölőnégyzet <input type="text" name="szovegmezo_1" value="1. szövegmező" size="13"> <input type="text" name="szovegmezo_2" value="2. szövegmező" size="20"> <input type="button" name="gomb_1" value="1. gomb" onClick="alert('1. gomb lenyomva!')"> <input type="button" name="gomb_2" value="2. gomb" onClick="alert('2. gomb lenyomva!')"> <select name="valasztomenu_1" onChange="alert('Megváltozott a kijelölés!')"> <option name="menupont_1" value="1">1. menüpont <option name="menupont_2" value="2" selected>2. menüpont <option name="menupont_3" value="3">3. menüpont <option name="menupont_4" value="4">4. menüpont </select> <textarea cols="20" rows="5" name="szovegmezo_4" value=„nagyszoveg">nagy szovegmezo</textarea> <input type="submit" value="Elküldés"> <input type="reset" value="Törlés"> </form> </body> </html>

Az űrlap megjelenése böngészőben Az eredmény az elküldés gomb lenyomását követően után

A CSS alapjai http://weblabor.hu/cikkek/cssalapjai1 Miért jó a CSS? <html>   <head>     <title>CSS példa</title>     <style type="text/css"><!--     h1 { font-size: 20px; color: #a00000; }     p { font-size: 12px; color: #00a000; }     --></style>   </head>    <body>   <h1>Bevezetés</h1>   <p>A vers...</p>   <h1>Tárgyalás</h1>   <p>A költő...</p>   <h1>Összefoglalás</h1>   <p>Végezetül</p>   </body>   </html>   <html>   <head>     <title>CSS példa</title>   </head>   <body>   <h1><font size="4" color="#a00000">Bevezetés</font></h1>   <p><font size="2" color="#00a000">A vers...</font></p>   <h1><font size="4" color="#a00000">Tárgyalás</font></h1>   <p><font size="2" color="#00a000">A költő...</font></p>   <h1><font size="4" color="#a00000">Összefoglalás</font></h1>   <p><font size="2" color="#00a000">Végezetül...</font></p>   </body>   </html>  

A CSS alapjai CSS formázás HTML oldalon belül <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>Header 1</h1> <p>A paragraph.</p> </body> </html> Elemhez rendelt stíluslap: <h1 style="font-size: 20px; color: #a00000;">Bevezetés</h1>  

A CSS alapjai CSS hozzákapcsolása a HTML-hez <head>   <link rel="stylesheet" href="kulso.css" type="text/css">   </head>   A kulso.css fájl tartalma: h1 { font-size: 20px; color: #a00000; }   p { font-size: 12px; color: #00a000; }  

A CSS alapjai Osztály és azonosító alapú CSS definíciók <html> <head> <style type="text/css"> h1 {color:red;} p {color:blue;} .osztaly {color:green; font-size:20px;} #szoveg { color: #ff0000; }  </style> </head> <body> <h1>Header 1</h1> <p>A paragraph.</p> <p class="osztaly">green paragraph</p> <p id="szoveg">gray text</p> </body> </html>

A CSS alapjai CSS leírás: http://weblabor.hu/cikkek/cssalapjai1