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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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 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:
<html>-All HTML document have three document level tags<head><body>Tags delimit certain sections of HTMLdocument</body></html>
What are TagsTo 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 bracketsMark Up Tags
<HTML>&</HTML> : Contains the whole of the HTML document. This elementtells your browser that the file contain HTML coded information(Usually first & last tags)
<HEAD>&</HEAD> :Delimits the beginning and ending of the document’s head. The Title is shown as part of your browser’s windows.
<TITLE>&</TITLE> : 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)<BODY>&</BODY> : The second-end largest-part of your HTML document is the
Body contains the content of document.
The <html> Tag The <html> tag surrounds the entire HTML document. This tag tells the client browser
where the document begins and ends.
<html>
…..document contents …
</html>
The <head> TagThe <head> 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 <head> section
Type of main Tag
1. Body tags
2. Format Tags
3. List Tags
4. Image Tags
Body tags There are including under Title ,paragraph, List, Table and Images
අරම්භය <Body>
------Statement ---->
අවසානය </Body>
…………………….
<BODY> - Tag syntax< BODYBgcolor = “color”Text =”color”Link =”color”Background =”Filename.extension”>
………………………………..document text</BODY>
Body Tag AttributesI. Bgcolor = background color
II. Text = Text colorIII. Background =background picture fileIV. Link =Hyperlink text color
<Html><body bgcolor = “#FF00FF”TEXT = “#ggff00”>Welcome my web</BODY></HTML>
<Head><Title> 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
<HTML><HEAD>
<TITLE>
EXAMPLE FOR BODY TAG</TITLE>
</HEAD><BODY
BACKGROUND=”GLASS.JPG”TEXT=”BLACK”>WELCOME MY WEB
</BODY></HTML>
---------------------------------------------------------------<BR> - this tag is using line Break 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.
</BODY></HTML>
Program(7)
<HTML><HEAD>
<TITLE>EXAMPLE FOR align paragraph TAG</TITLE>
</HEAD><BODY>
<p>This chapter describe the contents of the support CD-ROM that comes with the mainboard package. <p>The support CD-ROM contains all useful software necessary drivers and utility program to properly run our products<p>More program information is available in a README file Loacted in the same directory as the software.
<p>This chapter describe the contents of the support CD-ROM that comes with the mainboard package. <p>The support CD-ROM contains all useful software necessary drivers and utility program to properly run our products<p>More program information is available in a README file Loacted in the same directory as the software.
<p><Font face= “Arial” size= “12” color= “blue”>This chapter describe the contents of the support CD-ROM that comes with the mainboard package. </font></p><p>< font color=”Green”>The support CD-ROM contains all useful software necessary drivers and utility program to properly run our products</Font></p><p>More program information is available in a README file Located in the same directory as the software.
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 marquee
is an example of a scrolling marquee...</MARQUEE></FONT><FONT SIZE="4" FACE="courier" COLOR=blue>
<MARQUEE WIDTH=100% BEHAVIOR=SLIDE BGColor="yellow">This is an example
of a sliding marquee...</MARQUEE></FONT><BR><FONT SIZE="4" FACE="courier" COLOR="blue" BGCOLOR
="RED"> <MARQUEE WIDTH=100% BEHAVIOR=SCROLL
DIRECTION=RIGHT BGColor=yellow>This is an example of a marquee
scrolling to the right...</MARQUEE></FONT></BODY></HTML>
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
either up,down, left or right. behavior: what type of scrolling. This will have
value scroll, slid and alternate. 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.
<marquee>This is basic example of marquee</marquee><marquee width="50%">This example will take only 50% width</marquee><marquee direction="right">This text will scroll from left to right</marquee><marquee direction="up">This text will scroll from bottom to up</marquee>
HTML Marquees • Marquee Codes for Myspace
The following Marquee html tags are created to help you to build your own web application, website or Myspace marquee blog. In this table you can find most useful text tags as well as marquee image codes. Just follow our tutorial and learn how to manipulate HTML tags and codes to reach your goal without need to use any kind of Marquee Generator. Knowledge is Power! Pay attention that not all browsers, Netscape - old versions in particular, do support marquee function.
BASIC Marquee
<marquee>Change text between marquee tags</marquee>
--------------------------Lists : HTML supports unnumbered, numbered, and definition lists. You can next list too. But use this feature sparingly because too many nested items can get difficult to follow.
<LI>&</LI> :Container of a list items<UL>&</UL> :Created an unnumbered list of bulleted <LI> element.<OL>&</OL> :Defines an ordered list containing numbered <LI> elements<DL>&</DL> :logical tag indicating that enclosed text is a definition.<DT>&</DT> :Logical tag indicating that enclosed text is the term part of a
definition list element.
<DD>&</DD> : logical tag indicating that enclosed text is the tern part of a definition list element.
Unnumbered List : To make an Unnumbered bulleted list.
Start with an opening list <UL> (for unnumbered list) tag.1. Enter the <UL> (list item) tag followed by the individual item , no closing </UL>
tag is needed2. End the entire list with a closing list </uL> tag.
Below is a sample three item list<UL><Li> apple<Li>bananas<LI>Grapefruit</UL>The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <p> paragraph tags.
Numbered lists A numbered list(also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses<OL> instead of <UL> the items are tagged using the same <LI> tag . the following html code;<OL><Li> apple<Li>bananas<LI>Grapefruit</OL>
Definition lists A definition list(coded as <DL> usually consists of alternating a definition term (coded as <DL>) and a definition (coded as <DL>). Web browsers generally format the definition an a new line and indent it The following is an example of a definition list;<DL><DT> NCSA<DD> NCSA, the National Center for supercomputing Application.Is located on the campus of the University of Illinois at Urbana- champaign.<DT>Cornell Theory Center<DD>CTC is located on the campus of Corncell University in Ithaca, New York.</DL>
Heading tag
HeadingHTML has six levels of headings numbered 1 through 6 with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1> The syntax of the heading element is <Hy> Text of heading </Hy> where y is a number between 1 and 6 specifying the level of the heading. Do not skip level
Display Output on screen
of headings in your document. For example, don’t start with a level one heading (H1>) and then next use a level three(<H3>) heading.
List itemsමේ� List Items වල අතුරැ මේකාටසක මේලස නැතමේහා� පහත දැක්මේවන් ලිස්ට් ටැග්වල ඇතුල� අනු ටැග් එකක් මේලස දැක්විය හැකිය.List Tag1. Unordered List Tag2. Ordered List Tag3. DIR List Tag4. Menu List Tag5. Definition List Tag6. Address List Tag
1. Unordered List Tag (UL tag)මේ�වාමේ/ ද ආර�භක සහ අවසාන ටැග් මේදකක් ඇත. ඒ අතර ලිස්ට් ටැග් මේදකක් ද දැකිය හැකිය. එමේස්) මේ)යට මේපර සදහන් කරන ලද List Type වලින් කැ)ති එකක් ඇතුළ� කිරිමේ� හැකියාව ද තිමේබ්.Disk Program
<HTML><HEAD>
<TITLE>EXAMPLE FOR Unordered TAG</TITLE>>
</HEAD><BODY>
<H1><font Face = “Arial”><center>Welcome</font></center><H1><br><h2><font color=”red”>My First Web Page <br></font></h2></center>
<ULType = “disc”>
<Li> apple</Li><Li> bananas</Li><LI>Grapefruit</Li></UL><H3><font color= “green”><center>Create By MahndaGamage</font></h3>
<HEAD><TITLE>EXAMPLE FOR directot list TAG</TITLE></HEAD><BODY><h1><font face= Arial><center>Welcome<br></font></h1><h2><font color=red>Myfirst computer web page <br></font></center></h2.
Menu List tagමාතෘකා වේලස වේපළගැස්මක් සකස් කරන විට දී ඔබට වේමම ටැග් එක භාවිත කල හැකි වේ�.Program
<HEAD><TITLE>EXAMPLE FOR director list TAG</TITLE></HEAD><BODY><h1><font face= Arial><center>Welcome<br></font></h1><h2><font color=red>Myfirst computer web page <br></font></center></h2.
<HEAD><TITLE>EXAMPLE FOR director list TAG</TITLE></HEAD><BODY><h1><font face= Arial><center>Welcome<br></font></h1><h2><font color=red>Myfirst computer web page <br>
</font></center></h2.
<DL><DT>Hardware<dd> it is physical part of the computer<DT> SOFTWARE
Type = “Text/password/check Box/ Radio/submit/Rest”Name = “Object Name”Value= “Object Value”Size = “Size of the item”>
1. Text
<html><head><title>
example forms</title></head>
<formMethod = "post"Action = "kgi/bin/resure.pl">
Name <input type ="text" Name="Name"><BR>Company <input type = "text Name = "company"><BR></form></HTML>
2 password program<html><head><title>
example forms2</title></head><form
Method = "post">Name <input type ="text" Name="Name"><BR></p>Company <input type = "text Name = "company"><BR>password<input type ="password" name= "password"><Br></form></HTML>
sex = male<input type ="radio" name ="R1">female<input type ="radio" name ="R1">
</form></HTML>………………………………
4. Submit Program
<html><head><title>
example forms5</title></head>
<formMethod = "post">
<p> your Choice </p>
<p> internet <input type = "checkbox" name = "c1"></p><p> hardware <input type = "checkbox" name = "c2"></p><p> software <input type = "checkbox" name = "c3"></p><input type = "submit" name = "b1"></p></form></HTML>
……………………………….6. Rest Program
<html><head><title>
example forms6</title></head>
<formMethod = "post">
<p> your Choice </p>
<p> internet <input type = "checkbox" name = "c1"></p><p> hardware <input type = "checkbox" name = "c2"></p><p> software <input type = "checkbox" name = "c3"></p><p><input type = "submit" name = "b1"></p><p><input type ="reset" name="b2"></p></form></html>
Object Name
වේමහිදී Object සදහා නම හදුනාගත හැක. එනම්
input type ="text" name = "T1"input type ="submit " name="B1"input type ="reset " name = "B2"input type ="radio " checked name="R1"
</form></form></HTML>........................................TEXT AREA
වේමහි දි ඔබට TEXT AREA වල ප්රමාණය� වේවනස් කිරිමට අවකාශ ඇත. උදාහරණ වේලස ROWS/COLMS වේවනස් කළ හැක.Syntax :<text Area
Row = numberCol = number</text Area>
<input> Text or other data- input fieldType = type pf input entery fieldName= symbolic lime of field valueValue = defult content of text feidChecked =button/Box checked by defaultSize= Number of characters in text fieldMax length= maximum characters accepted
1. Add heading in web page – “WECOME TO JOB WEB PAGE”2. Add marquee with =775height =5 behavior= altnatebgcolor=”#0099cc”3. Add Font color= red size=54. Heading Center in the web page