HTML, XML szerkesztés Vezető: Majzik Zsuzsa

Slides:



Advertisements
Hasonló előadás
Zenetár a webszerverünkön, avagy XML használata PHP 5 alatt. Ercsey Balázs (laze) – netpeople.hu.
Advertisements

HTML nyelv.
Grafikus tervezőrendszerek programozása 10. előadás.
A webprogramozás alapjai B282
Extensible Markup Language
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.
Stílus, mesteroldal, témák
Fejlett programozási technikák II.
Előadás vázlat Az XML története és alkalmazási területe
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}
Leírónyelvek: HTML és XHTML
© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.
Készítette: Rummel Szabolcs
Abonyi-Tóth Andor, ELTE IK
Hernyák Zoltán XML validálás.
Hernyák Zoltán XML és HTML.
WEBOLDALFEJLESZTÉS
Készítette: Nagy-Szakál Zoltán 2007.
WEB Technológiák A HTML és a CGI ME Általános Informatikai Tsz. dr. Kovács László.
A HTML alapjai Havlik Barnabás Készítette:
Önleíró adatok: XML INFO ÉRA, Békéscsaba
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.
XML támogatás adatbázis-kezelő rendszerekben
CSS.
Bátyai Krisztián NetAcademia Oktatóközpont oktató, fejlesztő MCT, MCPD
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
CSS A CSS bemutatása.
HTML nyelv.
Weboldalak tervezése (X)HTML.
Hernyák Zoltán XSLT transzformációk.
Hyper Text Markup Language
Hyper Text Markup Language
HTML 2. Űrlapok
Illés Zoltán ELTE Informatikai Kar
XML adatkezelés 1. témakör Az XML szabvány.
XML Mi az XML?  Extensible Markup Language  Kiterjeszthető jelölő nyelv  Adatok, adatstruktúrák leírására szolgál  A HTML és az SGML tapasztalataira.
Készítette: Turócziné Kiscsatári Nóra
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ó,
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Webprogramozó tanfolyam
Webes technológiák 10/1. Bilicki Vilmos Árpád tér 50.-es szoba 3411-es mellék.
HTML5 A HTML4 tükrében.
A <DIV> tag és formázás CSS-sel
Informatikai rendszerek
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
Webprogramozó tanfolyam
HTML (HyperText) Markup Language – Hiperszöveges jelölőnyelv
Web Technológiák HTML 4.01 World Wide Web Consortium
Riportok, táblák, programok
Alkalmazott Informatikai Tanszék
Fejlett Programozási Technikák 2.
Technológiák összehasonlítása J2EE - PHP
CSS Cascading Style Sheet HTML.
Web technológia alapjai
Fejlett Programozási Technikák 2.
YUI február YUI szeptember YUI3
Cascading Style Sheet.
JavaScript a böngészőben
Html parancsok.
Táblázatok A táblázat megadása a tag használatával lehetséges. A és tageken belül: a és tagek között adhatjuk meg a.
Alkalmazott Informatikai Tanszék
Előadás másolata:

HTML, XML szerkesztés Vezető: Majzik Zsuzsa <majzik@gdf.hu> Előadó: Rigó Ernő <rigo@sztaki.hu> http://gdf.tricon.hu/html

Előzmények 1960-as évek: GML – IBM SGML – Standard Generalized Markup Language 1986-os ISO szabvány Első felhasználása: 2nd Oxford Englis Dictionary Leszármazottjai: HTML XML DocBook stb...

HTML áttekintés HTML – Hyper Text Markup Language Hyper Text – követhető linkek Markup Language – megjelenést jelölő nyelv eredet: CERN – 1980 és 1989 1990 – www.w3.org – szabvány 1995 – HTML 2.0 1999 – HTML 4.01 2008 – HTML 5.0 DRAFT

XML áttekintés XML – Extensible Markup Language Bővíthető Jelölő Nyelv Új fogalmak: Well Formed – szintaktika Valid – szemantika 1998 – XML 1.0 – www.w3.org szabvány 2006 – XML 1.0 fourth edition – unicode 2.0 2004 – XML 1.1 – lazább karakterkorlátok Rengeteg kapcsolódó szabány DOM, SAX, XPath, XSLT, XSD, DTD, XQuery, XSL, XMLP, XForms, XHTML, XInclude, XLink, WSDL, SOAP, LGML, stb...

XHTML Extensible Hypertext Markup Language XML szintaktika HTML szemantika HTML 4.0 kompatibilitás (DOCTYPE direktíva) Strict Transitional Frameset 2000 – XHTML 1.0 – www.w3.org szabvány 2001 – XHTML 1.1 – modularizált 2002-től – XHTML 2.0 DRAFTok

HTML – „hello world”

HTML speciális karakterek & és ; jelek közé írva „<”: < „>”: > „&”: & non-breaking space:   copyright: ©

TAG-ek az első alkalomra HTML BODY alink, background, bgcolor, link, text, vlink HEAD TITLE META name, content, http-equiv H1 … H6 align P align title PRE width title BR A href name rel/rev target=_blank/_top/_parent/_self

TAG-ek a második alkalomra B, I, TT, BIG, SMALL, EM, STRONG, SUB, SUP, INS, DEL CODE, KBD, SAMP, VAR, PRE ABBR, ACRONYM, BLOCKQUOTE, Q, CITE, DFN, BDO dir=ltr/rtl UL, OL, DL, LI, DD TABLE border, cellpadding, cellspacing, width, frame=void/above/below/hsides/lhs/rhs/vsides/box rules=none/rows/cols/all TR, TH, TD align=left/right/center, colspan, rowspan, CAPTION

TAG-ek a harmadik alkalomra IMG alt, src, usemap, width, height MAP id, name AREA shape=rect/circ/poly, coords=[int,...], href, target=_blank/_parent/_self/_top, nohref FRAMESET cols=[int]/[%]/*, rows=[int]/[%]/* FRAME frameborder=0/1, marginheight, marginwidth, name, noresize, scrolling=yes/no/auto, src IFRAME frameborder=0/1, marginheight, marginwidth, name, noresize, scrolling=yes/no/auto, src, width, height

CSS – harmadik alkalom CSS – Cascading Style Sheets browser → external → internal → inline <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> <head><style type="text/css">hr {color: sienna}; .... stb... </style></head> style attribútum selector, sel2, ... {property: value; prop2: val2; …} parent.class#id p2.c2#i2 ... tag[attr=val].class#id pseudo-class: tag.class:pseudo link/visited/hover/active/first-child/lang(l) DIV és SPAN tagek szerepe

CSS property [1/2] a 3. alkalomra background-color: [rgb]/[name]/transparent background-image: url()/none color: [rgb]/[name]/transparent text-align: left/right/center/justify text-decoration: none/underline/overline/line-trough/blink font-family: times/courier/arial/.../serif/sans-serif/monospace/cursive/...stb..., times/...stb..., ... font-size: [%]/[int]/small/medium/large/stb... font-weight: normal/bold/bolder/lighter/[int] font-style: normal/italic/oblique

CSS property [2/2] a 3. alkalomra border-[left/right/top/bottom]-[color/style/width] border-width: thin/medium/thick/[int] border-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset border-color: [rgb]/[name]/transparent [margin/padding]-[bottom/right/left/top]: auto/[int]/[%] height/width: [int]/[%] position: static/relative/absolute/fixed [top/bottom/left/right]: [int]/[%] float: left/right/none

Negyedik alkalom Önálló feladat Készítsen bemutatkozó témájú, külső CSS-t használó oldalt, melyben legalább három független aloldal, egy keret (frameset/iframe), 5 darab belső vagy külső hiperhivatkozás (A) és 3 kép található. Az aloldalak közti navigációt is hiperhivatkozásokkal oldja meg! A feladat elkészítésekor nem használhat inline stílusokat, és közvetlenül formázó hatású tag attribútumokat (align, color, width, size, stb...).

TAG-ek az ötödik alkalomra [1/2] FORM method=get/post, action, accept-charset, name, target=_blank/_self/_parent/_top enctype= application/x-www-form-urlencoded multipart/form-data text/plain INPUT checked, disabled, maxlength, name, readonly, size, value, src, alt type= button / checkbox / file / hidden / image / password / radio / reset / submit / text nem formon: BUTTON disabled, name, type=button/submit/reset, value

TAG-ek az ötödik alkalomra [2/2] TEXTAREA cols, rows, disabled, readonly, name SELECT name, size, disabled, multiple OPTION label, disabled, selected, value OPTGROUP label, disabled LABEL for=#id FIELDSET LEGEND align=left/right/center

Hatodik alkalom Önálló feladat Készítsen álláshirdetés témájú, külső CSS-t használó oldalt, melyben egy több oldalas regisztrációs űrlap (form) is található. A feladat elkészítésekor nem használhat inline stílusokat, és közvetlenül formázó hatású tag attribútumokat (align, color, width, size, stb...). Az oldalakon legalább 5 különböző, független stílusosztályt (class) használjon fel!

Hetedik alkalom - XML „XML is a software and hardware independent tool for carrying information.” Formátum: <elem attr=”val”></elem>, <elem /> Záró tag kötelező Pontos egybeágyazás kötelező (szigorú fa- szerkezet) Csak egy legfelső szintű elem lehet („root element”) Attribútumok értékeinek idézőjelezése kötelező & és < használata kötelező Nem szóalkotó karakterek nem olvadnak egybe Újsor: csak LF, nem CRLF (win) vagy CR (mac) XML, xcv.hu + XSL

Hetedik alkalom - Validálás !DOCTYPE tag (záró tag nélkül. A fájl elején!) Típusok: CSS HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Pre-CSS HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML: <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Validálás: http://www.w3schools.com/xml/xml_validator.a sp http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

Nyolcadik alkalom Önálló feladat megajánlott jegyért