Како да креирате едноставна веб-страница со HTML

Во оваа статија ќе ви кажеме како да креирате едноставна веб-страница користејќи HTML код. HTML е една од главните компоненти на Интернет, бидејќи ја специфицира структурата на веб-страниците. Веб-страница Можете да креирате во уредувач на текст што е во Windows или Macos.

Чекори

Дел 1 од 6:

Како да додадете таг "глава" (опис на веб-страницата)

Еден. Отворен уредувач на текст. Во Windows, стартувајте го Notepad или Notepad ++, а во Macos - Textedit:

Windows - Отворете го менито Start

, Внесете во стрингот за пребарување Бележник или Бележник++, А потоа кликнете на "Notepad" или "Notepad ++" на врвот на менито "Start".

Macos - кликнете на "центарот на вниманието"

, Внесете Текстит, А потоа двојно кликнете на "Textedit" на врвот на резултатите од пребарувањето.

2. Внесете и притиснете ↵ Внесете. Така да го известите веб прелистувачот дека ова е HTML документ.

3. Внесете и притиснете ↵ Внесете. Ова е отворот HTML код ознака.

Четири. Внесете и притиснете ↵ Внесете. Оваа ознака содржи опис на веб-страница и елементи на заглавието. Содржината на оваа ознака на страницата обично не е прикажана. Содржината е опис на страницата, метаподатоци, CSS стилови табели и други скрипти јазици.

Пет. Внесете . Оваа ознака го содржи името на страницата.

6. Внесете го името на страницата. Внесете го текстот што треба да се прикаже на табулаторот.

7. Внесете и притиснете ↵ Внесете. Оваа ознака ја затвора ознаката за име на страница.

осум. Внесете и притиснете ↵ Внесете. Оваа ознака ја затвора ознаката за опис на страницата. Во оваа фаза, HTML кодот треба да изгледа вака.

Моја веб-страница

Дел 2 од 6:

Како да додадете "Тело" ознака (сите содржини)

Еден. Внесете ознака Под затворен таг "глава". Оваа ознака ја содржи целата содржина на HTML-документот. Содржина Оваа ознака е прикажана на веб-страница.

2. Внесете . Оваа ознака содржи наслов на страница. Насловот е голем текст кој обично се наоѓа на врвот на страната.

3. Внесете го насловот на страницата. Тоа може да биде името на страницата или поздрав.

Четири. Внесете По текстот на заглавието и кликнете ↵ Внесете. Оваа ознака ја затвора ознаката за наслов.

Додајте дополнителни наслови колку што е потребно. Можете да креирате до шест заглавија - ова е направено со користење на ознаки - . Насловите ќе имаат различни големини. На пример, кодот за создавање на три наслови со различни големини ќе биде:

Добредојдовте на мојата страница!Моето име е Макс.Се надевам дека нема да бидете здодевни.

Пет. Внесете . Оваа ознака содржи текстуален став. Таквата ознака ќе го прикаже текстот на нормалната големина.

6. Внесете го текстот. На пример, внесете опис на веб-страница или било какви други информации.

7. Внесете По текстот и кликнете ↵ Внесете. Оваа ознака го затвора ознаката за текст. Подолу е пример за став во HTML документ:

Ова е првиот став.

Да се создадат неколку параграфи под еден наслов, додадете неколку редови во ред.

Променете ја бојата на текстот. На почетокот на текстот, внесете ја ознаката , И на крајот на ознаката . Наместо зборот "боја" замена на саканата боја (на англиски јазик), и не отстранува цитати. Овие ознаки ќе ви овозможат да ја промените бојата на секој текст (на пример, заглавие). На пример, за да направите текст сина, внесете го следниов код: Китови - величествени животни.

Исто така, фонтот може да се направи задебелен, наклонет и друг. Подолу се дадени примери за форматирање на текст користејќи HTML тагови:

 Задебелени текстуални текст текст  Едноставен текст  Падиран текст

Дел 3 од 6:

Како да додадете дополнителни ставки

Еден. Додајте слика на страницата. За ова:

Внесете . Оваа ознака содржи слика.
Копирајте и вметнете го URL-то на сликата по знакот за еднаквост (=) во цитати.
Внесете > По сликата на URL-то за да ја затворите ознаката за слика. На пример, ако URL-то-сликата е http: // MyImage.Com / океан.JPG, внесете го следниов код:

 src = "http: // MyImage.Com / океан.JPG ">

2. Додајте линк до друга веб-страница. За ова:

Внесете . Оваа ознака содржи врска до друга страница.

Копирајте и ставете го URL-то по знакот за еднаквост (=) во цитати.

Внесете > По URL-то за да ја затворите адресата.

Внесете го текстот на врската по симболот ">".

Внесете По текстуална врска за да ја затворите ознаката за врски. Подолу е пример за упатување на Yandex.

 href = "https: // Ya.Yandex.

3. Додадете јазот во низа. За да го направите ова, внесете . Ќе се вметне трансферот на ред. Оваа ознака може да се користи за одделување на различните партиции на страницата.

Дел 4 од 6:

Како да ги смените боите

Еден. Контактирајте ја вашата официјална листа на бои и нивните кодови во HTML боја. Светскиот жичен конзорциум (W3C) води официјална листа на бои кои можат да се најдат на https: // W3.Org / wiki / css / својства / боја / клучни зборови. Секоја боја има формално име, 6-цифрен хексадецимален код и децимал. Можете да користите било кој од овие параметри за да ја поставите бојата на предметите на вашата страница. Во овој пример, ние ќе ги преземеме официјалните имиња на боите.

2. Поставете ја бојата на позадината користејќи ја ознаката . За да го направите ова, треба да додадете атрибут на ознаката Стил. Да претпоставиме дека сакате да ја направите позадината на целата страница лаванда (Лавод):

3. Поставете боја на текст за било која ознака. Атрибут Стил Можете исто така да ги користите за да покажете што е целиот текст во одредена ознака. На пример, сакате текст во рамките на еден од вашите ознаки Беше Слушал (Темно сино):

Промената на бојата само ќе го допре текстот во рамките на оваа ознака . Ако подоцна отворите нова ознака , каде што текстот исто така треба да има боја Слушал, Атрибутот "стил" ќе треба да го праша за него.

Четири. Поставете боја позадина за заглавие или став. Исто како што ја наведувате бојата на позадината за ознаката на телото, можете да ги изберете боите во позадина за други ознаки. На пример, сакате бојата на позадината Беше Светло сива (светло сива), и бојата на заглавието на заглавјето на H1 - Lightskyblue (светло сино):

Дел 5 од 6:

Како да го затворите HTML кодот

Еден. Внесете , За да ја затворите ознаката "Тело". Кога ќе завршите со додавање текст, слики и други предмети, внесете ја наведената ознака на дното на HTML-документот.

2. Внесете , За да го затворите HTML кодот. Внесете ја оваа ознака под завршната ознака "Тело". Така да го информирате веб-прелистувачот дека по оваа ознака HTML-кодот не е. Сите HTML код мора да биде приближно:

Yandex PageПоздрави до вас на мојата страница.Ya.Yandex

Дел 6 од 6:

Како да заштедите и отворете веб-страница

Еден. Конвертирајте го документот во нормален текст (само за корисниците на MacOS). Кликнете "Формат" (на врвот на екранот)> "Креирај едноставен текст" (во опаѓачкото мени).

Невозможно е да не се прави во Windows.

2. Кликни Датотека. Оваа опција е во лентата со мени на врвот на екранот.

3. Кликнете BY Зачувај како. Оваа опција ќе ја најдете во менито Датотека.

Можете исто така да кликнете Ctrl+С (Windows) или ⌘ команда+С (Мек).

Четири. Внесете го името на HTML-документот. Внесете го во "Име на датотеката" (Windows) или "Име" (Mac).

Пет. Променете го формат на датотека со txt на HTML. За ова:

Windows - Кликнете на менито "Тип на датотека", изберете "Сите датотеки", а потоа внесете .HTML На крајот од името на датотеката.

Macos - На крајот од името на датотеката наместо .TxtВнесете .HTML.

6. Кликнете BY Зачувај. Оваа опција е на дното на прозорецот. HTML датотека ќе биде креирана.

Обично HTML датотеки се отвораат во стандардниот веб прелистувач.

7. Затворете го уредувачот на текст. Сега отворете ја HTML-датотеката во прелистувачот во кој можете да ја видите креираната веб-страница.

осум. Отворете ја датотеката HTML во прелистувачот. За да го направите ова, двоен-клик на HTML-датотеката. Ако е известена грешка, направете го следново:

Windows - Кликнете на датотеката со десен клик, изберете "Отвори со", а потоа кликнете на саканиот прелистувач.

Macos - Кликнете на датотеката, кликнете на "датотеката", изберете "Отвори со", а потоа одберете го саканиот прелистувач.

Девет. Уредете HTML документ (ако е потребно). Може да забележите грешка на страницата. За да го поправите, направете промени во содржината на HTML-датотеката:

Во Windows, кликнете на датотеката десно-клик и изберете "Уреди" (ако Notepad ++ е инсталиран на компјутерот, одберете ја опцијата "Уреди во Notepad ++").

Кликнете на датотеката MacOS, кликнете "File", изберете "Отвори со" и кликнете "Textedit". Сега повлечете ја датотеката HTML во прозорецот за текст.

Совети

Можете да додадете странична лента на текст со скролување користејќи ознака .Но запомнете дека некои прелистувачи не ја препознаваат оваа ознака.
Многу луѓе користат Notepad ++ за да го напишат и компајлираат кодот.
Секоја ознака треба да се затвори. На пример, ознаки Треба да се затвори вака: .
За да ја разјаснете сликата на страницата, внесете По името на сликата во ознаката "IMG" (на пример, ).

Предупредувања

Вчитајте ги вашите слики на imgur или слично ако ви се случуваат на вашата веб-страница. Запомнете дека употребата на слики кои припаѓаат на други луѓе ги прекршуваат авторските права.