طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
عنصر blockquote:
اين تگ ، يک تگ container (که در جلسات قبل توضيح داده شده) است و طبق گفته کتاب اين تگ براي نمايش يک گفته شخصي استفاده مي شود.
ولي در کتاب هاي ديگر به تگ هاي Quotes اشارات متنوعي شده است. Quotes به معني نشان يا نقل قول است و کلا" اين تگها براي جلب توجه بيشتر استفاده مي شود در واقع يک شهادت ويا سفارش و يا کامنت است.
تگ هاي Quotesبه 3 بخش زير تقسيم مي شود :
1. <blockqoute>< /blockqoute>
2. <q>< /q>
3. <cite>< /cite>
q :
اين تگ ، يک تگ container و inline است و براي نقل و قول براي يک يا دو کلمه استفاده مي شود.
يادآوري : تگ هاي block کل سطر را مي پوشاند و تگ هاي inline تنها دور عنصر را مي گيرند .
<p>
I'm said <q>font</q>but my friend said <q> font face </q>
</p>
cite :
اين تگ ، يک تگ container و inline است و براي نام نويسنده و يا نويسنده کامنت استفاده مي شود
<p>
but then <cite> ali</cite>said <q> no think these font work betfer </q>
<p>
blockquote :
اين تگ ، يک تگ container و block است و براي اشاره به مقاله قبلي يا اشاره به يک مرجع خاص معمولا براي يک جمله استفاده مي شود.
تگ هاي strong و em :
اين تگ ها ، تگ هاي container و inline هستند و براي برجسته سازي و اهميت کلمات استفاده مي شوند. و اما در ظاهر ، تگ strong کلمه را bold و تگem کلمه را italic مي کند.
اين نکته را اضافه کنم که اين تگ ها براي موتورهاي جستجو از اهميت خاصي برخوردار است .
<p>
this is a <strong>bold text</strong> this is a <em>italic text</em>
</p>
خط فاصله بين متون p :
فرض کنيد مي خواهيم در يک پاراگراف به خط جديدي برويم . براي اين کار از تگ <br /> استفاده مي کنيم.
اين تگ ، يک تگ empty است و در ساختار xhtml به صورت <br /> نوشته مي شود .
نکته مهم : از br اضافي پرهيز کنيد
<p>
this is a test
<br />
this line show after break
</p>
تعريف تگ هاي خاص:
اين قسمت از آموزش در کتاب نيست ولي با توجه به تجربه شخصي بنده در طراحي وب سايت هاي مختلف( چند نمونه کار هاي طراحي سايت يک طراح وب سايت را چک کنيد) ، ترجيح مي دهم اين تگ ها در اين قسمت بيان شود . اين قسمت نيز شامل تگ هايي است که کمتر استفاده مي شود ولي ميتوانند کاربردي باشند :
<abbr>
براي توصيف يک عبارت اختصار به کار مي رود
<p>
The<abbr titile="search engine optimization">seo</abbr> is good for your site
<p>
<acronym>
براي توصيف نامها ي محاوره اي اختصار
<p>
Can I get this <acronym title="as soon as possible">AsAp </acronym>
<p>
<address>
براي نوشتن اطلاعات تماس
<address>
Behzad alibeigi
<br/>
<a href =contact.. >email</a><br/>
Phone :...
</address>
<dfn>
براي معناي کلمات استفاده مي شود و يا توصيف يک کلمه و يا مثلا جايي که مي خواهيم اطلاعات بيشتري در اختيار کاربر قرار دهيم .
<p>
The <dfn title="microsaft web browser">Inteet explorer </dfn> is the most popular browser used undermater.
<p>
همانطوري که از مثال هاي بالا مشخص است اين 4 تگ container و inline هستند.
براي ديدن يک مثال ديگر بهتر است به وب سايت وبسکالا برويم و سورس آن را ببينيم :
design-web-50.jpg
در اين مثال مي توانيد نحوه ي استفاده از اين تگ ها را در عمل ببينيد.
تگ هاي ناشناخته تري هم وجود دارند مانند kdb , samp , var که بهتراست در اينترنت کمي راجع به آنها تحقيق کنيد و اگر سوالي در اين مورد داشتيد با من مطرح کنيد .
فصل سوم
Adding some style
همان طوري که قبلا اشاره کرديم لايه دوم وب ، لايه ظاهر آن است که با CSS اعمال مي شود.
در گذشته براي اضافه کردن ظاهر به سايت از ترکيب دستورات CSS وHtml استفاده مي شد ولي امروزه براي اين کار مي بايست فقط از css استفاده کرد تا وب سايتي استاندارد داشته باشيم.
CSS يا همان (Cascading style sheets) زباني است که براي تغيير ظاهر عناصر صفحات استفاده مي شود. که مي تواند شامل رنگ ، سايز ويا موقعيت عناصر باشد .
براي اعمال css 3 روش وجود دارد:
• Inline
• Embedded
• Exteal
: inline
در اين روش از خصوصيت style داخل تگ هاي html استفاده مي کنيم بدين صورت :
<p style="color:Red;font-weight: bold;">
this is a test
</p>
خصوصيت style مي تواند شامل چندين اعلان باشد . اعلان ها با ; از اعلان کناري جدا مي شود. به مثال بالا دقت کنيد : اعلان رنگ و نوع فونت با ; از هم جدا شده اند
هر اعلان شامل يک property و يک value است .
design-web-51.jpg
عنصر span :
يک تگ inline است و تگ جادويي دوم بعد از div براي من به حساب مي آيد span موارد استفاده زيادي دارد که يک نمونه از آن که مربوط به همين بحث inline style است در مثال زير آورده شده است:
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: sahar