Автор:
Laura McKinney
Дата На Създаване:
3 Април 2021
Дата На Актуализиране:
1 Юли 2024
Съдържание
HTML (HyperText Markup Language) е основен език за изграждане на уеб страници. Създаден е като лесен и гъвкав език за кодиране. Почти всеки уебсайт в Интернет е разработен с някаква форма на този код (ColdFusion, XML, XSLT). HTML е лесно да се разбере, но можете да продължите да научавате за него дълго време, ако се интересувате от цялостната му функционалност. За да добавите цвят и забавление към уебсайта си, можете да научите основни CSS веднага щом свикнете с основна HTML страница.
Стъпки
Част 1 от 4: Създаване на документ
Отворете прост текстов редактор. NotePad е добър вариант и може да бъде изтеглен безплатно. Можете да пишете HTML с повечето текстови редактори, но по-сложният софтуер с възможности за автоматично форматиране може да затрудни организирането на вашата HTML страница.
- Не използвайте TextEdit, тъй като обикновено записва файла във формат, който вашият браузър може да не разпознае като HTML.
- Можете също да използвате онлайн HTML редактор. Специализираните програми за редактиране на HTML не се препоръчват за начинаещи.
Запазете файл като уеб страница. Изберете File → Save As в менюто в горната част. Променете формата на файла на „Уеб страница“, „.html“ или „.htm“. Запазете файла, където можете лесно да го намерите.- Няма разлика между тези три опции.
Отворете файла в браузър. Щракнете двукратно върху файла и той автоматично ще се отвори като празна уеб страница във вашия браузър. Като алтернатива можете да отворите браузър, като Firefox или Internet Explorer, и след това да използвате File → Open File, за да изберете документа.
- Този уебсайт не е онлайн. Вижда се само на вашия компютър.
Опреснете уеб страницата и вижте направените промени. Въведете следното в празния си документ: Здравейте. Запазете документа. Опреснете празната уеб страница в браузъра си и в горната част на страницата трябва да видите думата "Здравей" с получер шрифт. Винаги, когато искате да тествате новия си HTML по време на този урок, запазете .htm документа и след това опреснете прозореца на браузъра си, за да видите как се компилира HTML.- Ако видите думите ""и"'' Появява се във вашия браузър, файлът не е компилиран правилно в HTML. Опитайте друг текстов редактор или друг браузър.
Научете етикетите. HTML командите са написани в "тагове", които казват на браузъра как да компилира и покаже вашата уеб страница. Те винаги са написани в единични кавички, и не се показват на уеб страницата, както сте ги използвали в примера по-горе: - е "начална карта" или "отваряща карта". Всичко, написано след този таг, ще бъде дефинирано като "получер" (получер в уеб страница).
- е "краен етикет" или "затварящ маркер", който можете да различите по символа / знака. Той обозначава края на получер текст. Повечето (не всички) маркери се нуждаят от краен маркер, за да функционират, така че не забравяйте да го включите.
Създайте своя документ. Изтрийте всичко във вашия HTML документ. Започнете отначало със следния текст, точно както е написан (минус точките). Този HTML код казва на браузъра какъв тип HTML използвате и че целият ви HTML ще бъде поставен вътре в маркерите. и .
Добавете маркерите за глава (глава) и тяло. HTML документите са разделени на две части. Разделът „отгоре“ е за специална информация, като заглавието на страницата. Разделът "тяло" съдържа основното съдържание на страницата. Добавете и двата раздела към вашия документ и не забравяйте да включите крайните тагове. Новодобавеният текст е получер:
Дайте на страницата си заглавие. Повечето карти в секцията за главата са маловажни за учене с начинаещ. Заглавният маркер е лесен за използване и ще определи какво ще се показва като името на прозореца на браузъра или в раздела на браузъра. Поставете началните и крайните маркери на заглавията вътре в маркерите на главата и напишете всички заглавки, които харесвате, между тези маркери:
Първата ми HTML страница.
Част 2 от 4: Форматиране на текст
Добавете текст към тялото си. За този раздел ще работим само с маркери за тяло. Другият текст ще остане във вашия документ, но ще спестим място, като не го повтаряме в този урок. Пишете каквото искате между картите и и ще се появи като първото съдържание на вашата страница. Например:
- Следвах инструкциите на wikiHow, за да напиша HTML страница.
Добавете заглавия към текста. Организирайте страницата си със заглавни маркери, които инструктират браузъра да показва текст между тях с по-голям размер на шрифта. Тези маркери се използват и от търсачките и други инструменти, за да се определи за какво става въпрос и как е организиран вашият уебсайт.
е най-голямото заглавие и можете да създавате по-малки заглавия до
. Изпробвайте ги на вашата страница:Добре дошли в моята страница.
- Следвах инструкциите на wikiHow, за да напиша HTML страница.
Моята цел днес:
Изпълнени цели:
- Научете как да използвате заглавия.
Неизпълнени цели:
- Научете повече тагове за форматиране на текст.
Научете повече тагове за форматиране на текст. Вече сте виждали маркера „силен“, но има много други начини за форматиране на вашия текст. Опитайте тези тагове или с няколко маркера наведнъж за един и същ текстов низ. Не забравяйте да добавите крайни тагове отзад!
- Важен текст, показан с удебелен шрифт в браузъра.
- Подчертан текст, показан в курсив в браузъра.
- Текстът е малко по-малък от обикновено. Този текст автоматично ще преоразмерява, ако се използва в заглавие.
Текстът вече не е актуален, показва се с тире на тялото.- Текстът се вмъква по-късно от други документи, показва се с подчертаване.
Организирайте текст на вашата страница. Може би сте забелязали, че натискането на клавиша „enter“ не е достатъчно, за да се появи текстът на друг ред. Тези маркери могат да ви помогнат да създадете абзаци и прекъсвания на редове или да подредите текста си по други начини:
Съкратено от "абзац" (таг) ще запази целия текст между тези етикети в абзац и ще го отдели от текста отгоре и отдолу.
Този маркер ще генерира прекъсвания на редове. Не добавяйте краен етикет към него, тъй като той не пречи на друго съдържание. Използвайте този таг в стихове или адреси, а не в абзаци.Ако трябва да покажете текста много точно, този етикет задава текста вътре в него на шрифт с фиксирана ширина (всяка буква има еднаква ширина) и ви позволява да създавате интервали Заготовки и прекъсвания на редове, както искате, за редовно редактиране вместо тагове.
Този маркер определя вида на текста, който се цитира от източник.
Можете да опишете източника по-късно с цитирай карта.
Добавете невидим текст на надписа. Коментарите не се показват на уеб страницата. Те ви позволяват да се анотирате в HTML документа, без това да повлияе на съдържанието. Не добавяйте краен маркер.
- Картите, които вървят сами, без завършващи тагове, се наричат „празни тагове“.
Комбинирайте ги заедно. Най-добрият начин да запомните тези маркери е да ги използвате на вашия уебсайт. Ето пример за използване на картите в стъпките, които сте научили досега. Опитайте се да предскажете как ще се показват в браузъра, след това ги копирайте във вашия документ и разберете. реклама
Част 3 от 4: Добавяне на връзки и изображения
Научете за атрибутите. Етикетите могат да имат допълнителна информация, написана вътре в тях, наречена атрибути. Тези атрибути са представени от допълнителни думи в самите тагове, във формата име на свойството = "конкретна стойност". Например всеки HTML таг може да има атрибут заглавие:
Уводният параграф е тук.
Озаглавете абзаца „Въведение“, който ще се появи, когато задържите курсора на мишката върху абзаца на уеб страницата.
Връзки към други уебсайтове. Използване на карти за да създадете хипервръзка към която и да е друга уеб страница. Поставете URL адреса на уеб страницата, към която да се свържете с помощта на атрибута href. Ето пример, който води към уеб страницата, която четете:
Добавете атрибут id към маркера. Друг атрибут, който всеки HTML таг може да използва, е елементът "id". Във всяка карта пишете id = "vidu" или използвайте произволно име, което не съдържа интервали. Това не води до видим ефект, но ще го използваме в следващата стъпка.
- Например добавете следното към вашия документ:
Този параграф се използва като пример, за да опише как работи атрибутът id.
- Например добавете следното към вашия документ:
Връзка към елемент с определен идентификатор. Сега можем да използваме маркера за хипервръзка, , за да свържете към друго място на същата страница. Вместо URL, ще използваме символа #, последван от стойността на id, към която искаме да се свържем. Например, Този текст ще се свърже с текста с идентификатор "vidu".
- Всички HTML стойности са чувствителни към малки и големи букви. „#VIDU“ и „#vidu“ ще свързват към едно и също място.
- Ако страницата ви е достатъчно къса, за да покаже цялата страница наведнъж, вероятно няма да забележите, че нещо се случва, когато щракнете върху връзката в браузъра си. Преоразмерете прозореца, докато се появи лентата за превъртане, и опитайте отново.
Добавете снимки. Карта
е празен маркер, което означава, че не е необходим краен маркер. Цялата информация, необходима на браузъра за показване на изображението, се добавя с помощта на атрибути. Ето пример за показване на логото wikiHow, с описание за всеки атрибут отзад:
- Имоти src = "" казва на браузъра къде е снимката. (Обърнете внимание, че публикуването на снимка от чужд сайт се счита за неподходящо - и снимката ще изчезне, когато страницата вече не е активна.)
- Имоти стил = "" Може да прави много неща, но най-важното е, че се използва за задаване на ширината и височината на изображението в пиксели. (Можете вместо това да използвате отделните атрибути width = "" и height = "", но това може да доведе до странни проблеми с преоразмеряването, ако използвате CSS.)
- Имоти alt = "" е кратко описание на изображението, което потребителят ще види, ако изображението не успее да се зареди. Това се счита за изискване, тъй като се използва за екранни четци за слепи посетители на уебсайта.
Част 4 от 4: Научете повече Добавяне и достъп до вашия уеб сайт онлайн
Потвърдете вашия HTML. Проверката на HTML проверка за грешки във вашия код. Ако вашият сайт не се показва правилно, проверката може да ви помогне да намерите грешката, която причинява проблема. Също така може да ви научи повече за HTML, като определи, че кодът изглежда добре на дисплея, но вече не се препоръчва поради нови актуализации в HTML стандарта. Използването на невалиден HTML не прави сайта ви безполезен, но може да причини проблеми или да се показва нестабилно в различни браузъри.
- Опитайте безплатна онлайн услуга за проверка от W3C или потърсете друг инструмент за проверка на HTML 5 онлайн.
Научете повече тагове и атрибути. Има много други HTML тагове и атрибути и много места, за да ги научите:
- Опитайте w3schools и HTML Dog за повече уроци и пълни списъци с маркери.
- Намерете уеб страница, която ви харесва, както изглежда, след което използвайте функцията на браузъра „Преглед на източника на страница“, за да получите сами HTML кода. Копирайте го в документа си и проучете как работи.
- Прочетете други статии и научете как да създавате таблици в HTML, използвайте мета тагове, за да увеличите шансовете си да го намерите чрез търсачките, или да използвате разделение. посочете област на страницата) и обхват (използван за задаване на стила на текстовия елемент), за да подпомогнете стила чрез CSS.
Вземете уебсайта си онлайн. Изберете услуга за хостване на вашия уебсайт и след това можете да качите толкова HTML страници, колкото искате, в личния си уеб домейн. За да направите това, ще трябва да използвате FTP софтуер за качване, но много услуги за отдаване под наем предлагат и тази услуга.
- Когато правите връзка към страници или изображения, които са директно на вашия сайт, ще трябва да използвате пълния адрес. Например, ако името на вашия домейн е www.chuyengiahtmlsieudang.com, тогава текстът е в тези тагове ще води към „www.chuyengiahtmlsieudang.com/nhatky/thuhai.html“
Добавете стилове с CSS. Ако вашата HTML страница изглежда малко монотонна, опитайте да научите основите на CSS, за да добавите цветове, различни шрифтове и по-добър контрол върху това къде са поставени елементи. Свързването на CSS „таблица със стилове“ към HTML страница ще ви позволи да правите драстични промени в движение, като автоматично коригирате стила на целия текст в даден таг. Тук можете да си поиграете с основния слой за форматиране или да потърсите повече с по-подробен урок в CSS Tutorial на HTML Dog.
Добавете JavaScript към вашия уебсайт. JavaScript е език за програмиране, използван за добавяне на много функционалност към вашите HTML страници. Командите на JavaScript се вмъкват между началния и крайния етикет , и може да се използва за добавяне на интерактивни бутони, изчисляване на математически задачи и др. Научете повече в примерите за w3c. реклама
Съвети
- Декларацията за тип на документа (използвана декларация за тип документ), използвана в този урок, е "свободен преходен HTML 4.0.1" (HTML 4.0.1 не е преходен), лесен формат. за начинаещи. Използвайте () алтернатива на това браузърът да го компилира в строг HTML 5 формат, което е препоръчителният (макар и по-рядко използван) стандартен стил.
Внимание
- Целта на HTML е да запази съдържанието в глобален формат. Той не контролира представянето на вашия уебсайт, като например цвета на фона и точното разположение на елементите. Въпреки че все още има маркери, които ви позволяват да направите това, добре е да използвате CSS, за да създадете по-контролируем и последователен уебсайт.
От какво имаш нужда
- Прост текстов редактор, като NotePad или TextEdit
- Уеб браузър, като Internet Explorer или Mozilla Firefox
- (По избор) HTML редактор като Adobe Dreamweaver, Aptana Studio или Microsoft Expression Web
