Har ni koder som ni tycker borde vara med, ska det
vara bättre förklaringar, eller kommentarer och tips i övrigt
maila mig
på arne-dykare.nr1@telia.com
!
Det viktigaste när man
lär man lär sig HTML är att våga testa olika saker.
De flesta tabbarna går att kombinera,
med varandra och med olika komandon.
Om ni kikar runt på mina sidor får ni se exempel på olika
kombinationer, vill ni se koden, finns det i visa menyn - källa (Heter olika med olika program)
Storlek,
namn, sökväg, mm ska för det mesta anges imellan " tecken".
Lite olika tecken - å , Å , ä , Ä , ö , Ö , " , & , < , > , ø , Ø , mm.
<HEAD> - <META> mm.
<BODY> - bakgrund
Länkar (sökvägar) - Ankare , Bilder , Mail , Target
Tabeller , storlek , ramarnas storlek, Färger (bakgrund, ramar) , mm.
Bilder , färga kanter , mm.
Blandat
Tänk på
att alla inte har datorerna konfigurerade för svenska tecken och att de tecken som ingår i HTML-koderna
måste skrivas som en beskrivning av tecknet. <HTML> anger att det är html-kod, den ska stå först i filen. Har tagit huvudet från en av mina sidor, det i fet stil
är från huvudet och det som inte är fet stil är mina kommentarer. <HEAD> starttagg Titeln
( <title> ) är det enda som är obligasitoriskt. Innuti BODY
start tagg kan man ange bakgrundsfärg, bakgrundsbild, mm. Tillbaka
till menyn Länkar kan byggas upp lite olika. T ex <A
HREF="https://arne-dykare.tripod.com/datorer/html/html.htm">HTML-koder</A> Ligger sidan du länkar till i samma bibliotek eller i under bibliotek behövs inte hela Internet adressen.
Där ankaret ska vara skriver du <A
NAME="Html"> Det som ska vara klickbart
kann bl a vara en text eller bild, ska det vara en bild, ser koden ut så här bilder/jag1s.htm -
är målet (den filen som länken går till.) Vill du att besökaren ska kunna maila till dig,
går det att ficksa via en länk till hans mailprogram. Vidare går det att
ange TARGET, t ex Tillbaka
till menyn
<B> fetstil 12<SUP>3</SUP> blir
123 12<SUB>3</SUB> blir 123 Här följer en bit som jag inte är säker
på att det är riktigt. em anger teckensnitt????? <BR>
ny rad <P> nytt stycke (en
blank rad) För denna behövs det ingen sluttagg. Det finns flera sorters listor bl a: numrerade och
punkt-listor. Numrerade listor Byter man ut <ol> mot <ul>
blir det en punkt lista. blir Tillbaka till menyn
<TABLE BORDER=4 WIDTH="80%"> <TR><TD>TR = Rad (Lodrätt)</TD><TD>TD =
Fält (Vågrätt)</TD><TD>Fält 3</TD><TD ROWSPAN=2>ROWSPAN=så många
rader sellen ska vara hög.</TD></TR> <TR><TD>Rad2</TD><TD
COLSPAN=2>COLSPAN=Så många fält sellen ska vara bred</TD></TR>
Om man inte anger
storleken på tabellen (med WIDTH och HIGHT) så styrs storleken av innehållet, de enskilda sellernas
storlek går inte att justera. Har i följande exempel visat hur storleken av sellen styrs av de övriga
sellerna. Det
går att lägga bakgrundsfärg på hela tabelen, en ruta i taget, alla rutor i ett fält. Detta
gör man i starttaggarna (<TABLE>, <TR>, <TD> och <TH> ), t ex <TD BGCOLOR="FFFF00">
(BGCOLOR = bakgrundsfärg) Som exempel kommer nedan först tabellen sedan visas koden.
Före varje TR har jag lagt in en blankrad och före de TD som inte sitter i hop med TR har jag lagt radbrytning,
för att det ska vara lättare att se samanhanget. Har även lagt in en del textformatering (se Text )Det är bara F som är oformaterad.
<CENTER><TABLE BORDER="1"
BGCOLOR="FFFF00"> <TR><TD bgcolor="#CC00CC"><B><font color="#00FF00"
size="4">A</font></B></TD> <TR><TD><B><font color="#00FF00"
size="5">E</font></B></TD> <TR bgcolor="#000000"><TD><B><font
color="#00FF00" size="5">I</FONT></B></TD> </TABLE> Tillbaka till menyn
Man får testa vilket som blir minst antal kB på varje bild. I grova drag kan man
säga att man använder .jpg för
fotografier och .gif för ritade bilder. För att foga in bilder <img src="bilder/2.JPG" width="599"
height="397"> bilder/3.htm är en HTML fil som enbart innehåller bilden i orginalutförande
(30kB) Mer info se Länkar Tillbaka till menyn För koderna för
de olika färgerna titta in på hemsidan HTML på
svenska.. T ex FFFFFF blir vit. Koden är mängden av de tre grund färgerna i Hexadecimala
siffror 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E och F. En del hävdar att det finns 256 säkra färger, men det stämmer
inte riktigt. Säkra = det ser likadant ut hos alla. Det finns de som bara visar 256 färger på deras
skärmar, har de då redan öppet något fönster med någon annan färg så
spricker det med 256 säkra färger. Tillbaka till menyn
<ALIGN="center"> center
går att byta ut mot right eller left. (left är standard om inte annat anges) Denna tagg går att inkludera
i flertalet av andra starttaggar. <HR> är en
avgränsare
Har ni koder som ni tycker borde
vara med, ska det vara bättre förklaringar,
Tecken.
å = å Å = Å
ä = ä Ä = Ä
ö = ö Ö = Ö
" = " & = &
< = < > = >
ø = ø Ø = Ø
  = extra mellanslag = no breaking space
(där det inte går med vanliga mellanslag)
Tänk på att stor eller liten bokstav betyder olika saker.T ex a eller A i å
De
flesta taggarna ska följas av en slut tagg. När man kombinerar olika taggar, kan man ta som regel att den
ordningen som start taggarna ligger i ska slut taggarna ha omvänt. T ex
<P><FONT> .......</FONT></P>
Så sist i filen ska det stå </HTML> (/ anger
att det är en slut tagg) Skriver hädanefter bara start taggen.HTML-filen är uppdelad i två
huvuddelar:HEAD och BODY Som i sin tur är uppdelade i olika delar.
(Taggar)
<HEAD> Är taggen för
huvudet, där ska dokumentinformationen ligga.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Vet jag inte säkert vad det
står för.
<meta name="GENERATOR" content="Arne"> Där det står Arne kann det
stå med vilket program man gjort sidan eller vem som gjort sidan:
<title>Natur
bilder</title> Titeln kommer att stå längst upp på webbläsaren. Tror
även att det är det som står når man söker på sökrobbotarna.
<META NAME="description" CONTENT="Arne Dykares hemsida med bl.a. naturbilder">Jag tror att det
som står CONTENT=" här " är det som visas av sökrobotarna.
<META
NAME="keywords" CONTENT="Arne_Dykare, html, bilder, natur, länkar,"> Dessa ord är de
sökrobbotarna kollar på. De ska vara skilda åt med ,
</HEAD> Sluttagg
<BODY> Är kroppen där allt innehåll i sidan finns.
<BODY bgcolor="#FFFFFF"> blir
bakgrundsfärgen FFFFFF (det är färgen i Hexadecimala siffror)
Vad de olika färgerna har
för beteckning finns på HTML på Svenska
.
<BODY background="himmel.jpg" WIDTH="800" HIGHT="539"
bgproperties="fixed">
himmel.jpg = bakgrundsbilden
fixed anger att bakgrundsbilden står
stilla när man rullar sidan.
Länkar!
<A
HREF=".....">:::::</A>
..... ska ersättas med sökväg och :::::: ska ersättas
med det som ska vara klickbart.
blir så här
HTML-koder , som är en länk till denna sida.
OBS! glöm inte att ute på nätet byts \ till /.
Om du istället ska gå upp ett bibliotek
får du skriva ../,
.. betyder att man går tillbaka ett steg, därefter kan man lägga
underbiliotek.
Ska länken vara till ett ankare skriver du #Text (t ex
<A HREF="#Text">Text</A> som blir Text ), är det på en annan sida
får man lägga sökvägen före #.
Denna sida har sökvägen html/html.htm
Den sida som ankaret
ligger i, har sökvägen lank/utan.htm
Då blir alltså koden så här :
<A HREF="../lank/utan.htm#Html">HTML-länkar</A>
=
HTML-länkar (utan.htm existerar inte nu längre.)
<A
HREF="bilder/jag1s.htm" TARGET="_top"><IMG SRC="jag1.jpg" WIDTH="129"
HIGHT="179" ALT="34kB - LÄNK-Vem är Arne Dykare?"></A>
jag1.jpg - är den klickbara bilden, där
går det även att lägga sökvägen till bilden om den ligger i ett annat bibliotek.
WIDTH
och HIGHT är storleken på bilden, det är inte nödvändigt att ange det, men det ska tydligen
gå snabbare att öppna sidan om man anger storleken på bilden.
34kB - LÄNK-Vem är Arne
Dykare? kommer upp när man låter muspekaren vila en kort stund på bilden, eller när
besökaren har inställt för att inte visa bilder så får han se texten istället för
tomrum.
Se även Bilder
<A
HREF="mailto:arne-dykare.nr1@telia.com"><FONT>maila mig!! !!</FONT></A>
blir
maila mig!! !!
mailto anger att det ska starta
mailprogramet, arne-dykare.nr1@telia.com - är E-post adressen.
<A HREF="https://arne-dykare.tripod.com/datorer/html/html.htm"
TARGET="_blank">HTML-koder</A>
Som blir ( HTML-koder ) en länk till denna sida, som öppnas i ett nytt fönster.
(TARGET är mest användbart vid frames.)
_blank kann bytas ut mot _top (_parent)= ersätter
allt i det aktuella fönstret, vidare kann man ange olika namn för att få länkarna att
öppnas i det fönstret man vill, men det är jag inte så insatt i.
Text<PRE> alla mellanslag och
radbrytningar som du har i text-editorn kommer med.
Ända tills du skriver slut
taggen. (Jag har inte lyckats att formatera
texten emellan start och slut taggen.)</PRE>
Textstorleken anges med SIZE i FONT taggen (det
är taggen för text) <FONT SIZE="5">. Det fungerar med 8 storlekar:
7, 6, 5, 4, 3, 2, 1, 0
Färgen på texten anges också i FONT taggen<FONT
SIZE="5" COLOR="FF0099">
<h1><font
color="#CCFF00"><em><strong>TEST</strong></em></font></h1>
blir
TEST
h1 anger att det är en rubrik,
det ersätter SIZE fast siffrorna är i omvänd ordning h6
h5
H4
h3
h2
h1
strong har jag inte upptäckt någon funktion med.
<ol>
<li>A</li>
<li>b</li>
<li>c</li>
<li>D</li>
</ol>
blir
OBS! man behöver inte sätta ut numrena, det sker automatiskt.
Varje <li> ger en ny rad, vill du ha
en tomrad imellan punkterna i listan får du sätta ett <P> före <li>.
<ol>
<li>A</li>
<li>b</li>
<P><li>c</li>
<li>D</li>
</ol>
Tabeller
</TABLE>
4 anger hur bred ramen på
tabellen ska vara. (0 =
ingen ram)TR = Rad (Lodrätt) TD = Fält (Vågrätt) Fält
3 ROWSPAN=så många rader sellen ska vara hög. Rad2 COLSPAN=Så många fält sellen ska vara bred
80% anger hur stor del av bredden på fönstret tabellen ska vara.
Bredden styrs av den bredaste i det fältet och höjden av de i samma rad.
Det går att färgsätta ramarna mad BORDERCOLOR , BORDERCOLORLIGHT och
BORDERCOLORDARK, t ex <TABLE BORDERCOLOR="FFFFFF">, detta kan endast ligga i TABLE taggen.
Testa och se vilken /
vilka som ger bäst resultat på din sida.A
B CCCCCCC D E F G H I J L
<TD bgcolor="#0099CC"><B><font color="#FFFF00"
size="4">B</font></B></font></B></TD>
<TD><B><font color="#00FF00"
size="4">CCCCCCC</FONT></B></TD>
<TD><B><font color="#00FF00"
size="7">D</FONT></B></TD></TR>
<TD>F</TD>
<TD><B><font color="#00FF00"
size="5">G</FONT></B></TD>
<TD><B><font color="#00FF00"
size="5">H</FONT></B></TD></TR>
<TD><B><font color="#00FF00"
size="5">J</font></B></TD>
<TD><B><CENTER><font color="#00FF00"
size="5">K</font></B></TD>
<TD><B><font color="#00FF00"
size="5">L</font></B></TD>
Bilder
bilder/ är sökvägen : 2.JPG är bilden.
Width och Height har jag
hört att det ska snabba på nedladdningen om det finns angivet. Det går även att använda för
att manipulera bilden.
Att använda Thumbnails är för det mesta uppskattat, man gör en bild som
är klickbar. Först genom ett bildbehandlingsprogram, minskar man storleken på bilden och upplösningen.
(minskat antal kB = snabbare nedladdning)
Ändrar man bara WIDTH och HEIGTH så tar nedladdningen
lika lång tid. (Ingen ändring i bildstorleken = samma antal kB = lika lång nedladdningstid.)
Sedan gör man bilden klickbar.
<A HREF="bilder/3.htm"><img src="3l.JPG" width="150" height="66"
alt="67kB"></A>
3l.JPG är den nedminskade
bilden.(4kB)
Glöm inte att du måste lägga ut bägge bilderna på nätet.
Det
är juste att upplysa om bildstorleken innan de påbörjar nedladdningen. T ex genom alt="67kB" ,
resultatet blir, när besökaren låter muspekaren vila på bilden så poppar texten 67kB
upp i en liten ruta.
Det går att färgsätta kanterna mad
BORDERCOLOR , BORDERCOLORLIGHT och BORDERCOLORDARK, t ex <img BORDERCOLOR="FFFFFF" src="bilder/2.JPG" width="599"
height="397">.
Färger
00=min=0, 01=1, ....., 0A=10, 0B=11, ......, 10=16,
11=17, ....., 1A=26......, FF=max=255
Blandat
<HR COLOR="99CC00> är en färgad
avgränsare
<HR
COLOR="99CC00 WIDTH="60%"> har begränsat bredden på
avgränsaren (60% = 60% av fönstret)
eller kommentarer och tips i övrigt MAILA MIG på
arne-dykare.nr1@telia.com