آموزش برنامه نويسي سي شارپ: آشنايي با تگ ها

آموزش برنامه نويسي سي شارپ: آشنايي با تگ ها

جلسه دوم (قسمت دوم): آشنايي با تگ ها در HTML

 

آموزش طراحي وبسايت

 

آشنايي با تگ <img> :

با استفاده از اين تگ ميتوانيم يک عکس به صفحه خود اضافه کنيم.

ابتدا میتوانیم با استفاده از تگ <h1> یک عنوان برای صفحه HTML انتخاب کنیم. عنوانی مانند HTML Image

 

<html>
<head>
<title> </title>
</head>
<body>

<h1> HTML Image </h1>>

</body>

 

سپس، با استفاده از تگ  <p> يا پاراگراف، يک متن به صفحه HTML اضافه کنيم. همانند زير:

 

 

 

<html>
<head>
<title> </title>
</head>
<body>

<p> Welcom To FarKianTech Website </p>>

</body>

تگ p يا پاراگراف

 

سپس بر روی عکس زیر راست کلیک کنید و گزینه Save image را بزنید تا عکس برای شما دانلود شود.

 

Farkiantech
Farkiantech

 

اکنون میخواهیم با استفاده از تگ <img> ، یک عکس به صفحه HTML اضافه کنیم. زمانی که شما تگ <img> را ایجاد میکنید، برنامه به طور پیشفرض، تگ <img>  همراه با عبارت “”src= ایجاد میشود. همانند زیر:

 

تگ img
همانطور که ملاحظه ميکنيد، من در زماني که تگ img را ايجاد ميکنم، بلافاصله، برنامه بطور پیش فرض تگ را به من معرفی میکند. بر روی کادر خاکستری رنگ کلیک کنید تا تگ ایجاد شود. البته میتوانید برای کامل شدن تگ، بر روی کلید Tab کلیک کنید.

 

پس از آنکه این تگ را ایجاد کردید، مشاهده میکنید که درون تگ یک عبارت به نام ” ” src= ایجاد شده است. همانند زیر:

 

تگ img

 

 

 

<html>
<head>
<title> </title>
</head>
<body>

<h1> HTML Image </h1>>

<p> Welcom To FarKianTech Website </p>>

<img src=” “>

</body>

 

در عبارت src میتوانید نام عکسی را که میخواهید نمایش بدهید بنویسید. از حافظه سیستم خود یک تصویر یا image انتخاب کنید. میتوانید از لوگو سایت فرکیان تک در بالا تر دانلود کردید استفاده کنید. سپس نام تصویر را در نظر بگیرید و آن را کپی کنید. به صفحه کدنویسی برگردید و نام تصویری که از حافظه سیستم خود کپی کردید، در بین دو کاراکتر مربوط به عبارت ” “src= کپی کنید.

توجه کنید که نام تصویری را  که کپی میکنید حتما باید با نوع فرمت آن کپی کنید. همانند زیر:

 

ايجاد تصوير

 

<html>
<head>
<title> </title>
</head>
<body>

<h1> HTML Image </h1>>

<p> Welcom To FarKianTech Website </p>>

<img src=”Farkiantech-1.png”>

</body>

اکنون ميتوانيم با استفاده از عبارت width (ارتفاع) و (height) ميتوانيم اندازه تصوير را مشخص کنيم. براي مثال ارتفاع يا Widht را ۵۰۰ و عرض را ۶۰۰ در نظر ميگيريم. همانند زير:

 

اکنون در قسمت بالا بر روي گزينه File کلیک کنید. سپس گزینه Save as را کلیک کنید تا یک فایل HTML برای شما ساخته شود.

 

مشاهده Source Code (کد منبع) :

برای مشاهده کد های منبع یا Source Code میتوانید بر روی صفحه HTML راست کلیک کنید و گزینه View page Sursce کلیک کنید. با این کار، یک پنجره برای شما باز میشود که حاوی Surceo Code میباشد.

 

گزینه View page Source

 

Sursce Code
صفحه HTML Source Code

 

با ما همراه باشید.

محمد امین مکارم

مطالب مرتبط

نقد و بررسی‌ها

نظر: