HTML Web design english & sinhala mix note

of 52 /52
HTML (Hyper Text Mark up Language) Web Design What 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 Document Every 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: <html> -All HTML document have three document level tags <head> <body> Tags delimit certain sections of HTMLdocument </body> </html> What are Tags To denote the various element in an HTML document.we use tags. An HTML tag consist of a left angle bracket and (<), a tag name, and a right angle bracket (>),[eg : <HTML>] Tags are usually paired . [Eg.<HTML>&<//HTML>] to start and end the tag instruction.The end tag looks just like the start tag except a slash (/) precede the text within the brackets

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