HTML

Inspektera HTML-kod för webbsidor via webbläsaren

https://www.webbdev-essentials.net/inspektera-html-kod-for-webbsidor-via-webblasaren/

Lektioner

Att inspektera HTML-kod för webbsidor du besöker i webbläsaren, brukar inte vara svårare än att högerklicka på webbsidan, ochvälja ”inspektera-källkod”, eller granska källkod, eller liknande. Källkoden för en webbsida brukar oftast syfta till HTML-koden (kan även inkludera JavaScript och CSS-kod dock).

I Google Chrome verkar alternativet heta ”Visa sidkälla” såvitt jag kan se just nu i version 41.

För att sen leta sig fram till specifika element finns där tricks man kan använda sig av, t ex. [CTRL + F] för ”find”/hitta på svenska, för att hitta/identifiera antingen text som står skriven på webbsidan, eller kanske element man är ute efter.

På detta sätt att inspektera hur andras källkod ser ut kan man lära sig mycket om att skapa egna webbsidor, genom att lära från hur andra gjort det, man kan till-och-med låna av deras källkod om man hittar något man gillar(!). Var vaksamma här dock så ni inte “lånar” något som ni inte har tillåtelse till! Vissa är okej att man lånar kod från deras sidor, andra är inte lika okej med det..

Mer avancerad och praktisk inspektion av källkod

Idag finns en mer avancerad form av inspektering av källkod som jag kommer ta upp i ett helt eget inlägg som sen kommer att länkas till härifrån när väl publicerat. Detta sätt är nämligen granskning av komponenter via antingen Google’s Code/Web Inspector (tror jag det heter), eller Mozilla Firebug och liknande. Dessa verktyg har blivit något av min egna preferens för inspektion av källkod det senaste året, då de erbjuder ett väldigt brett utbud av användbara och bra funktioner!

Mer om dessa senare som sagt

Lär dig HTML

Bokstäverna HTML står för HyperText Markup Language och är ett sätt att presentera text, bilder etc. på Internet. Allt du behöver för att göra en egen hemsida är en textredigerare som Word, Anteckningar eller liknande.

Taggar
Beskrivningen av hemsidan görs med olika HTML-kommandon, så kallade taggar (tags på engelska), vilka markeras med < >. För att kunna avgöra var en funktion/text börjar och slutar finns det en starttagg < > och en sluttagg</>. Själva funktionen/texten anges inne i taggen.  Taggar anges alltid i par, och det måste (nästan) alltid finnas en sluttagg som ”stänger” en starttagg.

Grunden i ett HTML-dokument

<HTML>

<HEAD>

<TITLE>Titeln på din hemsida</TITLE>

</HEAD>

<BODY>

Här skriver du in all kod och text för hemsidan .

</BODY>

</HTML>

Strukturen ovan måste alltid finnas i ett HTML-dokument i precis rätt ordning för att sidan ska kunna visas på Internet. Titeln kommer att synas allra överst i webbläsaren när din hemsida visas.

Ett bra tips när du gör din hemsida är att rita upp strukturen på papper först, så du vet var på sidan text, länkar och bilder ska placeras. Spara din förstasida som index.html.

Formatering
Med HTML kan du formatera text på samma sätt som i ett ordbehandlingsprogram. Omge texten med olika taggar för att få önskad effekt.

<B></B>        Fetstil
<I></I>        Kursiv
<U></U>        Understruken

Man kan även kombinera flera kommandon.
<B><I>Jag vill ha fet kursiv text!!</B></I>  –  Jag vill ha fet kursiv text!!
<I>Jag vill ha <B>bold</B> i fetstil.</I> – Jag vill ha bold i fetstil .

Font
Beskrivningen av hur din text ska se ut görs i taggen <FONT>. Storlek, färg och typsnitt läggs till som attribut i denna tagg.

SIZE=”..”        Textstorlek (1-7)
COLOR=”#..”        Textfärg
FACE=”..”        Typsnitt

Textstorleken anges med en siffra 1-7. Färg anges i hexkod baserat på RGB. Läs mer om det här: http://sv.wikipedia.org/wiki/RGB.

Alla attribut kan läggas i samma tagg:
<FONT  SIZE=”4″ COLOR=”#FF0000″ FACE=”Arial”>Denna text är röd, av storlek 4 och har typsnittet Arial.</FONT> – Denna text är röd, av storlek 4 och har typsnittet Arial.

Stycken, rubriker och bilder
Rubriker genereras med bokstaven H och en siffra  mellan 1-6 för storleken på rubriken, där 1 är största och 6 är minsta storleken.  För att infoga en bild anges bildens namn, exempelvis ”Bildnamnet.jpg” , som attributvärde. Det du måste tänka på när det gäller bilder är att ange det EXAKTA filnamnet och sökvägen till bilden, annars syns den inte.

<P></P>        Markerar ett stycke i en text.
<BR>            Radbrytning. Behöver ingen sluttagg.
<H1></H1>          Rubrik (1-6)
<IMG SRC=”..”>    Infoga bild

Tabeller
För att få en snyggt strukturerad sida är det enklast att lägga in text och bilder i en tabell, där <TR> skapar en rad och <TD> en cell.

<TABLE>
<TR> //Rad 1   <TD>Cell 1 på rad 1</TD> <TD>Cell 2 på rad 1</TD>   </TR> //Rad 1 avslutas
<TR> //Rad 2   <TD>Cell 1 på rad 2</TD> <TD>Cell 2 på rad 2</TD>   </TR> //Rad 2 avslutas
</TABLE>

Tabellattribut:
WIDTH=”..”        Tabellbredd anges i procent eller punkter.
HEIGHT=”..”        Samma gäller höjden.
BORDER=”..”        Ram runt tabellen. Tjockleken anges i punkter (siffror)
CELLPADDING=”..”    Ökar avståndet mellan cellerna.
CELLSPACING=”..”    Ökar utrymmet mellan innehållet i cellen och cellkanten.

Justering
ALIGN=”..”        center, right, left

ALIGN justerar text, bilder, tabeller etc enligt önskemål. Du kan centrera allt innehåll på din hemsida genom att lägga ALIGN=”center” i BODY-taggen.

Bakgrund och länkfärger
Bakgrundsfärg, text- och länkfärg definieras redan i BODY-taggen. Alla färger anges med hexkod. Se här http://tommy.tommy-jonsson.se/color.htm för olika färgkoder.

BGCOLOR=”#..”    Bakgrundsfärg på sidan.
TEXT=”..”        Färg på brödtexten.
LINK=”..”        Färg på obesökta länkar.
ALINK=”..”        Färg på länkar när du klickar på dem.
VLINK=”..”        Färg på besökta länkar.

Exempel:
< BODY BGCOLOR=”000000″ TEXT=”#000099″ LINK=”#006600″ ALINK=”FF0033″ VLINK=”#FFFF00″>
Du kan även använda en bild som bakgrund.

BACKGROUND=”..”    Ger bakgrundsbild. Filnamnet anges som attributvärde.

Exempel:
<BODY BACKGROUND=”Bildnamnet.jpg”>

Länkar
<A></A>        Länk
HREF=”..”        Pekar på vart länken ska gå

Länk till annan hemsida:
<A HREF=”www.facebook.com”>Denna länk går till Facebook!</A> – Denna länk går till Facebook!
Länk till email:
<A HREF=”mailto:musse.pigg@hotmail.com”>Maila mig!</A> – Maila mig! (När man klickar på länken öppnas användarens e-postklient.)
Länk till intern sida:
<A HREF=”sida2.htm”>Se nästa sida!</A> – Se nästa sida!  (Länken går till den sida du döpt till sida2.htm på din hemsida. Glöm inte ange rätt sökväg!)

Länkar:

http://www.april.se/htmlkurs/htmldoc0.html#cmd

http://www.simplehtmlguide.com/cheatsheet.php

https://www.w3schools.com/

html