Assalamualaikum..
Hi, everyone..
It's quite some time that I havent't added any new post.. Sorry for it..
As apology and redeemed it, I will post 2 things for this time..
Last Wednesday, I've learned about HTML and XML in our computer and science class at orchid lab..
So, I will share the knowledge that I got from my class..
Are you ready..!!!
1...2...3...GO..!!
HYPERTEXT MARKUP LANGUAGE
(HTML)
http://www.enolsoft.com/blog/wp-content/uploads/2012/06/html.jpg
(P/S) : YOU MAY TRY THE EXAMPLE GIVEN HERE BY PASTE IT ONTO NOTEPAD WHITHIN ACCESSORIES IN YOUR COMPUTER AND SAVE IT AS filaname.html (don't forget to put .html otherwise it get wrong and you didn't get as you what you wish) TO MAKE YOUR UNDERSTAND BETTER AND MORE COMPETENCE. KEEP ON TRYING..^.^
what is HTML actually look like??
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
this is what we called HTML..
DESIGNING DOCUMENTS FOR THE WORLD WIDE WEB
when we said about the world wide web (WWW), it is actually consist of :-
|
The set of computers on the internet
that support HTTPand not a separate network
|
- HTTP (The HyperText Transfer Protocol)
|
The language used by a WWW Client to
request documents from a WWW server
|
- HTML (The HyperText MarkUp Language)
|
The language used to design web pages
|
HTML is a text mixed with markup tags which is tags enclosed in angle brackets
e.g : <H1>Introduction</H1>
HTML Markup Describe about :-
–
Appearance
–
Layout
–
Content
There are a few elements in HTML:-
•Validating a document
•Main HTML elements
•Block-level HTML elements
•Text-level HTML element
•Creating hypertext links
•Adding images to documents
•Building tables
How To Create and Publish a Web Page??
these are the steps to do it..
1. Create an HTML document
2. Place the document in
world-accessible directory on a system running an HTTP server
3.
Access the web page through http://hostname/~username/filename4.
Validate the document by Check the syntax a formal HTML validator
HOW DOES THE HTML DOCUMENT TEMPLATES LOOK LIKE??
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD> (Goes on browser’s title bar may not
appear in printouts)
<TITLE>Benefits of Exercise
</TITLE>
</HEAD> (Main heading.Often used as title. Appears in
printout)
<BODY>
<H1>Health Benefits of
Exercise</H1>
<P>
Exercise is an excellent way of
improving your health. Medical studies demonstrate that exercise can strengthen
your heart and lungs, lower your blood pressure, and help you maintain a
healthy weight.
</P>
<P>
Exercise can also assist with
improving your mood. In fact, people who exercise have demonstrated better
self-esteem, stronger decision making, and a generally more positive outlook on
life
</P>
</BODY>
</HTML>
Main HTML Elements
1. DOCTYPE
–Refers to the rules for the
markup language
–Browsers render the content
correctly
2. HTML
–Defines the whole HTML documents
3. HEAD
lTITLE element required
~ Title in the browser toolbar, title for
the page when its added to favorites and search-engine pages
lOptional elements:
•BASE – default address/target for
all links on a page
•META – defines metadata about an
HTML document
•SCRIPT,NOSCRIPT – define a
client-side script (JavaScript)
•STYLE – to define style
information for an HTML documents
•LINK – defines the relationship
between a document and an external resources
4. BODY Element
l<BODY BGCOLOR=“YELLOW”>
lHTML Attributes and Attribute Values
•BACKGROUND
•BGCOLOR
•TEXT
•LINK,VLINK,ALINK
•OnLoad, OnUnload, OnFocus, OnBlur
5. Elements inside BODY element
l<BODY>
Remaining HTML elements
</BODY>
META Elements
•Metadata is the information about the
data
•<meta> tag provides metadata about
the HTML document
•Metadata will not be displayed on the
page
•Metadata can be used by browsers to
records document information, forwards and refreshes pages
–NAME=“author”
–NAME=“keyword”
–NAME=“description”
–HTTP-EQUIV=“refresh”
•The following meta element defines a
description of a page:
<meta name="description"
content="Free Web tutorials on HTML, CSS, XML" />
•The following meta element defines
keywords for a page:
<meta name="keywords"
content="HTML, CSS, XML" />
P- The Basic Paragraph
•Attributes:
ALIGN
–LEFT
(default), RIGHT, CENTER
–Whitespace
ignored (use <BR> for line break)
•Consecuitve <P>’s do not yield multiple
blank lines
–End
Tag is Optional
Preformatted Paragraphs
•The
PRE Element
–<PRE>….</PRE>
•Attributes:
WIDTH
–Expected
width in characters. Not widely supported.
•Problem:
Special Characters
<PRE>
if
(a<b>{
doThis();
}
else {
doThat();
}
(INNNNI)
| Desired Character |
HTML Required |
<
|
<
|
>
|
>
|
&
|
&
|
"
|
"
|
Non-breaking space
|
|
(INNNI)
OL: Ordered (Numbered) Lists
•OL
Element
–<OL>
<LI>….
<LI>…
……
</OL>
–Attributes:
TYPE, START, COMPACT
•List
entries: LI
–<LI..>
….</LI> (End Tag Optional)
–Attributes:
(When inside OL) VALUE, TYPE
A sample list:
<OL>
<LI>List
Item One
<LI>List
Item Two
<LI>List
Item Three
</OL>
UL: Unordered (Bulleted) Lists
•UL
Element
–<UL>
<LI>….
<LI>…
……
</UL>
–Attributes:
TYPE, COMPACT
•TYPE
is DISC, CIRCLE or SQUARE
•List
entries: LI (TYPE)
–TYPE
is DISC, CIRCLE or SQUARE
A sample list:
<UL>
<LI>List
Item One
<LI>List
Item Two
<LI>List
Item Three
</UL>
Have a try this to get better understand..
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Block-Level Elements
1. Headings
–H1…H6
–ALIGN
2. Basic Text Sections
–<p> - defines paragraph
–<align> - defines alignment
–<abbr> - defines abbreviation
–<dfn> - defines definition
–<address> - defines contact
information for the author/owner of a
document
–<blockquote> - defines long quotation
3. Lists
–<ol> - defines ordered list
–<ul> - defines unordered list
–<li> - defines list item
–<dl> - defines a definition
list
–<dt> - defines an item in a
definition list
–<dd> - defines a description of
an item in a definition list
4. Tables and Forms
Text-Level Elements
1. Physical Character Styles
–<b>, <i>, <tt>, <u>, <sub>,
<sup>, <small>, <strike>, <s>, <blink>
–FONT
•<size>
•<color>
•<face>
–BASEFONT
–SIZE
2. Logical Character Styles
–<em>, <strong>,
<code>, <samp>, <kbd>, <dfn>, <var>, <cite>
3. Hypertext Links
–A
•<href>, <name>, <target>
–IMG
•<src>(required), <alt>,
<align>, <width>, <height>, <hspace>,
<vspace>,
<border>, <usemap>, <ismap>
–Misc. Text-Level Elements
•BR (Explicit line break)
•AREA (Client-side image maps)
•APPLET (Java)
for example:-
<html>
<body>
<p>My favorite color is
<del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will
strikethrough deleted text and underline inserted text.</p>
<p>The <abbr
title="World Health Organization">WHO</abbr>
was founded in 1948.</p>
<p>Can I get this <acronym
title="as soon as possible">ASAP</acronym>?</p>
<p>The title attribute is used to
show the spelled-out version when holding the mouse pointer over the acronym or
abbreviation.</p>
</body>
</html>
Creating Hypertext Links
In creating Hypertext Links, we may include images and other text-level elements.
there is a few things related to link:-
•Link to Absolute URL
–Use a complete URL beginning with
http://
•Link to Relative URL
–Use a filename or relative path to
filename
•Links to Section
–Use a section name preceded by #
•Link to Section in URL
–Use absolute or relative URL, then
#, then section name
•Naming a Section
–Use <A NAME=“….” and do not
include the pound sign
for example:-
<html>
<body>
<p>
<a href="#C4">See also
Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains
.......</p>
<h2>Chapter 2</h2>
<p>This chapter explains
..........</p>
<h2>Chapter 3</h2>
<p>This chapter explains
............</p>
<h2><a
name="C4">Chapter 4</a></h2>
<p>This chapter explains
..........</p>
<h2>Chapter 5</h2>
<p>This chapter explains
..................</p>
</body>
</html>
ADDING IMAGES TO DOCUMENT
We can add images to the document that we have made by using IMG-Embedding Images.
This thing has the following attributes:-
–src (required)
–alt (technically required)
–align (see <BR CLEAR=“ALL”>)
–width, height
–hspace, vspace
–border
–usemap, ismap
•Example
<img src=“SomeFile.gif”
alt=“My Cat” width=“400” height=“300”>
using this HTML, you can insert images to the document. Lets try it..
<html>
<body>
<p>
An image:
<img src="smiley.gif"
alt="Smiley face" width="32" height="32" />
</p>
<p>
A moving image:
<img src="hackanm.gif"
alt="Computer man" width="48" height="48" />
</p>
<p>
Note that the syntax of inserting a
moving image is no different from a non-moving image.
</p>
</body>
</html>
BUILDING TABLES (TABLE ELEMENTS ATTRIBUTES)
To construct a table, we have to take a few things related to it into account such as:-
•ALIGN
–The ALIGN attribute gives the
horizontal alignment of the table as a whole
–Legal values are LEFT, RIGHT and
CENTER with LEFT being the default
•BORDER
–This specifies the width in pixels of the border
around the table
–This is in addition to the border
around each cell (the CELLSPACING)
•CELLSPACING
–This gives the space in pixels
between adjacent cells. Drawn as a 3D line if BORDER is nonzero, otherwise
empty space in the background color is used
- The
default is usually about 3
•CELLPADDING
–CELLPADDING determines the empty
space, in pixels, between the cell’s border and the table element
–The default is usually about 1
•WIDTH
–This specifies the width of the
table, either in pixels (<TABLE WIDTH=250>) or as a percentage of the
current browser window width (<TABLE WIDTH=“75%”>)
•BGCOLOR
–Specify the background color of
the TABLE
•BORDERCOLOR, BORDERCOLORDARK, BORDERCOLARLIGHT
–Non standard attributes supported
by IE to specify the colors to user for the borders
•BACKGROUND
–This
nonstandard attribute supported by IE gives an image file that will be tiled as
the background of the table
•RULES
–HTML
4.0 attribute that specifies which inner dividing lines are drawn
–All
are drawn if this attribute is omitted
–Legal
values are NONE, ROWS, COLS and ALL
•FRAME
–Specifies
which outer borders are drawn
–All
four are drawn if this attribute is omitted
–Legal
values are BORDER or BOX (all), VOID (none), ABOVE (top), BELOW (bottom),
HSIDES (top and bottom, despite the somewhat confusing name), VSIDES (left and
right), LHS (left), and RHS (right)
Table
CAPTION
•Attribute
–ALIGN (Values: TOP, BOTTOM)
•Usage
An
enclosing borderless table may give more flexibility than the built-in CAPTION
Heading 1
|
Heading 2
|
Row1 Col1 Data
|
Row1 Col2 Data
|
Row2 Col1 Data
|
Row2 Col2 Data
|
Row3 Col1 Data
|
Row3 Col2 Data
|
TR: TABLE Row
TR
is used to define each row in the table
Each
row will then contain TH and/or TD entries
•ALIGN
–ALIGN
(legal values LEFT, RIGHT or CENTER) is used to set the default horizontal
alignment for table cells
•VALIGN
–VALIGN
(legal values TOP, MIDDLE or BOTTOM) is
used to set the default vertical alignment for table cells
•BGCOLOR
–Sets
the color for the table row, overriding any values set for the table as a whole
via the BGCOLOR attribute of TABLE
•BORDERCOLOR,
BORDERCOLORDARK, BORDERCOLARLIGHT
–supported
only by IE, these specify the colors to use for the row borders
Table Cells: TH and TD
•COLSPAN
–COLSPAN
defines a heading or cell data entry that spans multiple columns
<TABLE BORDER=1>
<TR><TH COLSPAN=2>Col
1&2 Heading
<TH>Col13
Heading
<TR><TD>Col1
Data
<TD>Col2 Data
<TD>Col3 Data
</TABLE>
•ROWSPAN
–ROWSPAN
defines a heading or cell data entry that spans multiple rows; similar to
COLSPAN
•ALIGN
–LEFT,
RIGHT, CENTER, JUSTIFY and CHAR
•VALIGN
–TOP,
BOTTOM, MIDDLE
•WIDTH,
HEIGHT
–Values
in pixels only (no percentage officially allowed)
•NOWRAP
–Use
with caution
•BGCOLOR,
BACKGROUND
–Same
as for TABLE and TR
Lets try this as example so that you can have a clear picture about it.
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
