4.1 a, href-tagger

Vel, vi glemmer fortsatt ikke at vi forbereder en Java-programmerer ut av deg, så du trenger bare å lære 5 tagger.

For det første er dette den viktigste taggen som gjør tekst til hypertekst - lenke . For å lage lenker i HTML <a>brukes en tag (fra anker, anker).

Standardlenken ser slik ut:

<a href="link-address">link text</a>

Der blå er teksten som brukeren ser, og grønn er adressen (lenken) han vil gå til hvis han klikker på teksten til lenken.

Et typisk HTML-dokument som inneholder lenker ser slik ut:


<html>
    plain text
        <a href="http://codegym.cc/about">
            Link to something interesting
          </a>
     some other text...
</html>

Nei, det ser vanligvis slik ut:



<html>
    plain text  <a href="http://codegym.cc/about">Link to something interesting</a> some other text...
</html>

Verden er ikke perfekt.

4.2 img-tag og src-attributt

For å sette inn et bilde på en HTML-side, <img>brukes en tag (fra ordet bilde). Dette er en enkelt tag, den har ikke en avsluttende tag. Generell visning av taggen:

<img src="image link">

Alt er veldig enkelt. For å vise et bilde i HTML-dokumentet ditt trenger du bare å kjenne lenken til det bildet og bruke img. Prøv det, du vil like det.

4.3 Bordelementet

Dessuten kan en HTML-side inneholde en tabell med data. Men her kan du ikke klare deg med én merkelapp, hvis du tenker deg om. Tross alt har en tabell en overskrift, rader, kolonner og celler. De kom alle opp med sine egne tagger:

  • <table>- selve bordet;
  • <tr>( table r ow ) – radtabell;
  • <th>( table h overskrift ) – tabelloverskriftscelle;
  • <td>( table data ) – tabellcelle.

Slik vil en 3 x 3 tabell se ut html(med en ekstra overskriftsrad)


<table>
    <tr> <th>Surname</th> <th>Name</th> <th>Surname</th> </tr>
    <tr> <td>Ivanov</td> <td>Ivan</td> <td>Ivanovich</td> </tr>
    <tr> <td>Petrov</td> <td>Peter</td> <td>Peterovich</td> </tr>
    <tr> <td>Sidorov</td> <td>Kolia</td> <td>Sidorenko</td> </tr>
</table>

Selv om nå tabeller er sjelden brukt. Saken er at når du ser på en side fra en telefon, kan det være nyttig å vise tabellen på en annen måte (den får rett og slett ikke plass på skjermen). Men du må fortsatt vite hvordan bordene er ordnet.

4.4 id- og navneattributter

Og ytterligere to viktige punkter er attributtene idog name. Dette er attributter, ikke tagger, men de brukes veldig ofte.

idTag- attributtet lar deg gi det et navn som er unikt i hele dokumentet . Dette er nyttig hvis det er noe JavaScript i HTML-dokumentet som endrer verdien eller parameterne til den gitte taggen. Deretter, ved hjelp av unike, idkan du nøyaktig referere til ønsket tag.

Et attributt nameutfører en lignende funksjon, men verdien trenger ikke være unik på siden. Det vil si at teoretisk sett kan det være flere tagger med samme navn. Dette gjøres for å gjøre det lettere å arbeide med grupper av elementer.

For eksempel, på en side er det flere lister i hver av dem du kan velge bare ett element. Deretter, når du velger et nytt element i listen, må du tilbakestille utvalget av de gjenværende elementene i listen. Men ikke rør andre lister. Dette kan enkelt gjøres hvis alle elementene i samme liste har samme navn.

Enhver tag kan ha både attributter idog name. Eksempel:


<img id="image123" name="avatar" src="link to picture">