Et sett med laboratorie- og praktiske oppgaver "HTML Language". CSS for nybegynnere: praktisk leksjon

Oppgaver om det grunnleggende i HTML er laget for å forsterke arbeidet med å skrive følgende emner: HTML-struktur, HTML-kommentarer, grunnleggende tagger, grunnleggende HTML-attributter. .

Oppgaver for bilder i HTML: sette inn et bilde i HTML (HTML-bildekode), HTML-størrelse bilder, bildejustering... i HTML.

Avanserte HTML- og CSS-oppgaver

HTML-oppgaver med Emmet. Rask layout, Emmet-kommandoer (det såkalte Emmet-juksearket). Etter å ha fullført oppgaver med Emmet-plugin, vil hastigheten på layout/utvikling øke betydelig. .

Oppgaver på CSS-velgere. CSS-velgere: css-klassevelgere, css-attributtvelgere, tilstøtende css-velgere, kontekstuelle css-velgere, underordnede velgere +i css, velgerprioritet. .

Hvordan CSS-posisjonering fungerer er viktig for å forstå komplekse oppsett. Her er oppgaver å forstå og jobbe med: posisjon absolutt , posisjonsrelativ , posisjonsfast og posisjonsstatisk , CSS-egenskaper øverst til venstre nederst til høyre . .

Skjemalayoutoppgaver

Lag et autentiseringsskjema på nettstedet, det samme som i Twitter Bootstrap (uten å bruke dette rammeverket). For eksempel, som i .

Lag et ekspeditørskjema på nettsiden

Koble til jQuery-plugin for å velge dato/måned fra feltet

Opprett en avmerkingsboks som ligner på et sosialt nettverk.

Opprett et registreringsskjema for besøkende på nettstedet

Lag et skjema som ligner på det som sorterer produkter i Yandex.Market

En av oppgavene til en layoutdesigner er å skrive kode på tvers av nettlesere. Kode som får sidene til å se ut det største antallet nettlesere er like eller så like som mulig. .

Moderne CSS-funksjoner lar deg lage fantastiske og jobbe med bakgrunnen ved å fargelegge den gradientfylling. Et lite sett med oppgaver for CSS-animasjon.

Oppgaver for mediespørringer (mobilnettsteder). Opprettelse mobilversjon nettstedutvikling er en viktig del av webutviklerferdighetene. Oppgavene er viet til følgende emner: å lage et mobilnettsted, sjekke mobilversjonen av nettstedet. .

Oppgaver på psd layout layout og CSS rammer. Layout av et nettsted basert på en PSD-layout er den viktigste delen av en webdesigners arbeid. I HTML-leksjoner ser vi på de grunnleggende trinnene for layout fra PSD til HTML. Oppgaver .

1.1. Opprett på lokal server Xampp i htdocs-mappen er det en testmappetest, i den er det css-, bilder- og sidemapper, samt en tom hovedside index.html for testsiden vår. Deretter, i pages-mappen, oppretter du en tom nettside, page_1.html, og i css-mappen, to tomme css-filer: styles_1.css og styles_2.css. Ikke slett testmappen i fremtiden, vi vil utføre alle øvelsene i den. I html-dokumenter, ikke glem å spesifisere utf-8-kodingen og sidetittelen "tittel". Til rask tilgang Til hjemmeside, lag et bokmerke for det i nettleseren din. Adressebanen til siden skal se ut som http://localhost/test/index.html. Vis løsning.

Løsning på problem nr. 1.1

1.2. Gjenskap koden for nettsiden vist i figuren. Bruk det interne stilarket, p- og span-elementvelgerne, css-egenskaper for farge og bredde. Sett avsnittsbredden til 300 piksler. Bruk røde og blå farger. Vis løsning.

Tilstand for oppgave nr. 1.2

CSS-oppgaver p( farge: rød; bredde: 300px; ) span( farge: blå)

Løsning på problem nr. 1.2

1.3. Bruk tilstanden til den andre oppgaven, men plasser stilarket i en ekstern fil styles_1.css . For å koble til et eksternt stilark, bruk "link"-tjenesteelementet. Vis løsning.

CSS oppgaver

Avsnittsteksten skal være i rødt. Men nei, fordi... Innholdet i "span"-elementet skal være blått.

Løsning på problem nr. 1.3

1.4. Bruk betingelsen for den tredje oppgaven, men koble til det eksterne stilarket ved å bruke @import-egenskapen, og plasser regelen i "stil"-tjenesteelementet. Vis løsning.

CSS-oppgaver /* Du kan bruke forskjellige regeloppføringer */ /* @import "http://localhost/test/css/styles_1.css"; */ @import url("http://localhost/test/css/styles_1.css");

Avsnittsteksten skal være i rødt. Men nei, fordi... Innholdet i "span"-elementet skal være blått.

Løsning på problem nr. 1.4

1.5. Bruk betingelsen for det andre problemet, men plasser avsnittsregelen i den eksterne filstilen_1.css og regelen for "span"-elementet i den eksterne filstilen_2.css . Koble til en av disse filene ved å bruke "link"-tjenesteelementet, og den andre ved å bruke @import-egenskapen, og plasser regelen i "style"-tjenesteelementet. I alle fire oppgavene skal resultatet være det samme! Vis løsning.

CSS-oppgaver @import url("http://localhost/test/css/styles_1.css");

Avsnittsteksten skal være i rødt. Men nei, fordi... Innholdet i "span"-elementet skal være blått.

Løsning på problem nr. 1.5

1.6. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Bruk ID-, klasse- og attributtvelgere. Vis løsning.

CSS oppgaver

Blått "spenn".
Grønt "span".

Sidekode for oppgave nr. 1.6

Nødvendig sideutseende i oppgave nr. 1.6

#p_1( farge: rød; bredde: 300px; ) .s_1( farge: blå; ) span( farge: grønn; )

Løsning på problem nr. 1.6

1.7. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Det er kun tillatt å bruke kontekstuelle, underordnede og tilstøtende velgere i CSS-regler. Vis løsning.

CSS utfordrer Orange "em"

Den første røde linjen i avsnittet.
Blått "spenn".

Sidekode for oppgave nr. 1.7

Nødvendig sideutseende i oppgave nr. 1.7

Løsning på problem nr. 1.7

1.8. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Bruk pseudoklasse- og pseudoelementvelgere :hover , :visited , ::first-letter . For et avsnitt, bruk en vanlig elementvelger. Vis løsning.

CSS-utfordringer Når du holder musepekeren over meg, blir jeg oransje.

Den første røde linjen i avsnittet.
Jeg har allerede fått besøk.

Sidekode for oppgave nr. 1.8

Nødvendig sideutseende i oppgave nr. 1.8

P( farge: rød; bredde: 300px; ) em:hover( farge: oransje; ) p::first-letter( farge: blå; ) a:besøkt( farge: grønn; )

Løsning på problem nr. 1.8

1.9. Hvilken velger har mer spesifisitet: p em(...) eller p.class(...), #m_d(...) eller em.m_cl(...), div p#my_id span(... ) eller div span#s_id(...), div>div.my_class p.red_color span:hover(...) eller div p+div p.green_color span(...). Vis løsning.

Vi bestemmer spesifikasjoner og sammenligner. p em(...) em.m_cl(...), fordi (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), fordi (0,4,4)>(0,2,5).

Løsning på problem nr. 1.9

§2. CSS-egenskaper for tekst, font, lister, tabeller og skjemaer

2.1. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Sett bredden (bredden) på avsnitt til 500 piksler, bakgrunn (bakgrunnsfarge) henholdsvis gul og lilla (fiolett), avstand mellom ord, henholdsvis 3 piksler og 12 piksler, avstand mellom individuelle bokstaver - 1 piksler og 2 piksler, linjehøyde - 1,1 em og 1,6 em , første linjeinnrykk - 1 % og 3 % . I andre ledd skal teksten justeres til høyre. Ikke glem å krysse ut (understreke) de aktuelle linjene. Sammenlign formateringsresultatene for begge avsnittene. Vis løsning.

CSS oppgaver

Første setning i avsnittet.

Første setning i avsnittet. Den andre lengre setningen i avsnittet. Tredje og siste setning i avsnittet.

Sidekode for oppgave nr. 2.1

Nødvendig sideutseende i oppgave nr. 2.1

P_1( bredde: 500px; bakgrunnsfarge: gul; ordavstand: 3px; bokstavavstand: 1px; linjehøyde: 1.1em; tekstinnrykk: 1%; ) #p_2( tekstdekorasjon: gjennomstreking ) .p_3( bredde: 500px; bakgrunnsfarge: fiolett; ordavstand: 12px; bokstavavstand: 2px; linjehøyde: 1,6em; tekstinnrykk: 3 %; tekstjustering: høyre; ) #p_4( tekst -dekorasjon: understreking;)

Løsning på problem nr. 2.1

2.2. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Sett bredden (bredden) på avsnitt til 500 px, henholdsvis bakgrunn (bakgrunnsfarge) satt til gul og lilla (fiolett). For det første avsnittet, bruk fonten Arial, og for det andre - Times New Roman. Sett skriftstørrelsen i begge avsnitt til 1em. Bruk egenskapene for fontvariant , font-weight , font-stil der det er nødvendig. Sammenlign resultatet av formatering av teksten med resultatet av formatering i oppgave 2.1. Vis løsning.

CSS oppgaver

Første setning i avsnittet. Den andre lengre setningen i avsnittet. Tredje og siste setning i avsnittet.

Sidekode for oppgave nr. 2.2

Nødvendig sideutseende i oppgave nr. 2.2

P_1( width: 500px; bakgrunnsfarge: gul; font-family: arial; font-size: 1em; ) #p_2( font-variant: small-caps; ) .p_3( width: 500px; bakgrunnsfarge: fiolett; font-family: "times new novel"; font-size: 1em; font-weight: bold; ) #p_4( font-style: italic; )

Løsning på problem nr. 2.2

2.3. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Sett bredden (bredden) på listene til 500px, henholdsvis bakgrunn (bakgrunnsfarge) satt til gul og lilla (fiolett). Bruk egenskapene listestil-type og listestil-posisjon der det er nødvendig. Sammenlign formateringsresultatene for begge listene. Vis løsning.

CSS oppgaver

Vi bruker desimalmarkørtypen.

Vi plasserer markører utenfor listen.

Vi bruker typen firkantet markør.

Sidekode for oppgave nr. 2.3

Nødvendig sideutseende i oppgave nr. 2.3

List_1 ( width: 500px; bakgrunnsfarge: gul; liste-stil-type: desimal; liste-stil-posisjon: utenfor; ) .list_2( width: 500px; bakgrunnsfarge: fiolett; liste-stil-type: kvadrat; liste-stil-posisjon: inne;)

Løsning på problem nr. 2.3

2.4. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Bruk egenskapene bildetekst-side , kantlinje-skjul kantlinjeavstand , tomme celler . Sammenlign resultatet av formatering av begge tabellene. Vis løsning.

CSS oppgaver

Tabell nr. 1

Celle 1.1	Celle 1.2
Celle 2.1	Celle 2.2

Tabell nr. 2

Celle 1.1	Celle 1.2
	Celle 2.2

Sidekode for oppgave nr. 2.4

Nødvendig sideutseende i oppgave nr. 2.4

Table_1( caption-side: top; border-collapse: collapse; ) .table_2( caption-side: bottom; border-collapse: separate; border-spacing: 5px; tomme celler: skjul; )

Løsning på problem nr. 2.4

§3. Stille inn størrelser, kanter, polstringer og marger på elementer

3.1. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Sett bredden på det første avsnittet til 400px, det andre til 300px. Sett høyden på det første avsnittet til 10vh, det andre til 200px. I andre ledd setter du minimumsbreddegrensen til 400px og maksimumshøydegrensen til 100px. Bruk egenskapene width , height , min-width , max-height . Legg merke til sluttresultatene av bredden og størrelsen på andre ledd på grunn av begrensningene som brukes. Vis løsning.

CSS oppgaver

Avsnittsbredden er 400 piksler, høyden er 10 % av høyden på nettleservinduets visningsområde.

Avsnittsbredden vil være 400px, fordi... bredden er mindre enn min-bredden, og høyden er 100 px, fordi høyden overskrider maks-høyden.

Sidekode for oppgave nr. 3.1

Nødvendig sideutseende i oppgave nr. 3.1

P_1( bakgrunnsfarge: gul; bredde: 400 piksler; høyde: 10 vh; ) .p_2( bakgrunnsfarge: fiolett; min bredde: 400 piksler; maks. høyde: 100 piksler; bredde: 300 piksler; høyde: 200 piksler; )

Løsning på problem nr. 3.1

3.2. I tilstanden til oppgave 3.1 presenteres koden til HTML-siden, og nedenfor er utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Bruk resultatet av oppgave 3.1 ved å legge til i stilarket tilleggsegenskaper, som setter de aktuelle avsnittsgrensene: border , border-top , border-bottom . Sett bredden på alle kantlinjer til 4px. Vis løsning.

Nødvendig sideutseende i oppgave nr. 3.2

P_1( bakgrunnsfarge: gul; bredde: 400px; høyde: 10vh; kantlinje: helrød 4px; kant-top: prikket blå; kant-bunn: stiplet blå; ) .p_2( bakgrunnsfarge: fiolett; min-bredde: 400px; maks-høyde: 100px; bredde: 300px; høyde: 200px; kantlinje: solid grønn 4px; )

Løsning på problem nr. 3.2

3.3. I tilstanden til oppgave 3.1 presenteres koden til HTML-siden, og nedenfor er utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Dra nytte av resultatene av oppgavene 3.1 og 3.2 ved å legge til tilleggsegenskaper til stilarket som setter avrundingen av de tilsvarende hjørnene i første avsnitt og ytterkantene til andre avsnitt: border-radius , border-bottom-right-radius , border-bottom-venstre-radius , disposisjon , disposisjon- offset. Sett kantavrundingen til 1 em og de nederste hjørnene til 2 em. Sett avstanden mellom indre og ytre kant til 2px. Sett den ytre kantbredden til 4px. Vis løsning.

Nødvendig sideutseende i oppgave nr. 3.3

P_1( bakgrunnsfarge: gul; bredde: 400px; høyde: 10vh; kantlinje: solid rød 4px; kant-topp: stiplet blå; kant-bunn: stiplet blå; kantradius: 1em; kantlinje-nederst-høyre-radius: 2em; border-bottom-venstre-radius: 2em; ) .p_2( bakgrunnsfarge: fiolett; min-bredde: 400px; maks-høyde: 100px; bredde: 300px; høyde: 200px; kant: solid grønn 4px; disposisjon: helblå 4px; konturforskyvning: 2px;)

Løsning på problem nr. 3.3

3.4. I tilstanden til oppgave 3.1 presenteres koden til HTML-siden, og nedenfor er utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Dra nytte av resultatene av oppgavene 3.1, 3.2 og 3.3 ved å legge til tilleggsegenskaper til stilarket som setter de interne og eksterne innrykk av avsnitt: utfylling, utfylling-venstre, marg, marg-topp. Sett utfyllingen i begge avsnitt til 0,5 em, og redefiner deretter utfyllingen til 0,8 em. Sett margen til 30px, men i andre avsnitt margin på toppen overstyre til 50px. Sammenlign resultatene av alle fire oppgavene. Vis løsning.

Nødvendig sideutseende i oppgave nr. 3.4

P_1( bakgrunnsfarge: gul; bredde: 400px; høyde: 10vh; kantlinje: solid rød 4px; kant-topp: stiplet blå; kant-bunn: stiplet blå; kantradius: 1em; kantlinje-nederst-høyre-radius: 2em; border-bottom-venstre-radius: 2em; polstring: 0,5em; polstring-venstre: 0,8em; margin: 30px; ) .p_2( bakgrunnsfarge: fiolett; minimumsbredde: 400px; maks-høyde: 100px; bredde: 300px; høyde: 200px; kantlinje: solid grønn 4px; kontur: helblå 4px; konturforskyvning: 2px; polstring: 0,5em; polstring-venstre: 0,8em; marg: 30px; margin-top: 60px;)

Løsning på problem nr. 3.4

§4. Stille inn farge og bakgrunn ved hjelp av animasjon

4.1. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Kopier bildet av kofferten til bildemappen, som ligger i testmappen vi opprettet tidligere på den lokale serveren (hvis du slettet den, se deretter på tilstanden til oppgave nr. 1.1 i begynnelsen av problemboken og lag alt igjen). Teksten i første avsnitt skal være rød, bakgrunnen skal være gul og avsnittsbredden skal være 300 piksler. Bredden på andre avsnitt skal være 300px, sett bakgrunnen til lilla. Legg også til bakgrunnsbilde, som ikke skal gjentas, skal dimensjonene være 20 % av bredden og 40 % av høyden på avsnittet, startposisjonen skal bestemmes av koordinatene x =15px og y =15px . Velg bare innholdsområdet i avsnittet for bakgrunnen. Vis løsning.

CSS oppgaver

Teksten i dette avsnittet skal være rød og bakgrunnen gul. Avsnittsbredden skal være 300 piksler.

Avsnittsbredden skal være 300 px, bakgrunnen skal være lilla. Bildet skal ikke gjentas, dimensjonene skal være 20 % av bredden og 40 % av avsnittets høyde. Startposisjonen bør bestemmes av koordinatene x=15px og y=15px. Velg bare innholdsområdet i avsnittet for bakgrunnen.

Sidekode for oppgave nr. 4.1

Nødvendig sideutseende i oppgave nr. 4.1

Bakgrunn_1( farge: rød; bakgrunnsfarge: gul; ) .bakgrunn_2( bakgrunnsfarge: fiolett; bakgrunnsbilde: url("http://localhost/test/images/cabinet.png"); bakgrunns-repeat: nei -repeat; bakgrunnsposisjon: 15px 15px; bakgrunnsstørrelse: 20% 40%; bakgrunnsklipp: innholdsboks; ) .border_1( polstring: 15px; bredde: 300px; kantlinje: solid 2px grønn; )

Løsning på problem nr. 4.1

4.2. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. Teksten i første avsnitt skal være svart, og bakgrunnen skal være en lineær gradient fra rød til hvit. Avsnittsbredden skal være 300 piksler og høyden 150 piksler. Bredden på andre ledd skal være 300 piksler og høyden 150 piksler. Bakgrunnen skal være en radiell gradient fra grønn til hvit. Gradientellipsen skal ha radier på 250px og 280px, og senteret skal være plassert i punktet med koordinatene x =100px og y =180px. Vis løsning.

CSS oppgaver

Teksten i dette avsnittet skal være svart, og bakgrunnen skal være en lineær gradient fra rød til hvit. Avsnittsbredden skal være 300 piksler og høyden 150 piksler.

Avsnittsbredden skal være 300 piksler og høyden 150 piksler. Bakgrunnen skal være en radiell gradient fra grønn til hvit. Gradientellipsen skal ha radier på 250px og 280px, og senteret skal være plassert på punktet med koordinatene x=100px og y=180px.

Sidekode for oppgave nr. 4.2

Nødvendig sideutseende i oppgave nr. 4.2

Background_1( color: black; background-image: linear-gradient(90deg, #ff0000, #ffffff); ) .background_2( background: radial-gradient(250px 280px at 100px 180px, #00ff00, #ffffff); ) .border_1 polstring: 15px; bredde: 300px; høyde: 150px; kantlinje: solid 3px blå; )

Løsning på problem nr. 4.2

4.3. Nedenfor er koden for html-siden, samt koden for det eksterne stilarket styles_1.css. Skriv dem inn i Notepad++ og eksperimenter ved å endre verdiene til animasjonsegenskapene.

CSS oppgaver

HTML-sidekode for oppgave nr. 4.3

Bakgrunn_1( padding: 0px; bredde: 450px; høyde: 100px; kantlinje: solid 3px rød; animasjonsnavn: eksempel_1; animasjonsforsinkelse: 1s; animasjonsvarighet: 4s; animasjon-iterasjon-antall: uendelig; animasjonsretning: reverse; animasjon-timing-funksjon: ease-in; animation-fill-modus: bakover; ) @keyframes eksempel_1( 0%( bakgrunn: #ff0000; høyde: 0px; ) 100% ( bakgrunn: #0000ff; høyde: 200px; ) )

Ekstern stilarkkode for oppgave nr. 4.3

4.4. Nedenfor er koden for html-siden, samt koden for det eksterne stilarket styles_2.css. Skriv dem inn i Notepad++ og eksperimenter ved å endre verdiene til transittegenskapene.

Lage overgangseffekter

HTML-sidekode for oppgave nr. 4.4

Bakgrunn_1( polstring: 10px; bredde: 100px; høyde: 100px; kantlinje: hel 3px blå; bakgrunnsfarge: #ff0000; overgangsegenskap: bredde, bakgrunnsfarge; overgangsforsinkelse: 0,2 s; overgangsvarighet: 2 s; overgang-timing-funksjon: lett inn; ) p:hover( markør: peker; bakgrunnsfarge: #0000ff; bredde: 450px; )

Ekstern stilarkkode for oppgave nr. 4.4

§5. Vise elementer i et dokument

5.1. Nedenfor er koden for html-siden, samt koden for det eksterne stilarket styles_2.css. Skriv dem inn i Notepad++. Legg merke til hvordan avsnittene oppfører seg når du ruller på siden, og hvordan "span"-elementets utseende endres når du holder musepekeren over det, og som et resultat endres verdien av visningsegenskapen som brukes på det.

CSS oppgaver

Skifter skjerm

posisjon: fast;

posisjon: absolutt;

HTML-sidekode for oppgave nr. 5.1

Div_0( polstring: 10px; bredde: 200px; høyde: 200px; kantlinje: solid 3px oransje; ) span:hover( markør: peker; display: blokk; ) .div_1( polstring: 10px; bredde: 200px; høyde: 600px; kantlinje : solid 3px oransje; bakgrunn: lineær gradient(180deg, #0000ff, #ffffff); posisjon: fast; topp: 250px; ) .div_2( polstring: 10px; bredde: 200px; høyde: 100px; kantlinje: solid 3px rød; bakgrunn: lineær gradient(90deg, #0000ff, #ffffff); posisjon: absolutt; topp: 1100px; venstre: 0px; )

Ekstern stilarkkode for oppgave nr. 5.1

5.2. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. De nødvendige egenskapene til elementene er angitt i selve tegningene. Vis løsning.

CSS-oppgaver For hoved-div er det satt fast posisjonering, toppoffset er 30px, venstre offset er 35px, div-bredde er 300px, div-høyde er 400px, intern polstring er 15px.

div_2 For den andre div, er bredden 70px, høyde er 50px, gradient (35px 35px ved 10px 10px, #00ffff, #ffffff), polstring er 5px, kantbredde er 2px. Flyter til venstre.

div_3 For den tredje div, er bredden 70px, høyde er 50px, gradient (45deg, #0000ff, #ffffff), polstring er 5px, kantbredde er 2px. Flyter til høyre. Når du holder markøren over, endrer den sin gjennomsiktighet til 0,3.

Sidekode for oppgave nr. 5.2

Nødvendig sideutseende i oppgave nr. 5.2

Div_1( polstring: 15px; bredde: 300px; høyde: 400px; kantlinje: stiplet 5px #00ff00; posisjon: fast; topp: 30px; venstre: 35px; ) .div_3:hover( markør: peker; opasitet: 0.div_2 ; ( polstring: 5px; bredde: 70px; høyde: 50px; kant: solid 2px oransje; bakgrunn: radial-gradient(35px 35px ved 10px 10px, #00ffff, #ffffff); flyte: venstre; ) .div_3( padding: 5px; bredde: 70px; høyde: 50px; kantlinje: stiplet 2px rød; bakgrunn: lineær gradient(45deg, #0000ff, #ffffff); flyte: høyre; )

Løsning på problem nr. 5.2

5.3. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. De nødvendige egenskapene til elementene er angitt i selve tegningene. Vis løsning.

CSS-oppgaver For hoved-div er absolutt posisjonering satt, toppoffset er 30px, venstre offset er 35px, div-bredde er 500px, div-høyde er 200px, intern polstring er 15px.

For den andre div er bredden 200px, høyde er 100px, polstring er 5px, kantbredde er 2px. Flyter til venstre overløp: rull For den tredje div er bredden 200px, høyden er 100px, polstringen er 5px, kantbredden er 2px. Flyter til høyre. overløp: auto

Sidekode for oppgave nr. 5.3

Nødvendig sideutseende i oppgave nr. 5.3

Div_1( polstring: 10px; bredde: 500px; høyde: 200px; kantlinje: stiplet 5px #0000ff; bakgrunnsfarge: gul; posisjon: absolutt; topp: 30px; venstre: 35px; ) .div_2( polstring: 5px; 0px: ; høyde: 100px; kantlinje: solid 2px blå; flyte: venstre; overløp: rull; ) .div_3( polstring: 5px; bredde: 200px; høyde: 100px; kantlinje: prikkete 2px blå; flyte: høyre; overløp: auto; )

Løsning på problem nr. 5.3

§6. @-regler. Setter inn innhold. Skriv ut dokumentet.

6.1. Nedenfor er koden til html-siden, samt utseendet til siden når den vises av en nettleser. Et eksternt stilark er koblet til siden, hvis kode må gjenopprettes. For å lage tellere for dokumentteksten og h2-elementet, bruk counter-reset-egenskapen, og for å sette inn tellerverdier ved å bruke innholds- og counter-increment-egenskapene. Vis løsning.

CSS-utfordringer Introduksjon til HTML Hva er HTML? Nettleservisning av et nettdokument. Konseptet med en HTML-tag og dens syntaks.
Tekstformatering Blokk- og innebygde elementer. Dele opp tekst i avsnitt. Bruker overskrifter.

Sidekode for oppgave nr. 6.1

Nødvendig sideutseende i oppgave nr. 6.1

Body( counter-reset: parag_1; /* Opprett en teller for brødteksten i dokumentet */ ) h2( counter-reset: parag_2; /* Opprett en teller for overskriften "h2" */ ) /* Tell alle "h2 " i "body"-elementet */ /* Sett inn innhold før hver "h2": line+current counter value+line */ h2:before( counter-increment: parag_1 1; content: "§" counter(parag_1) ". "; ) /* Tell i element "h2" alle "h3" */ /* Sett inn innhold før hver "h3": gjeldende tellerverdi parag_1+linje+strømtellerverdi parag_2+linje */ h3:before( counter-increment: parag_2 1; innhold: teller( parag_1) "." teller(parag_2) "."; )

Løsning på problem nr. 6.1

§7. Praktisk layout nettstedselementer i HTML og CSS

7.1.1 Last ned opplæringskoden for det adaptive siderammeverket, bruk kommentarene til å studere det, og design det selv.

7.1.2 Last ned opplæringskoden for det adaptive siderammeverket, studer det ved å bruke kommentarene, og design det selv. Sammenlign med det første alternativet.

7.1.3 Last ned opplæringskoden for det adaptive siderammeverket, studer det ved å bruke kommentarene, og design det selv. Sammenlign med tidligere alternativer.

7.2.1 V pedagogisk kode, som kan lastes ned, viser hvordan du oppretter en sidenavigering for en side å rulle opp eller ned. Det er ingen kommentarer, men det er ikke mye kode, så det vil ikke være så vanskelig å forstå det. Studer eksemplet og gjør det til ditt eget.

7.2.2 Bruk koden fra forrige eksempel, lag en "Tilbake til toppen"-knapp nederst på siden. Fjern sidenavigering. Hvis du ikke klarte å fullføre oppgaven, se på løsningen og skriv inn koden selv.

7.2.3 Den nedlastbare opplæringen viser hvordan du oppretter en "Tilbake til toppen"-knapp på siden av nettstedet som vises etter å ha rullet siden med et spesifisert antall, for eksempel piksler. Det er få kommentarer, men det er ikke mye kode, så det vil ikke være vanskelig å forstå det. Studer eksemplet og gjør det til ditt eget.

7.3.1 Opprett horisontal meny vist i figuren. Bruk en liste for å gjøre dette, og plasser lenker i listeelementer. For å få elementer til å vises som en linje, konverter dem til innebygde elementer. Når du holder musen over menyelementer, bør de endre farge til svart. Du kan laste ned løsningen. Konverter menyen til vertikal. For å fjerne varenumre, bruk den tilsvarende egenskapen for listemarkører (se CSS-referansen).

Nødvendig utseende av oppgavemeny nr. 7.3.1

7.3.2 Studer følgende rullegardinmenykode og skriv den inn selv.

7.3.3 Studer følgende vertikale rullegardinkode flernivåmeny, og skriv det selv.

7.3.4 Studer følgende kode for en horisontal jevn rullegardinmeny, og skriv den deretter inn selv.

Lage utdanningsnettsted nr. 1

7.4.1 Se først gjennom sidene på utdanningsnettstedet, last ned og studer koden nøye, og utform deretter nettstedet selv (ingen kommentarer, bare kode).

Layout av utdanningsnettsted nr. 2

7.5.1 For ytterligere øvelse i nettstedoppsett, en til casestudie nettstedet, last det ned og bruk kommentarene til å studere koden, og bruk deretter en ferdig layout og grafiske maler for å designe nettstedet selv.
Prøv å lage et stilark for høye oppløsninger selv. Hvis du jobber på en bærbar datamaskin, kan du for å simulere høyere oppløsninger endre oppløsningene i mediespørringer fra for eksempel 1366px til 1266px, slik at stilarket for store skjermoppløsninger fungerer. Når du lager et stilark, bruk en størrelsesfaktor på 1,3. Og så se på visningsresultatet i nettleseren og juster.
Bildestørrelser kan endres enten i et grafikkredigeringsprogram eller strekkes ved hjelp av den aktuelle CSS-egenskapen (se eksempel og referanse).

Kun for abonnenter

Reg.ru: domener og hosting

Den største registratoren og vertsleverandøren i Russland.

Mer enn 2 millioner domenenavn i tjeneste.

Markedsføring, domenepost, forretningsløsninger.

Mer enn 700 tusen kunder over hele verden har allerede tatt sitt valg.

* Hold musen over for å pause rullingen.

Tilbake fremover

30 god praksis i CSS for nybegynnere

CSS er et språk som brukes på et tidspunkt av nesten alle utviklere. Selv om vi noen ganger tar det for gitt, er det likevel et kraftig verktøy og har mange nyanserte bruksområder for å hjelpe med utvikling. kvalitetsdesign(eller komplisere denne prosessen). Nedenfor er 30 gode anbefalinger som vil hjelpe deg å skrive korrekt og leselig kode, og unngå mange vanlige feil.

1. Gjør det lett å lese

Enkel lesbarhet av CSS-filen din er veldig viktig, selv om mange mennesker undervurderer dette punktet. God lesbarhet lar deg forenkle arbeidet ditt med det i fremtiden, med støtte fra nettstedet, siden du vil finne elementene du trenger mange ganger raskere. Husk også at filen din kanskje må gjennomgås og korrigeres av noen andre.

Notatet
Når du skriver CSS-filer, faller de fleste utviklere inn i to grupper, to ytterpunkter.

Gruppe 1: Alt på én linje

SomeDiv ( bakgrunn: rød; polstring: 2em; kantlinje: 1px helt svart; )

Gruppe 2: Hver stil har en egen linje

SomeDiv ( bakgrunn: rød; polstring: 2em; kantlinje: 1px helt svart; )

Faktisk er begge praksisene ganske gode, selv om uenighet mellom representanter for disse gruppene ikke er uvanlig! Bare husk - du må velge alternativet du liker å se på. Det er alt.
Notatet

2. Gjør den hel

I tillegg til å gjøre koden mer lesbar, gjør den mer konsistent. Du bør begynne å utvikle ditt eget CSS "underspråk" som lar deg følge en bestemt navnestil. Det er et visst antall klasser jeg oppretter nesten alltid, og jeg gir dem de samme navnene hver gang. For eksempel bruker jeg .caption-right for å justere bildene til høyre.

Tenk på om du skal bruke bindestreker og understreker i klassenavn og ID-er, og i hvilke tilfeller du ville gjort det. Når du begynner å lage dine egne CSS-standarder, blir du mye nærmere å være en CSS-profesjonell.

3. Start med et rammeverk

Mange tenker at man ikke skal bruke CSS-rammeverk, men jeg tenker at hvis noen tok seg tid og laget et program som kan få fart på utviklingsprosessen, hvorfor finne opp hjulet på nytt? Jeg vet at rammer ikke bør brukes overalt, men i mange tilfeller er bruken ganske berettiget.

Mange designere lager sine egne rammer mens de jobber, og dette er også en god idé å holde koden konsistent og konsistent på tvers av prosjekter.

Notatet
Jeg er ikke enig. CSS-rammeverk er en uunnværlig ting, men bare for noen få, for de som vet hvordan de skal brukes godt.

"Det er mindre et spørsmål om å finne opp hjulet på nytt og mer et spørsmål om å forstå hvordan det fungerer."

Hvis du akkurat har begynt å forstå Cascading Style Sheets, vil jeg anbefale at du holder deg unna ulike rammer i minst ett år. Ellers vil du rett og slett forvirre deg selv. Lær CSS først, og optimaliser deretter arbeidet ditt med dette språket.
Notatet

4. Bruk nullstilling

De fleste CSS-rammeverk har en innebygd stil-nullifier, men hvis du ikke har tenkt å bruke den, kan du ty til andre nullifiers. Tilbakestilling av stiler lar deg unngå mange problemer med ujevn visning i forskjellige nettlesere, sette klare parametere for skriftstørrelser, overskrifter, eksterne og interne marger, etc. Denne "nullstillingen" lar deg oppnå samme visning i alle nettlesere.

Her er lenker til noen av de mest populære tilbakestillingene: MeyerWeb, Yahoos utviklertilbakestilling. Alternativt kan du komme opp med din egen "nullifier", med følgende som grunnlag.

5. Strukturer stilfilene dine fra topp til bunn

Det er alltid fornuftig å strukturere CSS-filen din slik at du raskt kan finne kodebiten du trenger. Jeg anbefaler å bruke en ovenfra-ned-tilnærming, som er å bygge stilarket i den rekkefølgen stilene brukes på siden. For eksempel:

1. Generelle klasser (kropp, a, p, h1 osv.) 2. #header 3. #nav-meny 4. #main-content

Ikke glem å legge til kommentarer til hver seksjon!

/******* hovedinnhold *********/ stiler gå her... /***** bunntekst *********/ stiler gå her...

6. Gruppeelementer

Ofte kan elementer ha overlappende, vanlige stiler. I stedet for å omskrive eksisterende kode, er det bedre å bare gruppere elementer. For eksempel overskriftene dine h1, h2 Og h3 kan ha samme skrifttype og farge:

H1, h2, h3 (font-familie: tahoma, farge: #333)

7. Lag HTML Markup først

Mange utviklere lager CSS-filen parallelt med å lage HTML-markeringen. Dette virker logisk, men du kan fortsatt spare mye tid hvis du forstår HTML først og stiler dernest. Denne tilnærmingen lar deg tenke på siden som helhet, tenke på hvor du skal bruke hvilke stiler, og ende opp med en mer sammenhengende stilfil ovenfra og ned.

8. Bruk flere klasser på et element om nødvendig

Noen ganger er det bedre å bruke flere klasser på et element samtidig. La oss si at du har en beholder div til hvem du vil spørre flyte: høyre, og du har allerede en klasse .Ikke sant i stilfilen din, som justerer alt riktig. Du kan ganske enkelt legge til en annen klasse til beholderen din div:

Du kan legge til så mange klasser du trenger, og skille dem med mellomrom.

Notatet
Vær veldig forsiktig når du bruker navn som venstre Og Ikke sant. Tenk deg at du plutselig må justere en beholder til venstre. I dette tilfellet må du gå tilbake til HTML-koden og endre klassenavnet - alt for å endre det visuelle utseendet på siden. Dette er usemantisk. Husk: HTML er for markering, CSS er for visuell presentasjon.

Hvis du trenger HTML-redigeringer for å endre layouten på siden, gjør du noe galt!

9. Bruk riktig Doctype-tag

Elementer som tilhører begge typer inkluderer:

Span, a, strong, em, img, br, input, abbr, akronym

Blokkelementer inkluderer:

Div, h1...h6, p, ul, li, tabell, blokksitat, pre, form

13. Ordne egenskaper alfabetisk

Å bruke et slikt system for å ordne eiendommer vil tillate deg å spare mye tid når du søker etter ønsket eiendom.

#cotton-candy ( farge: #fff; flyte: venstre; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; )

Notatet
Eh.., ofre hastigheten for litt forbedret lesbarhet.. Se selv..
Notatet

14. Bruk CSS-kompressorer

CSS-kompressorer hjelper deg å redusere størrelsen på stilarkfilen betydelig ved å fjerne unødvendige linjeskift og kombinere elementer. Alt dette lar nettstedet ditt lastes raskere. CSS Optimizer og CSS Compressor er to flotte nettjenester for å utføre slike oppgaver.

Sammen med å redusere filstørrelsen får du naturligvis en betydelig forringelse av lesbarheten, så bruk slike tjenester når du ikke lenger forventer å gjøre endringer i stilene.

15. Bruk generiske klasser

Du vil snart legge merke til at det er stiler du bruker om og om igjen. I stedet for å legge til denne stilen til hver ID, kan du opprette generiske klasser og legge dem til ID-ene til andre CSS-klasser (se anbefaling #8 i denne artikkelen).

Jeg la for eksempel merke til at jeg bruker flyte: høyre Og flyte: venstre igjen og igjen i mine design. Jeg legger bare til klasser .venstre Og .Ikke sant til stilfilen min og bruk den på elementene.

Venstre (flyt:venstre) .høyre (flyt:høyre) ...

Slik slipper du å skrive hele tiden flyte: venstre for alle elementer som denne egenskapen skal brukes på.

16. Bruk "Margin: 0 auto" for å sentrere motivet

Mange nye til CSS forstår ikke hvorfor de ikke bare kan bruke flyte: senter for å oppnå en sentreringseffekt for blokkelementer. Hadde det bare vært så enkelt! Dessverre må du gjøre det slik:

Margin: 0 auto; /* 0 - for topp og bunn; auto - for venstre og høyre */

17. Ikke legg alt i en DIV

Det er ofte fristende å gjøre noe som:

Titteltekst

Dette kan virke som en ganske god løsning, men det vil begynne å rote stilfilen din. Gjør det i stedet enkelt:

Overskriftstekst

Og allerede for taggen h1 du kan angi hvilket som helst design du trenger.

18. Bruk Firebug

Likte du materialet og vil takke meg?
Bare del med dine venner og kolleger!

Denne artikkelen gir seg ikke ut for å være det omfattende guide HTML-dokumentmarkeringsspråk. Den beskriver det grunnleggende om HTML - de grunnleggende prinsippene, konseptene og definisjonene av denne teknologien, etter å ha mestret det, kan du enkelt gå videre i studiet av HTML-koding.

For å studere leksjonen, last ned arkivet med de nødvendige filene.

HTML er et dokumentmarkeringsspråk. Riktig uttale er HTT.

Du har sannsynligvis noen gang jobbet i et Word-dokumentredigeringsprogram eller lignende. kontorapplikasjoner? Det vet du sikkert denne typen redaktører har rike muligheter for å redigere tekst, ordne elementer, sette inn bilder osv.

Hvorfor, spør du kanskje, skrive om tekstbehandlere i en artikkel om HTML? Men hvorfor. Hvis du finner ut av det, hva er en kontorredaktør? Dette er et program for å redigere og vise dokumenter.

Nøkkelordet her er dokument. Det vil si at vi oppretter, redigerer og viser et dokument i et eller annet program, i i dette tilfellet- i kontorredaktøren. Hvis vi åpner et slikt dokument i et enkelt tekstredigeringsprogram, for eksempel Notisblokk, vil vi se mange merkelige symboler og tegn. Dette rotet av symboler er uforståelig for menneskeheten, men forståelig for datamaskiner. Takket være dette indre språket, Word-dokument får en viss struktur og utseende i selve redaktøren, og dokumentet fremstår foran oss i all sin prakt med formatert tekst og bilder på plass.

HTML er et dokumentmarkeringsspråk for nettleseren. Word her er nettleseren, og dokumentet er HTML-siden. Dette er selve grunnlaget for HTML-teknologi, hvis forståelse er nødvendig for ikke å forveksle merkespråket til nettdokumenter med programmeringsspråk. Navnet taler for seg selv - med ved hjelp av HTML Vi merking, hvor på siden elementet, bildet eller teksten vil vises, og i hvilken rekkefølge de vil vises ved siden av hverandre.

Ja, enkel skriving og formatering av tekst i kontorapplikasjoner har ingenting med programmering å gjøre. Men den observante leser vil legge merke til en viktig detalj – i tekstbehandler Vi skriver, redigerer og formaterer tekst og bilder ved hjelp av visuelle knapper og menyer, men hvorfor skrives HTML-kode for hånd? Hvorfor lære så mange tekniske detaljer om å skrive markup for et dokument?

Faktisk er det mange redaktører som du kan lage og redigere HTML-sider med, som ligner på Word. Det vil si at HTML-kildekoden er skjult for oss, og vi kommer ikke inn i den.

En slags Word for HTML. Slik visuelle redaktører er kalt:

WYSIWYG redaktører - Hva du ser hva du får. Det vil si, hvis vi oversetter det til russisk: det vi ser er det vi får.

Jeg kaller dem "wuzivoogies". Selv om dette er fonetisk feil, demonstrerer det tydelig meningsløsheten til denne oppfinnelsen. Nybegynnere bruker veldig ofte slike redaktører for å lage sine første nettsteder. Selvfølgelig er dette praktisk - du trenger ikke å fordype deg i studiet av tagger, designstiler og andre, ved første øyekast, ubehagelige og komplekse ting. Editoren selv konverterer automatisk handlingene våre til HTML-kode.

Men, som de sier, ingenting skjer. Mer spesifikt har denne tilnærmingen svært alvorlige ulemper. Hva hindrer alle i å bruke visuelle redaktører til HTML-design sider? Faktum er at sider som er dannet på denne måten vanligvis har mye unødvendig kode og mange feil fra et semantisk synspunkt. Nå er det selvfølgelig ingen problemer med en høyhastighets Internett-tilkobling, og forskjellen i sidestørrelse på 400 kb og 100 kb har ingen betydning for hastigheten, men optimalisert og korrekt skrevet HTML-kode eliminerer mange problemer og gir mange fordeler, nemlig:

Kompetent HTML-kode har en positiv effekt på søkemotoroptimalisering og hastigheten en søkerobot gjennomsøker et nettsted med. Kilobytene med kode generert av vuzivuga er ikke akseptable og til og med skadelige;

HTML-koden generert av WYSIWYG-editoren har mange semantiske feil. Det vil si at taggene som genereres av en slik editor brukes til andre formål, der de må brukes, for eksempel lister

enkel redigering

Mange unødvendige tagger genereres og dokumentstrukturen blir oppblåst. La oss si at du flytter et element i et slikt program, først til høyre, så til venstre, så til midten - hver handling etterlater et spor i HTML-kildekoden. En editor er et program, og den kan ikke vite nøyaktig hva du vil oppnå som et resultat; den genererer tonnevis med kode som tar hensyn til alt mulige alternativer dokumentatferd i nettleseren.
Som regel blir redaktører for den visuelle utformingen av HTML-kode raskt utdaterte. Og på grunn av manglende interesse fra fagfolk, blir de generelt fratatt støtte og slutter å utvikle seg. Og HTML er i utvikling. Alt utvikler seg bortsett fra wuzivoogi. Følgelig kan de ikke generere korrekt og moderne kode som vil bruke nye funksjoner og løsninger.
Å støtte og utvikle slike prosjekter er himmelsk straff. Det kan ikke være snakk i det hele tatt om bruk av mønstre og gjenbruk av kode.

Så vi vil bare skrive HTML med penner. Tilstrekkelige verktøy for visuell HTML-redigering er ennå ikke oppfunnet, og de vil neppe dukke opp. HTML-markeringsspråket er enkelt å lære og forstå, og automatiseringsverktøy skrive HTML Det er mye kode, men mer om det i andre leksjoner.

Etter å ha puslet litt med WYSIWYG-editoren, forlater unge HTML-guruer denne fåfengte oppgaven og går videre.

HTML-dokumentstruktur

For klasser anbefaler jeg å laste ned og installere Sublime Text-editoren. Jeg anbefaler på det sterkeste å ikke bruke den innebygde Windows Notisblokk for HTML-layout hvis du ikke vil ødelegge psyken din i de tidlige stadiene av å lære HTML.

Vi bestemte oss for at vi skulle skrive HTML-dokumentkoden manuelt, det vil si skrive den inn. HTML Layout - prosess HTML-oppretting dokument. I vanlige mennesker og informerte kretser er det bare layout. Ethvert dokument har en struktur og visse konstruksjonsregler. Hvilke elementer består koden av, hva er strukturen til HTML?

La oss lage en innledende mal på datamaskinen - index.html-filen, åpne den med en editor og lim inn følgende kode:

Header Document Body Vær oppmerksom på at HTML-dokumenter har en .html-utvidelse.

Så, i rekkefølge fra eksempelet.

- dokumenttype (doctype)

Denne konstruksjonen er alltid indikert i begynnelsen av dokumentet, slik at nettleseren riktig "forstår" hvilken versjon av HTML som brukes ved konstruksjon av dokumentet.

På grunn av det faktum at HTML er i stadig utvikling, har den flere versjoner, som alle programvareprodukter. Den gjeldende versjonen av HTML er den femte og doctype gitt i eksemplet er gjeldende.

I prinsippet er det ingen vits i å fordype seg i studiet av dokumenttyper, fordi med utgivelsen av HTML5 har dette designet blitt en standard. Bare sett det inn i begynnelsen av dokumentet hver gang du begynner å lage et nettstedoppsett.

- begynnelsen av dokumentet

Den første taggen vi ser etter doctype er .

En HTML-kode er en strukturell enhet av HTML-dokumentoppmerking. HTML-kode består av byggeklosser kalt tagger. Hver kode har sin egen funksjon, og å lære HTML-markeringsspråket handler til syvende og sist om å lære kodene og deres egenskaper i et dokument.

Jeg vil merke meg at å lære HTML ikke er så vanskelig som det kan virke ved første øyekast. Å lære kodene som brukes i dokumentoppmerking er ikke så lett. stort press på hjernen.

Så dokumentoppmerking starter med en kode og slutter med en avsluttende kode. Hver tagg som inneholder andre tagger eller elementer må lukkes med en avsluttende tagg. For eksempel , , , osv.

Taggen er obligatorisk fordi den inneholder hele strukturen til dokumentet og er en innpakning for andre elementer.

stikkord

Deretter ser vi taggen, som inneholder andre elementer som ennå ikke er klare for oss. Inneholder andre elementer - dette betyr at elementene eller taggene er mellom åpnings- og lukketaggene til konstruksjonen:

innhold eller andre tagger

Hensikten med taggen er å lagre metainformasjonen til et HTML-dokument, det vil si informasjon som ikke vises i selve dokumentet, men som er viktig og i stor grad bestemmer hvordan dokumentet vil se ut og oppføre seg.
Denne taggen kreves i dokumentet.

Tag - dokumenttittel Tittel

Tittel er en obligatorisk kode som inneholder tekstlig metainformasjon som vises i nettleseren eller fanetittelen. Taggen må være i . Også innholdet i denne taggen brukes søkemotorer for å vise dokumentet i søkeresultatene.

Metatag

Metatag er en spesialisert tag designet for å gi strukturerte data om en side. Metakoder brukes oftest i . Metakoder er ikke påkrevd i strukturen til et HTML-dokument.

Favorittikon

Legger ved en fil med et favorittbilde til dokumentet. Favicon er et miniatyrikon som vises ved siden av dokumenttittelen i en nettleserfane. Favicon er grafisk fil, 16 x 16 (eller 32 x 32) piksler i størrelse, som kan ha ulike formater, for eksempel png, jpg, ico, gif. Tradisjonelt brukes ico-formatet. Animerte favorittikoner er gif-filer som inneholder animasjon. Du kan se et animert favorittikon, for eksempel på VKontakte, når en ny melding kommer.

CSS-dokumentstiler

Kobler til CSS-dokument HTML-stilfil.

CSS- gjennomgripende HTML-dokumentstiler. Hver tag som er plassert i taggen har et sett med egenskaper, for eksempel farge, bredde, høyde, posisjon i forhold til andre elementer. Alle disse egenskapene er CSS-stiler som kan eksporteres til en ekstern fil. Designet kobler eksterne filer til HTML-dokumentet, inkludert CSS-stiler.

Merk: href-egenskapen til en konstruksjon spesifiserer plasseringen til den eksterne filen. I vårt eksempel, filen style.css Og favicon.ico, ligger i samme mappe som filen index.html. har ikke en avsluttende kode.

stikkord

Taggen inneholder kode eller en lenke til JavaScript-fil og brukes oftest inne i taggen, selv om Googles optimaliseringsverktøy for sidelastingshastighet anbefaler å bruke denne taggen på slutten av dokumentet, før den avsluttende taggen.

I vårt eksempel er en ekstern fil koblet til script.js, som ligger i samme mappe som hovedfilen index.html.

Så venner, vi har sett på hovedelementene som brukes oftest i taggen. I tillegg til disse elementene er det en rekke andre som er mer spesifikke og valgfrie.

Kropp aka kropp

Det er her alle de morsomme og visuelt håndgripelige tingene begynner i HTML-oppsettet til et dokument.

La oss gå direkte til layouten til den synlige delen av siden. Alt vi skriver og layout inne i taggen vil bli vist i nettleseren. La oss åpne filen vår index.html i nettleseren for å tydelig se hva vi gjør i editoren.

Taggen kan inneholde hvilken som helst HTML-tagger nødvendig for å forberede dokumentet og sikre dets funksjonalitet (skjema). Jeg vil gi en tabell over de mest brukte taggene og kort beskrive hver enkelt. Du kan umiddelbart kjøre eksemplene gitt i editoren.

stikkord	Beskrivelse
	En kode for å lage lenker i et dokument. Eksempel: lenketekst Href-attributtet spesifiserer dokumentet som koblingen skal lede til.
,	Lager tekst kursiv eller fet (uthevet). Eksempel: kursiv tekst fet (uthevet) tekst
, , , , ,	Dokumentoverskrifter. Det er totalt 6 nivåer av overskrifter, men i praksis brukes kun h1 til h4. Det skal bare være én overskrift i dokumentet, uthevet med h1-taggen, som hovedoverskrift for dokumentet. Eksempler: Første nivå overskrift Andre nivå overskrift Tredje nivå overskrift... osv.
,	Dokumentlister. De er en nummerert eller punktliste. Elementet i en slik liste er taggen Eksempler: Element punktliste 1 Punkt 2 Nummerert listeelement 1 Nummerert listepunkt 2
	Avsnitt. Denne taggen definerer et tekstavsnitt atskilt fra andre avsnitt. Det anbefales på det sterkeste å lukke denne taggen. Eksempel: Utseendet til HTML-oppmerking bestemmes i stor grad av CSS-stiler. Noen webansvarlige velger imidlertid å ikke bruke stiler i de tidlige stadiene av et prosjekt.
	Bilde. Ved å bruke denne taggen kan du sette inn et bilde i HTML-koden. Sørg for å inkludere alternativ tekst for alle bilder - "alt"-attributtet. Denne taggen er selvlukkende. Eksempel:
+ +	Skjemaer og inngangselementer. Skjemaer er laget for å legge inn informasjon i systemet på serveren. En slags tilbakemelding mellom brukeren og nettstedet. For eksempel brukes skjemaer når du trenger å sende en melding til serveren. I tillegg kan skjemaer utføre andre funksjoner, men hovedoppgaven er å sende data til serveren. Et eksempel er et enkelt skjema for å sende en melding, der brukeren av nettstedet angir navnet sitt, e-post og litt tekst: Meldingstekst
	Definerer en understreng i en streng. Brukes til å style deler av en linje ved hjelp av CSS. En av de mest brukte taggene. Uten design manifesterer det seg ikke på noen måte i nettleseren. Eksempel: Å lære HTML forårsaker i de fleste tilfeller ingen vanskeligheter for nybegynnere.
,	Tagger er laget for å sette inn video og lyd i et dokument. Avslutningsbrikken er påkrevd. Eksempler: Controls-parameteren forteller oss at siden skal vise medieinnholdskontroller, akkurat som en vanlig lyd-/videospiller.
	Virkelig en kongelig merkelapp. Den mest brukte og populære taggen i HTML-oppmerking sider. Dette er et blokkelement designet for å administrere blokker på nettstedet. Konseptet med "fantastisk" layout brukes ofte - dette betyr at alle blokker på nettstedet er lagt ut ved hjelp av disse kodene. Kan inneholde andre tagger. Eksempel: Tekst i en nestet blokk Alle elementer, i de fleste tilfeller, er dekorert med egenskaper CSS-stiler. Avslutningsbrikken er påkrevd.
	Denne taggen lastes inn ekstern side inn i dokumentet. Eksempel:

Vi har ikke vurdert alle taggene, og dette er ikke nødvendig. sånn som det er nå. Det viktigste er å forstå den grunnleggende ideen om HTML, lære hvordan du bruker kodene presentert ovenfor, og deretter gå videre.

Vær oppmerksom på at alle navn i de inkluderte filene må skrives med latinske tegn, uten mellomrom.

For eksempel, ikke:

Dette er nødvendig for større kompatibilitet av sideinnhold. I tillegg tilsier standarder for skriving av HTML-kode.

Så, nå vet vi noen grunnleggende om HTML: hvilken struktur et typisk HTML-dokument skal ha, vi kjenner noen av de mest populære kodene, det er på tide å komme ned til den deiligste delen - nemlig informasjonskapsler.

Praktisk oppgave om HTML-layout

Hvis du ikke har lastet ned arkivet med eksempler ennå, gjør det. Du kan for eksempel se på filen example.html, som også var i arkivet.

Pakk ut arkivet og lag en index.html-fil i mappen med de utpakkede filene. Åpne den opprettede filen med tekstredigerer Sublim tekst;
Lag en innledende dokumentstruktur med en doctype, en tag som inneholder og fortsett å redigere innholdet i taggen;
Åpne readme.txt-filen og fullfør de aktuelle oppgavene i index.html-filen du opprettet. For å sjekke resultatet, åpne index.html i favorittleseren din.

Dette avslutter leksjonen om det grunnleggende om HTML, i neste leksjon "CSS Basics" vil vi lære hvordan du administrerer stilene til dokumentelementer, blir kjent med fossende stilark, lærer hvordan du bruker stilklasser og gjør layouten vår vakker og fargerik .

Vi sees igjen, venner!

Praktisk arbeid med HTML

Oppgave nr. 1.

Opprette en grunnleggende HTML-fil

1. Lag en personlig mappe der du vil lagre alle filene på nettstedet ditt.

2. Klikk Høyreklikk musen og velg "Ny" - "Tom fil".

3. Skriv inn filnavnet rasp.html.

4. Høyreklikk "Åpne med" - "Musematte"

5. Ring enkel html dokument:

Opplæring HTML-fil

Klasseplan for onsdag.

6. Lagre dokumentet og lukk redigeringsprogrammet.

7. Åpne rasp.html-dokumentet ved å dobbeltklikke med musen og sjekk resultatet.

Oppgave nr. 2.

Kontrollere plasseringen av tekst på skjermen

1. Følg trinn nr. 4 fra forrige oppgave, for rasp.html-filen

2. Gjør endringer i rasp.html-filen ved å plassere ordene Timeplan, klasser, for onsdag på forskjellige linjer.

Eksempel:

Rute

klasser

på onsdag.

Ikke bli overrasket over at utseendet til nettsiden din ikke har endret seg.

Oppgave nr. 3.

Kontrollere tekstplassering på skjerm 2

1. Følg trinn nr. 4 fra den første oppgaven, for rasp.html-filen

2. Gjør endringer i rasp.html-filen:

Eksempel:

Rute

klasser

på onsdag.

3. Lagre teksten med endringer gjort i filen rasp.html.

4. Åpne rasp.html-dokumentet ved å dobbeltklikke og sjekk resultatet.

Utseendet til linjene bør endres. Hvorfor endres teksten?

Oppgave nr. 4.

Tekstformatering

Linjefeed tag
skiller en linje fra påfølgende tekst eller grafikk.

Avsnittsmerke

skiller også linjen, men legger også til en tom linje, som visuelt

fremhever et avsnitt.

HTML opplæringsfil

Rute

klasser

For onsdag.

3. Lagre teksten med endringene dine i rasp.html-filen.

4. Åpne rasp.html-dokumentet ved å dobbeltklikke og sjekk resultatet.

Oppgave nr. 5.

Tekstformatering

1. Gjør endringer i RASP.HTML-filen

HTML opplæringsfil

Rute

klasser

på onsdag.

3. Lagre teksten med endringene dine i rasp.html-filen.

4. Åpne rasp.html-dokumentet ved å dobbeltklikke og sjekk resultatet.

5. Svar på spørsmålet: hvilke tagger brukes til å angi understreket, kursiv og fet skrift?

Oppgave nr. 6.

Angi tegnstørrelsene til en webside

Det er to måter å kontrollere størrelsen på teksten som vises av nettleseren:

bruk av overskriftsstiler,

Angi skriftstørrelsen til hoveddokumentet eller gjeldende skriftstørrelse.

Seks tittelkoder brukes: fra

Hver tag har en spesifikk stil tildelt den av nettleserinnstillingene.

1. Gjør endringer i RASP.HTML-filen

HTML opplæringsfil

på onsdag.

3. Lagre teksten med endringene dine i rasp.html-filen.

4. Åpne rasp.html-dokumentet ved å dobbeltklikke og sjekk resultatet.

5. Bytt ut h1-taggen med h2-h6, og se hvordan tittelstørrelsen endres.

Oppgave nr. 7.

Angi gjeldende skriftstørrelse

Font-taggen lar deg angi størrelsen på gjeldende skrift på individuelle steder i teksten i

varierer fra 1 til 7.

HTML opplæringsfil

Timeplan for klassene

på onsdag.

3. Lagre teksten med endringene dine i rasp.html-filen.

4. Åpne rasp.html-dokumentet ved å dobbeltklikke og sjekk resultatet.

5. Bytt ut skriftstørrelsen med andre, og se hvordan tekststørrelsen endres.

Oppgave nr. 8.

Innstilling av skriftfarge

Taggen gir kontroll over skrifttype, farge og størrelse på teksten.

For å endre skriftfargen kan du bruke COLOR=”X”-attributtet i taggen. I stedet for

"X" må erstattes med det engelske navnet på fargen i anførselstegn (" "), eller dens heksadesimale

betydning. Når du spesifiserer en farge som et heksadesimalt tall, må du representere den fargen

dekomponert i tre komponenter: rød (R – Rød), grønn (G – Grønn), blå (B – blå),

som hver har en verdi fra 00 til FF. I dette tilfellet har vi å gjøre med den såkalte

RGB-format.

Eksempler på å skrive tekst i RGB-format er vist i tabell 1:

1
. Gjør endringer i RASP.HTML-filen

HTML opplæringsfil

Rute

Klasser for onsdag.

3. Lagre teksten med endringene dine i rasp.html-filen.

4. Åpne rasp.html-dokumentet ved å dobbeltklikke og sjekk resultatet.

5. Endre fargen til en annen og se resultatet av font-taggen.

Oppgave nr. 9.

Juster tekst horisontalt.

Tekstjustering bestemmer utseendet og retningen til avsnittskanter og kan være venstre, høyre, sentrert eller justert. Avsnittskoden brukes vanligvis til å angi tekstjustering

1. Gjør endringer i RASP.HTML-filen

HTML opplæringsfil

Rute

klasser på onsdag.

3. Lagre teksten med endringene dine i rasp.html-filen.

4. Åpne rasp.html-dokumentet ved å dobbeltklikke og sjekk resultatet.

Lag en webside i henhold til følgende eksempel.

Fargen på teksten er angitt i parentes. Tekstjustering må være til stede.

Gi filen et navn biscuit.html