Задаволены

• крокі
• Метад 1 з 1: Напісанне HTML старонкі
• парады
• папярэджання
• Што вам спатрэбіцца

HTML (Мова гіпертэкставай разметкі) - гэта асноўны мову праграмавання для распрацоўкі вэб-старонак. Створаны ў якасці простага і зручнага мовы праграмавання. Большасць старонак у інтэрнэце было распрацавана з выкарыстаннем адной з формаў гэтай мовы (ColdFusion, XML, XSLT). Азнаёміўшыся з гэтым артыкулам, вы зможаце працягнуць ваша навучанне, выкарыстоўваючы іншыя рэсурсы ў інтэрнэце. Паспрабуйце пашукаць іншыя артыкулы, звязаныя з гэтай тэмай, у інтэрнэце.

крокі

Метад 1 з 1: Напісанне HTML старонкі

1. 1 Да таго, як вы пачнеце азнаямленне з адным з прадстаўленых тут крокаў, паглядзіце раздзел "Што вам спатрэбіцца".
2. 2 Што вы павінны ведаць да таго, як пачнеце разбірацца ў гэтым пытанні:
3. 3 Асновы. Вы калі-небудзь чулі пра тэгу? Тэг акружаны вуглавымі дужкамі, са словам ўнутры. Канчатковы тэг запісваецца ў такой жа форме, але з даданнем слеша пасля першай кутняй дужкі. Атрыбут - гэта дадатковае слова ў тэгу, якое выкарыстоўваецца для даданне дэталяў у тэг.
4. 4 Пачатак дакумента. У любым тэкставым рэдактары, які вы выкарыстоўваеце, ўстаўце тое, што знаходзіцца ніжэй:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   Тэг павінен быць зачынены такім жа тэгам, але са слеша пасля першай кутняй дужкі. Існуюць выключэнні, такія як тэгі META або DOCTYPE.
5. 5 DOCTYPE
   • Як правіла, большасць вэб-старонак задаюцца DOCTYPE ". Гэта дапамагае вызначыць кадыроўку, а таксама, якім чынам яна будзе ўспрымацца вэб-браўзэрамі. Большасць старонак будуць працаваць і без гэтага, "але гэта неабходна, калі вы хочаце адпавядаць (Яны рэгулююць віды кадовак інтэрнэту і спосабы іх выкарыстання). DOCTYPE для HTML 4.01 прадстаўлены ніжэй:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Гэта адзін з самых распаўсюджаных DOCTYPE, якія выкарыстоўваюцца на старонках па ўсім інтэрнэце.Спачатку, ён паказвае на тып старонкі, якая апісвае 'html', потым, ён вылучае тып кадоўкі, і ў канцы, размяшчэнне DOCTYPE, што ў выніку, апісвае старонку для вэб-браўзэра.
   • Існуюць розныя тыпы HTML (Розныя версіі, распрацаваныя ў плыні шматлікіх гадоў), напрыклад, выкарыстанне новых тэгаў, або спецыфічныя тэгі. Некаторыя тэгі састарэлі (Замест іх выкарыстоўваюцца іншыя, больш карысныя тэгі).
   • b> і i> - гэта тое, што ў дадзены момант накладзена на тэгі, таму што выкарыстоўваюцца для пераўтварэння тэксту, але не спецыфікацыі, у выніку, на змену ім прыходзяць іншыя тэгі. тэг strong> з'яўляецца заменай для b>, і em>, Заменай для i>.
   • Гэта важна, што папярэднія тэгі замяняюцца на тэгі, якія ўяўляюць з сябе больш, чым фарматаванне. Калі тэкст пераведзены, то не толькі фарматаванне, але і яго сэнс застаецца такім жа. Гэта семантычна правільна.
   • У XHTML версіі 2.0, тэгі b> і i> не выкарыстоўваюцца, таксама, як і ў HTML версія 3+.
6. 6 HTML "Правіла інкапсуляцыі".
   • Давайце паглядзім на больш важныя тэгі, якія выкарыстоўваюцца ў цяперашні час. Падчас стварэння старонкі, выкарыстоўваецца простая структура. Калі быў адкрыты тэг, то ў выніку, ён павінен быць зачынены. Гэта ставіцца да ўсёй структуры. Тут прадстаўлены правільны прыклад структуры XHTML макета:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • head>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • title> Hello World! / title>
   • / Head>
   • body>
   • h1> Hello World! / h1>
   • / Body>
   • / Html>
   • Прыклад кода, які выдае паведамленне Hello World. Гэта называецца тэстам Hello World.
7. 7 загаловак
   • Загаловак вэб-старонкі - гэта змест паміж тэгам head>. Гэта змест не можа быць прагледжана з боку карыстальніка (толькі назва, якое паказваецца ў назве старонкі). Інфармацыя паміж тэгамі head>, Можа заключаць іншыя тэгі, такія як:
     
     
     • Тэг META, выкарыстоўваецца для інфармацыі, якая карысная для пошукавых сістэм і іншых утыліт.
     • Тэг LINK, які стварае сувязь паміж дакументамі, напрыклад, для Стыляў (CSS).
     • Тэг SCRIPT, у гэта ўваходзіць практычна любое вэб-кадаваньне, з магчымасцю аддаленага доступу (з іншага дакумента).
     • Тэг STYLE, што па сутнасці, з'яўляецца стылем, які можа быць ужыты на старонцы.
     • Тэг TITLE, гэта назва, якое з'яўляецца ў якасці назвы старонкі ў вашым вэб-браўзэры.
   • Давайце паглядзім дэманстрацыю некаторых з іх у прыкладзе загалоўка, узятага з гэтага вэб-сайта (ён быў скарочаны):
     • head>
     • title> ... / title>
     • meta name = "description" content = "..." />
     • link rel = "stylesheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • script type = "text / javascript" src = "..."> / script>
     • / Head>
       
       Калі вы не заўважылі, былі выдзелены асобныя тэгі, з выдаленнем рэальнай інфармацыі. Прыклад даволі кароткі, з паказам, практычна, кожнага тэга, які можа знаходзіцца ў head>, За выключэннем HTML comment (Мы пагаворым пра гэта ў простых тэгах).
8. 8 Простыя тэгі ўсюды
   • Давайце рухацца далей і паглядзім іншыя тэгі. Будзьце ўважлівыя з выкарыстаннем тэгаў і памятайце аб правіле вялікага пальца, "Інкапсуляцыя."
     
     
     • strong> Вылучае важны тэкст.
     • small> Робіць меншы памер тэксту. Памер шрыфта вымяраецца ў стандартных адзінках ад 1 да 7, 3 - гэта памер тэксту па змаўчанні. .
     • pre> Вызначае блок фарматаванага тэксту. Як правільна, такі тэкст набіраецца шрыфтам аднаго памеру і з усімі прабеламі паміж словамі.
     • em> Паказвае тэкст у выглядзе фразы.
     • del> перакрэслівае тэкст.
     • ins> Вызначае тэкст, які быў устаўлены ў дакумент.
     • h1> Адзін з многіх тэгаў загалоўка. Тэгі такога роду, пачынаюцца з 'h', з адрозненнем у лічбе. Пераканайцеся, што зачыніце тэг з такой жа лічбай.
     • p> Вызначае параграф.
     • ! --- ... ---> У адрозненні ад іншых тэгаў, каментар павінен знаходзіцца ўнутры самога тэга. Дадзеная інфармацыя бачная толькі, калі праглядаецца код.
     • blockquote> Паказвае цытату, можа быць выкарыстаны з тэгам cite>.
     • Некалькі прыкладаў, прадстаўленых вышэй, не з'яўляюцца поўным спісам існуючых тэгаў. Каб даведацца пра іншых, наведайце.
9. 9 Стварэнне зразумелай структуры
   • Старонкі сканструяваныя для ўтрымлівання дадзеных у простых сэтах з тэгаў так, каб мы маглі разабраць інфармацыю ў параграфах. Кампутар распазнае дадзеныя, ён не ведае пра кантэксце або ідэйнай сувязі. Мы павінны ствараць зразумелыя для кампутара HTML старонкі. Гэта дасягаецца пры выкарыстанні тэга div. Ён дапамагае ствараць велізарная колькасць старонак. Яго можна стылізаваць c CSS, і гэта прасцей, чым стварэнне вялікіх кодавых табліц для макета.
     • div> Гэты тэг з'яўляецца асаблівым, таму што яго можна стылізаваць і выкарыстоўваць асобныя блокі інфармацыі, якія будуць зразумелыя і карыстачу, і кампутара.
   • Давайце паглядзім на просты макет HTML, які выкарыстоўвае тэг div.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • head>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • title> Hello World! / title>
     • / Head>
     • body>
     • h1> Hello World! / h1>
     • div id = "contentOne">
     • p> This is some text in div # contentOne. / p>
     • div>
     • p> A paragraph in a sub-section of div # contentOne / p>
     • / Div>
     • / Div>
     • / Body>
     • / Html>
   • Выкарыстанне тэгаў div> дапамагае з пошукам і зменай стыляў, падчас працы з CSS і Javascript. HTML будзе выкарыстоўваць розную кадыроўку для працы з CSS стылямі і Javascript, каб стварыць лепшае і спагадлівае ўзаемадзеянне з карыстальнікам.

парады

• Пасля чытання дадзенага артыкула, ня спыняйцеся і не думайце, што вы даведаліся усё, што трэба. Заўсёды ёсць нешта, чаму можна навучыцца, асабліва ў дадзенай тэхналогіі.
• Вучыцеся, разбірайцеся, і пішыце код.
• Звярніце ўвагу, што некаторыя тэгі выкарыстоўваюць толькі>. Параграф і br - адны з прыкладаў. Іншыя тэгі, адкрытыя з>, маюць патрэбу ў далейшым закрыццё. Напрыклад, "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