American Audio DCD-PRO240 Manuel d'utilisateur télécharger pdf (Page 156)

Freeway Reference: Styling Text

156

For example:

The above text is all set with the same style. Both the heading AND the text underneath carry the same weight both visually and

electronically.

Now consider this:

You can see that the heading is now more visually important. The underlying HTML will reflect this too:

<h1>This text is a heading</h1>

<p>And here is some text underneath which is to do with the heading</p>

The <h1> tags around the heading text indicates to the device reading the HTML that this text has a higher weight of importance

than the rest of the text.

So, as you can see, getting styles right not only means that the information you present is visually well structured, but it will also be

structured well for non-visual systems that read your pages. A site with good markup is more likely to perform well in search engine

results, especially if the content of the text following a header is relevant.

When a style is applied to HTML text in Freeway (or any other modern HTML editor/generator), two things happen. Firstly, an HTML

tag is created, and secondly, a CSS style is created. The CSS style is used by supporting browsers to display the text in the way that has

been specified. If the browser can not display the style, or does not support CSS, then it will revert to a default. However, by creating the

tag, the page has been marked up and the importance of the styled text is evident to the browser and its viewer.

Paragraph <p> styles

By default Freeway wraps a <p> tag around the text like this:

The HTML for the above example text looks like this:

<p>Gustav's Hat</p>

<p class="_lp">Gustav's hat is brown with a pink feather in it.</p>

Both paragraphs of text are enclosed in a <p> tag.

It is important to realize that a

<p> tag is created by default. If the <p> tag is not present, the HTML page could fail validation.

<h> styles

The <h> tag is used to mark out portions of HTML text that are headers. By default, these will be displayed bigger and bolder than

normal text by the browser. However, you can define their appearance in Freeway more precisely to fit in with your site’s design.

The

<h> tags are block level tags. They will affect whole paragraphs, rather than the selected words. As such, they are not substitutes for

emboldening text.

Consider this block of text:

So, a block of text with an <h> tag applied to it will look like this in the HTML source:

<h1>Gustav's Hat</h1>

<p class="_lp">Gustav's hat is brown with a pink feather in it.</p>

You will see that the header “Gustav’s Hat” is in an <h1> tag instead of a <p> tag.

There are six levels of <h> tags, allowing you to create a hierarchy of headings. <h1> is the most important, whilst <h6> is the least. So, you could

have your page title contained within an <h1> tag, headings on the page as <h2> tags and so on.

1 2 ... 151 152 153 154 155 156 157 158 159 160 161 ... 249 250

Pas de commentaire

American Audio DCD-PRO240 Manuel d'utilisateur Page 156