HTML nyelv.

Slides:



Advertisements
Hasonló előadás
Weblapkészítési tudnivalók 2: Útmutató az elnevezésekhez Pék Ágnes © 2009.
Advertisements

HTML nyelv Hiper-Text Markup Language 1. óra.
Szövegszerkesztés Összefoglalás.
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)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.
HTML nyelv.
HTML parancsok használata
Leírónyelvek: HTML és XHTML
Készítette: Rummel Szabolcs
Hernyák Zoltán XML és HTML.
WEBOLDALFEJLESZTÉS
Készítette: Nagy-Szakál Zoltán 2007.
A HTML alapjai Havlik Barnabás Készítette:
HTML (Hypertext Mark-Up Language). Jellemzői Szöveges alapú internetes oldalak nyelve A formázási műveleteket is szövegesen írja le Szöveget, képeket,
HTML dokumentum felépítése
Vizuális és web programozás II.
HTML oldal felépítése Készítette: Pataki Arnold
Webszerkesztés A HTML alapjai.
Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem
Microsoft Excel Általános ismeretek.
Buris Katalin V. földrajz - informatika
XHTML – a tanultak összefoglalása
Korpásné Szűcs Melinda web-referens DEENK Korpásné Szűcs Melinda web-referens DEENK.
Weblapok és készítésük
A <DIV> tag és formázás CSS-sel
DOKUMENTUMOK KÉSZÍTÉSE WORD 2007 SZÖVEGSZERKESZTŐVEL II. rész.
HTML nyelv.
Weboldalak tervezése (X)HTML.
Feladatlap stílusokra
Hyper Text Markup Language
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.
Honlap készítés 3. óra.
3. óra. Emlékeztető Oldal címe Sortörés, vízszintes vonal, címsor Betűtípus, betűméret, betűszín.
Web-grafika II (SVG) 1. gyakorlat
A szövegszerkesztés elmélete
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.
Szövegszerkesztés.
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
13.tétel Mutassa be a honlap készítésére alkalmas szoftvereket! Hasonlítsa össze a Macromedia Dreamweaver és Microsoft Office Frontpage programokat!
Html nyelv (HyperText Markup Language)
Gazdasági informatikus - Szövegszerkesztés 1 Hosszú dokumentumok kezelése.
Első lépések a szövegszerkesztő használatában
Karakterek formázása.
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)
Weblapkészítés alapjai
A HTML dokumentumokról A HTML dokumentum-formátumot tekinthetjük az ún. hyper-text egyik megvalósítási formájának is. A HTML dokumentum egy olyan szövegfájl,
A weblapkészítés alapjai
Weblapkészítés.
Java web programozás 2..
A Mozilla magyar nyelvű szerkesztőjének használata
Számítástechnika alapismeretek HTML-weblapszerkesztés.
A <DIV> tag és formázás CSS-sel
Alkalmazott Informatikai Tanszék
Webprogramozó tanfolyam
Weblapok és készítésük
Információ és kommunikáció
Windows és Linux Word 1 (1983) … Word for Windows (1989)
CSS Cascading Style Sheet HTML.
MS Office Word 2010 Szövegszerkesztés.
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.
Adatfeldolgozási ismeretek 15. ML osztály részére 2017.
MS Office Word 2010 Szövegszerkesztés.
Előadás másolata:

HTML nyelv

Általános jellemzés Hiper-Text Markup Language leíró nyelvtan normál szövegfájl HTML szerkesztő programok .html , .htm kiterjesztés index.html

Általános jellemzés utasítások – „tag”-ek: < tag > Nyitó és záró tag (pl.: <td> , </td>) foglalt szavak (pl.:head, body, table, img,…) elérési út (pl.: ../mappa/nev.jpg) színkód RGB – hexadecimális formátum: #rrggbb (pl.:fekete=#000000)

Szintaxis <HTML> …első tag <HEAD> …fejléc <TITLE>cím</TITLE> …dokumentumcím </HEAD> <BODY> …törzs . </BODY> </HTML> …lezáró tag-ek

A HTML dokumentum fejléce A böngésző nem jeleníti meg, meta-információ Kivétel: <TITLE>dokumentum címe</TITLE> karakterkészlet <META http-equiv=content-type content=text/html; charset=iso-8859-1> alkotó <META content="Szerkeszt Elek" name=author> kulcsszavak a keresőmotoroknak <META content="állat, madár, papagáj" name=keywords> szkriptek (java, php, …) <SCRIPT> </SCRIPT>

A HTML dokumentum szövegteste <BODY> tartalmi rész</BODY> <BODY background="fájlnév.kit" bgcolor="színkód" text="színkód" link="színkód" vlink="színkód" alink="színkód"> karakter <FONT face="arial" size="4" color="#ff02e7"> bekezdés <div align="center">szöveg</div>

A HTML dokumentum szövegteste bekezdés <p> illetve <br> címsorok <h1>címsor1</h1> táblázat <table><tr><td>…</td></tr></table> hivatkozás <a href="lapnév.html">szöveg</a> kép <img src="kép.jpg" alt="szöveg">

Karakter formázás <font …>szöveg</font> <font color="#FF3333" size="1">kicsi piros</font> <font face="Arial CE" size="7">ARIAL CE</font> <b>félkövér</b> <i>dőlt</i> <u>aláhúzott</u>

Karakter formázás <s>áthúzott</s> <cite>idézet</cite> <em>kiemelt</em> <strong>kiemelés</strong> <big>nagyméretű</big> <small>kisméretű</small> <sub>alsó index</sub> <sup>felső index</sup> <blink>villogó</blink>

Címszintek felépítése <BANNER>címszalag</BANNER> <H1 align="left">Legfelső szintű címsor</H1> <H2 align="center">2. szintű alcímsor</H2> <H3 align="right">3. szintű alcímsor</H3> <H4 nowrap>Negyedik szintű alcímsor</H4> <DIV align="center">szakasz</DIV>

Bekezdések felépítése <p>alapértelmezett bekezdés</p> <p align="hely"> igazított bekezdés hely: left, center, right, justify <p nowrap>tördelés tiltása</p> sortörés elem, nem új bekezdés: <br>

Felsorolás <ul> felsorolás kezdete <li>szöveg első sor <li>szöveg második sor <ul><li>szöveg második szintű felsorolás </ul> felsorolás vége </ul> felsorolás vége <ul type="típus"> felsorolás elem beállítása típus: circle, disc, square <ul src="fájlnév.kit"> saját felsorolás elem beállítása <li> -nek nincs záró tag-je!

Sorszámozás <ol> sorszámozás kezdete <li>szöveg első sorszám <li>szöveg második sorszám <ol><li>szöveg második szint </ol> </ol> sorszámozás vége <ol seqnum="szám"> kezdő sorszám beállítása <ol continue> előző sorszámozás folytatása

Képek aktuális szövegpozícióban: <img src="elérési_út/fájlnév.kit"> blokkban pozicionálva: <img align="hely" src="fájlnév" hspace="vszám"  vspace="fszám" width="szméret" height="mmeret"  alt="szöveg">

Hivatkozások a HTML lényege lapon belül <a href="#vege">végére</a> <a name="vege">vége</a> lapok között <a href="fájlnév"><img src="fájlnév"></a> külső <a href="http://www.lap.hu">lap</a> levélküldő <a href="mailto: hmg@index.hu">írj</a> nekem!

Táblázat <table> táblázat <tr> 1. sor <td></td> 1. cella <td></td> 2. cella </tr> 1. sor lezárása <tr> 2. sor </tr> 2. sor lezárása </table> táblázat vége

Táblázat minden sorban azonos számú cella <table border="szám" align="hely"  cellpadding="szám"  cellspacing="szám"  bgcolor="szín"> elegendő az első sor celláit méretezni <td width="szám" height="szám" > cellák egyesítése: colspan="cellaszám" – vízszintes rowspan="cellaszám" – függőleges

HTML kódszerkesztők Html-mankó (Editor2Web) Notepad++

HTML szerkesztők WYSIWYG, a „What You See Is What You Get”, azaz  „amit látsz, azt kapod” NVU Dreamweaver FrontPage

Kiegészítés CSS használata - http://www.csszengarden.com/tr/magyar/