Archive for നവംബര്‍ 2015

HTML Documents –പാഠം-5

നവംബര്‍ 26, 2015

HTML Bold and Strong Formatting

HTML ൽ ടെക്സ്റ്റ് കളുടെ Bold and Strong Formatting ‌എങ്ങനെ എന്ന് നോക്കാം. ഉദാഹരണത്തിന്ക്ഷരങ്ങൾ സാധാരണമായിട്ടുള്ളതെങ്കിൽ <p>  എന്ന ‌tag കൊടുത്താൽ മതി എന്ന് നമ്മൾ  മുകളിലെ പാഠഭാഗത്തി പഠിച്ചിരുന്നു. ഇനീ ബോൾഡായിട്ട്ക്ഷരം വേണമെങ്കിൽ <p><b> content </b><p> എന്നെഴുതി html close ചെയ്യാവുന്നതാണ് ‌ഇതേപോലെ strong Txt നും Italic and Emphasized  നും നമുക്ക് താഴെ പറയുന്ന രീതിയിൽ ‌എഴുതാവുന്നതാണ്.

Strong : <p><strong> content </strong></p>

Italic : <p><i> content </i></p>

Emphasized : <p><em> content </em></p>

ഒരു ഹെഡ്ഡിംഗിലെ ‌ഒന്നോ ഒന്നിൽ കൂടുതൽ ‌വാക്കുകളോ ചെറുതായി അല്ലെങ്കിൽ ‌വലുപ്പം കുറച്ച് കാണിക്കണമെങ്കിൽ ‌അതിന് HTML small Formating ‌ൽ ചെയ്യാവുന്നതാണ്

<h2> Big content <small>small Content</small>Big content</h2>

ഇതുപോലെ  ഹൈലൈറ്റ് ചെയ്യാനും ടെക്സ്റ്റ് ഡിലീറ്റ് ഷോ ചെയ്യുവാനും നമുക്ക് html document ഇൽ കഴിയും. താഴെ തന്നിരിക്കുന്ന ഉദാഹരണം നോക്കുക.

<h2>content <mark>Marked content</mark> content</h2>

<p>Content  <del>deleted content</del> content.</p> ഇത്  html document ആക്കുമ്പോൾ

Content deleted content  content.   ഇതായിരിക്കും റിസൽട്ട് വരുക. ഇതേപോലെ ഇൻസെർട്ടഡ്‌  എലമെന്റിനേയും  എഴുതാവുന്നതാണ് താഴെ തന്നിരിക്കുന്ന ഉദാഹരണം നോക്കുക

<!DOCTYPE html>

<html>

<body>

 

<p>The ins element represent inserted (added) text.</p>

 

<p>My favorite <ins>color</ins> is red.</p>

 

</body>

</html>

ഇതിന്റെ output ഇങ്ങനെ ആയിരിക്കും

The ins element represent inserted (added) text.

content color is red.

Subscript Formatting  & Superscript Formatting

<p>content <sub>subscripted content</sub> text.</p>—— content subscripted content text.

<p>content <sup>superscripted content</sup> text.</p>—-content superscripted content text.

ഇതിന്റെ output ഇങ്ങനെ ആയിരിക്കും കാണാൻ കഴിയുക.

 

 

 

 

 

 

 

 

 

 

 

 

HTML Documents –പാഠം-4

നവംബര്‍ 26, 2015

The lang Attribute

<html> tag. ൽ ഏത് ഭാഷയിൽ ആണ് എന്ന് പ്രസ്ഥാവിച്ചിട്ടുണ്ടായിരിക്കും. അത് ‌സൂചിപ്പിക്കുന്നത്  lang attribute.ൽ‌ ആയിരിക്കും. ഏത് ഭാഷയിലാണ് ആ ഡോക്കുമെന്റ് എന്നത് വായനക്കാരനും, സെർച്ച് എഞ്ചിനുകൾക്കും വളരെ അത്യാവശ്യമാണ്. ഇനീ ഇതെങ്ങനെയാണ് ‌ഡ്രാഫ്റ്റ് ചെയ്യുന്നത് എന്ന് നോക്കാം.

<!DOCTYPE html>
<html lang=”en-US”>
<body>

<h1>തലക്കെട്ട്</h1>
<p>ഖണ്ഡിക.</p>

</body>
</html>

ഇതിൽ  <html lang=”en-US”> എന്നിടത്താണ്  ഭാഷയെ ‌പ്രതിപാദിക്കുന്നത് ‌ആദ്യത്തെ രണ്ടക്ഷരം (en) ഭാഷയെ പ്രതിനിധികരിക്കുന്നു(us) എന്നത് ഗ്രാമ്യഭാഷയേയും അല്ലെങ്കിൽ ദേശഭാഷയേയും (അമേരിക്കൻ ഇംഗ്ലീഷ്) . അതുപോലെ തന്നെ ഫോണ്ട് കളും നമുക്ക് നിർവ്വചിക്കാൻങ്കഴിയും താഴെ തന്നിരിക്കുന്ന ഡ്രാഫറ്റ് ശ്രദ്ധിക്കുക

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”font-family:AnjaliOldLipi”>തലക്കെട്ട്</h1>

<p style=”font-family:Kartika”>ഖണ്ഡിക.</p>

</body>

</html>

റിസൽട്ടിങ്ങനെ ആയിരിക്കും

തലക്കെട്ട്

ഖണ്ഡിക.

ഇതുപോലെ ടെക്സ്റ്റ് അലൈന്റ്മെന്റും ചെയ്യാവുന്നതാണ്. ഉദാഹരണത്തിന് ‌താഴെ തന്നിരിക്കുന്ന ഡ്രാഫ്റ്റ് ശ്രദ്ധിക്കുക

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”text-align:center”>തലക്കെട്ട് മധ്യത്തിൽ</h1>

<p>ഖണ്ഡിക.</p>

 

</body>

</html>

ഇതിന്റെ റിസൽട്ടിങ്ങനെ ആയിരിക്കും

                   തലക്കെട്ട് മധ്യത്തിൽ

ഖണ്ഡിക.

ആരും ഇഷ്ടപ്പെടുന്ന ഒന്നാണല്ലോ നിറം. ഒരു വെബ്സൈറ്റ്  എത്രത്തോളം കളർഫുൾ ആണോ അത്രത്തോളം ‌അത് ആകർഷണീയവുമായിരിക്കും. എങ്ങനെയാണ് കണ്ടെന്റുകൾക്ക് നിറംമ്പകരുന്നത് ‌എന്ന് നോക്കാം

HTML Styles

<!DOCTYPE html>

<html>

<body>

 

<h2 style=”color:red”>ഇത് നോക്കുക</h2>

<h2 style=”color:blue”>ഇവിടെ</h2>

</body>

</html>

മുകളിലുള്ള  ഡ്രാഫ്റ്റ് html ഡോക്കുമെന്റായി  കൺവേർട്ട് ചെയ്യുമ്പോൾ  “ഇത് നോക്കുക” എന്നത് Red Colour ലും  “ഇവിടെ” എന്നത് Blue colour ലും ‌ആയിരിക്കും കാണുക. ഇതുതന്നെ പാരഗ്രാഫിന്റെ കാര്യത്തിലും ഹെഡ്ഡിംഗിന്റെ കാര്യത്തിലും നമുക്ക്  ഉപയോഗിക്കാവുന്നതാണ്. പരീക്ഷിച്ചുനോക്കുക. അതുപോലെ തന്നെ  പാരഗ്രാഫിന്റെ യും ഹെഡ്ഡിംഗിന്റേ യും ഫോണ്ട്കളുടെ വലുപ്പം ‌നമുക്ക് ഡോക്കുമന്റിൽ ഡിസ്ക്രൈബ് ചെയ്യാവുന്നതാണ്. താഴെ തന്നിരിക്കുന്ന ഉദാഹരണം നോക്കുക

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”font-size:300%”>തലക്കെട്ട്</h1>

<p style=”font-size:160%”>ഖണ്ഡിക.</p>

 

</body>

</html>

ഇതിന്റെ റിസൽട്ട്

തലക്കെട്ട്

ഖണ്ഡിക.

എന്നിങ്ങനെ കാണാൻ‌കഴിയും.

HTML Documents –പാഠം-3

നവംബര്‍ 26, 2015

HTML Links

HTML Link കൾ  <a> എന്ന ടാഗ് ഉപയോഗിച്ചാണ് ഡിഫൈൻ ചെയ്യുന്നത് ഉദാഹരണത്തിന് താഴെ തന്നിരിക്കുന്ന html draft  നോക്കുക. Link ന്റെ ഡെസ്റ്റിനേഷൻ ‌സ്പെസിഫൈ ചെയ്യുന്നത്  href attribute  ആണ്.

<!DOCTYPE html>

<html>

<body>

<a href=”http://www.vartthamaanam.wordpress.com”>ഇതാണ് ലിങ്ക്</a>

</body>

</html>

Html ലേയ്ക്ക് കൺവേർട്ട് ചെയ്തപ്പോൾ ഉള്ള റിസൾട്ടാണ് താഴെ തന്നിരിക്കുന്നത്.

ഇതാണ് ലിങ്ക്

ഈ ലിങ്കിൽ  ക്ലിക്ക് ചെയ്താൽ ‌വർത്തമാനം എന്ന ബ്ലോഗിൽ‌ എത്താം ലിങ്ക് മാറുന്നതനുസരിച്ച് ‌നമുക്ക് ഡെസ്റ്റിനേഷനുംമ്മാറ്റാവുന്നതാണ്……

HTML Images

Html Image കൾ <img> എന്ന ടാഗ് ഉപയോഗിച്ചാണ് ഡിഫൈൻ ചെയ്യുന്നത് . source file നെ (src), ഉപയോഗിച്ചും alternative text (alt), ഉപയോഗിച്ചും  size നെ (width and height) ഉപയോഗിച്ചും attributes ആയി കൊടുക്കുന്നു. ഉദാഹരണത്തിന് താഴെ തന്നിരിക്കുന്ന html draft  നോക്കുക

<!DOCTYPE html>

<html>

<body>

<img src=”123.jpg” alt=”123.com” width=”104″ height=”142″>

</body>

</html>

ഇതിനെകുറിച്ചുള്ള കൂടുതൽ കാര്യങ്ങൾ വരുന്ന ഭാഗങ്ങളിൽ പ്രതിപാദിക്കുന്നതാണ്.

HTML Elements

എന്താണ്  HTML Elements , html ഡോക്കുമെന്റുകൾ എല്ലാം നിർമ്മിച്ചിരിക്കുന്നത് HTML Elements മുഖാന്തിരമാണ്. HTML Elements എഴുതുന്നത് ഒരു സ്റ്റാർട്ട് ടഗും ഒരു എൻഡ് ടാഗും ഉപയോഗിച്ചാണ്. ഇതിന്റെ  മധ്യത്തിൽ ആണ് കണ്ടന്റ്  നമ്മൾ എഴുതി ചേർക്കുന്നത്  <tagname>content</tagname> ഇതാണ് ‌ആഫോം ‌ഈ രീതിയിലൂടെ ആണ് നമ്മൾ മുകളിൽ പ്രതിപാദിച്ച  ഡോക്കുമെന്റുകൾ ‌ഉണ്ടാക്കിയത്.

Start tag Element content End tag
<h1> തലക്കെട്ട് </h1>
<p> ഖണ്ഡിക </p>

 

 

 

HTML Documents –പാഠം-2

നവംബര്‍ 21, 2015

ഡബ്ല്യൂ3സ്കൂൾസ്‌ എന്ന സൈറ്റിൽ നിന്നും ഞാൻ പഠിച്ചവ മാത്രമാണിവിടെ പറയുന്നത്  പഠിക്കാൻ ആഗ്രഹമുള്ളവർക്ക് ‌ഉപകരിക്കുമെങ്കിൽ ഉപകരിക്കട്ടെ  അത്രമാത്രം…… എന്റെ നോട്ട് ബുക്ക്.

HTML Headings :-

HTML Headings നെ നിർവ്വചിക്കുന്നത് <h1> മുതൽ  <h6>‌വരെയുള്ള tag ഉപയോഗിച്ചാണ് ഉദാഹരണത്തിന്

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

ഇതിൽ <h1> എന്ന tag ൽ നമുക്ക് സാമാന്യം വലിയ തലക്കെട്ട് (Heading) കിട്ടും മുകളിലെ ഡ്രാഫ്റ്റ് html ആക്കിയപ്പോൾകിട്ടി output  ആണ് താഴെ തന്നിരിക്കുന്നത്

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

<h..> ന്റെ വാല്യു കൂടുന്നതനുസരിച്ച്  ലെറ്ററിന്റെ വലുപ്പം കുറയും സാഹചര്യത്തിന്റെ അടിസ്ഥാനത്തിൽ നമുക്കിത്ുപയോഗിക്കാവുന്നതാണ്.

HTML Paragraphs

ആവശ്യമുള്ള പാരഗ്രാഫുകൾ നമുക്ക് നിർമ്മിക്കാവുന്നതാണ് ഉദാഹരണത്തിന് ‌താഴെ തന്നിരിക്കുന്ന  html draft നോക്കുക ഇത് html ലേയ്ക്ക് കൺവേർട്ട് ചെയ്യുക.

!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

 

</body>

</html>

Html.ലേയ്ക്ക് കൺവേർട്ട് ചെയ്തപ്പോൾ ഉള്ള റിസൾട്ടാണ് താഴെ തന്നിരിക്കുന്നത്.

This is a paragraph.

This is a paragraph.

This is a paragraph.

ഇത് നമ്മുടെ ആവശ്യത്തിനനുസരിച്ച്  ഉപയോഗിക്കാവുന്നതാണ്……

HTML Documents –പാഠം-1

നവംബര്‍ 19, 2015

ഡബ്ല്യൂ3സ്കൂൾസ്‌ എന്ന സൈറ്റിൽ നിന്നും ഞാൻ പഠിച്ചവ മാത്രമാണിവിടെ പറയുന്നത്  പഠിക്കാൻ ആഗ്രഹമുള്ളവർക്ക് ‌ഉപകരിക്കുമെങ്കിൽ ഉപകരിക്കട്ടെ  അത്രമാത്രം…… എന്റെ നോട്ട് ബുക്ക്.

HTML  file  എങ്ങനെ ഉണ്ടാക്കാം എന്ന് നോക്കാം . ആദ്യം  Notepad  എന്ന ആപ്ലിക്കേഷൻ  open  ചെയ്യുക. അതിൽ സിമ്പിൾ ആയ ഒരു HTML ടൈപ്പ് ചെയ്യുക ഉദാഹരണത്തിന്

<!DOCTYPE html>
<html>
<body>

<h1>തലക്കെട്ട്</h1>

<p>ആദ്യത്തെ ഖണ്ഡിക.</p>

</body>
</html>

ഇതിൽ ഡോക്കുമെന്റ് ടൈപ്പ്  <!DOCTYPE html> എന്ന് നമ്മൾ ടൈപ്പ് ചെയ്തു ഇനീ  ഇതിൽ ഡോക്കുമെന്റ് ഓപ്പണിംഗ് ടാഗായ  <html> ടൈപ്പ് ചെയ്യുന്നു ഈ ഡോക്കുമെന്റ് അവസാനിക്കുമ്പോൾ ക്ലോസിംഗ് ടാഗ് ‌ആയ ടൈപ്പ്  </html> ‌ചെയ്യുന്നു. ഇതിനിടയിൽ ‌വരുന്ന ഭാഗമാണ് ‌ആഡോക്കുമെന്റിന്റെ  ബോഡി എന്ന് നിർവ്വചിക്കുന്നത് ഇതിനെ  <body> ഇങ്ങനെ ആണ് സൂചിപ്പിക്കുന്നത്. Body യ്ക്ക് ഉള്ളിൽ‌ വരുന്ന  ഭാഗങ്ങൾ Heading, paragraph തുടങ്ങിയവ അത് അവസരങ്ങളനുസരിച്ച്  മാറിവരുന്നു ഇനി‌ ഇതിൽ ശ്രദ്ധിക്കേണ്ട കാര്യം

  • Heading opening tag  <h1> ഉം  closing tag </h1> ഉം ആണ്   ഈ  tag  കൾക്കിടയിലാണ്  Heading   വരുന്നത്
  • Paragraph opening tag <p> ഉം  closing tag </p> ഉം ആണ്   ഈ  tag  കൾക്കിടയിലാണ്  Paragraph   വരുന്നത്

ഇത്രയും കഴിഞ്ഞാൽ ‌ഈ  HTML Document close  ചെയ്യാവുന്നതാണ് ‌അതിന്  body close ചെയ്യണം / ഉപയോഗിച്ചാണ് tag കൾ close ചെയ്യുന്നത് </body> .

ഇനീ ഈ notepad file നെ (file name).html എന്ന extension  ഇൽ സേവ് ചെയ്യണം ‌അപ്പോൾ നമ്മുടെ ഈ  notepad file ഒരു html Document ആയി രൂപാന്തരപ്പെടും ഇതിനെ ഏതെങ്കിലും internet browser ഇൽ നമുക്ക് ഓപ്പെൺ ചെയ്യാവുന്നതാണ്