Kā izveidot HTML lapu

Autors: Florence Bailey
Radīšanas Datums: 20 Martā 2021
Atjaunināšanas Datums: 1 Jūlijs 2024
Anonim
HTML Tutorial for Beginners - 01 - Creating the first web page
Video: HTML Tutorial for Beginners - 01 - Creating the first web page

Saturs

HTML (hiperteksta iezīmēšanas valoda) ir galvenā programmēšanas valoda tīmekļa lapu izstrādei. Izveidota kā vienkārša un ērta programmēšanas valoda. Lielākā daļa interneta lapu ir izstrādātas, izmantojot kādu no šīs valodas formām (ColdFusion, XML, XSLT). Pēc šī raksta izlasīšanas jūs varat turpināt mācības, izmantojot citus interneta resursus. Mēģiniet meklēt internetā citus rakstus, kas saistīti ar šo tēmu.

Soļi

1. metode no 1: HTML lapas rakstīšana

  1. 1 Pirms sākat iepazīties ar kādu no šeit aprakstītajām darbībām, skatiet sadaļu “Kas jums būs nepieciešams”.
  2. 2 Kas jums jāzina, pirms sākat izprast šo problēmu:
  3. 3 Pamati. Vai esat kādreiz dzirdējuši par tagu? Tagu ieskauj leņķa kronšteini ar vārdu iekšpusē. Beigu tags ir uzrakstīts tādā pašā formā, bet pēc slīpsvītras pēc pirmās leņķa iekavas. Atribūts ir neobligāts vārds tagā, ko izmanto, lai atzīmei pievienotu informāciju.
  4. 4 Dokumenta sākums. Neatkarīgi no izmantotā teksta redaktora ielīmējiet šo:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> liels> / liels>
    Tagam jābūt aizvērtam ar to pašu tagu, bet ar slīpsvītru aiz pirmās leņķa kronšteina. Ir izņēmumi, piemēram, tagi META vai DOCTYPE.
  5. 5 DOCTYPE
    • Parasti lielākā daļa tīmekļa lapu ir iestatītas DOCTYPE ”. Tas palīdz noteikt kodējumu, kā arī to, kā to uztvers tīmekļa pārlūkprogrammas. Lielākā daļa lapu darbosies bez tā, “bet tas ir nepieciešams, ja vēlaties saskaņot (tie regulē kodējumu veidus internetā un to izmantošanu)... Tālāk ir parādīts HTML 4.01 DOCTYPE:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // LV" "http://www.w3.org/TR/html4/strict.dtd"> Šis ir viens no visbiežāk sastopamajiem DOCTYPE tiek izmantots interneta lapās.Pirmkārt, tas norāda uz lapas veidu, kas apraksta “html”, pēc tam izceļ kodēšanas veidu un, visbeidzot, DOCTYPE atrašanās vietu, kas rezultātā raksturo tīmekļa pārlūkprogrammas lapu.
    • Ir dažādi HTML veidi (gadu gaitā izstrādātas dažādas versijas), piemēram, izmantojot jaunus tagus vai īpašus tagus. Daži tagi ir novecojuši (to vietā tiek izmantoti citi noderīgāki tagi).
    • b> un i> - tas ir tas, kas pašlaik tiek uzlikts tagiem, jo ​​tie tiek izmantoti teksta pārveidošanai, bet ne specifikācijas, tāpēc to vietā nāk citi tagi. Tag stiprs> ir aizstājējs b>, un em>, aizstājējs i>.
    • Ir svarīgi, lai iepriekšējie tagi tiktu aizstāti ar tagiem, kas ir vairāk nekā formatējums. Ja teksts tiek tulkots, tad ne tikai formatējums, bet arī tā nozīme paliek nemainīga. Tas ir semantiski pareizi.
    • XHTML versijā 2.0 b> un i> netiek izmantots, tāpat kā HTML versijā 3+.
  6. 6 HTML "Iekapsulēšanas noteikums".
    • Apskatīsim svarīgākos pašlaik izmantotos tagus. Lapas izveides laikā tiek izmantota vienkārša struktūra. Ja atzīme tika atvērta, tad to vajadzētu aizvērt... Tas attiecas uz visu struktūru. Šeit ir derīgs XHTML izkārtojuma struktūras piemērs:
    • ! 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">
    • galva>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • nosaukums> Sveika pasaule! / title>
    • / galva>
    • ķermenis>
    • h1> Sveika pasaule! / h1>
    • / ķermenis>
    • / html>
    • Koda paraugs, kas izdod ziņojumu Sveika pasaule... To sauc par testu Sveika pasaule.
  7. 7 Virsraksts
    • Tīmekļa lapas nosaukums ir saturs starp tagu galva>... Šo saturu lietotājs nevar apskatīt (tikai lapas virsrakstā redzamo nosaukumu). Informācija starp tagiem galva>, var pievienot citus tagus, piemēram:

      • META tagu izmanto, lai iegūtu informāciju, kas noder meklētājprogrammām un citiem komunālajiem pakalpojumiem.
      • Tags LINK, kas izveido saiti starp dokumentiem, piemēram, stiliem (CSS).
      • SCRIPT tags, tas ietver gandrīz jebkuru tīmekļa kodēšanu ar iespēju attālināti piekļūt (no cita dokumenta).
      • STYLE tags, kas būtībā ir stils, ko var lietot lapai.
      • Tags TITLE ir nosaukums, kas jūsu tīmekļa pārlūkprogrammā tiek parādīts kā lapas nosaukums.
    • Apskatīsim dažu no tiem demonstrāciju galvenes paraugā, kas ņemts no šīs vietnes (tas ir saīsināts):
      • galva>
      • nosaukums> ... / virsraksts>
      • meta nosaukums = "description" content = "..." />
      • saite rel = "styleheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • stila tips = "text / css" media = "all"> ... / style>
      • skripta veids = "text / javascript" src = "..."> / script>
      • / galva>

        Ja neesat pamanījis, atsevišķie tagi ir izcelti, un faktiskā informācija ir noņemta. Piemērs ir diezgan īss, parādot gandrīz katru tagu, ko var atrast galva>izņemot HTML komentāru (mēs par to runāsim vienkāršos tagos).
  8. 8 Vienkārši tagi visur
    • Turpināsim un redzēsim citus tagus. Esiet piesardzīgs ar marķēšanu un atcerieties īkšķa noteikumu “Iekapsulēšana”.

      • spēcīgs> uzsver svarīgu tekstu.
      • mazs> Samazina tekstu. Fonta lielums tiek mērīts standarta vienībās no 1 līdz 7, 3 ir noklusējuma teksta izmērs. ...
      • pre> Definē bagātināta teksta bloku. Kā pareizi, šāds teksts tiek ierakstīts tāda paša izmēra fontā un ar atstarpēm starp vārdiem.
      • em> Rāda tekstu kā frāzi.
      • del> Izsvītro tekstu.
      • ins> Definē dokumentā ievietoto tekstu.
      • h1> Viens no daudziem virsrakstu tagiem. Šāda veida tagi sākas ar “h” ar atšķirīgu skaitu. Noteikti aizveriet tagu ar tādu pašu numuru.
      • p> definē rindkopu.
      • ! --- ... ---> Atšķirībā no citiem tagiem komentāram jābūt pašā tagā. Šī informācija ir redzama tikai tad, kad kods ir apskatīts.
      • blockquote> Rāda citātu, var izmantot ar tagu cite>.
      • Daži iepriekš minētie piemēri nav pilnīgs esošo tagu saraksts. Lai uzzinātu par citiem, apmeklējiet.
  9. 9 Skaidras struktūras izveidošana
    • Lapas ir veidotas tā, lai saturētu datus vienkāršās tagu kopās, lai mēs varētu parsēt informāciju rindkopās. Dators atpazīst datus; tas nezina par kontekstu vai konceptuālo savienojumu. Mums ir jāizveido datoram piemērotas HTML lapas. Tas tiek panākts, izmantojot tagu div. Tas palīdz izveidot milzīgu lapu skaitu. To var veidot ar CSS, un tas ir vieglāk nekā izveidot lielas koda tabulas izkārtojumam.
      • div> Šis tags ir īpašs, jo to var veidot un izmantot atsevišķus informācijas blokus, kurus var saprast gan lietotājs, gan dators.
    • Apskatīsim vienkāršu HTML izkārtojumu, kurā tiek izmantots div tags.
      • ! 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">
      • galva>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • nosaukums> Sveika pasaule! / title>
      • / galva>
      • ķermenis>
      • h1> Sveika pasaule! / h1>
      • div id = "contentOne">
      • p> Šis ir teksts div # contentOne. / p>
      • div>
      • p> Punkts div # contentOne / p> apakšsadaļā
      • / div>
      • / div>
      • / ķermenis>
      • / html>
    • Div> tagu izmantošana palīdz atrast un modificēt stilus, strādājot ar CSS un Javascript. HTML izmantos dažādus kodējumus, lai strādātu ar CSS stiliem un Javascript, lai radītu labāku un atsaucīgāku lietotāja pieredzi.

Padomi

  • Pēc šī raksta lasīšanas neapstājieties un nedomājiet, ka esat iemācījušies visu, kas jums jāzina. Vienmēr ir ko mācīties, it īpaši šajā tehnoloģijā.
  • Uzziniet, saprotiet un rakstiet kodu.
  • Ņemiet vērā, ka daži tagi izmanto tikai>. Para un br ir daži piemēri. Citi tagi, kas atvērti ar>, ir jāaizver tālāk. Piemēram, "div> / div>".
  • Cilvēki gaida jaunus atklājumus, tāpēc izgudrojiet no jauna, izstrādājiet vai kodējiet.
  • Kad esat daudz iemācījies, mēģiniet apgūt servera programmēšanu.
  • Uzziniet, kā strādāt ar CSS, kā arī Javascript.

Brīdinājumi

  • Atcerieties, ka HTML pamatā ir satura rediģēšana. Tas nozīmē, ka HTML tiek izmantots tikai satura glabāšanai atpazīstamā formātā. Citas izmaiņas jāveic, izmantojot citas tehnoloģijas, piemēram, CSS. Tas nozīmē arī darīt “Semantiski pareizipat ja citi to neatzīst. Citas programmēšanas valodas palīdz veidot tīmekļa lapas (CSS, Javascript un XML). HTML ir satura veidotājs.

Ko tev vajag

  • Teksta redaktors, kas atbalsta ANSI kodējumu
  • Tīmekļa pārlūkprogramma, piemēram, Internet Explorer vai Mozilla Firefox
  • (Pēc izvēles) wysiwyg vai wykiwyg HTML redaktors, piemēram, Adobe Dreamweaver, Aptana Studio vai Microsoft Expression Web