Kā pievienot horizontālu līniju HTML

Autors: Virginia Floyd
Radīšanas Datums: 14 Augusts 2021
Atjaunināšanas Datums: 1 Jūlijs 2024
Anonim
How To Add Horizontal Line In HTML -  html Coding Horizontal Line  |  HTML tutorials Tags| Lecture 4
Video: How To Add Horizontal Line In HTML - html Coding Horizontal Line | HTML tutorials Tags| Lecture 4

Saturs

Šajā rakstā tiks parādīts, kā HTML formātā pievienot horizontālu līniju. Horizontālo līniju var izmantot, lai atdalītu vietnes saturu. Līnijas izveides kods ir diezgan vienkāršs. Tomēr programmā HTML 4.01 ir iespējams mainīt līnijas dizainu, izmantojot iekšējās komandas. HTML5 rindas veidošanai jums būs jāizmanto CSS.

Soļi

1. metode no 2: Darbs HTML 4.01

  1. 1 Atveriet esošu vai izveidojiet jaunu HTML dokumentu. HTML dokumentus var rediģēt, izmantojot teksta redaktoru, piemēram, Notepad, vai specializētu koda redaktoru, piemēram, Adobe Dreamweaver. Lai atvērtu HTML dokumentu izvēlētajā programmā, rīkojieties šādi:
    • Atveriet Notepad vai citu teksta / koda redaktoru.
    • Atveriet izvēlni Fails.
    • Klikšķiniet uz Atvērt.
    • Atlasiet HTML failu.
    • Klikšķiniet uz Atvērt
  2. 2 Atlasiet vietu, kur vēlaties ievietot rindu. Ritiniet uz leju, līdz atrodat līniju, virs kuras vajadzētu parādīties, un pēc tam pārvietojiet kursoru tieši uz šīs rindas sākumu, noklikšķinot uz šīs līnijas kreisās malas.
  3. 3 Pievienojiet tukšu rindu. Divreiz pieskarieties Ievadietlai pārvietotos uz leju pa tekstu, pirms kura vēlaties ievietot rindu, un pēc tam novietojiet kursoru uz tukšas rindas.
  4. 4 Pievienojiet tagu hr>. Ievadiet hr> uz tukšu vietu rindas sākumā. Tag hr> ļauj uzzīmēt horizontālu līniju visā lapā.
  5. 5 Pārvietojiet kursoru pēc atzīmes "hr" uz jaunu rindu, nospiežot Ievadiet. Tagad birka hr> jābūt atsevišķai rindai.
  6. 6 Pievienojiet atribūtus horizontālajai līnijai (pēc izvēles). Pievienojiet tādus atribūtus kā garums, biezums, krāsa un līdzinājums. Tūlīt pēc "hr" ievietojiet tos cirtainās skavās. Lai pievienotu vairākus atribūtus, atdaliet tos ar atstarpi.
    • Ievadiet hr size = "#">lai mainītu līnijas biezumu. Aizstājiet "#" ar skaitlisku biezuma vērtību (piemēram, lielums = "10").
    • Ievadiet hr width = "#">lai mainītu līnijas platumu. Aizstājiet "#" ar pikseļu skaitu vai lapas platuma procentuālo daļu (piemēram, platums = "200" vai platums = "75%").
    • Ievadiet hr color = "#">lai mainītu līnijas krāsu. Aizstājiet "#" ar krāsas nosaukumu vai tās heksadecimālo kodu (piemēram, krāsa = "sarkana" vai krāsa = "# FF0000").
    • Ievadiet hr align = "#">lai izlīdzinātu līniju. Aizstājiet "#" ar "labo" (pa labi), "pa kreisi" (pa kreisi) vai "centru" (centrā) (piemēram, hr width = "50%" align = "center">).
  7. 7 Saglabājiet HTML failu. Lai saglabātu teksta failu kā HTML dokumentu, faila paplašinājums (.txt, .docx) jāmaina uz ".html". Lai saglabātu HTML dokumentu, rīkojieties šādi:
    • Atveriet izvēlni Fails.
    • Klikšķiniet uz Saglabāt kā.
    • Laukā Faila nosaukums ievadiet faila nosaukumu.
    • Pievienot .html aiz faila nosaukuma.
    • Klikšķiniet uz Saglabāt.
  8. 8 Pārbaudiet savu HTML dokumentu. Lai pārbaudītu HTML failu, ar peles labo pogu noklikšķiniet uz tā un izvēlieties Atvērt ar. Pēc tam atlasiet savu tīmekļa pārlūkprogrammu. Tur, kur ievietojāt tagu "hr", vajadzētu parādīties vienmērīgai līnijai. HTML kods izskatīsies apmēram šādi:

      ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Šī rinda jāatdala no virsraksta ar rindiņu . / P1> / body> / html>

2. metode no 2: Darbs CSS / HTML5

  1. 1 Atveriet esošu vai izveidojiet jaunu HTML dokumentu. HTML dokumentus var rediģēt, izmantojot teksta redaktoru, piemēram, Notepad, vai specializētu koda redaktoru, piemēram, Adobe Dreamweaver. Lai atvērtu HTML dokumentu izvēlētajā programmā, rīkojieties šādi:
    • Atveriet Notepad vai citu teksta / koda redaktoru.
    • Atveriet izvēlni Fails.
    • Klikšķiniet uz Atvērt.
    • Atlasiet HTML failu.
    • Klikšķiniet uz Atvērt
  2. 2 Pievienojiet virsrakstu savam HTML dokumentam. Ja jūsu HTML dokumentam vēl nav virsraksta, veiciet šīs darbības, lai to pievienotu. Virsrakstam jāiet aiz taga html> un pirms body>.
    • Ievadiet galva> dokumenta augšpusē.
    • Divreiz pieskarieties Ievadietlai pievienotu divas jaunas rindas.
    • Ievadiet / galva>lai aizvērtu virsrakstu.
  3. 3 Ievadiet stila veids = "text / css"> galvenes iekšpusē. Stila tags ir novietots starp abiem virsrakstu tagiem, lai izveidotu vietu, kur varat izmantot CSS, lai mainītu HTML dizainu.
    • Varat arī izmantot ārēju stila lapu. Izlasi rakstu "Kā ievietot CSS failu HTML»Lai uzzinātu, kā saistīt ārēju CSS failu ar HTML failu.
  4. 4 Ievadiet hr {. Šis ir CSS tags horizontālās līnijas veidošanai. Pievienojiet to galvenē vai ārējā CSS failā pēc taga “style”.
  5. 5 Pievienojiet CSS stilus atzīmei hr>. Tiem jānorāda aiz birkas "hr {". Horizontālo līniju var veidot dažādos veidos. Zemāk ir daži no tiem.
    • Ievadiet platums: ## px;lai pielāgotu līnijas platumu. Aizstājiet "##" ar līnijas platumu pikseļos. Pikseļu (px) vietā varat izmantot procentus (%).
    • Ievadiet augstums: ## px;lai pielāgotu līnijas svaru. Aizstājiet "##" ar līnijas platumu pikseļos.
    • Ievadiet fona krāsa: ##;lai norādītu līnijas krāsu. Aizstājiet “##” ar krāsas nosaukumu vai hash (#), kam seko heksadecimāls krāsu kods.
    • Ievadiet margin-right: ## px;lai norādītu pikseļu skaitu no labās malas. Aizstājiet "##" ar skaitlisku pikseļu skaitu vai kodu "auto". Ievadiet "auto", lai izlīdzinātu līniju pa kreisi vai centrā.
    • Ievadiet margin-left: ## px;lai norādītu pikseļu skaitu no kreisās malas. Aizstājiet "##" ar skaitlisku pikseļu skaitu vai kodu "auto". Ievadiet “auto”, lai izlīdzinātu līniju pa labi vai centrā.
    • Ievadiet margin-top: ## px; lai norādītu līnijas augšējo polsterējumu. Aizstājiet "##" ar skaitli, kas atbilst pildījumam pikseļos.
    • Ievadiet margin-bottom: ## px;lai norādītu līnijas apakšējo polsterējumu. Aizstājiet "##" ar skaitli, kas atbilst pildījumam pikseļos.
    • Ievadiet robežas platums: ## px;lai uzzīmētu lodziņu ap līniju (pēc izvēles). Aizstājiet "##" ar skaitli, kas atbilst apmales platumam pikseļos.
    • Ievadiet apmales krāsa: ##;lai norādītu apmales krāsu (pēc izvēles). Aizstājiet “##” ar krāsas nosaukumu vai hash (#), kam seko heksadecimāls krāsu kods.
  6. 6 Ievadiet } aiz stila atribūtiem, lai pabeigtu hr> taga stilu.
  7. 7 Ievadiet hr> jebkurā HTML dokumenta pamattekstā, lai pievienotu horizontālu līniju. CSS stila iestatījumi tiks lietoti katru reizi, kad HTML dokumentā izmantojat atzīmi hr>. Jūsu kodam vajadzētu izskatīties apmēram šādi:

      ! DOCTYPE html> html> head> style type = "text / css"> hr {platums: 50%; augstums: 20 pikseļi; fona krāsa: sarkana; mala pa labi: auto; margin-left: auto; augšējā mala: 5 pikseļi; apakšējā mala: 5 pikseļi; robežas platums: 2 pikseļi; apmales krāsa: zaļa; } / style> / head> body> h1> Heading / h1> hr> p1> Šī rindiņa jāatdala no virsraksta ar horizontālu līniju / p1> / body> / html>