html_stepbystep

Tips för billiga kläder: Klädguiden med kläder och för din motorcykel kanske Mckläder och mc hjälmar kan passa bra? Pröva! KlädGuiden innehåller massor med sköna prisvärda kläder. Jag skrev den för att hjälpa människor att hitta unika kläder. Kanske något för fritiden när du inte kodar HTML ;)

Skapa en schysst presentation

8 steg

Kombinerar man text och bilder på rätt sätt får man ofta ett snyggt resultat. Med radbrytningar blir allt dessutom bra mycket läsligare.


Vi utgår ifrån koden i "Skapa din första sida". Öppna anteckningar med den koden framme.
<html><h1>Grattis världen!</h1></html>
Skriv kommentarAvbryt - Visa kommentarer ( 0 )Göm kommentarer
Namn Kommentar
 

Vi kommer att lägga in mer text på sidan. Eftersom det skulle bli ganska jobbigt att arbeta med koden om allt bara stod på en enda rad ska vi ta och flytta om koden lite. Skriv om den så att den ser ut som på bilden.
<html>
  <h1>Grattis världen</h1>
</html>
Skriv kommentarAvbryt - Visa kommentarer ( 5 )Göm kommentarer
Namn Kommentar
henrikk   onödigt steg. spelar väll ingen roll??
ecnum   det är bra att nybörjare direkt kan se att intendering är viktigt när man kodar sidor.
zat0s   vad är intendering?
Hans   Indentering är inskjutningen du ser före <h1>Grattis världen</h1> på bilden ovan. Det märks kanske inte när sidan består av så lite kod men om det är mycket blir det lätt väldigt oöverskådligt om man inte lägger in indrag här och var. Mer info: www.susning.nu/Indentering
zat0s   hur vet man var man ska göra det då?
 
Som du ser spelar det ingen roll hur många mellanslag eller nya rader man har mellan sina "taggar". (All text inom < och > benämns som en tag. <HTML> är en tag, och så är också <h1>.)
 

Skriv in koden
<p>Jag är en ny webbutvecklare som kommer ta marknaden med
storm.</p>
efter rubriken (Se bild).
Skriv kommentarAvbryt - Visa kommentarer ( 0 )Göm kommentarer
Namn Kommentar
 
Egentligen hade det räckt med att bara skriva texten rakt upp och ned efter rubriken (efter </h1>). <p> skapar dock ett stycke (den skapar tomt utrymme före och efter texten). Vill man ha två stycken är det därför bara att lägga två <p> efter varandra som i följande exempel:
<p>Stycke 1</p><p>Stycke 2</p>
Du bör alltid lägga din text innanför någon form av tag som definierar vad det är för en typ av text. Vi kommer till fler sorters taggar senare.
 
Nu har vi ett stycke och en rubrik. Dags att göra det lite snyggare. Vi lägger till egenskapen "align" på rubriken. Ändra koden så att den ser ut som följande:
<html>
  <h1 align="center">Grattis världen!</h1>
  <p>Jag är en ny webbutvecklare som kommer ta marknaden med
storm.</p>
</html>
Skriv kommentarAvbryt - Visa kommentarer ( 3 )Göm kommentarer
Namn Kommentar
tint   man kan också använda <center> för att få saker i mitten

<center><h1>Grattis världen</h1></center>
Hans   <center> är genuin ondska ;-)
ecnum   haha :)
 
Inne i varje tag kan man skriva egenskaper som förändrar dess mening. Exempelvis kan i många taggar lägga in egenskapen "align" som förändrar justeringen av innehållet. Align kan vara left, center eller right.
 

Notera hur rubriken har förändrats på den övre bilden. Lägg in samma sak för vårt stycke så att sidan ser ut som på den undre.
Skriv kommentarAvbryt - Visa kommentarer ( 0 )Göm kommentarer
Namn Kommentar
 

Vad är en design utan en känd skapare? Låt oss lägga in en signatur.
<html>
  <h1 align="center">Grattis världen!</h1>
  <p align="center">Jag är en ny webbutvecklare som kommer
ta marknaden med storm.</p>
  <hr>
  Skapad av simpelt.se<br>
  18 / 9 - 1921 (jag var först)
</html>
"<hr>" skapar helt enkelt en horisontell linje. "<br>" lägger å andra sidan in en radbrytning. (Se förväntat resultat på bilden.)
Skriv kommentarAvbryt - Visa kommentarer ( 1 )Göm kommentarer
Namn Kommentar
farmboy   "Du bör alltid lägga din text innanför någon form av tag som definierar vad det är för en typ av text.".
Varför ligger inte "Skapad av simpelt..." inom någon sådan då?
 
Vi kan fortsätta med att lägga in textformatering. Nuvarande text
  Skapad av simpelt.se<br>
  18 / 9 - 1921 (jag var först)
kan se lite väl plan ut. Lägg till några taggar för att lysa upp den.
Skapad av <b>simpelt.se</b><br>
<i>18 / 9 - 1921</i> (jag var först)
Skriv kommentarAvbryt - Visa kommentarer ( 3 )Göm kommentarer
Namn Kommentar
Hans   Ehum. Jag gillar inte uppmaningen till att använda "formateringstaggar" som <b>, <i> etc. Stylesheets bör användas istället. Det kanske förenklar för nybörjaren men det leder lite in på fel bana.
svamp   Det är inte alls fel att använda formateringstaggar, det beror på vilken standard man kodar efter. Kodar man efter html 4.0 är det lungt.
Hans   svamp: Formateringstaggar är i HTML 4.0 deprecated. Du får då snarare vända dig till HTML 3.2, vilket Inte är rekommenderat. Läs mer om detta på
http://www.w3schools.com/html/html_whyusehtml4.asp

Jag läste nu att formatering mha css tas upp senare i den här guiden. Det kanske hade blivit för avancerat att komma med allt samtidigt för den nyinvigde.
 
Det finns flera sätt att formatera text på. Ett enkelt sätt är att använda HTMLs inbyggda taggar för syftet.
<b> - Skapa fet stil
<i> - Skapar kursiv stil
<u> - Skapar understruken stil
Experimentera!
 

Grattis! Du har nu en schysst presentation att visa upp. En bra sida att utgå ifrån när du utvecklas.
Skriv kommentarAvbryt - Visa kommentarer ( 1 )Göm kommentarer
Namn Kommentar
zat0s   :D
 
   
Steg för steg
Skapa din första sida med HTML
Skapa en schysst presentation
Piffa till texten
 
Snygg layout
 
Skapa sidor snabbt
 
Kommunikation
 
Eller varför inte resa lite med några sista minutenresor? Det är grymt härligt avkoppling för ett tag.

På väg att välja en ny kamera? Hitta tips och idéer om olika
kameror här.