a/l git html view

A/L 2011_revision. BASIC HTML FOR GIT

page 1 of 8

BASIC HTML FAST

HTML= Hypertext Markup Language.

HTTP= Hyper Text Transfer Protocol

URL : Uniform Resource Locator

URL = protocol://domain:port/path/filename

Web Server: Hosts Web Pages & Applications

Home Page : Main (Index) Page of a Website

HTML is the programming language for writing web pages.

The HTML code is written in Notepad,

go to Start > Programs > Accessories > Notepad. Save the document as an html

document with *.htm extension. Open the saved html document with your

browser

Clicking on View in the menu and select Source,

the HTML source code is displayed


page 2 of 8

Tags.

The information is stored within the arrow brackets i.e.

<TAG>Information</TAG>.

Tags always have opening Tag and End Tag but a few ( <hr>, <br>, <img> have no

ending Tags in HTML.

<HTML>

<HEAD>

<TITLE>

My First Web Page!

</TITLE>

</HEAD>

<BODY>

<H1>

Hello Everybody!!!

</H1>

</BODY>

</HTML>

TAGS

<HTML> defines the document, computer or browser can read in the correct

syntax. It is always the first tag.

</HTML> end of the HTML document. It is always the last tag.

The structure of a web page:

<HEAD> header holds information about the document

</HEAD> end of the Head.

<TITLE> gives the web page a title which appears on the title bar.

Used by search engines to find the page.

Each page should have a different title.

</TITLE> end of the Title.


page 3 of 8

<BODY> body of the web page content (what actually appears in the web

Browser. The Body will contain the text, images, links, multimedia, animation

etc. All the work you do will go into the Body.

</BODY> end of the Body.

<H1> H stands for Heading, and 1 stands for the biggest size.

Most important message or headline uses this tag.

</H1> end of this size of text.

Note: every time a tag is opened i.e. <H1> it always has to be closed i.e. </H1>,

the forward slash is used to denote the closing of the tag.

They are the HTML basics ….

MORE…..

You can include comments.

<--COMMENT--> i.e. <--This will make the font colour red-->

Text Font sizes and styles

<FONT SIZE=5 COLOR="00ccff" FACE="Courier">

Here is some text <P>

This word is in <I>italics</I> this word is <B> bold</B> </FONT>

You can make the text move by inserting <MARQUEE>text</MARQUEE>

You can align text by inserting <CENTER>

You can underline words with <U>text</U>

You can use a line break instead of a paragraph to make text start on the next

line, <BR> instead of <P>.


page 4 of 8

Give the background some color try yellow:

<BODY BGCOLOR="#FFFF00">

<BODY BGCOLOR="yellow">

GRAPHICS:

To place an image on your web page you will need to know the location of your

image.

<IMG SRC="image.jpg" WIDTH=250 HEIGHT=150>

SRC specifies the uniform resource locator (URL) for the image.

The size is set by WIDTH and HEIGHT.

You can also add an image by referring to its website.

<IMG SRC="http://www.shilpasayura.org/in/logo.jpg”>

An image could also be set as a background.

<BACKGROUND=" bg.jpg">

LINKS:

To place a link to an image in a piece of text:

<A HREF="image.jpg"> image</A>

A creates a hyperlink with HREF, or an anchor with a NAME attribute.

A link to a site:

<A HREF="http://www.kaputa.com./chat "><B>Chat</B></A>

Note: A hyperlink is underlined.


page 5 of 8

<A HREF="BottomLine">This links to the bottom of the page</A>

<A NAME="BottomLine">This is the bottom of the page</A>

A Hyperlink to an e-mail address:

<A HREF="mailto:[email protected] ">e-mail Kaputa.com </A>

A graphical hyperlink:

<A HREF="http://www.google.com"><IMG SRC="image.jpg></A>

Un ordered Lists

<ul>

<li> List Item 1 <li>

<li> List Item 2<li>


</ul>

Ordered Lists

<ol>

<li> List Item 1 <li>



</ol>

Definition Lists

<dl >Category1</dl>

<dt> Category1 - Item 1 <dt>

<dt> Category1 - Item 2 </dt>

<dl >Category 2</dl>

<dt> Category2 - Item 1 <dt>

<dt> Category2 - Item 2 </dt>


page 6 of 8

Table <table>

<tr><td>Row1 Cell 1</td><td>Row 1 Cell 2</td></tr>

<tr><td>Row2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>

Horizontal Line

<hr>

Quick guide to HTML TAGS.

<HTML> An HTML document opens </HTML>

<HEAD> Opens the head to insert a title </HEAD>

<TITLE> Enter the web site title </TITLE>

<BODY> Where all the code goes </BODY>

<BODY BGCOLOR= > Sets the background colour, type colour name or #etc

<BACKGROUND="image.jpg"> For a background image

<BGSOUND SRC="musicname.wav" LOOP="INFINITE"> For a background sound

Formatting Text:

<FONT SIZE= , COLOR= , FACE= ,> <I> Italic, <B> Bold, <U> Underline

<H1> Largest text possible for headings, others are: H2, H3, H4, H5, H6

<BR> Inserts a line break.

<P> Inserts a paragraph break

<HR> Inserts a horizontal rule

<CENTER> Aligns the text to the centre of the page

<LI> Make a bullet list

<BIG> Big text, <SMALL> Small text <SUB> Subscript text

<strong>Bold

<i>italic

<u>Underline

<SPACER TYPE="VERTICAL"(or HORIZONTAL) SIZE= > A space to the next line


page 7 of 8

Images:

<IMG SRC="image.jpg" WIDTH= Height= (If a border is needed) BORDER= >

<HSPACE= VSPACE= , > To add space around an image horizontal and vertical

<ALIGN= TOP/MIDDLE/BOTTOM >This gets the text to wrap around

<br> Line Break

<hr> Horizontal Line

<blockquote> Indenting

Links:

<A HREF="image.jpg"> image</A> Will place a link to an image in the text

<A HREF=http://www.bbc.co.uk><IMG SRC="theimagename.jpg"> Is an image link to

the website

<A HREF="http://www.kaputa.com ">Kaputa</A> Is a text link to a web site

Anchor:

Place an anchor in the page: <A NAME="nameofthetext"> Welcome</A>

Place a link to that anchor: <A HREF="#nameofthetext">Go to Welcome</A>

E-mail:

<A HREF="mailto: [email protected] ">To e-mail Henry click here</A>

More : www.w3schools.com

Site Map : The Link Map of the Site

Content : Web Information (Text, Audio, Design)

Meta Tags : Describes Page Content , Ownership

CSS : Cascading Style Sheets for Page Information Display (formats/design)

Web Master : Web Designer, Server Manager

Web Marketing : Promoting a Web Site

Search Engine Submission : Submitting to Google etc.

Search Engine Position: Ranking in Search Engine

Verisign : Security Certificate by Verisign

RSS : Special Feed from Websites

E Commerce : Electronic Commerce

Payment Gateway : Connects Website for Credit Card Payments


page 8 of 8

www.shilpasayura.org

a/l git html view

Documents