Форматиране на текст в HTML

Форматиране на текст в HTML

 

  • Форматиране на текст

Paragraph Tag <p>

<p>  тагът дефинира параграфи. Използвайки този таг се появява бяла линия (отстъп) под и над текста в параграфа. Тези автоматични отстъпи отграничават един параграф от друг и тяхната големина зависи от стилът по подразбиране, които използват различните браузъри.

HTML Code:

<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>

Резултатът:

Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far) it is easy.

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

HTML – ориентация на пагарфа

Параграфите в HTML могат да бъдат форматиране по точно същият начин, както в Word, например.

HTML Code:

<p align="justify">For instance, let's say you had a HUGE school or work...</p>

Резултатът - двустранно подравнен текст:

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

HTML – центриране на параграф

HTML Code:

<p align="center">For instance, let's say you had a HUGE school or work...</p>

Резултатът – центриран параграф:

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

Each line of the paragraph has now been centered inside the display window.

По същият начин форматираме параграфа и за ляво и дясно подравняване.

Heading <h1>


Heading е точно това, което звучи (на англ. Heading – заглавие). С таговете от <h1> до <h6> може да форматираме различни заглавия и под заглавия. H1 са най-големите заглавия, а H6 – най-малките. Heading  е блоков елемент, т.е. текста поставен веднага след затваряне на <h1> тага се позиционира под заглавието, без да е нужно да поставяме нов ред.

HTML Code:

<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>

Ако поставите тези редове във вашият HTML файл ще видите точно този резултат:

Headings 1-6:

Headings

are

great

for

titles
and subtitles

Нови редове <br />

Новите редове са по-различни от всички тагове, разглеждани до момента. <br /> тагът прекъсва реда, на който е поставен в мястото, където е поставен и го продължава на нова линия. Поставянето на <br />  в кода е същото като натискането на Enter в Word. Използвайте <br /> вътре в параграфите <p>.
Тъй като това е единичен таг, той се затваря сам с /> (не е както при параграфите например, които имат отварящ таг <p> и затварящ таг </p>).

HTML Code:

<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>

Резултатът:

Will Mateson
Box 61
Cleveland, Ohio

Хоризонтална линия <hr />

Използването на <hr /> ще изведе права хоризонтална линия в резултат. Тагът се затваря сам, както е при тагът за нов ред <br />.

HTML Code:

<hr />
Use
<hr /><hr />
Them
<hr />
Sparingly
<hr />

Резултат:


Use



Them


Sparingly


HTML Code:

<hr />
<p>1. "The Hobbit", JRR Tolkein.<br />
2. "The Fellowship of the Ring" JRR Tolkein.</p>

Резултат (в стил библиографска справка):

 


1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.



HTML – Списъци
 
Съществуват 3 различни типа списъци. <ol> тагът започва подреден списък, <ul> неподреден списък, a <dl>  тагът – разяснителен списък. Използват се атрибутите type и start за по-добро „настройване” на списъка.

HTML Code:

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>

Номериран (подреден) списък:

Goals

  1. Find a Job
  2. Get Money
  3. Move Out

Ако желаете вашият списък да започва от номер, различен от 1, посочете го със start атрибута.

HTML Code:

<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>

Numbered List Start:

Goals

  1. Buy Food
  2. Enroll in College
  3. Get a Degree

Нищо сложно тук, просто дефиниране от кой номер да започне списъка.

HTML Ordered Lists Continued

Съществуват още 4 типа подредени списъци. Вместо арабски цифри, могат да се използват малки и главни букви, а така също и римски числа. Използвайте type атрибута за да сменмите начина на номериране.

HTML Code:

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Резултатът:

Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out

HTML Unordered Lists

Започват с <ul> таг. Типа на отметките бива: square, disc, and circle.При повечето браузъри по подразбиране се използва плътна черна точка.

HTML Code:

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

Unordered Lists:

Shopping List

  • Milk
  • Toilet Paper
  • Cereal
  • Bread

Ето и няколко други типа несортирани списъци.

HTML Code:

<ul type="square">
<ul type="disc">
<ul type="circle">

Unordered List Types:

type="square" type="disc" type="circle"
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread

HTML описателни списъци

  • <dl> - defines the start of the list
  • <dt> - definition term
  • <dd> - defining definition

HTML Code:

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>

Резултатът:

Fromage
French word for cheese.
Voiture
French word for car.



Bookmark and Share