Poeter.se logo icon
Redan medlem?   Logga in




 

HTML för poeter. Del 1 - Grunderna

Jag tänkte visa hur du kan göra dina texter här på poeter.se lite rikare, genom att använda

  • formattering,
  • länkar,
  • och (tada!) video!

Men, för att klara allt detta, behöver du knåpa en aning med HTML, språket som används för att bygga upp webb-sidor. Jag skall försöka ta det lite försiktigt dock. Tag min virtuellt utsträckta hand, så börjar vi.

Kort om HTML

"HTML" är en förkortning för HyperText Markup Language (ung. Språk för beskrivning av klickbar text). Om du i din webbläsare väljer kommandot för "Visa Källa" så märker du att själva texten du kan se kringgärdas av en massa s.k. taggar. Varje textstycke är t.ex. inramat av taggarna <p> och </p> (De flesta av taggarna kommer parvis och en slut-tagg inleds med ett snedstreck.)

Andra formatteringstaggar som kan vara bra att känna till är:

  • fetstil - <strong> resp. </strong> (alternativt <b> och </b>)
  • kursiv text - <em> resp. </em> (alternativt <i> och </i> )
  • ny rad inom stycke - <br /> Denna tagg ser lite annorlunda ut, eftersom den avslutar sig själv direkt.
  • Det finns fler taggar, men dessa är de viktigaste för stunden.

Poeter.se hjälper oss att "fuska"

Lyckligtvis, har sajten poeter.se ett verktyg, som hjälper oss att få det hela rätt:

Börja med att gå till sidan för dina inställningar och klicka på fliken "Extra". Se till att rutan "Använd html-editor" är ikryssad (och spara, om det behövs). Efter det skall den sidan se ut ungefär så här:

Lägg märke till knappraden som dykt upp ovanför redigeringsfönstret.
Så länge du har denna ruta ikryssad, kommer du här på sajten att se denna knapprad när du skriver eller redigerar dina texter.

även om du inte klickar på knappar för färg, centrering eller annan formattering, så kommer funktionerna som är inbyggda i knapparna att lägga in koder för radbrytningar etc medan du skriver. Det är ju skönt, för då slipper du göra det själv.

Kolla koderna du skapat

Skriv en text, med lite centreringar, fetstil etc om vartannat.
Här är ett supersimpelt exempel, utan en massa krusiduller:

Spara den sedan (bland dina utkast, eller rentav publicera den).
Gå därefter tillbaka till dina inställningar och fliken "Extra".
Avmarkera nu rutan "Använd html-editor" och spara.
Nu skall det se ut ungefär så här:

Om du nu öppnar din sparade text för redigering igen, så får du se den html-kod som du nyss skapat, utan att ana det.
Exemplet här ovan ser ut så här, i html-läge:

I Del2 trollar vi!

I detta läge, med html-koden synlig, kan vi nu trolla. Men hur det går till, beskriver jag i Del2! :)

 

----------------------------------------
Innehållsförteckning
HTML för poeter. Del 1 - Grunderna
HTML för poeter. Del 2 - Video
HTML för poeter. Del 3 - Länkar
HTML för poeter. Del 4 - RSS

 

 




Övriga genrer (Journalistisk text) av Tor-Björn Fjellner (Mr T) VIP
Läst 651 gånger och applåderad av 11 personer
Publicerad 2012-02-04 18:33



Bookmark and Share


  Linn G
Vad snällt att du har tagit dig tiden att visa hur man gör!
Jag har dock en liten fundering; Jag har kryssat i "Använd html-editor" och knappraden kommer upp på sidan (där man kan skriva en längre presentation) men sedan när jag ska skriva nya texter så finns inte knappraden där, inte heller när jag ska skicka meddelanden.
Tror du att det kan bero på att jag använder mig av Safari istället för Firefox eller internet explorer? Tack på förhand!
2012-08-17

  Tor-Björn Fjellner (Mr T) VIP
Det finns en html-tagg som heter {CODE}.
(Där krullparanteserna givetvis skall vara snygga vinkelhakar...)
Men jag har faktiskt inte provat hur den koden beter sig här.
2012-02-09

    Martin Hellberg Olsson
Äh, jag funderade ju till och med på att fråga om hur du skrev in koder. Men trodde väl att det inte blev html i kommentarer.

Det finns ju taggar för att kunna visa html-kod på en sida (har dock inte kunnat komma ihåg exakt vilka så att jag känner mig säker på det) men det har du alltså inte använt här, då.
2012-02-09

  Tor-Björn Fjellner (Mr T) VIP
Svar till Martin:
Sajten trollade bort de koder du skrev i din kommentar. (Öht är det bökigt att få webbläsarprogrammet att visa som text sådant, som vanligtvis är taggar. Varje gång jag vill ändra något endaste i min text, måste jag rätta tillbaka texter, som omvandlats till koder...)
Det Martin kommenterade var att taggen {br} numer helst skrivs {br /}. (För enkelhetens skulle ersatte jag hakarna för större och mindr än, med hakparenteser. Då hoppas jag att ni förstår men sajten låter texten vara ifred :)

Det är inget absolut krav i alla sammanhang, men med de nyare generationerna av specifikationer (xml-inspirerade) är det rekommendabelt att göra så.
2012-02-07

    Martin Hellberg Olsson
För mig var det inledningsvis riktigt bra att få veta hur jag skulle sätta på html i inställningarna. Tack! Resten ser riktigt bra och pedagogiskt ut också. Lär mig bland annat att man tydligen ska skriva
snarare än bara
. Ska nu med intresse titta på fortsättningstexterna.
2012-02-07

  Minkki VIP
html för minkar och andra dummies - vilken fantastisk idé, Tor-Björn! Vad bra att du ger det här i små portioner, känns som att ha fått ett dynamoimplantat, någonting börjar surra ;)
2012-02-04

  king_king
bra då
2012-02-04
  > Nästa text
< Föregående

Tor-Björn Fjellner (Mr T)
Tor-Björn Fjellner (Mr T) VIP