4.1 a, href-taggar

Tja, vi glömmer fortfarande inte att vi förbereder en Java-programmerare ur dig, så du behöver bara lära dig 5 taggar.

För det första är detta den viktigaste taggen som förvandlar text till hypertext - länk . För att skapa länkar i HTML <a>används en tagg (från ankare, ankare).

Standardlänken ser ut så här:

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

Där blå är texten som användaren ser, och grön är adressen (länk) som han kommer att gå till om han klickar på texten i länken.

Ett typiskt HTML-dokument som innehåller länkar ser ut så här:


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

Nej, det brukar se ut så här:



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

Världen är inte perfekt.

4.2 img-tagg och src-attribut

För att infoga en bild på en HTML-sida <img>används en tagg (från ordet bild). Detta är en enda tagg, den har ingen avslutande tagg. Allmän bild av taggen:

<img src="image link">

Allt är väldigt enkelt. För att visa en bild i ditt HTML-dokument behöver du bara känna till länken till den bilden och använda img. Prova det, du kommer att gilla det.

4.3 Bordselementet

En HTML-sida kan också innehålla en tabell med data. Men här klarar du dig inte med en tagg, om du tänker efter. En tabell har trots allt en rubrik, rader, kolumner och celler. De kom alla med sina egna taggar:

  • <table>- själva bordet;
  • <tr>( table r ow ) – radtabell ;
  • <th>( table h header ) – tabellrubrikcell;
  • <td>( table data ) – tabellcell.

Så här skulle en 3 gånger 3 tabell se ut html(med en extra rubrikrad)


<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>

Fast nu används tabeller sällan. Saken är den att när man tittar på en sida från en telefon kan det vara användbart att visa tabellen på ett annat sätt (den får helt enkelt inte plats på skärmen). Men du behöver fortfarande veta hur borden är ordnade.

4.4 id- och namnattribut

Och ytterligare två viktiga punkter är attributen idoch name. Dessa är attribut, inte taggar, men de används väldigt ofta.

idTag - attributet låter dig ge det ett namn som är unikt i hela dokumentet . Detta är användbart om det finns JavaScript i HTML-dokumentet som ändrar värdet eller parametrarna för den givna taggen. Sedan, med hjälp av unik, idkan du exakt referera till önskad tagg.

Ett attribut nameutför en liknande funktion, men dess värde behöver inte vara unikt på sidan. Det vill säga teoretiskt sett kan det finnas flera taggar med samma namn. Detta görs för att göra det lättare att arbeta med grupper av element.

Till exempel, på en sida finns det flera listor i var och en av vilka du bara kan välja ett objekt. När du sedan väljer ett nytt element i listan måste du återställa urvalet av de återstående elementen i listan. Men rör inte andra listor. Detta kan enkelt göras om alla element i samma lista har samma namn.

Vilken tagg som helst kan ha både attribut idoch name. Exempel:


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