வணக்கம் நண்பர்களே... இன்றைய பதிவில் HTML கற்போமின் பதிவில் CSS பற்றிப் பார்ப்போம்.
<p style="font-size:20px;">This is typed in size 20px</p>
இனிப் பார்க்கலாம் வாருங்கள் மேலே கொடுக்கப்பட்ட code ன் வருவிளைவை இங்கே பார்ப்போம்...
பார்த்திருப்பீர்கள்... மேலே உள்ள எழுத்தானது 2௦px ல் எழுதப்பட்ட எழுத்தாகும்.
This is typed in size 20px
பார்த்திருப்பீர்கள்... மேலே உள்ள எழுத்தானது 2௦px ல் எழுதப்பட்ட எழுத்தாகும்.
<p style="font-family:courier;">This is typed in Courier</p>
இங்கே font family என்பது குறிப்பது எழுத்தின் எந்த வடிவம் என... அதாவது MS Word ல் நீங்கள் பாவிக்கும் font styles ஆகும்...
உதாரணமாக : Times New Roman , courier
சரி இப்போது மேலே தரப்பட்ட code ற்கான வருவிளைவைப் பார்ப்போம்..
This is typed in Courier
எப்படிப் பார்த்தீர்களா....
<p style="font-size:20px; font-family:courier;">This is typed in Courier size 20px</p>
மேலே, நீங்கள் பார்த்த 2 code களையும் கலந்ததாக அமைந்த code தான் இங்கே தரப்பட்டுள்ளது.. இதைப் பற்றி மேலும் கூறத்தேவை இல்லை என நினைக்கிறேன்.
நேரடியாக வருவிளைவைப் பார்ப்போம்..
This is typed in Courier size 20px
எப்படி பார்த்தீர்களா...??
இப்போது நாம் பார்க்கப்போவது சற்று வித்தியாசமான coding...
<html>
<head>
<title>My first CSS page</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>My first CSS page</h1>
<h2>Welcome to my first CSS page</h2>
<p>Here you can see how CSS works </p>
</body>
</html>
சரி இப்போது நாம் நோக்கும் போது...
அடுத்ததாகப் பார்த்தால் <style type="text/css"> tag என்பது CSS code பற்றியதாகும்..
அங்கே குறிப்பிடப்பட்ட h1 , h2 போன்றவை தலைப்புக்கு குறிக்கும் tag ஆகும்.
மேலும் <body> tag இனுள் பாருங்கள்..
<h1> , <h2> போன்ற tag கலைப் பயன்படுத்தி அதில் எழுத்துகளைக் எழுதப்பட்டுள்ளது.
அதாவது நீங்கள் தொடக்கத்தில் பார்த்த tag களைப் போல HTML code ஐ தொடராகக் குறிப்பிடாமல் <body> என்ற tag ற்குக் கீழ் நீங்கள் விரும்பிய எழுத்துகளை எழுதி அது எப்படி எழுத்து வகையில் அமைய வேண்டும் என <head> என்ற tag இனுள் போடுவது சுலபம் என்பதால் அப்படிப் போடப்பட்டுள்ளது..
நீங்களும் ஒரு முறை சரியாக try செய்து பாருங்கள்... ஏதாவது பிரச்சினைகள் என்றால் கீழே comment செய்யுங்கள்...
நன்றி
பரதன்
பேஸ்புக்கில் என்னுடன் நீங்கள் இணைய...
விளக்கம் அருமை... தொடர்கிறேன்... நன்றிகள் பல...
பதிலளிநீக்குவாழ்த்துக்கள்...
உங்கள் கருத்துக்கு மிக்க நன்றி... :)
நீக்குமிகவும் நன்றாகவே புரிகிறது, நன்றி !!!
பதிலளிநீக்குஉங்கள் கருத்துக்கு மிக்க நன்றி...
நீக்கு