Lektion 9. Del 2 HTML CSS

Inläggstips!
Notepad++ eller Textwrangler gör en inställning på fliken Encoding. Välj UFT-8-BOM och ha som standard för att få ÅÄÖ att fungera. Eller koppla in denna koden från HTML del 1 här.
css-html
HTML & CSS
Nu till PS del två på min skola, här kommer en snabb vägledning till hur du fyller dina sidor och kopplar dom mellan varandra och sparar på rätt sätt.
1.
Gör en mapp på ditt skrivbord, här samlar du alla .css , .html , .jpg och png filer .
2.
Sno alltså koder från w3school, kopiera och klistra in i ditt dokument i tex. Notepad++.
3.
Kopiera och klistra in css koder. Spara som stilen.css – save as.. Andra gånger om du ändra
koden i css, spara bara som save.
4.
Din FÖRSTA HTML skall sparas i din mapp och döpas till INDEX.HTML – ett måste.
5.
Sök på w3schools – html link css. Kopiera denna länk och klistra in på index.html under <head>
6.
Nu har vi en koppling mellan html och css. gå in i din mapp efter och klicka på din index.html och se den på webben om det funkar.
7.
I mappen, gör en kopia av din fil index.html , backup.
8.
Sök länk på w3schools för att koppla sida1.html till index.html under <body>
9.
Gör detta med alla övriga sidor.
10.
Även från index.html till sida.html
11.
Grattis, nu är alla sidor länkade.
12.
Börja leka, byt design i css filen och innehållet i Html filerna. Sedan går man vidare till nästa etapp för att ladda upp denna på webben på riktigt, är alla relativa sökvägar fungerade live osv. med ett FTP program laddar du upp på ett webbhotel / web hosting, dessa kan man köpa, hyra eller söka på gratis varianter för detta där det kan finnas FTP program till.
Inläggstips!
Simpelmind app på mobilen för att enkelhet när man jobbar i projekt – samla dina mindmapps.

Lektion 4. HTML

Dagen började med att presentera våra bloggar inför klassen. Där jag förklarade varför jag valt wordpress, vem jag skriver till, hur jag har skivigt, när jag tänker skriva, syftet, designen, smarta funktioner, bra och dåligt med bloggen, kommande förbättringar osv. Vill ni veta mer djupgående om min presentation så får ni gärna kontakta mig så kan jag svara på dom frågorna!

Idag pratade vi också om;

PPPL=Positiv, Potentialer, Problemet, Lösning som är en Feedbacks metod/feedback modell.

Är en metod för hur man ger feedback/kritik på ett vettigt sätt utan att låta för negativ eller på hoppande. Så börja med att säga det positiva, sedan vad som det finns potentialer för att bygga vidare på, fortsätt med vad DU TROR problemet är och sedan avsluta med en hjälpande tanke och ge en lösning på problemet.

URL-Uniqe Resource Location pratade vi också om som betyder mer PLATSEN på webben.

SEO – Search Enginge Optimazation pratade vi också om. Som man använder sig av för att HITTA MIG. För att webben och folket på webben skall kunna hitta mig så krävs det att jag har bra rubriker och taggar mina inlägg och även länkar till andra sidor som är ett vinnande systemtänk + ökad trafik koncept för att bli sedd och komma upp på tex. Googles sökmotor. Alltså nyckeln till SEO är Rubriker/taggar/kategorier/etiketter och sedan länkar till andra och så dom till slut börja länkar tillbaka till dig. DÅ börjar Google gillar dig riktigt bra!

Olika former/kanaler för information

       PR           Sociala Medier        Reklam

E-handel       webb             blogg

   Nyhetsbrev

 

HTML

Html = Hyper Text Markup Language = Språk som hanterar länkar
Med tex. html-koder så bygger du upp en hemsida. Såhär är ofta en hemsida och HTML uppbyggt med dessa fält;

                                                                                   Header

                                                                Leftnav       Body          Rightnav

                                                                                    Footer

Inläggettips!

Det är väldigt smidigt att använda sig av ett enkelt text program ( som inte redigerar din text automatiskt ) att samla/spara dina koder i. Ladda ner dessa först innan du börja koda i HTML.

PC; Notepad++

Mac; Textwrangler

Min förklaring.

HTML finns det massvis med info och hjälp om på webben redan, det är färdig kodat. Att sno någon annans kod får man tydligen göra eller det ÄR det folk gör. Man hittar alltså inte på koderna helt själv utan man kan bara Kopiera koden till den funktionen man vill ha och Klistra in det i sin egen html fil.

Inläggstips 2! Jag är generös idag.

Allt du letar efter eller lär dig i HTML och CSS koder finns samlat på www.w3school.com . In och sno alla koder därifrån. Sök tex. Html backgound color, så kommer koden upp och du kopiera den.

Kortkommandon; Några som funkar i ALLA program som du bör lära dig för att kunna arbeta mer effektivt mellan fler olika program samtidigt är;

CTRL+Tab=Byt program/fönster

CTRL+A= markera Allt.

CTRL+C=Copy

CTRL+V=Visa, Klistra in

CTRL+Z= Ångra

I HTML så använder man sig av olika html taggar/länkar/kod folk säger olika ord i detta språk. På en html kod finns det; en start vart koden skall börja gälla-ett innehåll tex. Fet stil på texten, En bild-ett slut för när innehållet ska sluta gälla.

Tex;

Starter <html> <h1> <p> <h3>

Slut </html> </h1> </p> </h3>

Exempel att kopiera; 

Html länk att ha på din svenska sida för ÅÄÖ skall funka är;

<meta charset=”UTF-8”/>

Denna koden lägger du alltså mellan <html> och <head> eller efter <head> i början högst upp på filen.

När du sparar din fil i tex. Notepad++ eller Textwrangler så är det viktigt att första sidan heter INDEX och filändelser är .html = index.html . Dessa html filer skall sparas i en egen mapp på tex. Skrivbordet. För att lätt kunna justeras med CSS senare. (mer info om CSS kommer nästa lektion)

Min HTML sida råkade tyvärr har försvunnit pgv. enkelt fel där jag sparade på fel dator (skoldatorn). Men jag lärde mig väldigt mycket. Jag tyckte HTML var ganska enkelt ändå, känner att jag förstår språket och upplägget. Gjorde mycket HTML på Lunarstorm när man gick i klass HTMLfem. Jag gjorde olika funktioner och effekter som byta bakgrundsfärg, textfärg, ÅÄÖ, typsnitt, centrerad, fetstil, länka, bilder, videos, text som rörde sig i sidled m.m