Orginal index lektion 1

REDIGERAT INDEX LEKTION 1

Lite om sökmotorn Google
WhiteSpace
Headings
Basic Text Formatting
White Space and Flow
Creating Headings
Paragraph
Pre
Typsnitt
The Address Element
Olika listor
Inserting and Deleting Text
Block referens

Föregångaren till HTML kod är SGML (kom 1986) - Standard Generalized Markup Language
HTML = Hyper Text Markup Language

XHTML är en utvidning av språket och man tar hjälp av XML

Överst finns en DTD deklaration (dokumenttyps deklaration)
Gå in på http://www.w3.org/TR/html4/sgml/dtd.html så får du specifikationen

XML Tomma element skrives <br />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Sidans titel</title>                     Titel taggen måste vara med
<link> Här kan man länka till ex vis CSS filer </link>
<meta> Beskrivningstext för sökmotorer</meta>
<object>  </object>
<style> Här kan man skriva in hur sidan skall formateras
om man inte laddar ner CSS file i stället via link attributet
</style>
<script> Här kan man ha någon form av programkod </script>
<base></base>
</head>
<body>
Här är själva huvudsidan
</body>
</html>

About Google

Google is best known for its search engine, although Google now offers a number of other services.

Google's mission is to organize the world's information and make it universally accessible and useful.

Its founders Larry Page and Sergey Brin started Google at Stanford University.









About Google

Google is best known for its search engine, although Google now offers a number of other services.

Google's mission is to organize the world's information and make it universally accessible and useful.

Its founders Larry Page and Sergey Brin started Google at Stanford University.

Click here to visit Google’s Web site.

Till menyn







White Space Collapsing and Line Wrapping

This paragraph shows how multiple spaces between words are treated as a single space. This is known as white space collapsing, and the big spaces between some of the words will not appear in the browser. It also demonstrates how the browser will treat multiple carriage returns (new lines) as a single space, too.

















Till menyn

Six Levels of Headings in XHTML

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
















Basic Text Formatting

This section is going to address the way in which you mark up text. Almost every document you create will contain some form of text, so this will be a very important section.









White Space and Flow

Before you start to mark up your text, it is best to understand what XHTML does when it comes across spaces and how browsers treat long sentences and paragraphs of text.

Till menyn







Creating Headings

No matter what sort of document you are creating, most documents have headings in some form or other...

Left-Aligned Heading

This heading uses the align attribute with a value of left.

Centered Heading

This heading uses the align attribute with a value of center.

Right-Aligned Heading

This heading uses the align attribute with a value of right.

Till menyn















Paragraph < p > </p >

Here is a paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

When you want to start a new line you can use the line break element. So, the next
word will appear on a new line.

Without the line break element, new lines are started only when the sentence reaches the end of the screen; this sentence should be long enough to wrap on your screen. Now try resizing your browser window and see how the position where the line wraps onto a new line changes.

Some Web designers also use this element to control the layout of the document and add extra white space. You can use multiple line break elements to create gaps of several lines, like I am about to do




here because this text is still in the same paragraph element. Rather than using the line break element to add white space into your documents, it is better to use CSS.

Till menyn
















Pre

The following text is written inside a <pre> element. Multiple spaces should be preserved and the line breaks should appear where they do in the source document.

function testFunction(strText){
   alert (strText) 
}

The content of the <pre> element is most likely displayed in a monospaced font.

Till menyn















Typsnitt

The following word uses a bold typeface.

The following word uses an italic typeface.

The following word would be underlined (deprecated).

The following word would have a strikethrough (deprecated).

The following word will appear in a monospaced font.

Superscript text: Written on the 31st February.

Subscript text: The EPR paradox2 was devised by Einstein, Podolsky, and Rosen.

Bigger text: The following word should be bigger than those around it.

Smaller text: The following word should appear smaller than those around it.

Horizontal Rule: Beneath this paragraph the page will finish with a horizontal rule.


Till menyn

Creating Emphasis Using the <em> and <strong> Elements

In the following sentence, the word Always is contained inside an <em> element, while the words can cause blindness are contained inside the <strong> element.

Always look at burning magnesium through protective colored glass as it can cause blindness.

















The Address Element

The following address is contained inside an <address> element.

Wrox Press, 10475 Crosspoint Blvd, Indianapolis, IN 46256
















Abbreviations, Acronyms and Definitions

The following sentence uses an <abbr> element for the id Bev.

I have a friend called Bev.


The following sentence uses an <acronym> element for the acronym XHTML.

This chapter covers marking up text in XHTML.


The following sentence uses a <dfn> element for the important term XHTML.

This book teaches you how mark up your documents for the web using XHTML.


Till menyn







Quotes and Citations

The <blockquote> Element and cite Attribute

The following description of XHTML is taken from the W3C Web site. It is contained inside a <blockquote> element, which also carries a cite attribute.

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

Note how the preceding paragraph is indented from the rest of the text.

The <q> Element for Small Quotations

If your quotation is going to appear only within a sentence, you should use the <q> element. The following sentence uses the <q> element to form a quote:

As Dylan Thomas said, Somebody's boring me. I think it's me.

The <cite> Element for Quoting Text From Another Source

This chapter is taken from Beginning Web Programming.

Till menyn















Representing Code, Keyboard Instructions and Programming Variables

The <code> Element For Adding Code to Your Web Pages

The following line appears inside a <code> element.

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

The <kbd> Element for Keyboard Instructions

To force quit an application in Windows, hold down the ctrl, alt and delete keys together.

The <var> Element for Programming Variables

The following line is written inside a <code> element, while user-name is written inside a <var> element.

document.write("user-name")

As you can see, the content of the <var> element is italicized.

The <samp> Element for Sample Program Output

The following line uses the <samp> element to indicate the output from a script or program.

This is the output from our test script.

















Abbreviations, Acronyms and Definitions

Unordered Lists

Here is an unordered list, which is just a bulleted list:

Ordered Lists

Here is an ordered list using numbers:

  1. Point number one
  2. Point number two
  3. Point number three

Here is an ordered list using small Roman numerals:

  1. Point number one
  2. Point number two
  3. Point number three

Here is an ordered list using capital letters and starting at point 4, which is a letter D:

  1. Point number one
  2. Point number two
  3. Point number three

Unordered Lists

Here is a definition list:

Unordered List
A list of bullet points.
Ordered List
An ordered list of points, such as a numbered set of steps.
Definition List
A list of terms and definitions.

Nested ordered lists

Here is a nested ordered list:

  1. Item one
  2. Item two
  3. Item three
  4. Item four
    1. Item 4.1
    2. Item 4.2
    3. Item 4.3
  5. Item Five
Till menyn















Inserting and Deleting Text

How to Spot a Wrox Book

Wrox-spotting is a popular pastime in bookshops. Programmers like to find the distinctive bluered spines, because they know that Wrox books are written by 1000 monkeysProgrammers for Programmers.

Both readers and authors, however, have reservations about the use of photos on the covers.

Block and Inline Elements

Block-Level Elements

Block-level elements always start on a new line. The <h1> and <p> elements will not sit on the same line, whereas the inline elements flow with the rest of the text.

Block-Level Elements

Block-level elements always start on a new line. The <h1> and <p> elements will not sit on the same line, whereas the inline elements flow with the rest of the text.

Till menyn