Академический Документы
Профессиональный Документы
Культура Документы
The 'html' tag lets a web-browser know for sure that it is dealing with an html based webpage. Please note the manner in which the tag is surrounded by cheverons and that the tag is repeated with the inclusion of a '/' to terminate the mark-up.
<html></html>
the 'head' tag inside of the html tag. The head tag is used to hold information about your page, such as a title or description for search engine usage.
<html> <head> <title>Title for this page</title> </head> <body> This is where the content for this page will reside. </body> </html>
Naturally, the copy within your <body></body> tags will wrap around and around unless you add a little more HTML code to break thing up a little. Just adding a line break within your source will do nothing. You have got to code the paragraph or line break into the actual HTML.
Paragraphs in HTML
A paragraph is a "distinct subdivisions of a text intended to separate ideas". In HTML terms it is denoted by the following code:
<p>This is a paragraph.</p>
Line Breaks
A line break is characterised by a 'single return', where the copy preceeds after the line break directly beneath it. Special Note: Remember, don't worry about line breaks in your HTML; lay it out in a manner that allows you to easily read when coding - they won't appear on your page within any browser. If you need to create a line break in your copy, then you can try the following: Example:
The line break <br> causes the preceeding line of text to appear directly beneath the first, unlike paragraph <p> which forces a new paragraph.
Italic text
Code: <i>This is italic.</i> This isn't. Result: This is italic. This isn't.
Under-lined text
Code: <u>This is underlined.</u> This isn't. Result: This is underlined. This isn't.
Tag syntax:
Incorrect example: <b><i>Text</b></i> Correct example: <b><i>Text</i></b>
Text layout
Paragraphs
Code: <p>Seperate Paragraph.</p> Result: Seperate Paragraph.
Line Breaks
Code: This is line 1.<br>This is line 2. Result: This is line 1. This is line 2. Please note: In the above example, the 'br' or 'line-break', will not require a container as doesn't apply itself to any particular word, line or paragraph of text.
Big Text.
Text Alignment
Left-aligned Text
Code: <div align="left">Left Align</div> Result: Left Align
Right-aligned Text
Code: <div align="right">Right Align</div> Result: Right Align
Center-aligned Text
Code: <div align="center">Center Align</div> Result: Center Align
This is a heading
Please note: In the above example, the 'h2' (or any other 'hx' tag) automatically results in a line break after the text within tag.
An Ordered List
Code: <ol>
1. 2. 3.
5. 6. 7.
CSS Application
There are 3 main ways in which you can incorporate CSS in to a page:
<b style="color:red">Red and bold</b> <i style="margin:10px">CSS Margins</i> <h2 style="font-weight: normal">Non-bold header</h2>
<head> <style type="text/css" media="screen"> h2 { font-weight: normal } p { color:red } </style> </head> <body> <h2>This is not bold</h2> <p>This paragraph is red</p> <h2>This also is not bold</h2> <p>Yep, you've guessed it, this paragraph is also red!</p> </body>
Now create an HTML document - call it whatever you like, but add this to the top of it, preferably within the <head></head> section:
<head> <style src="my-style.css" type="text/css" media="screen"></style> </head> <body><p>This paragraph of text is coloured blue. And any <b>bold</b> text is both <b>red and underlined</b>.</p> </body>
HTML formatting
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular">Mary had a little lamb its fleece was white as snow; </font></p> <p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular">And everywhere that Mary went, the lamb was sure to go.</font></p> <p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular">It followed her to school one day, which was against the rule;</font></p> <p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular">It made the children laugh and play, to see a lamb at
school.</font></p> <p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular">And so the teacher turned it out, but still it lingered near,</font></p> <p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular">And waited patiently about till Mary did appear.</font></p> <p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular">"Why does the lamb love Mary so?" the eager children cry;</font></p> <p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSansRegular"> "Why, Mary loves the lamb, you know" the teacher did reply.</font></p>
CSS formatting
<style type="text/css" media="screen"> p { color: #f00; font-size: 12pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> <p>Mary had a little lamb its fleece was white as snow;</p> <p>And everywhere that Mary went, the lamb was sure to go.</p> <p>It followed her to school one day, which was against the rule;</p> <p>It made the children laugh and play, to see a lamb at school.</p> <p>And so the teacher turned it out, but still it lingered near,</p> <p>And waited patiently about till Mary did appear.</p> <p>"Why does the lamb love Mary so?" the eager children cry;<p> <p>"Why, Mary loves the lamb, you know" the teacher did reply.</p>
There is a clear winner here. Notice how easy it is to read the copy within the CSS example. To take this to the next level, we will remove the CSS from the page altogether and put it in to a separate file. In place of the CSS, we will add a file reference:
style.css
p { color: #f00; font-size: 12pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
my-page.html
<style type="text/css" media="screen" src="text-format.css"> <p>Mary had a little lamb its fleece was white as snow;</p> <p>And everywhere that Mary went, the lamb was sure to go.</p> <p>It followed her to school one day, which was against the rule;</p> <p>It made the children laugh and play, to see a lamb at school.</p> <p>And so the teacher turned it out, but still it lingered near,</p> <p>And waited patiently about till Mary did appear.</p> <p>"Why does the lamb love Mary so?" the eager children cry;<p>
<p>"Why, Mary loves the lamb, you know" the teacher did reply.</p>
Now we have 'externalised' the CSS - that is, it has been saved within a separate file and call upon using 'src="textformat.css"' within the 'style' tag. You could include a CSS file src (source) reference on every page of your website, thereby massively reducing the overall file size and load time.