Learn HTML Basic

Monday, March 14, 2011

How to save HTML

open Notepad
type codes
then open file menu
click save
type filename with quotation marks like this "sample.html"
then click save

HTML Part 3

Tables – allows you to present text, images and other information

objects in table form.

Syntax:

<TABLE align=”center|left|right”

background=”URL”

bgcolor=”ColorName|#RRGGBB”

border=”integer pixel”

bordercolor=”ColorName|#RRGGBB”>

Table Elements

</TABLE>

Table Elements:

Table Row

<TR align=”center|justify|left|right”

bgcolor=”colorName|#RRGGBB”

valign=”baseline|bottom|middle|top”>

Table Data

</TR>

Table Data

<TD align=”center|justify|left|right”> …text…

Example:

<TR>

<TD>Mathematics

<TD>98.00

</TR>

<TR>

<TD>Computer Science

<TD>97.00

</TR>

<TR>

<TD>Physics

<TD>94.00

</TR>

</TABLE>

Marquee - use to animate text/images

Syntax:

<MARQUEE behavior=”alternate|scroll|slide”

direction=”down|up|left|right”

loop=”integer”>

Text/object

</MARQUEE>

Sample Code:

<HTML>
<TITLE>HTML Example 3</TITLE>
<BODY>
<TABLE border=”1”>
    <TR>
        <TD>Mathematics
        <TD>98.00
    </TR>
    <TR>
        <TD>Computer Science
        <TD>97.00
    </TR>
    <TR>
        <TD>Physics
        <TD>94.00
    </TR>
</TABLE>
<MARQUEE behavior="alternate" direction="left">
Marquee alternate left
</MARQUEE>
<MARQUEE behavior="scroll" direction="right">
Marquee scroll right
</MARQUEE>
<MARQUEE behavior="slide" direction="left">
Marquee slide left
</MARQUEE>
</BODY>
</HTML>

Sample Output:

HTML Part 2

3 types of Lists:

Unordered List - lists that do not have a numbered sequence

Example:

<UL>

<LI> …list1…

<LI> …list2…

<LI> …list3…

</UL>

Attribute:

type – type of bullet

<LI type=”square|circle|disc”> … list1

Ordered List – allows you to create a list of numbered or ordered items.

Example:

<LI> …list1…

<LI> …list2…

<LI> …list3…

</OL>

Attribute:

type – type of numbering (default type: numbers)

start – an integer value where the numbering starts

Definition List – used to create a special kind of list similar to a glossary

Example:

<DL>

<DT> Term 1

<DD> Definition 1

<DT> Term 2

<DD> Definition 2

</DL>

Colors and Background:

Syntax:

<BODY bgcolor=”English-Color-Name”

background=”URL-to-graphic-file”

text= “Color|#RRGGBB”

link=”Color|#RRGGBB”

alink=” Color|#RRGGBB”

vlink=” Color|#RRGGBB”>

Where:

alink – color of the link that are/is currently in use

vlink – previously visited link

Fonts

Syntax:

<FONT color=”English-Color-Name|#RRGGBB”

face=”Font-Family|Generic-Font-Name”

size=”1 to 7 (default(3)|+1 to +6|-1 to -6”>

Text

</FONT>

Images

Syntax:

<IMG align=”buttom|left|middle|right|top”

border=”integer pixel”

height=”integer pixel”

width=” integer pixel”

src=”URL-of-image”

hspace=” integer pixel”

vspace=” integer pixel”>

Where:

hspace – horizontal space around the picture

vspace – vertical space around the picture

height & width – dimension of the picture

Links and Addressing

Anchor Element – implements hyperlinking capabilities

Syntax:

<A href=”URL” name=”string”

target=”_blank|_parent|_self|_top|frame-name”

title=”advisory text”>

Linkable text/content

</A>

Example:

<A href=”http://learninghtmlbasic.blogspot.com/”> Learn HTML Basic </A>

Linking using pictures:

</A>

Linking within a page:

Markers from other document:

Links to the middle of mypage.html document

</A>

Sample Code:

<HTML>
<TITLE>HTML Example 2</TITLE>
<BODY bgcolor="pink">
<UL>
    <LI type="square"> Unordered List 1
    <LI type="circle"> Unordered List 2
    <LI type="disc"> Unordered List 3
</UL>
<OL type="1" start="1">
    <LI> Ordered List 1
    <LI> Ordered List 2
    <LI> Ordered List 3
</OL>
<FONT color="yellow" face="arial" size="4">
<DL>
    <DT> Term 1
        <DD> Definition 1
    <DT> Term 2
        <DD> Definition 2
</DL>
</FONT>
<IMG align="right" border="2" height="320" width="320" src="html.jpg">
<A href="http://www.google.com/">Go to Google</A>
<br>
<A href="http://learninghtmlbasic.blogspot.com/">Learn HTML Basic</A>
</BODY>
</HTML>

Sample Output:

Wednesday, March 9, 2011

HTML Part 1

HyperText Mark-up Language

HTML is not a programming language but instead it is a mark-up language – used primarily to create “viewable” documents on the web.

The “text in funny brackets” are called HTML tags.

Tags begin with a left-angle bracket (<) and end with a right-angle bracket (>).

Tags are usually in pairs: the opening tag/start tag and closing tag/end tag.

<HTML> … </HTML> - denotes the beginning and end of an HTML document

Don’t forget to put end tag. Many HTML elements will produce unexpected results and/or errors if you forget the end tag.

2 sections of HTML Document:

<HEAD> … </HEAD> - contains description about the document like script code, references and style information.

<BODY> … </BODY> - contains all the “displayable” information of the document

Notes:

· Any text found outside <HTML> tag can be interpreted by the browser

· HTML is NOT a case-sensitive language.

Other HTML Tags:

<TITLE> … </TITLE> - contains text which gives title to a document. Title to be displayed at the Title bar.

Headings – allows you to create heading titles

6 levels of headings:

Attributes – pieces of information and may be included in the beginning tag of any element.

Syntax:

Paragraphs

<P> … </P> - used to display as one solid block of text behaving like

a paragraph.

Syntax:

<P align = “center|justify|left|right”> …paragraph… </P>

Break

<BR> - put an unconditional line break in the middle of the document. To start a new line.

Syntax:

…regular mark-up text… <BR> …regular mark-up text…

Horizontal Rule

<HR> - inserts a horizontal line inside the document

Syntax:

…regular mark-up text…

…regular mark-up text…

Note:

· Size – height of the line

· Noshade – produces a filled line instead of a line with 3D shading

Division

<DIV> … </DIV> - groups sets of HTML elements belonging to one division

Syntax:

Blockquote – sets apart from the main body of text by having its entire left and right margins indented from the main body of text.

Syntax:

Pre-Formatted Text

- allows you to display text as it was originally entered on the keyboard.

- allows extra spaces, tabs and newline

Syntax:

Example:

<PRE> This is a P R E F O R M A T T E D

</PRE>

Physical Formatting Elements:

<B> … </B> - Bold

<I> … </I> - Italics

<U> … </U> - underline

<SUB> … </SUB> - Subscript

<SUP> … </SUP> - Superscript

Sample Code:
<HTML>
<TITLE>HTML Example</TITLE>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
<P> This is a paragraph. </P>
<P align="center"> This is a center aligned paragraph. </P>
regular mark-up text <BR> regular mark-up text
<HR>
<DIV> This is a division. </DIV>
<BLOCKQUOTE> This is a blockquote. </BLOCKQUOTE>
<PRE> This is a P R E F O R M A T T E D
    T
        E
            X
                T
</PRE>
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
<SUB> Subscript </SUB>
<SUP> Superscript </SUP>
</BODY>
</HTML>

Sample Output: