Internet A HTML Grunder 2019-01-11.

Slides:



Advertisements
Liknande presentationer
Ordbehandling Juni 2013.
Advertisements

ClaroReadPro V5 B engt Österlind Solna Skoldatatek 18 november 2009.
HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.
HTML – vad är det och varför ska vi använda det Och vad är XHTML.
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
Flexicon – Din systempartner
Mahmud Al Hakim Webmaster DAG 3 Mahmud Al Hakim
Skriva för webben.
Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.
Att bygga en fungerande webbplats
Enkel dator teknik Tips och tricks.
XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.
Programmering?. Förslag till innehåll programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
©storm.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
HTML – vad är det och varför ska vi använda det
Webbutveckling grundkurs DA7710
Webbteknik lektion 3 Det handlar mer om stilmallar Per K, 2012.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
XHTML och CSS En föreläsning om webbteknik , SK, PK TFE Umeå Universitet.
Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
Föreläsning 8 Appletprogram/fristående grafiska program Rita linjer, rektanglar mm Skriva text Byta färg Appletprogram html.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
WEBMASTER DAG 4 Mahmud Al Hakim
Lägga in ett PM – så här gör man…
CSS3 Några exempel på nyheter i CSS3. Basdokument – som används i flertalet exempel Pingvinsång Fyra små pingviner, klädda i svart och.
DHTML Designa din egen webbsida.
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
Första sidan Underrubrik Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Kontakta.
CSS del 3 Kvarnbrinkx Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,
Knappar i artikelredaktionen som formaterar texten:
Webbutveckling Med fokus på grunder i html och css.
XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
XHTML & CSS Introduktion Erik Nahkala
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
Webbsidesutbildning Lennart Ek, Tel Stefan Fosseus,
XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering.
XHTML 1 Elektronisk publicering. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Klasser och.
CopyRight Lars Valentin1 Strukturformat CSS Lars Valentin.
UTVECKLING MED RAMVERKET.NET Marcus Medina. Dagens visdomsord ”Google is your friend”
Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim
Föreläsning 13 Appletprogram/fristående grafiska program Arv Rita linjer, rektanglar mm Skriva text, byta färg Appletprogram & HTML Grafiska användargränssnitt.
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
CSS del 2 Kvarnbrink Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS.
ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i tabellform Använd INTE tabeller för att strukturera hela sidor.
Textkodning 1 Dokumentrepresentation. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Standarder.
1 Programhantering – Pass 9 Presentation Fortsättningskurs MS PowerPoint 2003 Del 1/2 Formatera Grafik och diagram.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Knappar i Excel Hoppa till Start Hoppa till Infoga Hoppa till Sidlayout Hoppa till Referenser Hoppa till Utskick Hoppa till Granska Hoppa till Visa Skriv.
R EDOVISNINGS AFFISCH V ETENSKAPLIG POSTER. A FFISCHEN Affischen är en sammanfattning av en kurs eller projekt för att väcka intresse och ge en snabb.
Framsida på omslag och ett uppslag
VISNINGSVERKTYGET POWERPOINT i office 365
Wordgenomgång.
Om du jobbar i huset (ekero1)
Instruerande text.
CSS del 2 Samuel Kvarnbrink
Rubrik, Futura BT Heavy eller Arial alltid vänsterställd, två rader max. 72 pt Författare Slutsats Slutsatsen är den viktigaste delen av din poster,
CSS del 2 Samuel Kvarnbrink
Introduktion till CSS CSS1 - EXEMPEL.
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
CSS del 1 Samuel Kvarnbrink
Presentationens avskrift:

Internet A HTML Grunder 2019-01-11

HTML Grund HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en <Instruktion> </Instruktion> 2019-01-11

HTML Grund <html> <head> <title>Untitled</title> </head> <body> Min nya hemsida </body> </html> 2019-01-11

HTML Grund Kommentarer kan skrivas: <!-- Kommentarer --> <!-- Max har gjort detta!! --> <html> <head> <title>Maximilien Chiang</title> </head> <Body> Min nya hemsida </body> </html> 2019-01-11

HTML Grund Attribut Värde Background Address till bild Bgcolor Bakgrundsfärg Text Textfärg Link Färg på länkar i passivt tillstånd Alink Färg på länker i aktivt tillstånd Vlink Färg på redan besökta länkar 2019-01-11

HTML Grund <!-- Max har gjort detta!! --> <html> <head> <title>Maximilien Chiang</title> </head> <Body bgcolor = "#F00000" Text ="#FFF000" link ="#FFFF00" alink ="#FFFF00" vlink ="#FFFFF0"> Min nya hemsida </body> </html> 2019-01-11

HTML Grund <!-- Max har gjort detta!! --> <html> <head> <title>Maximilien Chiang</title> </head> <Body bgcolor = "#F00000" Text ="#FFF000" link ="#FFFF00" > Min nya hemsida hej igen </body> </html> Detta leder inte till någon radbrytning. 2019-01-11

HTML Grund <!-- Max har gjort detta!! --> <html> <head> <title>Maximilien Chiang</title> </head> <Body bgcolor = "#F00000" Text ="#FFF000" link ="#FFFF00" > Min nya hemsida <br> hej igen </body> </html> Detta leder till en radbrytning. 2019-01-11

HTML Grund Rubriker <h1> rubrik </h1> Attributer: left, right, center. --------------------------------------------------------- <!-- Max har gjort detta!! --> <html> <head> <title>Maximilien Chiang</title> </head> <Body bgcolor = "#F00000" Text ="#FFF000" > <h1>Min nya hemsida </h1> </body> </html> 2019-01-11

HTML Grund Stycke indelning Horisontell linje <body> <p> text </p> <p align =”center”> </body> Attributer: left, center, right Horisontell linje text över linjen <hr> text under linjen 2019-01-11

HTML Grund Obruten text Eller <body> Vi kan knyta ihop förkortningar, som t ex och bl  a. </body> Eller <nobr> Denna rad kan endast brytas <wbr> på ett ställe . </nobr> 2019-01-11

HTML Grund Stilar Instruktion Hur Stil I <i> text </i> Kursiv B <b> text </b> Fet U <u> text </u> Understruken S <s> text </s> Genomstruken Tt <tt> text </tt> Kod Sub <sub> text </sub> Index Sup <sup> text </sup> Exponent Blink <blink> text <blink> Blinkande Cite <cite> text </cite> Citat Strong <strong> text </strong> Framhävd text Code <code> text </code> Programkod 2019-01-11

HTML Grund Fonter <body> <font face = ”Arial”> Text med Arial utseende </font> </body> 2019-01-11

HTML Grund Färg och Storlek <body> <font face = ”Arial” color = ”red” size = ”6”> Arial, röd och storlek 6 </font> </body> Attributer: color red, blue, green size 1, 2 …. 7 2019-01-11

HTML Grund Textens storlek relativt den senast angivna storleken. (normal = 3) <body> <font face = ”Arial” color = ”red” size = ”+3”> Arial, röd och storlek 6 </font> </body> 2019-01-11

HTML Grund Förformaterad text Förformaterad text sätter HTML:s regler om white-space ur spel. Med hjälp av instruktioner pre tolkas texten exakt som den står. <body> <pre> Detta text kommer att se så här ut. </pre> </body> 2019-01-11

HTML Grund Listor Onumrerad lista <body> <ul> <li>första rad <li>andra rad <li>tredje rad </ul> </body> 2019-01-11

HTML Grund Vi kan även ändra punktens utseende med attributet typ. Attribut: Värde: type square, disc, circle <body> <ul type = ”circle”> <li>första rad <li type=”disc”>andra rad <li>tredje rad </ul> </body> 2019-01-11

HTML Grund Numrerad lista <body> <ol> <li>första rad <li>andra rad <li>tredje rad </ol> </body> Attribut Värde Start 1, 2, 3, ….. Value 1, 2, 3, ….. Type 1, I, i, A, a 2019-01-11

HTML Grund Numrerad lista (forts..) <body> <ol start =”4” type =”1”> <li>första rad <li value=”12”>andra rad <li>tredje rad </ol> </body> 2019-01-11

HTML Grund Definitionslista <body> <dl> <dt>Definitioner <dt>Bilar <dd>opel <dt>Båtar <dd>segelbåt </dl> </body> 2019-01-11

HTML Grund Tabeller En tabell består av rader som i sin tur består av celler. Tabellen kan även innehålla en eller flera rubrikceller. En cell kan sträcka sig över flera rader och kolumner. <body> <Table border> <caption>Rubrik</caption> <tr><th>Namn <th>tel. <tr><td>Max <td>14 87 86 <tr><td>Max <td>070 576 33 26 </table> </body> 2019-01-11

HTML Grund Tabeller (forts...) Atribut Värde width antal pixlar (ex 40) height antal pixlar (ex 20) rowspan 2 … colspan 2 … Align left, right, center Valign top, middle, bottom Border 1 … Bgcolor white, red, black 2019-01-11

HTML Grund Tabeller (forts...) <body> <Table border = ”1”> <caption>Rubrik</caption> <tr> <th colspan=”2” align=”center”>Hej </tr> <tr> <td rowspan=”2”>Max </tr> <td>Max igen </tr> <tr> <td>Max =)) </td> </table> </body> 2019-01-11

HTML Grund Länkar och bildar En länk, eller hypertextlänk är en förbindelse från en punkt i ett dokument till början av ett annat dokument, till en punkt i samma dokument eller till en punkt i ett annat dokument. Länkar till andra dokument <body> <a href=”sida2.htm”>Dokument 2</a> <a href=http://www.mh.se>Mitthögskolan</a> </body> 2019-01-11

HTML Grund Länkar inom samma dokument Istället för att ange en adress som värde till href anger vi ett grindtecken (#) följt av ett namn. Detta namn ska finnas någon annanstans i dokumentet i a-instruktionen me attributet name. <body> <a href=”#hoppa”>Hoppa</a> ... <a name=”hoppa”> Nu är jag här! </body> 2019-01-11

HTML Grund Länkar till en punkt i ett annat dokument <body> <a href=”sida2.htm#hoppa”>Hoppa</a> </body> <a name=”hoppa”> Nu är jag här! 2019-01-11

HTML Grund Bilder En bild definieras med instruktionen img, bildens adress anges med attributet scr. <body> <img src=”bild.gif”> </body> Adressen kan vara fullständigt eller relativ Attribut Värde alt En text skrivs ut om webbläsaren inte kan läsa bilder align left, right, top, middle, bottom 2019-01-11

HTML Grund Bild som länk <body> <a href=http://www.mh.se><img src=”bild.gif”></a> </body> Del av bild som länk <map name=”karta”> <area shape=”rect” coords=”1,1,100,100” href=”sida2.htm”> </map> <img src=”bild.jpg” width=”100” heigth=”100”ismap usemap=”karta”> 2019-01-11

HTML Grund Adressformat (länkar) format exempel http http://www.mh.se file file://c:\windows\doc1.doc mailto mailto:max.chiang@ite.mh.se News news://news.se ftp ftp://ftp.sunet.se 2019-01-11

HTML Grund Ramar <html> <head> <title>Hemsida</title> </head> <frameset> Sida med ramar <noframe> <body> Sida utan ramar </body> </noframe> </frameset> </html> 2019-01-11

HTML Grund Grundstruktur ramar <frameset rows=”50%,50%”> <frame src=”sida1.htm”> <frame src=”sida2.htm”> </frameset> 2019-01-11

HTML Grund Ramar (forts...) <frameset cols=”50%,50%”> <frameset rows=”25%,75%”> <frame src=”sida1.htm”> <frame src=”sida2.htm”> </frameset> <frameset rows=”75%,25%”> <frame src=”sida3.htm”> <frame src=”sida4.htm”> 2019-01-11

HTML Grund Klicka i en ram och ladda i en annan Genom att använda attributet target länk-instruktionen kan man styra i vilken ram sidan ska laddas. I ram instruktionen måste de olika ramarna namnges. <frameset row=”200,*> <frame src=”sida5.htm” name=”meny”> <frame src=”sida6.htm” name =”innehall”> </frameset> 2019-01-11

HTML Grund Klicka i en ram och ladda i en annan (forts….) Exempel på sida5.htm <html> <head> <title>Sida 5 </title> </head> <body bgcolor=”#00FF00”> <h1align=”center”><a href=”sida1.htm” target=”innehall”> Ladda i den andra ramen</a></h1> </body> </html> 2019-01-11

HTML Grund Attribut till frame-instruktionen Attribut Värde Scrolling no, yes, auto Marginwidth 0, 1…. Marginheight 0, 1 …. Noresize Frameborder 0, 1, …. 2019-01-11

HTML Grund Ljud Med hjälp av fölande instruktion kan man lägga in bakgrundsmusik <bgsound src=”ljud.mid” loop=”infinite”> Ljud filen kan vara i formaten: MIDI AU WAV 2019-01-11

HTML Grund Den professionella hemsida Formulera dina mål. Kommersiella och professionella webbprojekt fyller i allmänhet tre funktioner: Skyltfönster Butik Kundkontakt 2019-01-11

HTML Grund Den professionella hemsida (forts..) Web- projektets struktur Skissa med papper och penna hur de olika sidorna ska se ut. Hålla samma projektet tillen enhet , strukturera logiskt och lättbegripligt. Läsaren ska på ett tidigt stadium få en god uppfattning vad webbprojektet omfattar. Flata och djupa strukturer Enhetlig layout Länkar inom projektet 2019-01-11

HTML Grund Den professionella hemsida (forts..) Tid På en genomsnittlig hemsida är 20% av alla träffar kortare än 10 sekunder och bara 5% av alla träffar är längre än 1 minut. Optimera grafiken. Testa Netscape och Microsoft Explorer? Vilken är målgruppen? (förväntad hårdvaruprestanda) Nedladdningstid ? Gör dig synlig på nätet! 60% av alla som första gången besöker ett företags hemsida kommer direkt från en sökmotor. 2019-01-11