→ →
Különleges írásjelek
Wikipédia hu
UTF-8 Emoji Faces (Smileys)
W3Schools.com
| nem törő szóköz (a szöveg egy adott pontján ne legyen automatikus sorcserélés)
✓ | ✓ pipa
Csillagok: *, **, ***, ⁂ és még
több
Mat. karakterek
⌀ | ⌀ | Ø átmérő
• vagy • vagy • vagy • | golyó
⋅ | ⋅ · DOt operátor, szorzás ponttal
° | ° ° fok
− | − "hosszú" mínusz
± vagy ± vagy ± vagy ±
√ | √ | √ | √ √
∛ | ∛
∜ | ∜
¼ | ¼ ¼
½ | ½ ½
¾ | ¾ ¾
Idézőjel, quotation mark, „ ”: „ ” vagy „ ”
Belső vagy másodlagos idézőjel, guillemet, » «: » « vagy » «
Harmadlagos idézőjel, single quote ’: ’ vagy ’
Írógép-idézőjel, quotation mark, ": " vagy "
≠ | ≠ | ≠ ≠
≤ | ≤ | ≤ ≤
≥ | ≥ | ≥ ≥
≡ | ≡ ≡
> | >
< | <
≃ | ≃ kb. egyenlő
~ | ~ kb.
∞ | ∞ ∞
∫ | ∫ ∫
Halmazok, számhalmazok
∈ | ∈ eleme
∀ | ∀ minden...
∃ | ∃ van/létezik...
ℕ | ℕ term. számok
℔ | ℤ egész számok
ℚ | ℚ rac. számok
ℛ | ℛ írott R
ℝ | ℝ kétlábas R
ℰ | ℰ írott E
<i><b><span style="font-size: 14pt; font-family: 'French Script MT';">R</span></b></i> |
R
Nyilak
→
⇒
&apm;#x27F9; | ⟹ következik, az dupla szárú nyíl jobbra
→ | → nyíl
⇵ vagy ⥮ vagy ⥯ | ⇵ vagy ⥮ vagy ⥯ ellentétes irányúak
⥣ vagy ⥥ | ⥣ vagy ⥥ egyirányúak
↦ | ↦ talpas nyíl jobbra
↢ | ↢ talpas nyíl balra
⟹ vagy ⇒ | ⟹ vagy ⇒ következik, az dupla szárú nyíl jobbra
← | ← ←
↑ | ↑ ↑
→ | → →
↓ | ↓ ↓
↔ | ↔ ↔
⇐ | ⇐ ⇐
⇑ | ⇑ ⇑
⇒ | ⇒ ⇒
⇓ | ⇓ ⇓
⇔ | ⇔ ⇔
Görög betűk
µ | µ | μ | μ μ
λ | λ λ
β | β β
∆| Δ| Δ Δ
δ | δ δ
Σ | Σ | ∑ | ∑ | ∑ vagy &Summa; Σ
ρ | ρ ρ
Π | Π | ∏ | ∏ Π (nagy pi)
π | π π (kis pi)
<span style="font-family:Symbol">p</span>
p szebb pi
α | α α
<span style="font-family:Symbol">a</span>
a szebb alfa
γ | γ
<span style="font-family:Symbol">g</span>
g szebb gamma
Ω | Ω Ω
ω | ω ω
ν | ν ν
ε | ε ε
§ | § §
© | © ©
® | ® ®
™ | ™ ™
€ | € €
£ | £ £
Katt!
Szövegformázás
<span style="font-weight:bold">
félkövér betűk</span> / <b>
<span style="font-style:italic">
dőlt betűk</span> / <i>
<small>
apró betű</small>
<span style="text-decoration:line-through;">
áthúzás</span> / <s>
<span style="text-decoration: underline;">
aláhúzás</span> / <u>
<wbr> – feltételes sortörés
­ - feltételes elválasztó jel
- nem törhető szóköz
Színkódok
W3 Schools;
Wikipédia
betűszín: <span style="color:red">
span style</span> vagy
<font color="#ff0000">
font</font> -
Betűtípusok
W3 Schools
<span style="font-family:symbol">
symbol betütípus</span> - Symbol betütípus
<span style="font-family:monospace">
írógép betütípus</span> / <tt>
<font face ="Comic sans MS">
Comic sans MS betütípus</font>
<font face="Arial">
Arial betütípus</font>
Betűméret (size) értéke lehet 1–7-ig (abszolút méret), vagy -3–+3-ig (relatív méret)
<font size ="6">
Font</font>
<span style="font-size:smaller">
kisebb betűméret</span> / <small>
<span style="font-size:larger">
nagyobb betűméret</span> / <big>
<span style="font-size:x-large">
nagy betűméret</span>
<span style="font-size:80%">
80%-os betűméret</span>
<img src="#">
Kép, imgage: <img src="#">
Kép méretezve: <img src="#" alt="..." height="42" width="42">
Kép a szöveggel egy sorban: <img src="#" height="22" width="20" valign="center" v:shapes="#">
Képes link:
<a href='#' target='_blank' ><img src="#"></a>
<a href='#' target='_blank' title='címke' ><img src="#"></a>
HTML Image Map, képtérkép
Free Online Image Map Generator
hu;
en
-------------
Az image map lényege:
- Egyetlen <img> képet használsz.
- A kép különböző részeire „kattintható területeket” rajzolsz.
- Minden területhez külön link tartozik.
⭐ HTML Image Map használata
1. Helyezd el a képet usemap attribútummal:
<img src="kepek/kepem.jpg" usemap="#terkep" alt="Interaktív kép">
2. Hozd létre a map-et a kattintható területekkel:
<map name="terkep">
<!-- Téglalap alakú kattintható terület -->
<area shape="rect" coords="x1,y1,x2,y2" href="link.php" alt="Első terület">
<!-- Kör alakú terület -->
<area shape="circle" coords="x,y,r" href="link.php" alt="Második terület">
<!-- Sokszög alakú terület (tetszőleges forma) -->
<area shape="poly" coords="x1,y1,x1,y2,x3,y3,x4,y4" href="link.php" alt="Harmadik terület">
</map>
📌 A coords értelmezése
Origó a kép bal felső sarkában. (x-tengely jobbra, y-tengely lefelé)
- rect - bal felső sarok koordinátái: x1,y1; jobb alsó sarok koordinátái: x2,y2
- circle - középpont koordinátái: x,y; radius: r
- poly x1,y1,x2,y2,x3,y3, ...
Koordinátákat grafikában lehet mérni — például egy képszerkesztő programmal (GIMP, Photoshop, Paint.NET).
🧰 Vannak online eszközök, amik a képre kattintva automatikusan legenerálják a coords értékeit:
Google:
My Maps;
My Maps Help
www.image-map.net;
www.canva.com
div
<div style="color:blue;>
Színes tartalom</div>
Igazítás középre:
<div style="text-align:center;">..</div>
Balmargó :
<div style="margin-left:50px;">..</div>
<div class="kiemeles">
Kiemelés
</div>
<div class="megjegyzes">
Megjegyzés
</div>
<div class="pelda">
Példa
</div>
<div class="megoldas">
Magoldás
</div>
Spec. HTML utasítások
<cite> – mű címe
<q> – idézet
<dfn> – definíció
<abbr> – rövidítés
<code> – programkód
<var> – változó
<samp> – minta kimenet
<kbd> – felhasználó által adott bemenet
<time> – dátum és idő megadására, időtartam megadás
PHP weboldal létrehozása - toggle szkripttel
<!DOCTYPE html><html lang='hu'>
<?php
$oldal = "debora";
$title = "Minta";
$cim = "Minta";
include("../pr/_modulok/kellek_head.php");
include("../pr/_modulok/fejlec.php");
$url = "https://debora.hu/";
// $kepernyo = 310 - kellek_head.php áll. tartalmazza
if ($nezet == "mobil") {$szovegmezo_cols = 60; $tartalom_szelessege = 310;}
if ($nezet == "asztali") {$szovegmezo_cols = 50; $tartalom_szelessege = 900;}
?>
<script type='text/javascript'>
function viewMore(div) {
obj = document.getElementById(div);
col = document.getElementById('x' + div);
if (obj.style.display == 'none') {
obj.style.display = 'block';
col.innerHTML = 'Katt';
} else {
obj.style.display = 'none';
col.innerHTML = 'Katt!';
}
}
</script>
<script language='JavaScript'>
function toggleZip(id) {
var zip = document.getElementById('zip'+id)
var tip = document.getElementById(id);
tip.style.display = (tip.style.display != 'none') ? 'none' : '';
}
function toggleDiv(divName) {
var t = document.getElementById(divName);
if (!t)
return;
t.style.display = (t.style.display != 'none') ? 'none' : '';
}
function toggle(div_id) {
var allapot = document.getElementById(div_id).style.display;
if (allapot == 'block') {
document.getElementById(div_id).style.display = 'none';
} else {
document.getElementById(div_id).style.display = 'block';
}
}
</script>
</head>
<body>
<center><header id='fejlec' style='background-color:#cbe0e1; height:" . $szovegmezo_cols . "px; text-align:center; vertical-align: middle;'><h3><?php print $cim; ?></h3></header></center>
<DIV id="tartalom" style="margin-left:20px;">
<br>
MINTA!!!
</DIV>
<div class='clear'></div>
</body></html>
<?php
$title = "minta";
$oldal = "Minta";
$cim = "Minta !!!";
$home = "https://debora.hu/";
print "<!doctype html><html lang='hu'>";
include("../../kellekek/head.php");
print "</head>";
print "<body>";
print "<center>";
include("../../modulok/fejlec.php");
print "</center>";
print "<DIV id='tarolo' style='width:" . $kepernyo . "px;'>";
print "MINTA!!!";
print "</DIV>";
print "<div class='clear'></div>";
print "</body></html>";
?>
<script>
function megjelenites(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function elrejtes(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("katt").innerHTML =
xhttp.responseText;
}
</script>
-------------
Ugrás - html-állományon belül - egy adott helyre:
- Ugrás: <a href='#ide'>IDE</a>
- Hely megadása: <div id="ide"> vagy <span id="ide"><span> vagy stb.
Ugrás vissza a html-állományon elejére:
- Ugrás: <a href='#00'>⇑</a>
- Hely megadása: <body id="00">
Megjegyzés:
elje: <!--
vége: -->
<sup>
felső index</sup>
<sub>
alsó index</sub>
<br> / <b> .. </b>
<a href='#' target='_blank' >.</a>
<p> .. </> / <span> .. </span>; <center> .. </center>
2 <sup>2</sup>
n <sub>n</sub>
Lista<ul>
<li>.</li>
<li>.</li>
</ul>
<center>
<img height='22' width='20' valign='center' v:shapes='#' src='../7_Sorozatok/kepek/graf_szazalek_13.jpg'>
</center>
-------------
<a onclick="toggleZip('alcim1')"><h2>Toggle</h2></a>
<div id='alcim1' style='display:none;margin-left:10px; border: 2px solid brown; padding:15px;'>
kifejtés
</div>
-------------
<button type="button" title="#" onclick="megjelenites('a.php', myFunction)">#</button>
.
.
<!-- Ne töröld le!! -->
<div id="katt"></div>
<!---->
-------------
<center><canvas id=".." width="300" height="200" style="border:1px solid #d3d3d3;"></canvas></center>
-------------
Még több ....
Mobilméret ... × 600 (max) / kicsi ... × 120 (max)