Mange mennesker tror, at det er at oprette din egen hjemmesidedet er en vanskelig forretning, der kræver seriøs forberedelse og brug af komplekse værktøjer. Til at begynde med er et minimum af viden og det mest basale Windows-program - Notepad - nok. Ved at følge enkle instruktioner om, hvordan man opretter et websted i Notepad, kan du oprette den første fulde side om et par timer.
Professionelle webudviklere, erfarnewebstedsskabere bruger meget sjældent Notepad i processen, men der er to kategorier af brugere, som dette program er et fremragende valg for:
Mange fagfolk blev bekendt med layout ogHTML, forståelse af, hvordan man opretter et websted ved hjælp af Notepad. Dette gjorde det muligt for dem sikkert og hurtigt at konsolidere al den vundne viden. Notepad er ikke designet til at arbejde med kode og markup, det har ikke indbyggede tip, auto-færdiggørelse og andre chips tilgængelige i moderne programmer, hvilket betyder, at udvikleren kun kan stole på sig selv og hans hukommelse.
Teksteditor Notepad har den mest beskedneminimalistisk interface, hvilket betyder, at du ikke har brug for at forstå programmets komplekse funktionalitet i lang tid. Dette er meget attraktivt for brugere, der ikke planlægger at bruge tid på at lære et værktøj, som de ikke ofte vil bruge.
En trin-for-trin-instruktion om, hvordan man opretter et HTML-sted i Notepad, begynder med at åbne programmet. Den nemmeste måde at finde Notepad er gennem Windows Start-menuen i afsnittet Tilbehør.
Den åbne nye fil skal gemmes medhtml-udvidelse. Dette er vigtigt, fordi browseren med denne udvidelse forstår, at den har en webside foran sig. Kommandoen Gem som i menuen Filer åbner et nyt vindue. Her skal du navngive dokumentindekset.html, vælge utf-8-kodningen og den mappe, der skal gemmes.
Nu kan du til enhver tid åbne denne fil ved at dobbeltklikke på den eller ved at højreklikke på genvejsmenuen og vælge "Åbn med notesblok."
Siden er allerede oprettet, og du kan se, hvordan den ser ud i browseren. Der er flere måder at åbne et dokument i en internetbrowser på:
fil: /// C: /Users/UserName/Desktop/my-site/index.htmlNu er siden forudsigeligt jomfru blank, det er tid til at udfylde den med information.
Alle websider på World Wide Webskrevet på et specielt HTML-sprog (hypertext markup sprog). Det er meget vigtigt at forstå dets grundlæggende for at finde ud af, hvordan man opretter et websted i Notepad eller enhver anden editor. Ved hjælp af HTML fortæller udvikleren browseren, hvordan siden skal se ud. Derfor er det vigtigt at indstille den rigtige filtypenavn.
Sprog er baseret på tags - kombinationer af tegn, der er lukket i vinkelparenteser.
Eksempler på tags:
<h1> Overskrift på første niveau </h1> <i> Kursiv tekst </i>Teksten mellem de indledende og lukkende tags håndteres på en speciel måde af browseren.
Ud over de data, der vises direkte på siden, skal du, når du opretter en side, angive specielle serviceoplysninger beregnet til selve browseren.
Du skal begynde at arbejde med den korrekte formatering af html-dokumentet. Sidens grundlæggende struktur ser sådan ud:
<! DOCTYPE html> <html> <hoved> <meta charset = "utf-8"> <title> Verdens bedste side </title> </head> <krop> </body> </html>Betydningen af hvert element:
DOCTYPE - teknisk information til browseren, der angiver, hvordan den skal fortolke kodenhtml - side rod tag;hoved - sektion af serviceoplysninger, ikke synlig for besøgende på stedetmeta - servicetag, charset attribut definerer tekstkodning;titel - navnet på den side, der vises i browserfanenlegeme - dokumentets brødtekst, direkte vist på siden.Efter at have gemt koden og genåbnet (eller genindlæst) filen i browseren, kan du se den første ændring - navnet på webstedet blev vist på fanen.
Før du finder ud af, hvordan du opretter dit websted i HTML ved hjælp af Notesblok, skal du klart forestille dig, hvordan dette websted skal se ud. Lad os for eksempel tage den personlige blog fra en bestemt John Doe.
Hovedelementerne i strukturen på denne side:
HTML-koden for denne side vil se sådan ud:
<!DOCTYPE html> <html> <hoved> <meta charset = "utf-8"> <title> Verdens bedste side </title> </head> <krop> <div class = "wrapper"> <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </h1> </header> <nav> <ul> <li> <a href="bio.html"> Selvbiografi </a> </li> <li> <a href="life.html"> Mit liv, mine præstationer </a> </li> <li> <a href="gallery.html"> Fotoalbum </a> </li> <li> <a href="contacts.html"> Kontakt mig </a> </li> <li> <a href="thanks.html"> Tak </a> </li> </ul> </nav> <hoved> <artikel> <h2> Superkoncert </h2> <div> Var en kilometer lang kø værd for billetter at nyde dette show !! </div> <a href="posts/concert.html"> Se mere </a> </article> <artikel> <h2> Hvorfor jeg elsker is </h2> <div> Jeg vil dele de dybe grunde min kærlighed til is ... </div> <a href="posts/ice-cream.html"> Se mere </a> </article> <artikel> <h2> At være eller ikke være? </h2> <div> Spørgsmål om liv og død. </div> <a href="posts/to-be-or-not-to-be.html"> Se detaljer </a> </article> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>Semantiske tags fra HTML5-standarden bruges til at beskrive websiden: header, vigtigste, nav, sidefod, artikel.
Forklaringer til koden:
billeder skyl med filen index.html... I koden til det ved hjælp af attributten bredde bredden er strengt indstillet til 100 pixels.h1, som understreger dets betydning.h2.indpakning... Klasseattributter bruges ofte til at style elementer.Nu ser siden sådan ud:
Denne opfattelse ligner ikke meget den planlagte. For at løse situationen skal du tilføje en dekoration.
For at gøre dette skal du oprette en anden fil ved siden af index.html og navngiv det style.css... Den indeholder alle de nødvendige stilarter.
I øjeblikket ser projektstrukturen sådan ud:
Fortsat med at finde ud af, hvordan du opretter et websted i Notesblok, går vi til et nyt niveau - forbinder et stilark.
For at browseren skal forstå, hvor designet skal hentes, skal du angive adressen på css-filen. Dette er serviceoplysninger, de skal placeres i afsnittet hoved.
<hoved> <meta charset = "utf-8"> <title> Verdens bedste side </title> <link rel = "stylesheet" href = "style.css"> </head>Nu alt, hvad der vil blive beskrevet i filen style.css, browseren gælder for siden. Lad os for eksempel ændre baggrundsfarven:
krop { baggrund: # 89745d; }Hele indholdet af stilarket ser sådan ud:
krop { polstring: 0; font-familie:sans serif; skriftstørrelse: 16 pixel; baggrund: # 89745d; } .indpakning { polstring: 20px; margen til venstre: auto; margen-højre: auto; bredde: 960px; } header a { tekst-dekoration: ingen; } header img { lodret-justere: midten; margin-højre: 20px; } header h1 { display: inline-blok; lodret-justere: midten; farve: # f8d9b7; } nav { polstring-top: 20px; polstring-bund: 20px; } nav ul { margen: 0; tekstjustering: center; } nav ul li { display: inline-blok; liste-stil: ingen; polstring: 0px 15px; } nav ul li a { farve: # f8d9b7; tekst-dekoration: ingen; } nav ul li a: svæver { tekst-dekoration: understregning; } artikel { polstring: 20px; margen: 20px 0; baggrund: # f8d9b7; box-shadow: 0 0 15px # f8d9b7; } artikel h2 { margin-top: 0px; margin-bund: 15px; farve: # d57106; } artikel a { skriftstørrelse: 14 pixel; font-stil: kursiv; farve: # d57106; } sidefod { polstring: 20px; tekstjustering: højre; farve: # f8d9b7; skriftstørrelse: 14 pixel; font-vægt: fed; }Forklaringer til stilarter:
Hvis du opdaterer dokumentet i browseren, kan du se dets endelige repræsentation. Den første webside er oprettet med succes!
En blog kan dog ikke kun bestå af hovedprogrammetsider med en liste over artikler. Det er nødvendigt på en eller anden måde at vise et separat indlæg med den fulde tekst. Desuden er de sider, der er angivet i navigationsmenuen, allerede planlagt.
Det vigtigste koncept på Internettet er sammenkædning af individuelle dokumenter via links. Hvordan oprettes et hyperlinket websted i Notesblok?
Faktisk er alt det nødvendige allerede gjort. Menupunkter og henvisninger "Ur" er pakket mere detaljeret i et specielt mærke og, som er ansvarlig for dannelsen af hyperlinket. Den krævede adresse er angivet i attributten href... Det er kun at oprette siderne selv og placere dem ved siden af filen index.html.
Prøvekode til en fotoalbumside (gallery.html):
<!DOCTYPE html> <html> <hoved> <meta charset = "utf-8"> <title> Det bedste sted i verden </title> <link rel = "stylesheet" href = "style.css"> </head> <krop> <div class = "wrapper"> <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </h1> </header> <nav> <ul> <li> <a href="bio.html"> Selvbiografi </a> </li> <li> <a href="life.html"> Mit liv, mine præstationer </a> </li> <li> <a href="gallery.html"> Fotoalbum </a> </li> <li> <a href="contacts.html"> Kontakt mig </a> </li> <li> <a href="thanks.html"> Tak </a> </li> </ul> </nav> <hoved> <div class = "gallery"> <figur> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> I skoven </figcaption> </figure> <figur> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> Om vinteren </figcaption> </figure> <figur> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> Strand </figcaption> </figure> <figur> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> På arbejde </figcaption> </figure> <figur> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> Nytår </figcaption> </figure> <figur> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> Selvportræt </figcaption> </figure> </div> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>Hovedstrukturen, header, navigation og sidefod duplikerer hovedsiden fuldstændigt, kun sektionen ændres vigtigstesom nu indeholder et galleri med flere blokke figur... Inde i hver blok er der et billede og en billedtekst til det.
Den samme fil bruges til at designe siden style.cssforbundet inden i sektionen hoved... Du skal tilføje et par regler for galleriet til det:
.gallery { skriftstørrelse: 0; } figur { Skærm:inline-blok; lodret-justere: bund; bredde: 33,3333%; box-størrelse: border-box; polstring: 10px 15px; margen: 0px; skriftstørrelse: 14 pixel; farve: # f8d9b7; tekstjustering: center; } figur img { bredde: 100%; margin-bund: 10 px; }Her bruges en css-teknik, der giver dig mulighed for at placere blokke i tre i træk og indstille deres bredde til nøjagtigt en tredjedel af bredden på den overordnede container.
Den endelige visning af galleriet er vist nedenfor.
Hyperlinks giver bevægelse mellem siderne på webstedet: fra menuen kan du gå til "Fotoalbum", og ved at klikke på logoet kan du gå tilbage til hovedsiden.
Så vi fandt ud af ved hjælp af trinvise instruktioner om, hvordan du opretter et websted i Notesblok. Men nu ser ingen ham! Men personlige blogs oprettes for at dele dit liv med hele verden.
For at afhjælpe situationen skal du placere denalle oprettede filer på hosting og vælg et domæne til webstedet ved hjælp af en særlig tjeneste. Der er et stort antal hostingudbydere, der leverer tjenester til enhver smag og tegnebog.
Når du har indgået en aftale med værten, har du adgang til kontrolpanelet, hvor du kan overføre alle oprettede filer. I øjeblikket er projektstrukturen som følger:
Her skal du også tilføje HTML-filer til resten af siderne.
Nu ved du, hvordan du opretter et html-sted iNotesblok, men der er mere bekvemme måder. Professionelle bruger specialredaktører designet til at arbejde med kode. De tilbyder mange praktiske muligheder for at gøre det let at oprette og redigere websteder.
Mest populære værktøjer - Visual StudioKode, sublim tekst, notesblok ++. Du skal ikke være bange for deres kompleksitet. At vide, hvordan man opretter et websted ved hjælp af Notepad, kan du nemt finde ud af, hvad der er hvad. Alle disse redaktioners yderligere funktioner er designet til at lette webmasteren og bør ikke forstyrre ham i processen.
Opbygning af et websted ved hjælp af Notepad er kun begyndelsen på en lang og interessant rejse som webudvikler.
