/ / Eksempel på HTML-side og grundlæggende principper for oprettelse

Et eksempel på en HTML-side og det grundlæggende ved oprettelsen

Mange sprog er opfundet, men HTMLhører til det specielle og mest efterspurgte. Mange andre vigtige begyndelser i programmering er forbundet med det. Meget bliver tilgængeligt, når en udvikler har kendskab til markup-sproget - HyperText Markup Language (HTML).

eksempel på html-side

Dybest set er der intet kompliceret i HTML og igennemom et par minutter vil enhver, der er længst væk fra programmering og Internettet, oprette en HTML-side i et notesblok. Et eksempel der fortjener opmærksomhed, enkelhed, faktisk tilgængeligt for alle.

Generel beskrivelse

En HTML-fil er en side på et websted, selvom du kan argumentere med det, men det faktum, at en fil er en side, er forståeligt til at begynde med.

HTML-filen starter med en DOCTYPE-overskrift ihvilket angiver, at typen af ​​den givne fil er HTML. Alle sideelementer (tags) er angivet i vinkelparenteser. Hvert par ("<" og ">") indeholder et HTML-tag. Normalt parres HTML-tags, dvs. for hvert "tag" er der et "/ tag". Begge er lukket i vinkelbeslag. Der er enkelte tags, hvoraf den mest populære er "br /" - en overgang til næste linje.

Det største tag i filen er selve HTML-filen isom kun indeholder to tags: HEAD og BODY. I den første laves forskellige beskrivelser, der vises links til andre filer, der er nødvendige for siden, PHP- og JavaScript-scripts kan være til stede. Den anden registrerer indholdet af siden. Også i form af tags og scripts.

Enkel HTML-side

Et eksempel på oprettelse af en sådan side findes nedenfor i artiklen. Lad os overveje det nøje.

Forfatterens eksempel er ikke et billede

HOVED sektion

Hovedformålet med HEAD-tagget er generelt at beskrive siden og almindelige scripts, skønt sidstnævnte er et forholdsvis relativt koncept. Normalt er kun to ting vigtige her:

  • nøgleord og sidebeskrivelse
  • links til andre filer (* .css og * .js).

Til visning af sideindhold har indholdet af dette afsnit kun en indirekte betydning, da det indikerer, at der et eller andet sted i andre filer er CSS-regler for tags og scripts fra andre sprog.

HTML-siden har en titel (TITLE), somvises, når den besøgende bevæger musen over fanen, hvor siden er åben. Dette er et vigtigt punkt, fordi det gør siden meget mere præsentabel, lettere at sige, underskrevet med læsbar tekst.

eksempel webside html

META-tags er vigtige i internetprogrammering generelt, men når du har brug for at oprette en HTML-side i et notesblok, er det uønsket at rodne eksemplet med unødvendige konstruktioner.

LINK- og SCRIPT-links skal være specieltOpmærksomhed. Den første peger på placeringen af ​​CSS-stilarket, den anden på placeringen af ​​JavaScript-kodefilen. Der kan være mange sådanne links.

Hvis man skal nærme sig manuskripter, når videnHvis HTML er størknet, skal cascading-stilark adresseres med det samme. CSS-filerne giver især reglerne for formatering af HTML-tags.

Kropssektion

Faktisk er HTML-eksempletsektion KROPP. Det er her, alle oplysninger, alt indholdet på websidesiden er indeholdt. Al information præsenteres i form af tags og scripts, såsom indsættelse af JavaScript-kode eller stykker af PHP-programmer.

Det er vigtigt at forstå, at eksemplet HTML-webside ibrowser og det samme eksempel i en teksteditor, især notesblok, er det langt fra den samme ting. I det første tilfælde har vi en færdiglavet HTML-tekst, hvor alle scripts udføres. For eksempel udarbejdede PHP sin del og dannede de nødvendige tags de rigtige steder i stedet for sin kode. JavaScript har også opfyldt sin mission, selvom der stadig er en separat diskussion om det.

simpelt HTML-sideeksempel

HTML er tags, ikke scripts. I sidste ende viser browseren kun indholdet på siden, kun dens tags. Der er ingen PHP-kode der.

JavaScript er i en særlig position, dets interesse er at betjene siden ikke kun i indlæsningstidspunktet (genindlæsning), men også på de øjeblikke, hvor siden er i den besøgende browser, og han studerer den.

Et simpelt eksempel på HTML-sidekode (kun BODY-sektionen) vises nedenfor.

Forfatterens eksempel er ikke et billede

Og i den besøgendes browser ser det ud som følgende.

Forfatterens eksempel er ikke et billede

Koden specificerede ikke, hvordan den skulle se udelementer gengivet af browseren. Al synlig styling er i CSS-reglerne. I dette tilfælde er der henvist til Mcss / scPhpWordRW.css-filen (se det allerførste eksempel på HTML-siden).

I modsætning til HTML er CSS-temaet mere simpelt dermeget tilgængelige regler, og deres antal er lille, når eksemplet med oprettelse af en HTML-side ikke kræver andet end et notesblok. Alt er meget tilgængeligt til øjeblikkelig mastering:

Forfatterens eksempel er ikke et billede

Her er hvor let det er at beskrive taggetscLogo_vDoc, og denne beskrivelse er sådan, at tagget i sin normale tilstand viser vDoc-logo.png-billedet, og når musen er over det, vises vDoc-logo-h.png.

Struktur af HTML-beskrivelser

Sproget indebærer ingen struktur ogbegrebet syntaks er meget relativt her. Der er ingen variabler her, men der er masser af muligheder. Det grundlæggende grundlag for hypertekst er, at der er et element (tag), der nødvendigvis har et navn.

Navnet, i tilfælde af et parret tag, består af det aktuelle navn (tagName) og vinkelparentes ("<" + tagName + ">"), hvis det er begyndelsen på et tag, og "</" + tagName + ">", hvis det er skrevet, slutter det.

Et eksempel på en HTML-side, der beskriver attributterne, findes nedenfor i teksten.

Forfatterens eksempel er ikke et billede

Tagget kan have attributter, så placeres deet mellemrum efter tagnavnet før lukkevinkelbeslaget ">". Attributter, hvis koden har dem, skrives kun i begyndelsen af ​​koden. Indholdet af tagget er hvad der er mellem begyndelsen af ​​tagget og dets slutning.

Generelt indhold af HTML-beskrivelser

HTML giver dig mulighed for at beskrive blokering og inlineelementer. De første optager et bestemt område i browservinduet, kan placeres absolut, det vil sige på det rigtige sted i visningsområdet på en HTML-side og har en bestemt størrelse.

eksempel på oprettelse af html-side

Integrerede elementer vises generelten strøm, det vil sige som siderne blev specificeret i filen og vises på skærmen. Visningen af ​​det samlede flow kan påvirkes, når siden indlæses. Placering, synlighed og andre egenskaber af blokelementer kan til enhver tid påvirkes gennem JavaScript-kode.

Udover enkle elementer tilbyder HTML at beskrive tabeller og formularer. Disse elementer er meget efterspurgte i "hverdagsbygning".

Tabelbeskrivelse: tags TABEL, TR, TD

Ved hjælp af TABLE-tagget kan du oprette en tabel,angive et bestemt antal TR-rækker og i hver række et bestemt antal TD-celler. I modsætning til den sædvanlige tabelorganisation, på grund af HTML-markeringens særegenheder, er den tabelorganisation begrænset til denne erklæring, så hvis udvikleren ønsker at have en rektangulær tabel, hvor antallet af kolonner i alle rækker er det samme, så skal han overvåge dette uafhængigt.

prøve html-sidekode

Princip HTML-position:gør alt, hvad der er angivet, men intet, der ikke forstås. I nogle tilfælde er antallet af kolonner i hver række i tabellen ikke så vigtigt, men hvis du har brug for at flette celler lodret eller vandret, bliver du nødt til at tælle alt omhyggeligt.

Et eksempel på en HTML-side, der beskriver en simpel tabel, vises tydeligt i artiklen.

Forfatterens eksempel er ikke et billede

Her vises en tre-række med tre bordkolonner, og i første række blev TH-mærket i stedet for TD-mærket brugt - kolonneoverskriften. Disse to tags har ikke meget forskel, men du kan bruge den første til at skelne den første række i tabellen, og i CSS kan du vedhæfte din egen stil til TH, hvilket adskiller den fra andre TD'er.

Formbeskrivelse: tags FORM, INPUT

Formularer er den mest efterspurgte del af HTML-tags. Ved hjælp af formularer kan du overføre oplysninger. Faktisk er selve siden output af information, men formularen er dens input.

Et eksempel på en HTML-side, der beskriver en simpel form:

Forfatterens eksempel er ikke et billede

Der er mange flere måder at bruge formularer på, mende vigtigste muligheder er som følger. Du kan angive inputfelter, tildele dem udseendet og håndterere til analyse af brugerinput. Du kan angive skjulte felter og videregive baggrundsoplysninger fra siden. Du kan udpege knapperne til overførsel af information ved at klikke på, der starter processen med overførsel af information.

Brug af HTML

At kende hypertekstens sprog er en forudsætningarbejde inden for enhver specialisering inden for internetprogrammering, men hvis du har brug for at skrive programmer i PHP eller JavaScript, skal du kende HTML + CSS perfekt.

PHP-sproget blev betegnet i det foregående eksempel.PHP kører på serveren, så siden med denne formular fløj fra serveren til browseren med udfyldte felter. Især modtog TestOnBlur-funktionen, der er nævnt i INPUT-tagget (onblur event handler), alle parametre som tekstfelter.

oprettelse af html-side i notesblokeksempel

JavaScript kører i browseren og tilknappen for at sende data tilbage til serveren fungerede korrekt, det vil sige konstruktionen: onclick = jQuery ("# ​​til"). val ("cart"), skal du have en idé om ikke kun hvad jQuery er, men også hvad #to, val er, vogn. Mere specifikt skal du kende grundlæggende HTML-tags og de generelle regler for anvendelse af CSS-stilarter på dem.

Dette er ret nok til hurtigt at hæve dine kvalifikationer inden for enhver specialisering inden for internetprogrammering.