HTML Tutorial லேபிளுடன் இடுகைகளைக் காண்பிக்கிறது. அனைத்து இடுகைகளையும் காண்பி

செவ்வாய், 30 டிசம்பர், 2014

HTML Tutorials 14-Body tag-ல் சிறப்புப் பண்பு bgcolor

Author: Infomas | டிசம்பர் 30, 2014 |

ஒரு HTML ஆவணத்தின் உரைப்பகுதியானது <BODY> மற்றும் </BODY>

என்னும் குறி ஒட்டுகளுக்கு(Tags) இடையே இருக்கும்.

இது நமக்குத் தெரிந்ததே. இந்த BODY குறிஒட்டில்(TAG) லும் நிறைய சிறப்புப்

பண்புகளைச் சேர்க்க முடியும். அந்த வகையில் ஒரு ஆவணத்தின் பின்னணி

நிறத்தை கொடுக்கக்கூடிய சிறப்புப் பண்பான BGCOLOR என்பதைப் பற்றி

பார்ப்போம்.

<BODY> குறி ஒட்டில் பண்புகளைச் சேர்ப்பதன் மூலம் பின்னணி

நிறம்(BACKGROUND),பின்னணியில் படம்(Background Image), எழுத்தின்

நிறம்(Font COLOR) இணைப்புக் கோட்டின் நிறம்(LINK LINE COLOR)

போன்றவற்றைக் கொடுக்க முடியும்.

<BODY> குறிஒட்டில் (Tag ) BGCOLOR, TEXT, BACKGROUND, LINK, VLING, ALINK, LEFTMARGIN மற்றும் TOPMARGIN போன்ற பண்புகளைக் கொடுக்க முடியும். இந்தப் பண்புகளைப் பற்றிக் இன்றையப் பாடத்தில் பார்ப்போம்.

BGCOLOR - (பின்னணி நிறம்) பண்பு

<BODY> என்ற குறி ஒட்டில் BGCOLOR என்னும் பண்பைச் சேர்ப்பதன் மூலம் பக்கத்தின் JSன்னணி நிறத்தைக் கொடுக்க முடியும். RGB நிறக் குறிமுறையைப்(Color names) பயன்படுத்துதல், ஆறு இலக்க பதினறும எண்ணைப் (Color Values)பயன்படுத்துதல் போன்ற இரு வழிகளில் நிறத்தைக் கொடுக்க முடியும்.

ஆறு இலக்க பதினறும எண்ணில் முதல் இரண்டு இலக்கம் சிவப்பு நிறத்தையும், அடுத்த இரண்டு இலக்கம் பச்சை நிறத்தையும், கடைசி இரண்டு இலக்கம் ஊதா நிறத்தையும் குறிக்கின்றன. இவை அனைத்தும் முதன்மை நிறங்களான (RGB - RED, GREEN, BLUE) ஆகியவை.

எடுத்துக்காட்டாக FFFFFF என்பது வெள்ளை நிறத்தையும், FF0000 என்பது சிவப்பு நிறத்தையும், FFFF00 என்பது மஞ்சள் நிறத்தையும் குறிக்கின்றன. நிறத்தை இவ்வாறு பதின்றும இலக்கங்களில் கொடுப்பது சிரமமானதாக இருக்கலாம்.

எனவே தற்போது உலவிகள் நிறத்தின் பெயர்களைப் புரிந்துகொள்ளும்படி அமைக்கப்பட்டுள்ளன. எனவே இந்த எண்களைப் பயன்படுத்துவதைக் காட்டிலும் நேரடியாகவே நிறத்தின் பெயரை கொடுக்கலாம்.

black, silver, Grey, white, maroon, red, purple, fuchsia, green, lime, Olive, yellow, navy, blue, teal மற்றும் aqua என்பன போன்ற பதினாறு வகை நிறங்கள் வரை ஏற்றுக்கொள்கின்றன.

உதாரணம் ஒன்றைப் பார்ப்போம்.

என்று கொடுக்கும்போது உங்கள் வலைப்பக்கத்தின் பின்னணி நிறமானது பச்சை நிறத்தில் காணப்படும்.

பின்னணி நிறம் எதுவும் இல்லையெனில் எப்போதும்போல வெண்மையாகவே இருக்கும்.

<HTML>

<HEAD>

<TITLE>How to put background color in html page?</TITLE>

</HEAD>

<BODY bgcolor="green">

வணக்கம் நண்பர்களே,

இது அருண். நான் உங்களுக்குஎளிய தமிழில்<

HTML எனும் தலைப்பில்

கற்றுக்கொடுக்க ஆரம்பித்திருக்கிறேன்.

தொடர்ந்து இந்தத் தொடர்பதிவைப்

படித்து பயன்பெற வேண்டுகிறேன்.

நன்றி

</BODY>

</HTML>

மேற்கண்டவற்றை .html என்ற விரிவுடன் சேமித்து உங்கள் வலைஉலவியில் திறந்து பார்க்கும்போது உங்கள் வலைப்பக்கத்தின் பின்னணி நிறம் பச்சை நிறத்தில் காணப்படும்.

அடுத்தப் பதிவில் இதே <body> குறிஒட்டில் இன்னும் சில சிறப்புப் பண்புகள் இருக்கிறது. அதில்TEXT பண்பு, BACKGROUND பண்பு(attributes)களைப்பற்றிப் படிப்போம்.

Source : http://www.thangampalani.com/

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 13-BR (Break) tag

Author: Infomas | டிசம்பர் 30, 2014 |

இது எதற்கென்றால் ஒரு வரியை முடித்து, அடுத்த வரிக்குச் செல்ல

வேண்டும் என்பதை Browser-க்கு சொல்லப் பயன்படும் குறிஒட்டாகும்.

கீழக்காணும் எடுத்துக்காட்டைக் கவனியுங்கள்..

<HTML>

<HEAD>

<TITLE>THIS IS MY OWN PAGE</TITLE>

</HEAD>

<BODY>

<CENTER>வணக்கம் நண்பர்களே,<br>

இது அருண். நான் உங்களுக்குஎளிய தமிழில்<br>

HTML எனும் தலைப்பில் <br>

கற்றுக்கொடுக்க ஆரம்பித்திருக்கிறேன்.<br>

தொடர்ந்து இந்தத் தொடர்பதிவைப் <br>

படித்து பயன்பெற வேண்டுகிறேன்.<br>

நன்றி</CENTER>

</BODY>

</HTML>

மேற்கண்ட நிரல் வரிகளை Notepad -ல் எழுதி அதை .html என்ற விரிவுடன் சேமித்துக்கொள்ளுங்கள். சேமித்த கோப்பை உலவியில் திறந்துப் பார்த்து சோதனை செய்துகொள்ளவும்.

மேற்கண்டவற்றின் வெளிபாடு(உலவியில்) இவ்வாறு இருக்கும்.

வணக்கம் நண்பர்களே,

இது அருண். நான் உங்களுக்குஎளிய தமிழில்

HTML எனும் தலைப்பில்

கற்றுக்கொடுக்க ஆரம்பித்திருக்கிறேன்.

தொடர்ந்து இந்தத் தொடர்பதிவைப்

படித்து பயன்பெற வேண்டுகிறேன்.

நன்றி

என்ன காரணம்?

ஒவ்வொரு வரி முடிவிலும் <BR> Tag சேர்த்திருப்பதால் இந்த மாற்றம்

வந்திருக்கிறது. இதிலிருந்து <BR> Tag -ன் பயன்பாடு என்ன என்பது

புரிந்திருக்கும்.

உங்களுக்கு தேவைப்படும் இடங்களில் இந்த <BR> Tag

பயன்படுத்திக்கொள்ளலாம். குறிப்பாக செய்யுள்கள், கவிதைகள்

போன்றவைகளை அடுத்த வரிகளில் அவைகள் உள்ளது உள்ளபடியே

காட்டினால்தான் பொருள்தரக்கூடிய வகையில் இருக்கும். இதற்கும் இந்த

<BR> Tag பயன்படுகிறது.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 12-CENTER tag

Author: Infomas | டிசம்பர் 30, 2014 |

எளிய தமிழில் HTML கற்றுக்கொள்ள தொடர் மூலம் நிறைய புதிய

நண்பர்களைப் பெற்றிருப்பதில் மிக்க மகிழ்ச்சி. விடுபட்ட கடந்த

மூன்றுநாட்களுக்கான பதிவுகளையும் சீரான இடைவெளியில் இன்றைய

வேலைநாளில் பதிவிட எண்ணியிருக்கிறேன். பதிவிற்கு வருவோம்.

கடந்த பதிவில் பத்திக் குறி ஒட்டில் (Paragraph Tag) இசைவுப்(Align) பண்புகளைப் (attributes) பற்றிப் பார்த்தோம்.

இப்பதிவில் <CENTER> மற்றும் </CENTER> ஆகிய குறி ஒட்டுகளைக் காண்போம். இந்தக் குறிஒட்டுகளுக்கு(Tags) இடையில் உள்ள உரை உலவித்திரையில் கிடைமட்டமாக(Horizontal) மையப்படுத்திக் காட்டப்பட பயன்படுத்தப்படுகிறது.அதாவது வலைப்பக்கத்தில் மையப்படுத்தி(Center) காண்பிக்கும்.

கீழ்க்கண்ட நிரல்வரிகளை notepade-ல் எழுதி வழக்கம்போலவே .html என்ற விரிவுடன் சேமித்து, உங்கள் கோப்பை Internet Explorer, Google Chrome, Firefox போன்ற உலவிகளில் திறந்துப் பாருங்கள். உரையானது மையப்படுத்திக் காண்பிக்கப்பட்டிருக்கும்.

<HTML>

<HEAD>

</HEAD>

<BODY>

<CENTER>HI Masinfom BLOG VIEWERS</CENTER>

</BODY>

</HTML>

இதன் வெளிப்பாடு இவ்வாறு இருக்கும்.

HI Masinfom BLOG VIEWERS

இவ்வாறு ஒரு உரையை நடுவில், மையப்படுத்தி காண்பிக்க இந்த <center></center>குறிஒட்டுகள் காண்பிக்கப் பயன்படுகிறது.அடுத்த பதிவில் <BR> (Break Tag)ஐப் பற்றிப் பார்ப்போம்

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 11-Paragraph Tag-ல் அலைன்மெண்ட்

Author: Infomas | டிசம்பர் 30, 2014 |

கடந்த பதிவில் பத்திக் குறி ஒட்டைப்(Paragraph Tag) பற்றிப் பார்த்தோம். இது

மிகவும் எளிதாக விளங்கிக்கொள்ளக்கூடிய ஒன்றுதான். இந்த Paragraph Tag

பத்திக் குறி ஒட்டில் Align பண்பைச் சேர்ப்பதன் மூலம் பத்திகளை நமது

விருப்பத்திற்கேற்ப மாற்றி அமைக்கலாம்.

அதாவது இடது(left), வலது(Right), நடுப்புறம்(Center) மற்றும்

நேர்த்தி(Justify) என நான்கு வகைகளில் பத்திகளை அமைக்கலாம்.

ஒரு உதாரணத்தைப் பார்ப்போம்.

<P ALIGN = "left"> என்பது பத்தியை இடது இசைவிற்கும்,

<P ALIGN = "right"> என்பது பத்தியை வலது இசைவிற்கும்,

<P ALIGN = "center">என்பது பத்தியை மைய இசைவிற்கும்

<P ALIGN = "justify"> என்பது நேர்த்தியான இசைவுக்கும் மாற்றுகிறது.

      <HTML>
    <BODY>
    <P ALIGN="left">HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி வலை

உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும்.</p>

<P ALIGN="right">HTML மொழியை மீயுரை என அழைக்கலாம். இதன்

பணி வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும்

என குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலை உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும்.</p>

<P ALIGN="center">HTML மொழியை மீயுரை என அழைக்கலாம். இதன்

பணி வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும்

என குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலை உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும்.</p>

<P ALIGN="justify">HTML மொழியை மீயுரை என அழைக்கலாம். இதன்

பணி வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும்

என குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலை உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும். </p>

</BODY>
</HTML>

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

செவ்வாய், 16 டிசம்பர், 2014

HTML Tutorial -10-பத்திக் குறி ஒட்டு( Paragraph Tag)

Author: Infomas | டிசம்பர் 16, 2014 |

கடந்த பதிவில் முழுமுதன்மையான குறிஒட்டுக்களான <b></b>, <i></i>

மற்றும் <u></u> என்பதைப் HTML Tags-(Part-I) பார்த்தோம்.
இந்தப் பதிவில் பத்திக் குறி ஒட்டு( Paragraph Tag) என்பதைப் பற்றிப் பார்ப்போம்.

பத்திக் குறி ஒட்டில் தொடக்கம் <P> இவ்வாறு இருக்கும். இது ஒரு புதிய பத்தி தொடங்குவதைக் குறிக்கிறது.

</p> என்னும் முடிவுக் குறி ஒட்டு பத்தி முடிவதைக் குறிக்கிறது.

இந்தக் குறி ஒட்டு எதற்கென்றால் ஒவ்வொரு பத்தியாக(Paragraph) பிரித்துக்காட்டப் பயன்படுகிறது. இதில் ஆரம்ப குறிஒட்டு ஒன்றை சேர்த்தால் கூட போதுமானது.

உதாரணத்தைக் கவனியுங்கள்..

<HTML>
<BODY>
<P>இந்த எளிய தமிழில் HTML தொடர் எளிமையாகவும், புதிய

வாசகர்களுக்கும், HTML கற்க விருப்பமுள்ளவர்களுக்கும்

பயனுள்ளதாக உள்ளது. </p><p>இந்த தளத்தைப் பற்றி உங்கள்

கருத்துகளையும், ஆலோசனைகளையும் வரவேற்கிறோம். </P>

<P>தொடர்ந்து உங்களின் நல்லாதரவையும் ஒத்துழைப்பையும்

வழங்க கேட்டுக்கொள்கிறேன். <p> நன்றி. வணக்கம்.

<BODY>
</HTML>

இதன் வெளிப்பாடு இவ்வாறு இருக்கும்.

எனவே ஒரு பத்திக்கும்(Paragraph) அடுத்த பத்திக்கும்(Paragraph)

இடைவெளி காண்பிக்க இந்த Pragraph Tag பயன்படுகிறது என்பதை

அறிந்துகொள்ளுங்கள். இதைச் செயல்படுத்தி பார்க்க நோட்பேடில்

மேற்கொண்ட நிரல்வரிகளை எழுதி Body Section -ல் ஒன்றிரண்டு பத்திகளை

எழுதி அவற்றிற்கிடையில் Pragraph Tag-ஐப் பயன்படுத்திப் பாருங்கள்.

அதன் விளைவை உலவியில் திறந்து பார்த்தால் தெரியும். Pragraph Tag

இடாத பத்திகள் அனைத்தும் இடைவெளியில்லாமலும் , Pragraph Tagஇட்ட

பத்திகள் இடைவெளிவிட்டு அமைந்திருப்பதையும் காணலாம்.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorial 9-HTML ஆவணத்தை வடிவூட்ட(formation)

Author: Infomas | டிசம்பர் 16, 2014 |

HTML Tutorial 9

கடந்த இடுகையில் பார்த்த அடிப்படை HTML ஆவணம். இதை மேலும் நாம் வடிவூட்டலாம்(format)

அதாவது ஒரு ஓவியம் வரையும்போது முதலில் கோடுகளால் வரைந்துவிட்டுப் பிறகு அவ்வோவியத்திற்கு நிழல்(Shadow) ,மற்றும் விரும்பிய வண்ணங்கலவைக் கொண்டு மாற்றி அமைப்பதுபோலவே நமது HTML ஆவணத்தையும் வடிவூட்டலாம்.
ஹெச்.டி.எம்.எல் ஆவணத்தை கவர்ச்சிகரமாகக் காட்ட HTML-ல் பல குறிஒட்டுகள்(TAGS) உள்ளன. இவற்றைப் பயன்படுத்தி ஒரு ஆவணத்திலுள்ள உரையை அழகுப்படுத்துவதுடன், அதில் படங்களையும், வண்ணங்களையும், ஒலிகளையும், காணொளிகளையும் சேர்க்கலாம்.

இத்தகைய வடிவூட்டல்களுக்குப் பயன்படும் குறிஒட்டுகளைப் பற்றிப்

பார்க்கலாம்.

1.தலைப்புக் குறி ஒட்டு (Heading Tags)

எழுத்துகளை பெரிதாகவும், தடிமனாகவும் கொடுப்பதன் மூலம்

காண்போரின்

கவனத்தை ஈர்க்க முடியும். HTML ஆவணத்தில் ஆறு அளவுகளில்

தலைப்புகளை அமைக்க முடியும். இந்த எழுத்து அளவுகள் ஏற்கனவே

முன்வரையறுக்கப்பட்டு வைக்கப்பட்டுள்ளன. இந்த அளவுகளை <H1>...</H1>

எனத் தொடங்கி <H6>...</H6> வரைக் குறிப்பிடலாம்..

<H1> என்பது இருப்பதிலேயே பெரிய அளவையும், <H6> என்பதை

இருப்பதிலேயே சிறிய அளவையும் குறிக்கும்.

வேறுபட்ட அளவுள்ள தலைப்புகளை உருவாக்குவதற்காக எழுதப்பட்ட நிரல்

கீழே கொடுக்கப்பட்டுள்ளது.

<HTML>

<HEAD>

<TITLE> Heading Tags</TITLE>

</HEAD>

<BODY>

<H1>Heading Level 1 </H1>

<H2>Heading Level 2 </H2>

<H3>Heading Level 3 </H3>

<H4>Heading Level 4 </H4>

<H5>Heading Level 5 </H5>

<H6>Heading Level 6 </H6>

</BODY>

</HTML>

மேற்கண்ட கோடிங்கை ஒரு நோட்பேடில் எழுதி உங்களுக்கு விருப்பமான

பெயரில் .html என்ற விரிவுடன் சேமித்துக்கொள்ளுங்கள்.

சேமிக்கப்பட்ட கோப்பை உங்கள் இணைய உலவியில் (Internet

Browser)பிரௌசரில் திறந்து பார்க்கும்போது இவ்வாறு இருக்கும்.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

பல்வேறுபட்ட தலைப்புகளை HTML -ல் எழுதிப் பழகுங்கள்.

2. கிடைக்கோடுகள் (Horizontal Rules)

<HR> என்ற கிடைக்கோட்டுக் குறி ஒட்டு, ஒரு கிடைக்கோட்டினை உருவாக்குகிறது.
ஒரு ஆவணத்தின் முக்கியப் பகுதிகளைப் பிரித்துக்காட்ட கிடைக்கோட்டுக்
குறி ஒட்டு(<HR> tag) பயன்படுகிறது.
<HR> குறி ஒட்டைப் பயன்படுத்தி வரையப்படும் கோட்டின் தடிமனைக் கூட
தீர்மானிக்க முடியும்.
அவ்வாறு செய்வதற்கு <HR> குறி ஒட்டுடன் சில பண்புகளைச் சேர்க்க
வேண்டும்.
SIZE மற்றும் NOSHADE என்பவை <HR> குறி ஒட்டுடன் அடிக்கடி
பயன்படுத்தப்படும் பண்புகளாகும்.
வரையப்படும் கோட்டின் தடிமனைக் குறிக்க SIZE பண்பு பயன்படுகிறது.
NOSHADE பண்பு வரையப்படும் கோட்டை சாம்பல் நிறத்தில் (நிழலகற்றி)
காட்டப் பயன்படுகிறது.
கவனிக்க: <HR> முடிவு குறி ஒட்டு இல்லை.

உதாரணமாக இந்த ஆவணத்தைப் பாருங்கள்..

<HTML>

<HEAD>

<TITLE> Horizontal Rules</TITLE>

</HEAD>

<BODY>

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

<HR size="5">

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

<HR size="5" noshade >

</BODY>

</HTML>

மேற்கண்ட HTML நிரல்வரிகளுக்கான வெளிப்பாடு...

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules<HR>

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

மேற்கண்ட படத்தில்...

1. கிடைமட்டக்கோடு கோடு <HR>

2. கிடைமட்டக் கோட்டின் தடிமன் ஐந்து புள்ளிகள்

அதிகரிக்கப்பட்டிருக்கிறது...மேற்கண்ட வரியில்size="5" என்பதற்கு பதில்

உங்களுக்கு விருப்பமான எண்ணை உள்ளிடலாம். எண்ணின் மதிப்பு

அதிகரிக்க கோட்டின் தடிமன் அதிகமாகும்.

3. கிடைமட்டக் கோட்டில் வரும் சாம்பல் நிற நிழலை(shade)த் தவிர்க்க "no

shade" என்ற சிறப்புப் பண்பு பயன்படுத்தப்பட்டுள்ளது.

இதுபோல் நிறைய வடிவூட்டல் குறிஒட்டுகள் HTML ஆவணத்தில்

பயன்படுத்தலாம்.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorial 8-ஒரு HTML கோப்பு

Author: Infomas | டிசம்பர் 16, 2014 |

இப்பதிவில் ஒரு HTML நிரலை எவ்வாறு உருவாக்குவது? அதை எப்படி

சேமிப்பது? சேமித்த கோப்பை எப்படி திறந்து பார்ப்பது? என்பதைப் பற்றிப்

பார்ப்போம்.

ஒரு HTML PROGRAMME எழுதலாம் வாங்க..!!

உங்கள் கணினியில் ,

Start --> Programs-->Notepad என்னும் கட்டளை மூலம் Notepad ஐத் திறக்கவும்.

கீழிருக்கும் HTML நிரல் வரிகளை நோட்பேட்டில் உள்ளிடவும்.

<html>

<head>

<title>Welcome to webpage</title>

</head>

<body>

Hi Friends! this is my first webpage

</body>

</html>

அனைத்தையும் தவறில்லாமல் தட்டச்சு செய்த பிறகு Menu bar-ல் File

என்பதை கிளிக் செய்யவும்.

கீழிவிரியும் மெனுவில் Save என்பதை கிளிக் செய்தால் Save As என்ற

உரையாடல் பெட்டித் தோன்றும்.

அதில் தங்களுக்கு விருப்பமான பெயரை தட்டச்சிட்டு .html என்னும்

விரிவுடன் சேமிக்கவும்.

நான் mypage.html எனப் பெயரிட்டு .html விரிவுடன் சேமித்திருக்கிறேன்.இங்கு

.html என்பதுதான் இது HTML கோப்பு என்பதை நிர்ணயிக்கிறது. இது மிகவும்

முக்கியமான ஒன்றாகும்.

சேமித்த HTML கோப்பை திறப்பது எப்படி ?

உங்கள் இன்டர்நெட் உலவியைத் திறக்கவும்.

அதில் File ==> Open என்பதை கிளிக் செய்யவும்.
உரையாடல் பெட்டி ஒன்று திரையில் தோன்றும்.
அதில் Open என்ற பெட்டியில் நீங்கள் சேமித்த கோப்பின் பெயரைக் கொடுத்து Browse என்பதைச் சொடுக்குங்கள்.

அதில் நீங்கள் உள்ளிட்ட பெயருடன் கூடிய html கோப்பு இன்டர்நெட்

எக்ஸ்புளோரர் அல்லது Firefox, Google chrome (நீங்கள் எந்த உலவியைப்

பயன்படுத்துகிறீர்களோ) அந்த ஐகானுடன் இருக்கும்.

அக்கோப்பைத் தேர்வு செய்து Open என்பதை கிளிக் செய்யவும். இப்போது

Internet உலவியில் உங்கள் வலைப்பக்கமானது திறந்திருக்கும்.

இதில் நீங்கள் எழுதிய HTML குறிஒட்டுகள் தெரியாது. குறிஒட்டுக்குள் என்ன

எழுதினீர்களோ அதுமட்டுமே வலைதளத்தில் தெரியும்.

நான் எழுதி <title></title> குறிஒட்டிற்குள் எழுதிய Welcome to webpage என்பது தலைப்பு பகுதியிலும், <body></body> என்னும் குறிஒட்டிற்குள் எழுதிய வாக்கியம் வலைப்பக்கத்திலும் தெரிவதைக் கவனியுங்கள்..

இவ்வாறு ஒரு முழு HTML நிரல் வரிகளை எழுதி மேற்குறிப்பிட்ட வகையில்

.html என்னும் விரிவுடன் சேமித்து, அதை வலைஉலவியில் திறந்து

சோதனை செய்துகொள்ளலாம்.

தொடர்ச்சியாக ஒரு HTML ஆவணம் தயாரிக்கும்போது முக்கியமாக கவனத்தில் கொள்ள வேண்டியவை:

1. HTML ஆவணம் <HTML> மற்றும் </HTML> என்னும் குறி ஒட்டுகளுக்கு இடையில் இருக்க வேண்டும்.

2. <TITLE> மற்றும் </TITLE> என்னும் குறி ஒட்டுகள் <HEAD> மற்றும் </HEAD> என்னும் குறிஒட்டுக்குள் இடையில் இருக்க வேண்டும்.

3. <BODY> மற்றும் </BODY> என்னும் குறி ஒட்டுகள் </HEAD> என்னும் குறிஒட்டிற்குப் பின்னர்தான் எழுதப்பட வேண்டும்.

4. மற்ற அனைத்து குறிஒட்டுகளும் <BODY> மற்றும் </BODY> என்னும் குறிஒட்டுகளுக்கு இடையில் இருக்க வேண்டும்.

5. அனைத்து HTML ஆவணங்களும் ".htm" அல்லது ".html" என்னும் விரிவுடன்(Extension) இருக்க வேண்டும்.

6. <> என்ற குறியீடுகளுக்கு இடையில் தொடக்க குறிஒட்டு(Tag) ஆகும்.

7. </ > என்ற குறியீடுகளுக்கு இடையில் முடிவுக் குறிஒட்டு(Tag) ஆகும்.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorial 7-HTML கட்டமைப்பு (HTML Structure)

Author: Infomas | டிசம்பர் 16, 2014 |

HTML Tutorial 7

இப்பதிவில் ஒரு HTML ஆவணத்தின் முழு கட்டமைப்பு எப்படி இருக்கும்

என்பதைப் பார்க்க இருக்கிறோம்.

ஒவ்வொரு HTML ஆவணமும் என்னும் குறி ஒட்டுடன் தொடங்க வேண்டும்.

இந்தக் குறி ஒட்டு, இதன் பின்னர் வருவது HTML ஆவணம் என்பதை

தெரிவிக்கிறது. ஒரு HTML ஆவணம் இரண்டு பகுதிகளைக் கொண்டது.

1. தலைப்பகுதி (Head Section) 2. உடல் பகுதி (Body Section)

1. Head section - தலைப்பகுதி

தலைப்பகுதி ஆவணத்தின் தலைப்பைப் குறிப்பதற்குப் பயன்படுகிறது இது

என்னும் குறி ஒட்டுடன் தொடங்குகிறது. இதில் என்னும் முடிவுக் குறி

ஒட்டுடன் முடிவடைகிறது. தலைப்பகுதியை முடிக்க முடிவுக்

குறிஒட்டைப்(Tag) பயன்படுத்த வேண்டும்.

2. உடல் பகுதி (Body Section)

உடல் பகுதியில் என்னும் குறி ஒட்டைத் தொடர்ந்து ஆவணத்தின் உரைப்

பகுதி இருக்கும். இது என்னும் முடிவுக் குறிஒட்டுடன் முடிவடைகிறது.

ஆவணத்தின் உடல் பகுதி பல HTML குறி ஒட்டுக்களைக் கொண்டிருக்கும். சில

குறி ஒட்டுகள் உரையின் வரிகளை வடிவூட்டல் செய்வதற்கு

பயன்படுத்தப்படுகின்றன. சில குறிஒட்டுகள்(Tags)படங்கள், அட்டவணைகள்,

மற்றும் படிவங்களைச் சேர்ப்பதற்கும், இணைப்புகளை உருவாக்குவதற்கும்

பயன்படுகின்றன.

ஆவணத்தின் இறுதியிலுள்ள என்னும் முடிவுக் குறி ஒட்டு HTML ஆவணம் முடிவடைகிறது என்பதைக் குறிக்கிறது.

ஒரு HTML ஆவணத்தின் அடிப்படை கட்டமைப்பு கீழ்க்கண்டவாறு இருக்கும்.

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

இந்த HTML ஆவணத்தை இரண்டு பகுதிகளாப் பிரிக்கலாம். ஒன்று Header

Section, இரண்டு Body Section.. இவற்றிற்கான விளக்கங்கள் மேலே குறிப்பிட்டுள்ளேன்.

... Shift+R improves the quality of this image. Shift+A improves the quality of all images on this page.

இனி HTML ல் உள்ள ஒவ்வொரு உறுப்புகளைப் பற்றியும், அதன்

முக்கியத்துவங்களைப் பற்றியும், அது எதற்காக பயன்படுத்தப்படுகிறது

என்பதைப் பற்றியும் காண்போம்.

நன்றி நண்பர்களே...!!

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

பல்சுவை தகவல்கள் - Thagavalgal in Tamil

செவ்வாய், 30 டிசம்பர், 2014

HTML Tutorials 14-Body tag-ல் சிறப்புப் பண்பு bgcolor

HTML Tutorials 13-BR (Break) tag

HTML Tutorials 12-CENTER tag

HTML Tutorials 11-Paragraph Tag-ல் அலைன்மெண்ட்

செவ்வாய், 16 டிசம்பர், 2014

HTML Tutorial -10-பத்திக் குறி ஒட்டு( Paragraph Tag)

HTML Tutorial 9-HTML ஆவணத்தை வடிவூட்ட(formation)

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

HTML Tutorial 8-ஒரு HTML கோப்பு

HTML Tutorial 7-HTML கட்டமைப்பு (HTML Structure)

Popular Posts

Facebook

Blog Archive