Taken over de basisbeginselen van HTML zijn bedoeld om het werk met een reeks van de volgende onderwerpen te consolideren: HTML-structuur, opmerkingen in HTML, basistags, basis HTML-attributen. .

Taken voor afbeeldingen in HTML: een afbeelding invoegen in HTML (HTML-afbeeldingscode), grootte van een HTML-afbeelding, uitlijning van een afbeelding... in HTML.

Geavanceerde HTML- en CSS-opdrachten

HTML-opdrachten met Emmet. Snelle lay-out, Emmet-commando's (het zogenaamde Emmet-spiekbriefje). Na het voltooien van taken met de Emmet-plug-in zal de snelheid van uw lay-out/ontwikkeling aanzienlijk toenemen. .

Taken op CSS-kiezers. CSS-selectors: css-klasseselectors, css-attribuutselectors, css aangrenzende selectors, css-contextselectors, onderliggende selectors +in css, prioriteitsselectors.

.

Hoe CSS-positionering werkt, is belangrijk voor het begrijpen van complexe lay-outs. Hier zijn taken om te begrijpen en mee te werken: position absolute , position relatieve , position fixed en position static , CSS-eigenschappen linksboven rechtsonder . .

Formulierlay-outtaken

Maak een authenticatieformulier op de site, hetzelfde als in Twitter Bootstrap (zonder dit raamwerk te gebruiken). Bijvoorbeeld, zoals in.

Maak een verzendformulier op de website

Sluit de jQuery-plug-in aan om de datum/maand uit het veld te selecteren

Maak een selectievakje dat lijkt op een sociaal netwerk.

Maak een registratieformulier voor sitebezoekers

Maak een formulier dat lijkt op het formulier dat producten sorteert in Yandex.Market

Een van de taken van een lay-outontwerper is het schrijven van cross-browsercode. Code waarmee pagina's er in een zo groot mogelijk aantal browsers hetzelfde of zo veel mogelijk op elkaar kunnen lijken. .

Met moderne CSS-mogelijkheden kunt u prachtige achtergronden maken en ermee werken door deze in te kleuren met een verloopvulling. Een kleine reeks taken voor CSS-animatie.

Taken voor mediaquery's (mobiele sites). Het maken van een mobiele versie van de site is een belangrijk onderdeel van de vaardigheden van webontwikkelaars. De taken zijn gewijd aan de volgende onderwerpen: het maken van een mobiele website, het controleren van de mobiele versie van de website. .

Taken op het gebied van psd-lay-out en CSS-frameworks. De lay-out van een website op basis van een PSD-lay-out is het belangrijkste onderdeel van het werk van een webontwerper. In HTML-lessen bekijken we de basisstappen van de lay-out van PSD naar HTML. Opdrachten.

Bij het geven van lessen waarbij gebruik wordt gemaakt van deze methodologische ontwikkelingen, wordt het aanbevolen om voor het maken van HTML- en CSS-bestanden een gewone teksteditor te gebruiken die syntaxisaccentuering voor HTML- en CSS-talen ondersteunt, en bij voorkeur ook de mogelijkheid biedt om met meerdere bestanden in de modus voor meerdere pagina's te werken .

Notepad++ (notepad-plus-plus.org) is bijvoorbeeld geschikt voor Windows. Om in de teksteditor van Notepad++ lange regels te laten doorlopen, moet u Beeld -> Regeleinde in het menu selecteren. Notepad2 (flos-freeware.ch/notepad2.html) is ook een zeer goede teksteditor. Het ondersteunt echter geen bewerking met meerdere pagina's. Het instellen van regeleinden gebeurt met behulp van de opdracht Beeld -> Woordomloop.

1. HTML-document. Alinea's, regeleinden, uitlijning1 HTML-documentstructuur

De broncode van een HTML-document bestaat uit tags en inhoud.

Tags kunnen verschillende attributen hebben met gespecificeerde eigenschappen. In oudere versies van de HTML-taal werden attributen gebruikt om inhoud te ontwerpen: de lettergrootte en -kleur instellen, tekstuitlijning, inspringingen instellen en meer. Tegenwoordig wordt de inhoud van een HTML-document meestal opgemaakt met behulp van CSS.

Elk HTML-document bevat altijd HTML-, head- en body-containers, die als volgt in elkaar zijn genest:

Taak 1. Maak een bestand en geef het de hierboven weergegeven structuur. Bewaar het.

De hoofdcontainer bevat doorgaans een titelcontainer, waarvan de inhoud wordt weergegeven in de titel van het documentvenster.

Taak 2. Voeg een titelcontainer toe aan het document:

COMPUTER - elektronische computer

Sla het bestand op en open het in uw browser. Zoek de titelinhoud die u heeft ingevoerd.

De inhoud van de body wordt weergegeven in het browservenster.

De containertag wordt gebruikt om alinea's te markeren. Met één enkele b-tag kunt u naar een nieuwe regel gaan zonder een nieuwe alinea te maken, d.w.z. creëert een regeleinde.

Taak 3. Voeg de volgende inhoud toe aan de bodycontainer:

De opkomst van personal computers begin jaren zeventig (parallel met de geleidelijke evolutie van grote computers) wordt nu beschouwd als een revolutionaire staatsgreep. De omvang van zijn invloed op de menselijke samenleving wordt vergeleken met de gevolgen van de uitvinding van de boekdrukkunst.

Er zijn al miljoenen en miljarden computers in de wereld.
Hun aantal blijft gestaag groeien!

Redden. Vernieuw het document in uw browser. Merk op hoeveel alinea's u ziet waar het regeleinde zich bevindt.

2 Alinea-uitlijning. Oude stijl

De uitlijning van alinea's wordt bepaald door de waarden links (links), rechts (rechts), midden (midden) en uitvullen (uitgevuld). Deze waarden kunnen worden toegewezen aan de uitlijningseigenschap, die voor veel tags geldt.

De gecentreerde alinea-uitlijning kan bijvoorbeeld als volgt worden ingesteld:

Taak 4. Stel voor de eerder gemaakte alinea's de uitlijning in op uitgevuld (voor de eerste alinea) en rechts uitgelijnd (voor de tweede).

Dit artikel is niet bedoeld als uitgebreide handleiding voor de opmaaktaal voor HTML-documenten. Het beschrijft de basisprincipes van HTML - de basisprincipes, concepten en definities van deze technologie. Als je deze onder de knie hebt, kun je gemakkelijk verder gaan met het bestuderen van HTML-codering.

Om de les te bestuderen, downloadt u het archief met de benodigde bestanden.

HTML is een opmaaktaal voor documenten. De juiste uitspraak is HTT.

Heeft u waarschijnlijk ooit in de Word-documenteditor of soortgelijke kantoortoepassingen gewerkt? U weet waarschijnlijk dat dit type editor uitgebreide mogelijkheden heeft voor het bewerken van tekst, het rangschikken van elementen, het invoegen van afbeeldingen, enz.

Waarom, zou je je kunnen afvragen, over tekstverwerkers schrijven in een artikel over HTML? Maar waarom. Als je het door hebt, wat is dan een kantoorredacteur? Dit is een applicatie voor het bewerken en weergeven van documenten.

Het sleutelwoord hier is document. Dat wil zeggen, we maken, bewerken en bekijken een document in een bepaald programma, in dit geval - in een kantooreditor. Als we zo'n document openen in een eenvoudige teksteditor, bijvoorbeeld Kladblok, zullen we veel vreemde symbolen en tekens zien. Deze puinhoop van symbolen is onbegrijpelijk voor de mensheid, maar begrijpelijk voor computers. Dankzij deze interne taal krijgt het Word-document een bepaalde structuur en uiterlijk in de editor zelf, en verschijnt het document in al zijn glorie voor ons, met opgemaakte tekst en afbeeldingen op hun plaats.

HTML is een documentopmaaktaal voor de browser. Woord is hier de browser en het document is de HTML-pagina. Dit is de basis van HTML-technologie, waarvan het begrip nodig is om de opmaaktaal van webdocumenten niet te verwarren met programmeertalen. met behulp van HTML wij markering, waar op de pagina het element, de afbeelding of de tekst wordt weergegeven en in welke volgorde ze naast elkaar verschijnen.

Ja, het eenvoudig typen en opmaken van tekst in kantoortoepassingen heeft niets met programmeren te maken. Maar de oplettende lezer zal een belangrijk detail opmerken: in een tekstverwerker typen, bewerken en formatteren we tekst en afbeeldingen met behulp van visuele knoppen en menu's, maar waarom wordt HTML-code met de hand geschreven? Waarom zoveel technische details leren over het schrijven van markeringen voor een document?

Er zijn zelfs veel editors waarmee u HTML-pagina's kunt maken en bewerken, vergelijkbaar met Word. Dat wil zeggen dat de bron-HTML-code voor ons verborgen is en dat we er niet op ingaan.

Een soort Word voor HTML. Deze visuele editors heten:

WYSIWYG editors - Wat je ziet, is wat je krijgt. Dat wil zeggen, als we het in het Russisch vertalen: wat we zien is wat we krijgen.

Ik noem ze ‘wuzivoogies’. Hoewel dit fonetisch onjuist is, demonstreert het duidelijk de zinloosheid van deze uitvinding. Beginners gebruiken dergelijke editors heel vaak om hun eerste websites te maken. Dit is natuurlijk handig: u hoeft zich niet te verdiepen in de studie van tags, ontwerpstijlen en andere, op het eerste gezicht onaangename en complexe dingen. De editor zelf zet onze acties automatisch om in HTML-code.

Maar zoals ze zeggen: er gebeurt niets zomaar. Meer specifiek heeft deze aanpak zeer ernstige nadelen. Wat weerhoudt iedereen ervan om visuele editors te gebruiken om HTML-pagina's te ontwerpen? Feit is dat op deze manier gevormde pagina's meestal veel onnodige code en veel fouten bevatten vanuit semantisch oogpunt. Nu zijn er natuurlijk geen problemen met een snelle internetverbinding en het verschil in paginagrootte van 400 kb en 100 kb is niet significant voor de snelheid, maar geoptimaliseerde en correct geschreven HTML-code elimineert veel problemen en biedt veel voordelen, namelijk:

• Competente HTML-code heeft een positief effect op de zoekmachineoptimalisatie en de snelheid waarmee een zoekrobot een site crawlt. De kilobytes aan code die door de vuzivuga worden gegenereerd, zijn niet acceptabel en zelfs schadelijk;
• De HTML-code die door de WYSIWYG-editor wordt gegenereerd, bevat veel semantische fouten. Dat wil zeggen dat de tags die door een dergelijke editor worden gegenereerd, voor andere doeleinden worden gebruikt, waar ze bijvoorbeeld voor lijsten moeten worden gebruikt
  , genereert de editor nog een tag die we niet nodig hebben. Hangt natuurlijk af van de editor, maar hier bedoelen we complexe oplossingen voor het maken van websites, en niet alleen voor het bewerken van tekst in een tekstgebied met behulp van WYSIWYG-tools.
  • Er worden veel onnodige tags gegenereerd en de documentstructuur raakt opgeblazen. Laten we zeggen dat je een element in zo'n programma eerst naar rechts, dan naar links en dan naar het midden verplaatst - elke actie laat een spoor achter in de bron-HTML-code. De editor is een programma en kan niet weten wat je precies wilt krijgen; het genereert tonnen code, waarbij rekening wordt gehouden met alle mogelijke opties voor het gedrag van het document in de browser.
  • In de regel raken editors voor het visuele ontwerp van HTML-code snel verouderd. En door het gebrek aan interesse van professionals krijgen ze over het algemeen geen ondersteuning en stoppen ze met ontwikkelen. En HTML evolueert. Alles ontwikkelt zich behalve de wuzivoogi. Dienovereenkomstig kunnen ze geen correcte en moderne code genereren die nieuwe functies en oplossingen zou gebruiken.
  • Het ondersteunen en ontwikkelen van dergelijke projecten is een hemelse straf. Er kan helemaal geen sprake zijn van het gebruik van patronen en het hergebruiken van code.

  We zullen HTML dus alleen met pennen schrijven. Adequate tools voor visuele HTML-bewerking zijn nog niet uitgevonden en het is onwaarschijnlijk dat ze zullen verschijnen. De HTML-opmaaktaal is gemakkelijk te leren en te begrijpen, en er zijn veel hulpmiddelen voor het automatiseren van het schrijven van HTML-code, maar daarover meer in andere lessen.

  Na wat aan de WYSIWYG-editor te hebben gesleuteld, verlaten jonge HTML-goeroes deze nutteloze taak en gaan verder.

  HTML-documentstructuur

  Voor lessen raad ik aan de Sublime Text-editor te downloaden en te installeren. Ik raad ten zeerste aan om het ingebouwde Windows Kladblok voor HTML-indeling niet te gebruiken als je je psyche niet wilt breken in de vroege stadia van het leren van HTML.

  We besloten dat we de HTML-documentcode handmatig zouden schrijven, dat wil zeggen, deze zouden typen. HTML-lay-out is het proces waarbij een HTML-document wordt gemaakt. In de gewone mensen en geïnformeerde kringen is het slechts lay-out. Elk document heeft een structuur en bepaalde constructieregels. Uit welke elementen bestaat de code, wat is de structuur van HTML?

  Laten we een eerste sjabloon op de computer maken: het index.html-bestand, deze openen met een editor en de volgende code erin plakken:

  Koptekst Documenttekst Houd er rekening mee dat HTML-documenten de extensie .html hebben.

  Dus op volgorde van het voorbeeld.

  - documenttype (doctype)

  Deze constructie wordt altijd aan het begin van het document aangegeven, zodat de browser correct “begrijpt” welke versie van HTML wordt gebruikt bij het samenstellen van het document.

  Vanwege het feit dat HTML voortdurend evolueert, heeft het verschillende versies, zoals elk softwareproduct. De huidige versie van HTML is de vijfde en het doctype dat in het voorbeeld wordt gegeven, is actueel.

  In principe heeft het geen zin om je te verdiepen in de studie van documenttypen, omdat dit ontwerp met de release van HTML5 een standaard is geworden. Voeg het gewoon aan het begin van het document in telkens wanneer u begint met het maken van een website-indeling.

  - begin van het document

  De eerste tag die we zien na het doctype is .

  Een HTML-tag is een structurele eenheid van HTML-documentopmaak. HTML-code bestaat uit bouwstenen die tags worden genoemd. Elke tag heeft zijn eigen functie, en het leren van de HTML-opmaaktaal gaat uiteindelijk over het leren van de tags en hun eigenschappen in een document.

  Ik zou willen opmerken dat het leren van HTML niet zo moeilijk is als het op het eerste gezicht lijkt. Het leren van de tags die worden gebruikt bij de opmaak van documenten is niet zo'n grote last voor de hersenen.

  Documentopmaak begint dus met een tag en eindigt met een afsluitende tag. Elke tag die andere tags of elementen bevat, moet worden afgesloten met een afsluitende tag. Bijvoorbeeld, , , enz.

  De tag is verplicht omdat deze de volledige structuur van het document bevat en een omhulsel is voor andere elementen.

  Label

  Vervolgens zien we de tag, die andere elementen bevat die ons nog niet duidelijk zijn. Bevat andere elementen - dit betekent dat de elementen of tags zich tussen de openings- en sluitingstags van het construct bevinden:

  inhoud of andere tags

  Het doel van de tag is om de meta-informatie van een HTML-document op te slaan, dat wil zeggen informatie die niet in het document zelf wordt weergegeven, maar die wel belangrijk is en grotendeels bepaalt hoe het document eruit zal zien en zich zal gedragen.
  Deze tag is vereist in het document.

  Tag - documenttitel Titel

  Titel is een vereiste tag die tekstuele meta-informatie bevat die in de browser- of tabbladtitel verschijnt. De tag moet in de . Ook wordt de inhoud van deze tag door zoekmachines gebruikt om het document in de zoekresultaten weer te geven.

  Metatag

  Metatag is een gespecialiseerde tag die is ontworpen om gestructureerde gegevens over een pagina te verstrekken. Metatags worden het meest gebruikt in de . Metatags zijn niet vereist in de structuur van een HTML-document.

  Favicon

  Voegt een bestand met een favicon-afbeelding toe aan het document. Favicon is een miniatuurpictogram dat naast de documenttitel op een browsertabblad wordt weergegeven. Een favicon is een grafisch bestand van 16 x 16 (of 32 x 32) pixels, dat verschillende formaten kan hebben, zoals png, jpg, ico, gif. Traditioneel wordt het ico-formaat gebruikt. Geanimeerde favicons zijn GIF-bestanden met animatie. U kunt bijvoorbeeld een geanimeerde favicon zien op VKontakte wanneer er een nieuw bericht binnenkomt.

  CSS-documentstijlen

  Bevat een CSS-bestand met HTML-stijl voor het document.

  CSS- trapsgewijs HTML-documentstijlen. Elke tag die zich in de tag bevindt, heeft een reeks eigenschappen, zoals kleur, breedte, hoogte en positie ten opzichte van andere elementen. Al deze eigenschappen zijn CSS-stijlen die naar een extern bestand kunnen worden geëxporteerd. Het ontwerp verbindt externe bestanden met het HTML-document, inclusief CSS-stijlen.

  Opmerking: De href-eigenschap van een constructie specificeert de locatie van het externe bestand. In ons voorbeeld is het bestand stijl.css En favicon.ico, bevinden zich in dezelfde map als het bestand index.html.

  Label

  heeft geen afsluitende tag.

  De tag bevat code of een link naar een JavaScript-bestand en wordt meestal binnen een tag gebruikt, hoewel de Page Speed ​​Optimization-tool van Google aanbeveelt deze tag aan het einde van een document te gebruiken, vóór de afsluitende tag. In ons voorbeeld is een extern bestand aangesloten script.js

  , dat zich in dezelfde map bevindt als het hoofdbestand index.html.

  Dus vrienden, we hebben gekeken naar de belangrijkste elementen die het vaakst in de tag worden gebruikt. Naast deze elementen zijn er nog een aantal andere die specifieker en optioneel zijn.

  Lichaam oftewel lichaam

  Dit is waar alle leuke en visueel tastbare dingen beginnen in de HTML-indeling van een document. index.html Laten we direct verder gaan met de lay-out van het zichtbare deel van de pagina. Alles wat we in de tag schrijven en opmaken, wordt in de browser weergegeven. Laten we ons bestand openen

  in de browser om duidelijk te zien wat we in de editor doen.

  De tag kan alle HTML-tags bevatten die nodig zijn om het document te ontwerpen en de functionaliteit (vorm) ervan te bieden. Ik zal een tabel geven met de meest gebruikte tags en ze allemaal kort beschrijven. U kunt de voorbeelden in de editor onmiddellijk uitvoeren.	Label
  	Beschrijving Een tag voor het maken van koppelingen in een document.
  ,	Voorbeeld: linktekst Het href attribuut specificeert het document waarnaar de link zal leiden. Maakt tekst cursief of vetgedrukt (benadrukt).
  , , , , ,	Documentkoppen. Er zijn in totaal 6 niveaus van kopjes, maar in de praktijk worden alleen h1 tot en met h4 gebruikt. Er mag slechts één kop in het document staan, gemarkeerd met de h1-tag, als de hoofdkop van het document. Voorbeelden: Kop van het eerste niveau Kop van het tweede niveau Kop van het derde niveau... enz.
  ,	Documentlijsten. Het is een genummerde lijst of een lijst met opsommingstekens. Het element van zo'n lijst is de tag Voorbeelden: Opsommingsteken 1 Opsommingsteken 2 Genummerd lijstitem 1 Genummerd lijstitem 2
  	Paragraaf. Deze tag definieert een alinea met tekst, gescheiden van andere alinea's. Het wordt ten zeerste aanbevolen om deze tag te sluiten. Voorbeeld: Het uiterlijk van HTML-opmaak wordt grotendeels bepaald door CSS-stijlen. Sommige webmasters kiezen er echter voor om in de beginfase van een project geen stijlen te gebruiken.
  	Afbeelding. Met deze tag kunt u een afbeelding in de HTML-opmaak invoegen. Zorg ervoor dat u alternatieve tekst voor alle afbeeldingen opneemt: het 'alt'-attribuut. Deze tag is zelfsluitend. Voorbeeld:
  + +	Formulieren en invoerelementen. Formulieren zijn ontworpen om informatie in het systeem op de server in te voeren. Een soort feedback tussen de gebruiker en de site. Formulieren worden bijvoorbeeld gebruikt wanneer u een bericht naar de server moet sturen. Bovendien kunnen formulieren andere functies vervullen, maar de hoofdtaak is het verzenden van gegevens naar de server. Een voorbeeld is een eenvoudig formulier voor het verzenden van een bericht, waarin de sitegebruiker zijn naam, e-mailadres en wat tekst opgeeft: Berichttekst
  	Definieert een subtekenreeks binnen een tekenreeks. Wordt gebruikt om een ​​deel van een lijn op te maken met behulp van CSS. Eén van de meest gebruikte tags. Zonder design manifesteert het zich op geen enkele manier in de browser. Voorbeeld: HTML leren levert in de meeste gevallen geen problemen op voor beginners.
  ,	Tags zijn ontworpen om video en audio in een document in te voegen. De afsluitende tag is vereist. Voorbeelden: De parameter 'controls' vertelt ons dat de pagina besturingselementen voor media-inhoud moet weergeven, net als bij een gewone audio-/videospeler.
  	Echt een koninklijk label. De meest gebruikte en populaire tag in HTML-paginaopmaak. Dit is een blokelement dat is ontworpen om blokken op de site te beheren. Het concept van een “prachtige” lay-out wordt vaak gebruikt - dit betekent dat alle blokken op de site zijn opgemaakt met behulp van deze tags. Kan andere tags bevatten. Voorbeeld: tekst in een genest blok Alle elementen zijn in de meeste gevallen opgemaakt met CSS-stijleigenschappen. De afsluitende tag is vereist.
  	Deze tag laadt een externe pagina in het document. Voorbeeld:

  We hebben niet met alle tags rekening gehouden, en dat is in dit stadium ook niet nodig. Het belangrijkste is om het basisidee van HTML te begrijpen, te leren hoe u de hierboven gepresenteerde tags kunt gebruiken en dan verder te gaan.

  Houd er rekening mee dat alle namen in de meegeleverde bestanden in Latijnse tekens moeten worden geschreven, zonder spaties.

  Doe bijvoorbeeld niet:

  Dit is nodig voor een grotere compatibiliteit van pagina-inhoud. Bovendien dicteren de standaarden voor het schrijven van HTML-code.

  Dus nu kennen we enkele basisprincipes van HTML: welke structuur een typisch HTML-document zou moeten hebben, we kennen enkele van de meest populaire tags, het is tijd om aan de slag te gaan met het lekkerste deel: cookies.

  Praktische opdracht over HTML-opmaak

  Als u het archief met voorbeelden nog niet heeft gedownload, doe dat dan. Je kunt bijvoorbeeld naar het voorbeeld.html-bestand kijken, dat ook in het archief stond.

• Pak het archief uit en maak een index.html-bestand in de map met de uitgepakte bestanden. Open het gemaakte bestand met behulp van de Sublime Text-teksteditor;
• Maak een initiële documentstructuur met een doctype, een tag die bevat en ga verder met het bewerken van de inhoud van de tag;
• Open het readme.txt-bestand en voltooi de juiste taken in het index.html-bestand dat u hebt gemaakt. Om het resultaat te controleren, opent u index.html in uw favoriete browser.

Dit is de afsluiting van de les over de basisprincipes van HTML. In de volgende les “CSS Basics” zullen we leren hoe we de stijlen van documentelementen kunnen beheren, trapsgewijze stijlbladen leren kennen, leren hoe we stijlklassen kunnen gebruiken en onze lay-out mooi en kleurrijk kunnen maken .

Tot ziens, vrienden!