Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Basic HTML Tags

    Enviado por

    aarthi dev
    69 visualizações17 páginas
    html for web technology beginners

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    DOC, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    html for web technology beginners

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    69 visualizações17 páginas

    Basic HTML Tags

    Enviado por

    aarthi dev
    html for web technology beginners

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 17

    Basic HTML tags 1. Body tag : Body tag contain some attributes such as bgcolor, background etc.

    bgcolor is used for background color, which takes background color name or hexadecimal number and #FFFFFF and background attribute will take the path of the image which you can place as the background image in the browser. <body bgcolor !#F"F#F$! background %c:&amer&imag1.gif!' ". (aragraph tag: )ost text is part of a paragraph of information. *ach paragraph is aligned to the left, right or center of the page by using an attribute called as align. <p align !left! + %right! + %center!' #. ,eading tag: ,-). is ha/ing six le/els of heading that are commonly used. -he largest heading tag is <h1' . -he different le/els of heading tag besides <h1' are <h"', <h#', <h$', <h0' and <h1'. -hese heading tags also contain attribute called as align. <h1 align !left! + %right! + %center!' . . . . <h"' $. hr tag: -his tag places a hori2ontal line across the system. -hese lines are used to break the page. -his tag also contains attribute i.e., width which draws the hori2ontal line with the screen si2e of the browser. -his tag does not re3uire an end tag. <hr width !045!'. 0. base font: -his specify format for the basic text but not the headings. <basefont si2e !14!' 1. font tag: -his sets font si2e, color and relati/e /alues for a particular text. <font si2e !14! color !#f1f"f#!' 6. bold tag: -his tag is used for implement bold effect on the text <b' 77. <8b' 9. :talic tag: -his implements italic effects on the text. <i'77.<8i' ;. strong tag: -his tag is used to always emphasi2ed the text <strong'777.<8strong'

    14. tt tag: -his tag is used to gi/e typewriting effect on the text <tt'77..<8tt' 11. sub and sup tag: -hese tags are used for subscript and superscript effects on the text. <sub' 777.<8sub' <sup'777..<8sup' 1". Break tag: -his tag is used to the break the line and start from the next line. <br' 1#. <amp <lt <gt <nbsp <3uot -hese are character escape se3uence which are re3uired if you want to display characters that ,-). uses as control se3uences. *xample: < can be represented as <lt. 1$. =nchor tag: -his tag is used to link two ,-). pages, this is represented by <a' <a href ! path of the file!' some text <8a' href is an attribute which is used for gi/ing the path of a file which you want to link. Example 1: mypage.html <html' <head' <> ?? -his page implements common html tags ??' <title' )y ,ome page <8title' <8head' <body ' <h1 align @center@' AB) CD:E*BA:-F<8h1' <h" align @center@' G,*DD=:<8h"' <basefont si2e $' <p' -his college runs under the <tt'management<8tt' of <font si2e 0' <b'<i'<3uot :t has its main campus at kattankulathur<3uot <amp it is<8i'<8b'<8font'<br' <strong' :t has its own syllabus<8strong' ,-). code to implement common tags.

    <hr si2e 0 width 945' <h#' <u'<ltAome common tags<gt<8u' <8h#'<br'

    <a href @d:&list.html@' .ist <8a'<br' <a href !d:&table.html@' -able <8a'<br' <8body' <8html' Lists: Hne of the most effecti/e ways of structuring a web site is to use lists. .ists pro/ides straight forward index in the web site. ,-). pro/ides three types of list i.e., bulleted list, numbered list and a definition list. .ists can be easily embedded easily in another list to pro/ide a complex but readable structures. -he different tags used in lists are explained below. <li' 7..<8li' -he orderedInumberedJ and unorderedIbulletedJ lists are each made up of sets of list items. -his tag is used to write list items <ul type !disc! + %s3uare! + !circle! ' 7..<8ul' -his tag is used for basic unordered list which uses a bullet in front of each tag, e/ery thing between the tag is encapsulated within <li' tags. <ol type !1! + !a! + %:! start !n!'7..<8ol' -his tag is used for unordered list which uses a number in front of each list item or it uses any element which is mentioned in the type attribute of the <ol' tag, start attribute is used for indicating the starting number of the list. <dl'7.. <8dl' -his tag is used for the third category i.e., definition list, where numbers or bullet is not used in front of the list item, instead it uses definition for the items. <dt'7..<8dt' -his is a sub tag of the <dl' tag called as definition term, which is used for marking the items whose definition is pro/ided in the next data definition. <dd' 7.<8dd' -his is a sub tag of the <dd' tag, definition of the terms are enclosed within these tags. -he definition may include any text or block. Example 2: ,-). code showing list tags. <html' <head' <title' list page <8title'

    <8head'

    <body' <h#' Gourse details <8h#'<br' <ul type @disc@' <li' Gomputer Acience and *ngineering <8li' <li' :nformation -echnology<8li' <li' *lectronics and Gommunication <8li' <8ul'<br' <ol type @:@ start $' <li' )echanical *ngineering<8li' <li' *lectronics and *lectrical *ngineering<8li' <8ol'<br' <h#' AubKect Letails <8h#'<br' <dl' <dt' Meb -echnologies<8dt' <dd' -his subKect is related to the technologies used in web applications<8dd' <8dl' <a href @d:&asgm1.html@'back<8a' <8body' <8html' Tables: -able is one of the most useful ,-). constructs. -ables are find all o/er the web application. -he main use of table is that they are used to structure the pieces of information and to structure the whole web page. Below are some of the tags used in table. <table align !center! + %left! + %right! border !n! width !n5! cellpadding !n! cellspacing !n!'777777<8table' */ery thing that we write between these two tags will be within a table. -he attributes of the table will control in formatting of the table. Gell padding determines how much space there is between the contents of a cell and its border, cell spacing sets the amount of white space between cells. Midth attribute sets the amount of screen that table will use. <tr' 7.. <8tr' -his is the sub tag of <table' tag, each row of the table has to be delimited by these tags.

    <th'77<8th' -his is again a sub tag of the <tr' tag. -his tag is used to show the table heading .

    <td'7..<8td' -his tag is used to gi/e the content of the table. Example 3: ,-). code showing the use of table tag <html' <head' <title' table page<8title' <8head' <body' <table align @center@ cellpadding @"@ cellspacing @"@ border @"@' <caption'-ime for ::: year :-<8caption' <tr'<th' : period <8th' <th' :: peiord' <8th' <8tr' <tr' <td' wt <8td' <td' uml<8td' <8tr' <8table' <8body' <8html' Color and mage: Golor can be used for background, elements and links. -o change the color of links or of the page background hexadecimal /alues are placed in the <body' tag. <body bgcolor %#nnnnnn! text %#nnnnnn! link %#nnnnnn! /link %#nnnnnn! alink %#nnnnnn!' -he /link attribute sets the color of links /isited recently, alink the color of a currently acti/e link. -he six figure hexadecimal /alues must be enclosed in double 3uotes and preceded by a hashI#J.

    :mages are one of the aspect of web pages. .oading of images is a slow process, and if too many images are used, then download time becomes intolerable. Browsers display a limited range of image types.

    <body background %CB.!' -his tag will set a background image present in the CB.. =nother tag that displays the image in the web page, which appears in the body of the text rather than on the whole page is gi/en below <img src !CB.! height !n! width !n! align %top! + %center! + %bottom! '

    Example !: ,-). code that implements color and image <html' <head' <> ?? -his page implements color and image ??' <title' )y ,ome page <8title' <8head' <body bgcolor @gray@ text @magneta@ /link @yellow@ alink @brown@' <img src !d:&img1.gif!' <8body' <8html' Example ": ,-). code that implements background image <html' <head' <> ?? -his page implements background image ??' <title' )y ,ome page <8title' <8head' <body background !d:&img1.gif @' <8body' <8html' #rames: Frames pro/ide a pleasing interface which makes your web site easy to na/igate. Mhen we talk about frames actually we are referring to frameset, which is a special type of web page. -he frameset contains a set of references to ,-). files, each of which is displayed inside a separate frame. -here are two tags related to frames i.e., frameset and frame

    <frameset cols ! 5 , 5! + rows ! 5 , 5!'77..<8frameset' <frame name !name! src !filename! scrolling ! yes! + %no! frameborder !4!+!1!'

    #orms: Forms are the best way of adding interacti/ity of element in a web page. -hey are usually used to let the user to send information back to the ser/er but can also be used to simplify na/igation on complex web sites. -he tags that use to implement forms are as follows. <forms action !CB.! method %post! + %get!'77.<8form'

    Mhen get is used, the data is included as part of the CB.. -he post method encodes the data within the body of the message. (ost can be used to send large amount of data, and it is more secure than get. -he tags used inside the form tag are: <input type %text! + %password! + %checkbox! + %radio! + %submit! name !string! /alue !string! si2e !n!' :n the abo/e tag, the attribute type is used to implement text, password, checkbox, radio and submit button. -ext: :t is used to input the characters of the si2e n and if the /alue is gi/en than it is used as a default /alue. :t uses single line of text. *ach component can be gi/en a separate name using the name attribute. (assword: :t works exactly as text, but the content is not displayed to the screen, instead an N is used. Badio: -his creates a radio button. -hey are always grouped together with a same name but different /alues. Gheckbox: :t pro/ides a simple checkbox, where all the /alues can be selected unlike radio button. Aubmit: -his creates a button which displays the /alue attribute as its text. :t is used to send the data to the ser/er.

    <select name !string!'7..<8select'

    -his tag helps to ha/e a list of item from which a user can choose. -he name of the particular select tag and the name of the chosen option are returned. <option /alue !string! selected'77<8option' -he select statement will ha/e se/eral options from which the user can choose. -he /alues will be displayed as the user mo/es through the list and the chosen one returned to the ser/er.

    <textarea name !string! rows !n! cols !n!'77.<8textarea' -his creates a free format of plain text into which the user can enter anything they like. -he area will be si2ed at rows by cols but supports automatic scrolling. Example $: ,-). code that implements forms <html' <head' <title'form<8title' <8head' <body' <p align @left@'Dame:<input type @text@ maxlength #4 si2e 10' <p align @left@'(assword:<input type @password@ maxlenght 14 si2e 10' <p align @left@'Oualification: <br'<input type @checkbox@ name @3@ /alue @be@'B.* <input type @checkbox@ name @3@ /alue @me@').* <p align @left@'Pender:<br' <input type @radio@ name @g@ /alue @m@')ale <input type @radio@ name @g@ /alue @f@'Female <p align @left@'course:<select name @course@ si2e 1' <option /alue cse selected'GA* <option /alue it'GA:<8select' <p align @left@'=ddress:<br'<textarea name @addr@ rows $ cols 0 scrolling yes'<8textarea' <p align @center@'<input type @submit@ name @s@ /alue @=ccept@' <p align @center@'<input type @reset@ name @c@ /alue @:gnore@' <8body' <8html' Example %: ,-). code that implements frames <html' <head'

    <title' )y page <8title' <8head'

    <frameset rows @"05,045@' <frame name @a@ src @d:&asgm1.html@' <frameset cols @"05,045@' <frame name @b@ src @d:&index.html@' <frame name @abc@ src @d:&welcome.html@' <8frameset' <8frameset' <8html'

    Você também pode gostar