0% found this document useful (0 votes)

5 views108 pages

Evolution of Computing Devices

The document provides a comprehensive history of computers, tracing their evolution from ancient devices like the abacus to modern electronic computers. It highlights significant milestones in computing technology, including mechanical and electrical devices, and the impact of these innovations on various sectors of society. Additionally, the document includes acknowledgments for contributors and a detailed table of contents outlining various chapters related to HTML coding and web design principles.

Uploaded by

justinclarkliberato

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

5 views108 pages

Evolution of Computing Devices

Uploaded by

justinclarkliberato

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

History of computers:

Computers and electronics play an enormous role in today's society,

affecting everything from communication and medicine to science.
Although computers are typically viewed as a modern invention involving
electronics, computing predates the use of electrical devices. The ancient
abacus was perhaps the first digital computing device. Analog computing
dates back several millennia as primitive computing devices were used as
early as the ancient Greeks and Romans, the most known complex of
which being the Antikythera mechanism. Later devices such as the castle
clock (1206), slide rule (c. 1624) and Babbage's Difference Engine (1822)
are other examples of early mechanical analog computers.
The introduction of electric power in the 19th century led to the rise of
electrical and hybrid electro-mechanical devices to carry out both digital
(Hollerith punch-card machine) and analog (Bush’s differential analyzer)
calculation. Telephone switching came to be based on this technology,
which led to the development of machines that we would recognize as early
computers

Acknowledgement:
We are extremely grateful to our group members for helping us to
make this possible in creating this HTML Book bind. We thank you John
Denver Musa and Jhonferdey Platon Masajo having to help us by typing
out the codes and for being helpful members. We also thank you Justin
Clark M. Liberato and John Michael Salvador Gutierrez for typing out
the description each of the html codes and for leading the group. We also
want to thank you our Classmates and Ict teacher Ma’am Mischelle
Carrisse M. Macalisang in correcting our mistakes and for giving us time
to make this possible.
I

Table of contents:
Chapter 1 : Body Text Content
The Document Body
Content In Paragraphs
Forcing Line Breaksigh
Quotes and Blockquotes
Headings
Emphasizing Text
Text Formatting
Preformatted Text
Subscript And Superscript
Contact Address
Displaying Code In Text
Advisory Tags
Delete And Insert
Chapter 2: Adding Style To Content
Using Tag Attributes
First Stylesheet
Styling Tags
Styling With Class
Styling With Identity
Applying Color Style
Dividing Content
Centering With Style
Inline Styling
Chapter 3: List And Entities
Unordered List
Bullet Point Style
Ordered List
Numbering Style
Definition List
Horizontal Rule
Character Entities
II

Chapter 4: Making Tables

A Simple Table
Formatting Cells
Positioning The Table
Adding Rows
Spanning Rows
Spanning Columns
Header And Footer
Push Button Alignment
Cell Content
Reset Button
Cell Style
Submit Button and Rules
Table Frames
Image Submit
Grouping Button
Columns
Buttons
ColumnWith Graphics
Widths
Selection
Chapter Menu5: Hyperlinks And Anchors
Group Menus
Creating Hyperlinks
Grouping
Link Title from Fields
Tooltip
Chapter 9: Borders And Margins
Link To Protocol
Background And Border Color
Images As Hyperlink
Border
Chapter Style
6: Embedding Contents
Border
Add AnWidth
Image
Border shorthand
Embedding multimedia (music)
Add Paddingmultimedia (video)
Embedding
Relative
ChapterPadding
7: Using Frames
Padding
Two ColumnShorthand
frameset
Set
TwoMargins
Row frameset
Margin
NestedShorthand
frames
Put It Together
Frame Appearance/Targets
Chapter
Chapter10: Positioning
8: Creating Content Box
Forms
Absolute
A SimplePositioning
Form
ZText
OrderInputs
Relative
Password Positioning
Inputs
Floating Boxes
Checkboxes
Chapter 11: Stylish Text
Radio button
Font Families III
Font Size
Font Style
Font Weight
Font Variant
Text and Content Alignment
Font Shorthand
IV

Line Height
Text Decoration
Indenting Text
Text Spacing
Text Direction
Text Capitalization
Chapter 12: Stylish Backround
Background Color
Background Image
Background Position
Background Attachment
Background Shorthand
Cursor
Hyperlink Colors
Additional Content

EDITION
V

VI
The Document Body
The where body arrives actual Following the obligatory DTD and the
head section code the is written. The HTML 4 specification does still have
<body> </body> tags but these are now optional. Also the <body>
attributes formerly used in HTML to specify background color, text color
and hyperlink colors All of these colors should now be specified in a style
sheet. The only two <body> attributes that remain fully valid in HTML 4 are
load and unload that can be used to run script functions when the
document loads and unloads. This example illustrates the document body
section and calls a JavaScript alert) function when the page loads and
unloads: the at document content have all been made obsolete.
<head>
<title>Using Load and Onunload</title>
</head>

<body onload ="alert ( 'The One Piece Is Real!!!' )"

on unload "alert ('Its In...')'' >

<p> </p>

</body>
[Link]
l

Content In Paragraph
Text content is traditionally separated into sentences and paragraphs
to be more easily read and understood. The basic tags that define the
document text content into paragraphs are the <p» </p» tags. These will
visually separate the displayed text, normally leaving two empty lines
between each paragraph. Although browsers may correctly render text, into
paragraphs without the closing </p> tag, its omission is bad practice and
they are required to comply with the HTML Strict standard. The closing
</p> tag should always be included as shown in the example below and all
examples throughout this book:
<html>
<body>
<p>
In the windmill village there is a boy named Monkey D. Luffy
</p>
<p>
His dream is to become the king of the pirates.
</p>
</body>
</html> [Link]
l
Forcing Line Breaks
When the content of the display area. The browser will normally seek
in back the text to find the last to break <br> tag. The <br> tag is always
used without a closing tag. This can appear: In the following example the
<br> tag is used to determine how the body text content should body will, is
displayed text by default, wrap automatically next the to meeting after line
the right-hand edge at the space which line. This ensures that the Iine
wraps intelligently so that the whole last on word the line is not broken. A
line break in the displayed forced text can be : using the single tag be
inserted as often as required and at any point in the text to force one or
more line breaks.

<html>
<body>
<p>
In order to reach his dream Luffy is searching for crewmates.
<br>
First he meet Zoro
<br>
known as a "Pirate Hunter."
</p>
</body>
</html>

[Link]
Quotes And blockquotes
In the HTML 4 specifications, two tags are provided for the display of
quotations within document body text content. The <q> </q> quotation tags
allow for short snippets of quoted text to be inserted into regular text
content. Whereas the <blockquote> </blockquote> tags can be used to
insert longer quotations into the body text. Both of these tags accept a
single attribute called cite that can be assigned an address indicating the
quotation source. Most browsers will render the <blockquote> content as
an indented text as seen in the example below. This indentation should not
be used for presentational purposes, as not all browsers will act the same.
Though It is the intent of the HTML 4 specification that the browser should
provide quote marks to surround content in each of these tags, although
most may not fully comply.

<html>
<body>
<p>Luffy said to Zoro that you are now a member of my
crew.</p>
<blockqoute cite = "https.//[Link]/[Link]">
<p>Zoro said that you are not the one to decide!</p>
</blockqoute>
<p>Zoro changed his mind and he joined Luffy.</p>
</body>
</html>

[Link]
ml
Headings
Headings HTML documents used are to define sections of text in the
same way as the heading on this page. There are six sets of heading tags
available ranging from <hl> </h1> as the most important, down to <h6>
</h6> as the least important. Browsers will generally display headings in
increasingly larger fonts to emphasize their importance. In addition, the
browser could use the document headings to compile a list of topics that
appear in that document. The simple example below illustrates each of the
headings as they appear when viewed in Microsoft Internet Explorer:

<body>
<h1>C1 Luffy</h1>
<h2>C2 Zoro</h2>
<h3>C3 Usopp</h3>
<h4>C4 Sanji</h4>
<h5>C5 Nami</h5>
<h6>C6 Chopper</h6>
</body>

[Link]
ml
Emphasizing Text
The text displayed in the body of a HTML document can be
emphasized by making the font appear bolder, or in italic style, or in both
bold and italic style. To make the text bold requires the text to be contained
inside a pair of <b> </b» tags. Alternatively, emphasis can be suggested
using <strong> </strong> tags that will generally display the text in a bold
font. For italic text, the <i> <i> tags must surround the text. On the other
hand, emphasis can be suggested using <em> <lem> tags that will
generally display the text in an italic font. Bold and italic text can be
displayed by nesting one pair of tags inside the other as illustrated by this
example:

<body>
<p>Usopp joined Luffy, when he save their village from<br>
<b>Evil</b> <i>Pirates</i>
which is lead by <b> <i>Kuro<i> </b>.
</p>
<p> Kaya gave them the boat<br>
<strong>Going</strong> <em>Merry</em>. <br>
A very <strong> <em>nice ship<em> </strong>
</p>
</body>

[Link]
Text Formatting
In the Text of a body HTML will the user in the browser settings. The
<tt> </tt> tags can be used to force the browser to display text using the
fixed width font selected by the user. Font size can be varied using the
<big> </big> tags to display text in a font size that is larger than the font
that is used by default for regular text. Also the <small> </small> tags may
be used to display text in a font size that is smaller than that used for
regular text. The example below illustrates how text appearance can be
formatted into fixed width font and a variety of font sizes:

<body>
<p>Sanji joined Luffys crew, when<br>
<tt>-he saved their resaturant Baratie from Don Krieg-</tt>
<br>and to accomplish his dream <big>All</big> Blue.</br>
<small><small>
And Sanji's journey beggins.
</small></small>
</p>
</body>

[Link]
ml
Preformatted Text
The HTML <pre> tag is useful to retain the format characteristics
of preformatted text within a document. Any text within <pre> </pre> tags
will be displayed to include the original spaces, tabs and line brealks that
are collectively known as "whitespace". The browser will not generally wrap
preformatted text and may display the text in a fixed width font, as
illustrated in the example listed below:

<body>

<p>Top 4 Villans in One Piece before the time skip</p>

<pre>
Crocodile
Enel
Rob Lucci
Gecko Moria
</pre>

<p>...These are the top villains that the Straw Hat fought before the time
skip.</p>

</body>

[Link]
ml
Subscript And Superscript
The HTML <sub> and <sup> tags can be used to display text that is
vertically altered from the regular text line. For subscript text the
<sub></sub> tags display text shifted down by about half the line height of
regular text. Similarly the <sup> </sup> tags display superscript text shifted
up by about half the line height of the regular text. It should be noted that,
although the position is shifted, the t is displayed normally in the same font
throughout. The subscript and superscript tags are especially useful for the
display of some foreign language texts. The example below illustrates both
subscript and superscript displaying text with altered vertical alignment:

<body>

<p>
The One P<sub>i</sub>ece is a treasure that <sup>Gold D. Roger</sup>
<br>
hid at the end of the G<sup>r</sup>a<sub>n</sub>d Line
<br>
called L<sub>a</sub>ugh Tal<sup>e</sup>.

</p>

</body

[Link]
l
Contact Address
The HTML <address> tag can be used to supply contact information
regarding a document. It may often be found at the start or end of a
document providing a link to a page giving more information about the
author of that document. It could also be used to provide information
regarding the authorship of a particular form within a document. In the
example below the <address>, tag incorporates a hyperlink to another page
about the document's author:

<body>

<h3>One Piece</h3>

<p>A anime series that has 1000 episodes.</p>

<address>This article by:

<a href = "[Link]">Eiichiro Oda</a> <br>
Your comments are welcome weebs.
</address>

</body>

[Link]
ml
Displaying Code in Text
HTML 4 specifications provide three tags for the specific purpose of
describing pieces of computer programming code when it is to be displayed
in a document. The <codes </code> tags are used to denote that the text
contained between the tags is indeed programming code. Reference in the
general document text to instances of a variable in the programming code
may use <var> </var> tags to denote a program variable. Any samples of
text output from a program can be denoted in the document text by the
<samp> </samp> tags. The example below uses these tags to describe a
simple JavaScript program in the general document text

<body>
<p>White Beard said "that the...:</p>
<p>
<code>var content="One Piece is real";<br>
document. write(content);</code>
</p>
<p>the <var>content</var> is writen as
<samp>One Piece is real</samp> on th e page
</p>
</body

The One Piece Is REEAALLL!!!

[Link]
ml
Advisory Tags
The tags <abbr> </abbr» and <acronym» «/acronym» can be used
to denote abbreviations and acronyms. These tags may be useful, for
example, to exclude the tag contents from a spell checker. The <dfn>
</dfn> tags can be used to indicate the definitive meaning for a given term
and <cites </cite> tags may be used as a reference to another source. Also
<kbd> </kbd> tags indicate text that a user can input. All of these tags are
illustrated in the example below that assigns a meaningful value to the title
attribute of each tag:

<body>
<p>You can learn a
<abbr title = "Common Gateway Inteface">valuable</abbr>
lesson from the anime
<acronym title = "Practical Enquiry and Reporting
Language">One Piece</acronym> and that is to<br>
<dfn title = "Pearlbook">"Friends and Family are life's most important
things"</dfn> by
<cite title = "Author">Eiichiro Oda</cite>
</p>

<p> Press <kbd title = "agree">Y</kbd>

on your key board for more details.
</p>
</body>

[Link]
ml
Delete And Insert
There are two special tags that can be used to identify text that has
been deleted or inserted in respect of an earlier version of that document.
This may be particularly appropriate when updating draft documents to
reveal the changes. The <del> </del> and <ins> </ins> tags used for this
purpose are unusual as they can be applied in two ways. Firstly the tags
can be applied "in-line" to a word or several words in a paragraph as usual.
Also they can be used to contain entire paragraphs, lists and tables that
have been changed. This example uses these tags in-line to change “1"
into 2" and then to change a complete paragraph:

<body>

<p>
There are not
<del>Two</del> but <ins>One</ins> Piece (treasure)

<del> <p>The strongest man</del> </p>

<ins> <p>The strongest swordsman</ins> </p>

</body>

[Link]
l
Using Tag attributes
To use a tag attribute its name must be added inside the tag together
with an assigned value enclosed within quotes. In the table opposite all tag,
attributes that begin with "on" assign "event-handlers" that will perform an
action each time a particular event occurs. The event-handler will normally
be a script function that will perform the desired action. A piece of
document text can have a style rule applied in-line with the <style> tag. It is
better to use a stylesheet though to keep all the style rules together.
Multiple attributes can be added inside a single tag. This example adds a
style attribute to apply a style rule to the font and adds an onclick attribute
that will open an alert dialog whenever the onclick event occurs:

<head>
<title>Using Tag Attributes</title>
</head>

<body>
<p style="font-family:cursive;color:blue"
onclick="alert('The One Piece Is Real!!!!')">Is the One Piece Real?

</p>
</body>

[Link]
ml
First Stylesheet
Stylesheets are used in HTML 4 documents to influence how aspects
of the document content should be displayed. The code that determines
how each part of t the content should appear is referred to as the stylesheet
"rules". Stylesheet rules must be located in the stylesheet block that is
situated in the head section of a HTML document. to affect followed by a
list of its attributes and values inside a pair The syntax of a stylesheet rule
first states the part of the content of curly brackets { }. Attribute names must
be recognized for the stated document part and the assigned value must be
valid for that attribute. Each attribute and its value are separated by a colon
and each attribute: value pair is terminated with a semi-colon. This example
applies stylesheet rules to the document body itself to create a yellow-
colored background with all text in red:

<style type = "text/css" >

body { background-color: green; color:white }
</style>

</head>

<body>
<p> Gold D. Roger is the Pirate King.</p>
</body>

[Link]
ml
Styling Tags
Style sheet rules can be applied to a selected tag so that each
occurrence of that tag in the document content is affected. This example
changes the color and font for all <h3> content:

<style type = "text/css">

h3 {font-family : monospace; color: red }
</style>

</head>

<body>
<h2>Worst Generations</h2>
<h3>Luffy is one of the Worst Generations</h3>
<p>The Worst Generations are the pirates that is making a rampage at the
New World!</p>

<h3>The Emperrors</h3>
<p> They are the pirates that rule the New world!</p>
</body>

[Link]
ml
Styling With Class
All HTML 4 tags that are used to display content can accept an
attribute called class to which a name can be assigned. The class name
can be used in a stylesheet to apply rules so that any tag bearing that class
name will apply its rules. The example below defines a class named
"myclass" with a rule to change content to a monospace font. The "myclass'
style is applied to the top heading and the bottom paragraph:

<head>
<title></title>
<style type = "text/css" >
.myclass {font-family:monospace; color:blue }
</style>
</head>

<body>
<h3 class = "myclass" >The World Government</h3>

<p>The World Government is a political organization in the world,

seemingly ruled by the Five Elders.</p>
<h3> The Five Elders </h3>
<p class = "myclass" > They are the five highest ranking Celestial
Dragons.</p>
</body>

[Link]
ml
Styling With identity
All HTML 4 tags that are used to display content can accept an
attribute called id to which a name can be assigned. The id name can be
used to identify that individual tag in a stylesheet defining rules for how its
content should appear. In the example below all four paragraphs are
assigned id names but only three of those are used in the stylesheet to
assign rules to their contents:

<head>
<title>Emperors of the Worst Gen</title>
<style type = "text/css" >
#para2 { font-family:cursive; color: red }
#para3 { font-family:serif; color: green }
#para4 { font-family:fantasy; color: blue }
</style>
</head>

<body>
<p id = "para1" >Paragraph 1 - Marshall D. Teach</p>
<p id = "para2" >Paragraph 2 - Red Haired Shanks</p>
<p id = "para3" >Paragraph 3 - Monkey D. Luffy</p>
<p id = "para4" >Paragraph 4 - Buggy The Clown</p>
</body>

[Link]
Applying Color Style
This example applies font and color style rules to two paragraphs in
the document body. The first rule in the style sheet changes the font for all
paragraphs in the document. Next, the background and text colors are
specified for the top recognized name values. Lastly, the background and
text colors are specified for the bottom paragraph-using paragraph using
hexadecimal number values:

<head>
<title>The 2 Handman of the Straw Hats</title>

<style type = "text/css" >

p { font-family:cursive }
#para1 { color:yellow; background-color:blue }
#para2 { color:#FF0000; background-color:#FFFF00 }
</style>

</head>

<body>

<p id = "para1" >Three Sword Stye - Ronoroa Zoro</p>

<p id = "para2" >Diamble Jamble - Vinsmoke Sanji</p>

</body>

[Link]
Centering with styles
In HTML 4 the previous <centers tag, that was used to center content,
has been made obsolete. Instead, the stylesheet text-align rule is now used
to center document content. An entire document can be made to align its
content centrally by applying a stylesheet rule to its document body.
Individual blocks of content can be made to align their content by applying
a style sheet rule to the <div> element. In thę example three blocks are
centered on the page with each controlling alignment of their text
individually:

<head>
<title>The Scared Trio</title>

<style type = "text/css" >

body { text-align:center }
div { width:150; background-color:yellow; color:red }
#div1 { text-align:left }
#div2 { text-align:center }
#div3 { text-align:right }
#div1 { position:absolute; top:0px; left:600px }
</style>
</head>

<body>
<div id = "div1" > <p>Nami</p><div id = "div2" ><p>Usopp</p><div id =
"div3" ><p>Chopper</p></div>
</body>

[Link]
Dividing Content
The document body divided blocks by grouping its content elements
with the <div> </div> tags. This is very useful to control page layout as the
style characteristics of each block can be set by stylesheet rules, of each
block can be set by stylesheet rule. The <div> tag can have id and class
attributes that may be used the stylesheet to specify style requirements.
This example sets the background color of all <div> elements and the
absolute position of two <div> blocks:

<head>
<title>The Trio Rivalry</title>

<style type = "text/css">

div { background-color:yellow; color:red }
#div1 { position:absolute; top:Opx; left:0px }
#div2 { position:absolute; top:60px; left:130px }
</style>
</head>

<body>

<div id = "div1" > <p>Monkey D. Luffy</p> </div>

<div id = "div2" >

<p>Ronoroa Zoro</p><p>Vinsmoke Sanji</p>
</div>

</body>
Inline styling
[Link]
ml
Style rules can be applied to small pieces of text"in-line" with <span>
</span> tags. These tags allow both id and class attributes to apply
stylesheet rules without automatically adding line breaks. Unlike the <di>
blocks that can be used to control block layout the <span> tag is not used
for positioning but rather to set display characteristics for short pieces of
text. This example uses <span> tags to set the appearance of two pieces of
text within a paragraph that is contained in a block:

<head>
<title>A Hard Battle Starts! Luffy vs. Katakuri!</title>

<style type = "text/css">

#div1 { width:300; background-color:pink;
padding:5px; color:white; font-weight:bold }
#span1 { background-color:yellow; color:red }
#span2 { background-color:blue; color:yellow }
</style>
</head>

<body>
<div id = "div1" > <p>In Whole Cake Island
<span id = "span1">Luffy</span>
beats Katakuri using Gear 4
<span id = "span2">Snake man</span> </p>
</div>
</body>
Unordered lists
[Link]
ml
A list of items that does not require the items to be numbered in order
is known as an unordered" list. The unordered list tags <ul> </ul> are used
to contain the items in an unordered list. Each list item should be
surrounded by <li> </li> tags, but the closing tag may optionally be omitted.
They will indent the list from other text. Unordered lists will start Browsers
will choose how the list is to be presented but generally each item with a
default bullet point selected by the browser. The following example
illustrates an unordered list that is indented with bullet points marking each
list item:

<body>
<p> The Monster Trio </p>

<ul>
<li>Luffy</li>
<li>Zoro</li>
<li>Sanji</li>
</ul>

</body>
[Link]
Bullet point styles l
The style of bullet points to be used for marking items in an unordered
list can be specified in the style sheet. Bullet points may be either "square"
or "circle", or a fled circle called a disc". This example illustrates each type
of bullet point style:

<h2>Top 6 Strongest Admirals</h2>

<head>
<style type = "text/css" >
#list1 { list-style-type:disc; color:purple }
#list2 { list-style-type:circle; color:orange }
#list3 { list-style-type:square; color:blue }
</style>
</head>

<body>
<ul id = "list1" >
<li>Akainu</li><li>Senguko</1i></ul>
<ul id = "list2" >
<li>Kuzan</li><li>Kizaru</li></ul>
<ul id = "list3" >
<li>Fujitora</li><li>Ryokugyu</li></ul>
</body>
Ordered lists [Link]
ml
A list of items that has each item numbered to note its position in the
list is called an "ordered'" list. The HTML <ol> and </ol> tags are used to
contain the items in an ordered list. Each list item should be enclosed within
<li> </li> tags and will be numbered the default manner of the browser. All
lists can be nested, as seen in this example that demo two nested ordered
lists:

<head>
<title>Famous Family Tree</title>
</head>

<body>
<ol>
<li> Monkey D. Dragon </li>
<li> Gol D. Roger
<ol>
<li> Portgas D. Ace </li>
<li> Sabo </li>
<li> Monkey D. Luffy </li>
</ol>
</li>
<li> Monkey D. Garp </li>
</ol>
</body>
[Link]
l
Numbering styles
Ordered list number style can be specified as Arabic, lowercase or
uppercase Roman, and lowercase or uppercase Alpha, as seen here:

<head>
<title>Emperors</title>
<style type = "text/css" >
.arab { list-style-type:arabic-numbers; color: red }
.lwrR { list-stlye-type:lower-roman; color: green }
.uprR { list-style-type:upper-roman; color: blue }
.lwrA { list-style-type:lower-alpha; color: orange }
.uprA { list-style-type:upper-alpha; color: purple }
</style>
</head>

<body>
<ol class = "lwrR" >
<li>Old Emperors
<ol>
<li class = "uprR" >Kaido</li>
<li class = "arab" >Big MOM</li>
<li class = "lwrA" >Shanks</li>
<li class = "uprA" >WhiteBeard</li>
</ol>
</li>
<li>New Emperors</li>
</ol>
</body>

Definition lists
[Link]
l
A definition list is a unique type of list where each list item consists of a
term and a definition. AIl the list items are contained within <dl> </dl> tags.
The HTML <dt> and </dt> tags are used to contain a list term while <dd>
</dd> tags contain a list definition. Closing tags are optional for both <dt>
and <dd> tags. The browser will choose how to display a definition list but
generally Web browsers will add aline break after the <dt term and offset
the <dd> definition. In this example, a definition list is used to display
simple definitions of some popular Web languages:

<head>
<title>Trio Tittles</title>
</head>

<body>

<dl>
<dt>Monkey D. luffy: </dt> <dd> Sun God Nika</dd>
<dt> Ronoroa Zoro: </dt>
<dd> King of Hell </dd>
<dt> Vinsmoke Sanji: </dt> <dd> Black Leg </dd>
</dl>

</body>
[Link]
Horizontal rule l
A horizontal ruled line can be drawn across the display area with the
HTML <hr> tag. This tag is used alone without any closing tag. The line will
be drawn across the available display space excluding any margins or
padding borders that it meets. In the example below the first <hr> ine fills
the window width excluding margins while the second <hr> line fills the
<div> block. excluding padding borders

<head>
<title>Best One Piece Arcs</title>
<style type = "text/css" >
#div1 { position:absolute; top:70; left:130;
width:100; padding:5px;
border:3px double red }
</style>
</head>

<body>
<p>Skypiea</p>
<hr>

<p>Ennies lobby</p>
<div id = "div1" >Dressrosa<hr>Land of Wano</div>
</body>
[Link]
Character entities l
The HTML specification provides entities as a means to display
characters that are meaningful in HTML itself. This is necessary otherwise
a "<" character within the general text would be seen as the start of a HTML
tag by the browser. Entity references always start with a “&” ampersand
character and must be terminated by a semi-colon. There are many
character entities available in HTML including the Greek alphabet in both
upper and lower case. Those most frequently used are shown in this
example

<head>
<title>Straw Hat Crews</title>
</head>
<body>
<p>
Monkey D. Luffy <br> Zoro & <br>
Vinsmoke Sanji < <br> Nico Robin > <br>
Franky &qout; <br> Usopp © <br>
Nami ® <br> Chopper ™
</p>
</body>
[Link]
A Simple Table l
Tables are used frequently to display information in HTML documents
and are enclosed within <table> </table> tags. Each piece of table data is
contained in cells defined by the HTML <td> </td> tags and each row of
cells is contained in <tr> </tr> tags. The <table> tag accepts an attribute
named border to assign a width of border to surround the table and each
cell. A caption can be displayed with the table using <caption> </caption>
tags. If this tag is used it must immediately follow the opening <table> tag.
The example below creates a table together with a caption. This table
displays a border one pixel wide and has one row containing three table
data cells:

<body>

<table border = "1">

<caption> The Monster Trio </caption>
<tr>
<td>Monkey D. Luffy</td>
<td>Roronoa Zoro</td>
<td>Vinsmoke Sanji</td>

</tr>
</table>
</body>
[Link]
l

Formatting cells
Data in the table cells in the example opposite is positioned right un to
the borders of each cell and the cells are spaced a short distance apart by
default. The appearance of the cell data can be improved by adding
padding to catch cell with a <table> cell padding attribute. Also the spacing
between cells may be specified with the <table> cell spacing attribute. The
background color can be specified in HTML 4 tables with a style attribute.
This attribute can be used in the <table>, <tr> and <td> tags to set the
background color respectively for the overall background, for a row of cells
and the background color of individual cells. This example builds on the
previous table to add cell padding and spacing plus background color in
two cells.

<body>
<table border = "1"
cellpadding = "5" cell spacing = "5" >
<caption>The Three Idiots</caption>
<tr>
<td style = "background-color:red" >Eustas Kid</td>
<td>Monkey D. Luffy</td>
<td style = "background-color:aqua" >Trafargal D. Law</ta>
</tr>
</table>
</body

[Link]
ml

Positioning the table

To position a table on the page it can be contained within a <divs block
to which an alignment style can be applied. any other This allows a table to
be positioned on the page just like any ot block of document content. The
example below builds on the previous example to add a specific table
width, using the <table> width attribute, and a cell block to center the table
on the page:

<head>
<title>positioning the table</title>
<style type = “text/css” >
div { text-align:center }
</style>
</head>

<body>

<caption>One piece </caption>

<tr style =”background-color:aqua” >
<td>Luffy</td> <td>Zoro</td> <td>Sanji</td>
</tr>
</table>
</div>

</body>

[Link]
Adding rows ml
To add an additional row to a table requires another set of <tr> </tr>
tags to be added containing the same number of <td> </td> cells as used in
the first row. This example builds on the previous example to add another
row containing three cells and also adds another rule to the stylesheet to
center the data in all cells:

<head>
<title>Best Fruits in One Piece</title>
<style type = "text/css" >
div { text-align:center)
td { text-align:center; background-color:violet }
</style>
</head>
<body>

<div>
<table border = "1" style = "background-color:fuchsia"
width = "220" cellpadding = "5" cellspacing = "5" >
<caption>Top 6</caption>
<tr><td>Hito Hito Fruit</td><td>Rumble Rumble Fruit</td><td>Op Op
Fruit</td></tr>
<tr><td>Light Light Fruit</td><td>Magma Magma Fruit</td><td>Dough
Dough Fruit</td></tr>
</table>
</div>
</body>

Spanning rows
[Link]
A table cell can be made to span ml across a number of table with the
<td> rowspan attribute. This attribute is assigned the number of rows to be
spanned by the cell. The cells being spanned in other rows must be
removed In this example Cell 1 spans across two rows and Cell 4 has been
removed:

<head> <title>Top 5 Yonkos in One Piece</title>

<body>
<div>
<table border = "1" style = "background-color:fuchsia"
width = "220" cellpadding = "5" cellspacing = "5" >
<caption>The Yonkos</caption>
<tr>
<td rowspan = "2" style = "background-color:yellow" >
Luffy</td> <td>Big Mom</td> <td>Kaido</td> </tr><tr>
<td>Black Beard</td> <td>Shanks</td>
<tr>
</table>
</div>
</body>

[Link]
Spanning columns

ml
with
A table cell can be made to span across a number of table columns
the <td> colspan attribute. This attribute is assigned the number of
columns to be spanned by the cell. The cells being spanned in other
columns must be removed. In this example Cell 2 spans across two
columns and Cell 3 has been removed:

<head> <title>Best Arcs In One Piec</title>

<body>
<div>
<table border = "1" style = "background-color:black"
width = "220" cellpadding = "5" cellspacing = "5" >
<caption> Top 4 Arcs</ caption>
<tr>
<td rowspan = "2" style = "background-color:blue" >
Skypiea</td>
<td colspan = "2" style = "background-color:grey" >
Marine Ford</td> </tr>
<tr> <td>Alabasta</td><td>Saboady Archipelago</td</tr>
</table>
</div>
</body>

Header and footer

[Link]
ml
Extra rows can be added to the top and bottom of a table to display
header and footer information. The header row must be contained in
<thead> the footer row in tags named <tfoot> </tfoot>, </thead> tags and
Cells in the header row may also use <th> </th> tags to contain their cell
data instead of the usual <td> </td> tags. This will denote their data as
header information. When adding header and footer rows the rest of the
regular rowe must be contained within <tbody> </tbody> tags. The simple
table shown below includes a footer row and a head row containing column
numbers:

<thead style = "background-color :red" >

<tr> <th>Kaido</th><th>Big Mom</th><th>Shanks</th> </tr>
</thead>

<tfoot style = "background-color:violet">

<tr> <td colspan = "3" >3 Yonkos and their pirate crew name</td> </tr>
</tfoot>
<tbody style = "background-color:blue"
<tr><td>The Beast Pirates</td><td>The Big Mom Pirates</td><td>The Red
Hair Pirates</td> </tr>

</tbody>
</table>
</body>

Cell content alignment

[Link]
ml
The position of data within a attributes of the <td> tag. table cell can be
controlled with two Horizontal alignment can be specified with the align
attribute that may have a value of "left", "center" or "right". If the horizontal
alignment is not specified the data will normally be positioned horizontally
at the left by default. Vertical alignment can be specified with the valign
attribute that may have a value of "top", "middle" or "bottom". If the vertical
alignment is not specified the data will normally be positioned vertically in
the middle by default. The example below creates a table illustrating how
data alignment can be changed using the align and valign attributes:
[Link]
Cell style ml
Stylesheet rules can be applied to table cells and rows using either an
id name, or a class, or both id name and class. The example below applies
rules to Cell with its id name and .. Cell2 using a class name. Cell3 has
style rules applied with both id and class. In the bottom row the font for all
cells is specified in the stylesheet using the id name of the <tr> tag.

<head> <title>Sanji's 3 Brother Siblings</title>

<body>
<table border = "1"
Cellpadding = "18" cellspacing = "2">
<tr> <td id = "Ichiji" >Ichiji</td>
<td class = "green" >Yonji</td>
<td id = "Niji" >Niji</td>
</tr>

<tr id = "row2">
<td>Vinsmoke</td><td>Vinsmoke</td><td>Vinsmoke</td>
</table>
</body>
</tr>

[Link]
Table frame and rules ml
The appearance of a HTML 4 table can be customized using the frame
and rules attributes of the <table> tag. Possible values for these attributes
are listed in the table below and I the example demonstrates them in action:

<body>
<table border = "1" cellpadding = "3"
cellspacing = "0" width = "350" ><tr>
<td align = "center" valign = "middle"
style = "color: red" >Monkey D.<br>Luffy</td>
<td align = "left" valign = "top"
style = "color:orange" >Portgas D. Ace</td>

<td align = "right" valign = "bottom"

style = "color:blue" >Sabo</td>
</tr>
</table>
</body> [Link]
ml

Grouping columns
Table columns may be grouped together so that style rules can has
applied to all columns within the group. The columns are grouped using
<colgroup> </colgroup> tags together with their span attribute to assign the
number of columns to be placed in that group. In the example below the
table has two columnn groups to which style rules have been applied:

<head> <title>The Straw Hat Crew</title>

<body>
<table border = "1" width = "250"
cellpadding = "3" cellspacing = "2"

<colgroup id = "group1" span = "2" ></colgroup>

<colgroup id = "group2" ></colgroup>
<tr> <td>Luffy</td><td>Zoro</td><td>Sanji</td> </tr>
<tr> <td>Robin</td><td>Brook</td><td>Franky</td> </tr>
<tr> <td>Nami</td><td>Usopp</td><td>Chopper</td> </tr>
</table>
</body> [Link]
ml

Column widths
To help the browser lay out a table more quickly all table column
widths should be specified at the start of the table. Column widths are
defined, in pixels or as a percentage of overall table width, by the width
attribute of a <col> tag. The <col> tag does not have a closing tag. A span
attribute in the <col> tag may assign a number of columns to which its
width value should apply. This table uses 100% of total available width
(excluding margins) with columns of 25%, 25% and 50% of the total:

<head>
<title>Big Mom and her children</title>
<style type = "text/css" >
#col1 { color:white; background-color:pink }
#col2 { background-color:blue }
</style>
</head>

<tr> <td>Charlotte Linlin</td><td>Charlotte Oven</td><td>Charlotte

Perospero</td> </tr>
<tr> <td>Charlotte Katakuri</td><td>Charlotte Cracker</td><td>Charlotte
Daifuku</td> </tr>
</table>
</body>

Creating hyperlinks
[Link]
ml
Text or an image in a document body can become a hyperlink. tags
that specify "anchor" when contained in <a> </a> tags The destination is
assigned to an attribute of the <a> tag called href and may be an absolute
or relative address. In the browser the hyperlink is displayed in a manner
that distinguishes the link from regular document content. For example, as
reverse text that is a hyperlink may be displayed as video, different color or
underlined. Images that are hyperlinks: often displayed with a colored
border. In a Web browser the link destination address will generally be
displayed in the windows status bar whenever the user places the pointer
over a hyperlink anchor. The example below illustrates a text hyperlink that
will open a destination document when the user follows the link:

<head>
<title> Find The One Piece </title>
</head>

<body>
<p> You need to find the One Piece Click
<a href ="[Link]">here</a>
to find it.
</p>
</body>

[Link]
ml
[Link]
ml
Link title tooltip
The title attribute of an <a> anchor tag can be useful to provide
information about the destination of a hyperlink. When the user hyperlink
the browser may display the moves the pointer over a title attribute value as
a tooltip.

<head>
<title>Link title tooltip</title>
</head>
<body> The Mini
<a href ="going [Link]" Merry
title = ". ." >
<p>CLICK!!</a><p>
</body>
[Link]
l
Link to protocol
Hyperlinks may target a script function rather than a URL location
address. The link must specify the protocol name followed by a colon then
the function name that is to be called. Most typically this will be a call to a
JavaScript function using the protocol specifier JavaScript: This feature is
extremely useful in the creation of interactive Webpages to respond to user
actions. In the following example the hyperlink destination uses a protocol
specifier to call a JavaScript function that will display the current date and
time in an alert dialog box:

<body>

<p>

<a href = "javascript:alert(new Date().toGMTString())">
Click to show current date and time</a>

</p>

</body>
[Link]
ml

[Link]

Images as hyperlinks
Images can be used to create a hyperlink in place of regular, by
surrounding the image tag with <a> anchor tags. Most browsers will
automatically indicate that the image is a unattractive on a Web page but
the image borders can be remove hyperlink by adding a border around the
image. This may look if the stylesheet sets their border-width to zero.
Image The following example displays a text hyperlink and two: hyperlinks
where one image is made border-less:

<head> <title>Image Links</title>

<body>
<p>
<a href = "[Link]" >Click Here</a>
<a href = "page2. html">
<img src =[Link] width = “60” height = “60”
alt="Click" > </a>
<a href = "[Link]" >
<img src = "[Link]" width = "60" height = "60"
alt = "Click" class = "noborder" > </a>
<img src = "[Link] width -"60" height = "60”
</p>
</body>

Adding an Image
[Link]
The HTML <img> tag can be used to add images to the content of a
document body. An <img> image element does not have a closing tag.
There are however a number of attributes that must be supplied inside an
<img> tag for itto be valid. A src attribute should be assigned the address of
the image to be displayed and an alt attribute must be specify a text
alternative in case the browser cannot display the image. The dimensions
to display the image must be assigned to the respective width and height
attributes. These do not need to be the actual image dimensions as the
browser will resize an image to suit the specified size. In order for a script
to reference an image it is important to assign a name to the image with the
<img> id attribute.

This example includes an ActiveX control that embeds a console to play a

sound file within the HTML document:

Set “autostart” to “true” and “playCount” to “2” to play a sound file twice
when the document loads. Set the “width” and “height” attributes to zero to
hide the control panel.
<head>
<title> Image Tags </title>
</head>

[Link]
Embedding multimedia (MUSIC)
Sounds andml video files can be assigned to the href attribute in a
hyperlink so that when that link is followed the browser will call upon a local
“helper” application associated with that file type. For instance, following the
hyperlink below, on a Windows system, typically opens up Media Player to
plat the audio file: <a href = “music.mp3” > Play me </a>. The HTML 4
<object> </object> tags allow for all types of multimedia resources to be
actually embedded in a document. Browsers then determine if they can
handle an embedded multimedia resource or if they must call upon a helper
application. Windows users can neatly use Microsoft’s Active X controls to
incorporate a media player console within a webpage.

This example includes an ActiveX control that embeds a console to play a

sound file within the HTML document:

Set “autostart” to “true” and “playCount” to “2” to play a sound file twice
when the document loads. Set the “width” and “height” attributes to zero to
hide the control panel.
<html>
<head> <title> Embedding Audio </title>
</head>
<body>
<embed name "life"
type="audio/mp3" src="life.mp3"
width="500" height="500"
loop = "false" autostart = "true">
</body>
</html>

[Link]
Embedding multimedia (VIDEO)
ml
The <object> tag has a number of attributes that assign a unique id to
the object and specify its width and height on the page. The type of ActiveX
control is determined by the value assigned to its classic attribute. Options
are set with the <param> tag attributes that specify the source file name
and how the player should work.

This example embeds an ActiveX video player console within a web page
to allow the user to play a MPEG video file:

otice the “uiMode” parameter that alters controls – other values are “none”,
“mini” or “invisible”.

<html>
<head> <title> Embedding Video </title>
</head>
<body>
<embed name "animation"
type = "video/mp4" src = "animation.MP4"
width = "508" height = "500"
loop = "false
</embed>
</body>
</html>

[Link]
ml
Two-column frameset
The <frameset> </frameset> tags control the horizontal allocation of
frame width with a cols attribute. Values assigned to the cols attribute may
be expressed either as pixels or as a percentage where total width is 100%.
The frame values are assigned to the cols attribute from left to right as a
comma delimited list. This is alternatively a wildcard value can be assigned
with a assigned set pixel values to most useful when the other frames are
mean "the available remaining width". The <frameset> tags contain
<frame> tags that specify the location of each frame document with their
src attribute. This example frameholder document arranges the window to
display two frames as 20% and 80% of total available width:

<html>
<body>
<body bgcolor = lime green>
Brook: Yoho yoho yo hohohoho
</body>
</html>

Two-row frameset
[Link]
The <frameset> </frameset> tags control l the frame height with a rows
attribute. vertical allocation of Values assigned to the rows attribute may be
expressed either pixels or as a percentage where total height is 100%.
Assigned to the rows attribute from left to The frame values are right as a
comma delimited list. .This is alternatively a wildcard value can be assigned
with a most useful when the other frames are assigned set pixel values to
mean "the available remaining height". This example frameholder
document arranges the window to display two frames as 259% and 759%
of total available height:

<html>
<head><title>Two Row FrameSet</title></head>

<frameset rows = "25%, 75%" >

<frame src ="[Link]">

</frameset>

</html>

Nested frameset [Link]

ml
Frameholder documents can contain nested framesets to provide a
more elaborate arrangement of frames. <frameset> could, for instance,
assign column widths to two frames. The second <frame> could be
replaced with a nested <frameset> that might then assign row heights to
two frames. An arrangement is illustrated in the example below that creates
a window containing a total of three frames:

<head> <title>Nested Frameset</title> </head>

[Link]
Frame appearance ml
If a border is not required between frames set the <frames>
frameborder attribute to zero. If scroll bars are not required assign a value
of "no' to its scrolling attribute. Positioning of the frames contents from the
frames edges can be specified by assigning positive pixel values to the
<frames> attributes marginwidth and marginheight. A frames dimension
can be made permanent by adding the single-word attribute noresize into
its <frame> tag. This example removes all frame borders and the banner-
frame scrollbars from the example on the previous page:

<head> <title>Nested FrameSet</title> </head>

<frameset cols = "20%, 80%" border = "0">
<frame src = "[Link]" >
<frameset rows = "25%, 75%" >
<frame src = "[Link]"
scrolling = "no" >
<frame src = "[Link]" >
</frameset>
</frameset>
[Link]
ml

A Simple Form

A form is a section of a HTML document body that can contain regular

content together with a number of “controls” which may be modified by the
user. Typical controls include text inputs and radio buttons. The modified
form can be submitted to the server where the forms control input will be
processed. All form content is contained in <form> </form> tags.
The <form> must have an action attribute that specifies the location of
a form handler to process the form data when the form is submitted to the
server. Often the form handler will be a CGI script like the address
assigned to the action attribute in this simple form. A form must also
provide a means for the user to submit the form data.
<html>
<body>

<form action = "[Link] > <p>

First name: <input type = "text" name = "firstname" >
<br>
Last name: <input type = "text" name = "lastname" >
<br>
<input type = "radio" name = "sex" value = "Male" >
Male
<input type = "radio" name = "sex" value = "Female" >
Female
<input type = "submit" value = "Submit" > </p>
</form>

</body>
</html>
[Link]
l

Text Inputs
Many form controls use a HTML <input> tag with a type attribute that
specifies the type of that control. The <input> tag does not have any closing
tag. One of the most common controls is the text input that is created with
an <input> tag and an assigned type of “text” To make the text input useful
to a form handler it must also have a name and a value. These are
assigned to the <input> name and value attributes for submission by the
form. Optionally the width of a text input can be specified by assigning an
integer to a size attribute by the form. The example bellow creates a text
input with the name of “txt1”, a size of “12” and an initial value of “Enter” A
user can change this initial value and the form will submit the input name
and its final value as a name/value pair:

Password Inputs
[Link]
A user can enter an unlimited numberl of characters into a text input
unless a limit is set with a max length attribute. An <input> tag's max length
attribute specifies a maximum number of characters that can be entered
into an input field. This may also be used with the "password" type of
<input> which is simply a variation of the regular "text" type input. The only
difference is that the password input field displays an asterisk in place of
each actual character of the text content, to safeguard against a password
being easily visible. All other attributes that are used in the text input can be
used by a password input. When a form is submitted the password inputs
name and actual character content are sent to the form handler. This
example (code) sets no initial <input> value but limits the maximum
permitted entry length to six characters:

<head><title> Password Inputs</title></head>

<body>
<form name = "myform" method = "post"
action = "[Link]

<p> Enter Password [Max. 6] <br>

Checkboxes [Link]
mlselected its name and
A "checkbox" type input is a HTML form control, which the user can
choose to select or ignore. If a checkbox has been
associated value will be sent to the form handler when the form is
submitted. Normally each checkbox will be given a unique name but
checkboxes may share a common name to apply multiple values to the
same property.

<html>
<form name = "bcheck" method = "post"
action= "[Link]
<p>
<input name = "chk1" value = "pirate king"
type= "checkbox" > Pirate King"
type= "checkbox" > Kind
<input name = "chk2"
value = "mugiwara"
type= "checkbox" > Mugiwara
<input type = "submit" value = "Submit" >
</p>
</form>
</body>

[Link]
ml
Radio Buttons

A “Radio” type input is normally one of a group of radio buttons that

share a common name. Unlike checkboxes, only one button in the group
can be selected at any given time. When the form is submitted only the
selected button’s name and value are sent. A radio button group must
always have one button selected. The button to be initially selected can be
specified by adding the single word checked into its <input> tag. The
example submits the selected button name/value to the CGI script form
handler, which outputs the data received:

<body>
<form name = "myform" method = "post" action =
"[Link] >
<p>
<input name = "Pirate" value = "King"
type = "radio"
Monkey D. Luffy <input name = "Pop" value = "Cola"
type = "radio" Checked >Gold D. Roger

<input name = "Pirate" value = "King"

type = "radio" > Douglas Bullet
<input type = "submit" value = "Submit" >
</p>
</form>
</body>

Push Buttons [Link]

ml have a name and
The "button" type of <input>creates a push button control that is
typically used to run a script function. A button should
value but neither of these are generally used when the form is submitted to
the server. Whatever is assigned to the <input> tag’s value attribute will be
displayed on the button face as its label. The <input> tag’s on click attribute
is used to execute a script function when the user pushes that button. The
script function will often be contained in a script block within the document
head section or in a linked script file. In the example below some script,
code is assigned "in-line" to the on click attribute to run when the button is
pushed. This code assigns the browser name to a text input value:
<body>
<form name = "myform” method = “post”
action = "[Link]
<p>
<input name ="txtl" type = "text" size = "28"'> <br>
<input name ="btnl" type = "button"
value = "Show the next pirate king"
onclick = "[Link]=[Link]">
<input type = "submit" value = "Submit" >
</p>
</form>
</body>

[Link]
Reset Buttons
ml
A "reset" type button can be added to a form to return all the form
values to allow the user to their original state. The reset button He created
by assigning "reset" to the <input> tag's type attribute In this example the
reset button returns the text input value to its initial value of an empty string:

[Link]
l
Submit Buttons

The "submit" input type creates a button that the user can push to
send the form data to the server. The forms controls names and value data
is typically submitted to a CGI script form handler as name/value pairs. An
on submit attribute can be added to the <form> tag to assign a script that
will run when the form is submitted. The script will be executed immediately
before the form is submitted so it can make any last minute checks this
example uses the on submit attribute to round down floating point values to
whole integers in the text input:

[Link]
ml

Image Submit Button

The "image" input type can create a graphical submit button This also
requires a src attribute to specify the location of the button image and an alt
attribute to specify alternative text for browsers that do not display images.
When the form is submitted the x and y coordinates where the image was
clicked are also sent to the server as seen here:
<body>
<form name="myform" method="post"
action="[Link] >
<p>
<input name="txt1"
Type="text" value="HTML is Fun">
<input type="image"
src="[Link]" alt="Submit Button">
</p>
</form>
</body>

[Link]
Buttons with Graphics
ml
The HTML 4 <button> </button> tags provide another way to feature a
push burton in a document. Content between the tags is displayed on the
button face and can include text and images. This example illustrates how
the <button> tags can be used to make attractive submit, reset and button
types:
<head><title>Buttons With Graphics</title></head>
<body>
<form name = "myform" method = "post"
action = "[Link] >
<p>
<button name = "btn1" value = "hi"
type = "button" onclick = "alert('Hi!')" >
<img src = "[Link]" alt = "Hi">Welcome</button>
</p>
<hr>
<p>
<button name = "btn2" value = "submit" type="submit" >
<img src = "[Link]" alt = "Submit">Submit</button>
 
<button name = "btn3" type = "reset" >
<img src = "[Link]" alt = "Reset">Cancel</button>
</p>
</form>
</body>

[Link]
Selection Menus
ml
The <select> and </select> tags create a selection menu from which
the user may select a listed option. The<select> tags should assign a given
name to a name attribute and should surround the list of options. Text
describing each option is contained between <option> </option> tags and
each one must have a value attribute. When the form is submitted the
<select> name and the <option> value make up the submitted name/value
pair. The select menu generally appears as a drop-down list unless a size
attribute is added to the <select> tag to set a height. The example below
illustrates a selection menu and adds the single word selected to initially
select one of the options.

<head>
<body>
<form name = "myform" method = "post"
action = "httpw://localhost/cgi-bin/[Link]" >
<p>
<select name = "myselect" >
<option value = "1st" >Watch One Piece</option>
<option value = "2nd" selected >Don't Watch One Piece</option>
<option value = "3rd" >Save It For Later</option>
</select>
<input type = "submit" value = "Submit" > </p>
</form>
</body>
</html>

[Link]
Grouping Menus
ml
Select menu options may be grouped together with the <optgroup>
and </optgroup> tags. A name for each group can be assigned to a label
attribute inside its <optgroup> tag.
<body>
<form name = "my form" method = "post"
action = "[Link] host/cgi - bin/[Link]">
<p>
<select name = "myselect" size = "6">

<optgroup label = "Group 1">

<option value = "1, 1st" >Watch One Piece</option>
<option value = "1, 2nd" >Don't Watch one Piece</option>
</optgroup>
<optgroup label = "Group 2">
<option value = "2, 1st" >Why Watch One Piece</option>
<option value = "2, 2nd" >Why Don't watch One Piece</option>
</optgroup>
</select>
<input type = "submit" value = "Submit">
</p>
</form>
</body>

[Link]
Grouping From Field
ml
Associated form input fields can be grouped into "field sets" which the
browser may display in a manner that makes their association apparent to
the user. The <fieldset> </fieldset> tags are used to contain the associated
inputs. The field set may also display a group name defined between
<legend> </legend> tags.

<body> <form name = "myform" method "post"

action = "[Link] >
<fieldset><legend>Select Crew</legend>
<input type = "radio" name = "colr" checked value = "red" > Red hair
<input type = "radio" name = "colr" value = "gm" > The Beast Pirates
<input type = "radio" name = "colr" value = "blu" > Go Solo
</fieldset>
<fieldset><legend>Select Power</legend>
<input type = "radio" name ="size" value = "s" > Swordsmanship + Haki
<input type = "radio" name = "size" value = "m" > Devil Fruit +haki
<input type = "radio" name = "size" checked value = "l" > Pure Haki
</fieldset>
<p><input type="submit" value="Submit">
</p>
</form>
</body>

Background And Border Color [Link]

To create a border around a block of content it is necessary to specify
mlwidth and style. The stylesheet
quality its border properties for color,
border-color property will specify the color of the entire content box border.
Similarly, its width can be specified with a border-width property and style
of border with a border-style property. The example that will be given,
initially sets all content box borders to black with a width of 25 pixels and
drawn in a solid style. A background-color property is assigned a
recognized color name the set a background color for the content box. Top
and bottom Senders are assigned individual colors that supersede the
general border color for just those borders.

<html>
<style type = "text/css" >
p { border-color:yellow;
border-width:25px;
border-style:solid;
background-color:white;
border-top-color;blue;
border-bottom-color:red; }
</style>

<body>
<p> Not related to One Piece, just want to respect my country </p>
</body>
</html></

[Link]
ml
Border Style
The style for all four borders around a content box may be set
collectively with the style sheet border-style property. Or individually they
can be specified with the properties border-style-top, border-style-bottom,
border-style-left and border-style-right. The illustration below shows the
available border styles and how each border style might be displayed by
the browser:
<head> <title>Border Style</title>
<style type = "text/css" >
#p1 { border-color:pink;
border-style: solid;
border-width: 10px; }
#p2 { border-color:blue;
border-style:double;
border-width: 10 px; }
#p3 { border-color:purple;
border-style:dashed; border-width: 10px; }
#p4 { border-color:blue;
border-style:dotted; border-width: 10px; }
#p5 { border-color:gold;
border-style:groove;
border-width: 10 px; }
#p6 { border-color:lavander;
border-style:ridge;
border-width: 10px; }
#p7 { border-color:grey;
border-style: inset;
border-width: 10px; }
#p8 { border-color:black;
border-style:outset;
border-width: 10px; }
</style>
</head>
<body>
<p id="p1" >Avalo Pizarro</p>
<p id="p2" >Doc Q</p>
<p id = "p3" >Jesus Burgess</p>
<p id="p4" >Catarina Devon</p>
<p id="p5" >Sanjuan Wolf</p>
<p id="p6" >Laffitte</p>
<p id="p7" >Vasco Shot</p>
<p id="p8" >BlackBeard</p>
</body>
Border Width
The width of all four borders around a content box may be set
collectively with the stylesheet border-width property. Or individually they
can be specified with the properties border-width-top, border-width- bottom,
border-width-left, and border-width-right. You sent the example in the next
page sets a uniform width for the lime border around the first paragraph
drawn in a double style. Individual border widths are specified for the
fuchsia border around the second paragraph, which is also double style.

<head><title>Border Width</title>
<style type = "text/css">
#p1 { border-color:pink;
border-style:ridge;
border-width:10px: }
#p2 { border-color:red;
border-style:ridge;
border-width:10px:
border-top-width:3px
border-bottom-width:20px }
</style>
</head>

<body>
<p id = "p1" >Bon Clay</p> <p id="p2">Monkey D. Luffy</p>
</body>

[Link]
Border Shorthand
ml
A single style sheet property called border may alternatively specify all
the required rules to set a border. This shorthand version can only be used
when all four borders in a content box are to have the same appearance.
The border property collectively specified values for a border’s width, style
and color with the following syntax
Border: border-width border-style border-color;
In the example below the border around the first content box is set with
individual properties. The second content box border appears identical to
the first one but is set using the shorthand version:
<head><title>border shorthand</title>
<style type = "text/css">
#s1 { border-width:5px;
border-style:outset;
border-color:red;
padding:5px; }
#s2 { border:5px
border-style:outset;
border-color:aqua;
padding:5px; }
</style>
</head>
<body>
<p> <span id = "s1">Shanks</span>
<span id = "s2">Buggy</span> </p>
</body>

[Link]
Add Padding
ml
The padding area can be specified with around the actual content in a
content box can a padding stylesheet property. This sets a general padding
width surrounding the contained content at top, bottom, left and right.
Individual padding widths can be set with stylesheet properties of padding-
top, padding-bottom, padding-left, and padding-right. This example applies
overall padding in the first paragraph and top padding over the content in
the second paragraph:

<head> <title>Padding</title>
<style type = "text/css" >
p { border-color:blue;
border-width:thick;
border-style:solid;
background-color:orange }
#p1 { padding:20px }
#p2 { padding-top:40px }
</style>
</head>
<body>
<p id = p1>Sabo</p> <p id ="p2" >Portgas D. Ace</p>
</body>

[Link]
Relative Padding
Padding areas in a content box canml
alternatively be specified related
aspects of the document. The may be specified as a percentage of block in
which they are contained or relative to the current size of font.

<head> <title>Relative Padding</title>

[Link]
Padding Shorthand
mlproperty called padding may alternatively specify
A single stylesheet
all the padding areas of a content box. The padding property may
collectively specify values for top, right, bottom and left padding areas If
only one value is specified it applies to all four sides. If two values are
specified the first applies to top and bottom sides and the second applies to
left and right sides. If three values are specified the first applies to the top
side, the second applies to both left and right sides and the third applies to
the bottom side If four values are specified they apply, in sequence, to the
padding areas on the top, right, bottom and left sides in this example the
border shorthand property creates borders and the padding shorthand
property adds padding:

<head>
<title>Padding Shorthand</title>
<style type="text/css">
span { border:inset black 6px; }
background-color:pink;
/* pad top, right, bottom, left */
#s1 { padding: 5px 20px 10px 100px; }
</style>
</head>

<body> <p> <span id="s1">Big Mom</span>

<span id="s2">Brook</span>
</body>

Set Margins
[Link]
Margin areas may be specifiedmlwith the margin stylesheet property that
sets all block margins to the assigned size. Individual margins can be set
using stylesheet properties of margin-top, margin-bottom, margin-left, and
margin-right. The example below sets the default body margins to zero for
a <div> element to display at the extreme top left of a page. A nested <div>
element has its top, left and right margins set to be 20 pixels from the edge
of the containing <div> element.
<head>
<title>Margins</title>
<style type="text/css">
body {margin:0px}
#7689DC; margin:0px;
#d1 {background-color: #7689DC; margin:0px;
width:200px; height:75px; }

#d2 {background-color:#B7A5E1; padding:3px;

border-width: 8px; border-style: dashed;
border-color: #6658B6; margin-top: 20px;
margin-left: 20px; margin-right: 20px;}
</style>
</head>
<body> [Link]
<div id="d1">
ml
<div id="d2"> <span>JoyBoy</span></div>
</div>
</body>

Margin Shorthand
A single stylesheet property called margin may alternatively specify all
the margin areas of a content box. The margin property may collectively
specify values for top, right, bottom and left margin areas. If only applies to
all four sides. One value is specified it if two values are specified the first
applies to top and bottom sides and the second applies to left and right
sides. If three values are specified the first applies to the top side, the
second applies to both left and right sides and the third applies to the
bottom side. If four values are specified they apply, in sequence, to the
margin areas on the top, right, bottom and left sides. In this example, the
border shorthand property creates borders; the padding shorthand property
adds padding and the margin shorthand property set margins:

<head> <title>The battle of the Void Century</title>

#s1 { padding:5px; margin:5px 70px 5px 30px }

</style>
</head>

<body> <p> <span id = "s1" >JoyBoy</span>

[Link]
Put It Together
ml
This filler example uses some of the border, margin, padding and
background color properties seen in this chapter:
<head>
<title>Putting It Together</title>
<style type="text/css" >

body { border:ridge 30px; border-color:#180085;

background-color:grey; font-family:Arial; font-weight:bold }
h3 { color:white; font-size: 200%; }
p { border:outset 5px; border-color:white; padding:10px;
color:white; background-color:#444444;
margin:20px;font-size: 150%; }
</style>
</head>
<body>
<img src="[Link]" style="width:100%" >
<h3>   The First Pirate - Joy Boy</h3>
<p>A Man who lived 800 years ago</p>
</body>

[Link]
ml

Absolute Positioning
The position of document content boxes can be controlled with a style
property called position to determine a precise location the position
property should be set as absolute The Y coordinate of the content box is
then specified by assigning a pixel value to a style property called top. This
sets the top edge of the content box at the given distance from the top of
the window, or outer containing block. Similarly, the X coordinate of the
content box is specified by assigning a pixel value to a style property called
left. This sets the left edge of the content block at the given distance from
the left of the window, or outer containing block.

<head> <title>Biggest Creatures In One Piece</title>

</style>
</head>
<body>
<div id="d1"> The Sea Behemoths </div>
<div id="d2"> <p>The Florian Triangle</p> </div>
<div id="d3"> <p>Zunesha</p>
</div>
</body>

[Link]
Z-Order
ml
Absolute positioning is used to specify the Z-axis stacking order of
layers, in addition of setting X and Y coordinates The Z-index value is
assigned to a style property that is called z-index in order to set the layers
stacking position. Layers are positioned in ascending order according to
their z-index value so that higher layers can overlap those below. This
example sets some general style for the <div> content blocks then
positions them absolutely and stacked:

<head> <title> Z-order positioning </title>

div { border:solid 3px black; width:100px; height:50;

background-color:red; padding:3px}
#d1 {position:absolute; top:10px; left:40px;
z- index:10px}
#d2 {position:absolute; top:50px; left:120px;
z-index:20px}
</style>
</head> [Link]
<div id = "d1" > <p>ml
<body>
<Layer 1> <br> Imu-sama </p> </div>
<div id = "d2" > <p> <Layer2> <br> The Five Elders </p> </div>
</body>

Relative Positioning
The style position property can be set to relative to adjust the position
of content boxes relative to the normal flow of other content. Regular
content flow initially lays out the content box position then this can be
adjusted by a style position rule. In the example below all content boxes are
initially laid out in the regular flow that is indicated by a dotted line. Style
rules then adjust the position of two of the content boxes relative to their
regular flow position.
<head> <title>Cross Guild</title>
<style type = "text/css" >
div { width 100% }
p { border-color:black;
border-width:thin;
border-style:solid;
padding-left:2em; }

#p1 { font-size:8pt; background-color:blue }

#p2 { font-size:14pt; background-color:green }
#p3 { padding-left:60%; background-color:gold }
</style>
</head>

<body>
<div>
<p id = "p1" >Buggy</p>
<p id = "p2" >Crocodile</p>
<p id = "p3" >Mihawk</p>
</div>
[Link]
</body>
ml

Floating Boxes

A content box can be made to the extreme left or right of the current
line with the style float property. This property can be set to left or right to
move the position of the content box. Most importantly this allows other
content to then flow around that content box. The example below has a
paragraph containing two sentences plus an image content box that is
floated to the left of the current line
<head> <title>Floating Boxes</title>
<style type = "text/css" >
#i1 { float:left }
</style>
</head>
<body>
<p>
The <img id = "i1" src = "[Link]" width = "158"
height = "88" alt = "Luffy" >man you see here in this gif
<br>is the future king of the pirates Monkey [Link], he is also a </br>
Emperor of the seas and a God, but not just a God he is the
<br>Sun God Nika the man who will bring freedom to the world of One
Piece.</br>
</p>
</body>

[Link]
l
Font Families

The style font-family property allows the html document to suggest a

generic font to the browser. This overcomes the problem that not all system
can have all fonts and so the generic family will select the most appropriate
font available on the system. Valid generic family names are serif, sans-
serif, cursive, fantasy, and monospace. The font-family property can also
suggest a list of fonts by name in a comma-delimited list. Browsers will
search for each font in turn. A generic family name should always be
suggested as the last alternative in case none of the name fonts is found.
Both cursive and fantasy font families are decorative while the others are
plainer, as seen in the example:
<html>
<head> <title>Two Great Titles in One Piece</title> </head>
<body> <p>
<span style = "font-family:serif" >The - </span>
<span style = "font-family:sans-serif" >
Pirate -</span>
<span style="font-family:monospace" >
King</span> <br>
<span style="font-family:cursive" >The -</span>
<span style="font-family:fantasy" >
Strongest </span> <br>

<span style = "font-family: impact, modern, cursive" >

Creature</span>
</p>
</body>
</html>

Font Size
[Link]
mlbe either an exact point size or a
The size of don't to be used by the browser can be specified with the
font size style property. Valid values may
size relative to the surrounding font size currently in use. Exact size is set
with the suffix "pt", so 12 point is "12pt". Relative font-size can be specified
as larger or smaller. Alternatively, this may be a percentage relative to the
surrounding font size. For instance font-size: 200 should set the font size at
double that of the surrounding font.
<head> <title>Font Size</title>
<style type = "text/css">
P {font-size:12pt }
#s1 { font-size: 20pt; color:red }
#s2 { font-size:70%; color:green }
#s3 { font-size: larger; color:yellow }
</style>
</head>

<body>
<p>These three are the Monster Trio <br>
<span id = "s1" >Monkey D. Luffy,</span>
<span id = "s2" >Roronoa Zoro,</span> and
<span id = "s3" >Vinsmoke Sanji</span> </p>
<span id </body>

[Link]
ml
Font Style

The appearance of a font can be specified with the property named

font-style to select upright or slanting characters. If unspecified the default
font style is to upright characters. Setting the font-style property to italic will
display the text in an italicized font with slanting characters. A font style of
oblique will also generally display as italics. If the general font style in use is
italicized, the font-style property can specify normal to display upright text.
This example illustrates both normal and italic font styles:
<head> <title>Sanji's Dream</title>
<style type = "text/css" >
#s1 { font-style:italic; color:Aqua }
#s2 { font-style:normal }
#p2 { font-style:italic; color:blue }
</style>
</head>

<p id ="p2" >all

<span id ="s2"> Blue.</span>
</p>
</body>
[Link]
ml

Font Weight

The preferred boldness of text can be set with the style font-weight
property. Simply assigning a value of bold will display the text in a bold font.
Alternatively, the specifications allow for the weight to be specified
numerically. This numeric range starts at 100 for lightest and goes up to the
boldest at 900, by steps of 100. Normally weighted text is around 500 in the
ranged. The example below sets a piece of bold text then illustrates the
effect of adding font weight from normal to boldest:
<html>
<head> <title>Font Weight</title>
<style type = "text/css">
.heavy { font-weight:bold }
#s5 { font-weight:500; color:red }
#s6 { font-weight:600; color:green }
#s7 { font-weight:700; color:blue }
#s8 { font-weight:800; color:purple }
#s8 { font-weight:800; color:purple }
#s9 { font-weight:900; color:orange }
p { font-size:20pt }
</style>
</head>

[Link]
Font Variant

ml The style font-variant property may be used to display text content in

small capitals. When assigned a value of small-caps the property suggests
that the browser should attempt to capitalize the text in a smaller font than
the one in the current use.
<head>
<title>Sanji</title>
<style type = "text/css" >
p { font-size:16pt }
span { font-variant:small-caps; color:orange }
</style>
</head>

<body>
<p>I <span>don't like</span> being a 4th placer.</p>
</body

[Link]
ml

Text And Content Alignment

The style text-align properly is used to align text in a content box as
either left, right or center. It usefully also aligns any other content such as
images. The example below aligns text in three <div> content boxes
together and illustrates a centered image:
<head> <title>Aces Death</title>
<style type="text/css">
div { border:1px solid silver;
padding:5px; margin:5px }

#d1 { text-align:left }
#d2 { text-align:right }
#d3 { text-align:center }
</style>
</head>
<body>
<div id="d1" >Luffy in shock</div>
<div id="d2" >Akainu punches Ace in the chest</div>
<div id="d3" >Ace saving Luffy from dying</div>
<img src="ace [Link]" width="29"
height="24" alt="ace death" >
</div>
</body>

[Link]
Font Shorthand

l
Specific fonts must still be set with the font-family property Specific
fonts must still be set with the font-family property font: style variant weight
size family; some browsers may not support font shorthand - it is safer to
set individual font properties Any of the properties above may be omitted
from the list, but any included should appear in the given sequential order.
The example on the next slide uses the font shorthand property; to apply
font style rules to a tag, an id and a class:
<head> <title>Font Shorthand</title>
<style type="text/css">
р { font:12pt serif }
#sl { font:bold 28pt; color:red }
[Link] { font:italic bold 16pt }
</style>
</head>

<body>
<p>The main lesson that is taugh in
<span id = "sl">One Piece</span>
is that
<span class = "doric">it doesn't matter where someone's square one
is</span>.
Whether they start with nothing or declare their goal under unexpected
circumstances,
taking the first step is the most important part.</p>
</body>

[Link]
Line Height
ml
The style line-height property can specify line spacing. The height can
be specified as a font point size or as a percentage of the font size in
general use by the text. For instance, with a font-size of 12pt setting the line
height at 300% would create a line spacing of 36pt. In the example below
the general font size is 12pt and the line-height is set at 36pt.
Consequently, the browser will add extra space over each line of general
text. When the larger 36pt text is encountered an equivalent amount of
extra space is added over it and the entire line:
<head> <title>Line Height</title>
<style type "text/css" >
p span { font-size:12pt; line-height: 300% } { font-size:36pt; color:red }
</style>

</head>
<body>
<p>There will no be One piece anime. <br>
if the<span> Guy</span> text.<br>
that started the story didn't ask Roger where
the One Piece is.</p>
</body>

[Link]
ml
Text Decoration
The style text-decoration property may add features to text with
underline, over line and line-through values. It may also specify blink to
flash text but this may not be supported in all browsers. Blinking text can be
extremely annoying and is best avoided.
In this example, the text-decoration properties create text with underline,
over line and line-through:
<head> <title>Text Decoration</title>
<style type = "text/css">
div { border:1px solid silver;
padding:5px; margin:5px }
#d1 { text-decoration:underline }
#d2 { text-decoration:line-through }
#d3 { text-decoration:overline }
</style>
</head>
<body>
<div id = "d1" >Luffy: Never Give Up.</div>
<div id = "d2" >Robin: Learn from the past.</div>
<div id = "d3" >Chopper: Everybody deserves to live</div> </body>

[Link]
ml Text
Indenting
Traditionally paragraphs have their first line of text indented in order to
make the overall flow of text more acceptable. In HTML the style-text indent
property can specify the amount to indent the first line of text in a content
block. The value may be either a fixed amount, like 10 pixels, or a
percentage of the width of the containing box. The value may be either a
fixed amount, like 10 pixels, or a percentage of the width of the containing
box.

<head><title>Text Indent</title>
<style type = "text/css">
p { text-indent: 2em }
</style></head>
<body>
<p>ONE PIECE is a legendary high-seas quest unlike any other.</p>
<p>Luffy is a young adventurer who has longed for a life of freedom ever
since he can remember.
</p> </body>

[Link]
ml

Text Spacing
Extra space can be added between each character with the style letter
spacing property. This property can specify a length that is to be added to
the normal text spacing between characters. This may be fixed distance
expressed as pixels like "10px". Alternatively, the extra space can be
expressed as a distance relative to the font size by using an em unit like
"1em". In the example, the first <span> adds extra spacing of "1em" and
the second <span> adds extra spacing of "10px":

<head> <title> Letter Spacing</title>

<body>
<p>he sets
<span id = "s1" >SAIL</span><br> and to find the legendary fabled
treasure,
<span id = "s2" >ONE PIECE </span>to become King of the Pirates!
</p>

[Link]
ml
Text Direction
The direction of text flow can be controlled with the HTML 4 <bdo>
</bdo> tags. Its dir attribute can be specify “rtl” right-to-left text direction.
This is useful with languages that run right-to-left where it is advisable for
the whole text block to be contained in <pre> </pre> tags to conserve
spacing and line breaks. Languages are specified with the lang attributre
which recognizes special two letter codes for each language. Two-letter
codes include “en” (English), “fr” (French), “de” (German), “it” (Italian), “nl”
(Dutch), “es” (Spanish), “el” (Greek), “pt”(Portugese), “ar” (Arabic), “he”
Hebrew, “ru” Russian, “zh” (Chinese), “ja” (Japanese) and “hi” (Hindi).

<html>
<head>
<meta http-equiv = "Content-Langauge" content="en" >
<meta http-equiv = "Content-Type"
content = "text/html; charset = utf-8" >
<title>BiDirectional Order</title>
<style type="text/css">
bdo { font-family: Hebrew Universal; font-size:28pt }
</style>
</head>

<body>
<pre>Hello and
<bdo dir = "rtl" lang = "he" id="bdo2"> ‫זה וגה פאנק שמדבר לך שהעולם‬
‫<בסכנה‬/bdo>
from Punk Records.</pre>
</body> </html>
[Link]
l
Text Capitalization
The style text-transform property can be used to convert the
capitalization of text content. It may be used to transform text into
uppercase or lowercase or it may make the first letter of each word into a
capital letter when set as capitalize. This example illustrates each type of
transformation:

</head>
<head><title>Text Transform</title>
<style type="text/css">
div {border:1px solid silver:
padding:5px: margin:5px}
#d1 {text-transform: uppercase; color: red}
#d2 {text-transform: lowercase; color:green}
#d3 {text-transform: capitalize; color: blue}
</style>
</head>
<body>
<div id = "d1">
Binkusu no sake wo todoke ni yuku yo Umikaze, kimakase nami
makase</div>
<div id="d2">
Shio no mukou de yuuhi mo sawagu Sora nya, wa wo kaku tori no
uta</div>
<div id="d3">
Sayonara minato tsumugi no sato yo "Don" to icchou utao funade no
uta</div>
</body>
[Link]
ml
Background Color
The background color of HTML elements can be specified with the
style background-color property. Foreground color is black by default but
can be changed for each element with the style color property. This
example illustrates how background and foreground colors may be
specified for different elements:

<head>
<title>Background & Foreground Color</title>
<style type = "text/css">
body { background-color:white }
h3 { background-color: purple; color:yellow }
p { background-color: blue }
</style>
</head>

<body>
<h3>Kaido</h3>
<p>Wants to be beaten by someone stronger than him.</p>
<h3>Big Mom</h3>
<p>Wants to eat a delicious cake</p>
</body>

[Link]
Background Image
The background of HTML element can feature an image using the
style background image property. This states the location of an image as
an absolute or relative address between brackets and proceed by the term
url. A background color should also be specified that will display beneath
the image. The specified background color will be displayed even when the
image is not available and the color will show through any transparent
areas of the background image. Browsers will normally "tile" the image by
repeating it both horizontally and vertically across the element background.
This example tiles an image over the document body background and on to
of a white background color.

<head> <title>Background Image</title>

<head>
<title>Background Position</title>
<style type="text/css">
[Link]
ml
div { position:absolute; top:5px; width:100px;
height:60px; background-image:url("[Link]");
background-color: yellow; color:purple; }
#d1 { background-position: center;
background-repeat:no-repeat; left:20px }
#d2 { background-position: 50% 100%;
background-repeat:no-repeat; left:140px }
</style>
</head>

<body>
<div id="d1" >center</div>
<div id="d2" >50% 100% </div>
</body>
Background Attachment
Typically, background images will scroll along with the document but
they can be fixed using the style property called background-attachment.
Setting this property to fixed keeps the background-image position constant
when the rest of the document scrolls. This example fixes a horizontally
repeated image at a specified distance from the top of the window:

<head>
<title>Background Attachment</title>
<style type = "text/css" >
body { background-attachment:fixed;
text-align:center; background-position:0% 10%;
background-repeat:repeat-x;
background-Image:url("[Link]") } </style>
</head>
<body>
<h1>Heading</h1>
</body>

[Link]
ml
Shorthand
All the background properties can be set together using the style
background Property with this syntax: Background: color image repeat
position attachment; some or all of the above may be specified, and in any
order. The valid values are those started on the previous pages in this
chapter for background-color, background-image, background-Repeat,
background-position and background-attachment. In the example below the
<div> element background repeats a fixed images across the bottom of its
content box:
<html>
<head>
<title>Background Shorthand</title>
[Link]
<style type="text/css">
ml
body { text-align: center; font: 14pt cursive black }
div { width: 100%; height:350px;
border: 3px double black }

#d1
{ background: white url
background-color: #ffffff;
background-image: url("[Link]");
background-repeat: repeat-x;
backgound-position: right top; }
</style>
</head>

<body>
<div id = "d1" >Boogee Time ! </div>
</body>
</html>
Cursor

Common valid pointer values include default, crosshair, move, text,

wait, and help as seen in table below:
Name Cursor Pointer Type
Default Browser's default cursor
Pointer Hand pointer indicating a link
Crosshair Pinpoint selector
Move Selection Relocator
Text Text Highlighter
Wait Program busy indicator
Help Help available indicator
Resize Edge indicator
URL Specify remote cursor address

The resize cursor is a pointer that indicates a direction and can be set as n-
resize, s-resize, w-resize, e-resize, ne-resize, nw-resize, se-resize, or sw-
resize - the table shows the e-resize cursor. A custom cursor can be used
by specifying the location of a cursor image with the term url: For instance:
cursor: url("[Link]
The location is stated as either a relative or an absolute address between
quotes and inside brackets after the url: term.
Hyperlink Colors

Anchor <a> tags have the "pseudo-classes" listed in the table below,
which are useful to influence the appearance of their content. A stylesheet
may set different property values for each pseudo-class to indicate the
hyperlink's state to the user. The ensuing example sets color and font
properties for each state.
<head> <title>Link Colors</title>
<style type="text/css">
a {font-size: 18pt;}
a:link { color:red; font-style:normal }
a:hover { color: fuchsia; font-weight:bold }
a:active { color:green: font-weight:bold }
a:visited { color:blue; font-style:italic }
</style>
</head>

<body>
<p> <a href="[Link]" >Link 1</a>
<a href="[Link]" >Link 2</a>
<a href="[Link]" >Link 3</a> </p>
</body>
[Link]
l
Additional Content
Style sheets may automatically insert content into HTML elements with
the "pseudo-elements" listed in the table below. The example uses pseudo-
elements to add three dots after every <h3> heading emphasize the first
letter of each paragraph and end each paragraph with an exclamation
mark.

Name Description
:before The space immediately before element content
:after The space immediately after element content
:first-letter The first letter of a <p> element
:first-line The first line of a <p> element

<html>
<style type = "text/css" >
[Link]
p { font-family:cursive }
h3:after { content:"..."; color:blue }
p:first-letter { font-size:larger; color:red }
p:after { content:" !"; color:green }
</style>
<body>
<h3>And Finally</h3>
<p>HTML 4 is Fantastic Fun in easy steps</p>
</body>
Dedication:
“About the html designers”

JHONFERDY P.
MASAJO

“Mahilig mag kanta kahit nasa public at tingnan mo ang aking hina
hawak.”

JOHN MICHAEL S.
GUTIERREZ

“I'm 16 yrs. old I live in Brgy. Li-o. I like watching anime and playing
online games.”

HTML 2
No ratings yet
HTML 2
2 pages
HTML and XHTML Basics Explained
No ratings yet
HTML and XHTML Basics Explained
29 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
8 pages
HTML Unit1 Part2
No ratings yet
HTML Unit1 Part2
23 pages
XHTML Document Structure and Tags
No ratings yet
XHTML Document Structure and Tags
14 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
7 pages
HTML Text, Lists, Tables, and Frames
No ratings yet
HTML Text, Lists, Tables, and Frames
3 pages
HTML Frames and Meta Tags Explained
No ratings yet
HTML Frames and Meta Tags Explained
14 pages
HTML Basics and Web Technologies Guide
No ratings yet
HTML Basics and Web Technologies Guide
20 pages
HTML Basics: Tags, Lists, and Images
No ratings yet
HTML Basics: Tags, Lists, and Images
9 pages
Unit 4 HTML
No ratings yet
Unit 4 HTML
6 pages
HTML Basics: Structure & Formatting Guide
No ratings yet
HTML Basics: Structure & Formatting Guide
27 pages
Assignment 2 Client Side Technology
100% (1)
Assignment 2 Client Side Technology
14 pages
Understanding HTML Headings and Tags
No ratings yet
Understanding HTML Headings and Tags
9 pages
HTML5 Web Page Design Basics
No ratings yet
HTML5 Web Page Design Basics
27 pages
2425S IBT Slide 03
No ratings yet
2425S IBT Slide 03
85 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
46 pages
WP Elective Notes
No ratings yet
WP Elective Notes
88 pages
Essential HTML Tags Explained
No ratings yet
Essential HTML Tags Explained
2 pages
HTML Webpage Design Lab Guide
No ratings yet
HTML Webpage Design Lab Guide
7 pages
HTML and JavaScript Fundamentals Guide
No ratings yet
HTML and JavaScript Fundamentals Guide
60 pages
Introduction to HTML Frames and Iframes
No ratings yet
Introduction to HTML Frames and Iframes
5 pages
HTML Lists and Image Insertion Guide
No ratings yet
HTML Lists and Image Insertion Guide
16 pages
Chapter 8: Client Side Technologies: What Is HTML?
No ratings yet
Chapter 8: Client Side Technologies: What Is HTML?
18 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
4 pages
Html5 Notes
No ratings yet
Html5 Notes
25 pages
Web 01
No ratings yet
Web 01
71 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
18 pages
HTML Linking, Meta Tags, and Frames
No ratings yet
HTML Linking, Meta Tags, and Frames
53 pages
HTML Basics: Web Page Creation Guide
No ratings yet
HTML Basics: Web Page Creation Guide
24 pages
Web Techologie
No ratings yet
Web Techologie
18 pages
Understanding Lorem Ipsum Usage
No ratings yet
Understanding Lorem Ipsum Usage
1 page
Nivash Exp 3 - 260221 - 105203
No ratings yet
Nivash Exp 3 - 260221 - 105203
16 pages
Building & Managing Web Sites: HTML Review
No ratings yet
Building & Managing Web Sites: HTML Review
15 pages
Unit-I WEB Design: Origins and Evolution of HTML
No ratings yet
Unit-I WEB Design: Origins and Evolution of HTML
49 pages
HTML Tables, Links, and Forms Guide
No ratings yet
HTML Tables, Links, and Forms Guide
10 pages
My Resume (Juin Piyada)
No ratings yet
My Resume (Juin Piyada)
1 page
HTML Basics for Web Design Students
No ratings yet
HTML Basics for Web Design Students
62 pages
Essential HTML Tags Guide
No ratings yet
Essential HTML Tags Guide
7 pages
HTML Basics: Headings, Lists, Buttons
No ratings yet
HTML Basics: Headings, Lists, Buttons
4 pages
HTML Study Guide
No ratings yet
HTML Study Guide
4 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
28 pages
HTML Basics for Web Prototypes
No ratings yet
HTML Basics for Web Prototypes
4 pages
Essential HTML Tags Explained
No ratings yet
Essential HTML Tags Explained
4 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
21 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
7 pages
HTML Tags and Their Functions Explained
No ratings yet
HTML Tags and Their Functions Explained
3 pages
Understanding HTML Structure and Tags
No ratings yet
Understanding HTML Structure and Tags
103 pages
HTML Tags List
No ratings yet
HTML Tags List
13 pages
HTML Basic Tags Overview and Usage
No ratings yet
HTML Basic Tags Overview and Usage
27 pages
Do It Yourself. Websites
No ratings yet
Do It Yourself. Websites
32 pages
HTML Tags Guide
No ratings yet
HTML Tags Guide
3 pages
Essential HTML Tags Explained
No ratings yet
Essential HTML Tags Explained
3 pages
HTML Tags For Class Work
No ratings yet
HTML Tags For Class Work
4 pages
HTML Text Tags
No ratings yet
HTML Text Tags
7 pages
HTML5 Document Structure and Elements
No ratings yet
HTML5 Document Structure and Elements
5 pages
BCA, 2nd Semester, Web Technology, Unit 1
No ratings yet
BCA, 2nd Semester, Web Technology, Unit 1
17 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
24 pages
HTML Notes - Part I
No ratings yet
HTML Notes - Part I
23 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
55 pages
TIA Package Manager User Manual V1.3.10
No ratings yet
TIA Package Manager User Manual V1.3.10
26 pages
AAU Computer Science Exit Exam Model
88% (8)
AAU Computer Science Exit Exam Model
17 pages
APPSC Group 2 Computer Proficiency Test Syllabus
No ratings yet
APPSC Group 2 Computer Proficiency Test Syllabus
7 pages
Online Flight Ticket Booking Overview
No ratings yet
Online Flight Ticket Booking Overview
107 pages
Wildlife Web Archiving: Lion Case Study
No ratings yet
Wildlife Web Archiving: Lion Case Study
27 pages
Understanding AutofillGroup in Flutter
No ratings yet
Understanding AutofillGroup in Flutter
1 page
Contrastive Conjunctions in Discussion Texts
No ratings yet
Contrastive Conjunctions in Discussion Texts
7 pages
Comprehensive SEO Training Curriculum
No ratings yet
Comprehensive SEO Training Curriculum
3 pages
Celebration Event Planner Project Report
No ratings yet
Celebration Event Planner Project Report
30 pages
U.motion Builder Login Instructions
No ratings yet
U.motion Builder Login Instructions
10 pages
Importing Points in Locus Map Classic
No ratings yet
Importing Points in Locus Map Classic
7 pages
Mid Semester Report: Online Education Project
No ratings yet
Mid Semester Report: Online Education Project
69 pages
JavaScript Masterclass Overview
No ratings yet
JavaScript Masterclass Overview
33 pages
Digital Lit l5 and l6 Full Notes
No ratings yet
Digital Lit l5 and l6 Full Notes
50 pages
Minecraft Forge 1.21.1 Changelog
No ratings yet
Minecraft Forge 1.21.1 Changelog
9 pages
Simplifying JATS XML Creation
No ratings yet
Simplifying JATS XML Creation
8 pages
JavaScript Basics and Examples
No ratings yet
JavaScript Basics and Examples
93 pages
Amazon Interview Questions Overview
No ratings yet
Amazon Interview Questions Overview
1 page
Sports Management System Overview
No ratings yet
Sports Management System Overview
38 pages
Mastering Adobe Commerce Frontend
No ratings yet
Mastering Adobe Commerce Frontend
2 pages
Fortimanager v7.2.10 Upgrade Guide
No ratings yet
Fortimanager v7.2.10 Upgrade Guide
33 pages
ICT Advanced Level Exam 2023-2024
No ratings yet
ICT Advanced Level Exam 2023-2024
23 pages
Jobs256' Mobile App Linking Job Seekers To Job Opportunities
No ratings yet
Jobs256' Mobile App Linking Job Seekers To Job Opportunities
7 pages
18CSMP68 - Mobile Application Development
No ratings yet
18CSMP68 - Mobile Application Development
68 pages
R Markdown: A Comprehensive Guide
No ratings yet
R Markdown: A Comprehensive Guide
56 pages
AMXX Plugin Errors and SQL Issues
No ratings yet
AMXX Plugin Errors and SQL Issues
2 pages
B.Sc. Software Syllabus Overview
No ratings yet
B.Sc. Software Syllabus Overview
66 pages
Synergy 3 VaoR API Integration Guide
No ratings yet
Synergy 3 VaoR API Integration Guide
10 pages
FortiAnalyzer Student Guide Online
No ratings yet
FortiAnalyzer Student Guide Online
348 pages
Akismet Anti-Spam Changelog Archive
No ratings yet
Akismet Anti-Spam Changelog Archive
10 pages