VirtualMV/HTML/Basic/Formating and Lines
From WikiEducator
< VirtualMV | HTML/Basic
| Internet & Web Development ( Introduction | Advanced ) | ||
|---|---|---|
| Overview | Personal Learning Environment | What is HTML? | Web authoring | Resources | Help Desk |  |
| Creating a basic web site | HTML editor | Basic tags | Head tag | Linking pages | Formating and lines | Lists | Tables | Special characters | Page icon | |
| Multimedia | graphics and images | Connected media | Audio | Video | Image map | |
| Cascading style sheets | Inline, embedded, linked | Language | Example | |
| Web page layout | Tables | CSS | iFrame | Frames | Other | Responsive | |
| Framework | Tours of Hawke's Bay | |
| Forms | Example | mailto | Add Google | |
| Misc | ||
Overview
|
By the end of this page you will have
|
Formatting tags
Text can be formatted using the following tags;
- The <p> tag is used to create a new paragraph
- The <br> tag specifies a line break between blocks of text. There are variations of the br tag, (<br>,</br>). If you were to adhere to the rules of XML (XHTML) you would use <br /> as it shows the tag is closed, but HTML5 is not XHTML5!!
- The <pre> ... </pre> tag is useful for formatting text where white space is important (where spaces are to be included).
- The <div> ... </div> tag is useful for formatting a block of text, and is commonly used with style sheets.
- The <blockquote> ... </blockquote> tag is useful for formatting a block of text which is a quote, and indents the text in both the left and right margins.
- Alignment (left, center, right) can be achieved the style attribute, for example style ="text-align:center"
<!DOCTYPE html> <html> <head> <META NAME="keywords" CONTENT="html, htm, first page"> <META NAME="description" CONTENT="First web page"> <title>**’s first page</title> </head> <body> <h1>**’s web</h1> <p>Hello <b>world</b></p> <h2>Favourite quotes</h2> <p>Live long and prosper</p> <p>To be, or not to be .....<br>that is the question.</p> <p>Et tu Brutus.</p> <pre> **space the final frontier</pre> <div style ="text-align:center">position: left right out</div> <blockquote>"You have derailed my train of thought"</blockquote> </body> </html>
TASK: Add and edit the body of one.html as shown above .
Notes
- All media elements such as text (including headings) and graphics are automatically left aligned
- Traditionally text alignment has been achieved using a container tag (one attached to another tag). In modern HTML this has been deprecated (phased out) and replaced with a style attribute, for example
- <div style="text-align: center">, remembering to turn it off with </div>
- <p style="text-align: right">, remembering to turn it off with </p>
- <h2 style="text-align: center">, remembering to turn it off with </h2>
- To center text (or other items on a page), you can also use the <center> and </center> tags. (Note: center is spelt the American way!). Using the <center> tag and the align attribute is discouraged and being replaced (deprecated) by the use of Style Sheets.
- If bullet text is aligned the lines will be double spaced. (More on this later).
Phrase (logical style) elements
Are tags that exist inside other tags (such as the <p> tag ) However it is over to the browser as to how they are interpreted. It is probably better to use the style tag, and if you are interested in the semantic web (the web of meaning) you will create a special XML tag! Screen readers may inter[ret the tags e.g. strong may read it out with more emphasis! As you will see below some have interesting results!
| Element | Example | Comment |
| <abbr> | HTML | abbreviation (in the example <abbr title="Hypertext Markup Language">HTML</abbr>) |
| <b> | bold text | bold! |
| <cite> | bold text | citation or reference usually in italics |
| <code> | e.g. JS code while (intI <= 5){
|
computer code usually fixed (spaced) font |
| <dfn> | The Internet is a global computer network | Definition |
| <em> | Emphasised text | Emphasised (usually italics) |
| <i> | Italic text | Italic |
| <kbd> | Type in QWERTY | Identifies text to be type in |
| <mark> | This is important | Highlight (HTML5 onwards) |
| <samp> | The printout shows Cost=$100 | Program code sample output |
| <small> | The fine print 30 day trial | can be used for legal disclaimers and notices (fine print) |
| <strong> | Note very hot | something important - usually bold |
| <sub> | Hypothesis H0 | Subscript e.g. Hypothesis H<sub>0</sub> |
| <sup> | y = x2 | Superscript e.g. y = x<sup>2</sup> |
| <var> | Int:I; | Program variable (usually italics) |
Lines (horizontal ruler)
A line can be inserted into the page by using the <hr> tag. For example
<hr width = "80%" size = "4" />Where size = height of the line in pixels.
The hr tag can also be expressed in the number of pixels, For example
<hr width ="333" />where 333 is the number of pixels across
If you want to add really flashy lines, you can include them as an image. For example create a line that is animated (this will be covered later).
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/HTML/Basic/Formating and Lines. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Formating_and_Lines (zotero)
|
