2Text formatting (font, paragraph, lists)_methodological_instructions_ 1 variant
Оценка 4.6

2Text formatting (font, paragraph, lists)_methodological_instructions_ 1 variant

Оценка 4.6
doc
09.05.2020
2Text formatting (font, paragraph, lists)_methodological_instructions_ 1 variant
2Text formatting (font, paragraph, lists)_methodological_instructions_ 1 variant.doc

Methodological Instructions

Theme: Text formatting (font, paragraph, lists)

Aim: 10.4.2 use HTML in web-development

Assessment criteria

- Demonstrates the skill of creating, saving and opening your own webpage.

- Demonstrates knowledge of webdocument structure

- Uses tag for headlines to create your own web page.

- Understands the differences between the types of headers

- Uses basic tags to create your own webpage.

Key words and phrases:

• Website, webpage, WYSIWYG, text editor, CMS, Microsoft Front Page, Adobe Dream Weaver, Notepad, Joomla, Word Press, HTML

A series of useful phrases for dialogue / writing:

• HTML is used for ,,,,

• We use tags for ....

• Tags are ...

• I used (a) title tag ... to ...

I.                   Theory

The font tag was brought in early in HTML’s life to allow designers to change the size, typeface and colour of their text. It proceeded to do more harm than good — for all sorts of reasons — but mainly because it is a hugely inefficient way to format text. CSS text formatting is vastly superior, but knowledge of these old-style techniques is still useful.

Font Size

You have two options when setting your text’s size: sizing it absolutely or relatively. Absolute sizes are between the range 1 and 7, and are set like this:

<font size="2">text</font>

Most browsers have their default font size set as 3. The majority of sites will have their text set at around size 2 or 3.

Relative sizing means the text will resize relatively to the user’s default size. This is better because it adapts to your users’ preferences — if they have specifically set their browsers up to display larger text than normal, your text will grow in proportion. You have a range between +6 to +1 and -1 to -6. Plus 1 and minus 1 will be the ones you’ll use most. As shortcuts to these two sizes, there are the tags <big></big> and <small></small>, which helps.

<font size="+1">Text one size greater than the browser’s default.</font>

Stay away from really small text, as it’s always too hard to read. Big text can swamp a page and induce too much scrolling. In the end, your choice of font size will have a lot to do with how much text is going to be on a page at a time. It is also tied to your choice of font, which we’re getting to next.

Font Face

First off, if you make no changes at all, your text will probably look like this:

12pt Black Times New Roman

Not the most beautiful or suitable font in the world because it was really designed for reading off paper, not computer screens. So, you’ll want to change it to something more readable and nicer looking.

Have a look in your fonts folder (on a PC it’s C:\windows\fonts). You should have a few dozen different fonts in there. Some will be suitable for usage on the web and others you will use again and again. One of the most common fonts used on the net is Arial (a variant of the Mac’s Helvetica). To change text to Arial, or any other font, the tags are

<font face="Arial">Your text here.</font>

The face attribute was so-named because font designs are more accurately known as typefaces.

Font Restrictions

A particular font face will only appear on a reader’s computer screen if they have that font installed on their computer. So if you have your whole page defined in Digital font (» download) or something, a load of your viewers will just get a page with boring old Times New Roman. To get around this, the best idea of course is to use common fonts. There are a set of common fonts that you can be more or less assured will turn up on all your readers’ systems. The face attribute allows you to specify a list of fonts at a time. It is good practise to specify back-up fonts in case things go awry. Watch:

<font face="Digital, Arial, Helvetica, sans-serif">text</font>

See — you get a couple of chances to find a good font, separated by commas. If the first one isn’t available your second choice will be used and so on. You can go on with a long list but really, you should stop after around 3 because you’re wasting your time otherwise. Try to keep the fonts similar along the way and try and end it on a common font to stay away from Times.

All fonts are a member of a certain family of fonts. For instance, Arial is of the type ‘sans-serif’. If all of your alternatives are exhausted without finding a match, your last resort is to specify a family of fonts. If it comes to this, the default for this family will be used. You can learn all about font families and the differences between them in web typography.

Even then, most people won’t be seeing your super cool font, so if you want this font to be used, make it into a graphic in your image editor and put the graphic on your page where you want it. It’s frowned upon in proper web design, but if you’re just starting out it’s acceptable until you learn how to go around it properly. Do remember of course that if someone has images turned off they won’t be able to read this text at all. Make sure it’s not too important and always use the alt attribute.

sourcetip: if you have a word processor like Word, try a couple of fonts out in that. It’s a lot faster to find the one you want.

Common fonts

For your convenience, here is a group of the most popular and common font lists:

·         Arial, Helvetica, sans-serif

·         Trebuchet MS, Arial, Helvetica, sans-serif

·         Verdana, Geneva, sans-serif

·         Times New Roman, Times, serif

·         Georgia, Garamond, Palatino, serif

·         Courier New, Courier, monospace

Font Colour

To change the colours of the text on a page for the entire page, you can define it in the <body> tag. I have a complete tutorial on body here.

To change the colours of just a small block of text or an individual word, you have to use the old font tag again. The format is

<font color="#ff0000">text</font>

Colours in HTML have to be defined as HEX codes, which are 6-digit codes representing the amount of red, green and blue (RGB) in the colour. To see a full chart of these codes so you can pick out the ones you like, see the HEX colour chart.

<font color="green">text</font>

Visual Aids and Materials.

1.      Slides

2.      https://www.w3schools.com/html/html_formatting.asp

3.      https://www.w3schools.com/css/css_text.asp

4.      http://www.tizag.com/htmlT/font.php

5.      https://www.yourhtmlsource.com/stylesheets/csstext.html

6.      https://www.w3.org/TR/REC-html40-971218/present/graphics.html

7.      https://www.yourhtmlsource.com/text/font.html/The-Tag-change-your-text-s-size-typeface-and-colour

8.      https://bilimland.kz/ru/courses/informatika-ru/9-klass/lesson/html-i-html-redaktor

9.      https://bilimland.kz/ru/courses/informatika-ru/9-klass/lesson/html-i-html-redaktor


Скачано с www.znanio.ru

Methodological Instructions

Methodological Instructions

Font Face First off, if you make no changes at all, your text will probably look like this: 12pt

Font Face First off, if you make no changes at all, your text will probably look like this: 12pt

Word, try a couple of fonts out in that

Word, try a couple of fonts out in that
Скачать файл