HTML-editering
|
|
HTML-editering |
|
En enkel manual skriven av Max Backström med början 1998. Du kan ladda hem manualen i Word-format! (högerklicka, Save Link as..)
Passa samtidigt på att ladda hem WebTemplate_OK.zip som jag skapat. Det är en hel webstruktur som du kan ladda hem gratis och skapa en egen personlig hemsida med.
Samtidigt rekommenderar jag att du tittar på WebaDok. Det är också en hel webbstruktur, enligt samma princip men med en annan gemensam layout på alla sidors sidhuvud. Den passar bättre där man ska dokumentera något och det ska framgå vem som dokumenterat och uppdaterat en sida och man vill veta när det gjordes. Med dessa två varianter på webbsidesstrukturer kan du själv på ett enkelt sätt skapa en personlig hemsida. Allt som behövs är Anteckningar i Windows (Notepad.exe) och ett enkelt bildredigeringsprogram, till exempel irfanview som också är gratis.
Grundstruktur för enkel HTML-sida
Här skriver du din text
</BODY>
<HTML>
<HEAD>
<TITLE>namn på sidan</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="*.GIF" TEXT=" " LINK=" " VLINK=" ">
</HTML>
Denna sida (t.ex. index.htm) är grundstommen som talar om hur skärmen ska ytnyttjas.
Den egentliga texten finns (i detta exempel) i left.htm och start.htm
Med två Frames
<HTML>
<HEAD>
<TITLE>index</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="left.htm" NAME="left"> <NORESIZE> <SCROLLING="NO">
<FRAME SRC="start.htm" NAME="right">
</FRAMESET>
</HTML>
Alternativ konstruktion:
<HTML>
<HEAD>
<TITLE>index</TITLE>
</HEAD>
<FRAMESET COLS="240,*">
(240 = antal pixels, * = resten av ramen)
<FRAME SRC="left.htm" NAME="left" NORESIZE SCROLLING="NO">
<FRAME SRC="start.htm" NAME="right">
<NOFRAMES>
Text för den som inte kan se ramar i sin Browser
</NOFRAMES>
</FRAMESET>
</HTML>
<H1> </H1>
|
Rubrik |
<BR>
|
Radbrytning |
<P>
|
Nytt stycke |
| Onumrerad lista | Numrerad lista |
| (Unordered List) | (Ordered List) |
| <ul> | <ol> |
| <li></li> | <li></li> |
| <li></li> | <li></li> |
| </ul> | </ol> |
| <TABLE WIDTH="100%" BORDER="5"> |
| <TR> |
| <TH> Rubrik 1 </TH> <TH> Rubrik 2 </TH> |
| </TR> |
| <TR> |
| <TD> Data 1 </TD> <TD> Data 2 </TD> |
| </TR> |
| </TABLE> |
Sida uppbyggd med två spalter Länk till sida som använder en tabell för att skapa två spalter.
| <HR> | Horisontell linje |
| <U> </U> | Understrykning |
| <BLOCKQUOTE> </BLOCKQUOTE> | Ger styckeindrag |
| <PRE> </PRE> | Text lämnas obearbetad av HTML dock ej <HTML-element> |
| <KBD> </KBD> | Keyboard |
| <VAR> </VAR> | Variabelnamn |
| Bold | Italics | Tele Type | Emphasis | Programkod |
|---|---|---|---|---|
| <B> </B> | <i> </i> | <TT> </TT> | <EM> </EM> | <CODE> </CODE> |
| <DIV ALIGN="CENTER"> | Centrerad text | </DIV> |
| <FONT FACE="ARIAL"> | Typsnitt Arial | </FONT> |
| <FONT SIZE="+3"> | Fontstorlekar ="1-7" | </FONT> |
| <FONT COLOR="#FFFFOO"> | TextFärg | </FONT> |
Detta är den enklaste formen: Några attribut som kan användas med IMG:
<IMG SRC="IMAGE/kula.GIF">
<IMG HEIGHT=" " Antal % av skärm eller antal pixels
WIDTH=" " Antal % av skärm eller antal pixels
ALIGN=" " TOP / MIDDLE / BOTTOM / LEFT / RIGHT
HSPACE=" " Horisontellt antal pixels från text
VSPACE=" " Vertikalt antal pixels från text
SRC="IMAGE/kula.GIF" ALT="Förklaring för dig som använder Browser
utan att se bilder">
<A HREF="http://www.**.**/">länk</A>
<A HREF="http://www.**.**/index.htm">länk</A>
<A HREF="file://www.**.**/info.htm">Information i ämnet</A>
Länk i Frame som ska öppnas i en annan Frame:
<A HREF="file://www.**.**/info.htm" TARGET="_right">Information i ämnet</A>
<A HREF="file://www.**.**/info.htm" TARGET="_self">Information i ämnet</A>
<A HREF="file://www.**.**/info.htm" TARGET="_top">Information i ämnet</A>
<A HREF="file://www.**.**/info.htm" TARGET="_blank">Information i ämnet</A>
Det man länkar till, har följande syntax:
<A NAME="innehåll">Innehållsförteckning</A>
Länka till del i samma dokument:
<A HREF="#innehåll">Tillbaka till innehållsförteckningen</A>
eller till del i annat dokument:
<A HREF="http://www.**.**/index.htm#info">Information i ämnet</A>
Länk i bild:
<A HREF="http://www.weather.com"><IMG SRC="image/sunset.GIF">Väder</A>