May 30

Heeft u een website die u wilt uitbreiden met knoppen of misschien van plan uw eerste eigen website gevonden?


Maak een knop met HTML


Naast de code en het ontwerp is belangrijk. Integreer knoppen in uw totale concept.



HTML Button te maken: identificeren HTML-versie

De opmaaktaal HTML wordt gebruikt in verschillende versies en uitbreiding jarenlang voor websites. Sorry, maar er is een groot aantal standaarden. Om een ​​knop met HTML te creëren, kan het daarom nodig zijn om de versie van tevoren te bepalen. Onderscheid deze over de definitie van doctypes. Vergelijk de lijst.

In de code van uw webpagina vindt u de doctype meestal in de eerste lijn te vinden:

<! DOCTYPE html> - Dit is rond HTML 5. Dit is de nieuwste versie van HTML, en moet de voorkeur voor nieuwe websites.

.. <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 ...> - Dit is om HTML 4.01 Er zijn drie sub-types: Strict, Transitional en Frameset tegenstelling Strict, Transitional vergunningen van het gebruik van verouderde elementen zoals lettertype. frameset maakt additionele pakketten voor gebruik in webpagina's.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 ...!> - .. Dit is XHTML 1.0 Nogmaals, er zijn de minderjarige versie Strict, Transitional en Frameset De mogelijkheden om elementen en attributen match, elk HTML 4.01. Echter, hier de syntax verschilt van die van HTML.

Er is een verscheidenheid aan andere doctypes. Dit zijn echter nogal exotische en zelden gebruikt. Als u een ander document type te vinden, gebruik maken van een zoekmachine om de juiste versie van HTML te bepalen.

Maak HTML knop: Input elementen of grafische knoppen

In principe heb je drie manieren om de knoppen en toetsen te voeren: De gemakkelijke manier is om een ​​grafische te nemen en hen te voorzien van een link. Ook eenvoudig, maar enigszins ingewikkelder, is de combinatie van eenvoudige verbindingen in combinatie met CSS attributen. De laatste mogelijkheid is het gebruik van het ingangselement. Echter, deze optie is alleen beschikbaar in combinatie met vormen en is daarom moeilijk te implementeren.

HTML en XHTML: definiëren grafische knoppen

Volg deze stappen om een ​​grafische knop insluiten:

  1. Open website. Open de webpagina met uw favoriete editor.
  2. Zie code. Navigeer naar de gewenste locatie in de code.
  3. Plaats Code Plaats de volgende code :. <a Href="link.html"> <img src = "button.jpg" alt = "alt tekst"> deze code
  4. Hernoemen. Veranderen "link.html" en "button.jpg" om de juiste waarden. "Link.html" verwijst naar de webpagina te openen op de knop. "Button.jpg" is de naam van het grafisch bestand. Let op: Als de bestanden in een andere map, moet u deze mappen opgeeft als goed. Hiermee kan de vermelding "alternatieve tekst" dat ook weergeven browser die niet graphics niet weer een beschrijving van de knop.

HTML en XHTML: Knoop met HTML en CSS-attribuut

De procedure lijkt op een grafische knop omvatten. Echter, dit doen, alleen HTML en CSS. Deze uw website laadt sneller en je nodig hebt om alle graphics te creëren. Echter kunnen oudere browsers problemen de weergave van de knop hebben. Zowel kleur, vorm en schaduwen u via bijbehorende CSS attributen te bepalen. Wilt u een idee van te voren al te krijgen, kunt u terugvallen op een van de vele CSS Button generatoren op het internet.

Dit heeft het voordeel dat u de code voor de grote browsers wordt gelijk gegenereerd en moet u de code alleen in je website te plaatsen:

  1. Open website. Open de webpagina met uw favoriete editor.
  2. Zie code. Navigeer naar de gewenste locatie in de code.
  3. Invoegen Code invoegen de volgende code :. <a Href="link.html" class="button"> naam van de link code
  4. Hernoemen. Veranderen "link.html" van overeenkomstige punt 4 van de vorige paragraaf. De klasse "button", kunt u vrij te noemen, maar moet de juiste CSS-code aan te passen.
  5. Plak Files. Voeg de CSS code in je CSS-bestand. U kunt hem ook noemen direct onder de vermelding "<! -" Onder de lijn "<style type =" insert text / css ">".

Het INPUT element: Stuur informatie

Zoals reeds vermeld, wordt de input element voor formulieren. Als u wilt om informatie te verzamelen, kun je gebruik maken van de input element. Echter, niet geschikt voor navigatie toetsen te creëren. Als u wilt formulieren gebruiken, u een formulier handler nodig. Daarom worden de meeste PHP scripts gebruikt, maar andere scripttalen mogelijk.

De input element heeft de vorm binnen drie functies:

<Input type = "text" ...> - Het type "tekst" van de input element wordt gebruikt om tekst in te voeren door de gebruiker.

<Input type = "radio" ...> - Het type "radio" van het element geeft radio knoppen beschikbaar.

<Input type = "submit" ...> - Dit type is nodig voor het verzenden van informatie. Het zal ze toekomen aan de handler die is gedefinieerd in het element "<form action = ...>".

Definieer HTML Button per Input element

Nadat u een formulier, moet u nog de werkelijke knop:

  1. Navigeer Navigeer naar de vorm. Om de code te vormen.
  2. Invoegen Code invoegen in de regel boven "</ form>" volgende code :. <Input class = "button" type = value = "uw tekst op de knop" "submit">
  3. Pas uiterlijk. Het uiterlijk van de knoppen kunt u via CSS definiëren. Ook hier kan worden gevonden online CSS generatoren. De bijbehorende code kan analoog aan punt 5 van zijn "HTML en XHTML: Knoop met HTML en CSS-attribuut" voeg ze toe aan uw website.

Definieer XHTML Button per Input element

De procedure is analoog XHTML procedure van het vorige gedeelte. Wel moet de ingangselement hier gesloten. Daarom is de juiste code is hier:

<Input class = "button" type = "submit" value = "uw tekst op de knop"> <input />

Een andere (oud) Alternatieve

Naast de hierin beschreven werkwijzen, grafisch Schaltlfächen, knoppen op HTML en CSS of via invoerelementen, maar er zijn andere mogelijkheden. Nog vaak, vooral bij oudere sites zijn Flash-objecten. Hoewel je liever moet een van de eerder beschreven methoden, hoewel, Flash kan het nodig zijn in de zorg van oudere sites. Dus tenzij je een keuze hebt, vermijd Flash. Als u het nog gebruiken, probeer dan de volgende informatie over, zodat u snel moet implementeren gaan uit de hand:

Button door flash: Adobe Flash is echter nog steeds op veel sites te gebruiken, maar verliest na het verschijnen van HTML 5 in belang toe. Bovendien heeft Adobe ontwikkeling stopgezet verschillende platforms. Daarom zou je kunnen gebruikers blokkeren.

Echter, als je wilt toetsen implementeren door flash, u een programma nodig, bijvoorbeeld Flash om een ​​overeenkomstige bestand te maken. Met behulp van de Export functie van de relevante software pakketten, kunt u ook het genereren van de benodigde HTML-code. Dit moet nu plaatst alleen op de gewenste locatie in uw website.

Tags: Internet, software, Computer, HTML

Gerelateerde Artikelen aan Maak een knop met HTML

Tags

© 2021 seandara.com Contact | Privacy | Voorwaarden & voorwaarden