Paano magdagdag ng isang pahalang na linya sa HTML

Video.: Ano ang Print Area at Paano ito i set?

Nilalaman

Mga hakbang
Paraan 1 ng 2: Nagtatrabaho sa HTML 4.01
Paraan 2 ng 2: Nagtatrabaho sa CSS / HTML5

Ipapakita sa iyo ng artikulong ito kung paano magdagdag ng isang pahalang na linya sa HTML. Maaaring gamitin ang pahalang na linya upang paghiwalayin ang nilalaman sa site. Ang code para sa paglikha ng linya ay medyo simple. Gayunpaman, sa HTML 4.01, posible na baguhin ang disenyo ng isang linya gamit ang mga panloob na utos. Sa HTML5, kakailanganin mong gumamit ng CSS upang mai-istilo ang linya.

Mga hakbang

Paraan 1 ng 2: Nagtatrabaho sa HTML 4.01

1 Magbukas ng mayroon o lumikha ng isang bagong dokumento sa HTML. Ang mga dokumento ng HTML ay maaaring mai-edit sa isang text editor tulad ng Notepad o isang dalubhasang editor ng code tulad ng Adobe Dreamweaver. Sundin ang mga hakbang na ito upang buksan ang isang dokumento ng HTML sa program na iyong pinili:
- Buksan ang Notepad o ibang editor ng teksto / code.
- Buksan ang menu File.
- Mag-click sa Buksan.
- Piliin ang HTML file.
- Mag-click sa Buksan
2 Piliin ang lokasyon kung saan mo nais na ipasok ang linya. Mag-scroll pababa hanggang makita mo ang linya sa itaas kung saan dapat lumitaw ang linya, at pagkatapos ay direktang ilipat ang cursor sa simula ng linya na iyon sa pamamagitan ng pag-click sa kaliwang kaliwang linya na iyon.
3 Magdagdag ng isang walang laman na linya. I-double tap ↵ Ipasokupang ilipat ang teksto bago mo nais na magsingit ng isang linya, at pagkatapos ay ilagay ang cursor sa isang walang laman na linya.
4 Magdagdag ng hr> tag. Pasok hr> sa blangko na puwang sa simula ng linya. Tag hr> ay nagbibigay-daan sa iyo upang gumuhit ng isang pahalang na linya sa buong pahina.
5 Ilipat ang cursor pagkatapos ng tag na "hr" sa isang bagong linya sa pamamagitan ng pagpindot ↵ Ipasok. Ngayon ang tag hr> dapat nasa isang hiwalay na linya.
6 Magdagdag ng mga katangian sa pahalang na linya (opsyonal). Magdagdag ng mga katangian tulad ng haba, kapal, kulay, at pagkakahanay. Itakip ang mga ito sa mga kulot na brace pagkatapos ng "hr". Upang magdagdag ng maraming mga katangian, paghiwalayin ang mga ito ng isang puwang.
- Pasok laki ng hr = "#">upang baguhin ang kapal ng linya. Palitan ang "#" ng isang halaga ng kapal ng bilang (halimbawa, laki = "10").
- Pasok hr lapad = "#">upang baguhin ang lapad ng linya. Palitan ang "#" ng bilang ng mga pixel o isang porsyento ng lapad ng pahina (halimbawa, lapad = "200" o lapad = "75%").
- Pasok hr color = "#">upang baguhin ang kulay ng linya. Palitan ang "#" ng pangalan ng kulay o ng hexadecimal code nito (halimbawa, kulay = "pula" o kulay = "# FF0000").
- Pasok hr align = "#">upang ihanay ang linya. Palitan ang "#" ng "kanan" (kanan), "kaliwa" (kaliwa), o "gitna" (gitna) (halimbawa, hr lapad = "50%" align = "center">).
7 I-save ang HTML file. Upang mai-save ang isang text file bilang isang dokumento sa HTML, dapat mong baguhin ang extension ng file (.txt, .docx) sa ".html". Sundin ang mga hakbang na ito upang mai-save ang iyong dokumento sa HTML:
- Buksan ang menu File.
- Mag-click sa I-save bilang.
- Magpasok ng isang pangalan para sa file sa patlang ng Pangalan ng File.
- Idagdag pa .html pagkatapos ng pangalan ng file.
- Mag-click sa Magtipid.
8 Suriin ang iyong dokumento sa HTML. Upang suriin ang HTML file, mag-right click dito at piliin ang Open With. Pagkatapos piliin ang iyong web browser. Dapat lumitaw ang isang solidong linya kung saan mo ipinasok ang tag na "hr". Ang HTML code ay magmumukhang ganito:

Paraan 2 ng 2: Nagtatrabaho sa CSS / HTML5

1 Magbukas ng mayroon o lumikha ng isang bagong dokumento sa HTML. Ang mga dokumento ng HTML ay maaaring mai-edit sa isang text editor tulad ng Notepad o isang dalubhasang editor ng code tulad ng Adobe Dreamweaver. Sundin ang mga hakbang na ito upang buksan ang isang dokumento ng HTML sa program na iyong pinili:
- Buksan ang Notepad o ibang editor ng teksto / code.
- Buksan ang menu File.
- Mag-click sa Buksan.
- Piliin ang HTML file.
- Mag-click sa Buksan
2 Magdagdag ng isang pamagat sa iyong dokumento sa HTML. Kung ang iyong dokumento sa HTML ay wala pang heading, sundin ang mga hakbang na ito upang magdagdag ng isa. Ang heading ay dapat pumunta pagkatapos ng html> tag at bago ang body> tag.
- Pasok ulo> sa tuktok ng dokumento.
- I-double tap ↵ Ipasokupang magdagdag ng dalawang bagong linya.
- Pasok / ulo>upang isara ang pamagat.
3 Pasok style type = "text / css"> sa loob ng header. Ang style tag ay inilalagay sa pagitan ng dalawang heading tag upang lumikha ng isang lugar kung saan maaari mong gamitin ang CSS upang baguhin ang disenyo ng HTML.
- Bilang kahalili, maaari kang gumamit ng isang panlabas na sheet ng estilo. Basahin ang artikulo "Paano ipasok ang isang CSS file sa HTML»Upang malaman kung paano mai-link ang isang panlabas na CSS file sa isang HTML file.
4 Pasok oras {. Ito ang tag ng CSS para sa pag-istilo ng pahalang na linya. Idagdag ito pagkatapos ng tag na "style" sa iyong header o panlabas na CSS file.
5 Magdagdag ng mga istilo ng CSS para sa tag na hr>. Dapat silang dumating pagkatapos ng tag na "hr {". Ang isang pahalang na linya ay maaaring mai-istilo sa iba't ibang mga paraan. Nasa ibaba ang ilan sa kanila.
- Pasok lapad: ## px;upang ayusin ang lapad ng linya. Palitan ang "##" ng linya ng lapad sa mga pixel. Sa halip na mga pixel (px), maaari kang gumamit ng isang porsyento (%).
- Pasok taas: ## px;upang ayusin ang bigat ng linya. Palitan ang "##" ng linya ng lapad sa mga pixel.
- Pasok kulay ng background: ##;upang tukuyin ang kulay ng linya. Palitan ang "##" ng isang pangalan ng kulay o hash (#) na sinusundan ng isang hexadecimal color code.
- Pasok margin-kanan: ## px;upang tukuyin ang bilang ng mga pixel mula sa kanang gilid. Palitan ang "##" ng isang bilang na bilang ng mga pixel o ang code na "auto". Ipasok ang "auto" upang ihanay ang linya sa kaliwa o gitna.
- Pasok kaliwa-margin: ## px;upang tukuyin ang bilang ng mga pixel mula sa kaliwang gilid. Palitan ang "##" ng isang bilang na bilang ng mga pixel o ang code na "auto". Ipasok ang "auto" upang ihanay ang linya sa kanan o gitna.
- Pasok tuktok ng margin: ## px; upang tukuyin ang tuktok na padding para sa linya. Palitan ang "##" ng isang numero na naaayon sa padding sa mga pixel.
- Pasok margin-ilalim: ## px;upang tukuyin ang ilalim na padding para sa linya. Palitan ang "##" ng isang numero na naaayon sa padding sa mga pixel.
- Pasok border-width: ## px;upang gumuhit ng isang kahon sa paligid ng linya (opsyonal). Palitan ang "##" ng isang numero na tumutugma sa lapad ng border sa mga pixel.
- Pasok border-color: ##;upang tukuyin ang kulay ng hangganan (opsyonal). Palitan ang "##" ng isang pangalan ng kulay o hash (#) na sinusundan ng isang hexadecimal color code.
6 Pasok } pagkatapos ng mga katangian ng istilo upang makumpleto ang estilo para sa tag na hr>.
7 Pasok hr> saanman sa katawan ng dokumento ng HTML upang magdagdag ng isang pahalang na linya. Ang mga setting ng istilong CSS ay mailalapat tuwing gagamitin mo ang tag na hr> sa iyong dokumento sa HTML. Ang iyong code ay dapat magmukhang ganito: