>> Daven FARNHAM: Vandaag ga ik praten een beetje over HTML,
HyperText Markup Language.
Je ziet HTML overal deze dagen.
In feite, als je dit ziet video in een browser, je bent
zien HTML nu.
HTML is geen programmeertaal, Integendeel, het is een opmaaktaal die wordt gebruikt door
webbrowsers om pagina's te maken op het internet.
>> Dus je zou kunnen vragen, hoe precies is het schrijven een webpagina in HTML verschillende
het schrijven van een programma in een programmeertaal taal zoals C?
Nou, C is een taal met een zeer strikte syntactische regels die moet worden
gecompileerd voordat het kan draaien.
Als je ooit bent vergeten om een ​​onder puntkomma aan het einde van een verklaring
uw C-code, je weet wat ik bedoel over met betrekking tot strikte syntax.
>> Webbrowsers zijn echter een beetje meer vergevingsgezind als het gaat om HTML.
Zelfs als uw HTML is niet syntactisch correct, kan uw pagina nog steeds
weergegeven door een browser, maar het kan niet kijken zoals u dat wilt.
Dus het is altijd het beste om volg de regels.
De beste manier om een ​​intuïtie te krijgen over hoe de dingen werken is om
gaan door een voorbeeld.
>> Dus wat we hier hebben is een basis blauwdruk voor een webpagina.
Je hebt waarschijnlijk een heleboel dingen tussen haakjes.
Nou, die zijn gewoon tags.
Tags principe webbrowsers informeren dat, hey, iets
wordt op je afkomt.
Vergeet echter niet, wanneer u opent een tag, moet je om te sluiten als je eenmaal bent
gedaan gebruiken.
>> Dus ik bijvoorbeeld een sectie te openen code met open
steunhuis, haakje sluiten.
Voeg ik dan wat tekst, in dit geval, mijn eerste webpagina toen ik ging naar
Sluit dit gedeelte gebruik ik bijna een identieke tag behalve deze keer met een
slash voor lichaam.
In het algemeen, dit is het formaat dat u bent gaat gebruiken wanneer u opent
en sluiten van tags.
Samen, een open-tag en een eind-tag componeren wat een element genoemd.
>> Als je kijkt naar de eerste lijn, zult u zie een uitroepteken gevolgd door
DOCTYPE html.
Dit is eigenlijk gewoon het vertellen van uw browser dat het bestand is een webpagina
geschreven in HTML.
De HTML-tag zegt in wezen, hier komt een aantal HTML.
Dan hebben we een hoofd-tag met een titel tag erin.
De hoofd-tag die je kunt bedenken als bestaande uit HTML-code die wordt geleverd voor
het grootste deel van uw webpagina's eigenlijke inhoud.
>> In het algemeen zet je de titel van je webpagina hier, hoewel er enkele
andere tags die kunnen worden weergegeven hier ook.
Daarna komt uw webpagina's lichaam, de werkelijke vlees en botten van uw website.
In ons voorbeeld hebben we net een eenvoudige zin, Mijn eerste webpagina,
die, als we onze site draaien, zal kijken een beetje zoiets als dit.
Onze webpagina is niet al te vreemd, maar maak je geen zorgen.
We zullen het sparren binnenkort.
>> Zodat de bovenstaande HTML, geven we u een zeer geven basic sjabloon voor een webpagina,
niets bijzonders, alleen de kale botten.
Maar als ik ben het creëren van een webpagina, wat als ik wil een toevoegen
beeld van, zeg, mezelf?
Nou, ik kan dat doen.
Er zijn een paar manieren om afbeeldingen toe te voegen aan uw site.
Als de afbeelding in dezelfde map als uw HTML-bestand, kunt u een link naar de
afbeelding via dergelijke route.
>> U opent met een afbeelding tag gevolgd door in Alt attribuut in de
bron van het beeld.
Waarde van de Alt-attribuut is slechts enkele alternatieve tekst in het geval dat een gebruiker niet kan
zie de afbeelding.
Als alternatief kunt u ook koppelen aan beelden via een volledige URL, zoals deze.
Nu, betekent dat de website niet echt bestaat, maar als er een foto van
me op dat adres, kon ik gebruik de bron URL behoren
haar imago op mijn website.
Hoe dan ook, eindig je met een veel mooier website, iets als dit.
>> Nou, dat is wel cool, maar ik soort van willen wat tekst hier ook.
Dus laten we gewoon iets toevoegen super eenvoudig boven de
beeld, net als de header.
Alles wat ik tot nu toe heb gedaan, is gebruik maken van de header tag, H1 en een regeleinde tag, br.
De header-tag maakt het lettertype een beetje beetje groter en meer op de voorgrond.
Het regeleinde-tag, aan de andere kant, is wel cool.
In tegenstelling tot de meeste andere tags, hoef je niet een opening en sluiting break-tag, net
de hierboven.
Dit komt omdat breuk heeft geen inhoud en is daarom een ​​leeg element.
>> Lege elementen zoals dit, kunt u openen en dicht tegelijkertijd gewoon door
inclusief een slash op het einde van de eerste aangifte.
Dus nu mijn website ziet er een beetje iets als dit.
Beter, maar het soort voelt als een doodlopende weg.
Er is nergens anders opzij te gaan van deze hoofdpagina.
Nou, laten we dat op te lossen door inclusief een link.
>> Wat ik ga doen, is gebruik maken van een attribuut aangeduid met A en maak de
afbeelding een link naar, laten we zeggen, CS50 TV.
Op die manier, wanneer iemand klikt op mij, hun browser wordt doorverwezen naar
andere, waarschijnlijk meer nuttig, webpagina.
Ik heb gehad om de grootte van de te minimaliseren tekst een beetje omdat onze webpagina is
steeds meer geavanceerde.
Maar hopelijk, het is nog steeds duidelijk.
Mijn website ziet er precies hetzelfde alleen nu, wanneer ik klik op de foto,
mijn browser opent een ander tabblad voor de webpagina CS50.tv.
>> Tot slot, laten we zeggen dat ik ga stijl deze website later met behulp van CSS.
CSS is wat bekend staat als een cascading style sheet.
En het principe biedt een efficiënte manier te bewerken en stijl
soortgelijke blokken code.
Ik wil beginnen met het organiseren van mijn HTML naar het gemakkelijker om stijl later.
Hier richtte ik twee verschillende soorten identifiers te helpen organiseren mijn code.
Ik heb de ID-attribuut in een divisie of div-tag, en ik heb gebruik gemaakt van een
Class attribuut binnen een andere div-tag.
>> Id en class attributen werken op vergelijkbare wijze.
Het enige verschil is dat je kunt alleen een element, het specifieke ID, maar
elk aantal elementen kan een klasse delen.
Dus bijvoorbeeld, kan ik de klas te gebruiken afbeelding meerdere keren, maar ik kan niet
creëren een andere divisie met de ID-top.
Hoewel ik nog niet gegaan in CSS, andere taal veelgebruikte
naast HTML, zodra ik begin styling mijn code met CSS, kan ik deze gebruiken
organisatorische kenmerken die invloed esthetiek van mijn webpagina's.
>> Alles binnen de divisie top zullen gelijkaardige stylings of hebben
andere groep van HTML I groep in de afbeelding klasse zal een gelijkaardige blik delen.
Dit is veel gemakkelijker dan te proberen te bewerken en stijl beelden of blokken
tekst individueel.
>> Dus gingen we over de basisprincipes van hoe naar een webpagina maken met HTML.
HTML heeft een heleboel andere functies te dat wanneer gecombineerd met andere talen
zoals CSS en JavaScript, kan echt maken pagina's opvallen.
De beste manier om te wennen aan HTML is gewoon om te prutsen met het,
zien wat werkt en wat niet.
>> Mijn naam is Daven Farnham.
Dit is CS50.
>> Dus bijvoorbeeld, kan ik gebruiken het imago van de klas -
Nee, er zijn zo veel attributen.
Mijn naam is Daven Farnham.
Dit is CS 650.
Ik wil CSS zeggen.
Dit is CSS.