HTML баракчасын кантип түзүү керек

Видео: 1) HTML. WEB - түзүүчү. Киришуу. Интернет жана "IT-Академиядан Кыргызстанга салам" баракчасын түзүү

Мазмун

Кадамдар
Метод 1дин 1: HTML баракчасын жазуу
Кеңештер
Эскертүүлөр
Сага эмне керек

HTML (Гипертекстти белгилөө тили) веб -баракчаларды иштеп чыгуу үчүн негизги программалоо тили. Жөнөкөй жана ыңгайлуу программалоо тили катары түзүлгөн. Интернеттеги барактардын көбү бул тилдин формаларынын бирин колдонуу менен иштелип чыккан (ColdFusion, XML, XSLT). Бул макаланы окугандан кийин интернеттеги башка ресурстарды колдонуу менен тренингиңизди уланта берсеңиз болот. Бул темага байланыштуу башка макалаларды интернеттен издөөгө аракет кылыңыз.

Кадамдар

Метод 1дин 1: HTML баракчасын жазуу

1 Бул жерде көрсөтүлгөн кадамдардын бири менен таанышууну баштоодон мурун, "Сизге эмне керек" бөлүмүн караңыз.
2 Бул маселени түшүнө баштоодон мурун эмнени билишиңиз керек:
3 Негиздер. Тег жөнүндө уккан белеңиз? Тег бурчтук кашаа менен курчалган, анын ичинде сөз бар. Соңку тег ошол эле формада жазылат, бирок биринчи бурч кашаанын артынан кыйшык кошуу менен. Атрибут - бул тегге кошумча сөздөрдү кошуу үчүн колдонулган кошумча сөз.
4 Документтин башталышы. Колдонуп жаткан текст редакторуна төмөнкүлөрдү чаптаңыз:
html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
Тег ошол эле тег менен жабылышы керек, бирок биринчи бурч кронштейнден кийин кыйшык сызык менен. Тегдер сыяктуу өзгөчөлүктөр бар META же DOCTYPE.
5 DOCTYPE
- Адатта, веб -баракчалардын көбү коюлат DOCTYPE ". Бул коддоону жана веб -браузерлер тарабынан кандай кабыл алынарын аныктоого жардам берет. Көпчүлүк барактар ансыз иштейт, бирок "эгер сиз дал келгиңиз келсе, бул зарыл (Алар Интернеттеги коддоо түрлөрүн жана алардын колдонулушун жөнгө салышат)... HTML 4.01 үчүн DOCTYPE төмөндө келтирилген :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Бул бирөө эң кеңири таралган DOCTYPE интернеттин бардык беттеринде колдонулат.Биринчиден, ал 'html'ди сүрөттөгөн беттин түрүн көрсөтөт, андан кийин коддоонун түрүн баса белгилейт жана акырында веб браузер үчүн баракты сүрөттөгөн DOCTYPEдин жайгашкан жери.
- HTMLдин ар кандай түрлөрү бар (жылдар бою иштелип чыккан ар кандай версиялар), мисалы, жаңы тегдерди же белгилүү тегдерди колдонуу. Кээ бир тегдер эскирген (анын ордуна башка пайдалуу тегдер колдонулат).
- б> жана мен> - бул азыр тегдерге жүктөлгөн нерсе, анткени алар текстти өзгөртүү үчүн колдонулат, бирок спецификацияны эмес, натыйжада алардын ордуна башка тегдер келет. Тэг күчтүү> үчүн алмаштыруу болуп саналат б>, жана em>, үчүн алмаштыруу мен>.
- Мурунку тегдердин форматталгандан көп тегдер менен алмаштырылышы маанилүү. Эгерде текст которулган болсо, анда форматтоо гана эмес, мааниси да ошол бойдон калат. Бул семантикалык жактан туура.
- XHTML 2.0 версиясында b> жана мен> колдонулган эмес, жөн эле HTML версиясында 3+.
6 HTML "инкапсуляция эрежеси".
- Келгиле, азыр колдонулуп жаткан маанилүү белгилерди карап көрөлү. Баракты түзүү учурунда жөнөкөй структура колдонулат. Эгерде тэг ачылса, натыйжада, ал жабылышы керек... Бул бүт структурага тиешелүү. Бул жерде XHTML жайгашуу структурасынын жарактуу мисалы:
- ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Катуу // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- html xmlns = "http://www.w3.org/1999/xhtml">
- баш>
- мета http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
- title> Hello World! / title>
- / баш>
- дене>
- h1> Hello World! / h1>
- / дене>
- / html>
- Кабарды чыгаруучу коддун үлгүсү Салам дүйнө... Бул тест деп аталат Салам дүйнө.
7 Аталышы
- Веб баракчанын аталышы - бул тегдин ортосундагы мазмун баш>... Бул мазмунду колдонуучу көрө албайт (барактын аталышында көрсөтүлгөн гана аталыш). Тегдердин ортосундагы маалымат баш>, башка тегдерди камтышы мүмкүн, мисалы:
  - META теги издөө системаларына жана башка коммуналдык кызматтарга пайдалуу маалымат үчүн колдонулат.
  - Документтердин ортосунда шилтеме түзүүчү LINK теги, мисалы Styles (CSS) үчүн.
  - SCRIPT теги, бул аралыктан (башка документтен) кирүү мүмкүнчүлүгү бар дээрлик бардык веб -коддорду камтыйт.
  - STYLE теги, бул баракка колдонула турган стиль.
  - TITLE теги - бул веб браузериңизде барактын аталышы катары көрүнүүчү аталыш.
- Келгиле, бул веб -сайттан алынган мисалдын башынан кээ бирлеринин демосун көрөлү (ал кыскартылды):
  - баш>
  - аталышы> ... / аталышы>
  - мета аты = "description" content = "..." />
  - шилтеме rel = "стилдер жадыбалы" type = "text / css" href = "..." />
  - мета http-equiv = "content-type" content = "text / html; charset = UTF-8" />
  - style type = "text / css" media = "all"> ... / style>
  - скрипт түрү = "text / javascript" src = "..."> / script>
  - / баш>
    
    Эгер сиз байкабаган болсоңуз, анда жеке маалыматтар такталган, ал эми чыныгы маалымат алынып салынган. Мисал өтө кыска, табууга мүмкүн болгон дээрлик бардык тегдерди көрсөтөт баш>HTML комментарийден башка (Биз бул тууралуу жөнөкөй тегдерде сүйлөшөбүз).
8 Бардык жерде жөнөкөй тегдер
- Келгиле, башка тегдерди көрөбүз. Тег коюуңузда этият болуңуз жана "инкапсуляция" эрежесин унутпаңыз.
  - күчтүү> маанилүү текстти баса белгилейт.
  - кичине> Текстти кичирейтет. Шрифт өлчөмү 1ден 7ге чейин стандарттык бирдиктер менен өлчөнөт, 3 - демейки тексттин өлчөмү. ...
  - pre> Бай тексттин блогун аныктайт. Туура болгондой, мындай текст бирдей өлчөмдөгү шрифтте жана сөздөрдүн ортосундагы бардык боштуктар менен терилет.
  - em> Текстти фраза катары көрсөтөт.
  - del> Текстти жок кылат.
  - ins> Документке киргизилген текстти аныктайт.
  - h1> Көптөгөн баш тегдердин бири. Мындай теги "с" менен башталат, сандын айырмасы менен. Ошол эле сандагы тегди жабууну тактаңыз.
  - p> Абзацты аныктайт.
  - ! --- ... ---> Башка тегдерден айырмаланып, комментарий тегдин ичинде болушу керек. Бул маалымат кодду көргөндө гана көрүнөт.
  - blockquote> Цитатаны көрсөтөт, cite> теги менен колдонсо болот.
  - Жогорудагы бир нече мисалдар бар тегдердин толук тизмеси эмес. Башкалар жөнүндө билүү үчүн, баш багыңыз.
9 Так структураны түзүү
- Барактар маалыматты теги жөнөкөй топтомдо кармоо үчүн иштелип чыккан, ошондуктан биз маалыматты абзацтарга бөлө алабыз. Компьютер маалыматтарды тааныйт; контекст же концептуалдык байланыш жөнүндө билбейт. Биз компьютерге ылайыктуу HTML барактарын түзүшүбүз керек. Бул div тегин колдонуу менен ишке ашат. Бул көптөгөн барактарды түзүүгө жардам берет. Бул CSS менен стилдештирилиши мүмкүн жана макет үчүн чоң коддуу таблицаларды түзүүдөн оңой.
  - div> Бул тег өзгөчө, анткени аны стилдештирүүгө жана колдонуучу да, компьютер да түшүнө турган маалыматтын өзүнчө блокторун колдонууга болот.
- Div тегин колдонгон жөнөкөй HTML макетин карап көрөлү.
  - ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Катуу // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  - html xmlns = "http://www.w3.org/1999/xhtml">
  - баш>
  - мета http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
  - title> Hello World! / title>
  - / баш>
  - дене>
  - h1> Hello World! / h1>
  - div id = "contentOne">
  - p> Бул div # contentOne ичиндеги кээ бир текст. / p>
  - div>
  - p> div # contentOne / p> бөлүмүнүн бир абзацы
  - / div>
  - / div>
  - / дене>
  - / html>
- Div> тегдерин колдонуу CSS жана Javascript менен иштөөдө стилдерди табууга жана өзгөртүүгө жардам берет. HTML жакшы жана жооптуу колдонуучу тажрыйбасын түзүү үчүн CSS стили жана Javascript менен иштөө үчүн ар кандай коддоону колдонот.

Кеңештер

Бул макаланы окугандан кийин, токтоп калбаңыз жана билишиңиз керек болгон нерсенин баарын үйрөндүм деп ойлобоңуз. Ар дайым үйрөнө турган нерсе бар, өзгөчө бул технологияда.
Кодду үйрөнүңүз, түшүнүңүз жана жазыңыз.
Белгилей кетсек, кээ бир тегдер> гана колдонушат. Пара жана бр кээ бир мисалдар. > Менен ачылган башка тегдер дагы жабылышы керек. Мисалы, "div> / div>".
Адамдар жаңы ачылыштарды күтүшөт, ошондуктан кайра ойлоп табыңыз, дизайн же код жасаңыз.
Көп нерсени үйрөнгөндөн кийин, сервердик программалоону үйрөнүп көрүңүз.
CSS жана JavaScript менен иштөөнү үйрөнүңүз.

Эскертүүлөр

Унутпаңыз, HTML мазмунду түзөтүү жөнүндө. Бул HTML мазмунду таанылган форматта сактоо үчүн гана колдонулат дегенди билдирет. Башка өзгөртүүлөр CSS сыяктуу башка технологияларды колдонуу менен жасалышы керек. Бул ошондой эле "Семантикалык жактан туурабашкалар муну моюнга албаса да. Башка программалоо тилдери веб баракчаларды түзүүгө жардам берет (CSS, Javascript жана XML). HTML - контент конструктору.

Сага эмне керек

ANSI коддоону колдогон текст редактору
Internet Explorer же Mozilla Firefox сыяктуу веб -браузер
(Милдеттүү эмес) wysiwyg же wykiwyg HTML редактору, мисалы Adobe Dreamweaver, Aptana Studio же Microsoft Expression Web