Sådan opretter du en HTML -side

Forfatter: Florence Bailey
Oprettelsesdato: 20 Marts 2021
Opdateringsdato: 1 Juli 2024
Anonim
Sådan opretter du en HTML -side - Samfund
Sådan opretter du en HTML -side - Samfund

Indhold

HTML (Hypertext Markup Language) er det primære programmeringssprog til udvikling af websider. Oprettet som et enkelt og praktisk programmeringssprog. De fleste sider på Internettet er blevet udviklet ved hjælp af en af ​​formerne for dette sprog (ColdFusion, XML, XSLT). Efter at have læst denne artikel kan du fortsætte din træning ved hjælp af andre ressourcer på Internettet. Prøv at søge på internettet efter andre artikler, der er relateret til dette emne.

Trin

Metode 1 af 1: Skrivning af en HTML -side

  1. 1 Inden du begynder at gøre dig bekendt med et af de trin, der præsenteres her, skal du se afsnittet "Hvad du skal bruge".
  2. 2 Hvad du bør vide, før du begynder at forstå dette problem:
  3. 3 Det grundlæggende. Har du nogensinde hørt om mærket? Mærket er omgivet af vinkelbeslag, med ordet indeni. Slutmærket er skrevet i samme form, men med tilføjelse af et skråstreg efter det første vinkelbeslag. En attribut er et valgfrit ord i et tag, der bruges til at føje detaljer til et tag.
  4. 4 Begyndelsen af ​​dokumentet. Indsæt følgende i den teksteditor, du bruger:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
    Mærket skal lukkes med det samme mærke, men med et skråstreg efter det første vinkelbeslag. Der er undtagelser såsom tags META eller DOKTYPE.
  5. 5 DOKTYPE
    • Typisk er de fleste websider indstillet DOCTYPE ”. Dette hjælper med at bestemme kodningen samt hvordan den vil blive opfattet af webbrowsere. De fleste sider fungerer uden det, “men dette er nødvendigt, hvis du vil matche (De regulerer typer af kodninger på Internettet og hvordan de bruges)... DOCTYPE til HTML 4.01 præsenteres nedenfor :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // DA" "http://www.w3.org/TR/html4/strict.dtd"> Dette er en af de mest almindelige DOCTYPE bruges på sider overalt på internettet.Først peger den på typen af ​​siden, der beskriver 'html', derefter fremhæver den typen af ​​kodning, og endelig placeringen af ​​DOCTYPE, som som følge heraf beskriver siden til webbrowseren.
    • Der er forskellige typer HTML (forskellige versioner udviklet gennem årene), f.eks. Ved hjælp af nye tags eller specifikke tags. Nogle tags udfases (andre mere nyttige tags bruges i stedet).
    • b> og jeg> - det er det, der på nuværende tidspunkt pålægges tags, fordi de bruges til at transformere tekst, men ikke specifikationer, som følge heraf kommer andre tags til at erstatte dem. Tag stærk> er en erstatning for b>, og em>, en erstatning for jeg>.
    • Det er vigtigt, at de tidligere tags erstattes med tags, der er mere end formatering. Hvis teksten er oversat, forbliver ikke kun formateringen, men også dens betydning den samme. Dette er semantisk korrekt.
    • I XHTML version 2.0 er b> og jeg> ikke brugt, ligesom i HTML version 3+.
  6. 6 HTML "indkapslingsregel".
    • Lad os se på de mere vigtige tags, der i øjeblikket er i brug. Under oprettelsen af ​​siden bruges en enkel struktur. Hvis et mærke blev åbnet, blev det som følge heraf den skal lukkes... Dette gælder for hele strukturen. Her er et gyldigt eksempel på XHTML -layoutstrukturen:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • hoved>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • titel> Hej verden! / titel>
    • / hoved>
    • krop>
    • h1> Hej verden! / h1>
    • / krop>
    • / html>
    • Eksempelkode, der udsender en besked Hej Verden... Dette kaldes en test Hej Verden.
  7. 7 Overskrift
    • Websidens titel er indholdet mellem tagget hoved>... Dette indhold kan ikke ses af brugeren (kun den titel, der vises i sidens titel). Information mellem tags hoved>, kan vedlægge andre tags, såsom:

      • META -mærket bruges til oplysninger, der er nyttige for søgemaskiner og andre hjælpeprogrammer.
      • LINK -tag, der skaber et link mellem dokumenter, for eksempel til Styles (CSS).
      • SCRIPT -tag, dette inkluderer næsten enhver webkodning med mulighed for fjernadgang (fra et andet dokument).
      • STYLE -mærket, som i det væsentlige er en stil, der kan anvendes på en side.
      • TITLE -tagget er den titel, der vises som titlen på en side i din webbrowser.
    • Lad os se en demo af nogle af disse i et eksempelhoved taget fra dette websted (det er blevet forkortet):
      • hoved>
      • titel> ... / titel>
      • meta navn = "beskrivelse" indhold = "..." />
      • link rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "text / css" media = "all"> ... / style>
      • script type = "text / javascript" src = "..."> / script>
      • / hoved>

        Hvis du ikke har bemærket det, er de enkelte tags blevet fremhævet, hvor de faktiske oplysninger er fjernet. Eksemplet er ret kort og viser næsten alle mærker, der kan findes i hoved>bortset fra HTML -kommentar (Vi taler om dette i simple tags).
  8. 8 Enkle tags overalt
    • Lad os gå videre og se andre tags. Vær forsigtig med din tagging, og husk tommelfingerreglen, "indkapsling".

      • stærk> Fremhæver vigtig tekst.
      • lille> Gør tekst mindre. Skriftstørrelse måles i standardenheder fra 1 til 7, 3 er standardtekststørrelsen. ...
      • pre> Definerer en blok med rig tekst. Da det er korrekt, er sådan tekst skrevet med en skrifttype af samme størrelse og med alle mellemrum mellem ord.
      • em> Viser tekst som en sætning.
      • del> Slår tekst ud.
      • ins> Definerer den tekst, der er indsat i dokumentet.
      • h1> Et af mange overskriftsmærker. Etiketter af denne art starter med 'h', med en forskel i antal. Sørg for at lukke mærket med det samme nummer.
      • p> Definerer et afsnit.
      • ! --- ... ---> I modsætning til andre tags skal kommentaren være inde i selve tagget. Disse oplysninger er kun synlige, når koden ses.
      • blockquote> Viser et tilbud, kan bruges med citatet> tag.
      • De få eksempler ovenfor er ikke en komplet liste over eksisterende tags. Besøg for at finde ud af om andre.
  9. 9 At skabe en klar struktur
    • Sider er designet til at indeholde data i enkle sæt tags, så vi kan analysere oplysningerne i afsnit. Computeren genkender data; den kender ikke til kontekst eller konceptuel forbindelse. Vi skal oprette computervenlige HTML-sider. Dette opnås ved at bruge div -tagget. Det hjælper med at oprette et stort antal sider. Det kan styles med CSS og er lettere end at oprette store kodetabeller til layoutet.
      • div> Dette tag er specielt, fordi det kan styles og bruge separate informationsblokke, som både brugeren og computeren kan forstå.
    • Lad os tage et kig på et enkelt HTML -layout, der bruger et div -tag.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • hoved>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • titel> Hej verden! / titel>
      • / hoved>
      • krop>
      • h1> Hej verden! / h1>
      • div id = "contentOne">
      • p> Dette er noget tekst i div # contentOne. / p>
      • div>
      • p> Et afsnit i et underafsnit af div # contentOne / p>
      • / div>
      • / div>
      • / krop>
      • / html>
    • Brug af div> tags hjælper med at finde og ændre stilarter, mens du arbejder med CSS og Javascript. HTML vil bruge forskellige kodninger til at arbejde med CSS -stilarter og Javascript for at skabe en bedre og mere lydhør brugeroplevelse.

Tips

  • Efter at have læst denne artikel, skal du ikke stoppe op og tro, at du har lært alt, hvad du behøver at vide. Der er altid noget at lære, især i denne teknologi.
  • Lær, forstå og skriv kode.
  • Bemærk, at nogle tags kun bruger>. Para og br er nogle eksempler. Andre tags åbnet med> skal lukkes yderligere. For eksempel "div> / div>".
  • Folk forventer nye opdagelser, så genopfind, design eller kode.
  • Når du har lært meget, kan du prøve at lære serverprogrammering.
  • Lær at arbejde med CSS såvel som Javascript.

Advarsler

  • Husk, HTML handler om at redigere indhold. Det betyder, at HTML kun bruges til at gemme indhold i et anerkendt format. Andre ændringer skal foretages ved hjælp af andre teknologier, f.eks. CSS. Det betyder også at gøre “Semantisk korrektselvom andre ikke indrømmer det. Andre programmeringssprog hjælper med at opbygge websider (CSS, Javascript og XML). HTML er en indholdskonstruktør.

Hvad har du brug for

  • En teksteditor, der understøtter ANSI -kodning
  • En webbrowser som Internet Explorer eller Mozilla Firefox
  • (Valgfrit) wysiwyg eller wykiwyg HTML -editor såsom Adobe Dreamweaver, Aptana Studio eller Microsoft Expression Web