HTML | Den absoluta början

Avdelningen för webbrelaterad programmering och grafisk design.
Post Reply
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

HTML | Den absoluta början

Post by lither »

Ja, läste thrs underbara guide till PHP som jag knappt börjat smaska på så jag hade i åtanke att få de flesta här som vill börja smaska på HTML att kunna få göra det...

Steg 1 - Lite historia

HTML (HyperText Mark-up Language) "föddes" av Tim Berners-Lee runt 94-95 (har egentligen funnits sen 90, men Tim utvecklade det då han jobbade på CERN 1989) då han lanserade versioner som HTML+ och HTML 3.0. Den verkliga uppmaningen för världens befolkning kom egentligen inte förrän World Wide Web Consortium (W3C) lanserade version 3.2.

97 kom HTML 4.0 som börjar bli mer o mer av en standard i de flesta webläsarna runt om i världen, även fast inte bl.a. IE och Netscape alltid vill utnyttja den..


Steg 2 - HTMLs uppbyggnad

Ja, HTML bygger, precis som många andra webtolkningar, på att du anger olika kommandon eller i detta fallet "tags" (som du då anger med < och >).

HTML, enligt mig, är ett av de lättare språken att förstå. Det behövs inte mycket till erfarenhet att kunna det, bara lite tid...

Nästan alla taggar avslutas med </> som t.ex:

<HTML> och </HTML>

<I> och </I>

Till att börja med så ska vi gå igenom några av de vanligaste taggarna som används, vilket är <HTML>, <BODY> och <HEAD> som används av olika skäl.

Tips: Det är oftast en fördel att använda STORA bokstäver inom taggarna för att du lätt ska se vart de är nu du ändrar. Vissa idiotiska tolkningar måste t.o.m. använda sig av stora bokstäver...

<HTML>-taggen:

<HTML> används för att visa när ditt HTML-dokument ska börja. Här smusslar du in alla din kod..

<HEAD>-taggen:

<HEAD> är den som brukar användas för att du ska sätta i grundegenskaperna för ditt dokument. Här kan du sätta in egenskaper som stil, titel m.m.

<BODY>-taggen:

Här hamnar ditt arbete. Tabeller, text, färger, ja i stort sett allt som ska visas.


Vi gör nu ett litet test och ser hur det blir

Code: Select all

<HTML>
 <HEAD>
 </HEAD>
<BODY>
</BODY>
</HTML>
Händer inte mycket, och inte särskilt roligt, även fast det är väldigt viktigt...

Nåväl, vi går vidare med lite taggar som du kan ha nytta av.


Steg 3 - En liten lätt start

När du t.ex. skriver ett Word-dokument så har du ju massvis med möjligheter att få din text fet, kursiv, understruken, färgad etc.
Samma sak gäller i HTML.

Eftersom engelska är det mest utspridda språket i världen så är det även gjort för att HTML ska använda det.

Fet text får vi genom <B> och avslutningen </B> (B som i 'bold').

Kursiv text får vi genom <I> och avslutningen </I> (I som i 'italic).

Understruken text får vi genom <U> och avslutningen </U> (U som i 'underlined').

Code: Select all

<B>Mega menyn</B>

<I>Lutande tornet i Pisa</I>

<U>Viktigt!</U>
Ja, som du ser så är det ju inte särskilt svårt, till att börja med iaf. ;)

Självklart kan du sätta flera taggar tillsammans om du t.ex. vill ha en fet och kursiv text så blir det <B><I>Text</I></B> osv.

Nu går vi vidare med <FONT>-taggen som kan innehålla mer info inuti sig.

Font (på sv. typsnitt) ändrar på texten som du skriver, och måste då kunna ändra dess färg, storlek, typsnitt etc.

Det gör vi enkelt genom att lägga till det som vi vill ha i <FONT>-taggen. T.ex.:

Code: Select all

<FONT COLOR="red">Ger en röd färg</FONT>

<FONT SIZE="9">Ger storlek 9 ([i]ej i pixlar![/i]</FONT>

<FONT CLASS="verdana, arial">Visar typsnittet verdana i första hand, sen arial</FONT>
Inte särskilt svårt att komma ihåg det heller, väl?!

Nåväl, då kanske du tänker dig. 'Hur gör man alla dessa profisionella sidor då med all glitter å glamour?'.

Ja, till att börja med så måste du låta allt få sin tid. Gör en skiss först, koda sen.

Vi fortsätter nu med taggarna <A>, <IMG> och <>

<A>-taggen:

A (anchor) gör så du kan länka till olika sidor. I detta fallet räcker det inte med bara <A> utan du måste lägga till HREF (Hypertext Reference). Skulle kunna se ut såhär:

Code: Select all

<A HREF="http://www.com">www.com</A>
Anger du inte http:// före (eller ftp eller vad du nu vill ha..) så tar den för givet att sidan ligger i samma katalog som din .html-fil och du kommer antagligen få stopp.

'Maila mig!' har du säkert sett någon gång. Då räcker det inte att sätta in din mail utan du måste knåpa in mailto: efter HREF. Såhär:

Code: Select all

<A HREF="mailto:buy_toys@gunsrus.com">Maila mig!</A>
Om du skulle vilja gå till toppen av en sida som är väldigt lång (som denna kommer att bli ;)) så lönar det sig att sätta in två saker i din text. Först där du vill ha toppen av sidan, där smusslar du in

Code: Select all

<A NAME="top">
...och där länken ska vara så anger du samma sida som du är på (kanske minsida.html) och lägger till #top efter.

Code: Select all

<A HREF="minsida#top.html">Gå till toppen</A>
<IMG>-taggen:

Ja, denna taggen kanske du kan lista ut själv att det är en tag för att infoga en bild. Den behöver du aldrig heller avsluta med </IMG> som kan vara en lättnad. Här kan du knåpa in saker som storlek, ram (border) m.m.

För att välja bild så måste du ange vilken address din bild ligger på. Det gör du genom att använda SRC (source) och sen din address:

Code: Select all

<IMG SRC="http://www.uglypeople.com/lither.gif">
Ligger din bild i samma katalog som din .html-fil? Skit i att skriva in addressen utan kör istället:

Code: Select all

<IMG SRC="lither_aer_soet.jpg">
Om du nu skulle slå ihop detta med <A>-taggen så bilder den oftast automatiskt en ram runtom bilden. Den kan du få bort genom att skriva:

Code: Select all

<IMG SRC="bild1.gif" BORDER="0">
.. eller kanske ha en istället och ändra 0:an till någon annan siffra.

Ändringen av storleken funkar inte genom att lägga till SIZE utan du måste ange höjd och bredd.

Code: Select all

<IMG SRC="jag_snygg32.jpg" HEIGHT="100" WIDTH="70">
Håller du musen över en bild så får du ibland fram en liten textsnutt. Det beror på att skaparen av sidan har lagt till ALT i IMG-taggen.

Code: Select all

<IMG SRC="kusin_rofl.jpg" ALT="här e min loliga kusin! ROFL!!!!">
Extra!: Istället för att skapa tabeller (kommer lite senare i kursen..) för att placera texten bredvid bilden så kan du lägga till ALIGN.

Code: Select all

<IMG SRC="bild.gif" ALIGN="middle">
.. och texten hamnar till höger om bilden fast i mitten av den.

Kom ihåg! Internet tar inte ansvaret att visa .bmp, .tga osv. utan använd .jpg och .gif i första hand. .png kan komma sedan (däremot så stödjer bl.a. inte IE .png-visning).

<HR>-taggen:

<HR> (Horizontal Reference) gör en fin liten linje som du kan dela upp stycken med. Denna kan du ändra färg, storlek på å lite annat smått o gott.

Code: Select all

<HR COLOR="#CCCCCC" WIDTH="30">
Här blir storleken däremot i pixlar. Du kan även skriva i % (procent) och då täcker linjen det antalet procent av sidan som du angett.


Steg 4 - Hexkoder

Färggivning #1 om du inte vill skriva saker som 'red', 'black' etc.

Här använder du dig av en sexsiffrig kombination av bokstäver och siffor (ej å, ä, ö) och börjar det hela med en # (fyrkant).

#FFFFFF - Blir vit
#000000 - Blir svart
#808080 - Blir grå
#FF0000 - Blir röd

osv.

Här hittar du alla blandningar


Nästa gång..

När jag återkommer så kommer jag gå igenom nya taggar, bl.a. <TABLE>, <UL>/<LI> och hur du ändrar bakrund.
Last edited by lither on 2003-04-12 15:00:00, edited 1 time in total.
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
nva
Hedersbit
Posts: 2517
Joined: 2002-03-07 23:34:21
Location: Skåneland
Contact:

Post by nva »

Klistrad.
Var snäll och gör uppdateringarna i denna tråden lither.
The three most dangerous things in the world are a programmer with a soldering iron, a hardware type with a program patch and a user with an idea.

In theory, there is no difference between theory and practice. But, in practice, there is.
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

HTML | Steg 5-8

Post by lither »

Kunde inte hålla mig längre, skriver nästa del redan nu. ;)

Ja, som jag nämnde i förra så skulle vi ta upp bl.a. hur man gör en bakrund, pillar i <UL>-taggen etc.


Steg 5 - Den små detaljerna

Vet inte om det var en menad miss jag gjorde, men nu kommer lite fler taggar som du kan ha användning av OFTA!

<BR> (Break) Gör en radbrytning
<P> (Paragraph) Gör en ny paragraf (liknar två st. <BR>)
<STRONG></STRONG> Gör en "kraftig" text. Precis som <B>
<EM></EM> Precis som <I>


Steg 6 - Jobba med tabeller och listor

<TABLE>-taggen:

Hoppas du kommer ha lite tålamod att lära dig TABLE, eftersom det inkluderar en hel del!

TABLE innehåller många funktioner. Den kan ha en titel, uppdela dina bilder etc. Ja, den används på sagolikt många sidor.

Om vi tar en liten början så går vi sedan igenom varje del för sig:

Code: Select all

<TABLE>
<CAPTION>Aktiviteter</CAPTION>

<TR>
<TD> Måndag </TD>
<TD> Onsdag </TD>
<TD> Lördag </TD>
</TR> 

<TR>
<TD> 18:00 </TD> 
<TD> 20:30 </TD>
<TD> 19:15 </TD>
</TR>

<TR>
<TD> Fotbollsträning </TD>
<TD> Date </TD>
<TD> Filmkväll </TD>
</TR>

</TABLE>
Mycket på en gång kanske? Egentligen är det inte särskilt svårt.

<CAPTION> skapar en titel ovanför din tabell. Den blir centrerad och fet stilad. Inte många som använder den men det händer.

<TR> (Table Row) skapar en ny rad i din tabell. Vill du göra en ny rad måste du avsluta den gamla och göra en ny men tänk på att...

<TD> (Table Data) måste också avslutas isf. Den gör en ny s.k. "cell" i din rad.

Lite andra saker som du kan ha nytta av:

HEIGHT/WIDTH: Höjd och bredd. Fungerar på samma sett som i <IMG>

BORDER: Samma som i <IMG>. Skapar en ram runt om tabellen. Anger du 0 så syns det ingen ram men den finns ändå där för att "hålla ihop" tabellen.

CELLSPACING: Bestämmer mellanrummet mellan cellerna.

CELLPADDING: Bestämmer mellanrummet mellan ramen och texten i tabellen.

Vill du kanske ha en liten länk mitt i en cell? Visst:

Code: Select all

<TD ALIGN="center">
<A HREF="http://www.home.se">Gratis mailaddress!</A>
</TD>
Finns massvis med saker att göra, självklart. Men <TABLE> har även lärt sig att irritera folk som använder olika webläsare. Se t.ex. på DHs hemsida med Opera och IE. Du ser skillnaden, va?!

<UL>-taggen:

Det är inte bara <UL> (Unordered List) som "gäller" om du vill göra en lista utan även <OL> (Ordered List). De två har två olika funktioner även fast de bygger på sin lista med <LI>.

Code: Select all

<UL>
<LI> Sak 1
<LI> Sak 2
</UL>
Blir en lista som skulle se ut såhär:
  • Sak 1
  • Sak 2
.. och:

Code: Select all

<OL>
<LI> Thing 1
<LI> Thing 38,5... oops! Sorry Thing 2
</UL>
.. skulle skapa en sådan lista:
  1. Thing 1
  2. Thing 38,5... oops! Sorry Thing 2
Om du skulle vilja ha lista med kvadrater istället för cirklar så skriv:

Code: Select all

<UL TYPE="square">
och en med romerska siffror blir

Code: Select all

<OL TYPE="I">
Prova att göra en inköpslista, vettja'! ;)


Steg 6 - Jobba med <BODY>-taggen

Ja, egentligen så vet vi än så länge inte mycket om <BODY>-taggen mer än att den bestämmer vart vårat material till sidan hamnar. Men faktum är att du kan knö in väldigt mycket av de grundregler som ska vara för sidan här, såsom bakrundsfärg, bakrund, färgtext etc.

En tom HTML-sida börjar vanligtvis med vit bakrund. Ändringen av det sker genom:

Code: Select all

<BODY BGCOLOR="#FF0000">
.. som ger en gräsligt ful röd bakrundsfärg på sidan.

Vill du istället ha en bakrund, bestående av en bild som läggs sida vid sida (som Win* ofta använder sig av) så fixar du till det genom att skriva:

Code: Select all

<BODY BACKGROUND="bakrund.jpg">
Glöm inte att URL:en måste vara exakt rätt. Samma som bildsökvägen och länksökvägen..

Sen så kan du även ändra grundtextens färg, länkarnas färg osv.

Code: Select all

<BODY TEXT="black" LINK="red" HLINK="#FF0088" VLINK="#808080" ALINK="#CCCCCC">
TEXT är grundtextens färg

LINK är grundlänkens färg

HLINK (Hovering Link) är färgen som blir på en länk när du håller musen ovanför

VLINK (Viewed Link) är färgen som blir på en länk som du besökt tidigare

ALINK (Active Link) är färgen som blir på en länk när du klickar på den

Ja. Om du skulle vilja ha lite enkla special-effekter så kan du även smussla in dem i <BODY>. De är:

<BODY onLoad="*script*"> Här kan du knö in ett litet JS om du som ska laddas när sidan startar. Om du vill så kan det bara komma fram en liten message-ruta som säger något kuligt.

Code: Select all

<BODY onLoad="alert('Hello World')">
En extrem klassisker i repris. Den kommer alltså fram en ruta när du laddar sidan som säger Hello World och har då en "OK" knapp på sig.

<BODY unLoad="alert('Goodbye World')"> Fungerar precis som onLoad fast när du lämnar sidan istället.

onBlur och onFocus Dessa två kan både vara snygga och irriterande på samma gång. onBlur är färgen när sidan är "inaktiv" och onFocus är färgen när du "fokuserar" dig på sidan. Dock måste du lägga till ett javascript:

Code: Select all

<SCRIPT TYPE="text/javascript">
<!--
function setbg(color)
{
document.bgColor=color;
document.body.style.backgroundColor=color;
}
//-->
</SCRIPT>
Hamnar inom <HEAD></HEAD>-taggarna. Sen så fixar vi:

Code: Select all

<BODY onFocus="setbg('red')" onBlur="setbg('white')">
.. och Voila! Sidan är mycket, mycket, mycket gräsligare än förrut! ;)

Ska sidan vara scrollbar?

Code: Select all

<BODY SCROLL="yes/no"> ([i]välj själv[/i])
En sista del är BGPROPERTIES="FIXED". Detta gör så att bakrunden inte rör sig utan är samma hela tiden..

Code: Select all

<BODY BGPROPERTIES="FIXED">

Steg 7 - Ett fint formulär

Jag hade egentligen inte tänkt att gå igenom punkten <BUTTON>, men gör jag det så kommer det isf senare i denna guide...

Ja, ett formulär är ju enkelt sett ett sådant som du ser när du postar i detta forumet, när du ska betala räkningar på nätet osv.

Genom taggen <FORM> så kan du sedan arbeta vidare för att göra lite olika slags formulär.

Code: Select all

<FORM>
Namn: <INPUT><BR>
E-Mail: <INPUT>
</FORM>
Här kan du då fylla i namn och e-mail. Kanske inte det snyggaste, men särskilt inte något som fungerar. Vart ska detta formulär skickas? Hur ska man kunna skicka det utan nån skicka-knapp?

Ja, svaret får vi genom att självklart lägga in olika parametrar i de olika taggarna.

Code: Select all

<FORM ACTION="mailto:bush@america.com?subject=Who are you doing?" METHOD="post">
Name: <INPUT NAME="Name" TYPE="text" SIZE="30"><BR>
Mail: <INPUT NAME="Mail" TYPE="text" SIZE="30"><BR>
<INPUT TYPE="submit">
</FORM>
Oj! Nu kom det plösligt en sjuhelvetes massor med saker här. Ta det lugnt, en sak i taget.

ACTION Vart ska informationen från formuläret skickas? Det kan vara direkt till en mail, en CGI-bas, PHP-sida etc. Välj själv, men kan du inte hur man gör när det gäller CGI eller PHP så ta mail och gör som i <A HREF..> delen. Kör en mailto: paragraf och här skulle du även kunna lägga till en ?subject= paragraf (funkar i <A> också..) om du skulle vilja att mailet ska få en direkt topic i själva mailet.

METHOD Två att välja på. get och post. De båda skickar iväg data (på olika sätt) som sedan hamnar i din brevlåda, .pl-fil eller vad du nu har angett. "post" är att rekomendera!

Vad som sänds i "get":

Code: Select all

GET /cgi-bin/maillist.cgi?realname=Kevin+Burris&email=kevin@idocs.com HTTP/1.0
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
Referer: http://www.idocs.com/tags/foo.html
Accept-Language: en
UA-pixels: 640x480
UA-color: color8
UA-OS: Windows 95
UA-CPU: x86
User-Agent: Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)
Host: 10.10.10.20
Connection: Keep-Alive
Vad som sänds i "post":

Code: Select all

POST /cgi-bin/maillist.cgi HTTP/1.0
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
Referer: http://www.idocs.com/tags/foo.html
Accept-Language: en
Content-Type: application/x-www-form-urlencoded
UA-pixels: 640x480
UA-color: color8
UA-OS: Windows 95
UA-CPU: x86
User-Agent: Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)
Host: 10.10.10.20
Content-Length: 44
Pragma: No-Cache
Connection: Keep-Alive

realname=Kevin+Burris&email=kevin@idocs.com
NAME Ange namnet på formuläret eller de olika delarna som skickas iväg så att du vet att t.ex. 'bush@america.com' är själva mailen och inte namnet.

ENCTYPE Detta behöver du egentligen inte bry dig om alls, men om du nu skulle så finns det tre parametrar att välja på:

application/x-www-form-urlencoded (standard) - Fungerar för att skicka i stort sett vilken slags data som helst..

multipart/form-data - Används för att ladda upp filer

text/plain - Vanligt formulär. Skickar alltså bara vanlig text.. "you know the deal".

TARGET Vilken sida kommer upp vart när du skickat? Ja, här finns också flera möjligheter.

"_blank", "_parent", "_self", "_top" eller namnet på en frame (senare kurs..)

_blank skapar ett nytt fönster.

_parent har med frames att göra. Senare kurs..

_self hamnar i samma fönster.

_top gör att du hamnar i den översta framen. Senare kurs det med...

TYPE Submit, text eller vad? Ja, det är i stort sett de två som används. Inte mycket mer att snacka om. ;)

Nästa kurs

Bl.a. så kommer vi gå igenom CSS och svåra termer som kan vara bar att veta.
Last edited by lither on 2003-04-13 2:32:50, edited 1 time in total.
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

HTML | Steg 9-13

Post by lither »

Ja, vet inte hur länge detta ska hålla på men jag har inte tömt mina kunskaper på långa vägar.. ;)

I steg 9-12 så kommer vi att gå igenom CSS,


Steg 9 - CSS

CSS (Cascading Style Sheets) och används för ändra visningen av olika element när det gäller HTML. Här kan du fylla exakt samma egenskaper som du hade kunnat göra i HTML fast på ett annorlunda sätt.
Det finns två sätt att använda CSS. Antingen lagra infon i .css-filer eller använda <STYLE>-taggen. Båda funkar lika bra.

Nu kommer jag inte gå igenom varje syntax för sig men du ska få lära dig hur du skriver enkel CSS.

Genom att använda dig ett en grund som ser ut såhär:

ämne {egenskap: värde}

så kan du snart det mesta inom CSS. Testa att byta ut lite enkelt i denna grund:

Code: Select all

body {color: black}
Så svårt var det. Vill du ha fler body egenskaper så:

Code: Select all

body {color: red; text: black}
... separera med ;

Ja, detta är bara grunden. En fiffig sak är att du kan namnge egna egenskaper i grupper med kanske flera egenskaper som du kallar för t.ex. 'title' som du kan använda flera gånger, så slipper du skriva samma sak flera gånger.

Code: Select all

.title {text-align: center; color: red}
Allt du behöver göra nu är att ha en text och smussla in en ny tag.

Code: Select all

<A CLASS="title">Tjolahopp!</A>
Behöver självklart inte vara <A> utan det går på andra taggar som <P>, <HL>, ja, i stort sett alla!

Mer och exakta CSS guider kan du hitta på http://www.w3schools.com/css/


Steg 10 - Publicera din sida i <META>

Ja, vissa sökmotorer använder sig av att söka i din HTML-text genom att gå igenom <META>-taggen.

Har hamnar den mesta infon om vad det är på din sida och hur/av vem den är skapad.

Code: Select all

<META NAME="author" CONTENT="Erik Blomqvist">

<META NAME="generator" CONTENT="Notepad">

<META NAME="revised" CONTENT="Erik Blomqvist,13/5/03">

<META NAME="description" CONTENT="En fulladdad HTML guide för såväl nybörjare och de som vill ha lite utmaning">

<META NAME="keywords" CONTENT="html,guide,newbie">
Om du inte fattar vad de olika orden betyder så föreslår jag att använda ett eng.-lexikon!

Alla <META>-taggar hamnar innanför <HEAD></HEAD>


Steg 11 - Fortsättningen på <HEAD>

Tidigare så har du inte fått reda på vad <HEAD>-taggen kan innehålla. Det som den kan innehålla är:

<BASE>: Anger vilken grund URL allt material ligger på.

<LINK>: Relaterar två länkar med olika egenskaper.

Code: Select all

<LINK REL="stylesheet" TYPE="text/css" href="default.css">
Nu såg du att vi fick in hur man ska veta vilken CSS-fil som skulle användas. Även lite annan info som "REL" som anger "relationen" mellan nustående dokument och det angivna. "TYPE" specificerar MIME typen (mer om MIME kommer..).

<TITLE>: Vad ska det vara för topic på din sida?

Code: Select all

<HEAD>
<TITLE>Min sida, version 1.3</TITLE>
</HEAD>
Tips! Vill du använda mer än ett mellanrum så använd dig av

Code: Select all

& n b s p ;
... fast sammanfogat (funkade inte att skriva för mig här, en liten miss av phpbb skaparna..). ;)

<SCRIPT>: Kanske ett litet JavaScript? Det hamnar då här..


Steg 12 - Utbyggnaden av ett formulär

Man kan kanske tro att en textruta blir lätt skapat genom:

Code: Select all

<FORM><INPUT TYPE="textarea">
men så är inte fallet!

Nej, istället måste vi göra en egen <TEXTAREA>-tag. På ett sätt är det ju bra eftersom den också har egenskaper såsom rows, cols, name osv.

Om du redan vill att det ska stå nått i t.ex.

Code: Select all

... <INPUT TYPE="text"> ...
så fungerar det genom VALUE="bla bla bla"

Code: Select all

Namn: <INPUT TYPE="text" VALUE="lither"
En utbyggnad som måste användas för sig är <FIELDSET> som har lite konstiga egenskaper ibland. Den ser i stort sett ut som ett <FORM> fast med en ram runtom. Och istället för att använda <CAPTION> så blir det <LEGEND>. Lite nytt kanske? ;)


Steg 13 - De mindre använda/kända tagsen

Du som kanske hållt på ett tag med HTML, vet du t.ex. vad <ACRONYM> gör? Visste du att <INS> fungerar på samma sätt som <U>?

Ja, lite av detta kommer nu.

<ACRONYM>: En liten luring som är rätt snygg faktiskt. Skriver du:

Code: Select all

<ACRONYM TITLE="Bastard Operator From Hell">BOFH</ACRONYM>
.. så kanske du förstår vad som händer. Den skapar en vanlig text fast den gör så att när du håller musen över texten så får du en liten förklarning..

<BLOCKQUOTE>: Används för att citera folk. Precis som här i texten där det hamnar en citat lite inåt i själva dokumentet.

Nya ändringar av text kan ske genom dessa taggar:

<EM> - Emphasized text (liknar kursiv text).
<STRONG> - Fet text.
<DFN> - Definition term (liknar kursiv text).
<CODE> - Kolla på de kodningar som jag gör. ;)
<SAMP> - Sample computer code text. Ser också ut som code...
<KBD> - Keyboard text. Som ovanstående.
<VAR> - Variabel.
<CIT> - Citations text.

<BDO>: En av de roligaste och mest onödigaste som jag vet.

Code: Select all

<BDO DIR="rtl">Här ska det stå något. Typ "Heja Sverige!"</BDO>
Gissa tre gånger... Texten hamnar bak-o-fram! DIR="ltr" ger dig texten åt rätt håll.


Ja, man kan ju fråga sig ibland varför det finns alla dessa konstiga funktioner. Förmodligen för att du ska en sådan variation (?).

Nästa kurs

Ingenting är egentligen planerat. Får väl gå igenom MIME lite grann. Sen så den allra sista avslutningen för att kunna göra en ren, snygg och läcker HTML-sida. Vi höres/syns!
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

HTML | Steg 14-16

Post by lither »

Frågan är om detta är den sista kursen, men det ser så ut..

En liten genomgång av MIME sen så hur du bygger din absoluta hemsida.


Steg 14 - MIME

MIME (Multiourpose Internet Mail Extensions) är sättet som används för att föra över mail.
Jobbar som en teckenstandard för att klara av tecken som inte ASCII pallar, bl.a. å,ä och ö, och kan även hantera bilagor med program, ljud och grafik.


Steg 15 - Frames

Ja, nu kommer det äntligen. Gör dina egna frames!

Det är, för dig som har missat, ett sätt att dela in en sida så att du inte behöver ladda lika mycket material varje gång.

När vi jobbar med frames så jobbar vi med <FRAMESET>. Här uti sätter vi in våran information. FRAMESET bestämmet egentligen bara grundinfon om hur alla frames skall vara uppbyggda.

FRAMESET jobbar med COLS/ROWS (kolumner/rader). Snabbt översatt blir det att du jobbar med frames i höjd och bredd.

Code: Select all

<FRAMESET COLS="25%, 25%,*">
Ok. Nu handlar det om bredden, alltså. Men stjärnar (*) då, vad gör den där? Jo, den ersätter resten av det som fattas. 50% alltså. Hade du skrivit de andra två i pixlar så skulle den sista vara lite svår att lista ut hur stor den skulle vara och då hjälper stjärnan till på ett bra sätt.

Mellan <FRAMESET> och </FRAMESET> så jobbar vi däremot med <FRAME>. Här anger vi vilken sida som ska visas, namn etc.

Sen om den webläsaren som användas inte skulle stödja frames så skulle du kunna visa det genom att sätta en text mellan <NOFRAMES> och </NOFRAMES>.

En färdigbyggd frame kan se ut såhär:

Code: Select all

<HTML>
<HEAD>
<TITLE>Min fina hemsida!</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET="iso-8859-1">
</HEAD>

<FRAMESET ROWS="50,*,50" BORDER="0" FRAMESPACING="0"> 

<FRAME NAME="top" SCROLLING="NO" NOREZISE SRC="top.html" >

<FRAME NAME="main" SCROLLING="YES" NORESIZE SRC="main.html">

<FRAME NAME="bottom" SCROLLING="YES" NORESIZE SRC="bottom.html">

</FRAMESET>

<NOFRAMES> 

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
Din webläsare stödjer inte frames. Ladda ner en nyare version, är du snäll..
</BODY>

</NOFRAMES> 

</HTML>

Steg 16 - Början på din hemsida

Eftersom du inte behöver någon speciell server för att ha dina HTML-dokument så föreslår jag att du har de på din hårddisk tills du vill sprida ditt material.

Att börja bygga en egen hemsida krävs först o främst tålamod men också planering. Gör en skiss. Du kanske ska ha en liten meny, litet bildarkiv etc. Tänk efter före!

Nu ska ju inte jag sitta här och koda hemsidor åt dig men lite saker som kan vara bra att ha är:


Meny/-er

På nått sätt så ska man ju kunna bläddra i din hemsida. Skapa en enkel meny. Det räcker med:

Code: Select all

<TABLE WIDTH="300" BORDER="0" CELLSPACING="0" CELLPADDING="6">
<TR>
<TD BGCOLOR="#000000">
<FONT FACE="verdana,arial" SIZE="1" COLOR="#FFFFFF">
<CENTER><B><FONT COLOR="#F6861F">Start</FONT> :: <A HREF="mig.html" TARGET="_self">Om mig</A> :: <A HREF="dator.html" TARGET="_self">Mina datorer</A> :: <A HREF="gastbok.php" TARGET="_self">Gästboken</A></B></CENTER>
</FONT>
</TD>
</TR>
</TABLE>
Mycket simpelt.

Tänk på vilka typsnitt du jobbar med. Verdana med storlek 1 (8 pixlar) brukar vara en väldigt klassisk standard på många hemsidor i dagsläget.

Bilder

Du kommer inte långt utan några bilder. Skapa egna. Få de att gå ihop med själva hemsidan och färgerna. Inte för mycket heller. Tänk på storleken på dina bilder också. Majoriteten av internetanvändare är nog fortfarande modemare!

Något unikt?

Varför inte lägga in något unikt/udda som inte många har på sin hemsida? Använd din fantasi. ;)

Håll ihop din hemsida

Sprid inte ut allt allt för mycket. Flytta inte text hursomhelst, upp och ner, bak och fram. Använd gärna frames.


Nästa kurs

.. blir den sista! Här kommer vi gå igenom vanliga tabbar och missar plus att jag ska försöka få en liten, liten godis-bit. ;)
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
Turrican
Posts: 36
Joined: 2002-12-09 22:22:23
Location: Falun
Contact:

Post by Turrican »

Vill bara uppmärksamma att du glömt att förklara hur man centrerar saker. Dock har du ju visat det i några exempel, men det kanske inte alla uppmärksammar/förstår. Centrering går till såhär: <center>det som ska centreras här (kan vara vilka taggar inom body som helst)</center>.
Bra förklarat annars.
<bupp2> Det går att kombinera CS med porr. Jag känner en som har lagt in en porrbild vid consolen och rycker i baguetten när han har dött.
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

HTML | Avslutningen Steg 17-18

Post by lither »

Glömde bort denna tråden. Ni får ursäkta...

Ja, nu var det ju meningen att göra någon slags avslutning eftersom jag lovat det, så så får det bli.

Steg 17 - Sammarbeta med flera språk

Du kommer designmässigt väldigt långt med HTML, men HTML har inte möjligheten att arbeta av sig själv. Den visar bara upp det som du kodat. Vill du kanske ha en gästbok så finns det flera lösningar till detta.
Det enklaste är ju självklart de som är gratis. Men prova även att kombinera det med andra språk såsom PHP och ASP. De har möjliheten att uppdatera sig själva och visa material som andra har gett utifrån som sedan hamnar i själva PHP/ASP-koden men visas upp genom HTML.

Söker du på en sökmotor så kan du hitta hur mycket gratissaker som helst att ladda ner till din hemsida. Ger ändå en del länkar för de lata:

http://www.hotscripts.com
http://www.thescripts.com
http://php.resourceindex.com

Du kan säkert hitta massa själv...



Steg 18 - Den sista touchen

Folk blir inte ofta nöjda med sin design och slänger den helt. Vad som egentligen krävs är en sista touch för att få det snyggt. Jag kan inte direkt säga hur man ska göra för att få en snygg sida men det du kan tänka på är några av dessa saker:
  • Färgerna. De måste flyta ihop. Vinrött går sällan ihop med spygrönt. De ska vara behagliga färger för ögonen att kolla på.
  • Typsnitt. Alla har inte samma typsnitt som du. Ladda inte ner massa och använd dem på sidan eftersom folk måste ha typsnittet för att kunna se det.
    Hur ser din sida ut? Vilket typsnitt passar in till vad? Du kanske vill ha en sida som använder Courier (/Courier New):

    Code: Select all

    Detta typsnittet heter Courier/Courier New. Har du inte typsnittet så ses sidan med sans-serif och sedan ditt default-typsnitt.
    ...eller så kan sidan visas med verdana. Detta typsnittet är just det som du läser denna text med nu (har du inte det så kommer först Arial, Helvetica, sans-serif sen defualt). Tycke och smak.
  • Krafs. Släng inte ut för mycket skit. Låt det vara stilrent istället. De rätta färgerna och bilderna gör susen du behöver inte ha massa Javascripts som gör att en 300MHz:are laggar sönder.
  • Tänk kreativt. Skaffa inspiration från andra saker, filmer utan att rippa dem. Det är så du ökar din egna kreativitet och ökar dina egna kunskaper för att sedan göra något eget och dela med dig med andra...
Det är svårt att tillägga något nu. www.w3schools.com hjälper dig med resten. Detta är en början. W3Schools kan även lära dig mycket mer, såsom Flash, ASP, SOAP m.m.

Ta chansen och utnyttja den! Lycka till!

/lither
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
Branstrom
Hedersbit
Posts: 3487
Joined: 2002-02-22 16:46:37
Location: Härnösand
Contact:

Post by Branstrom »

Bra jobbat.

Om jag får lika mycket tid över som du tydligen haft, någon gång i framtiden, tänker jag skriva en XHTML 1.1/CSS3-guide, när jag har lärt mig dem till fullo. :p
Fredrik Bränström. Blogg + portfolio, så småningom.
User avatar
Peter Wall
Hedersbit
Posts: 7026
Joined: 2002-03-08 0:52:56
Location: Stockholm
Contact:

Post by Peter Wall »

Tja, NiM. Kanske börja med att förklara lagerhantering i kombination med javascript istället för att använda tabeller och frames. Borde väl inte vara så svårt för dig att slänga ihop? ;)

XHTML är inte heller så svårt att förklara. Vissa taggar är inte tillåtna, avsluta alla taggar, bara små bokstäver. Said and done ;)
Diplomerad webbutvecklare
Microsoft Certified Professional Windows 2003
Microsoft Certified Technology Specialist Windows Vista
"Did you know kidneys and applesauce are a delicacy in Sweden? I'm gonna get my applesauce back!"
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

Post by lither »

Hmm... jag kanske borde uppdatera den här, den känns lite uråldrig.
Men annars vore en CSS3-guide väldigt härlig. Varför inte XHTML också?!
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
Branstrom
Hedersbit
Posts: 3487
Joined: 2002-02-22 16:46:37
Location: Härnösand
Contact:

Post by Branstrom »

Punisher wrote:Tja, NiM. Kanske börja med att förklara lagerhantering i kombination med javascript istället för att använda tabeller och frames. Borde väl inte vara så svårt för dig att slänga ihop? ;)

XHTML är inte heller så svårt att förklara. Vissa taggar är inte tillåtna, avsluta alla taggar, bara små bokstäver. Said and done ;)
Jo, men det är ju nya koncept och sådär. Eller det räcker väl med att säga att innehåll och klassificering av innehåll (XHTML) ska vara åtskilt från form, layout, stilar (CSS). Att ta allt helt från början i och med allt nytt som kommit nu verkar onödigt men det är ett ganska rejält omtänk, relativt hur huller om buller man kunnat koda förr.

Btw, rekommenderar TopStyle (http://www.bradsoft.com/topstyle/index.asp) för hemsidesredigering, upptäckte ganska nyss det och blev positivt överraskad.

Skriver jag någonting blir det nog i sommar/höst.
Fredrik Bränström. Blogg + portfolio, så småningom.
Hauk
Posts: 4
Joined: 2004-07-27 17:22:55

Post by Hauk »

Hej, igen verkar ha nämt WDS; www.webdesignskolan.com

Där har ni en _riktigt_ bra början! Köp CD'n, den är väl värd pengarna!
User avatar
lyckegard
Posts: 2190
Joined: 2002-03-11 20:30:35

Post by lyckegard »

Turrican wrote:Vill bara uppmärksamma att du glömt att förklara hur man centrerar saker. Dock har du ju visat det i några exempel, men det kanske inte alla uppmärksammar/förstår. Centrering går till såhär: <center>det som ska centreras här (kan vara vilka taggar inom body som helst)</center>.
Bra förklarat annars.
har man ett stycke som centreras skriver man väl <p align="center"> </p> och är det en tabell <table align="center"></table> och är det bild <img align="center">.... <center></center> är nytt?
Tycker förövrigt titeln bör byta namn till html - Css - mime - nybörjare då jag inte tänkte klicka på den för att det såg ut som en htmlkurs men jag ville lära mig css
wham bam thank-you ye -ma'am
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

Post by lither »

lyckegard wrote:
Turrican wrote:Vill bara uppmärksamma att du glömt att förklara hur man centrerar saker. Dock har du ju visat det i några exempel, men det kanske inte alla uppmärksammar/förstår. Centrering går till såhär: <center>det som ska centreras här (kan vara vilka taggar inom body som helst)</center>.
Bra förklarat annars.
har man ett stycke som centreras skriver man väl <p align="center"> </p> och är det en tabell <table align="center"></table> och är det bild <img align="center">.... <center></center> är nytt?
Nejdå, har funnits länge. Fast det bör inte användas inom HTML och inte alls inom XHTML.
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
InS
Posts: 61
Joined: 2004-08-24 8:16:52
Location: the void in the forest

Post by InS »

lyckegard wrote:
Turrican wrote:Vill bara uppmärksamma att du glömt att förklara hur man centrerar saker. Dock har du ju visat det i några exempel, men det kanske inte alla uppmärksammar/förstår. Centrering går till såhär: <center>det som ska centreras här (kan vara vilka taggar inom body som helst)</center>.
Bra förklarat annars.
har man ett stycke som centreras skriver man väl <p align="center"> </p> och är det en tabell <table align="center"></table> och är det bild <img align="center">.... <center></center> är nytt?
Tycker förövrigt titeln bör byta namn till html - Css - mime - nybörjare då jag inte tänkte klicka på den för att det såg ut som en htmlkurs men jag ville lära mig css
jag fick lära mig att använda div och css för att positionera text...

Code: Select all

 <div align="center">centrerad text</div>
css förklarade lither...
when you die and reach heaven you'll learn that the highest philosophy in life is InSanity
User avatar
Peter Wall
Hedersbit
Posts: 7026
Joined: 2002-03-08 0:52:56
Location: Stockholm
Contact:

Post by Peter Wall »

InS wrote:
lyckegard wrote:
Turrican wrote:Vill bara uppmärksamma att du glömt att förklara hur man centrerar saker. Dock har du ju visat det i några exempel, men det kanske inte alla uppmärksammar/förstår. Centrering går till såhär: <center>det som ska centreras här (kan vara vilka taggar inom body som helst)</center>.
Bra förklarat annars.
har man ett stycke som centreras skriver man väl <p align="center"> </p> och är det en tabell <table align="center"></table> och är det bild <img align="center">.... <center></center> är nytt?
Tycker förövrigt titeln bör byta namn till html - Css - mime - nybörjare då jag inte tänkte klicka på den för att det såg ut som en htmlkurs men jag ville lära mig css
jag fick lära mig att använda div och css för att positionera text...

Code: Select all

 <div align="center">centrerad text</div>
css förklarade lither...
Det där är inte CSS. Just sådan styrning som du gör där, är det man vill undvika genom CSS. Det enda som ska finnas i .html är datat, resten styr du via CSSen (strikt sett).
Diplomerad webbutvecklare
Microsoft Certified Professional Windows 2003
Microsoft Certified Technology Specialist Windows Vista
"Did you know kidneys and applesauce are a delicacy in Sweden? I'm gonna get my applesauce back!"
User avatar
InS
Posts: 61
Joined: 2004-08-24 8:16:52
Location: the void in the forest

Post by InS »

InS wrote:css förklarade lither...
Punisher wrote:Det där är inte CSS. Just sådan styrning som du gör där, är det man vill undvika genom CSS. Det enda som ska finnas i .html är datat, resten styr du via CSSen (strikt sett).
givetvis används inte <div> med css men det gör ju inte <center> eller <p align> heller.

jag kanske var lite otydlig i mitt inlägg. istället för att använda <center> ska <div align="center"> användas.
vill man utnyttja CSS (vilket man ska) så blir det istället:

Code: Select all

I HTML-filen:
<p class="center">centrerat</p>

I main.css:
p.center      {   text-align: center;   }
when you die and reach heaven you'll learn that the highest philosophy in life is InSanity
User avatar
Moonsky
Posts: 2256
Joined: 2005-09-21 15:52:41

Post by Moonsky »

Man skola icke använda versaler i HTML taggarna!
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

Post by lither »

Moonsky wrote:Man skola icke använda versaler i HTML taggarna!
Guiden ska uppdateras någon gång, detta är någon av punkterna som kommer att ingå där.
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
pejka
Posts: 3
Joined: 2011-09-12 16:03:17
Contact:

Re: HTML | Den absoluta början

Post by pejka »

Jag kan gott säga att denna guide var bättre skriven än vad webdesign skolan har att erbjuda.
Hos TCC Designs kan du köpa hemsida till Sveriges absolut lägsta priser
knullis
Posts: 10
Joined: 2012-01-27 11:24:00

Re: HTML | Den absoluta början

Post by knullis »

Världens räddare i nöden! Tusen tack!! Dock kan man också skriva < strong > för att få fram fet stil </strong > :)
brudarrrrr, hitta mig på www.flirtfair.se ;-)
Post Reply