5 стъпки за разбиране на основния HTML код

HTML е жизненоважна част от мрежата, каквато я познаваме. И докато малко уеб дизайнери създават страници чрез ръчно въвеждане на HTML, все още е удобно да знаете малко за него.

Ще разгледаме някои основи на езика, включително какво всъщност представлява HTML, някои основни понятия и как той взаимодейства с други езици. Мислете за това като за краш курс „HTML за манекени“.

Основи на HTML: Какво е HTML?

HTML означава Език за маркиране на хипертекст . И въпреки че понякога е свързан с езици за програмиране, това не е точно.

Като маркиращ език , HTML ви позволява само да създадете оформление на дисплея на страници. Истина програмен език подобно на Java или C ++, съдържа логика и команди, които се изпълняват.

Въпреки че е прост, HTML е в основата на всяка страница в мрежата. Той е отговорен за това какъв текст се показва като удебелен, добавяйки изображения и свързвайки към други страници. Имаме HTML FAQ, който обяснява повече.

Можете да щракнете с десния бутон върху повечето уеб страници в браузъра си и да изберете Виж източника на страницата или подобен, за да видите HTML зад тях. Това вероятно също ще съдържа много код, който не е HTML, но можете да пресеете това.

Дори и да имате нулев опит с маркиране или езици за програмиране, научаването малко на HTML ще ви направи по -информиран уеб потребител. Нека преминем през пет основни стъпки, за да ви помогнем да разберете как работи HTML. Ще предоставим примери по пътя.

Стъпка 1: Разбиране на концепцията за етикетите

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

Повечето тагове идват по двойки, за да обвият засегнатия текст вътре в тях. Ето един прост пример (

тагът прави текст удебелен ; ще обсъдим това след малко.)

This is some bold text .
Забележете как затварящият маркер започва с наклонена черта (/). Това означава затварящ маркер, което е важно. Ако не затворите маркер, всичко от началото нататък ще има този атрибут.
как да поставите homebrew на wii

Не всички маркери обаче имат чифт. Някои HTML елементи, т.нар празни елементи , нямат съдържание и съществуват сами. Пример е
tag, което е прекъсване на ред. Можете да „затворите“ такива тагове, като добавите наклонена черта (като напр
), но не е строго необходимо.

Стъпка 2: HTML оформлението на скелета

Подходящият HTML документ трябва да има определени етикети, така че да бъде изложен правилно. Това са съществените части:

Всеки HTML документ трябва да започва с | _+_ | да се декларира като такъв. По този начин неговият затварящ маркер, | _+_ | , е последният елемент в HTML файл.

След това | _+_ | раздел включва информация като заглавието на страницата, различни скриптове, които се изпълняват на страницата и други подобни. Както подсказва името, това обикновено идва веднага след първоначалното | _+_ | етикет. Крайният потребител не вижда много от съдържанието в тези тагове.

И накрая, | _+_ | таг съдържа текста на страницата, който читателят вижда (плюс много повече). Тук ще намерите изображения, връзки и др.

Тъй като
раздел съставлява по -голямата част от HTML документ, останалата част от нашето ръководство разглежда елементите, които се отнасят до него.

Стъпка 3: Основни HTML тагове за форматиране

След това нека разгледаме някои често срещани тагове, които съставят HTML документи. Разбира се, не е възможно да се обхване всеки елемент, затова ще прегледаме някои от най -важните. Покрихме още много примери за HTML ако това не ви удовлетворява.

Ако тези етикети изглеждат доста елементарни, не забравяйте, че HTML е създаден през далечната 1993 г. Мрежата тогава е била много текстово базирана в ранните си етапи.

Просто форматиране на текст
HTML поддържа основни текстови стилове, каквито ще намерите в Microsoft Word:

| _+_ | таговете правят текст удебелен .

| _+_ | тагове (което означава „акцент“) ще курсив текст.

HTML също поддържа по -старите
таг за удебелен и
за курсив. За предпочитане е обаче да използвате горните.

Накратко,
и
показват как трябва да се разбира нещо, докато последните тагове само ви казват как трябва да изглежда. Тези предишни тагове са по -достъпни за екранни четци, използвани от хора с увредено зрение.

Параграф и други раздели
HTML
tag ви позволява да дефинирате част от документа. Обикновено това се свързва с CSS (вижте по -долу), за да форматирате раздел по определен начин.

The

таг ви позволява да разделяте текста на абзаци. Браузърите автоматично ще поставят малко място преди и след това, което ви позволява естествено да разбивате текст.

Можете да добавите заглавки към вашия документ и да улесните следването му с помощта на

през

тагове. H1 е най -важният заглавие, докато H6 е най -малко важен. Почти всяка статия на MakeUseOf използва заглавки H2 и H3 за организиране на информация.

Удряне Въведете за да добавите прекъсвания на редове във вашия HTML документ всъщност няма да ги покаже. Вместо това можете да използвате

за да добавите прекъсване на ред.

Ето пример, който използва всички тези:

Стъпка 4: Вмъкване на изображения

Изображенията са жизненоважна част от повечето уеб страници. Можете да ги добавите лесно с HTML и дори да зададете различни свойства за тях.

Вмъквате изображение с помощта на

етикет. Комбинирайки това с

атрибут ви позволява да посочите откъде искате да се зареди изображението.

Друг важен атрибут на
стоп кодова страница_fault_in_nonpaged_area
тагове е
. Заместващият текст ви позволява да опишете изображението за екранни четци или в случай, че изображението не се зарежда правилно. Можете да преместите с мишката върху изображение, за да видите заместващия му текст.

Използвай
и

елементи за определяне на броя пиксели, при които се появява изображението.

Сложете всичко заедно и етикетът на изображението изглежда така:

Example Heading This is one paragraph. This is a second paragraph split between two lines.
Стъпка 5: Добавяне на връзки

Световната мрежа няма да е много мрежа без връзки към други страници. Използвайки

етикет, можете да се свържете с други страници на всеки текст.

Вътре в
src
маркер,

атрибут казва къде свързвате. Просто поставянето на URL адреса ще работи добре. Можете да използвате
alt
елемент, за да добавите малко текст, който се появява, когато някой задържи курсора на мишката върху връзката.

Основната връзка изглежда така:

width
The
height
tag има много други възможни елементи, но няма да се впускаме в тях тук.

Как HTML се свързва с CSS и JavaScript

Разгледахме основите на HTML и как той създава уеб страница. Но както можете да си представите, само HTML не го изрязва за съвременната мрежа. Простите HTML уеб страници бяха често срещани в дните „Web 1.0“, когато повечето уебсайтове не бяха нищо повече от статичен текст.

Но сега имаме много повече. CSS (Cascading Style Sheets) е език, използван за описание на това как трябва да изглежда текстът, който сте подготвили в HTML. Запомнете

таг, който обсъждахме? Вътре в този (и други тагове) можете да определите a

атрибут. След това в придружаващия ви CSS документ можете да напишете инструкции за това

трябва да изглежда.

Можете да дефинирате тези стилови елементи вградени във вашия HTML код, но това се счита за лоша практика, тъй като е много по -трудно да се поддържа. Научете повече с тези прости примери за CSS . Също така проверете как да оптимизирате вашите CSS файлове .

JavaScript

Видяхме, че HTML определя съдържанието, а CSS определя външния вид. JavaScript, последният член на триото, жизненоважно за мрежата, позволява на уеб страниците да реагират на действията на хората, без да зареждат нова страница всеки път.

Например JavaScript позволява на уебсайт да ви предупреди, че въведената от вас парола не отговаря на нейните изисквания, преди да се опитате да я изпратите. Уеб дизайнерът може да използва JavaScript за циклично преминаване на изображения в слайдшоу или да подкани потребителя за въвеждане.

Това са само няколко елементарни примера. JavaScript е скриптов език, който може да направи много и е сравнително много по -сложен от HTML и CSS. Вижте нашия преглед на JavaScript за много повече.

Разглеждането на пълния обхват на уеб дизайна е извън обхвата на тази статия, но е достатъчно да се каже, че HTML взаимодейства с други езици, за да създава уеб страниците, които познаваме днес.

Еволюцията на HTML

Важно е да се отбележи, че HTML не е статичен. HTML е претърпял няколко ревизии, като най -новата е HTML 5. По -специално, този стандарт поддържа вграждане на родно видео, вместо да разчита на собствени формати като Adobe Flash.

Новите итерации на HTML също декларират някои архаични тагове като отхвърлени от време на време. Те включват ужасни тагове като
href
и
title
(с този свитък и флаш текст съответно), често срещани през уебсайта през 90 -те години. Затова имайте предвид, че стандартите се променят с течение на времето.

Малко познания по HTML вървят далеч

Направихме кратка обиколка как работи HTML документ. Сега знаете основите на това как са структурирани уеб страниците. Дори и да не продължавате да създавате уеб страници, вие сте малко по -наясно с мрежата, която използвате всеки ден.
команди за командния ред windows 10

За да научите повече, надградете уменията си за уеб разработка с основни инструменти и след това проверете нашето ръководство за това как да проектирате първия си уебсайт .

Снимка: Беляевски/ Depositphotos
Дял Дял Туит електронна поща 5 съвета за зареждане на вашите VirtualBox Linux машини
Уморени ли сте от лошото представяне на виртуалните машини? Ето какво трябва да направите, за да увеличите производителността на VirtualBox.
Прочетете Напред Свързани теми

Програмиране

HTML

Уеб разработка

JavaScript

Инструменти за уеб администратори

Програмиране

HTML5

За автора Бен Стегнер(1735 публикувани статии)
Бен е заместник -редактор и мениджър по включване в MakeUseOf. Той напусна ИТ работата си, за да пише на пълен работен ден през 2016 г. и никога не е поглеждал назад. Той отразява технически уроци, препоръки за видео игри и повече като професионален писател повече от седем години.
Още от Бен Стегнер
Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате