Hoe schrijf HTML-webpagina's

Hoe schrijf HTML-webpagina's


HTML, of HyperText Markup Language, is in feite een reeks tags die instructies mee aan internetbrowsers over hoe informatie op het scherm weer te geven. Zodra u begrijpt wat elke tag is en wat het doet, het schrijven van een webpagina is bijna net zo eenvoudig als het schrijven van een boodschappenlijstje.

instructies

HTML 101

1 Open een nieuw Kladblok-bestand en sla het op uw bureaublad als "index.html." Zoek het bestand op uw bureaublad; dubbelklik erop om het in uw webbrowser te openen. Voor nu, moet het worden weergegeven als een lege pagina. Als je te maken en wijzigingen in het Kladblok-bestand op te slaan, te vernieuwen deze webpagina om de HTML-testen en controleren van zijn verschijning in uw browser.

2 Maak de volgende set van tags:
<HTML>
</ HTML>
Deze tags vertel uw browser dat alles bevat binnen deze tags wordt geschreven in of (in het geval van CSS of javascript) is compatibel met HTML.

3 Creëer je eigen webpagina kop. Op de lijn onder de <HTML> tag, voert u de volgende set van tags: <HEAD> </ HEAD>

4 Hoe schrijf HTML-webpagina's

Geef uw pagina een titel. Tussen de header tags, plaatst u de volgende: <TITLE> HTML testpagina </ TITLE>. Sla uw werk op en vernieuw de pagina in uw webbrowser. De pagina moet nog verschijnen leeg, maar de titel moet nu worden weergegeven in de webbrowser titelbalk.

5 Maak META-tags op een nieuwe regel onder de titel:
<META NAME = "description" content = "Deze pagina is ontworpen met behulp van eenvoudige HTML">
<META NAME = "keywords" content = "HTML, web design, web page design">

6 Maak het lichaam van uw webpagina. Dit is het deel dat zal verschijnen in webbrowsers.
Op een nieuwe regel onder de </ HEAD> tag Voer de volgende tags: <BODY> </ BODY>

7 Hoe schrijf HTML-webpagina's

Creëer je eigen content. Tussen de <BODY> en </ BODY> -tags, schrijf de gegevens die op uw webpagina verschijnt. Voor deze oefening, type (of kopieer en plak) het volgende:
HTML is makkelijk
Deze webpagina is gemaakt met behulp van eenvoudige, basic HyperText Markup Language. HTML wordt gebruikt om tekst in verschillende stijlen en kleuren weer te geven. De tekst kan worden vet, onderstreept, cursief of doorgestreept. HTML kan ook worden gebruikt om verbindingen te maken en beelden aan een pagina.

8 Hoe schrijf HTML-webpagina's


Maak pagina-achtergrond, tekst en een link kleur attributen in de <BODY> tag als volgt:
<BODY bgcolor = "tan" text = "navy" link = "blue" vlink = "midnight" alink = "aqua">
Dit zal uw pagina een tan achtergrond met marineblauwe teksten geven. Hyperlinks tekst zal helder blauw op het eerste, zal aqua draaien wanneer bezoekers klikken op en eindelijk midnight blue voor degenen die al die verwijzen hebben bezocht.

9 Zoek de kop, "HTML is eenvoudig." Voeg de volgende tags om het centrum en de nadruk leggen op de kop:
<Center> <H1> HTML is gemakkelijk </ h1> </ center>

10 Gebruik de paragraaf, of <P> tag, om de rest van de tekst te breken in twee alinea's. Plaats deze tag in de voorkant van de lijn, "Deze webpagina is gemaakt met behulp van eenvoudige, basic HyperText Markup Language." Plaats het weer in de voorkant van de lijn, "HTML kan ook worden gebruikt om links te maken en afbeeldingen toe te voegen aan een pagina."

11 Breng de juiste formaten naar de woorden "vetgedrukt", "onderstreept", "cursief" en "doorgestreept." In HTML, zal de straf er als volgt uit:
De tekst kan worden <B> vet </ B>, <U> onderstreepte </ U>, <I> cursief </ I> of <strike> doorgestreept </ STRIKE>.

12 Zoek de zinsnede "koppelingen," in de laatste regel van de tekst. Zet dit in een hyperlink naar de startpagina van Google door het invoegen van Link-tags voor en na de zin, als volgt:
<a href="create"> http://www.google.com "> koppelingen </a>

13 Voeg een Creative Commons licentie gegeven foto op een nieuwe regel en centreren het als volgt:
<P> <center> <IMG height = "160" border = "0">
Voeg de Link-tags aan weerszijden van het beeld tag:
<a href="&lt;IMG"> http://www.flickr.com/photos/janelinton/122959202/">&lt;IMG height = "160" border = "0" alt = "Afbeelding door I_Shutter op Flickr" > </a>
Binnen de Link-tag, voeg de titel:
<a href="http://www.flickr.com/photos/janelinton/122959202/" title="afbeelding door I_Shutter op Flickr">
Gefeliciteerd. Je hebt net geschreven uw eerste webpagina in HTML.

Hints

  • De header is de sectie die instructies geeft op het web over hoe om te laten zien en catalogiseren uw pagina. Het bevat de titel van het algemeen weergegeven op het web browser titelbalk alsook meta tags die de inhoud van de pagina's te beschrijven en zorgen voor sleutelwoorden, die maken het gemakkelijk voor zoekmachines om uw pagina. In meer geavanceerde pagina's, dit is ook de plaats waar de CSS en Javascript goes.To een van de header de inhoud aanpassen, eenvoudig de plaats van de geciteerde tekst met uw eigen titel en meta content.You kunnen linken naar een pagina op het web. Vervang de Google URL met de URL, compleet met "http: //" prefix, de pagina die u wilt koppelen aan instead.Note dat de IMG tag op zichzelf staat. Er is geen </ IMG> sluiten tag.Though gebruikten we standaard kleur namen in ons lichaam attributen, kan HTML ook lezen hexadecimale kleurcodes, die nauwkeuriger kleuraanpassing mogelijk maakt. HEX codes is te vinden in de sectie Kleuren Custom van de meeste imaging-programma's; of u kunt online kleur converters, zoals Draac.com's kleur converter, die zowel standaard Engels namen en RGB-waarden kan omzetten in HEX code.Dit artikel te vinden is gewoon om mee te beginnen. Gelukkig is er geen tekort aan HTML tutorials op het web. Check out de verwijzing links naar tutorials over geavanceerde opmaak technieken te vinden en om de enorme mogelijkheden van HTML in web design te leren.
  • Een ontbrekende afsluitende tag, ontbrekende aanhalingstekens of zelfs een eenvoudige typefout kan je webpage breken, maar maak je geen zorgen. Dergelijke fouten zijn zo gemakkelijk te vinden en op te lossen als ze zijn om te maken, dankzij validators zoals de W3C Markup Validator. Deze programma's controleren of uw code correct is en gemakkelijk kan worden gelezen en begrepen door alle webbrowsers.