Layout

  • November 2019
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Layout as PDF for free.

More details

  • Words: 1,088
  • Pages: 6
F.4 CIT – HTML – Text: Layout

page 1

Introduction The flexibility of the layout of a webpage is very limited if HTML is used solely. The layouts, for example the page margins, the indentation, etc, can only be specified by using the style which will not be discussed in this chapter. Despite of the limited ability of HTML, we can still define a heading, a paragraph, insert a new-line character, align texts and create different kind of list. Line Break and Paragraph In most situations, when we are editing text in a word processor, we expect the text to start in a new line by pressing the Enter button. However, this is not the case in HTML editing. A new line character in the HTML code does not imply the same in the rendered web page. Try the following code and describe what you see in the browser: New Line Demonstration We want to test the new line character in HTML file. Will this line appear in another line?

If we want to start our text in a new line, we have to use the following tags. 1.

Heading – Tag is a tag used to mark the enclosed text as a heading (bold), ranging from most prominent to least prominent. A new line character is inserted after the tag. Usage: Text where n can be 1, 2, 3, 4, 5 or 6

Example:

Most prominent heading

Least prominent heading


2.

Manual Line Break –
Tag
is inserted into the text where the following text should be shown in the next line. Note that
only has the end tag. Usage: Text


Example: Can you give me a hand?
Sure!

F.4 CIT – HTML – Text: Layout

3.

page 2

Paragraph –

Tag Paragraphs are delimited by the paragraph tag,

.

tag controls the line spacing within the paragraph as well as the line spacing between paragraphs. The default line spacing is single space within a paragraph and double-space between paragraphs. What is the difference between

tag and
tag? Usage:

Text



Example:

Can you give me a hand?

Sure!

4.

Preserving Formatting – 
 Tag Sometimes, you will want the client browser to interpret the text as appeared in the HTML, including the white spaces and forced formatting. In such cases, we can use the preformatted tag, 
. This tag tells the browser that the text within the tag has been preformatted and should be rendered exactly as it appears in the code. The enclosed tag is rendered in a monospaced font. Usage: <pre>Text




Example: <pre>Can you give me a hand? Sure!


5.

Line Break –
Tag
tag causes the browser to draw a line between the component before and after the tag. Usage: Component 1
Component 2

Attributes: align:

It can be left | center | right.

noshade:

No shading effect on the line

size:

The line size measured in pixel

width:

The line width measured in pixel or percentage (relative)

Example: Heading Here
Content Here

F.4 CIT – HTML – Text: Layout

page 3

Text Alignment The alignment of text can be specified in the attributes of many tags. The attribute name is align and its possible values are CENTER, LEFT and RIGHT. Usage: align

attribute is applicable to:

, ,
, , ,

, <SELECT>, <SPAN>,

,

, ,

List Lists are frequently used to explicitly express details points of the current content. They are an effective way to highlight larger chunks of information. Bulleted lists are especially helpful in expressing the hierarchical structure or the order of items. In HTML, we can render bulleted lists in two ways: ordered list and unordered list. Either way corporate with the
  • tag which indicates that the enclosed content is a list item. Ordered List: An order list shows the sequential relationship between items. Numbers or alphabets (numbering) are used to indicate the ascending order of items. Ordered list is marked by
      tag in HTML. Unordered List: Items in an unordered list do not possess any sequential relationship. Therefore, their order of appearance is not important. Symbols (bulleting) are used to indicate the list items Unordered list is marked by
        tag in HTML.
      • Tag: Usage:
      • Item 1


        • Attributes: 1. type The “bullet” of the item. Possible values: 1|a|A|i|I|disc|square|circle 2. value The sequence number used in “bullet” used in ordered list.
          Tag: Usage:
          1. Item 1
          2. Item 2


            3. F.4 CIT – HTML – Text: Layout

            page 4

            …


          Attirbutes: 1. type

          2.

          The “bullet” of the item. Possible values: 1|a|A|i|I start

          3.

          The starting value number. The value of start must be numeric, regardless of the type value. Note that the start value in
            tag can be overridden by the value attribute in
          1. tag. compact This is used to indicate that the list items are short, so the browser can render the list more compact. For example, it could put more than one item on a line.

            Example:
            1. First Item
            2. Second Item
            3. Third Item
            4. Forth Item (Overriden)
            5. Fifth Item


              Tag: Usage:
              • Item 1
              • Item 2
                • …


              Attirbutes: 1. type

              2.

              The “bullet” of the item. Possible values: disc|square|circle compact The same as that in
                tag.

                Example:
                • Item 1


                  • F.4 CIT – HTML – Text: Layout

                  page 5

                • Item 2
                • Item 3
                • Item 4
                • Item 5


                Definition List: A definition list is a list without bullets. A definition list is declared by
                , terms defined by
                tag and definition is defined by
                tag. Usage:
                Term 1
                Definition 1
                Term 2
                Definition 2
                Term 3
                Definition 3


                Attributes:
                Tag 1.

                compact: The same as that in
                  tag.

                  Example:
                  Computer Terms:
                  WWW
                  World Wide Web
                  FTP
                  File Transfer Protocol


                  F.4 CIT – HTML – Text: Layout

                  page 6

                  Nested List: A list can be defined in another list and such list is called a nested list (if a content is defined in another content of the same structure, we call such repeated structure a nested structure) Example: Unordered List:
                  • UL Item A
                  • UL Item B
                  • Ordered List:
                    1. OL Item 1
                    2. OL Item 2
                    3. Definition List
                      Term 1
                      Definition 1
                      Term 2
                      Definition 2
                    4. OL Item 3
                  • UL Item C


                  An unordered list

                  An ordered list

                  A definition list

                  Related Documents

                  Layout
                  November 2019 52
                  Layout
                  November 2019 56
                  Layout
                  May 2020 59
                  Layout
                  May 2020 56
                  Layout
                  October 2019 35
                  Layout
                  December 2019 32

                  Copyright © 2024 PDFCOKE.

    • , ,