HTML Web design english & sinhala mix note
-
Author
mahinda-gamage -
Category
Education
-
view
298 -
download
2
Embed Size (px)
Transcript of HTML Web design english & sinhala mix note
HTML (Hyper Text Mark up Language)Web DesignWhat is HTML?Hyper Text Mark up Language is the tool, used to build web pages.(Hypertext with text with links to more links)(mark up code within document that represents its intended structure)HTML is a collection platform independent styles that defend the various components of a world wide web document.
What an HTML Document is,HTML Documents are plain text(also Known an ASCII) files that can be created using any text editor( e.g. Emacs or version on Unix machines . Simple Text on a Macintosh, Notepad on a windows machine) you can also use word processing software if you remember to save your document as Text only with line breaks. HTML DocumentEvery Html document should contain standard HTML tags. Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.Overall Structure of HTML Tag Is a markup text Ex:
-All HTML document have three document level tags
Tags delimit certain sections of HTMLdocument
What are TagsTo denote the various element in an HTML document.we use tags. An HTML tag consist of a left angle bracket and (),[eg : ] Tags are usually paired . [Eg.&] to start and end the tag instruction.The end tag looks just like the start tag except a slash (/) precede the text within the bracketsMark Up Tags
&: Contains the whole of the HTML document. This elementtells your browser that the file contain HTML coded information(Usually first & last tags) &:Delimits the beginning and ending of the documents head. The Title is shown as part of your browsers windows. &: create the HTML document s title identifies its context. This tag is vary important and should always be used.(Unless the document is part of a frame set) &: The second-end largest-part of your HTML document is the Body contains the content of document.
The Tag The tag surrounds the entire HTML document. This tag tells the client browser where the document begins and ends.
..document contents
The TagThe tag delimits the heading of the HTML document. The heading section of the document contains certain heading information for the document.The document's title , meta information, and in most cases, document scripts are all contained in the sectionType of main Tag1. Body tags2. Format Tags3. List Tags4. Image TagsBody tags There are including under Title ,paragraph, List, Table and Images ------Statement ----> .
- Tag syntax< BODYBgcolor= colorText=colorLink=colorBackground=Filename.extension>
..document text
Body Tag AttributesI. Bgcolor= background colorII. Text= Text colorIII. Background=background picture fileIV. Link=Hyperlink text color
i. Bgcolor( background color) - .
1 Program
..
ii. Text( Text color) Text .
2 . Program
welcome..
iii. Background (background picture file) image . jpg/jpeg or Bmp type image .
3 . Program
welcome..
ColorThere are two type color codei. Standard Color
There are using 16 color codeBlackMaroonGreenblueSliverredlimetealGraypurpleolivenavyWhitefuchsiayellowaqua
ii. HexadecimalThere are using RGB color code
Red, Green, Blue, A F 0 9 Hexadecimal 256 .
.Red#FF0000Green#00FF00BLUE#0000FFWHITE#FFFFFFBlack#000000Redgreenblue000000BlackFF0000Bright Red00FF00BRIGHT GREEN800000Dark Red008000Dark Green000080Dark BlueFfff00bight yellow808000BrownFF00FFMagenta808080Gray
Program
Welcome my web
TagDefines the title of a page.This text does not appear in your web page, but appears in the title bar of the browser and when the pageis bookmarked.The TITLE must be defined in the HEAD of the document. Only one TITLE can be used in each page.
Program
EXAMPLE FOR BODY TAG
WELCOME MY WEB
---------------------------------------------------------------
- this tag is using line Break tag
Program
EXAMPLE FOR line break TAG
WELCOME
My First web
----------------------------------------------------------------- -tagThis is using divide in paragraph, and setting alignment.
1. 2. 3. 4. 5.
Program(6)
EXAMPLE FOR align paragrph TAG
This chapter describe the contents of the support CD-ROM that comes with the mainboard package. The support CD-ROM contains all useful software necessary drivers and utility program to properly run our productsMore program information is available in a README file Loacted in the same directory as the software.
Program(7)
EXAMPLE FOR align paragraph TAG
This chapter describe the contents of the support CD-ROM that comes with the mainboard package. The support CD-ROM contains all useful software necessary drivers and utility program to properly run our productsMore program information is available in a README file Loacted in the same directory as the software.
-------------------------------------------------------------------------- Center tag .
EXAMPLE FOR center TAG
Welcome
This chapter describe the contents of the support CD-ROM that comes with the mainboard package. The support CD-ROM contains all useful software necessary drivers and utility program to properly run our productsMore program information is available in a README file Loacted in the same directory as the software.
------------------------------------------------------
` tag . tag .
EXAMPLE FOR HRTAg
Welcome
My first web site
------------------------------------tag 1. Size2. Width3. Align4. No shade5. Color
1.Size .
EXAMPLE FOR HRTAg
Welcome
My first web site
---------------------------------------------------
2. width .
EXAMPLE FOR HRTAg
Welcome
----------------------------------------------------3.Align
EXAMPLE FOR HRTAg
Welcome
----------------------------------------------------------5. Noshade
EXAMPLE FOR HRTAg
Welcome
My first web site
--------------------------------------
5.color
EXAMPLE FOR HRTAg
Welcome
2.Format tags There are three type main tag
1. Font tag2. Text style tag3. Heading Tag
Font Tag - statement..< font color=Red> statement
statementstatementProgram
EXAMPLE FOR center TAG
Welcome
This chapter describe the contents of the support CD-ROM that comes with the mainboard package. < font color=Green>The support CD-ROM contains all useful software necessary drivers and utility program to properly run our productsMore program information is available in a README file Located in the same directory as the software.
------------------------------------------------2. Text style
1. - BoldTEXT..2. -Italic.....TEXT..3. Underline
.....TEXT..4. type writer text.....TEXT..5. Logical Emphasis
StyleText.6. Logical strong emphasis7. Enlarge text8. small text9.
strike out10. blink text (using Firefox Browser ) 11. horizontal
scrolling text12. superscript13. subscriptMarquee Tag . WIDTH: how
wide the marquee is HEIGHT: how tall the marquee is DIRECTION:
which direction the marquee should scroll BEHAVIOR: what type of
scrolling SCROLLDELAY: how long to delay between each jump
SCROLLAMOUNT: how far to scroll LOOP: how many times to loop
(default=infinite) BGCOLOR: background color HSPACE: horizontal
space around the marquee VSPACE: vertical space around the
marqueeWELCOME
This is an example of an alternating marquee... My First web
This is an example of a scrolling marquee... This is an example of
a sliding marquee...
This is an example of a marquee scrolling to the
right...Attrubutes:A HTML marquee can have following attributes:
width:how wide the marquee is. This will have a value like 10 or
20%etc. height:how tall the marquee is. This will have a value like
10 or 20% etc. direction:which direction the marquee should scroll.
This will have value eitherup,down,leftorright. behavior:what type
of scrolling. This will have valuescroll,slidandalternate.
scrolldelay:how long to delay between each jump. This will have a
value like 10 etc. scrollamount:how far to jump. This will have a
value like 10 etc. loop:how many times to loop. The default value
is INFINITE, which means that the marquee loops endlessly.
bgcolor:background color. This will have any color name or color
hex value. hspace:horizontal space around the marquee. This will
have a value like 10 or 20%etc. vspace:vertical space around the
marquee. This will have a value like 10 or 20%etc.Examples:Here are
few examples to demonstrate the usage of marquee tag.This is basic
example of marqueeThis example will take only 50% widthThis text
will scroll from left to rightThis text will scroll from bottom to
upHTML Marquees Marquee Codes for MyspaceThe following Marquee html
tags are created to help you tobuild your own webapplication,
website or Myspace marquee blog. In thistableyou canfindmost useful
text tags as well as marquee image codes. Just follow our
tutorialand learnhow tomanipulateHTML tags and codes to reach your
goal without need to use any kind of MarqueeGenerator. Knowledge is
Power! Pay attention that not all browsers, Netscape - old versions
in particular, do support marquee function.BASIC MarqueeChangetext
between marquee tagsMarquee BEHAVIORSlide marqueebehaviorAlternate
marqueebehaviorMarquee DIRECTIONRight marquee directionUp marquee
directionDown marquee directionMarquee LOOP Number of times marquee
wiil scroll (loop)This marquee is set to scroll (to loop)3
timesAnother example: This marquee will loop 5 timesMarquee
SCROLLAMOUNT Smaller SCROLLAMOUNT value scrolls marquee
slowerSCROLLAMOUNT marquee equals 10Another example: SCROLLAMOUNT
marquee equals 20Marquee SCROLLDELAY Smaller SCROLLDELAY value
scrolls marquee fasterSCROLLDELAY marquee. 250 = secAnother
example: SCROLLDELAY marquee 500 = secMiscellaneous HTML Marquee
TagsChanging bgcolor value changes marquee background
colorReoccuring MarqueeOpposite Direction MarqueesZigZag
Marquee
2 password programexample forms2Name
Company