Hvorfor er det viktig å kjenne HTML -kodespråket. Hypertext Markup Language HTML5 - struktur og grunnleggende

Hypertekstmarkeringsspråk SGML. XML. HTML.

SGML(Engelsk Standard Generalized Markup Language-et standard generalisert markup-språk; uttales [es-ji-em-el]) er et metalspråk der du kan definere et kodespråk for dokumenter. SGML er etterfølgeren til IBMs Generalized Markup Language (GML) fra 1969, som ikke skal forveksles med Geography Markup Language utviklet av Open GIS Consortium.

SGML ble opprinnelig designet for deling av maskinlesbare dokumenter i store regjerings- og romfartsprosjekter. Det ble mye brukt i trykk og forlag, men kompleksiteten gjorde det vanskelig å bli mye brukt til daglig bruk.

Hoveddelene i et SGML -dokument er:

SGML -erklæring - definerer hvilke tegn og avgrensere som kan vises i applikasjonen;

Dokumenttype definisjon - definerer syntaksen til oppskriftskonstruksjoner. DTD kan inneholde ytterligere definisjoner, for eksempel symbolske mnemoniske lenker;

Semantikkspesifikasjonen, som refererer til markup, gir også syntaksbegrensninger som ikke kan uttrykkes i en DTD;

SGML -dokumentinnhold - må minst være et rotelement.

SGML gir mange alternativer for syntaktisk markup for bruk av forskjellige applikasjoner. Ved å endre SGML-erklæringen kan du til og med eliminere bruken av vinkelparenteser, selv om denne syntaksen regnes som standard, den såkalte konkrete referansesyntaksen.

Eksempel på SGML -syntaks:

vanligvis noe sånt dette

SGML er standardisert av ISO: "ISO 8879: 1986 Informasjonsbehandling-Tekst- og kontorsystemer-Standard Generalized Markup Language (SGML)"

HTML og XML er avledet fra SGML. HTML er et SGML -program, og XML er et delsett av SGML designet for å forenkle maskinparingen av et dokument. Andre SGML -applikasjoner er SGML Docbook (dokumentasjon) og "Z Format" (typografi og dokumentasjon).

XML- Extensible Markup Language, det vil si Extensible Markup Language, oppsto som et resultat av utviklingen av HTML -språket (HyperText Markup Language). Det ville imidlertid være en grov feil å tenke på det som bare en forbedret versjon av HTML -språket. I hovedsak er XML neste generasjon markeringsspråk. Det er 3 punkter du må huske på som skiller XML fra HTML og forgjengerne fundamentalt (GML - Generalized Markup Language, SGML - Standard General Markup Language):

XML, I motsetning til HTML, HAR IKKE DEFINERTE KODER - nærmere bestemt kan hver utvikler lage EGEN XML -koder - så mange som nødvendig. Antallet slike tagger er praktisk talt ubegrenset. Dermed er XML et metalspråk som lar deg lage andre kodespråk som HTML.

Etter hvert som HTML -språket utviklet seg, økte antallet koder raskt. Etter hvert nådde antallet deres "kritisk verdi" - det ble vanskelig for webdokumentutviklere å huske nye og nye koder, men nettleserutviklere befant seg i en enda verre posisjon - de måtte lage nye versjoner av nettlesere som ville "forstå" nye koder . Smartere nettlesere blir større og større, og stiller stadig større krav til datamaskinene de brukes på. Saken forverres av det faktum at lommeenheter nylig blir stadig mer populære (spesielt de blir stadig mer brukt i netthandel), med begrenset minne og "svake" skjermer, og derfor har nettleserne som brukes på dem bare svært begrensede muligheter. XML, som ikke har et forhåndsdefinert merkesystem, løser dette problemet. "Prisen" for allsidigheten er den større strengheten i utformingen av webdokumenter. Reglene for formatering av XML -dokumenter er enkle:

ikke lukkede tagbeholdere er tillatt (men du kan kombinere åpnings- og lukkemerker i én, for eksempel:
)

"nestede" beholdere kan ikke "overlappe"

små og store bokstaver oppfattes som forskjellige tegn

søkeord kan ikke brukes som tagnavn

mellomrom, skilletegn, parenteser, firkantede parenteser og krøllete parenteser kan ikke brukes i taggenavn

understreking (_) og tall kan vises i kodenavn, men et tall kan ikke være det første tegnet i et kodenavn

(Hvis du trenger å bruke flere ord som et tagnavn, bør de skrives sammen og starte hvert ord med en stor bokstav.)

Dokumenter som oppfyller disse reglene kalles velformede dokumenter.

XML tjener til å BESKRIVE DATastruktur, hovedsakelig HIERARKISKE STRUKTURER.

En av hovedtrendene i utviklingen av webteknologier er SEPARATION OF DATA, DOCUMENT STRUCTURE AND ITS STYLE DESIGN. Som du vet, er en av måtene å isolere data fra dokumentets struktur å dynamisk koble DBMS til webdokumenter gjennom ODBC -grensesnittet (Open DataBase Connectivity). Isolering av stiler oppnås ved bruk av kaskade stilark. XML lar deg beskrive ikke-relasjonelle databaser. Siden tagger kan opprettes av utvikleren, beskriver navnene deres vanligvis betydningen av dataene.

XML, som et middel til å beskrive datastrukturen, gir DATAUTveksling mellom forskjellige applikasjoner, og fungerer dermed som en slags "lim".

Verdien av denne "broende" XML -funksjonen kan ikke vektlegges for mye. Takket være muligheten til å utveksle data mellom ulike applikasjoner, "går" webteknologier til et kvalitativt nytt nivå.

Hypertext Markup Language (HTML) det er et enkelt system for å lage hypertekstdokumenter som er bærbare fra en plattform til en annen. I utgangspunktet er HTML -dokumenter SGML -dokumenter med generell semantikk som er egnet for å representere informasjon i en lang rekke applikasjoner. HTML kan brukes til å representere:

Hypertekstnyheter, post, dokumentasjon og hypermedia

Alternativer -menyen

Database spørringsresultater

Enkle dokumenter med innebygd grafikk

Og også, for hypertekstvisning av eksisterende oppsett av informasjon

World Wide Web (WWW) -prosjektet samler informasjon spredt rundt om i verden. For å gjøre dette bruker WWW Internett HyperText Transfer Protocol (HTTP) - Hypertext Transfer Protocol, som lar deg inngå avtaler om hvordan data presenteres i samspillet mellom en klient og en server.



Dataene overføres i meldingsdelen i samsvar med MIME -standarden. HTML er en av representasjonene av informasjon om WWW. HTML antas å matche en av MIME -typene, nemlig tekst / html. I tillegg er HTML en utvikling som er i samsvar med International Standard ISO 8879 - Standard Generalized Markup Language (SGML), som er et system for å definere strukturerte dokumenttyper.

HTML -dokument

Et HTML -dokument ligner en tekstfil, bortsett fra at noen tegn (strenger) er kontrolltegn. Disse symbolene kalles koder og definerer dokumentets struktur.

HTML -dokumenter må starte med en tag i begynnelsen av filen og avslutt med koden... Mellom disse taggene er HTML -dokumentet organisert som HOVEDET og KROPPEN til dokumentet, omtrent som en e -postmelding. Inne i HEAD -delen er TITLE og annen informasjon om dokumentet som helhet angitt. Inne i BODY -delen, ved hjelp av HTML -tagger, er teksten strukturert i avsnitt, lister, etc. med muligheten til å style individuelle ord og hele setninger og opprette koblinger til deler av dette og eksterne dokumenter. Teknisk sett kan åpnings- og lukkekoder for HTML-, HEAD- og BODY -elementer utelates. Dette anbefales imidlertid ikke, ettersom HEAD / BODY -strukturen lar applikasjoner definere funksjoner i dokumenter (for eksempel overskriften) uten å se på hele dokumentet.

Struktur av HTML -elementer

I et HTML -dokument definerer tagger begynnelsen og slutten på overskrifter, avsnitt, lister, tegnmarkering og lenker. De fleste HTML -elementer i et dokument er definert som en åpningstag, som spesifiserer elementets navn og attributter, etterfulgt av elementets brødtekst, etterfulgt av en avsluttende tag. Avgrensningstegnene for start -taggen er "<" и ">"; for den avsluttende -"". For eksempel:

Dette er overskriften

Dette er et avsnitt.

Noen elementer vises bare som en start -tag. For eksempel, for å opprette en skillelinje, bruker du taggen
... I tillegg kan stengekodene for noen elementer (P, LI, DT, DD) utelates. Kroppen til et element er en sekvens av tegn og nestede elementer. Noen elementer, for eksempel elementer som definerer lenker, kan ikke nestes i hverandre. Samtidig kan elementer som definerer lenker og karaktermarkering plasseres inne i andre strukturer.

Dokumentvisning

Den spesifikke visningen av dokumentet kan variere fra klient til klient. HTML -tagger definerer bare dokumentets generelle visningsstil. Noe som for eksempel betyr at HTML bare behandler overskriften på første nivå som overskriften på første nivå, men ikke spesifiserer at overskriften på første nivå skal vises i skriftstørrelse 24 i midten av toppen av siden. Fordelen med denne tilnærmingen er at hvis brukeren bestemmer seg for å endre overskriften på første nivå til en Helvetica -skrift i størrelse 20 venstrejustert, er det bare å endre definisjonen av overskriften på første nivå i WWW -visningen. Dermed bestemmes den spesifikke presentasjonen av dokumentet på monitorskjermen av brukeren av en bestemt klient.

Hovedstyrken til HTML ligger i dets evne til å knytte tekstområder (så vel som bilder) til andre dokumenter. Seere markerer disse områdene (vanligvis med farge og / eller understreking) for å indikere at dette er hypertekstkoblinger. Anker er et stykke tekst som markerer begynnelsen og / eller slutten på en hypertekstkobling. Teksten mellom åpnings- og lukkemerkene er utgangspunktet eller målet for hypertekstkoblingen. Attributtene til denne taggen er som følger: HREF

Valgfri. Hvis HREF -attributtet er tilstede, er Anker sensitiv tekst: utgangspunktet for lenken. Hvis leseren velger denne teksten, vil han bli presentert for et annet dokument, hvis nettverksadresse ble angitt i verdien av HREF -attributtet. Nettverksadressens format er det samme som nettadressen. Dette gjør at HREF = "# identifier" -strukturen kan referere til et annet anker i det gjeldende dokumentet, eller i et slettet dokument ved å prefikse adressen "#".

Valgfri. Hvis det finnes, kan ankeret brukes som koblingsdestinasjon. Attributtverdien er ankeridentifikatoren "a. En ren tekststreng kan brukes som identifikatorverdi, bortsett fra at alle slike identifikatorer i et enkelt dokument må være unike.

Valgfri. Lar deg angi forholdet mellom dokumentet som lenken ble opprettet fra og dokumentet som koblingen ble opprettet til.

Hyper Text Markup Language, eller ganske enkelt HTML, er hovedspråket for å lage websider. I denne artikkelen vil vi gi den mest generelle introduksjonen til HTML -språket.

Hyper tekstmarkeringsspråk

HTML -dokumentet er bygget på grunnlag av tagger. Etiketter skaper strukturen i dokumentet. Hovedmerkene er paret. Dette betyr at hvis det er en åpningskode som<…>da må det være en avsluttende tag med skråstrek... Det er verdt å merke seg at det også er ikke-parede koder.

Hele HTML -dokumentet er innrammet med to koder … ... Som du kan se, er de sammenkoblet. I tillegg må en enkelt validator -tag finnes i HTML -dokumentet.angir typen av gjeldende dokument.

HTML 4 har tre validatorer, HTML 5 har en validator. HTML 5 -tag -strukturen er som følger:

Eksempler:

  • for HTML 4 -dokumenter.
  • en for alle HTML5 -dokumenter.

HTML -dokumentstruktur

Et HTML -dokument består av en topptekst og en brødtekst. Tittelen er innrammet med koder … ... Brødteksten i dokumentet er innrammet av parede koder …

.

Eksempel: Hovedrammen til et HTML 5 -dokument bør ha følgende struktur:

Her er et sted for tittelen Her er dokumentteksten

Overskriftsstruktur

Overskrift … , inneholder flere spesielle tagger. De viktigste er tagger: og .

Tittelbrikke

Dette er tittelen på dokumentet, som vises i toppteksten på siden.

Metakode

Metakode, eller rettere sagt metakoder, fordi det kan være flere slike tagger i ett dokument. inneholder spesiell informasjon. For eksempel må det være en metakode som angir dokumentkodingen:

Metakoder beskrivelse og søkeord er viktige for indeksering av websider:

Vær oppmerksom på at moderne søkemotorer har sluttet å "se" søkeord, men dette avbryter ikke bruken. Intern lenking er ikke avbrutt.

Eksempel på HTML -webside

Her er en rudimentær HTML -webside:

<i>Min favoritt webside</i> Min første og derfor favorittnettside.

Å lære det grunnleggende i HTML er umulig uten å lære og bruke spesielle tekstredigerere. Fordi du trenger å skrive inn hvilken som helst tekst på en HTML -side bare i et tekstredigeringsprogram, for eksempel: NotePad ++, Sublime Text2, etc. Etter at du har skrevet dokumentet, må du lagre det med htm- eller html -utvidelsen. Åpne den opprettede filen i hvilken som helst nettleser du bruker.

Dokumentlegeme struktur

Teksten i dokumentet (i tagger

) er også delt inn i overskrifter og deler etter etiketter.

Overskrift og avsnittstagger

Teksten i dokumentet kan innrammes med spesielle tagger.
Avsnittet er uthevet med tagger

Overskriftene til tekstdelene er uthevet med tagger

,

,

, før

Overskriftstagger er organisert på en hierarkisk måte, og tallet i taggen indikerer hekkingsnivået for overskriften.

Eksempel på bruk av tagger

<i>Min favoritt webside</i>

Et øyeblikksbilde av min favoritt webside

h1 Produktkategori

h2 Produktkategori

h3 Produktkategori

h4 Produktkategori

h5 Produktkategori
h6 Produktkategori


Merk attributter

Et av hovedattributtene til tagger er et formateringsattributt som kalles align. Verdien av justeringsattributtet:

  • venstre - juster til venstre,
  • senter - juster til midten,
  • høyre - juster til høyre,
  • rettferdiggjøre - symmetrisk justering på to kanter.

Eksempel:

Min favoritt webside

h1 Vare

h2 Vare

h3 Vare

Denne formateringen kalles fysisk og er i utgangspunktet foreldet. For formatering er det bedre og anbefalt å bruke Cascading Style Sheets (CSS).

Lister

Den moderne HTML -standarden gir mulighet for å lage tre hovedtyper lister:

  • Uordnede lister;
  • Lister er nummerert (ordnet liste);
  • En definisjonsliste.

La oss vurdere hver av listene.

Punktlister

Punktlister er definert av tagger (uordnet liste). Etiketter brukes for å lage hvert element i listen. og(vareliste).

Eksempel:

  • Produkt 1 fra listen over produkter
  • Produkt 2 fra produktlisten
  • Produkt 3 fra produktlisten

Du kan sette topptekster i listen:

    Listeoverskrift

  • Produkt 1 fra listen over produkter
  • Produkt 2 fra produktlisten
  • Produkt 3 fra produktlisten

Markører, det vil si de synlige ikonene foran listeelementer, kan endres, og deres utseende er spesifisert av typeattributtene. Typeattributtene kan være sirkel (åpen sirkel), disk (fylt sirkel) og firkant (fylt firkant). Standard er diskattributtet. Et eksempel på bruk av en markør med diskattributtet:

  • Punkt 1 fra listen
  • Punkt 2 fra listen
  • Punkt 3 fra listen

Nummererte lister

Nummererte eller ordnede lister, hvert element i listen tildeles et nummer. Nummererte merkede lister opprettes. For hvert element i en nummerert liste brukes også parede koder. .

Nummererte lister bruker fem attributter:

1-arabiske tall; i- romanske små bokstaver; I- romerske store bokstaver; a-latinske små bokstaver; A-latinske store bokstaver.

Et eksempel på en nummerert liste.

    Liste over produkter nummerert

  1. Element 1 fra listen
  2. Item2 fra listen
  3. Punkt 3 fra listen

Et eksempel på en nummerert liste med latinske små bokstaver:

  1. Element 1 fra listen
  2. Item2 fra listen
  3. Punkt 3 fra listen

Definisjonslister

For å opprette lister av begrepet definisjon-begrepstype, bruk taggene

(definisjonsliste) og
(definisjonsbeskrivelse). Videre er selve begrepet i en sammenkoblet tag
, og definisjonen (forklaringen) av begrepet er i den sammenkoblede taggen
.

Eksempel:

Overskrift

Termin 1
Forklaring av begrepet 1
Termin 2
Forklaring av begrepet 2

Nesting lister

Enhver type liste, punktliste og nummerert, kan hekkes. Nesting er tillatt vilkårlig. Det viktigste når du lager nestede lister, er ikke å bli forvirret i sammenkoblede koder.

Et eksempel på nestede lister:

    Nested lister

  • Produktdel 1
    1. Produktdel 1.1
    2. Produktdel 1.2
  • Produkt seksjon 2
    1. Produktdel 2.1
    2. Produktdel 2.2
    3. Produktdel 2.3
  • Produkt seksjon 3
    1. Produktdel 3.1

HTML -tabeller

For strukturering av HTML -dokumenter er tabeller hovedstrukturen. Det er imidlertid verdt å merke seg at bruk av tabeller for å organisere sidestrukturer blir foreldet og utdatert.

Bordstruktur:

// - parede koder i bordbeholderen; // // beholder for å lage en tabellrad //
som skal være inne i taggen //
// tag for å lage en celle i tabellen. Denne koden må være inne i beholderen

  • Border - en 2 px bred kant;
  • Cellpadding - avstanden mellom de ytre kantene til bordcellene;
  • Celleavstand-avstanden mellom tabellcellens ytre grenser.
  • Høyde - bordets høyde;
  • Bredde- bredden på bordet.
  • Bildetekst for å lage en tabelltekst, kan bare plasseres inne i beholderen .

    Eksempel på tabell:

    Enkelt bord
    1-1 1-2 1-3
    2-1 2-2 2-3

    Colspan og rowspan tagger
    er for å kombinere celler :

    Sammenkoble celler i en HTML -tabell

    Celler 1.1 og 1.2Celle 1.3
    Celle 2.1Celle 2.2Celle 2.3
    Celler 3.1 - 3.3


    Hyperkoblinger

    Hovedattributtet til denne taggen er href. Denne taggen inneholder adressen til ressursen som lenken leder til. Lenketeksten er skrevet inne i containerkoden.

    Anker

    For å referere til et anker, i et annet dokument, skrives navnet på ankeret med en hash (#) umiddelbart etter adressen til tredjepartsdokumentet, uten mellomrom.

    Henvisning til Anchor 3 i dokument 009

    Figurer som lenker

    Tegninger og bilder kan også lages som lenker. For å gjøre dette settes bildet inn i teksten med taggen ... Src -attributtet til denne taggen har verdien til bildefilen:

    Det er alt! Selvfølgelig inkluderer det grunnleggende i HTML ikke alle funksjonene i dette språket, men de gir en ide om hvordan du danner et HTML -dokument.

    Vi fortsetter artikkelserien om det grunnleggende om nettspråk og utviklingen på dette området. Tidligere dekket vi det grunnleggende i hypertekstspråket HTML, dets funksjoner og metoder for tekstmarkering (tagger).

    Vi lærte også at HTML -språket er i nært samspill med programvareutvikling som CSS- og Javascript -stiler, og hvorfor et slikt samarbeid med språk er nødvendig. I dag vil vi i detalj vurdere strukturen for å bygge HTML5 -dokumenter. Blokkstrukturen til dokumentet, dets struktur er temaet for dagens artikkel. Men først må du forstå hva HTML5 er.

    Programmeringsspråket HTML5 (fra engelsk HyperText Markup Language) er den femte versjonen av språket. Som alle tidligere versjoner er den designet for å bygge strukturen av dokumenter og presentere dem på nettverket. HTML5 -versjonen er under utvikling. Målet for opprettelsen av den femte versjonen av HTML er å forbedre språket innen arbeidet med multimediedokumenter (lyd- og videoprogrammer).

    Legger til noen syntaktiske innovasjoner som f.eks

    ,
    ,