Көнүгүү 1 - Веб редактор менен таанышуу
Көнүгүү 1 - Жөнөкөй веб-сайтты жасоо
Азыр болсо жөнөкөй веб-сайтты курууга убакыт келди. Бул көнүгүүнү аяктоо үчүн сиз төмөнкү кадамдарды аткарышыңыз керек:
- Веб редакторду ачып (төмөндөгү “Өзүңүз байкап көрүңүз!” баскычын басыңыз)
- Аталышын кошуу үчүн баш тегдерди, ал эми Бенжи жөнүндө абзац жазуу үчүн абзац тегдерин колдонуңуз
- Эгер убактыңыз болсо: Бенжинин сүйүктүү тамактарынын тизмесин жазыңыз: үндүк, жержаңгак майы жана жип сыры
Кээ бир HTML тегдерин өз алдынча колдонуп көрүү үчүн бул маалымдама диаграммасын колдонуңуз.
| Тег | Түшүндүрмө | Мисал |
|---|---|---|
<html></html> | HTML документин көрсөтөт. Ар бир веб-сайтачылыш теги менен башталып,жабуу теги менен аякташы керек. | Жогорудагы Code Pen мисалын караңыз. |
<!-- --> | Комментарийди көрсөтөт. Комментарийлер башка программисттер үчүн, алар веб-сайтта көрсөтүлбөйт. | <!-- Бул сап браузерде көрүнбөйт --> |
<head></head> | Веб-сайтты туура көрсөтүү үчүн браузерге маалымат берген бардык HTML элементтерин камтыйт.жанатегинин ортосундагы HTML элементтери сайтта көрсөтүлбөйт. | Жогорудагы Code Pen мисалын караңыз. |
<title></title> | Браузер өтмөгүнө атоо үчүн колдонула турган веб-сайттын аталышын камтыйт. | <head> <title> Менин веб-сайтым </title> </head> |
<body></body> | Текст жана сүрөттөр сыяктуу веб баракчада көрсөтүлгөн бардык HTML элементтерди камтыйт. | Жогорудагы Code Pen мисалын караңыз. |
<h1></h1>… <h6></h6> | Баракчанын баш аталышын/темасын аныктайт. <h1> эң маанилүү (эң чоң) аталышты/теманы аныктайт, ал эми <h6> эң мааниси төмөн (эң кичине) аталышты/теманы аныктайт. | <h1>Бул чоң аталыш болот</h1> <h4>Бул кичинекей аталыш болот</h4> |
<p></p> | Абзацты аныктайт. | <p>Иттер адамдарды сүйүүгө уйронушкон. Азыр ит адамдын эң жакын досу.</p> |
<div></div> | Сайттагы бөлүмдү аныктайт. | <div> <h1>Мен жөнүндө бардык нерсе</h1> </div> |
<img> | Сүрөт. Бул өзүн-өзү жапкан тег, бирок сиз сүрөттү кайдан алууну билиш үчүн браузерге сүрөттүн булагын көрсөтүшүңүз керек. | <img src=“aka.ms/Benji-the-dog”> |
<hr> | Горизонталдык сызыкты тартат. Баракчадагы контентти бөлүп койгунуз келсе, пайдалуу дагы бир өзүн-өзү жапкан тег. | … <hr> … |
<ul><li></li></ul> | Тизме. Тизмени баштоо үчүн <ul> тегин колдонуңуз. Тизмеге кошула турган ар бир нерсе үчүн <li> жана </li>тегин колдонуңуз. Тизмени </ul> теги менен бүтүрүңүз. | <ul> <li>Бул тизмедеги нерсе.</li> </ul> |