آموزش html  – قسمت چهاردهم

    ما در قسمت های قبلی با معرفی المان های اصلی html  نحوه ساخت یک صفحه  اچ تی ام الی به صورت پایه را کار کردیم و یاد گرفتیم که چگونه می توان با تگ ها یک صفحه html  را پایه گذاری کرد.
    در این قسمت و چند قسمت آتی سعی داریم با معرفی دیگر المان های html  نحوه زیبا سازی صفحات برای تعامل بهتر با کاربر
    (user interface)  کار را پیش ببریم.

    در گذشته تمام این کار ها(زیبا سازی صفحات) در خود صفحات html  انجام می شد، اما امروزه توسط زبان css  این بار کمی از روی html  کاسته شده است.

    در این آموزش به شما خواهیم گفت که چگونه شما میتوانید المان ها و صفت هایی خود را برای تغییر انتخاب کنید و صفت ها و ابزار آن و نحوه کار با آنها را به شما معرفی خواهیم کرد ، پس با درسمن همراه باشید …

     

    Css  در کجا نوشته می شود؟

    دسته اول – css  های خطی : به این معنی که ما کد های سی اس اس را به صورت مستقیم داخل تگ ها بنویسیم.

    دسته اول – css  های داخلی : به این معنی که دستورات سی اس اس ها داخل تگ هد قرار بگیرند.

    دسته اول – css  های پانچ : به این معنی  که کد های سی اس اس را در فایل های جداگانه قرار دهیم.

     

    css  های خطی :   برای قرار دادن کد های css  داخل صفحات به صورت خطی و مستقیم ما باید از برچسب  style داخل همان تگ به صورت زیر استفاده کنیم:

    <div style = “color : red; width:500px;”> hi </div>

    • در این قسمت به صورت مفصل جزئیات این اسایل ها و نحوه کار با رنگ ها را به شما معرفی کرده ایم.

     

    css  های داخلی : در این نوع استایل دهی به زبان css  باید تگ style  را در داخل تگ head  و زیر تایتل صفحه به صورت زیر استفاده میکنیم :

                                                < head >

                                                                                          < title >

                              < /title>

                  < style >

                                }   .div

                 ;   color : red

               ;     width:500px

                                    {

                  < / style>

           < /head>

     

    در این قطعه کد استاید نوشته شده برای تمامی تگ های div  اعمال خواهد شد و کافی اسست که ما فقط از تگ div  در صفحه خود استفاده کنیم و مشاهده میکنیم که نتیجه هر دو قطعه کد نوع اول و نوع دوم یکسان خواهد بود.

     

     

     

    در جلسه بعد نوع سوم استیل دهی که کامل ترین نوع آن است را به صورت مفصل کار خواهیم کرد و با آن آشنا خواهیم شد.
    با درسمن همراه باشید


    برای مشاهده دوره رایگان HTML، باید در درسمن عضو باشید.

    اگر هنوز عضو درسمن نیستید، از طریق لینک زیر اقدام نمایید.

    ثبت‌نام در درسمن


    مشاهده دوره برای اعضا درسمن

     

    در ادامه اموزش های html  در این قسمت قصد داریم کمی با تگ های داخل head  آشنا بشیم.
    تا به این جای کار ما با تگ های داخل بدنه (body) به خوبی آشنا شده ایم و در قسمت های آتی دوباره به صورت پیشرفته دیگر برچسب های این قسمت را مورد بررسی قرار خواهیم داد.

    نکته : تگ های داخل header  مستقیما به کاربر نماییش داده نمی شوند.

    ما برای اینکه بتوانیم زبان مورد استفاده در صفحات html  خود را به موتور های جست و جو و مرورگر های خود معرفی کنیم ، از تگی به نام lang  به صورت زیر استفاده میکنیم:

    <html  lang = “fa-IR” >

    به طور مثال در قطعه کد بالا ما با قرار دادن تگ lang   با مقدار fa-IR در تگ html  به موتور های جست و جو گفته ایم که زبان مورد استفاده در این سایت زبان فارسی است.

    تگ بسیار مهم بعدی که در مباحث سئو بسیار مهم و حائز اهمیت است تگ های meta  هستند که در قطعه کد زیر با نمونه ای از این برچسب ها آشنا خواهید شد:

    <head>

    <meta charset = “utf-8”>

    <head>

    این متا نوع کد گزاری کلممات داخل صفحه را مشخص می کند.

    از دیگر تگ های متا که در سئو کاربرد فراوانی دارند:

    <head>

    <meta name = “utfdescription”  content = “**“>

    <head>

    ** محتوایی که میخواهید موتور های جست و جو به عنوان توضیحات صفحه شما به کاربران نممایش دهند.

     

    <head>

    <meta charset = “utf-8”>

    <head>

     

    <head>

    <meta  name = “Keyword” Content = “**”>

    <head>

    ** کلمه کلیدی که میخواهید با آن کلمه به موتور های جست و جو معرفی شوید.

     

    head>

    <meta  name = “author” Content = “mehdi moradi”>

    <head>

    یکی دیگر از المان های مهم برای گوگل در صفحات متنی نام نویسنده آن صفحه است که با این تک مشخص می شود.


    برای مشاهده دوره رایگان HTML، باید در درسمن عضو باشید.

    اگر هنوز عضو درسمن نیستید، از طریق لینک زیر اقدام نمایید.

    ثبت‌نام در درسمن


    مشاهده دوره برای اعضا درسمن

    در این قسمت با ادامه آموزش فرم ها کار را ادامه خواهیم داد.
    در این قسمت با دیگر صفت های مهم و کاربردی تگ فرم و هم چنین تگ های دیگری که در ارسال اطلاعات در تگ فرم کاربرد دارند آشنا خواهیم شد.
    یکی از تگ های قدیمی اما پر کاربرد مورد استفاده در فرم ها تگ <datalist>  است.

    تگ datalist  برای لیست کردن اطلاعات موجود در بانک داده ها در تگ input  به صورت زیر کار برد دارد :

    <datalist>

    <option value=”” / >

    <option value=”” / >

    </datalist />

    مقادار value  همان مقدار لیست ها خواهد بود.

    در این قسمت ما تگ فرم را به پایان خواهیم رساند و با صفت های  دیگری از تایپ ها اشنا خواهیم شد.

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


    در جلسه قبل موضوع فرم را با جزئیات کامل آن بررسی کردیم و به پایان رساندیم.

    در این جلسه قصد داریم به نحوه تعامل فرم ها با اکشن ها بپردازیم.ما برای ارسال اطلاعات صفحات html  توسط فرم به صفحات دیگر وب و یا کنترلر ها به صورت زیر عمل میکنیم :

    <form  action=”PageName” method = “post ”>

    </ form>

    هم چنین در این قسمت شما با تگ های دیگر اچ تی ام ال که در ظاهر فرم ها کارایی دارند آشنا خواهید شد.

    تگ هایی مثل :

    <fieldset> : از این تک برای قالب بندی کلی فرم استفاده می کنیم.

    <legend> : با تگ legend  می توانیم برای فیلدست فرم خود یک عنوان انتخاب کنیم.

    <legend />

    <fieldset />

    html- pic 11

    همچنین در این قسمت با یک صفت دیگر تگ <input>  به نام value  آشنا خواهیم شد.

     


    اولین بار سایت های اینترنتی با هدف و نیت متفاوتی ایجاد شدند؛ صنایع دفاع آمریکا برای انتقال اطلاعات در کشور سایتهای اینترنتی را ایجاد کرد، اطلاعات داده های ثابتی بودند که از یک مرکز به مرکز دیگر انتقال داده میشدند و در هر بار انتقال صفحه تولید می شد و دوباره در جواب انتقال داده می شد.

    اگر بخواهیم ساختار وب سایت های اینترنتی رو توضیح بدیم سایت هایی که شما در سراسر دنیا میبینید به دو دسته کلی تقسیم می شوند:

    سایت های ایستا و سایت های پویا

    تفاوت این دو در چه مواردی هست؟

    وب سایت ایستا وب سایتی است که یک طرفه است، در واقع سایتی ایستا است که مدیر سایت اطلاعات را روی سایت قرار می‌دهد و بازدیدکنندگان اطلاعات را می بینن و وقتی که نیاز باشه مدیر سایت محتوای سایت رو عوض می کنه.

    در واقع وب سایت ایستا یک رسانه یک طرفه است، یعنی همه چیز از سمت سرور به سمت کلاینت ها (کاربران استفاده کننده )است.

    اما سایت های پویا وب سایتهایی دو طرفه هستند، در سایت های پویا علاوه بر اینکه مدیر امکان ارسال اطلاعات به سمت کلاینت ها را دارد، کاربران می توانند اطلاعات خودشون رو روی سایت قرار بدهند.در واقع یک رسانه دو طرفه است که مدیر سایت و کاربران هردو می توانند اطلاعات ارسال کنند.

    هرچند موضوع فقط ارسال اطلاعات نیست،ما میتونیم اطلاعات را دریافت کنیم؛ نه تنها ما بلکه مدیر سایت هم میتونه اطلاعات خود را در سایت قرار داده و اطلاعات از سایت دریافت کنه.

    پس اولین چیزی که باید بدونیم این است که با چه سایت هایی سر و کار داریم.

    امروزه تقریباً وبسایت‌های تماما ایستا از بین رفته اند؛ این وب سایت ها بیشتر قدیم کاربرد داشتند، چیزی مثل وبلاگ که ما چیزی توش آپلود می کردیم بقیه دانلود می کردند.

    به این نکته هم توجه داشته باشید که به روز رسانی وب سایت‌های ایستا بسیار سخته، چون هر بار که بخواهیم اطلاعات سایت را تغییر بدیم باید سایت رو بیاریم پایین تغییرات رو انجام بدیم و دوباره آپلود کنیم، و این خودش زمان زیادی رو صرف می کنه.

    حالا شاید خیلی ها این سوال رو داشته باشند که من می خوام یه سایت ایستا داشته باشم، چه زبان هایی رو باید یاد بگیرم؟

     

    برای نوشتن یک وب سایت نیاز به یادگیری زبانهای سمت client داریم.

    مثل زبان html ،زبان css و java script .

    این نکته را یادتون باشه که java script کاملاً فرق میکنه یعنی دوتا زبان کاملا متفاوت اند و فقط اسمشون به هم شباهت داره.

    حالا چرا به این زبان ها زبان های سمت client گفته میشه؟

    چون شما هر سایتی یا هر صفحه ای رو با این زبانها بنویسید و اجرا کنید کدهایی که شما نوشتید توی خونه کاربر اجرا میشه؛ یعنی از cpu کاربر برای اجرا شدن استفاده می کنه. به زبان ساده تر اگر شما یک صفحه با زبان های سمتclient بنویسید و من روی کامپیوتر خود اجرا کنم می تونم کدهای که شما زدی رو ببینم وحتی کپی و استفاده کنم.

    یعنی مثلاً اگر شما به زبان html کدی بنویسید که دو عدد را جمع کنه، این صفحه از cpu خونه کاربر برای عملیات جمع استفاده می کنه.

    حالا این زبان ها خوب هستند یا بد؟

    از یک دیدگاه بد هست؛چون وقتی که من یک وب سایت به زبان html می نویسم وقتی که هر کسی سایت رو باز می کنه می تونه کدهای من رو ببینه و به راحتی ازش استفاده کنه.

    از دیدگاه دیگه میتونه خوب باشه وقتی ما داریم کدرو رو cpu خونه کاربر اجرا می‌کنیم سرعت به طور وحشتناکی بالا میره، چون اگه محاسبات روی cpu کاربر اجرا بشه خیلی بهتر از اینه که بخواهد اطلاعات رو به سمت سرور ارسال کنه و اونجا محاسبات رو انجام بده.

    پس یه جاهایی می تونه خیلی خوب باشه.

    برای داشتن سایت های پویا به چه زبان هایی نیاز داریم؟

    زبان های html css ، java script + یکی از زبان های سمت سرور مثل Asp.Net یا Php .

    این دو تا از زبان های مربوط به سمت سرور هستند و لازم نیست هر دوتاشون رو بلد باشید،یکی از این ها را بلد باشید کافیه.

    وقتی می گیم mvc، هم php و هم asp هردو mvc دارند.

    Mvc یک زبان برنامه نویسی نیست بلکه یک معماری و یک ساختار برنامه نویسی است که در همه زبانها وجود داره؛ javaو دلفی و حتی c++ هم mvc دارند.

    برای نوشتن یک سایت پویا علاوه بر این که به تمام زبان های سمت client نیاز داریم، به یکی از زبان های سمت سرور هم نیاز دارم.

    یعنی مثلا سایتی که شما طراحی میکنید رو روی کامپیوتر سمت سرور یعنی همون هاست می زارید، کاربر از خونشون درخواست میده که می خواد سایت شما را ببینه، شما به درخواست پاسخ می دید و کاربر کدهای html css و java script که شما نوشتید رو می تونه ببینه ولی php یا asp شمارو نمی تونه ببینه.

    سایت هایی که با php یا asp نوشته می شه منتظره تا کاربر درخواست ارسال کنه یعنی اطلاعات به سمت سرور ارسال بشه، محاسبات رو انجام بده و جواب رو برای کاربر ارسال کنه. اثری از اون php یا asp سمت client دیده نمیشه.

    موضوع بعدی که می خوام راجع بهش حرف بزنیم برنامه نویسی back end و front end است.

    احتمالا اکثرتون باید شنیده باشید، فرقشون چیه؟

    برنامه نویسان back end دارند پشت کار رو میزنند، یعنی سمت سرور را انجام می دهند، زیاد به ظاهر کار اهمیت نمی‌دهند.

    و برعکس ظاهر کار برایشان اهمیت دارد؛ این نوع برنامه نویسی front end هست.

    برای برنامه نویسی front end یاد گرفتن یکی از زبان های سمت سرور کافی است و لازم نیست همه ی زبان های سمت سرور رو بلد باشیم.

    به کسی که کار front end را انجام میده طراح وب گفته میشه.

    و کسی که کار back end را انجام میده برنامه نویس وب گفته میشه.

    چیزی که تا اینجا مسلم هست اینکه چه بخواهیم سایت پویا بنویسیم و بخواهیم سایت ایستا بنویسیم باید html css و javascript روبلد باشیم، حالا اینکه چقدر بلد باشیم بستگی به این داره که آیا واقعاً می‌خواهیدحرفه ای باشید یا فقط در حد نیازتون میخواهید بلد باشید.شما اگه بخوای برنامه نویسی asp هم بلد باشید باید تمام مفاهیم html و css رو بدونید. در واقع کسانی که back end کار می کنند علاوه بر این ها نیاز به طراحی هم دارند.

    حالا تک تک راجع به زبان ها توضیح بدیم که هرزبان چه ویژگی هایی داره؟

    برای تجسم بهتر یک ساختمان رو در نظر بگیرید؛ وقتی می خوام یک ساختمان ساخته بشه ابتدا زمین خریداری میشه و دیوار کشیده میشه و کم‌کم بالا میره، مثلا شش ماه ساخته میشه. وقتی کسی وارد ساختمان میشه می تونه تشخیص بده سرویس بهداشتی کجاست اتاق ها کجاست و سایر جاهای خونه،همه اینارو html می سازد.

    یعنی شما با html ساختار کلی صفحه تون رو طراحی میکنید.

    دقیقا مثل همین می مونه که ساختار کلی یک خونه مثل اتاقها، پذیرایی، سرویس بهداشتی طراحی شده ولی قطعا کسی نمیتونه توش زندگی کنه چون که نیاز به زیبایی و طراحی داره.

    کی این کار رو انجام میده ؟css

    اگر به ساختار html ، css رو اضافه کنیم کامل میشه، یعنی بحث طراحی و زیبایی هم به اون اضافه میشه مثل این که ساختار اولیه ساختمان را زیبا کنیم و قابل استفاده.

    در واقع بایدبدانیم که css زبانی است که به تنهایی به درد نمیخوره و فقط با html کامل میشه.

    شما هرچقدر کد css بنویسید قابل استفاده نیست باید بیاد به کد html اضافه شه تا قابل استفاده شه.

    همون خونه رو تصور کنید که ساختار کلی ساخته شده، طراحی شده، زیبا شده ولی حالا می خوام بیام زیباترش کنم مثلا درهارو ریموت دار کنم، مثلاً خونه رو هوشمند کنم.

    می دونید کی این کارو انجام میده؟ زبانjava script .

    java script روی سیستم قبلیمون اضافه می شه و پویایی و هوشمندی به ساختار ما میده.

    حالا من یک صفحه دارم که هم html css و هم java scriptداره، یعنی هم پایه و اساس ساخته شده و زیبا شده و هم هوشمند و پویا شده.

    اما تا به اینجا رسیدیم یک سایت داریم که باز هم یه طرفه است، یعنی مدیر سایت باید بیاد اطلاعاتش رو بذاره و کاربران اطلاعات رو ببینند و اگه یک موقع کاربر نیاز داشته باشه چیزی به سمت سرور بفرسته نمیتونه.مثلا نظر بده یا ایمیل بزنه، ثبت نام کنه، خرید کنه امکانش وجود نداره.

    خوب برای برطرف شدن این مشکل باید چی اضافه کنم؟ asp.Net

    خوب تا اینجا یک سایت ایستا + Asp.Net دارم که دیگه هم میتونه اطلاعات ارسال کنه و هم میتونه اطلاعات دریافت کنه.

    SEO ( بهینه سازی برای موتور های جستجو ):

    نکته دیگر این است که نحوه کد زنی html css تاثیر خیلی زیادی روی سئو وب سایت شما داره.

    اگه بخواهیم توضیح مختصری راجع به سئو داشته باشیم :

    بهینه سازی سایت برای موتورهای جستجو است

    چه عواملی روی سئو تاثیر گذارند؟

    فرض کنید طراحی سایت شما تموم میشه، اگه مواردی رو که مدنظر گوگل هست رعایت نکرده باشید گوگل می گه من دوست ندارم صفحه شما را مشاهده کنم.

    مثلابه شما میگه که باید بالای همه صفحات تون یک عنوان (تایتل) داشته باشید.

    به این میگن سئو سایت؛ یعنی سئو که برنامه نویس رعایت میکنه؛ مثلا میگه که کد اضافی ننویس فقط قسمت های که استفاده می کنی رو بنویس.

    بعد از اینکه سایت آپلود میشه اسمت رو به من بده یعنی خودت رو به گوگل معرفی کن.

    بعد از این گوگل شمارو انتهای لیست سایت ها قرار می ده و شما باید تلاش کنید تا خودتون رو به بالای لیست منتقل کنید.

    مهم ترین عاملی که می تونه جایگاه شما رو تغییر بده محتوای سایت است.

    در واقع سلطان سئو محتوای سایت است؛هرچقدر محتوای ارزشمند داشته باشیم رتبه ی سایت بالاتر میره.

    عامل دیگر آپدیت بودن سایت است؛ اگه سایت آپدیت نباشه گوگل اونو کنار میذاره.

    عامل دیگه بالا بودن بازدید است.

    جالب اینجاست که گوگل به ازای هرکاربر که از سایت بازدید میکنه یک خزنده به دنبالش میفرسته که اگه سایت کارامد نباشه اونو کنار بذاره.

     


    پستی که خواندید متن اولین قسمت از دوره رایگان HTML بود. توصیه می‌شود که ویدئو تدریس آن را در دوره مربوطه مشاهده نمایید.

    همان طور که در جلسه قبل گفتیم ، پایه و اساس صفحات وب و اصولا طراحی وب خارج از هر پلتفرمی در قسمت بک اند آن زبان طراحی html است.
    html  مخفف HyperText Markup Language یا همان زبان نشانه گزاری فرا متن است. Html  را می توان آسان ترین زبان در میان زبان های کامپیوتری دانست.
    در این قسمت به صورت گسترده با مفاهیم پایه ای این زبان مثل تگ ها(برچسب ها) آشنا خواهیم شد و نحوه کار کرد آنها در مرورگر ها را با هم مشاهده خواهیم کرد.

    ما برای شروع در ابتدای امر احتیاج به یک محیط ویرایشگر یا همان محیط برنامه نویسی داریم ، که در این پست با اشاره به بهترین ویرایشگر های html  با انتخاب بهترین آن کار را شروع خواهیم کرد.

    اولین برچسبی که ما در فایل html  از آن استفاده می کنیم <html> است. این تگ به مرورگر ها می فهماند که این فایل یک فایل  html است. این بر چسب یه برچسب دوتایی است و پایان آن با تگ  </html>  مشخص می شود که نشانه پایان صفحه html  ما است.

    با تگ <title> می توانیم عنوان صفحات خود را مشخص کنیم.

    در ادامه این قسمت با دیگر تگ های پایه ای مثل <head> , <body>  و… آشنا خواهید شد.

    با این قسمت از درسمن همراه ما باشید…


    پستی که خواندید متن قسمتی از دوره رایگان HTML بود. توصیه می‌شود که ویدئو تدریس آن را در دوره مربوطه مشاهده نمایید.

    مرور قسمت های قبلی؛

    تک <!DOCTYPE html> تگ Xml است که نوع سند ما را مشخص میکند که در اینجا html است. تگ بعدی تگ <html> است که قالب کلی قواعد html است. داخل این تگ، تگ <head> و تگ <body> وجود دارد که تگ body بدنه ی وب سایت را شامل میشود.
    معروف ترین تگ در قسمت تگ <head>، تگ <title> است که عنوان صفحه را شامل میشود.
    و همینطور از معروفترین تگ ها در بدنه سایت و تگ <body> حدا از تگ هایی که در جلسه ی قبل معرفی شد، تگ های زیر را به تگ های قبل اضافه میکنیم:

    تگ <strong> : این تگ از خانواده تگ <b> با کاربرد بولد کردن متن می باشد.
    تگ <small>: این تگ برای کوچک تر کردن از حالت عادی نوشته استفاده میشود.
    تگ <hr>: این تگ معادل تگ <br> است با این تفاوت که یک خط افقی در عرض صفحه ایجاد میکند.
    تگ <mark>: برای مارک کردن یا هایلایت کردن قسمتی از یک متن استفاده میشود.
    تگ <sub>: برای زیر نویسی و نوشتن کلماتی مانند H2O
    تگ <sup>: برای بالا نویسی و نوشتن کلماتی مانند x2
    تگ <p>: این تگ برای ایجاد پاراگراف استفاده میشود.
    تگ <Pre>: شبیه به تگ <p> است با این توفاوت که متن را دقیقا مشابه آنچه که نویسنده نوشته است، نمایش میدهد.
    تگ <hn>: این تگ ها مختص تیتر هستند که از ۱ تا ۶ به صورت <h1>  تا <h6> نوشته می شوند. هر چه عدد کمتر باشد، سایز تیتر بزرگتر نمایش داده خواهد شد.

    از Notepad++ به عنوان نرم افزار ویرایشگر متن برای html استفاده میکنیم. این نرم افزار تنها یک ویرایشگر متنی است نه یک کامپایلر یا مفسر. زبان های برنامه نویسی به دوسته ی مفسری یا کامپایلری تقسیم می شوند. زبان های کامپایلری مثل C++، C#، Delphi و … جزو دسته ی کامپایلری هستند به این معنا که این برای اجرای آن نیاز است که تمام خطوط کد بدون خطا باشند و ترجمه شوند، اگر مثلا خط ۹۹۹ ام از برنامه خطا یا ایرادی داشته باشد، کل برنامه اجرا نخواهد شد. دسته دوم از زبانهای برنامه نویسی زبانهای مفسری هستند مانند Javascript و Html که به وسیله ی بروزرها و مرورگرها اجرا (تفسیر) خواهند شد. نحوه ی اجرای این دسته از زبان ها بدین شکل است که به ترتیب هر خط کد ترجمه و اجرا میشود و بعد به خط بعدی نوبت خواهد رسید. اگر خط ۹۹۹ ام این برنامه دچار اشکال و خطا شده باشد، تنها همین خط اجرا نخواهد شد و باقی خطوط اجرا می شوند.


    پستی که خواندید متن قسمتی از دوره رایگان HTML بود. توصیه می‌شود که ویدئو تدریس آن را در دوره مربوطه مشاهده نمایید.

    در این قسمت روش ایجاد انواع لیست ها در html را آموزش می بینیم.

    برای ایجاد پیج جدید می‌توانیم از پیج قبلی که ایجاد کردیم استفاده کنیم، به این صورت که از پیج اول save as گرفته و در همان مسیر قبلی با نام page 2 ذخیره می کنیم.
    بعد از آن قسمت body  را پاک کرده و بقیه قسمت  ها هم که در همه پیچ ها ثابت است.

     

    آموزش html

    روش ایجاد لیست ها در html

    ۳ دسته لیست وجود دارد:

    1. لیست های علامت دار:

    این لیست با استفاده از تگ <ul>ساخته می شود.برای ساخت آیتم های لیست از تگ <li>استفاده می کنیم.

    به این نکته توجه کنید که  تگ <ul> و تگ <li> هردو تگ های بلند هستند و تگ <li>  بلاک است.

    ۲٫لیست های شماره دار:

    برای ایجاد تگ شماره دار کافی است به جای <ul> و از <ol>  استفاده کنیم و آیتم ها را قرار دهیم.

    علامت های لیست علامت دار و شماره های لیست های شماره دار قابل تغییر هستند.البته روش اعمال این تغییرات را در css به طور مفصل آموزش خواهیم داد.

    آموزش html

     

    ۳٫لیست های تعریفی

    لیست تعریفی چه نوع لیستی است؟

    لیستی است که به ازای هر آیتم قرار است توضیحی قرار دهیم.

    برای ایجاد لیست های تعریفی ازتگ  <dl> استفاده می کنیم.

    هر آیتم شامل دو قسمت است:

    برچسب و توضیح

    تگ <bt>که برای عنوان ها استفاده می شود.

    و تگ <dd> برای توضیحات.

    روش ایجاد لیست های تودرتو

    با استفاده از تگ<ul>  و تگ <li>  برای مشخص کردن آیتم ها.


    پستی که خواندید متن قسمتی از دوره رایگان HTML بود. توصیه می‌شود که ویدئو تدریس آن را در دوره مربوطه مشاهده نمایید.

    در این قسمت میخواهیم به استفاده از عکس و تصویر در زبان html بپردازیم

    برای استفاده از عکس در صفحات وب از تگی به نام img  استفاده میشود به این این صورت که :

    تگ img  چهار خاصیت دارد که به هر کدام از آنها میپردازیم :‌

    خاصیت src  :‌ این خاصیت برای مشخص کردن نشانی عکس استفاده میشود .

    خاصیت alt  : این خاصیت برای مشخص کردن متن جایگزین عکس استفاده میشود . متن جایگزین متنی است که در صورتی که عکس بارگذاری نشود و یا درست بارگذاری نشود به جای عکس نمایش داده میشود . این متن در سئو وبسایت ها اهمیت بالایی دارد و باید حتما برای هر عکسی که استفاده میشود متن جایگزین مناسب آن نیز گذارده شود .

    خاصیت width  و height  : این دو خاصیت برای مشخص کردن طول و عرض عکس استفاده میشود . باید دقت شود که منظور از طول و عرض ،‌ طول و عرض تصویر هنگام نمایش آن است و اندازه فایل اصلی تغییری نمیکند .

    از بین این خاصیت ها تنها خاصیت src  الزامی میباشد و بقیه اختیاری هستند.


    پستی که خواندید متن قسمتی از دوره رایگان HTML بود. توصیه می‌شود که ویدئو تدریس آن را در دوره مربوطه مشاهده نمایید.

    تگ: یک تگ بلند inline که هر چیزی مابین این تگ قرار بگیرد قابل کلیک می شود. این کلیک باعث انتقال از یک مکان به مکان دیگر می شود.

    جابجایی بین صفحات

     

    تگ <href> : صفت تگ <a> ؛آدرس صفحه  مقصد را دریافت میکند.

    جابجایی درون یک صفحه

     

    تگ <href> برای جابجایی بین صفحات است؛ یعنی وقتی می خواهیم از یک صفحه به صفحه دیگر منتقل شویم، ولی اگر بخواهیم درون یک صفحه از مکانی به مکان دیگر منتقل شویم باید از دستور دیگری استفاده کنیم.

    مثلاً یک دکمه در صفحه ایجاد کنیم که هروقت روی آن کلیک کردیم به مکان دیگری در همان صفحه منتقل شویم.

     

    برای دسترسی به یک نقطه ی دیگر از صفحه ابتدا برای نقطه ای که می خواهیم به آن منتقل شویم با استفاده از تگ <a>اسم می گذاریم سپس  آدرس href  را با علامت # و اسم ان نقطه ذکر می کنیم.


    پستی که خواندید متن قسمتی از دوره رایگان HTML بود. توصیه می‌شود که ویدئو تدریس آن را در دوره مربوطه مشاهده نمایید.

© تمامی حقوق مطالب برای وبسایت هفت دیزاین محفوظ است و هرگونه کپی برداری بدون ذکر منبع ممنوع و شرعا حرام می باشد.
قدرت گرفته از : بک لینکس