Lab 6

Introduction to HTML Commands
Lab # 16
LAB # 16
INTRODUCTION TO HTML COMMANDS
OBJECT
To be able to learn the basic and advanced commands of HTML
THEORY
Markup is information that is added to a document to convey information about the
document's structure or presentation. Markup languages are all around us in everyday
computing. While you may not see it, word processing documents are filled with codes
indicating the structure and presentation of the document. What you see on your screen
just looks like a page of text, but the formatting is done "behind the scenes" by the
markup. Hypertext Markup Language (HTML) and its successor, is the not-so-behindthe-scenes markup languages that are used to tell Web browsers how to structure and,
some may say, display Web pages.
In the case of HTML, markup commands applied to your Web-based content relay the
structure of the document to the browser software and, though perhaps unfortunate at
times, how you want the content to be displayed. When a Web browser reads a document
that has HTML markup in it, it determines how to render the document onscreen by
considering the HTML elements embedded within it
Part I : Basic HTML Commands

Every HTML document must begin with the <html> tag and end with its complement, the
</html> tag. In addition to the <html> tag, this document includes three other pairs of tags
that should be included in any HTML document:
The <head> and </head> tag pair is used to indicate any information about the
document itself. You'll learn how to add some of this information in later lessons.
The <title> and </title> tags are used to add a title to your browser's Title bar. The
Title bar is the colored band at the top of any application that gives the name of
the application.
The <body> and </body> tags are used to surround any text that appears in the
HTML page.
FCEPL Fundamentals of Computer Engineering and Programming Languages
87
Lab # 16
Heading Tags:
The heading elements are used to create "headlines" in documents. Six different levels of
headings are supported: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These range in
importance from <h1>, the most important, to <h6>, the least important
88
Lab # 16
Paragraph :
Surrounding text with the <p> and </p> tags indicates that the text is a logical paragraph
unit. In general, the browser places a blank line or two before the paragraph. Like
headings, the align attribute makes it possible to specify a left, right, or center alignment
Break:
To insert returns or blank lines in an HTML or XHTML document, the <br /> tag is
used. This tag inserts a single carriage return or line break into a document.
89
Lab # 16
Listing:
Modern HTML has three basic forms of lists: ordered lists (<ol>), unordered lists (<ul>),
and definition lists (<dl>).
Ordered List:
An ordered list, as enclosed by <ol> and </ol>, defines a list in which order matters.
Ordering typically is rendered by a numbering scheme, using Arabic numbers, letters, or
Roman numerals.
<ol>
<li>Item 1</li>
<li>Item 2</li>
...
<li>Item n</li>
</ol>
The <ol> tag has three basic attributes, none of which is required: compact, start, and
type. The compact attribute requires no value under traditional HTML , which allows no
attributes without values, it is set to a value of compact, like so:
<ol compact="compact">
It simply suggests that the browser attempt to compact the list, to use less space onscreen.
The type attribute of <ol> can be set to a for lowercase letters, A for uppercase letters, i
for lowercase Roman numerals, I for uppercase Roman numerals, or 1 for regular
numerals. The numeral 1 is the default value.
The <ol> element also has a start attribute that takes a numeric value to begin the list
numbering. Whether the type attribute is a letter or a numeral, the start value must be a
number.
<ol>
<li>Item 1</li>
<ol>
<li>Item a</li>
...
<li>Item z</li>
</ol>
...
<li>Item n</li>
</ol>
90
Lab # 16
91
Lab # 16
Unordered Lists
An unordered list, signified by <ul> and </ul>, is used for lists of items in which the
ordering is not specific. This can be useful in a list of features and benefits for a product.
A browser typically adds a bullet of some sort (a filled circle, a square, or an empty
circle) for each item and indents the list.
The type attribute can appear within the <ul> tag and set the type for the whole list, or it
can appear within each <li>. A type value in an <li> tag overrides the value for the rest of
the list, unless it is overridden by another type specification. The allowed values for type
are disc, circle, or square
92
Lab # 16
Part II : Advanced HTML Commands

HTML the main way to define hyperlinks is with the anchor tag, <a>. A link is simply a
unidirectional pointer from the source document that contains the link to some
destination.
For linking purposes, the <a> tag requires one attribute: href. The href attribute is set to
the URL of the target resource, which basically is the address of the document to link to,
such as http://www.democompany.com
93
Lab # 16
94
Lab # 16
Image:
To insert an image into a Web page, use an <img> tag and set its src attribute equal to
the URL of the image.
Tables:
In its simplest form, a table places information inside the cells formed by dividing a
rectangle into rows and columns. Most cells contain data; some cells, usually on the
table's top or side, contain headings. HTML represents a basic table using four elements.
In markup, a table tag pair, <table> </table>, contains an optional caption element,
followed by one or more rows, <tr> </tr>. Each row contains cells holding a heading,
<th> </th>, or data, <td> </td>.
95
Lab # 16
ASSIGNMENT
Create website web pages by using HTML commands discussed in this lab.
96

Lab 6

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lab 6

Încărcat de

Drepturi de autor:

Formate disponibile

Introduction to HTML Commands

Part I : Basic HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

Introduction to HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

Part II : Advanced HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

Introduction to HTML Commands

FCEPL Fundamentals of Computer Engineering and Programming Languages

S-ar putea să vă placă și