HTML grundlæggende. Hvad er HTML-koden på siden

Tag — et inline containerelement, der bruges til at indsætte små fragmenter af programkode i det, for eksempel i et webdokument, der repræsenterer tutorial på programmering. Browsere viser sådan kode i en monospace-skrifttype (f.eks. Courier New). Hvis du bruger ero sammen med elementet

Tag

 bruges til at indtaste tekst uden formatering, det vil sige at bevare alle mellemrum, tabulatorer og linjeskift.  Du kan anvende de fleste tekstformateringselementer i dette element.

Opmærksomhed: I HTML sprog Linjeskift, på hinanden følgende mellemrum og tabulatorer ignoreres.  Flere rum i træk behandles som ét rum.
Eksempel: Brug af elementer 
 Og 

 
Prøv det selv"
Inde i et element 
Browseren dublerer hvert mellemrum eller linjeskift, den støder på, og bevarer din originale formatering.
If (document.getElementsByClassName) ( x = document.getElementsByClassName("paginering") if (x.length>y) ( x.style.visibility = "skjult"; )
Inden for "pre"-elementet dublerer browseren hvert mellemrum eller linjeskift, den støder på, og bevarer din originale formatering.

 
if (document.getElementsByClassName) ( x = document.getElementsByClassName("paginering") if (x.length>y) ( x.style.visibility = "skjult"; )

Tags 
 Og 


Tag 
 Markerer et stykke kode som indtastet af brugeren fra tastaturet.  Nogle browsere markerer sådan tekst med en ekstra baggrund. 
Tag 
 bruges til at generere computeroutput, såsom den tekst, der vises i et konsolvindue, efter du har indtastet et kontrolscript.  Dette sjældent brugte element viser blot dets indhold i en skrifttype med monospace, f.eks 
, 
, 
.

Eksempel: elementer 
 Og 

 
Prøv det selv"
 
Indsæt den tekst, som brugeren skal indtaste fra tastaturet 
containerelement "kbd".
Indtast tekst: Dette er tekst indtastet fra tastaturet
Dette er den tekst, der er placeret i "prøve"-beholderen

Tag 


Tag 
 bruges med det formål yderligere at fremhæve variabler i programkoden.  Den identificerer en variabel i et matematisk udtryk eller en programparameter og vises normalt i kursiv.
 
Eksempel: elementer 

 
Prøv det selv"
Kroppens kinetiske energi:
 
Kroppens kinetiske energi:
WTil = mv2/2


 Opgaver
 
Afsluttende opgave
I denne lektion stiftede du bekendtskab med tags, der viser deres indhold i en monospace-skrifttype, fremhæver variabler i koden og tagget præ-formatering.  Alle er vigtige, når man arbejder med matematiske udtryk og programkode.
Det er tid til at gennemgå, hvad du har lært og fuldføre tre simple opgaver:
 
Variabel
 
Bestem selv"
Brug HTML-elementer til at angive bogstavet y som en variabel i ovenstående ligning.

 

 
 
 
 
 
 
Parabelligning y = Nx 2
 

 

 
 
 
 
 
 
Parabelligning y= Nx 2
 

Forformateret tekst
 
Bestem selv"
Ved brug af HTML element Sørg for, at teksten placeret i kodeelementet vises af browseren med alle mellemrum og linjeskift bevaret, som de er.
Du er helt sikkert stødt på sådan et koncept som HTML-kode.  Vi hørte det fra venner, så det i menuen i vores browser osv. Men hvad er det?  Lad os prøve at finde ud af, hvilken slags kode dette er, og hvilke elementer den består af.
Grundlæggende oplysninger
Lad os starte med en definition.  HTML-kode er markeringen af ​​enhver webside, der er lavet ved hjælp af HTML-sproget.
Denne kode består af tags, takket være hvilke browseren bestemmer, hvordan en bestemt side ser ud.  Dens struktur er opdelt i to dele: hoved - titlen på dokumentet, som indeholder sidens navn, samt information om selve dokumentet, og krop - dokumentets krop, hvor sideparametrene er indstillet.
For at skabe en mere eller mindre anstændig webside skrevet fra bunden, bør du studere de tags, der bruges af dette sprog, deres parametre og også kende koderne HTML farver.
Tags
Et tag er et element i HTML-sproget.  Med dens hjælp kan du indstille skrifttype, farve, størrelse på teksten, indsætte tabeller og billeder i den, formatere den, oprette overskrifter, links og også farvelægge siden.
Tags er altid omgivet af vinkelparenteser -<>, og det er det, der adskiller dem fra hovedteksten, som vises på siden, når den ses.  Der er to typer - parret og enkelt.
Parrede mærker består af et åbningsmærke og et lukkemærke, hvor sidstnævnte har en lige skråstreg efter venstre vinkelbeslag.  For eksempel: tekst.
Mellem to tags er der tekst, en tabel, et billede eller et andet element, som vises på websiden.
Enkelte tags består af et tag og indeholder ikke en skråstreg.  For eksempel: 
.
Tags kan have parametre, der kan indstilles vha særlige koder til HTML.
Vi bemærker også, at for de fleste tegn: hunde, parenteser, større end eller lig med, mindre end eller lig med og mange andre, er der en speciel tabel, hvori koderne for disse tegn er skrevet.  Denne kode begynder med et og-tegn, som kan efterfølges af enten en alfabetisk mnemonisk betegnelse eller et hash-tegn med en trecifret tegnkode.  Et semikolon skal placeres i slutningen.
Vigtigste tags
Vi har fundet ud af det, nu vil vi prøve at liste de vigtigste tags, der kan være nyttige, hvis ikke når du opretter dine egne websider, så i det mindste når du formaterer tekster.
< body>- indeholder dokumentets hovedparametre, såsom links, felter og andre;
< p>- angiver et afsnit;
< b>- gør teksten fed;
< i>- kursiv;
< u>- understreger teksten;
< s>- streger teksten over;
< sup>- angiver teksten som en hævet tekst;
< sub>- abonnement;
< font>- indstiller skrifttypeparametre: størrelse, skrifttype, farve;
< div>- med dens hjælp kan du justere din tekst;
< h>- header tag;
< a>- det kan bruges til at sætte links;
< table>- hjælper med at indsætte tabeller i et dokument med tags tilknyttet< tr>(streng) og< td>(celle).
Singler:

- single, overfører teksten efter den til ny side;
- med dens hjælp kan du indsætte en vandret linje i teksten.
Det er værd at bemærke, at tags normalt skrives med ny linje.  Dette gøres af hensyn til ikke kun layoutdesigneren selv, men også dem, der vil se koderne i HTML.
Tag-parametre
Vi har allerede gennemgået de vigtigste tags, som du gerne vil vide.  Vi har selvfølgelig ikke opført alt, men selv dette minimum kan være nok til at oprette dine første websider.
Men det er ikke nok at kende tags alene, du skal også studere de parametre, der kan indstilles.  I denne artikel vil vi kun gøre dem kort anmeldelse, vil vi beskrive de mest brugte.  Du kan se dem ved at åbne en hvilken som helst HTML-kode.
Vi vil heller ikke beskrive, hvilket tag denne parameter er egnet til, da mange af dem bruges i de fleste webmarkeringskommandoer:
ansigt - indstiller skrifttype;
størrelse - indstiller størrelsen;
farve - indstiller farven;
align - alignment;
navn - navn;
href - ved hjælp af denne parameter linkadressen er angivet;
alt - alternativ tekst;
bredde - bredde;
højde - højde;
baggrund - baggrundsbillede;
bgcolor - baggrund.
Det er ikke alle parametre, vi har kun listet de mest brugte og velkendte.
Et lighedstegn placeres efter parameteren, og derefter skrives dens værdi i anførselstegn.  Når du udvikler hjemmesider og sider, råder vi dig til at bruge specielle lærebøger eller manualer, så du ikke kun kender de grundlæggende parametre, men også indstiller dem korrekt.
Farvekort
Så vi har fundet ud af de vigtigste tags og deres parametre, lad os nu se på HTML-farvekoder.  Det er med deres hjælp, at du kan indstille farvelægningen af ​​tekst, en side eller dens individuelle elementer.
Begyndende webmastere bør vide, at der er specielle farvetabeller, der giver koder for hver nuance.  Der er kun 16 grundfarver, som kan specificeres ikke kun ved hjælp af tabellen, men også blot ved at angive deres navn på engelsk sprog.  Du kan også tilføje ordene lys og mørk til dem, og angive den ønskede nuance.
Der er også en, der har 216 forskellige typer ødem.
Bemærk, at det er meget mere bekvemt at bruge tabeller.  De giver hexadecimal kode farver.  I dette tilfælde kan du straks se denne skygge.  Hver kode begynder med et hash-tegn, efterfulgt af tre par tegn, der karakteriserer intensiteten af ​​rød, grøn og blå.
Bare kopier denne kode og indsæt den i parametrene for det tag, du har brug for.
Sådan får du vist sidekoden
Hvis du er interesseret i at oprette websider, så vil du sandsynligvis være interesseret i at se HTML-koden på et websted, du kan lide, eller et, du besøger ret ofte.
Men hvordan gør man det?  Der er to måder, ganske enkel og ligetil.  Den første er at åbne den side, du har brug for, og trykke på tastekombinationen Ctrl+U.  Sidens kildekode vises i et nyt vindue, som du kan se og studere.
Den anden måde er at klikke venstre knap musen og vælg " Kilde"  Men vi anbefaler stadig, at du bruger den første metode, da det er meget enklere og mere praktisk at bruge genvejstaster.
Bemærk, at mens du læser koden, vil du også være i stand til at se kommentarer til den, skrevet i "Comment" tagget, som ser sådan ud:.  I dette tilfælde skrives selve kommentaren efter udråbstegn.  Det vises ikke i browseren.  Og det er hovedsageligt skrevet for at andre programmører og webdesignere kan forstå, hvilken slags informationsblok der er placeret nedenfor, og hvorfor dette eller hint kodestykke blev angivet.
konklusioner
At skrive koder i HTML er ikke så svært, som det kan se ud ved første øjekast.  Især hvis du er uhøjtidelig og ønsker at lave simple hjemmesider, elektroniske lærebøger baseret på HTML osv. At lære de grundlæggende tags og princippet om markup vil ikke tage meget tid.  Selv et par dage vil være nok til, at du kan begynde at skabe dine egne projekter.
Bemærk venligst, at hvis du beslutter dig for at studere givet sprog markeringer, så vær forsigtig.  De fleste problemer opstår netop på grund af uopmærksomhed: ulukkede parrede tags, forkert angivne parametre, tastefejl - alt dette truer med at blive til en fejl, som du kan bruge lang tid på at lede efter.  Men generelt er det ret interessant at lære HTML-sidemarkering.
Og det oversættes som "hypertekstmarkeringssprog."  Hypertekst er en særlig metode til at navigere på internetsider, implementeret i form af hypertekstlinks.  Ved at klikke på disse links kan du nemt navigere i webstedets struktur.  Overgange sker i dette tilfælde ikke lineært, dvs.  du har altid mulighed for at gå til en hvilken som helst side på webstedet, hvortil linket er synligt i dette øjeblik. 
Markup henviser til visse regler og egenskaber, der er tildelt sideelementer.  De implementeres i form af såkaldte tags.  For at angive, at bestemt tekst på en side skal centreres, kan du for eksempel markere den med center-tagget.  Se HTML-kode specifik side muligt gennem ham kontekstmenu.  For eksempel for at få adgang til denne kode i Firefox browser skal trykkes Højreklik på siden og vælg "Sidekildekode".
Hvordan fungerer HTML-kode?
HTML-kode er et sæt korte tags, der indeholder sideelementer.  Al denne kode er gemt i en fil med filtypenavnet .html eller .htm.  Når du åbner en sådan fil i en browser, fortolkes koden af ​​den, og den færdige side vises i programvinduet.  At kende sproget HTML markup, skab egen side Næsten alle kan. 
Hvilke typer tags er der?
Tags repræsenterer individuelle designs inde i HTML-koden.  Dette er almindelig tekst omgivet af vinkelparenteser "".  Du kan se tags i HTML-koden på næsten enhver side.  Selve taggene vises ikke på de sider, de viser specifikt element, som er kodet ved hjælp af tags.  For eksempel, hvis der er et billede på siden, så indeholder dens HTML-kode img-tagget. 
HTML-begrænsninger
På trods af at HTML-kode giver dig mulighed for at bygge en hypertekstside af ret høj kvalitet, har den sine begrænsninger.  Sider, der udelukkende indeholder en sådan kode, er statiske, dvs.  de mangler dynamik, specialeffekter og andre funktioner.  Men de kan introduceres ved hjælp af andre sprog, såsom Java Script.  Langt de fleste moderne hjemmesider er skabt ved hjælp af yderligere sprog, der gør dem mere livlige og interaktive. 
Rejser på tværs af vidderne Internettet, var du i stand til at bemærke, hvor forskellige design og muligheder for websider.  Men ikke alle af jer ved, at al denne mangfoldighed er implementeret på basis af sprog HTML.
Alt, hvad du ser på siden - tekst, billeder, tabeller og andre elementer, der udgør det semantiske indhold på websiden, kaldet indhold, er oprettet ved hjælp af markup-sprog HTML.  Højreklik på en hvilken som helst webside, og vælg elementet i rullemenuen "se HTML-kode" eller "Kilde"– vises tekst editor med symboler og ikoner, der er uforståelige for dig - dette er HTML-side kode.
Ethvert WWW-dokument kan indeholde stiliseret og formateret tekst, grafik og hyperlinks til forskellige internetressourcer.  For at realisere alle disse muligheder blev det udviklet særligt sprog beskrivelser af WWW-dokumenter kaldet HyperText Markup Language (HTML), det er, Hypertext Markup Language.
HTML-beskrivelsen af ​​en webside er et sæt instruktioner, der fortolkes af et browserprogram.
Et dokument skrevet i HTML er tekstfil, der indeholder den faktiske tekst, der fører information til læseren, og markup-tags.  Tags er defineret af standarden HTML, sekvenser af tegn, der er instruktioner til browseren.
Ifølge disse instruktioner placerer programmet tekst på skærmen og inkluderer billeder, der er gemt separat grafiske filer, og danner hyperlinks med andre dokumenter eller internetressourcer.  En HTML-fil får således kun udseendet af et webdokument, når den fortolkes af browseren.
Men i standard HTML er der en væsentlig ulempe.  For eksempel, for at beskrive layoutet af afsnit i indhold og deres design, er det nødvendigt at beskrive disse egenskaber for hvert afsnit, selvom der er 10 eller 20 afsnit på én side.  Og forestil dig, at webstedet kan have 100 sider.  Som et resultat skal du indsætte det samme stykke HTML-kode på siden tyve eller to hundrede gange, hvilket øger filstørrelsen.
Hvilken hovedpine for programmører!  For at gøre livet lettere for fattige webmastere blev de opfundet Cascading Style Sheets (CSS)- cascading style sheets.
CSS fungerer på en anden, mere bekvem og økonomisk måde.  For at designe afsnit i webstedets indhold skrives en kode eller designstil én gang.  Denne kode eller stilbeskrivelse er gemt i separat fil.  Yderligere er det kun nødvendigt når HTML hjælp marker teksten i afsnit, og CSS sørger for deres design.  Koden er reduceret tiere og hundredvis af gange.
Det er meget praktisk at placere beskrivelser af stilarter i en separat fil, især hvis webstedet har mere end én side.  For eksempel at ændre indretning alle afsnit på webstedet, skal du blot ændre koden i typografiarket.
CSS sammen med HTML kan gøre underværker, alt sammen takket være arbejdsdelingen i at skabe websider.  Opmærkningen af ​​sideelementer er baseret på HTML, og det visuelle design af elementerne er givet ved hjælp af CSS-tabeller
Tabeller CSS stilarter
- et forsøg på at adskille detaljerne i sidedesignet fra dets struktur og indhold.
Indtil videre er dette et kinesisk brev til dig.  Men jeg vil ikke foregive at være en guru og skrive endnu en tutorial "Hvad er HTML og CSS".  Du vil finde en hel masse af lignende informationer på internettet, plus mange udgivne lærebøger.  Hvis du vil gå dybere ind i emnet, er flaget i dine hænder.  Vær ikke bange, HTML Og CSS er meget enkle, og enhver tekande kan mestre dem.  Men der er ingen grund til at skynde sig ind i dette endnu.
Ved egen erfaring Jeg ved, at det er bedre ikke at overbelaste tekandens hjerne med unødvendig information, ellers er det, dvs.  hjernen vil koge før tid.  Tro ikke på de smarte fyre på forskellige websteder, der hævder, at oprettelse af en hjemmeside skal starte med lære HTML og CSS.  Jeg har gode nyheder til dig – du behøver ikke selv at skrive HTML-koden, pga kloge mennesker kom op med CMS
.
 

 < Как работает браузер