HTML-kielen perusteet Osa 5 Vilho Kemppainen 21.09.2005.

Slides:



Advertisements
Samankaltaiset esitykset
Pääotsikko – Rivi alaotsikkoa varten. ©2012 VJS. Otsikkorivi Vantaan Jalkapalloseura eli VJS on Länsi- ja Keski-Vantaalla toimiva jal- kapalloon erikoistunut.
Advertisements

Internet Kehittynyt ARPAnet:istä 1960-luvun lopulla
TILDA-Verkkotilastointi
© Hannu Laine 1 Tietorakenteet ja algoritmit Funktio-osoittimet Funktio-osoittimen ja taulukko-osoittimen vertailu Funktio-osoittimen käyttötapoja.
JavaScript oliot © Reiska, DOM Oliot  JavaScript sisältää paljon valmiita DOM olioita, on sisältänyt jo DOM level 0 (ns. Legacy DOM) alkaen  WWW-ympäristössä.
JavaScript (c) Irja & Reino Aarinen, 2007
HTML-kielen perusteet Osa 1 Vilho Kemppainen
Standardimääritykset
Julkaisukielet ja - tekniikat tMyn1 Julkaisukielet ja -tekniikat •Verkko-ohjelmointi voidaan jakaa kahteen osaan: asiakaspuolen ja palvelinpuolen ohjelmointiin.
Tieteellinen kirjoittaminen Taulukot, kuviot, esimerkit
1 Taulukot. 2 Miten taulukoita tehdään n WYSIWYG-editorien työkalut n HTML [border]… n Excel etc. Save as html.
Lisämuotoiluja: Tässä esityksessä tutustutaan Wordin lisämuotoiluihin, kuten sarkaimiin, sivunumerointiin, ylä- ja alatunnisteisiin sekä palstoituksen.
Rakenteinen ohjelmointi
14 websuunnitteluvinkkiä!
Power Point – esitysgrafiikkaohjelma lyhyesti
Tehtävä 3: PowerPoint Hans Laihia Hans Laihia.
Näytölle tulostaminen. 7.2 Sisällys System.out.println - ja System.out.print -operaatiot. Tulostus erikoismerkeillä. Edistyneempää tulosteiden.
Auli Jaakkola 1 Palkkatiedustelun tietomallin mukaisen tilastovastauksen luonti Tässä esimerkissä tiedosto tuotetaan excelistä csv-muotoon. 1.Oletetaan,
Oppimisvaikeudet.
Tekstiasiakirjan kirjoittaminen
Tekstin muotoilu Wordilla:
HAKUKONEOPTIMOINTI Jaakko Rautiainen. Aihealue Hakukoneiden toiminta Web-sivun optimointi.
Tehtävä 3: PowerPoint Harjoitus.
Tehtävä 3: PowerPoint Mika Tuukkanen Mika T.
1 WWW-lomakkeet Sähköisen liiketoiminnan tärkeä elementti.
PowerPoint-ohje © Teemu Sillantaus Teemu Sillantaus
Kuvan tuominen sivulle Työvaiheet käytettäessä Kuvanhallinta-toimintoa: 1. Ladataan kuvatiedosto oman tietokoneen hakemistosta sivustolle 2. Liitetään.
13. Hyvä ohjelmointitapa (osa 1)
CSS perusteet Metropolia. Juhana Lindström Web-kehittäjä – 4 vuotta verkkosivujen toteuttamista ja ylläpitoa – Toteuttanut tai kehittänyt yli 20 eri verkkosivustoa.
Kuvien liittäminen html- dokumenttiin. IMG-elementti l l Parametrit Align=”top” | ”middle” | ”bottom” teksti alkaa kuvan yläreunan tasalta | keskeltä.
Esteettömyys www-sivuilla Eija Mykkänen Mediatekniikan seminaari
PowerPoint-esitys OHJE.
CSS3 Teppo Räisänen
Toimisto-ohjelmat TVT osana Sädettä. Tehdään kyselylomake joko tekstinkäsittely- tai taulukkolaskentaohjelmalla. Pilvipalveluita käytettäessä saadaan.
Lomakkeet © Reiska, Lomakkeet Varsinkin Web-sovelluksia ajetaan täyttämällä sivulla lomake ja lähettämällä tiedot palvelimella olevan Web-sovelluksen.
XHTML-perusteita Teppo Räisänen
© Jukka Juslin1 Osio2 Olio-ohjelmointi: Merkkijonot eli Stringit Jukka Juslin.
Kehykset 1. KEHYKSET: rakenne 2. Frameset 3. Esimerkki: cols 4. Cols: mittayksiköt 5. Cols: mittayksiköt 6. Cols: esimerkki 7. Rows-mittayksiköt 8. Rows-esimerkki.
Tietojen taulukointitMyn1 Tietojen taulukointi Web-selaimissa HTML-taulukoita ei voida käsitellä samalla tavoin kuin esim. Excel-tyyppisissä ohjelmissa.
Tehtävä 3: PowerPoint Ilkka Huttunen. Tämän tulee olla DIA 2. Tämä dia on nyt dia 1. ◦ Siirrä tämä dia siten, että siitä tulee dia 2. ◦ Lisää tähän esitykseen:
XML – osa 2 Teppo Räisänen
Tehtävä 3: PowerPoint Anneli Tirkkonen 4/2/2015Anneli Tirkkonen1.
…Raportit kuosiin… Näin teet sivunumeroinnin ja sisällysluettelon
XSL Teppo Räisänen
XHTML elementit © Reiska 2012 html headbody. HTML 4.01 ja XHTML rungot.
Tehtävä 3: PowerPoint Tomi Ilmonen. Ohjeistus Tämä on tehtävä 3: Power Point Etene tässä olevien ohjeiden mukaan. ◦ Älä ”hypi” eli käy kohta kohdalta.
Tehtävä 3: PowerPoint Jarmo Lautamäki. Tämän tulee olla DIA 2. Tämä dia on nyt dia 1. ◦ Siirrä tämä dia siten, että siitä tulee dia 2. ◦ Lisää tähän esitykseen:
Listat eli luettelot listaelementit ovat lohkoelementtejä:  lista ja listan alkiot alkavat uudelta riviltä  listan jälkeen tuleva elementti alkaa uudelta.
#perjantaipähkinä Ettei menisi ”äksät” sekaisin, miettikää seuraavat tutumman kautta: a)2 metriin lisätään 3 metriä, saadaan… b)Samalla idealla.
Tyylimäärittelyjen käyttö Nykyaikana html-dokumentin (webbisivun tai webbisivuston) muotoilu tehdään kätevimmin tyylimäärittelyjen avulla (CSS-määrittelyt)
JOPOX Uusi hallinta / Lomaketyökalu. Uuden lomakkeen luonti Lomakkeen rakentaminen alkaa klikkaamalla auki Lomakkeet. Oletusarvoisesti oman joukkueesi.
WORD © Eva Roos-Rautakorpi1 TAULUKOT TAULUKKOTYÖKALUT.
Lausekielinen ohjelmointi II Ensimmäinen harjoitustyö.
Excel kaikille lyhyesti ja helposti
Helsingin normaalilyseo Jani Kiviharju Syksy 2016
Web-ulkoasun kehitys Web-ulkoasun visuaalinen evoluutio 1990-luvulta nykypäivään: Kiinteälevyinen, ASCII-pohjainen Vain tekstisivuja, 100% leveys Muutamia.
Toimisto-ohjelmat TVT osana Sädettä.
Tyylitiedosto html-koodin apuna
Posterin otsikko Ohjeita Alaotsikkko
Posterin otsikko Ohjeita Alaotsikkko
Helsingin normaalilyseo Jani Kiviharju syksy 2016
OPETUSSUUNNITELMAN KIRJOITUSOHJEITA
Posterin otsikko Alaotsikkko Ohjeita
14. Hyvä ohjelmointitapa.
7. Näytölle tulostaminen
Vapaaohjelman arvostelulomakkeen täyttäminen
Yrityksen nimi Tuotteet ja palvelut
Teppo Räisänen CSS – osa 2 Teppo Räisänen
4. Luokan testaus ja käyttö olion kautta
Esityksen transkriptio:

HTML-kielen perusteet Osa 5 Vilho Kemppainen

Taulukot  Taulukot ovat erittäin hyödyllisiä WWW-sivun muotoilussa.  Taulukoita voi käyttää: 1.taulukkomuotoisen tiedon esittämiseen 2.sivun elementtien asemointiin.  Jälkimmäisellä keinolla saadaan kuvat ja tekstiosiot pysymään helposti oikeilla paikoillaan.

Taulukon ohjelmointi  Taulukko määritellään tagiparilla ….  Taulukon sisällä kukin rivi suljetaan merkkien … väliin.  Kullakin rivillä kentät (ts. sarakkeet) erotetaan … merkeillä.  Jos kentän tekstiä halutaan korostaa (otsikkorivi!) käytetään TD-merkkien sijaan tagiparia ….

Taulukon muotoilu  Taulukkoa voidaan muotoilla useilla eriparametreilla; näistä tärkeimmät ovat: 1.BORDER, joka määrittää kehyksen reunan leveyden pikseleinä, ja 2.ALIGN, jolla määritetään taulukon asema sivulla (oikea, vasen, keskusta). 3.WIDTH: taulukon leveys % sivun leveydestä  Esimerkki:

Esimerkkitaulukko Vilho Kemppainen Osmo Oppilas PuhelinNimi

Esimerkkitaulukon koodi Nimi Puhelin Vilho Kemppainen Osmo Oppilas

Taulukon käyttö asemoinnissa  Edellisessä esimerkissä kenttämerkkien … väliin oli sijoitettu pelkästään tekstiä.  Kenttään voidaan kuitenkin sijoittaa mitä tahansa HTML-elementtejä esim. kuvia.  Tästä aiheesta EI OLE esimerkkiä.  Kokeile itse!