Ako vytvoriť jednoduchú webovú stránku s HTML

V tomto článku vám povieme, ako vytvoriť jednoduchú webovú stránku pomocou kódu HTML. HTML je jednou z hlavných komponentov internetu, pretože špecifikuje štruktúru webových stránok. Webová stránka Môžete vytvoriť v textovom editore, ktorý je v systéme Windows alebo MacOS.

Kroky

Časť 1 z 6:

Ako pridať "Head" Tag (popis webovej stránky)

jeden. Otvorte textový editor. V systéme Windows spustite Poznámkový blok alebo Poznámkový blok ++ av MacOS - Textedit:

Okná - Otvorte ponuku Štart

, Zadajte vyhľadávací reťazec notebook alebo Poznámkový blok++, A potom kliknite na "Notepad" alebo "Notepad ++" v hornej časti ponuky "Štart".

Macos - Kliknite na "Spotlight"

, Zadať Textedit, A potom dvakrát kliknite na "textedit" v hornej časti výsledkov vyhľadávania.

2. Zadať a stlačte ↵ Zadajte. Takže informute webový prehliadač, že je to dokument HTML.

3. Zadať a stlačte ↵ Zadajte. Toto je otvor otvorenia HTML kód.

4. Zadať a stlačte ↵ Zadajte. Táto značka obsahuje popis webovej stránky a hlavičkových prvkov. Obsah tejto značky na stránke sa zvyčajne nezobrazuje. Obsah je popis stránky, metaúdajov, CSS štýlov stolov a iných skriptovacích jazykov.

päť. Zadať . Táto značka obsahuje názov stránky.

6. Zadajte názov stránky. Zadajte text, ktorý sa má zobraziť na karte stránky.

7. Zadať a stlačte ↵ Zadajte. Táto značka zatvára značku názvu stránky.

osem. Zadať a stlačte ↵ Zadajte. Táto značka zatvára značku popisu stránky. V tomto štádiu by mal HTML kód vyzerať takto.

Moja webová stránka

Časť 2 zo 6:

Ako pridať značku "Body" (všetok obsah)

jeden. Zadajte značku pod zatváracou značkou "hlava". Táto značka obsahuje celý obsah dokumentu HTML. Obsah Táto značka sa zobrazí na webovej stránke.

2. Zadať . Táto značka obsahuje názov stránky. Názov je veľký text, ktorý sa zvyčajne nachádza v hornej časti stránky.

3. Zadajte názov stránky. Môže to byť názov stránky alebo pozdrav.

4. Zadať Po texte hlavičky a kliknite na tlačidlo ↵ Zadajte. Táto značka zatvára názov titulu.

Pridajte ďalšie titulky podľa potreby. Môžete vytvoriť až šesť hlavičiek - to sa vykonáva pomocou tagov - . Aktuality budú mať rôzne veľkosti. Kódex pre vytvorenie troch titulkov rôznych veľkostí bude napríklad:

Vitajte na mojej stránke!Moje meno je max.Dúfam, že nebudete nudiť.

päť. Zadať . Táto značka obsahuje textový odsek. Takáto značka zobrazí text normálnej veľkosti.

6. Zadajte text. Napríklad zadajte popis webovej stránky alebo akékoľvek iné informácie.

7. Zadať Po texte a kliknite na tlačidlo ↵ Zadajte. Táto značka uzatvára text textu. Nižšie je príkladom odseku v dokumente HTML:

Toto je prvý odsek.

Ak chcete vytvoriť niekoľko odsekov pod jedným okruhom, pridajte niekoľko riadkov v rade.

Zmeňte farbu textu. Na začiatku textu zadajte značku , A na konci tagu . Namiesto slova "Farba" Nahradiť požadovanú farbu (v angličtine) a neodstraňujte citácie. Tieto tagy vám umožnia zmeniť farbu akéhokoľvek textu (napríklad hlavičky). Ak chcete, aby text modrá, zadajte nasledujúci kód: Veľryby - majestátne zvieratá.

Tiež font môže byť odvážne, naklonené a iné. Nižšie sú uvedené príklady formátovania textu pomocou značiek HTML:

 Tučný text textu textu  Nahradiť text  Polstrovaný text

ČASŤ 3 ZO 6:

Ako pridať ďalšie položky

jeden. Pridajte obrázok na stránku. Pre to:

Zadať . Táto značka obsahuje obrázok.
Skopírujte a vložte adresu URL obrazu po značke rovnosti (=) v úvodzovkách.
Zadať > Po obrázku URL zatvorte značku obrázka. Ak je napríklad obrázok URL http: // Myimage.Com / oceán.Jpg zadajte nasledujúci kód:

 Src ="http: // Myimage.Com / oceán.jpg">

2. Pridajte odkaz na inú webovú stránku. Pre to:

Zadať . Táto značka obsahuje odkaz na inú stránku.

Skopírujte a prilepte URL po podpísaní rovnosti (=) v úvodzovkách.

Zadať > Po zatvorení adresy URL.

Zadajte text odkazu po symboli ">".

Zadať Po textovom prepojení zatvorte tag Link. Nižšie je príkladom odkazu na YANDEX.

 href ="https: // Ya.Ruka"> Yandex.

3. Pridajte reťazec medzeru. Ak to chcete urobiť, zadajte . Prenos riadka bude vložený. Táto značka môže byť použitá na oddelenie rôznych oddielov stránky.

Časť 4 zo 6:

Ako zmeniť farby

jeden. Obráťte sa na oficiálny zoznam farieb a ich kódov vo formáte HTML. Svetový drôt konzorcium (W3C) vedie oficiálny zoznam farieb, ktoré možno nájsť na https: // W3.Org / wiki / css / vlastnosti / farba / kľúčové slová. Každá farba má formálny názov, 6-miestny hexadecimálny kód a desatinné miesto. Môžete použiť ktorýkoľvek z týchto parametrov na nastavenie farby položiek na vašej stránke. V tomto príklade urobíme oficiálne mená farieb.

2. Nastavte farbu pozadia pomocou značky . Ak to chcete urobiť, musíte pridať atribút na značku Štýl. Predpokladajme, že chcete urobiť pozadie celej stránky levanduľa (Laven):

3. Nastavte farbu textu pre ľubovoľnú značku. Atribút Štýl Môžete tiež použiť na označenie, akú farbu celého textu v rámci konkrétnej značky. Chcete napríklad text v rámci jedného z vašich tagov bol Polnočná modrá (Tmavomodrá):

Zmena farby sa bude dotknúť textu v rámci tejto značky . Ak neskôr otvoríte novú značku , kde by mal mať text Polnočná modrá, Atribút "štýl" bude musieť požiadať o neho.

4. Nastavte farebné pozadie pre hlavičku alebo odseku. Rovnako ako zadáte farbu pozadia pre tag na karosériu, môžete si vybrať farby pozadia pre iné tagy. Chcete napríklad farbu pozadia bol Svetlo šedá (svetlo šedá) a farba hlavičky hlavičky H1 - Lightsky (svetlo modrá):

Časť 5 zo 6:

Ako zatvoriť kód HTML

jeden. Zadať , Zatvorenie tagu "Body". Keď dokončíte pridanie textu, obrázkov a iných položiek, zadajte zadanú značku v dolnej časti dokumentu HTML.

2. Zadať , Zatvorenie HTML kód. Zadajte túto značku pod záverečným tagom "telo". Takže informute webový prehliadač, ktorý po tejto značke HTML-kód nie je. Všetky HTML kód musí byť približne:

Yandex Fan PagePozdravte vám na mojej stránke"http: // Ya.Ruka"> Yandex

Časť 6 zo 6:

Ako uložiť a otvoriť webovú stránku

jeden. Konvertovať dokument do normálneho textu (len pre používateľov Macos). Kliknite na "Formát" (v hornej časti obrazovky)> "Vytvoriť jednoduchý text" (v rozbaľovacej ponuke).

Nie je možné robiť v systéme Windows.

2. Kliknúť Spis. Táto možnosť je v paneli s ponukami v hornej časti obrazovky.

3. Kliknite na tlačidlo Uložiť ako. Túto možnosť nájdete v ponuke Súbor.

Môžete tiež kliknúť Cttrl+S (Okná) alebo ⌘ príkaz+S (Mac).

4. Zadajte názov dokumentu HTML. Zadajte ho do "Názov súboru" (Windows) alebo "Name" (MAC).

päť. Zmeňte formát súboru s TXT na HTML. Pre to:

Okná - Kliknite na menu "Typ súboru", vyberte položku "Všetky súbory" a potom zadajte .Html Na konci názvu súboru.

Macos - Na konci názvu súboru namiesto .TXTZadať .Html.

6. Kliknite na tlačidlo Uložiť. Táto možnosť je v dolnej časti okna. HTML súbor bude vytvorený.

Obvykle HTML súbory otvorené v predvolenom webovom prehliadači.

7. Zatvorte textový editor. Teraz otvorte súbor HTML v prehliadači, v ktorom si môžete prezrieť vytvorenú webovú stránku.

osem. Otvorte súbor HTML v prehliadači. Ak to chcete urobiť, dvakrát kliknite na súbor HTML. Ak je upozornenie na chybu, postupujte takto:

Okná - Kliknite na súbor pravým tlačidlom myši, vyberte možnosť "Otvoriť s" a potom kliknite na požadovaný prehliadač.

Macos - Kliknite na súbor, kliknite na "File", vyberte možnosť "Otvoriť" a potom vyberte požadovaný prehliadač.

deväť. Upraviť dokument HTML (ak je to potrebné). Na stránke si môžete všimnúť chybu. Ak ho chcete opraviť, vykonajte zmeny obsahu HTML súboru:

V systéme Windows kliknite na súbor Kliknite pravým tlačidlom myši a vyberte položku "Upraviť" (ak je v počítači nainštalovaný Notepad ++, vyberte možnosť "Upraviť v programe NotePAD ++").

Kliknite na súbor MacOS, kliknite na "File", vyberte možnosť "Otvoriť" a kliknite na tlačidlo "TextEdit". Teraz presuňte súbor HTML do okna TextEdit.

Tipy

Pomocou tagu môžete pridať bočný pás navigovania .Ale pamätajte, že niektoré prehliadače nerozpoznávajú túto značku.
Mnohí ľudia používajú Poznámkový blok ++ na písanie a zostavenie kódu.
Každá značka je potrebné zavrieť. Napríklad tagy Mal by byť takto uzavretý: .
Ak chcete objasniť obrázok na stránke, zadajte Po mene obrázka v značke "IMG" (napríklad, ).

Upozornenia

Ak ich chcete pridať do svojej webovej stránky, načítajte svoje obrázky na iMGUR alebo podobné. Pamätajte, že použitie obrázkov, ktoré patria iným ľuďom porušuje autorské práva.