advertisement

html hso

80 %
20 %
advertisement
Information about html hso
Education

Published on April 2, 2008

Author: orjhan

Source: authorstream.com

advertisement

Slide1:  Introduktion till HTML Slide2:  Filformat och extensioner Olika typer av filer har olika format. Ett worddokument är organiserat på ett sätt och en bildfil på ett helt annat vis. Vissa filformat kan bara öppnas och tolkas på ett begripligt sätt i ett visst program medan andra filformat följer en öppen standard och kan öppnas, tolkas och ändras i många olika program. Man känner som regel igen vilket format en viss fil har på filens extension (=filändelse). Extensionen brukar oftast bestå av tre bokstäver, t ex doc, xls, gif och tif. Några filändelser har två eller fyra bokstäver som ps och html. I Windows är filändelserna ofta associerade till ett visst program. Filändelser som är associerade till ett program kan ibland vara dolda, men det är en inställningssak. Är en fil associerad till ett visst program brukar det programmets ikon synas på filen, annars syns en mer generell ikon. Slide3:  Några vanliga filformat och extensioner är: .exe -- Körbart program .txt -- Ren textfil, öppnas med NOTEPAD, emacs mfl. .html -- Websida, öppnas med NOTEPAD, scintilla mfl eller med en webläsare som Internet Explorer .doc -- Worddokument, ordbehandlingsfil som öppnas med Microsoft Word eller StarOffice Writer. .xls -- Exceldokument, kalkylblad som öppnas med Microsoft Excel .tif -- Bildfil (fotografi eller liknande). Öppnas med Paint Shop Pro eller annat bildbehandlingsprogram. OBS! Bilder i detta format är ofta mycket utrymmeskrävande. Konvertera till jpg så räcker utrymmet på P: bättre. .jpg -- Bildfil (fotografi eller liknande). Öppnas med Paint Shop Pro eller annat bildbehandlingsprogram. .pdf -- Portable Document Format, öppnas med Adobe Acrobat Reader. Man bör veta i vilket program och vilken version av detta program en fil är skapad. Filformaten kan nämligen tyvärr skilja sig åt från version till version av ett och samma program. Det kan vara en god ide att undvika bokstäverna å, ä och ö i filnamn och namn på mappar. Olika typer av program:  Olika typer av program Koda själv : Notepad Scintilla Visuella program WYSIWYG: Frontpage Dreamweaver NVU Var spara- adress (URL)?:  Var spara- adress (URL)? ~ = Alt Gr http://10.10.10.8 Kapitel:  Vad är HTML? 3 HTML dokumentets struktur 7 Texthantering 13 Hyperlänkar 33 Bilder 36 Image maps 40 Tabeller 43 Frames (ramar) 54 Formulär 62 Kapitel Vad är HTML?:  Vad är HTML? Taggbaserat filformat för text-dokument Stödjer ”hyperlänkar” Konstruerat av Tim Berners Lee 1989 Utvecklat från SGML Standarder sätts av W3C Enkelt att lära sig Senaste versionen är 4.01 http://developer.netscape.com/docs/manuals/htmlguid/index.htm Hyper Text Markup Language:  Hyper Text Markup Language Hyper Text är klickbara referenser till andra dokument Markup Language är märkspråket för att beskriva dokumentets utseende och innehåll Vad är en tagg?:  Vad är en tagg? <TAGG> innehåll </TAGG> Start-tagg Slut-tagg HTML-container Taggens utseende:  Taggens utseende <FONT SIZE="6"> Hej </FONT> Element Attribut Värde Element – Instruktion till webbläsaren Attribut – Tillägg för att beskriva taggen Värde – Värdet för attributet HTML dokumentets struktur:  HTML dokumentets struktur HEAD BODY TITLE HTML Grundstommen:  Grundstommen <HTML> <HEAD> <TITLE>Rubrik</TITLE> </HEAD> <BODY> Sidans innehåll </BODY> </HTML> Slide13:  <HTML> <HEAD>     <TITLE>       Min första Hemsida     </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000">     <H1>       Välkommen till min första hemsida     </H1> <P>Detta är en mycket enkel hemsida</P> </BODY> </HTML> Slide14:  <HTML> <HEAD> <TITLE>  Min första Hemsida  </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000">  <H1> Välkommen till min första hemsida   </H1> <P>Detta är en mycket enkel hemsida</P> </BODY> </HTML> BODY-taggen:  BODY-taggen Innehåller det som syns i dokumentet Attribut: BGCOLOR="färg" BACKGROUND="bildfil" TEXT="färg" LINK="färg" VLINK="färg" <BODY BGCOLOR="yellow" TEXT="red"> Färger:  Färger Anges med W3C's färgnamn eller röd-grön-blå värden i hexadecimalt format Färgcirkeln:  Färgcirkeln Röd Blå Grön Magenta Gul Cyan Färgrymden:  Färgrymden R B G M Y C FF 0 W K FF FF Texthantering:  Texthantering Text formateras mha taggar Den text som skall formateras OMGES av en start-tagg och en slut-tagg Exempel: <START-TAGG>Text</SLUT-TAGG> Stycken:  Stycken Stycken för brödtext skapas med <P> Automatisk tom rad före och efter Exempel: <P> Brödtext </P> Justering av stycke:  Justering av stycke Attribut: ALIGN="left"|"center"|"right" <P ALIGN="center"> Centern är ett<BR> mittenparti. </P> Global centrering:  Global centrering För att centrera allt innehåll används <CENTER> taggen <CENTER> Sidans innehåll </CENTER> Radbrytning:  Radbrytning Sker automatiskt efter ett stycke Eller med taggen <BR> Exempel: <P> Rad 1<BR> Rad 2<BR> </P> Rubriker:  Rubriker Rubriker skapas med <H> Det finns 6 storlekar (<H1>-<H6>) <H1> är störst och <H6> är minst Exempel: <H3>Rubriktext</H3> <P>Brödtext</P> Horisontella linjer:  Horisontella linjer Används för att avgränsa brödtext Skapas med taggen <HR> Attribut: NOSHADE SIZE="storlek" COLOR="färg" <HR NOSHADE SIZE="3"> Textformattering:  Textformattering För att skapa olika stilar på texten <B> - Fet (Bold) <I> - Kursiv (Italic) <U> - Understruken (Underlined) <TT> - Skrivmaskin (TeleType) <P>Denna text är <I>kursiv</I> och <B>fet</B></P> Nästling av taggar:  Nästling av taggar HTML-taggar kan nästlas (dvs flera taggar i varandra) Nästlade taggar får inte gå omlott <B><I>Text</B></I> Fel! <B><I>Text</I></B> Rätt! Specialtaggar:  Specialtaggar För ytterligare formatering av text <SUP> - Upphöjd <SUB> - Nedsänkt <BIG> - Stor text <SMALL> - Liten text <STRIKE> - Överstruken Å, Ä och Ö:  Å, Ä och Ö För att de skall bli rätt i alla länder enligt ISO 8859-1 &aring; - å &auml; - ä &ouml; - ö &Aring; - Å &Auml; - Ä &Ouml; - Ö Särskilda tecken:  Särskilda tecken &lt; - Mindre än < &gt; - Större än > &amp; - Och-tecken & &quot; - Citationstecken &reg; - Registrerat varumärke &copy; - Copyright &nbsp; - Obrytbart mellanslag &#___; - Tecknet ISO 8859-1 kod http://www.w3.org/MarkUp/html3/latin1.html Typsnitt:  Typsnitt För att ändra typsnitt, storlek och färg i text används taggen <FONT> Attribut: SIZE="storlek" COLOR="färg" FACE="typsnitt" <FONT SIZE="1" FACE="verdana"> Kommentarer:  Kommentarer För att kunna skriva anteckningar i HTML-koden utan att det syns på webbsidan <!-- Start kommentar Kommentar text Slut kommentar --> Sorterad lista:  Sorterad lista Listor är bra för att stapla upp innehåll eller dispositioner Skapas med <OL> (Ordered List) <OL> <LI>Banan <LI>Äpple <LI>Apelsin </OL> Sorterad lista:  Sorterad lista Attribut: START="värde" TYPE="A"|"a"|"I"|"i"|"1" <OL START="4" TYPE="a"> Osorterad lista:  Osorterad lista En osorterad är en meny med symboler på varje rad istället för numrerad Skapas med <UL> (Unordered List) eller <DIR> och <MENU> <UL> <LI>Ettan <LI>Tvåan <LI>Trean </UL> Osorterad lista:  Osorterad lista Attribut: TYPE="circle"|"disc"|"square" <UL TYPE="square"> Hyperlänkar:  Hyperlänkar En länktagg beskriver en klickbar referens till ett annat dokument, fil eller ankarpunkt Kan även länka till andra tjänster än WWW Det finns tre nivåer för att beskriva sökvägen till referensen: - Ankarpunkt (samma sida) - Relativ (på samma sajt) - Absolut (till extern sajt) Länktaggen:  Länktaggen Länkar beskrivs med <A> taggen Attribut: HREF="referens" TARGET="fönster" ONCLICK="skript" ONMOUSEOUT="skript" ONMOUSEOVER="skript" Referenser:  Referenser Ankarpunkt <A HREF="#namn">Klick</A> Länkar till <A NAME="namn"> Relativ <A HREF="sida2.html">Sida 2</A> Absolut <A HREF="http://www.dn.se">DN</A> Bilder:  Bilder Läggs in i dokument med <IMG> taggen Finns aldrig i dokumentet, utan separat fil "länkas" in Attribut: SRC="bildfil" HEIGHT="pixlar"|"procent" WIDTH="pixlar"|"procent" BORDER="pixlar" ALT="Text om inte bilden visas" ALIGN="left"|"center"|"right" VALIGN="top"|"middle"|"right" Bildexempel:  Bildexempel <IMG SRC="bild.gif" BORDER="2"> <IMG SRC="mapp/bild.gif"> <IMG SRC="http://www.google.com/images/hp0.gif"> Länka med bilder:  Länka med bilder <A HREF="http://www.google.com"> <IMG SRC="http://www.google.com/images/hp0.gif"> </A> Image maps:  Image maps Bilder med klickbara områden (länkar) 2 typer - Serverside (används ej längre) - Clientside hotspot bild Image map taggarna:  Image map taggarna Taggen <IMG> används som vanligt för att visa bilden (med attributet USEMAP) Skapas med <MAP> taggen Attribut: NAME="kartnamn" Områdena definieras med <AREA> Attribut: SHAPE="CIRCLE"|"RECT"|"POLYGON" COORDS="x,y,d"|"x1,y1..." HREF="url" Image map exempel:  Image map exempel <IMG SRC="bild.jpg" USEMAP="#karta"> <MAP NAME="karta"> <AREA SHAPE="CIRCLE" COORDS="50,50,25" HREF="http://www.dn.se"> <AREA SHAPE="RECT" COORDS="100,100,150,150" HREF="http://www.aftonbladet.se"> <AREA SHAPE="POLYGON" COORDS="0,0,50,20,40,60,10,30" HREF="http://www.tidningen.to"> </MAP> Tabeller:  Tabeller Används för att presentera data prydligt uppspaltat "Osynliga" tabeller används för positionering av text och bilder (layout) Skapas med taggen <TABLE> Tabellrader skapas med <TR> Tabellceller på raderna med <TD> Tabellens struktur:  Tabellens struktur Cell 1 Cell 2 Cell 3 Cell 4 Tabellens struktur:  Tabellens struktur <TABLE> </TABLE> <TD> </TD> <TR> </TR> </TR> <TD> </TD> <TD> </TD> <TD> </TD> Cell 1 Cell 2 Cell 3 Cell 4 <TR> Kodens struktur:  Kodens struktur <TABLE> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE> TABLE-taggen:  TABLE-taggen Omringar hela tabellen Attribut: BORDER="n" (ramens storlek) CELLPADDING="n" (marginal i celler) CELLSPACING="n" (mellan celler) WIDTH="px"|"%" (tabellens bredd) HEIGHT="px"|"%" (tabellens höjd) BGCOLOR="färg" (bakgrundsfärg) TD-taggen:  TD-taggen Beskriver egenskaperna för varje tabell-cell Attribut: ALIGN="left"|"center"|"right" VALIGN="top"|"middle"|"bottom" WIDTH="px"|"%" (cellens bredd) HEIGHT="px"|"%" (cellens höjd) BGCOLOR="färg" (bakgrundsfärg) ROWSPAN="rader" (över flera rader) COLSPAN="kolumner" (över kolumner) Slå ihop celler horizontellt:  Slå ihop celler horizontellt Cell 1 Cell 3 Cell 4 COLSPAN:  COLSPAN <TABLE> <TR> <TD COLSPAN="2">Cell 1</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE> Slå ihop celler vertikalt:  Slå ihop celler vertikalt Cell 2 Cell 1 Cell 4 ROWSPAN:  ROWSPAN <TABLE> <TR> <TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 4</TD> </TR> </TABLE> Övningar – Tabeller:  Övningar – Tabeller Se boken Frames:  Frames Ramar används för att dela upp webbläsarefönstret i mindre delar, med ett HTML-dokument i varje ram Stöds av Netscape 2+ och Iexplorer 3+ Skapas med <FRAMESET> taggen Innehållet i varje ram beskrivs med <FRAME> taggen Ett enkelt frameset:  Ett enkelt frameset meny.html valk.html frameset.html meny main Koden för enkelt frameset:  Koden för enkelt frameset Skapa 4 filer: frameset.html meny.html valk.html huvud.html <HTML> <FRAMESET COLS="200,*"> <FRAME NAME="meny" SRC="meny.html"> <FRAME NAME="main" SRC="valk.html"> </FRAMESET> </HTML> Ett dubbelt frameset:  Ett dubbelt frameset meny.html valk.html frameset.html meny main huvud Koden för dubbelt frameset:  Koden för dubbelt frameset Ändra koden i framset.html till: <FRAMESET ROWS="130,*"> <FRAME NAME="huvud" SRC="huvud.html"> <FRAMESET COLS="200,*"> <FRAME NAME="meny" SRC="meny.html"> <FRAME NAME="main" SRC="valk.html"> </FRAMESET> </FRAMESET> FRAMESET-taggen:  FRAMESET-taggen Attribut: COLS="kol1,kol2..." ROWS="rad1,rad2..." BORDER="pixlar" BORDERCOLOR="ramfärg" FRAMEBORDER="YES"|"NO" FRAME-taggen:  FRAME-taggen Attribut: BORDERCOLOR="färg" FRAMEBORDER="YES"|"NO" MARGINHEIGHT="pixlar" MARGINWIDTH="pixlar" NAME="ramnamn" NORESIZE SCROLLING="YES"|"NO"|"AUTO" SRC="filnamn" Övningar – Frames:  Övningar – Frames Se läroboken Formulär:  Formulär Används för att användare skall kunna skicka data till en www-server Formulärdata kan skickas på två sätt GET – läggs till efter URL'en POST – läggs till en ny header i huvudet Används även för client-side script (DHTML) Skapas med <FORM> taggen Hur skickas data?:  Hur skickas data? WWW server Klient HTTP förfrågning http://www.server.com?namn=Sven%20Svensson&... Skickar formuläret Data processas av program Formulärelement:  Formulärelement Textrutor Lösenordsrutor Radioknappar Kryssrutor Rullgardiner Flervalsrutor Textfält Bekräfta-knapp Ångra-knapp FORM-taggen:  FORM-taggen Skapar formuläret och beskriver hur och vart datat skall skickas Attribut: METHOD="GET"|"POST" ACTION="serverprogram" <FORM METHOD="GET" ACTION="cgi-bin/form.cgi"> Textrutor:  Textrutor Vanligast för textinmatning Attribut: NAME="namn" SIZE="tecken" MAXLENGTH="tecken" VALUE="text" Ditt namn: <INPUT TYPE="text" NAME="namn"> Knappar:  Knappar För att skicka formulär, rensa formulär eller exekvera clientside scirpts <INPUT TYPE="submit"> <INPUT TYPE="reset"> <INPUT TYPE="button" VALUE="Kör skript" ONCLICK="skript"> Lösenord:  Lösenord Likadan som textrutor med "dold" text Attribut: NAME="namn" SIZE="tecken" MAXLENGTH="tecken" VALUE="text" Lösenord: <INPUT TYPE="password" NAME="namn"> Radioknappar:  Radioknappar Knappgrupper med ETT möjligt val Attribut: NAME="namn" VALUE="värde" CHECKED <INPUT TYPE="radio" NAME="smak" VALUE="banan">Banan <INPUT TYPE="radio" NAME="smak" VALUE="jordgubb">Jordgubb <INPUT TYPE="radio" NAME="smak" VALUE="vanilj">Vanilj Kryssrutor:  Kryssrutor Knappgrupper med FLERA möjliga val Attribut: NAME="namn" VALUE="värde" CHECKED <INPUT TYPE="checkbox" NAME="tech">Tekniknytt <INPUT TYPE="checkbox" NAME="fun">Skämt <INPUT TYPE="checkbox" NAME="stock">Aktiekurser Knappar med bilder:  Knappar med bilder BUTTON är ett alternativ till SUBMIT och RESET Finns bara i HTML version 4 <BUTTON TYPE="submit"> <IMG SRC="bild.gif"> </BUTTON> Rullgardiner:  Rullgardiner Dropdown-menyer med ETT möjligt val Attribut: NAME="namn" VALUE="värde" SELECTED <SELECT NAME="rullgardin"> <OPTION SELECTED>Välj färg <OPTION VALUE="1">Röd <OPTION VALUE="2">Grön <OPTION VALUE="3">Blå </SELECT> Multichoice:  Multichoice Menyruta med FLERA möjliga val Attribut: NAME="namn" VALUE="värde" SELECTED <SELECT NAME="rullgardin" MULTIPLE> <OPTION SELECTED>Välj färg <OPTION VALUE="1">Röd <OPTION VALUE="2">Grön <OPTION VALUE="3">Blå </SELECT>

Add a comment

Related presentations

Related pages

HSO: Leading provider of Microsoft Dynamics AX, CRM and ...

HSO is a leading provider of innovative enterprise business solutions that improve the results of our clients. Founded in 1989, HSO specializes in ...
Read more

Cookie-Richtlinien | HSO

Diese Website verwendet Cookies. Wenn Sie unsere Website nutzen und diese Richtlinien akzeptieren, erteilen Sie HSO die Zustimmung zur Verwendung der ...
Read more

Home - HSO - Galvanotechnik

HSO stellt innovative Spezialchemie für die Galvanotechnik her und zählt zu bedeutendsten Unternehmen im Bereich Kunststoffgalvanisierung / Automotive.
Read more

HSO - Definition by AcronymAttic

What does HSO stand for? Our 'Attic' has 95 unverified meanings for HSO. Acronym Finder has 23 verified definitions for HSO
Read more

ZDFtivi - H2O - Plötzlich Meerjungfrau - Startseite

Drei Teenager werden bei Berührung mit Wasser zu Meerjungfrauen
Read more

Handelsschule | HSO Wirtschaftsschule Schweiz

HSO Wirtschaftsschule Schweiz. Vadianstrasse 45. CH-9000 St. Gallen +41 71 272 11 33 +41 71 272 11 32. st.gallen@hso.ch. HSO Wirtschaftsschule Schweiz.
Read more

Web-Bahnhofstafel

Diese Seite benötigt Javascript zur Darstellung.
Read more

Onlinesucht

Herzlich willkommen im HSO e.V. Hilfe zur Selbsthilfe bei Onlinesucht! ***** Ab sofort ist unsere neue „HSO-Mediensucht-Hotline“ geschaltet! Wir freuen ...
Read more

HSO Wirtschaftsschule Schweiz | Witercho mit HSO

Die HSO verbindet Menschen, vermittelt Kompetenzen, entwickelt Wissen und schafft Perspektiven
Read more

Authentication - HSO

Authentication You are requesting a restricted connection limited to authenticated users only. Enter your credentials:
Read more