HTML-szerkesztés kezdőknek!!!
Jelentkezz be a hozzászóláshoz.
These are my friends, see how they glisten...
A null.gif egy 258*33 méretû teljesen átlátszó gif kép. Szóval létre kell hozni egyet.
Vagy módosítsd következõképp a HTML kódot:
<div id="center2">
<a href="main.htm">
<div></div>
</a>
</div>
Akkor a CSS-kód a következõképp módosul:
#center2 a div {
cursor: pointer;
background: url("fullflash_04.jpg") center top no-repeat;
width: 258px;
height: 33px;
margin: 0px;
padding: 0px;
border: none;
}
#center2 a:hover div {
cursor: pointer;
background: url("rollover_04_04.jpg") center top no-repeat;
width: 258px;
height: 33px;
margin: 0px;
padding: 0px;
border: none;
}
egyedüül az a gond, hogy a piros belépés felirat az a null.gif miatt eltünt és mot ott semi nincs😞
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Indexoldal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="row1">
<div id="leftcell"></div>
<div id="centercell">
<div id="center1"></div>
<div id="center2">
<a href="main.htm"><img src="null.gif" alt="Belépés" width="258" height="33" border="0" /></a>
</div>
</div>
<div id="rightcell"></div>
</div>
<div id="row2"></div>
</div>
</body>
</html>
A null.gif egy 258*33 méretû teljesen átlátszó gif kép.
A HTML kódhoz tartozó CSS kód (style.css):
body {
background-color: #ffffff;
color: #000000;
margin: 0px;
padding: 0px;
text-align: center;
}
#container {
position: absolute;
background-color: #ffffff;
color: #000000;
width: 772px;
height: 431px;
top: 50%;
left: 50%;
margin: -215px auto auto -386px;
padding: 0px;
border: none;
vertical-align: middle;
text-align: left;
}
#row1 {
width: 772px;
height: 324px;
margin: 0px;
padding: 0px;
border: none;
}
#leftcell {
background: url("fullflash_01.jpg") center top no-repeat;
width: 257px;
height: 324px;
margin: 0px;
padding: 0px;
border: none;
float: left;
}
#centercell {
width: 258px;
height: 324px;
margin: 0px;
padding: 0px;
border: none;
float: left;
}
#center1 {
background: url("fullflash_02.jpg") center top no-repeat;
width: 258px;
height: 291px;
margin: 0px;
padding: 0px;
border: none;
}
#center2 a img {
background: url("fullflash_04.jpg") center top no-repeat;
width: 258px;
height: 33px;
margin: 0px;
padding: 0px;
border: none;
}
#center2 a:hover img {
background: url("rollover_04_04.jpg") center top no-repeat;
width: 258px;
height: 33px;
margin: 0px;
padding: 0px;
border: none;
}
#rightcell {
background: url("fullflash_03.jpg") center top no-repeat;
width: 257px;
height: 324px;
margin: 0px;
padding: 0px;
border: none;
float: left;
}
#row2 {
background: url("fullflash_05.jpg") center top no-repeat;
width: 772px;
height: 107px;
margin: 0px;
padding: 0px;
border: none;
}
* (X)HTML/WAP
* CSS
* RSS/Atom
* Section 508/WCAG
* Paramédia
Ajánlom még figyelmetekbe:
* Akadálymentes weboldalak
* Weblapok ergonómiája
* Irányelvek webfejlesztõknek
* Jakob Nielsen: Web-Design
* World Wide Web Consortium - a(z) (X)HTML, CSS, és egyéb szabványok lelõhelye.
thx <#vigyor3>#vigyor3>
C2Q Q9550, ASUS P5Q DLX 2x2GB OCZ REAPER 1066 CL5 MSI 8800GTS 512 OC, WD VelociRaptor 150G
Nem az. HyperText Markup Language - hiperszöveg leíró nyelv.
Programozási nyelvek: Logo, (Visual) Basic, (Visual) C(++), C#, Pascal, Delphi, Java, Fortran, Assembly,...
Szkriptnyelvek (majdnem programozási nyelvek, de mégsem azok): PHP, ASP, Javascript, Perl (CGI), VBS,...
"a HTML oldalak már legalább 3-4 éve elavultak"
1. A mai trend az, hogy az oldal tartalmát, és az oldal design-ját különszedjék. Az elõbbihez ott az (X)HTML, az utóbbihoz ott a CSS. Sõt valószínûleg hosszabb távon az oldal tartalmát, az oldal struktúráját, az oldal design-ját szét fogják szedni. Erre lesz majd az XML+XSLT+CSS megoldás.
Remélhetõleg a cégvezetõk rájönnek, hogy a céges weblapoknál igen fontos az ergonómikus (felhasználók számára könnyen böngészhetõ, vakok/süketek/bénák számára is élvezhetõ), jól kialakított, valid oldal. Ugyanis ez is trend.
2. A statikus oldalak azért avultak el, mert a felhasználók egyre jobban elvárják a sûrûn frissûlõ tartalmat.
3. A HTML nyelv könnyen megtanulható. Ami komplikált, az a valid, böngészõfüggetlen (amit a CSS és a Javascript kissé megnehezít), ergonómikus weboldal kialakítása.
[/spam]™
Amúgy meg ez a HTML nyelv tök egyszerû dolog, két éve, egy unalmas hétvégén megtanultam az egészet. Ennyi. Szerintem a legegyszerûbb programozási nyelv, már ha lehet annak nevezni. De manapság HTML-el az ember már semmire se megy, azonkívül minimum javascript és php kell, mert a HTML oldalak már legalább 3-4 éve elavultak.
Az intenzíven fekszem. Kérem, a sípszó előtt hagyjon üzenetet. Napról napra az újdonság varázsával ajándékoz meg az amnézia!
Az intenzíven fekszem. Kérem, a sípszó előtt hagyjon üzenetet. Napról napra az újdonság varázsával ajándékoz meg az amnézia!
[/spam]™
[/spam]™
Csinálsz egy "nagy" táblázatot, amibe a teljes tartalom bekerül. Ennek mindössze 1 sora és 1 cellája legyen. Ebbe a cellába berakod a másik táblázatot úgy, hogy valahogy így nézzen ki: <td valign="middle"><table><tr>....és így tovább.
és ezt az egészet (tehát a "nagy" táblázatot) vagy a <center></center>, vagy a <div align="center"></div> módszerrel vízszintesen is középre rakod. Ennek mûködnie kell.
[...] Te romboló állat! Te sátán!
egyébként nálam is mûködik, amit Cattie-Brie csinált
[...] Te romboló állat! Te sátán!
[/spam]™
[...] Te romboló állat! Te sátán!
[...] Te romboló állat! Te sátán!
<HTML>
<HEAD>
<TITLE>main2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 style="text-align:center;">
<table style="height:100%;"><tr><td>
<TABLE WIDTH=792 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD width="257" ROWSPAN=2>
<IMG SRC="fullflash_01.jpg" WIDTH=257 HEIGHT=324 ALT=""></TD>
<TD width="258">
<IMG SRC="fullflash_02.jpg" WIDTH=258 HEIGHT=291 ALT=""></TD>
<TD width="277" ROWSPAN=2>
<IMG SRC="fullflash_03.jpg" WIDTH=257 HEIGHT=324 ALT=""></TD>
</TR>
<TR>
<TD> <a href="main.html"><img src="fullflash_04.jpg" name="Image5" width="258" height="33" border="0"></a></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="fullflash_05.jpg" WIDTH=772 HEIGHT=107 ALT=""></TD>
</TR>
</TABLE>
</td></tr></table>
</BODY>
</HTML>
[/spam]™
body
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 style="text-align:center;">
és a belsõ table köré:
<table style="height:100%;"><tr><td>
table rész
</td></tr></table>
Így müxik
[/spam]™
[...] Te romboló állat! Te sátán!
és köszi h foglalkoztok vele:
<HTML>
<HEAD>
<TITLE>main2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames
if(!(x=d
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr
}
//-->
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (main2.psd) -->
<TABLE WIDTH=792 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD width="257" ROWSPAN=2>
<IMG SRC="fullflash_01.jpg" WIDTH=257 HEIGHT=324 ALT=""></TD>
<TD width="258">
<IMG SRC="fullflash_02.jpg" WIDTH=258 HEIGHT=291 ALT=""></TD>
<TD width="277" ROWSPAN=2>
<IMG SRC="fullflash_03.jpg" WIDTH=257 HEIGHT=324 ALT=""></TD>
</TR>
<TR>
<TD> <a href="main.html"><img src="fullflash_04.jpg" name="Image5" width="258" height="33" border="0"></a></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="fullflash_05.jpg" WIDTH=772 HEIGHT=107 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
These are my friends, see how they glisten...
<iframe src="valami.html" height="400" width="500"></iframe>
[/spam]™
szélességeb beállításai jóak???
<table cellpadding="0" cellspacing="0" style="width:792px;text-align:center;">
<tr>
<td width="257" rowspan="2">
<img src="fullflash_01.jpg" width="257" height="324" alt=""></td>
<td width="258">
<img src="fullflash_02.jpg" width="258" height="291" alt=""></td>
<td width="277" rowspan="2">
<img src="fullflash_03.jpg" width="277" height="324" alt=""></td>
</tr>
<tr>
<td>
<a href="main.html"><img src="fullflash_04.jpg" name="image5" width="258" height="33" border="0"></a></td>
</tr>
<tr>
<td colspan="3">
<img src="fullflash_05.jpg" width="792" height="107" alt=""></td>
</tr>
</table>
[/spam]™
"<TABLE WIDTH=792 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>"
helyett
"<TABLE WIDTH=792 HEIGHT="100%" BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>"
[/spam]™
van egy PS grafika, amit save for webként elmentettem, és igy automatikusan html-be került az egész. align = center-re horizontálisan gyönyörûen középen van. Vertikálisan azonban nem. a valign = "center" eredménytelen. A script:
<TABLE WIDTH=792 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD width="257" ROWSPAN=2>
<IMG SRC="fullflash_01.jpg" WIDTH=257 HEIGHT=324 ALT=""></TD>
<TD width="258">
<IMG SRC="fullflash_02.jpg" WIDTH=258 HEIGHT=291 ALT=""></TD>
<TD width="277" ROWSPAN=2>
<IMG SRC="fullflash_03.jpg" WIDTH=257 HEIGHT=324 ALT=""></TD>
</TR>
<TR>
<TD> <a href="main.html"><img src="fullflash_04.jpg" name="Image5" width="258" height="33" border="0"></a></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="fullflash_05.jpg" WIDTH=772 HEIGHT=107 ALT=""></TD>
</TR>
</TABLE>
Nagyon köszönöm a segítséget.