17 preprostih primerov kode HTML, ki se jih lahko naučite v 10 minutah

17 preprostih primerov kode HTML, ki se jih lahko naučite v 10 minutah

Čeprav so sodobna spletna mesta na splošno zgrajena z uporabnikom prijaznimi vmesniki, je koristno poznati nekaj osnovnih HTML. Če poznate naslednjih 17 vzorčnih oznak HTML (in nekaj dodatkov), boste lahko ustvarili osnovno spletno stran iz nič ali prilagodili kodo, ki jo je ustvarila aplikacija, kot je WordPress.





Za večino oznak smo zagotovili primere kode HTML. Če jih želite videti v akciji, prenesite vzorčno datoteko HTML na koncu članka. Z njim se lahko igrate v urejevalniku besedil in ga naložite v brskalnik, da vidite, kaj naredijo vaše spremembe.



1.

To oznako boste potrebovali na začetku vsakega dokumenta HTML, ki ga ustvarite. Zagotavlja, da brskalnik ve, da bere HTML, in da pričakuje najnovejšo različico HTML5.





Čeprav to dejansko ni oznaka HTML, je vseeno dobro vedeti.

2.

To je še ena oznaka, ki brskalniku pove, da bere HTML. Oznaka gre takoj za oznako DOCTYPE in jo zaprete z oznako tik na koncu datoteke. Vse ostalo v vašem dokumentu je med temi oznakami.



3.

Oznaka zažene razdelek glave vaše datoteke. Stvari, ki vstopajo tukaj, niso prikazane na vaši spletni strani. Namesto tega vsebuje metapodatke za iskalnike in podatke o vašem brskalniku.

Za osnovne strani bo oznaka vsebovala vaš naslov in to je to. Lahko pa vključite še nekaj drugih stvari, ki jih bomo obravnavali v kratkem.



Štiri.

Ta oznaka nastavi naslov vaše strani. Vse, kar morate storiti, je, da svoj naslov vnesete v oznako in jo zaprete, takole (vključil sem tudi oznake glave, da prikažete kontekst):


My Website

To je ime, ki bo prikazano kot naslov zavihka, ko se odpre v brskalniku.



5.

Tako kot naslovna oznaka so metapodatki vneseni v področje glave vaše strani. Metapodatke uporabljajo predvsem iskalniki in so informacije o tem, kaj je na vaši strani. Obstaja več različnih meta polj, vendar so to nekatera najpogosteje uporabljena:

  • opis : Osnovni opis vaše strani.
  • ključne besede : Izbor ključnih besed, ki veljajo za vašo stran.
  • avtor : Avtor vaše strani.
  • pogled : Oznaka, ki zagotavlja, da je vaša stran videti dobro v vseh napravah.

Tu je primer, ki bi lahko veljal za to stran:




Oznaka 'viewport' mora imeti kot vsebina 'width = device-width, initial-scale = 1.0', da se vaša stran dobro prikaže v mobilnih in namiznih napravah.

6.

Ko zaprete razdelek z glavo, pridete do telesa. To odprete z oznako in jo zaprete z oznako. To gre tik na koncu vaše datoteke, tik pred oznako.

Vsa vsebina vaše spletne strani je med temi oznakami. Tako preprosto je, kot se sliši:


Everything you want displayed on your page.

7.

Nekoliko manj velik header


Podnaslov

Rezultat:

Kot lahko vidite, so na vsaki ravni manjši.

8.

Oznaka odstavka začne nov odstavek. To običajno vstavi dva preloma vrstic.

Poglejte na primer prelom med prejšnjo vrstico in to. To je tisto, kar a

oznaka bo naredila.

Your first paragraph.


Your second paragraph.

Rezultat:

Tvoj prvi odstavek.

Vaš drugi odstavek.

Lahko tudi uporabite sloge CSS v oznakah odstavkov, kot je ta, ki spreminja velikost besedila:

This is 50% larger text.

Rezultat:

9.

Oznaka preloma vrstice vstavi en sam prelom vrstice:

The first line.

The second line (close to the first one).

Rezultat:

Delo na podoben način je

oznaka. To nariše vodoravno črto na vaši strani in je dobro za ločevanje delov besedila.

10.

Ta oznaka opredeljuje pomembno besedilo. Na splošno to pomeni, da bo krepko. Vendar pa je za izdelavo mogoče uporabiti CSS besedilo se prikaže drugače.

kako uporabljati portret na iphone 7

Lahko pa ga varno uporabljate do krepkega besedila.

Very important things you want to say.

Rezultat:

Zelo pomembne stvari, ki jih želite povedati.

Če poznate oznako za krepko besedilo, jo lahko še vedno uporabljate. Ni zagotovila, da bo še naprej deloval v prihodnjih različicah HTML -ja, vendar zaenkrat deluje.

enajst.

Všeč mi je in , in so povezani. The označuje označeno besedilo, kar na splošno pomeni, da bo poševno. Spet obstaja možnost, da bo CSS drugače poudaril prikaz besedila.

An emphasized line.

Rezultat:

Poudarjena črta.

The tag še vedno deluje, vendar je spet mogoče, da bo v prihodnjih različicah HTML zastarel.

12.

The ali sidrna oznaka omogoča ustvarjanje povezav. Preprosta povezava izgleda tako:

Pojdite na MUO

Atribut 'href' označuje cilj povezave. V mnogih primerih bo to drugo spletno mesto. Lahko je tudi datoteka, na primer slika ali PDF.

Drugi uporabni atributi vključujejo 'cilj' in 'naslov'. Atribut target se skoraj izključno uporablja za odpiranje povezave v novem zavihku ali oknu, na primer:

Go to MUO in a new tab

Rezultat:

Pojdite na MUO v novem zavihku

Atribut 'title' ustvari opis orodja. Premaknite miškin kazalec na spodnjo povezavo, da vidite, kako deluje:

Hover over this to see the tool tip

Rezultat:

Premaknite miškin kazalec nad to ikono in si oglejte nasvet orodja

13.

Če želite sliko vstaviti na svojo stran, morate uporabiti slikovno oznako. Običajno ga boste uporabljali skupaj z atributom 'src'. To določa vir slike, na primer:

Rezultat:

kako spremljati uporabo interneta v domačem omrežju

Na voljo so tudi drugi atributi, na primer 'višina', 'širina' in 'alt'. Evo, kako bi to lahko izgledalo:

the name of your image

Kot bi lahko pričakovali, atributa 'height' in 'width' nastavita višino in širino slike. Na splošno je dobro, da nastavite samo enega od njih, da bo slika pravilno nastavljena. Če uporabljate oboje, lahko dobite raztegnjeno ali zmečkano sliko.

Oznaka 'alt' brskalniku pove, katero besedilo naj prikaže, če slike ni mogoče prikazati, zato jo je dobro vključiti v katero koli sliko. Če ima nekdo posebno počasno povezavo ali stari brskalnik, lahko še vedno dobi predstavo o tem, kaj bi moralo biti na vaši strani.

14.

    Oznaka urejenega seznama vam omogoča, da ustvarite urejen seznam. Na splošno to pomeni, da boste dobili oštevilčen seznam. Vsak element na seznamu potrebuje oznako elementa seznama (

  1. ), zato bo vaš seznam videti tako:


    1. First thing

    2. Second thing

    3. Third thing

    Rezultat:

    1. Prva stvar
    2. Druga stvar
    3. Tretja stvar

    V HTML5 lahko uporabite

      obrniti vrstni red številk. Začetno vrednost lahko nastavite z atributom start.

      Atribut 'type' vam omogoča, da brskalniku poveste, katero vrsto simbola naj uporabi za elemente seznama. Nastavite ga lahko na '1', 'A', 'a', 'I' ali 'i', tako da seznam prikažete z označenim simbolom, kot je ta:

        petnajst.

          Neurejen seznam je veliko enostavnejši od njegovega naročenega. To je preprosto označen seznam.


          • First item

          • Second item

          • Third item

          Rezultat:

          • Prva postavka
          • Druga postavka
          • Tretja postavka

          Neurejeni seznami imajo tudi atribute 'type' in ga lahko nastavite na 'disc', 'circle' ali 'square'.

          16.

          Medtem ko je uporaba tabel za oblikovanje omalovažena, je velikokrat, da boste želeli uporabiti vrstice in stolpce za segmentiranje informacij na svoji strani. Za delo tabele je potrebno več oznak. Tu je vzorčna koda HTML:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          The

          in
          oznake določajo začetek in konec tabele. Thetag vsebuje vso vsebino tabele.

          Vsaka vrstica tabele je zaprta v aoznaka. Vsaka celica v vsaki vrstici je ovita v eno ali drugooznake za glave stolpcev, ozoznake za podatke stolpcev. Za vsak stolpec v vsaki vrstici potrebujete enega od teh.

          Rezultat:

          1. stolpec2. stolpec
          Vrstica 1, stolpec 1Vrstica 1, stolpec 2
          Vrstica 2, stolpec 1Vrstica 2, stolpec 2

          17.

          Ko citirate drugo spletno mesto ali osebo in želite ponudbo ločiti od preostalega dokumenta, uporabite oznako blockquote. Vse, kar morate storiti, je, da ponudbo vstavite v odpiranje in zapiranje oznak blockquote:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Rezultat:

          Spleta, kot sem si ga zamislil, ga še nismo videli. Prihodnost je še vedno veliko večja od preteklosti.

          Natančno oblikovanje, ki se uporablja, je lahko odvisno od brskalnika, ki ga uporabljate, ali CSS -ja vašega spletnega mesta. Toda oznaka ostaja enaka.

          Vzorci kode HTML

          S temi 17 primeri HTML bi lahko ustvarili preprosto spletno mesto. Zdaj jih lahko vse preizkusite v spletnem urejevalniku besedil, da dobite občutek o njihovem delovanju.

          Za več prigrizkov v HTML-ju poskusite nekaj programov za mikro učenje za kodiranje. Pomagali vam bodo v najkrajšem možnem času.

          Deliti Deliti Cvrkutati E-naslov Se želite naučiti osnovnega kodiranja? V prostem času preizkusite 5 aplikacij za kodiranje velikosti ugriza

          Se želite naučiti osnovnega kodiranja, vendar imate malo časa? Te aplikacije za kodiranje velikosti ugriza vam bodo vzele le nekaj minut vašega napornega dne.

          Preberite Naprej           Sorodne teme
          • Programiranje
          • Wordpress
          • HTML
          • Spletni razvoj
          • Kodiranje vadnic
          O avtorju Andy Betts(221 objavljenih člankov)

          Andy je nekdanji tiskani novinar in urednik revij, ki o tehnologiji piše že 15 let. V tem času je prispeval k neštetim publikacijam in pripravil tekstopisje za velika tehnološka podjetja. Zagotovil je tudi strokovne komentarje za medije in gostil panele na industrijskih dogodkih.

          Več od Andyja Bettsa

          Naročite se na naše novice

          Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

          Kliknite tukaj, da se naročite