Hvordan lage en HTML -side

Forfatter: Florence Bailey
Opprettelsesdato: 20 Mars 2021
Oppdater Dato: 1 Juli 2024
Anonim
Hvordan bruke HTML til å lage din egen nettside (HTML/CSS intro del 1)
Video: Hvordan bruke HTML til å lage din egen nettside (HTML/CSS intro del 1)

Innhold

HTML (Hypertext Markup Language) er det primære programmeringsspråket for utvikling av websider. Laget som et enkelt og praktisk programmeringsspråk. De fleste sidene på Internett er utviklet ved hjelp av en av formene for dette språket (ColdFusion, XML, XSLT). Etter å ha lest denne artikkelen, kan du fortsette treningen din ved å bruke andre ressurser på Internett. Prøv å søke på internett etter andre artikler relatert til dette emnet.

Trinn

Metode 1 av 1: Skrive en HTML -side

  1. 1 Før du begynner å gjøre deg kjent med et av trinnene som presenteres her, kan du se delen "Hva du trenger".
  2. 2 Hva du bør vite før du begynner å forstå dette problemet:
  3. 3 Det grunnleggende. Har du noen gang hørt om taggen? Etiketten er omgitt av vinkelparenteser, med ordet inne. Sluttkoden er skrevet i samme form, men med tillegg av et skråstrek etter den første vinkelbraketten. Et attributt er et valgfritt ord i en tag som brukes til å legge til detaljer i en tag.
  4. 4 Begynnelsen på dokumentet. I hvilken tekstredigerer du bruker, lim inn følgende:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
    Etiketten må lukkes med samme tag, men med skråstrek etter den første vinkelbraketten. Det er unntak som tagger META eller DOKTYPE.
  5. 5 DOKTYPE
    • Vanligvis er de fleste nettsider angitt DOKTYPE ”. Dette hjelper til med å bestemme kodingen så vel som hvordan den vil bli oppfattet av nettlesere. De fleste sider vil fungere uten det, "men dette er nødvendig hvis du vil matche (De regulerer typer kodinger på Internett og hvordan de brukes)... DOCTYPE for HTML 4.01 presenteres nedenfor :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Dette er en av de vanligste DOCTYPE brukes på sider over hele internett.Først peker den på typen av siden som beskriver ‘html’, deretter fremhever den typen koding, og til slutt plasseringen av DOCTYPE, som som et resultat beskriver siden for nettleseren.
    • Det finnes forskjellige typer HTML (forskjellige versjoner utviklet gjennom årene), for eksempel ved bruk av nye koder eller spesifikke koder. Noen koder er utdatert (andre mer nyttige koder brukes i stedet).
    • b> og jeg> - Dette er det som for øyeblikket pålegges etiketter, fordi de brukes til å transformere tekst, men ikke spesifikasjoner. Som et resultat kommer andre tagger for å erstatte dem. stikkord sterk> er en erstatning for b>, og em>, en erstatning for jeg>.
    • Det er viktig at de forrige kodene erstattes med merker som er mer enn formatering. Hvis teksten er oversatt, forblir ikke bare formateringen, men også dens betydning den samme. Dette er semantisk korrekt.
    • I XHTML versjon 2.0 er b> og jeg> ikke brukt, akkurat som i HTML versjon 3+.
  6. 6 HTML "innkapslingsregel".
    • La oss ta en titt på de mer viktige taggene som er i bruk. Under opprettelsen av siden brukes en enkel struktur. Hvis en tag ble åpnet, ble det som et resultat den bør lukkes... Dette gjelder hele strukturen. Her er et gyldig 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">
    • hode>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • tittel> Hei verden! / tittel>
    • / hode>
    • kropp>
    • h1> Hei verden! / h1>
    • / kropp>
    • / html>
    • Eksempelkode som sender en melding Hei Verden... Dette kalles en test Hei Verden.
  7. 7 Overskrift
    • Nettsidens tittel er innholdet mellom taggen hode>... Dette innholdet kan ikke vises av brukeren (bare tittelen som vises i tittelen på siden). Informasjon mellom tagger hode>, kan omslutte andre tagger, for eksempel:

      • META -taggen brukes til informasjon som er nyttig for søkemotorer og andre verktøy.
      • LINK -tag som oppretter en kobling mellom dokumenter, for eksempel for Styles (CSS).
      • SCRIPT -tag, dette inkluderer nesten hvilken som helst webkoding, med mulighet for ekstern tilgang (fra et annet dokument).
      • STYLE -taggen, som egentlig er en stil som kan brukes på en side.
      • TITLE -taggen er tittelen som vises som tittelen på en side i nettleseren din.
    • La oss se en demo av noen av disse i et eksempeloverskrift hentet fra dette nettstedet (det har blitt forkortet):
      • hode>
      • tittel> ... / tittel>
      • meta name = "description" content = "..." />
      • lenke 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>
      • / hode>

        Hvis du ikke har lagt merke til, har de enkelte taggene blitt uthevet, og den faktiske informasjonen er fjernet. Eksemplet er ganske kort, og viser nesten alle tagger som kan finnes i hode>bortsett fra HTML -kommentar (Vi snakker om dette i enkle tagger).
  8. 8 Enkle tagger overalt
    • La oss gå videre og se andre tagger. Vær forsiktig med merkingen din, og husk tommelfingerregelen "Innkapsling".

      • sterk> Fremhever viktig tekst.
      • liten> Gjør teksten mindre. Skriftstørrelse måles i standardenheter fra 1 til 7, 3 er standard tekststørrelse. ...
      • pre> Definerer en blokk med rik tekst. Siden det er riktig, skrives slik tekst inn i en skrift av samme størrelse og med alle mellomrom mellom ord.
      • em> Viser tekst som en setning.
      • del> Slår ut tekst.
      • ins> Definerer teksten som er satt inn i dokumentet.
      • h1> En av mange overskriftstagger. Etiketter av denne typen starter med 'h', med forskjell i antall. Sørg for å lukke taggen med samme nummer.
      • p> Definerer et avsnitt.
      • ! --- ... ---> I motsetning til andre tagger, må kommentaren være inne i selve taggen. Denne informasjonen er bare synlig når koden vises.
      • blockquote> Viser et tilbud, kan brukes med cite> -taggen.
      • De få eksemplene ovenfor er ikke en komplett liste over eksisterende tagger. For å finne ut om andre, besøk.
  9. 9 Å lage en klar struktur
    • Sider er designet for å holde data i enkle sett med koder, slik at vi kan analysere informasjonen i avsnitt. Datamaskinen gjenkjenner data; den vet ikke om kontekst eller konseptuell forbindelse. Vi må lage datamaskinvennlige HTML-sider. Dette oppnås ved å bruke div -taggen. Det hjelper å lage et stort antall sider. Den kan styles med CSS og er enklere enn å lage store kodetabeller for oppsettet.
      • div> Denne taggen er spesiell fordi den kan utformes og bruke separate informasjonsblokker som både brukeren og datamaskinen kan forstå.
    • La oss ta en titt på en enkel HTML -layout som bruker en 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">
      • hode>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • tittel> Hei verden! / tittel>
      • / hode>
      • kropp>
      • h1> Hei verden! / h1>
      • div id = "contentOne">
      • p> Dette er litt tekst i div # contentOne. / p>
      • div>
      • p> Et avsnitt i en underseksjon av div # contentOne / p>
      • / div>
      • / div>
      • / kropp>
      • / html>
    • Å bruke div> -koder hjelper deg med å finne og endre stiler mens du arbeider med CSS og Javascript. HTML vil bruke forskjellige kodinger for å arbeide med CSS -stiler og Javascript for å skape en bedre og mer responsiv brukeropplevelse.

Tips

  • Etter å ha lest denne artikkelen, ikke stopp og tenk at du har lært alt du trenger å vite. Det er alltid noe å lære, spesielt i denne teknologien.
  • Lær, forstå og skriv kode.
  • Vær oppmerksom på at noen tagger bare bruker>. Para og br er noen eksempler. Andre tagger som åpnes med> må lukkes ytterligere. For eksempel "div> / div>".
  • Folk forventer nye oppdagelser, så gjenoppfunn, design eller kode.
  • Når du har lært mye, kan du prøve å lære serverprogrammering.
  • Lær å jobbe med CSS så vel som Javascript.

Advarsler

  • Husk at HTML handler om å redigere innhold. Dette betyr at HTML bare brukes til å lagre innhold i et anerkjent format. Andre endringer må gjøres ved hjelp av andre teknologier, for eksempel CSS. Det betyr også å gjøre “Semantisk korrektselv om andre ikke innrømmer det. Andre programmeringsspråk hjelper til med å bygge websider (CSS, Javascript og XML). HTML er en innholdsbygger.

Hva trenger du

  • Et tekstredigeringsprogram som støtter ANSI -koding
  • En nettleser som Internet Explorer eller Mozilla Firefox
  • (Valgfritt) wysiwyg eller wykiwyg HTML -editor som Adobe Dreamweaver, Aptana Studio eller Microsoft Expression Web