Honlapépítéshez kódok

Futó szövegelemek egy cikken belül, amelyek az egérmutató hatására megállnak: 

1) Függőleges felsorolás egy cikken belül.

- függőleges felsorolás
- függőleges felsorolás
- függőleges felsorolás

Ennek a példa futószövegnek a kódja:

<marquee width="200" height="65" direction="up" scrollamount="1" onmouseout="this.start()" style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=30, FinishX=0, FinishY=0)" onmouseover="this.stop()"><center><font face="verdana" color="#777777">

- függőleges felsorolás<br />
- függőleges felsorolás<br />
- függőleges felsorolás<br />
</font></center></marquee>

2) Vízszintesen futó szöveg elhelyezése egy cikken belül:

• vízszintes futó szöveg a cikken belül •

Ennek a példaszövegnek a kódja:

<marquee onmouseover="this.stop()" style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=30, FinishX=0, FinishY=0)" onmouseout="this.start()" scrollamount="1" direction="left"><font face="verdana" color="#777777"><font style="color: rgb(119, 119, 119);">• vízszintes futó szöveg a cikken belül •</font></marquee>

3) A fenti szövegekbe linkeket is el lehet helyezni, azokat futtatva körbe.

Jó minőségű email-fiókot lehet itt nyitni: Gmail.com

Ennek a példának a kódja:

<marquee onmouseover="this.stop()" style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=30, FinishX=0, FinishY=0)" onmouseout="this.start()" scrollamount="1" direction="left"><font face="verdana" color="#777777">Jó minőségű email-fiókot lehet itt nyitni: <a href="http://gmail.com" target="_blank">Gmail.com</a></font></marquee>

4) Ajánlott oldal a témához:

http://www.hotdog.hu/magazin/magazin_article.hot?m_id=18052&a_id=256535&h_id=60091

Forrás: http://blog.eaposztrof.com/2008/07/free-domain-ingyen-segitseg-bealitas.html

Egy baratom regisztralt a teneved.co.cc ingyenes domainre, es mivel nem szakember, nem tudta hogy hogyan kell tovabblepni. sokan igy vannak ezzel, ime egy kis segitseg, neki, es nektek:

Először is, mi az a domain?
a domain, egy felhasznalo altal meghatarozott nev, amely a szerverek (jelen esetben webszerverekrol beszelek, amelyek a honlapokat taroljak) IP cimet (amely egy 4x3-as, pontokkal elvalasztott szamsor) maszkolja.
tehat a honlapokat tarolo szerverek cime peldaul igy nez ki: 064.233.167.099 es ehhez tartozik egy domain, amely jelen esetben: google.com
ha bongeszo cimsoraba beirjuk az ip-t ugyanugy megkapjuk az oldalt, mintha a domain-nel. a domaint a domain name server-ek (DNS server) forditjak le a domaineket ip-kre, es az alapjan talalunk ra a szerverekre.

a domaineknek kulonbozo vegzodeseik lehetnek, amely az orszagnevek, szervezeti formak roviditesei, es nemsokara bevezetik a szabad domainvegzodeseket is.

abban az esetben hasznos egyedi domain vasarlasa, ha nem sajat szerveren tarolod honlapodat, vagy szerveredhez nincs domain rendelve..

sokat szamit egy sajat domain uzleti oldalak eseten is, mivel ingyenes domaineken es tarhelyeken tarolt oldalakon keresztul nem szivesen vasarolnak az emberek, raadasul konnyebben megjegyezheto es latvanyosabb.

jelen esetben a co.cc az a szolgaltato, aki ingyen, szeleskoru szolgaltatasokkal biztosit egyszeru domainneveket, amelyrol nem latszik hogy ingyenes, nem tartozik hozza rekla, sem semmilyen kotelezettseg. raadasul pillanatok alatt beuzemelheto, es nem kell varni ra.. ehhez segitseg az alabbi leiras.

a co.cc-re valo regisztracio utan, valaszthatunk, hogy domainunket sajat szerverre iranyitjuk (1. Manage DNS), olyan szerverre, ahol csak bizonyos szolgaltatasokat akarunk igyenybevenni az uj domainunkkel (2. Zone Records), vagy csak meglevo honlapunkhoz akarunk egy ujabb domaint (3. URL Forwarding)

1. Manage DNS eseteben a szervernek tudnia kell fogadni a domaint, tehat kell fusson rajta name server szolgaltatas. ez sajat, vagy fizetos tarhelyek eseteben indokolt. ekkor minden domainhez kotot szolgaltatast az adott szerver szolgal ki (pl.: web, email, ftp..)
ezt az opciot valasztva maximum 48 orat kell varjunk, amig a DNS szerverek rogzitik az ip-hez tartozo domainnevet.
2. Zone Records. ennek a beallitasaihoz egy olyan szerver domainjat rogzithetjuk, amely tarolja honlapunkat, es megengedi, hogy felulirjuk az o domainjat.
ha peldaul blogger.com-on regisztralunk egy blogot, a "Settings" > "Publishing" menupont alatt atvalthatunk "Custom Domain"-ra, itt az "Advanced Settings"-nel beallithatjuk a co.cc-s domainunket.
a "Redirect" elott a dobozt bejeloljuk, igy a www.sajatdomain.co.cc es a sajatdomain.co.cc is hasznalhato lesz.
a domain-szolgaltatonal, ami jelen esetben a co.cc, a Zone Records beallitasanal megadjuk peldaul a sajatdomain.co.cc vagy blog.sajatdomain.co.cc hostot, TTL idot minel kevesebbre alitjuk, atitranyitas tipusa: CNAME. value: ghs.google.com
ebben az esetben a blogspot-os blog eddigi cime automatikusan atall az uj, sajatdomain.co.cc vagy blog.sajatdomain.co.cc domainra.
ha a sajatdomain.co.cc moge egy honlapot akarunk, akkor a zone records tipusanal, az "A" recordot valasztjuk ki, es a value mezobe a tarhelyszolgaltato ip-jet irjuk (extra.hu eseteben 80.77.113.72). a tarhely domainbeallitasanal csak a domain nevet kell felvenni.
3. URL Forwarding eseteben tovabbitjuk a sajatdomain.co.cc-t a mar meglevol oldalra. itt ha el akarjuk takarni az eredeti cimet, valaszthatjuk az "URL hidding" funkciot, ha nem akkor a "path forwarding"-ot. itt tudunk egyutmukodni a Google Apps-szal, amelyre elozoleg regisztralni kell, es CNAME recordot igenyelni

Még a témához kapcsolódó cikkek, linkek:

http://www.blogtippek.info/co.cc-domain-beallitasa-blogger-fiokhoz/

http://www.netszabadsag.co.cc/domain/co-cc-domain-regisztracio.php

http://alfawebhost.co.cc/

Az alábbi karaktereket ismeri fel a rendszer:
  %a - hét napja, rövidítve
  %A - hét napja, teljes
  %b - hónap neve, rövidítve
  %B - hónap neve, teljes
  %d - nap, 2 számjegy ("01" .. "31")
  %D* - azonos %m/%d/%y-val
  %e* - a hónap napja (1 - 31)
  %H - óra, 24-órás formátumban, 2 számjeggyel ("00" .. "23")
  %I - óra, 12-órás formátumban, 2 számjeggyel ("01" .. "12")
  %m - hónap, számmal ("01" .. "12") [van kitöltő szóköz]
  %M - perc [2 számjegy]
  %p - "am" vagy "pm", annak megfelelően, hogy az adott időpont délelőtt, vagy délután van-e
  %R* - időpont 24 órás formátumban [pl.: 00:00][Itt nincs másodperc!!!]
  %S - másodperc [2 számjegy]
  %T* - idő, azonos a %H:%M:%S-val
  %y - év 2 számjeggyel ("00" .. "99")
  %Y - év, évszázaddal együtt
  %Z - időzóna neve [3 betű]
  %% - a '%' karakter

* Nem működik Windows szervereken.

Forrás: http://www.tinyportal.eu/forum/index.php?action=printpage;topic=125.0

Ha már unod,hogy a portálépítős portálokon csak egy adott számú egérkövető közül válogathatsz, itt a lehetőség,hogy olyan egérkövetőt csinálj,amit mindig is szerettél volna.
Csak másold be a kedvenc képed URL-címét a Script generátorba, és egy gombnyomásra máris kész a saját egyedi HTML kódod!

Tovább olvasom ....

Forrás: http://www.hotdog.hu/magazin/magazin_article.hot?m_id=28583&a_id=467152&h_id=89288

Nagyon szép hatást lehet elérni csak a <div> HTML tag és egy kis CSS kód elegyével, demo is van, bal oldalt fent van a menü, annak az elkészítési módját fogom bemutatni, van két doboz és ha az 1ikre ráviszed az egeret akkor kinyílik a másik.
A dobozok nem működnek Internet Explorerben!
A működési elv az hogy a kódban az egyik doboz a másikban van és CSS kóddal van kipozícionálva, de ebbe inkább nem megyek bele, nem az a lényeg hogyan működik, hanem mit írj át a kódban:


<div id="menu_box1" class="menu_box" style="position: fixed; top: 184px; left: 3px; overflow: hidden;"><!-- HTML & CSS by srmark -->
<div class="menu_box" style="height: 30px; width: 130px; position: fixed; top: 131px; left: 3px; font-size: 30px; text-align: center; font-family: Courier New;">MENÜ</div>
<div style="padding: 3px; font-size: 16px; font-family: Courier New !important; text-align: center;">Ide jön a szöveg vagy a tartalom kódja, lehet kép vagy akármi más</div></div><!-- HTML & CSS by srmark -->

<style>
div.menu_box {border: 1px solid #AAAAAA; background-color: #F5F5F5; position: fixed;}
div.menu_box:hover {border: 1px solid #000000; background-color: #EEEEEE; z-index: 1 !important;}
#menu_box1 {height: 10px; width: 130px;}
#menu_box1:hover {width: 130px !important; height: 350px !important;}
</style>




Magyarázat részenként:
Piros: a tartalom doboz pozíciója pixelben, a pozícionálás úgy van beállítva hogy az oldal görgetése közben nem mozdul el a menü
Kék: a Menü felirat dobozának szélessége(width) és magassága(height), pozíciónálása (ugyanúgy mint az előzőnél), illetve a Menü szöveg taulajdonságai (betűméret betűtípus és középre igazítás)
Zöld: a tartalom dobozban lévő szövegek tulajdonságai
Narancssárga: A menü és tartalom doboz keret és háttérszíne alaphelyzetben, tehát amikor nincs rajta az egér
Lila: a menü és tartalom doboz keret és háttérszíne amikor rajta van az egér
Bordó: A tartalom doboz szélessége és magassága alaphelyzetben, tehát amikor nincs rajta az egér
Világoszöld: A tartalom doboz szélessége és magassága amikor rajta van az egér

Forrás: http://www.hotdog.hu/magazin/magazin_article.hot?m_id=28583&a_id=465305&h_id=89288

Kattints!elsőmásodikharmadiknegyedikötödikhatodikhetedik

Amit ebben a cikkben találsz az egy doboz ami egérrávitelre lenyílik:

 

<div align=center>
<table height=270 width=400 border=0 align=center>
<tr>
<td>
<marquee width=400>
<img src=KÉPDIREKTLINKJE />
<img src=KÉPDIREKTLINKJE />
</marquee>
</td>
</tr>
</table>
</div>

Szöveg, bekezdés behúzása:
 

<blockquote>
SZÖVEGED
</blockquote>

Szöveg emelése, süllyesztése:

Ha ^felemelni akarod, használd ezt a kódot:

<SUP>FELEMELT SZÖVEG</SUP>

És a _{lesüllyesztett} szöveghez:

<SUB>LESÜLLYESZTETT SZÖVEG</SUB>

Ehhez pozicionálni kell a képet.

Egy egyszerű kóddal:

position: absolute; top: 200px; left: 400px;

                   top: fentől számított távolság pixelben

                   left: a bal margótól számított távolság pixelben

                   absolute: azt jelenti, hogy pontosan az oldal szélétől kezdi a számítást

Ezek az értékek tetszés szerint állíthatóak.

A teljes kód:

<img style="position: absolute; top: 200px; left: 400px;" src="http://akepurlcime.jpg">

A pozicionálás nemcsak kép esetében, hanem bármilyen elem (pl. chat, fejléces menü, futó szöveg, frissítések, link, stb.) külön elhelyezésére is alkalmas.

Pl. egy doboz, pl. menünek elhelyezése. Itt már szélesség, magassság, háttér, esetleg keret adatot is meg kell adni:

<div style="position: absolute; top: 131px; left: 3px; height: 30px; width: 130px; border: 1px solid #000000; background: #FFFFFF url();">Ide jöhet a Tartalom</div>

Ha bizonyos szavak, szövegrészek fölé visszük az egeret, a szó fölött egy kis üzenet jelenik meg, buborékban. 

megjelenő szöveg

A kód:

<a href="az oldal url-je" title="magyarázó szöveg">megjelenő szöveg</a>

Ha nem egy linkhez akarunk magyarázatot fűzni, hanem csak sima szöveghez, akkor az url helyére egy # jelet kell írni.

<a href="#" title="magyarázó szöveg">megjelenő szöveg</a>

Ha kép is tartozik a linkhez:

<a href="az oldal url-je" title="magyarázó szöveg"><img src="megjelenő kép url-je" alt="kép helyett megjelenő szöveg" title="képmagyarázó szöveg" /></a>

Forrás: http://anyuhamos.freeblog.hu/tags/sablon/page/2/

Menügomb készítése két különböző színű képből. Egérrel ha fölé megyünk, megváltozik a gomb.

A kód:

<a href="AZ URL HELYE, AHOVA A MENÜGOMB ÁTIRÁNYÍT" target="_self">
<img src="1. KÉP"
onmouseover="this.src='2. KÉP';"
onmouseout="this.src='1. KÉP';"/>

A kód kitöltve, a fent látható demó kódja:

<a href="http://www.hotdog.hu/magazin/magazin.hot?m_id=29718" target="_self">
<img src="http://image.hotdog.hu/_data/members2/366/177366/images/Design/Men%FCk/fooldal.png"
onmouseover="this.src='http://image.hotdog.hu/_data/members2/366/177366/images/Design/Men%FCk/fooldalMouseOver.png';"
onmouseout="this.src='http://image.hotdog.hu/_data/members2/366/177366/images/Design/Men%FCk/fooldal.png';"/>
 

Lenyíló dobozok

Alapkód, ha egyedit szeretnél:

<select style="background-color:ff1f88;border-color:404040;font-family:arial;text-transform:none;color:ffffff;font-size:10;">
<option>Legfelső szöveg</option>
<option>Lenyíló szöveg</option>
</select>

További lenyíló dobozok:

I LOVE ♥ YOUR TEXT HERE!!! YOUR TEXT HERE!!! YOUR TEXT HERE!!! YOUR TEXT HERE!!! YOUR TEXT HERE!!! YOUR TEXT HERE!!!

Javitsd át a kék részben, csak a szöveget (idézőjelek között): amire szeretnéd.

Szöveget HTML nyelv szabályai szerint írj a kódba.

Ebbe a scriptbe,illetev keretbe háttérképet is tehetsz.
Nincs más dolgod,mint a kép URL címét lecserélni.
var scrollerbackground='http://www.net-cafe.hu/wallpapers/00002616.jpg'

Egy könnyen kezelhető fényújság!
És sose feledd,látogasd a honlapom rendszeresen,mert jobbnál jobb HTML kódokat találhatsz rajta,gyakori frissítéssel!
üdv

Start | Stop

Firefoxban nem látszik.

<SCRIPT language=JavaScript>
 
<!-- Begin
text = "Üdvözöllek az oldalamon!"; // The text to scroll
color1 = "#5c6390"; // original text color
color2 = "#ffffff"; // new character color
fontsize = "6"; // font size of text
speed =" 98 "; // how fast to rotate to next character
// time is in milliseconds, (i.e. 1000 = 1 second)
 
i = 0;
if (navigator.appName == "Netscape") {
document.write("<layer id=a visibility=show></layer><br><br><br>");
}
else {
document.write("<div id=a></div>");
}
function changeCharColor() {
if (navigator.appName == "Netscape") {
document.a.document.write("<center><font size =" + fontsize + "><font color=" + color1 + ">");
for (var j = 0; j < text.length; j++) {
if(j == i) {
document.a.document.write("<font color=" + color2 + ">" + text.charAt(i) + "</font>");
}
else {
document.a.document.write(text.charAt(j));
}
}
document.a.document.write('</font></font></center>');
document.a.document.close();
}
if (navigator.appName == "Microsoft Internet Explorer") {
str = "<center><font size=" + fontsize + "><font color=" + color1 + ">";
for (var j = 0; j < text.length; j++) {
if( j == i) {
str += "<font color=" + color2 + ">" + text.charAt(i) + "</font>";
}
else {
str += text.charAt(j);
}
}
str += "</font></font></center>";
a.innerHTML = str;
}
(i == text.length) ? i=0 : i++; // reset after going through all letters
}
setInterval("changeCharColor()", speed);
// End -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
function ShadowWave()
 {
 if(document.getElementById && window.print)
  {
  var dir=Math.random();
  if (dir<.25) {dir=315;color="#FFFF00"}
  if (dir<.50) {dir=45;color="#99FF00"}
  if (dir<.75) {dir=135;color="#66FFFF"}
  if (dir<1) {dir=225;color="#FFCCFF"}
  document.getElementById("texto_foco").style.filter="shadow(color="+color+",direction="+dir+",enabled=1)";
  }
 }
</SCRIPT>

 <DIV ID="texto_foco" STYLE="HEIGHT=2"><center>Hírek, újdonságok! </center></DIV>
<SCRIPT LANGUAGE=JavaScript>
setInterval("ShadowWave()",500);
</SCRIPT>

<b>
<font size="5">

<script>

// ********** MAKE YOUR CHANGES HERE

var text="Üdvözöllek az oldalamon!" // YOUR TEXT
var speed=80 // SPEED OF FADE

// ********** LEAVE THE NEXT BIT ALONE!

if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</font></b>

Piros: a szöveg helye

Zöld: a szöveg, majd a pulzálás színe 

Firefoxban nem látszik.

 A kód:

<!--Inicio do script -->
            <DIV style="font: 10pt arial"></DIV>
            <DIV style="width: 761; height: 1"><BR></DIV><SPAN id=theText style="width: 100%">
            <H2> </H2>
            <H2><font color="#FFFFFF"> .  ~*~ .  MANO DESIGN.
            ~*~ .</font></H2></SPAN>
            <SCRIPT>
<!--
/*
Pulsating Text (Chris A e-mail: KilerCris@Mail.com)
Permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

file://range of glowing
var from = 5;
var to = 11;
file://speed of pulsing
var delay = 55;
file://color of glow, name or RGB value (example:'#00FF00')
var glowColor = "#5C6390";

file://NO MORE EDITING!!!
var i = to;
var j = 0;
file://can be called here or whenever you want the text to start pulsing
textPulseDown();
function textPulseUp()
{
if (!document.all)
return
if (i < to)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i++;
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}
if (i = to)
{
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}

}
function textPulseDown()
{
if (!document.all)
return
if (i > from)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i--;
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}
if (i = from)
{
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}
}
file://-->
</SCRIPT>
<!--Final do script -->

<div align=center>
<table width=400 border=0 align=center>
<tr>
<td>
<marquee width=400>
<img src=http://www.quackit.com/pix/milford_sound/kea_and_homer_tunnel2_t.JPG />
<img src=http://www.quackit.com/pix/milford_sound/milford_sound_t.JPG />
<img src=http://www.quackit.com/pix/smile.gif />
</marquee>
</td>
</tr>
</table>
</div>

Háttér, színes doboz a szövegnek:

<style type="text/css">
.colorBox {
    font: bold large cursive;
    border:1px solid #000000;
    background-color:#ff9900;
}
</style>
<div class="colorBox">
<p>This div element has a background-color of #ff9900</p>
</div>
 

Csupa nagybetűs szöveg:

<style type="text/css">
h1.uppercase { text-transform: uppercase }
</style>
<h1 class="uppercase">Uppercase or lowercase?</h1>

Csupa kisbetűs szöveg:

<style type="text/css">
h1.lowercase { text-transform: lowercase }
</style>
<h1 class="lowercase">Uppercase or lowercase?</h1>

<p style="border-width:1px;border-style:solid;border-color:blue;">This text has border styles applied using the border-width, border-style, and border-color properties.</p>

This text has border styles applied using the border-width, border-style, and border-color properties.

Border Styles

Borders can have the following styles.

<p style="border:4px solid blue;">This text has a border style of 'solid'.</p>
<p style="border:4px dotted blue;">This text has a border style of 'dotted'.</p>
<p style="border:4px dashed blue;">This text has a border style of 'dashed'.</p>
<p style="border:4px double blue;">This text has a border style of 'double'.</p>
<p style="border:4px groove blue;">This text has a border style of 'groove'.</p>
<p style="border:4px ridge blue;">This text has a border style of 'ridge'.</p>
<p style="border:4px inset blue;">This text has a border style of 'inset'.</p>
<p style="border:4px outset blue;">This text has a border style of 'outset'.</p>
<p style="border:4px hidden blue;">This text has a border style of 'hidden'.</p>

This results in:

A keretek variációi

If you don't want the border settings to be applied to all four sides, or if you want each side to have different styles applied, you can use the following properties:

Explicit Properties

• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-left-color
• border-left-style
• border-left-width
• border-right-color
• border-right-style
• border-right-width
• border-top-color
• border-top-style
• border-top-width

Example:

This results in:

Shorthand Properties

The following properties provide you with a more concise way of specifying font properties for each side.

• border-bottom
• border-left
• border-right
• border-top

Example:

This results in:

<h3 style="cursor:help">Hover over me... "Help"</h3>
<h3 style="cursor:pointer">Hover over me... "Pointer"</h3>
<h3 style="cursor:wait">Hover over me... "Wait"</h3>
<h3 style="cursor:crosshair">Hover over me... "Crosshair"</h3>
<h3 style="cursor:move">Hover over me... "Move"</h3>
<h3 style="cursor:url(http://www.quackit.com/pix/smile.gif),auto">Hover over me... "Smile"</h3>
 

Futó szöveg kódja: <marquee>IDE JÖN A SZÖVEG</marquee>

Ha a mozgás sebességét is akarod változtatni (minél nagyobb a szám, annál gyorsabban megy az üzenet):

<marquee scrollamount="5">IDE JÖN A SZÖVEGED<marquee>

További kódok a futó szövegekhez:

http://www.quackit.com/myspace/codes/myspace_marquee_codes.cfm