Кажете Hello на езика на HTML5 с неговите елементи: h2 elements, Paragraph p Element
Здравейте!
С уроците за HTML5 ще ви науча с много лесен метод да познавате този език, който стои зад всяка интернет страница на вашия компютър или мобилно устройство.
Да започваме! В тези уроци няма да е нужно никаква инсталация на каквато и да е програма на вашия компютър.
Началото:
Идеята за уроците черпя от . Натиснете това лого...
Ще се отвори страницата на FreeCodeCamp, която има следният вид:
Регистриране За да се регистрирате тук, трябва да имате валиден e-mail. От бутона ще отидете на страницата за влизане или регистрация в сайта. За влизане в сайта, ние изпозлваме опцията Продължи с Google.
Имаме избор от много безплатни курсове. Първият, който сме посочили е базовият за респонсив дизайн от 300 часа, с който при успешно направени всички уроци ще вземете и сертификат.
Нашият първи курс е Basic HTML5.
Вижте видеото, за да видите новостите по дизайна и влизането в сайта.
Нека започнем с първото предизвикателство - Say Hello to HTML Elements.
Екранът, който виждате е следния:
ЗАБЕЛЕЖКА: Изображенията в част от уроците са със стерия дизайн на Freecodecamp.com
Можете да редактирате кода в текстовия редактор, който е вграден в тази уеб страница. Средният прозорец с тъмен фон.
Виждате ли кода в текстовия ви редактор, който казва <h1> Heloo </ h1>? Това е HTML елемент. Повечето HTML елементи имат начален маркер/tag и затварящ маркер/tag.
Отварящите тагове/таг изглеждат така: <h1>
Затварящите tags изглеждат така:</ h1>
Имайте предвид, че единствената разлика между таговете за отваряне и затварящите тагове е, че затварящите маркери имат наклонена черта след тяхната ъглова скоба.
Всяко предизвикателство има тестове, които можете да стартирате по всяко време, като кликнете върху бутона "Run tests/Изпълни тестове"
След като преминeте всички тестове, можете да преминете към следващото предизвикателство.
За да преминете теста към това предизвикателство, променете текста на елемента си, като кажете "Hello World" вместо "Hello".
На екрана ви трябва да е изписано:
След това кликнете върху бутона "Run tests".
Ако сте изпълнили вярно задачата излиза този екран с поздравяващ ви надпис.
За да преминете на следващата стъпка натиснете бутона Submit...
С това преминахте на следващото
Урок 2. Headline with the h2 Element
Tук ще научите как работи елемента h2.
В следващите няколко предизвикателства ще създадем приложение HTML5, което ще изглежда така:
Въвеждайки h2 елемент ще създаде елемент h2 на уебсайта ви.
Този елемент казва на браузъра за структурата на уебсайта ви. h1 елемента се използва за основните заглавия, докато h2 елементи обикновено се използват за подпозиции. Съществуват и h3, h4, h5 и h6 елементи, които показват различни и нови секции.
Задачата ви: Добавете h2 таг, който казва "CatPhotoApp", за да създадете втори HTML елемент под елемента h1 "Hello World".
Така трябва да изглежда кода ви на тази стъпка. Обърнете внимание на дясно стоящия телефон с екран, на който в реално време виждате какво сте направили с вашия код. Готовите сте да натиснете бутона Run tests.
Урок 3. Inform with the Paragraph Element
В HTML5 има p елемент, който е предпочитан елемент за текстoве с нормален размер в уебсайтовете. P е кратко от "Paragraph"/абзац. Отварящ таг за р-елемент е <p>, затварящ e </p>.
Можете да създадете елемент p така: <p> I'am a p tag!</ p>
Задачата ви: Създайте елемент p под реда с h2-елемента и вмъкнете на мястото на I'am a p tag! текст Hello Paragraph.
И натиснете бутона Run tests.
Успешно преминахте и стъпката за р-елемент на HTML5. Натиснете Submit бутона.
. Натиснете това лого...
ще отидете на страницата за влизане или регистрация в сайта.
