Hva er HTML og hvorfor er det nødvendig? HTML-språk

Grunnleggende HTML inneholder grunnleggende regler HTML-språk, beskrivelse av strukturen til en HTML-side, relasjoner i strukturen til et HTML-dokument mellom HTML-elementer.

Et HTML-dokument er et vanlig dokument Tekstdokument, kan opprettes både i en vanlig tekstredigerer (Notepad) og i en spesialisert med kodeutheving (Notepad++, Visuelt studio Kode osv.). Et HTML-dokument har en .html-utvidelse.

Et HTML-dokument består av et tre med HTML-elementer og tekst. Hvert element er identifisert i kildedokumentet med en start- (åpning) og en slutt-tag (med sjeldne unntak).

Start-taggen viser hvor elementet begynner, slutt-taggen viser hvor det slutter. Den avsluttende taggen dannes ved å legge til en skråstrek / foran tagnavnet: .... Mellom start- og avslutningstaggen er innholdet i taggen – innholdet.

Enkeltkoder kan ikke lagre innhold direkte; det skrives som en attributtverdi, for eksempel vil en tag lage en knapp med teksten Button inni.

Tagger kan være nestet inne i hverandre, for eksempel

Tekst

. Når du investerer, bør du følge rekkefølgen de lukkes i («matryoshka»-prinsippet), for eksempel vil følgende oppføring være feil:

Tekst

HTML-elementer kan ha attributter (globale, brukt på alle HTML-elementer og deres egne). Attributter skrives i åpningstaggen til elementet og inneholder et navn og en verdi, spesifisert i formatattributtet name="value" . Attributter lar deg endre egenskapene og virkemåten til elementet de er satt for.

Hvert element kan tildeles flere klasseverdier og kun én id-verdi. Flere klasseverdier er skrevet atskilt med et mellomrom, . Klasse- og id-verdiene må kun bestå av bokstaver, tall, bindestreker og understreker og må kun begynne med bokstaver eller tall.

Nettleseren viser (tolker) HTML-dokumentet, bygger dets struktur (DOM) og viser det i samsvar med instruksjonene som er inkludert i denne filen (stilark, skript). Hvis markeringen er riktig, vil nettleservinduet vise en HTML-side som inneholder HTML-elementer - overskrifter, tabeller, bilder osv.

Tolkningsprosessen (parsing) begynner før nettsiden er fullstendig lastet inn i nettleseren. Nettlesere behandler HTML-dokumenter sekvensielt, fra begynnelsen, mens de behandler CSS og relaterer stilark til sideelementer.

Et HTML-dokument består av to deler - overskriften - mellom kodene ... og innholdsdelen - mellom kodene ....

Nettsidestruktur 1. HTML-dokumentstruktur

HTML følger reglene i dokumenttypeerklæringsfilen (Dokumenttypedefinisjon, eller DTD). En DTD er et XML-dokument som definerer hvilke tagger, attributter og deres verdier som er gyldige for en bestemt HTML-type. Hver versjon av HTML har sin egen DTD.

DOCTYPE er ansvarlig for korrekt visning av en nettside av nettleseren. DOCTYPE spesifiserer ikke bare HTML-versjonen (f.eks. html), men også den tilsvarende DTD-filen på Internett.

...

Elementene inne i taggen danner et dokumenttre, det såkalte objektmodell dokument, DOM (dokumentobjektmodell). I dette tilfellet er elementet rotelementet.

Ris. 1. Den enkleste strukturen nettsider

For å forstå samspillet mellom nettsideelementer, er det nødvendig å vurdere de såkalte "familieforholdene" mellom elementene. Forhold mellom flere nestede elementer er klassifisert som foreldre, barn og søster.

En stamfar er et element som inneholder andre elementer. I figur 1 er stamfaren for alle elementene . Samtidig er elementet stamfaren til alle taggene det inneholder: ,

, , etc.

En etterkommer er et element som ligger innenfor en eller flere elementtyper. For eksempel er en etterkommer av , og elementet

Er en etterkommer av både og .

Overordnet element - et element som er relatert til andre elementer med mer enn ett lavt nivå, og plassert på treet over dem. I figur 1 og . stikkord

Er forelder kun til .

Barneelement- et element direkte underordnet et annet element på et høyere nivå. I figur 1 er det bare elementer, ,

Og er barn av .

Et søsterelement er et element som har et felles overordnet element med det aktuelle, de såkalte elementene på samme nivå. I figur 1 og er elementer på samme nivå, samt elementer , og

De er søstre til hverandre.

1.1. Element 1.2. Element

Seksjon ... inneholder teknisk informasjon om siden: tittel, beskrivelse, nøkkelord for søkemotorer, koding osv. Informasjonen du skriver inn der vises ikke i nettleservinduet, men den inneholder informasjon som forteller nettleseren hvordan siden skal behandles.

1.2.1. Element

Den nødvendige seksjonskoden er . Teksten plassert inne i denne taggen vises i tittellinjen til nettleseren. Tittelen bør ikke være mer enn 60 tegn lang for å passe helt inn i tittelen. Tittelteksten skal inneholde så mye som mulig Full beskrivelse innhold på nettsiden.

1.2.2. Element

Den valgfrie seksjonskoden er enkelt tag. Med dens hjelp kan du angi en beskrivelse av sideinnholdet og nøkkelord for søkemotorer, forfatteren av HTML-dokumentet og andre metadataegenskaper. Et element kan inneholde flere elementer fordi de har forskjellig informasjon avhengig av attributtene som brukes.

Beskrivelsen av sidens innhold og nøkkelord kan spesifiseres samtidig på flere språk, for eksempel på russisk og engelsk:

Ved å bruke en kode kan du blokkere eller tillate indeksering av en nettside av søkemotorer:

For å laste siden automatisk på nytt etter en spesifisert tidsperiode, må du bruke oppdateringsverdien:

Siden vil bli lastet inn på nytt etter 30 sekunder. For å omdirigere den besøkende til en annen side, må du spesifisere URL-en i url-parameter:

Tabell 2. Tag-attributter Egenskap

tegnsett	Angir tegnkodingen for gjeldende HTML-dokument:
innhold	Inneholder vilkårlig tekst som spesifiserer verdien knyttet til http-equiv eller name-attributtet, avhengig av verdien.
http-ekv	Kontrollerer nettleserhandlinger på en gitt nettside (tilsvarer HTTP-overskrifter). Når du gjengir siden, vil nettleseren følge instruksjonene som er spesifisert i attributtet: default-style angir den foretrukne stilen som skal brukes på siden. Content-attributtet må inneholde ID-en til elementet som refererer til CSS-stilarket, eller ID-en til elementet som inneholder stilarket. refresh indikerer tiden i sekunder før siden lastes på nytt eller tiden før omdirigering til en annen side hvis innholdsattributtet inneholder linjen "url=page_address" etter tiden. Automatisk omstart sider etter en spesifisert tidsperiode, i i dette eksemplet, etter 30 sekunder: Hvis du umiddelbart trenger å overføre den besøkende til en annen side, kan du spesifisere URL-en i url-parameteren:
Navn	Tilknyttet verdien i innholdsattributtet. Bør ikke brukes hvis elementet allerede har http-equiv , charset eller itemprop-attributtene satt. applikasjonsnavn angir navnet på nettapplikasjonen som brukes på siden. forfatter angir navnet på dokumentets forfatter i fritt format. beskrivelse definerer Kort beskrivelse til sideinnholdet, for eksempel: generator spesifiserer en av programvarepakkene som brukes til å lage dokumentet, for eksempel: . nøkkelord inneholder en liste søkeord, atskilt med komma, som tilsvarer sideinnholdet, for eksempel: . Navneattributtet kan også ta følgende verdier fra den utvidede spesifikasjonen, for eksempel skaper, googlebot, publisher, roboter, slurp, viewport, selv om ingen av disse har blitt offisielt tatt i bruk ennå.

1.2.3. Element

Inne i dette elementet settes stiler som brukes på siden. CSS brukes til å sette stiler i et HTML-dokument. Det kan være flere slike elementer på en side.

Inne i dette elementet kan du skrive formateringskode for både selve nettsideelementene og hele nettsiden.

.paper ( bredde: 200px; høyde: 300px; bakgrunnsfarge: #ef4444; farge: #666666; )

For å koble en gitt stil til et element, må du tilordne det riktige navnet til elementet ved å bruke attributtet class (eller id):

...

CSS-kode kan bygges inn direkte i markup-elementet som verdien av stilattributtet, for eksempel:

1.2.4. Element

Du kan også angi stiler for et dokument ved å bruke en annen metode - skriv dem i en egen fil med filtypen .css, for eksempel style.css.

Det er to måter å koble en fil med stiler til en nettside:
via @import url-direktivet

@import url(style.css);

ved å bruke elementet. Elementet krever ikke en avsluttende tag. Denne gjenstanden definerer forholdet mellom nåværende side og andre dokumenter. Det kan være flere slike elementer på en side. Oppføringen vil se slik ut:

Tabell 4. Tag-attributter Attributtbeskrivelse, akseptert verdi

kryssopprinnelse	Angir om CORS (en nettleserteknologi som lar en nettside få tilgang til ressurser fra et annet domene) skal brukes når du henter et bilde fra et nettsted. anonym – nettleseren legger automatisk til en Origin-overskrift til en forespørsel på tvers av domener, som inneholder navnet på domenet som forespørselen ble sendt fra. Hvis serveren ikke svarer med CORS-overskriften Access-Control-Allow-Origin: * (eller domenenavnet i stedet for en stjerne), vil innlasting av bildet bli blokkert. use-credentials - Hvis serveren ikke gir legitimasjon ved hjelp av Access-Control-Allow-Credentials: true , vil bildelasting bli blokkert.
href	Hovedattributtet til taggen, verdien er banen til filen med stiler.
hreflang	Bestemmer språket for teksten i det refererte dokumentet.
media	Angir typen enhet som koblingsressursen skal brukes på.
nonce	En tilfeldig generert strengvariabel på serveren som setter regler for bruk av innebygde stiler for å beskytte innhold. Attributtverdien er en tekststreng.
rel	Attributtet definerer forholdet mellom gjeldende dokument og dokumentet det refereres til. alternativ - en lenke til det samme dokumentet, men i et annet format (for eksempel sider for utskrift, oversettelse, speiling, feed i RSS- eller Atom-format), . arkiver - indikerer at det koblede dokumentet er av historisk interesse. En lenke kan peke til en samling av poster, dokumenter eller annet materiale. forfatterkobling til en side om forfatteren av dokumentet eller til en side med forfatterens kontaktinformasjon. bokmerke en referanse til artikkelens nærmeste stamfar som er lenken, eller til den delen av artikkelen som er mest relatert til elementet hvis det ikke er noen stamfar. ekstern brukes til å indikere at siden det lenkes til ikke er en del av denne siden. spesifiserer først en kobling som peker til det første dokumentet i en sekvens av dokumenter. hjelpekobling til et hjelpedokument. ikonet angir banen til ikonet som skal brukes for gjeldende dokument. siste indikerer en lenke som fører til siste dokument i dokumentrekkefølgen. lisens En lenke til opphavsrettsinformasjonen for et dokument. neste indikerer at dette dokumentet er en del av en serie og at lenken går til neste dokument i den serien. nofollow indikerer at lenken ikke er godkjent av sidens forfatter eller at lenken er av kommersiell karakter. noreferrer indikerer at klientforespørselhodet som inneholder url-en til forespørselskilden ikke skal sendes når du følger lenken. pingback spesifiserer adressen til pingback-serveren, som lar bloggen automatisk varsle nettsteder som lenker til den. prefetch spesifiserer at den refererte filen skal bufres på forhånd. prev indikerer at dette dokumentet er en del av en serie og at lenken er til et tidligere dokument i den serien. søk indikerer at det refererte dokumentet inneholder et grensesnitt for søk og relaterte ressurser. sidefelt indikerer at det koblede dokumentet vil vises i ekstra nettleserkontekst, hvis mulig, og noen nettlesere, når du klikker på en hyperkobling, åpner et vindu for å legge til koblingen i bokmerkelinjen. stilark-lenke til ekstern fil, som vil bli brukt som stilark for dette dokumentet. koden indikerer at den hyperlenkede koden gjelder for dette dokumentet. opp indikerer at siden er en del hierarkisk struktur, og at hyperkoblingen fører til mer høy level ressurs i strukturen.
størrelser	Angir størrelsen på ikonene for visuell visning. Størrelser-attributtet brukes bare sammen med rel="icon" og kan ha følgende verdier: widths-height - definerer en liste over størrelser atskilt med mellomrom, hver størrelse må være i formatet - widths-height (ikondimensjoner er spesifisert i piksler), for eksempel: ; hvilken som helst - ikonet kan skaleres til hvilken som helst størrelse.
tittel	Definerer tittelen på en lenke eller navnet på et sett med alternative stilark. Attributtverdien er tekst.
type	Angir MIME-typen til dokumentet det refereres til. I i dette tilfellet den tar verdien "text/css" .

1.2.5. Element Tabell 5. Tag-attributter Attributtbeskrivelse, akseptert verdi

asynkron	Attributtet indikerer at skriptet vil kjøre asynkront med resten av siden (skriptet vil begynne å kjøre samtidig som siden lastes).
tegnsett	Definerer tegnkoding
kryssopprinnelse	Bestemmer om CORS skal brukes ved lasting av eksterne skript (ved å bruke src-attributtet). anonym – før du laster skriptet inn i en forespørsel på tvers av domener, legger nettleseren automatisk til Origin-headeren, uten å sende tilgangsparametere (informasjonskapsel, X.509-sertifikat, pålogging/passord for grunnleggende autentisering via HTTP). Hvis serversvaret ikke inneholder Access-Control-Allow-Origin: domenenavn-overskriften, vil ikke skriptet bli lastet. brukslegitimasjon — før du laster skriptet inn i en forespørsel på tvers av domener, legger nettleseren automatisk til en Origin-header som indikerer tilgangsparametere (informasjonskapsel, SSL-sertifikat eller pålogging/passord-par). Hvis serversvaret ikke inneholder Access-Control-Allow-Credentials: true-overskriften, vil ikke skriptet bli lastet.
utsette	Tolkning av skript er forsinket til dokumentet er gjengitt på brukerens enhet.
nonce	Gir sikkerhet ved å beskytte mot skriptangrep på tvers av nettsteder (XSS, kryss området skripting). Angir regler for bruk av innebygde skript ved bruk av nonce-verdier og hashes. Under sidegjengivelse beregner nettleseren hashes for hvert innebygde skript og sammenligner dem med de som er oppført i CSP. Nedlastinger fra ressurser som ikke er inkludert i "hvitelisten" er blokkert.
src	Indikerer plasseringen til filen med skriptet; attributtverdien er url-en til filen som inneholder JavaScript-programmet.
type	Brukes til å deklarere skriptspråket som brukes til å komponere innholdet i taggen.

1.3. Element

Denne delen inneholder alt innholdet i dokumentet. Tilgjengelig for elementet.

Tabell 5. Tag-attributter Attributtbeskrivelse, akseptert verdi

på ettertrykk	En hendelse som utløses etter at en side er sendt til utskrift eller etter at utskriftsvinduet er lukket.
ubeforuttrykk	En hendelse som utløses før en side sendes til utskrift.
ubeforutlastning	Hendelsen utløses når den besøkende starter en overgang til en annen side eller klikker "lukk vindu". Lar deg vise en melding i bekreftelsesdialogen for å fortelle brukeren om de vil forbli eller forlate gjeldende side.
påhashchange	Hendelsen utløses når hash-delen av URL-en endres, for eksempel når brukeren går fra example.domain/test.aspx#page1 til example.domain/test.aspx#page2 .
en melding	En hendelse oppstår når en melding mottas gjennom en hendelseskilde.
frakoblet	Hendelsen utløses av nettleseren når nettleseren fastslår at Internett-tilkoblingen er brutt.
på nett	Hendelsen utløses av nettleseren når Internett-tilkoblingen er gjenopprettet.
onpagehide	Hendelsen oppstår når brukeren forlater siden gjennom navigering, for eksempel ved å klikke på en lenke, oppdatere siden, fylle ut et skjema osv.
onpageshow	Hendelsen oppstår når brukeren navigerer til nettsiden, etter onload-hendelsen.
på avlastning	Hendelsen utløses hvis siden ikke lastes av en eller annen grunn, eller når nettleservinduet lukkes.

Hei kjære leser. Det er på tide å snakke om HTML-markeringsspråk, ved hjelp av hvilken absolutt alle nettsteder ble opprettet - både russiske og borgerlige og til og med kinesiske. Men dette er ikke et programmeringsspråk, som noen tror, men et hypertekst-markeringsspråk.

La meg minne deg på at hypertekst er tekst som inneholder lenker til andre sider og dokumenter. Markup-språket viser hvor og hvordan et tekstelement skal plasseres, for eksempel et avsnitt, overskrift, liste osv. CSS-språket, nært knyttet til HTML, er ansvarlig for utformingen av disse elementene, noe som gjør utformingen av nettsiden sider vakre, lesbare og lette for utlasting av sidekoden.

Unntatt CSS html kan utvides med språkfunksjoner PHP programmering og JavaScript, som gir sider interaktivitet, dvs. evne til å svare på brukerhandlinger.
Ved å bruke alle disse verktøyene kan du bygge et nettsted av enhver kompleksitet og hvilken som helst funksjonalitet. HTML-språket i seg selv er kun ansvarlig for oppmerking

Nettside fra innsiden

Dette er nettstedet mitt

Dette er min tekst

I denne koden nedenfor ser du tag-kommandoer, som noen ganger kalles deskriptorer. De er omsluttet av vinkelparenteser. Tagger er for det meste sammenkoblet. Åpning og lukking, med skråstrek. All HTML-markeringsspråkkode er nestet i hverandre, og ligner en "matryoshka-dukke", der en beholder er nestet i en annen.

Figuren nedenfor viser dekodingen av denne koden:

Og her er hvordan samme side ser ut: Mozilla nettleser Firefox. Jeg viste hvor teksten vises Overskrift Tittel og tekst stikkord Kropp

Hvordan lage en html-side

For klarhet, kopier teksten med kodene ovenfor til et hvilket som helst tekstredigeringsprogram, for eksempel notisblokk, og lagre den på skrivebordet. Klikk høyre knapp og velg "gi nytt navn". I stedet for .txt-utvidelsen, som en vanlig tekstfil, spesifiser filtypen.html eller .htm. Notisblokkikonet endres til et nettleserikon, som du kan klikke for å se din første nettside.

Hvis utvidelsen ikke vises, må du gjøre følgende.

Finn på datamaskinen din: Utseende og personalisering - Mappealternativer - Vis.

Det er alltid nyttig å vise filutvidelser slik at angripere ikke kan stole på at du åpner en fil med en infeksjon som "gift.jpg", som faktisk vil være "gift.jpg.exe". Det er veldig enkelt, uten utvidelsen som Windows skjuler som standard, å forveksle "malware"-startfilen med en skjult .EXE-utvidelse for et vanlig bilde.

Se en video om hvordan du lager HTML-sider

Programmer for å lage HTML-sider

Å skrive HTML-hypertekstmarkeringskode manuelt uten erfaring kan virke som en prøvelse av oppmerksomhet og utholdenhet. Men tro meg, bare ved å styrke ferdighetene dine på denne måten vil du stolt kunne kalle deg en webmaster.

For intelligent skrivekontroll html-kode manuelt er det mange programmer med kodeutheving. Notepad++ er den mest populære blant amatørutviklere. PHP Designer, Dreamweaver

De to siste programmene er betalte, men gamle versjoner, som ikke er dårligere enn nye, kan bli funnet på Internett gratis og lovlig brukt for dine behov. er en visuell redaktør. Den konverterer selv teksten din med design til kode. Uansett vil du ikke angre på å bli kjent med dette verktøyet.

Hvorfor da lære å skrive kode for hånd? Saken er at alle visuelle redaktører, til og med redaktøren innebygd i WordPress, noen ganger genererer så mye søppel egen kode at sidene veier mange ganger mer enn de som er skrevet ved hjelp av hodet og hendene. Ja, hvis du også vurderer det søkemotorer I dag tar de hensyn til rensligheten til koden, da vil du uunngåelig tenke på å studere HTML for å kontrollere hele prosessen.

Generelt vil Dreamwaver erstatte en god lærer i begynnelsen. Bruk dette programmet og se hvordan en html-side er skrevet. Hovedsaken er, ikke vær lat til å se på øverste vindu programmer der koden genereres. Merk deg selv hvor programmet gjør noe unødvendig.

Hva er en nettleser egentlig?

Mange tror at nettleseren er laget for å søke etter nettsteder på Internett, og at dette er formålet. I PC-brukerens forståelse skapes det således en feilaktig oppfatning om formålet med nettleseren. Faktisk er en nettleser et program for å tolke html-kode, CSS-kode, JS-kode osv. Det er med andre ord et applikasjonsprogramvareverktøy for å vise nettsider og andre dokumenter.

Mulighetene til moderne nettlesere er virkelig gode. Nettsider inneholder tross alt grafikk, videoer og tekster forskjellige formater. Nettleseren leser html-koden, ser videomaterialet som er innebygd der, grafisk og tekstkode og viser alt dette riktig på enhetens skjermer. Etiketter hjelper ham med dette, disse vanlige engelske ordene i vinkelparenteser.

Nettleseren ser ved hjelp av tagger hvilken del av teksten den tolker som er navnet på nettstedet, som er overskriften, hva som må presenteres som et avsnitt, hvor bildet skal plasseres og samtidig løse mange problemer knyttet til forskjellige språk, innebygd i vanlig HTML.

Språk HTML-oppmerking og hovedmerker

	forteller nettleseren at dette er et HTML-dokument
	her er informasjon for søkemotorer
	innholdet vises i nettleservinduet
	side tittel
	Overskrifter: fra største til minste
	Fet og kursiv tekstutheving
lenketekst	Forteller nettleseren at dette er en lenke med teksten "lenketekst"
	Opprette et nytt avsnitt
	avsnittsjustering (venstre, høyre, juster eller midtstilt)
	Ber nettleseren lage skjemaet

Denne tabellen er gitt for å vise bare hovedbeskrivelsene.

I moderne versjon HTML5 dukket opp sammen med nye tagger stor mengde nye muligheter som nettstedutviklere aldri drømte om for 10 år siden.

Stiler i et html-dokument

Når en nettleser viser innholdet på en nettside, viser den overskrifter i én stil, avsnittstekst i en annen og forskjellige skriftstørrelser. Dette er aktivert som standard i alle nettlesere. Men vi ønsker å se individuelle design for nettsider, og CSS kommer til unnsetning her. Cascading Style Sheets Language. MED bruker CSS du kan angi utformingen av ethvert element, du kan lage et hvilket som helst design for et webdokument.

CSS er et stiltillegg til HTML-språket og ville ikke eksistert uten det.

Stiler i HTML implementeres slik:

Hode>

Hr ( farge: sienna; )

P (margin-venstre: 20px; )

Brødtekst ( bakgrunnsbilde: url ("images/back40.gif"); )

Hvis en ekstern stilfil styles.css brukes, kobles den til html-dokumentet slik:

Eksempel på å skrive CSS-regler:

p(farge: svart; font: x-small).

Forteller nettleseren hva avsnittsfargen er

svart-svart, og skriftstørrelsen er x-liten (liten)

Slik styler jeg for eksempel innholdet i begynnelsen av hver artikkel på denne bloggen.

Kunngjøringer
(kant: 2px utgangsgrønn;
border-radius: 10px;
bredde: 360;
font-family: "Yeseva+One";
skriftstørrelse: 16px;
linjehøyde: 1,2em;polstring:10px 10px 10px 20px;
margin:10px auto 20px;
text-align:left;
bakgrunnsfarge: #a7cece;
}

V siste linje det er et interessant fragment: bakgrunnsfarge: #a7cece ;

#a7cece er html-fargen. Ved å bruke HEX-tegnsettet - det heksadesimale systemet: tall fra 0 til 9 og bokstaver fra A til F, kan du angi absolutt hvilken som helst farge. En fin akvamarin er satt her.

TIL CSS-tema Jeg kommer tilbake i egne innlegg.

Hvordan lære HTML Markup Language

Internett er fullt av oppslagsverk om HTML (html). Jeg liker nettstedet http://htmlbook.ru. Jeg kommer ofte hit for referansemateriale. Jeg anbefaler det for å spare tid.
Andrey Bernatsky. Sørg for å sjekke det ut!
Jeg liker bøker fra amerikanske forfattere. Dette er en fascinerende selvlærende lærebok i HTML/CSS-språket med en så kul presentasjon av materialet som du vil lese uten å stoppe. Alt blir fortalt enkelt og tydelig. Den kan lastes ned gratis på Internett, men det er bedre å kjøpe den og jobbe med den som en bok.

Mest Den beste måtenå mestre HTML-markeringsspråket (HTML) betyr å laste ned de mest kjente treningskursene på RuNet, og noen av dem er helt gratis. Gå til Evgeniy Popovs nettsted og last ned tonnevis med nyttig pedagogisk informasjon. Til yrkesopplæring lese informasjonen.

Alle bruker Internett og alle surfer på forskjellige sider, og sannsynligvis vil alle gjerne plassere nettsiden sin på Internett, men dette er ikke lett å gjøre, det er mange grunner til dette. Men for at du skal kunne være vert for et kvalitetsnettsted, trenger du bare å vite det grunnleggende " WEB programmering", som er HTML-språket. I denne artikkelen vil vi se på hovedelementene, tagger, attributter og til og med skrive den første nettsiden.

Hyper Text Markup Language - "HTML" ( hypertekst-markeringsspråk) mange har lenge sluttet å betrakte det bare som et programmeringsspråk. Siden seg selv HTML-konsept inkluderer ulike metoder design av hypertekstdokumenter, design, hypertekstredigerere, nettlesere og mye mer. En bruker som mestrer dette språket får muligheten til å gjøre seriøse ting enkle metoder og viktigst av alt, raskt, det i moderne verden anses som veldig bra!

På HTML-språket kan du lage dine egne multimediaprodukter og distribuere dem på CDer, og alle disse produktene, laget i form av sett med HTML-sider, krever ikke utvikling av spesialisert programvare, siden alt som er nødvendig for å jobbe med data ( Nettlesere) har blitt en del av standardprogramvaren på de fleste personlige datamaskiner.

Element ( element) er en konstruksjon av HTML-språket. Dette er et objekt som inneholder data og lar det formateres på en bestemt måte. Enhver nettside er et sett med elementer. En av hovedideene til hypertekst er muligheten for å bygge elementer.
Stikkord ( stikkord) - start- eller sluttmarkører for et element. Tagger definerer grensene for handlingen til elementer og skiller elementer fra hverandre. I teksten på en webside er tagger omsluttet av vinkelparenteser, og sluttkoden blir alltid etterfulgt av en skråstrek.
Attribut - en parameter eller egenskap til et element. Det er med andre ord en variabel som har standard navn og som kan tildeles et bestemt sett med verdier: standard eller vilkårlig. Tegnattributtverdier forventes å være omsluttet av rette anførselstegn, men noen nettlesere lar deg utelate anførselstegnene. Dette er fordi attributttypen alltid er kjent på forhånd. Attributter er plassert inne i startkoden og er atskilt fra hverandre med mellomrom.
En hyperkobling er et stykke tekst som er en peker til en annen fil eller et annet objekt. Hyperkoblinger er nødvendige for å aktivere navigering fra ett dokument til et annet.
Ramme ( ramme) - dette begrepet har to betydninger. Den første er dokumentområdet med egne rullefelt. Den andre verdien er ett bilde i et kompleks ( animert) grafisk fil(ser ut som et stillbilde fra en film). Det er også mulig i stedet for begrepet "ramme" i spesialisert litteratur og lokalisert programvareprodukter Du kan komme over begrepet "ramme" eller "ramme".
En HTML-fil eller HTML-side er et dokument laget i form av hypertekst basert på HTML-språket. Slike filer har filtypene htm eller html.
Applet ( applet) - et program overført til klientens datamaskin i skjemaet egen fil og startes når du ser på en webside.
Manus eller manus ( manus) er et program inkludert i en webside for å utvide funksjonene.
Utvidelse ( Utvidelse) er et element som ikke er inkludert i språkspesifikasjonen, men som brukes for å gi muligheten til å lage en ny og interessant formateringseffekt.
CGI ( Felles gateway-grensesnitt) er et generelt navn for programmer som, kjører på en server, lar deg utvide funksjonene til nettsider. For eksempel, uten slike programmer er det umulig å lage interaktive sider.
HTML-kode er et hypertekstdokument i sin opprinnelige form, med alle elementer og attributter synlige.
Nettside er et dokument (fil) utarbeidet i hypertekstformat og plassert i Verdensomspennende Web.
Nettsted ( nettstedet) - et sett med websider plassert på ett sted og sammenkoblet.
Nettleser ( nettleser) - et program for visning av websider.
URL( Uniform Resource Locator) eller enhetlig ressurslokalisator, adressen til et objekt på Internett, dvs. En typisk URL for WWW ser slik ut: http://www.navn.domene/filnavn.

Alle elementer i språket kan deles inn i tre grupper. Den første inkluderer elementer som skaper strukturen til et hypertekstdokument. Bruken av slike elementer er en nødvendig formalitet som ikke kan neglisjeres. Den andre gruppen inkluderer elementer som skaper formateringseffekter. Bruken av dem er diktert av de spesifikke kravene til dokumentet, fantasien og kompetansen til utvikleren. Den tredje gruppen inkluderer elementer som lar deg administrere programvare installert og kjører på klientdatamaskinen. Ofte opprettes slike elementer automatisk når en utvikler bruker et hypertekstredigeringsprogram eller lignende program for å sette inn et objekt i et dokument.

Selv om HTML-spesifikasjonen er en standard, blir nye elementer lagt til språket ( utvidelser). Derfor er det mer praktisk å se noen nettsider ved hjelp av visse nettlesere. Utvidelser lages kun av kjente selskaper som utvikler programvare for WWW, og vanlige brukere kan forbedre nettsidene sine ved hjelp av programmering. Applets lar deg fjerne begrensningene til HTML og gi rom for utviklerens fantasi.

HTML-versjoner

Den første versjonen av HTML ble utviklet på begynnelsen av 90-tallet av Tim BenersLee for en av de populære Mosaic-nettleserne tidligere. Men på det tidspunktet hadde verken nettleseren eller HTML i seg selv ennå funnet en god bruk. HTML+ dukket opp i 1993, og denne versjonen gikk også nesten ubemerket hen. Men HTML-språket ble utbredt takket være versjon 2.0, som dukket opp i juni 1994. Og fra det øyeblikket av har WWWs popularitet økt over hele verden. Standardene som er inkludert i versjon 2 er blitt så etablerte at de fortsatt brukes i dag.

HTML versjon 3.0, som dukket opp omtrent et år senere, introduserte muligheten til å tegne matematiske symboler ( integrert tegn, uendelighet, brøker, parenteser osv.) ved å bruke språkelementer. Men utviklingen av dette prosjektet bremset opp og fikk ikke videre distribusjon.

I 1996 dukket opp HTML-versjoner 3.2. Dette var en strålende løsning; det er nok å nevne at rammer ble introdusert i språkspesifikasjonen, som nå har blitt veldig populær blant nettstedsutviklere. Frem til i dag støtter alle nettlesere denne versjonen av HTML.

Offisiell HTML 4-spesifikasjon ( Dynamisk HTML) ble utviklet i 1997. På dette tidspunktet var det allerede åpenbart at videreutviklingen av hypertekst ville skje gjennom webprogrammering. Dette viste seg å være mye mer effektivt enn å introdusere nye elementer i språket.

Nettsidestruktur

Nedenfor er koden til nettsiden, som er laget i HTML, og ved å bruke denne siden som et eksempel, vil vi analysere strukturen, men først kopierer du all koden til en vanlig tekstnotisblokk og klikker på "Lagre som" og lagrer fil med html utvidelse, dvs. etter navnet write.html

Struktur av et nettdokument Gå til slutten av dokumentet Overskrift 1 Overskrift 2 Overskrift 3 Overskrift 4 Overskrift 5 Overskrift 6 Den første lenken ligger her Bør ligge her
grunnleggende netttekst sider.
Og jeg vil for eksempel sette inn her
flere overføringer,
slik at du kan
observere tydelig
hvordan fungerer det for deg
lenker i dokumentet,
ellers hvis du har en stor oppløsning,
Du vil bare ikke legge merke til koblingene som følges

HTML-dokumentnotasjon. Et av prinsippene for språket er multi-level nesteling av elementer. Dette elementet er det ytterste, siden hele nettsiden må være plassert mellom start- og slutttaggene. I teorien kan dette elementet betraktes som en formalitet. Den har attributtene versjon, lang og dir, som sjelden brukes i dette tilfellet, og tillater nesting av HEAD, BODY RAMMESET og andre elementer som bestemmer den generelle strukturen til nettsiden. Naturligvis ender alle slike dokumenter med en sluttkode.

< head >

Tittelområdet på en webside. Med andre ord, dens første del. Akkurat som det forrige elementet, tjener HEAD bare til å danne generell struktur dokument. Dette elementet kan ha lang- og dir-attributter.

< title >

Et element for å plassere tittelen på en webside. Tekstlinjen i dette elementet vises ikke i dokumentet, men i tittellinjen i nettleservinduet. Dette elementet påvirker i stor grad markedsføring i søkemotoren fordi søkemotorer legger spesiell vekt på TITLE-tag. Mitt råd: lag aldri veldig lang tekst i denne taggen ( 65 tegn er nok).

Dette elementet inneholder offisiell informasjon, som ikke gjenspeiles når du viser en webside. Det er ingen tekst inni den i vanlig forstand, så det er ingen sluttkode. Hvert META-element inneholder to hovedattributter, hvorav den første definerer datatypen, og den andre definerer innholdet.

< body >

Dette elementet kombinerer hypertekst, som definerer selve websiden. Dette er den synlig del dokument som er utviklet av autosiden og som vises av nettleseren. Følgelig bør sluttkoden til dette elementet finnes på slutten av nettsiden. Inne i BODY-elementet kan du bruke alle elementene beregnet på websidedesign. Innenfor startkoden til BODY-elementet kan du plassere mange attributter som tjener til å angi hele siden. La oss se på dem i rekkefølge.

En av de mest nyttige egenskapene til denne taggen, som har innvirkning på sidedesignet, er

background="bane til bakgrunnsfil"

En enklere bakgrunnsdesign kommer ned til å angi fargen

bgcolor="#FFFFFF"

Bakgrunnsfargen er spesifisert med tre tosifrede heksadesimale tall, som bestemmer intensiteten til rødt, grønt og blå farger(rbg).

Siden du kan endre bakgrunnen på siden, kan du også endre fargen på teksten. For dette formålet er det følgende attributt

text="#RRGGBB"

For å angi tekstfargen til hyperkoblinger, bruk følgende attributt

link="#RRGGBB"

Du kan også angi en fargeendring for brukerens sist valgte hyperkobling

Overskriftselement. Det er seks nivåer av overskrifter, som er utpekt som følger.
Overskrift
Overskrift
Overskrift
Overskrift
Overskrift
Overskrift

Nivå 1 overskriften er den største, og nivå 6 gir den minste overskriften. For overskrifter kan du bruke et attributt som spesifiserer venstre-, senter- eller høyrejustering:

align="left" align="center" align="right"

For å lage et nytt avsnitt, bruk taggen

Og for å flytte til en ny linje uten å lage et avsnitt - tag
dvs. overføring skjer. Det er ikke nødvendig å lukke disse kodene. Selvfølgelig, hvis du ikke bruker i taggen

ALIGN-elementet, som kan angi avsnittsjustering:

Venstre

Sentrert

Ikke sant

Teksten mellom disse elementene er justert i bredden

Horisontal linje ( horisontal regel) er et veldig vanlig element. For det første fordi det gjør det veldig enkelt og praktisk å dele en side i deler. For det andre fordi forfatteren av siden har et veldig lite utvalg av slike designelementer. Elementet har ikke en sluttkode, men har en rekke attributter for venstre, senter, høyre, begrunnelse:

align="venstre"
align="center"
align="right"
align="justify"

Et HTML-dokument kan være veldig tungvint, og lite praktisk for brukeren som raskt trenger å flytte til ønsket del av dokumentet. For å gjøre dette kan du bruke hyperkoblingsmekanismen. For å gjøre dette, plasser de riktige merkene på de riktige stedene i teksten.

Fri tekst

I dette tilfellet får en gitt linje i dokumentet et navn, og derfor kan en hyperkobling opprettes til en annen del av dokumentet, eller til og med på et annet dokument, som fører til den etiketten.

For å sette inn bilder ( Bilder) V HTML-dokument følgende tag er brukt ( gir en fullstendig beskrivelse av attributtene til denne taggen):

Lister

(liste) ble utviklet i HTML, utvilsomt påvirket av suksessen tekstredigerere. En liste skiller seg fra vanlig tekst, først og fremst ved at brukeren ikke trenger å tenke på nummereringen av elementene: dette HTML-oppgave tar på seg selv. Hvis listen suppleres med nye elementer eller forkortes, fortsetter nummereringen automatisk. Når det gjelder unummererte lister, går HTML foran hvert element med merker: sirkler, rektangler, ruter og andre bilder. Til syvende og sist får listen en anstendig form. Det er to grupper av slike tagger: noen definerer generell form liste ( og lar deg spesifisere attributter), og andre spør det intern struktur. Du kan bruke standardattributter i lister. Det finnes flere typer lister.

Den vanligste er den unummererte listen ( uordnet liste). Den presenteres nedenfor:

Listepunkt 1
Listepunkt 2
Listepunkt 3

ul-elementet er en slags utheving av en liste. Den lar deg skille en liste fra en annen. Li-elementet representerer hvert av elementene.

Tabeller

De er en av de mest nødvendige måtene å formatere data på en webside. Den største fordelen er at nettleseren tar seg av å tegne hele tabellen. Størrelsen på rammen kan justeres automatisk til størrelsen på nettleserens visningsvindu og, selvfølgelig, til størrelsen på linjene med tekst og bilder i tabellcellene. I tillegg til alt annet lar tabeller deg løse mange designproblemer: justere deler av en side i forhold til hverandre, plasser bilder og tekst ved siden av hverandre, administrer fargeskjemaer og så videre. Når du lager tabeller, brukes prinsippet om nesting: inne i hovedtabellelementet (TABLE) opprettes det en rekke elementer som definerer rader (TR), og inne i disse elementene er det elementer for å beskrive hver celle i raden (TD, TH).

For å forstå strukturen til en eksisterende tabell eller utvikle nytt bord, er det én regel om at sekvensen av elementer beskriver tabellen fra topp til bunn og fra høyre til venstre. For eksempel, hvis et TABLE-element følges av et TR-element, indikerer dette at en beskrivelse begynner ny linje tabeller. Alt bak dette elementet vil bli plassert på én linje (fra høyre til venstre). Dette kan være en sekvens av TD-elementer ( celler), et annet bord og så videre. Når det nye TR-elementet vises, vil beskrivelsen begynne neste linje osv. til slutten av tabellen (tag).
Tabellen kan justeres horisontalt ved å bruke align-attributtet:

align="venstre" - venstre;
align="center" - i midten;
align="right" - til høyre.

Tabellbredden kan angis nøyaktig i piksler eller som en prosentandel av sidebredden i nettleservinduet. For eksempel: bredde=400 eller bredde=50 %

To attributter brukes til å kontrollere utseendet til rammen. Faktum er at nettleseren lager et bilde av rammen, og simulerer dens tredimensjonalitet ( konveks) ved å bruke forskjeller i belysning av ansiktene

Scenarier

Nesten alle nettredaktører vil at sidene deres på nettstedet skal ha moderne utseende, var multifunksjonelle, vakre og dynamiske. Med standard midler Dette er ikke mulig i HTML, så forskjellige verktøy brukes: appleter, objekter, overlappende stilark og så videre. Men den mest populære og utbredte typen ( resepsjon) er bruk av skript.

Et skript er programkode som er inkludert i teksten på en side som kildetekst og kjøres av nettleseren når siden vises. Manuset kan skrives inn JavaScript, utviklet av Netscape, eller videre Visual Basic Skript ( VBScript), utviklet av Microsoft.

Denne taggen lar deg skille skriptprogramteksten fra annen sideinformasjon. SCRIPT-taggen må inneholde et språkattributt, som spesifiserer språket og kan ha følgende verdier:

javascript - kode i JavaScript;
vbscript - kode i VBScript-språk.

Typeattributtet kan også indikere språktypen, selv om bruken ikke er nødvendig. For ikke å bryte alle reglene, kan du plassere følgende definisjon inne i elementet:

type="text/javascript"

En av de kuleste funksjonene til skript er muligheten til å endre innholdet på en side som et resultat av programkjøring. Men dette er bare en funksjon, ikke en regel. Ved bruk av utsett attributt(som ikke aksepterer noen verdier) kan du "fortelle" nettleseren at slike endringer ikke vil bli gjort. I noen tilfeller lar dette siden lastes raskere.

Av standardattributtene kan du bruke charset-attributtet.

SCRIPT-tag ( eller en rekke slike elementer) kan være plassert enten inne i HEAD-elementet eller inne i BODY-elementet. Hvis skriptet er inne i BODY-elementet, er det også mulig at en nettleser som ikke støtter SCRIPT-elementet vil oppfatte programkoden som ren tekst og vise den på skjermen. For å forhindre at dette skjer, legges skriptkoden inn som en kommentar:

-
-
-

Alle moderne nettlesere gjenkjenner denne teknikken og ignorerer kommentartegn. Hvis du trenger å legge inn en kommentar i teksten til skriptet, brukes en annen notasjon for dette: to skråstreker // legges inn på begynnelsen av linjen.
Programkode Skriptet kjøres når siden er lastet inn, dvs. når innholdet fortsatt er synlig på skjermen. Nedenfor er et eksempel på det enkleste scenariet ( vise en melding i et vindu).

-
-
-
- Bare et manus
-
- alert("Du har skrevet ditt første manus!")
-
-
-
-

Dette enkel side, men det inkluderer et skript på én linje. Ved bruk av varslingsmetode En melding vises før lasting. Og den vil henge til brukeren klikker på OK-knappen, nedlastingen vil ikke fortsette.
Det er mulig at siden vil bli vist i en nettleser som ikke støtter skripting; NOSCRIPT-elementet er gitt for dette. Moderne visningsprogrammer ignorerer innholdet. Dette elementet kan brukes på flere måter. Til å begynne med kan du vise en annonse inne i den som følger: " Nettleseren din kan ikke kjøre skriptet som kreves for å se denne nettsiden!"For det andre, inne i elementet kan du utvikle en forenklet versjon av siden, uten skript. For det tredje kan du opprette en kobling til et annet HTML-dokument. NOSCRIPT-elementet må ha en sluttkode.

Så vi så på det grunnleggende i et slikt WEB-programmeringsspråk som HTML. Selv etter å ha lest denne korte artikkelen, har du allerede en idé, og til og med muligheten til å programmere på dette språket. Lykke til!

Velkommen til sidene på bloggen min. HTML er et enkelt markup-språk som brukes til å lage nettsider. Jeg sa det var enkelt slik at du ikke ville bli skremt av å lære det. HTML-språket er rett og slett ideelt for nybegynnere - det er mye vanskeligere å umiddelbart mestre et programmeringsspråk fra bunnen av, men html er faktisk mye enklere.

I denne artikkelen vil jeg fortelle deg hvordan du lærer dette språket raskest og effektivt, slik at du kan det perfekt innen en måned eller to. Tror du det er umulig? Jeg begynte å lære html i slutten av mars. I slutten av mai kjente jeg allerede til 90 % av taggene som trengs for å fungere uten problemer.

Hvordan lære et språk gratis?

Selvfølgelig, for den raskeste læringen, bør du finne flere nyttige nettsteder. Først trenger du html-referansen. Selv erfarne programmerere bruker det, fordi det rett og slett er umulig å holde dusinvis av tagger og deres attributter i hodet.

Fra oppslagsbøkene kan jeg anbefale deg - htmlbook. Dette er en veldig kul side som samler alle taggene og viser resultatet av arbeidet deres med en detaljert beskrivelse. Men dette er bare en guide ekstra verktøy, den største effekten kan oppnås med ekte øvelse.

Interaktive kurs

Og her snakker jeg om interaktive kurs. Dette er muligheten til å skrive kode og umiddelbart se hvordan den vises. I løpet av kursene vil du få oppgaver. Først enkle, for eksempel å gjøre teksten om til en tittel eller lage en tabell. Da er det vanskeligere. Etter hvert vil du få en forståelse av hva du kan gjøre med ved hjelp av HTML. Hvis du tror at du må betale for dette, tar du feil.

er en fantastisk side med kurs i html og css. De første 16-18 kursene er gratis! Hvis du vil fortsette studiene og få tilgang til betalte, må du betale 300 rubler per måned eller 1800 per år. Personlig ga jeg 300 rubler, jeg fullførte alt på en måned betalte kurs og fikk mye utbytte av det.

Viktigheten av poster

Et annet råd fra meg – skriv det ned! Skriv ned all informasjon som er ny og viktig for deg. Uten å skrive det ned risikerer du å ikke beholde den nødvendige kunnskapen i minnet. Personlig har jeg tre generelle notatbøker i hyllen min, nesten helt fylt med skrift, og fra tid til annen ser jeg på dem når jeg glemmer den eller den eiendommen.

Parallellstudie av html og css

HTML er bare én nettteknologi som bidrar til å skape strukturen og layouten til en nettside. CSS er i sin helhet ansvarlig for design i utvikling av nettsider. Disse språkene må læres samtidig fordi de samhandler med hverandre.

Selvstendig praksis

Når du har fått litt kunnskap, kan du øve på egen hånd. Hvordan gjøre det? Prøv å legge ut en artikkel med bilder, en tabell, en nestet liste, et enkelt sideoppsett med to kolonner eller noe annet. Du må øve deg fordi det er den eneste måten å raskt innarbeide en forståelse av hvordan ting fungerer i hjernen din. Det beste er selvfølgelig å finne deg en lærer i denne saken, men mest sannsynlig må du betale for dette.

Leksjoner fra webformyself-teamet

Webformyself er en fantastisk Internett-portal som gir massevis av informasjon om nettstedbygging. Du finner mye på nettsiden deres gratis artikler på HTML, CSS og nettsidelayout, men de ga også ut betalte videoopplæringer, som har som formål å formidle nyttig kunnskap til deg så raskt som mulig.

På slutten av dagen bør du ha en grunn til hvorfor du lærer disse nettteknologiene. Dette gjøres vanligvis for å lære å lage nettstedsoppsett selv. Hvis du også har dette målet, vil et utmerket alternativ for deg være å kjøpe tilgang til premiumtimer på webformyself.com. Som et resultat kan du ikke bare få tilgang til leksjoner om HTML og CSS, men også mange andre. For eksempel JavaScript og WordPress.

Det er nyttige leksjoner, Jeg vil også merke meg muligheten til å lage min første layout ved hjelp av leksjoner. Dette er veldig viktig fordi du vil motta god trening, hvoretter du vil kunne bli bedre på det selv, og prøve å lage andre oppsett for nettsteder du finner på Internett.

Hvor lang tid tar det å lære språk?

I gjennomsnitt kan HTML og CSS læres veldig raskt med riktig tilnærming. For eksempel tok det meg flere måneder. Hvis du vet hvor du kan hente kunnskap, kan læringsprosessen fremskyndes flere ganger.

Gode sider med nyttige materialer Jeg ga det til deg - så er det opp til deg. I prinsippet er ressursene ovenfor de beste på Internett. For eksempel har mer enn hundre tusen mennesker fullført kurs fra Htmlacademy, og mer enn 87 tusen mennesker har abonnert på Webformyself-oppdateringer.