Форматиране на текст в 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, посочете го със 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
|
Нищо сложно тук, просто дефиниране от кой номер да започне списъка.
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 |
|
|
|
|
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
|
Ето и няколко други типа несортирани списъци.
HTML Code:
<ul type="square">
<ul type="disc">
<ul type="circle">
Unordered List Types:
| type="square" | type="disc" | type="circle" |
|
|
|
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.
