Hvordan animere med HTML

December 14

Hypertext Markup Language er den grunnleggende web-side programmeringsspråk. En enkel nettside kan lages med mindre enn fem linjer med HTML-kode er tastet inn Notepad og lagres med utvidelsen ".html". For å holde Internett-brukere på websiden din, må du legge til multimedia, bilder og animerte bilder. Scalable Vector Graphics kan legges inn i HTML-siden for å friske det opp. SVG er mest sammenlignbar med Flash-animasjon, men mye enklere å implementere hvis du allerede er kjent med HTML.

Bruksanvisning

1 Åpne Notepaf og begynne ved å skrive XML-deklarasjonen. Dette bør se ut "<? Xml version =" 1.0 "standalone =" no "?>". Frittstående = "nei" betyr at det er ingen referanse til noen ekstern fil i denne SVG-fil du oppretter.

2 Skriv inn referansen til Document Type Definition. At kodelinje bør begynne lik "<! DOCTYPE svg PUBLIC." DTD definerer data innenfor SVG-fil og validerer det.

3 Begynn koding SVG-koden med åpning tag "<svg>." Lag et rektangel som forsvinner etter fem sekunder med "rect" element. SVG støtter skape en rekke former med søkeord for hver som rektangler, sirkler, ellipser, linjer og polygoner.

4 Angi egenskapene for "rect" element ved å angi en verdi for x og y koordinater, bredde, høyde, stil, animere AttributeType, AttributeName, varighet og repeatCount. Koden vil ligne:

<Animere AttributeType = "CSS" AttributeName = "opacity"

fra = "1" til = "0" dur = "5s" repeatCount = "ubestemt" />

</ Rect>

5 Lagre filen med filtypen ".svg" fra Notisblokk spare skjermen etter stengetid SVG braketten med "</ svg>." Filen kan nå vises i nettleseren ved å dobbeltklikke på den lagrede filen. Filen kan også bygges inn i en annen HTML-side ved hjelp av "<object>" fanen eller "<iframe>" tag.

Hint

Alle de store nettleserne støtter SVG. Nettleserversjoner før IE8 vil trenge en nedlastbar plugin for å vise SVG-bilder.