آموزش طراحی وب سایت با HTML: ايجاد يک فايل HTML

آموزش طراحی وب سایت با HTML: ايجاد يک فايل HTML

جلسه اول: آشنايي با محيط کدنويسي و ايجاد يک فايل HTML

 

آموزش HTML

 

در این جلسه میخواهیم برای شروع، یک فایل ساده HTML با محتوی یک متن، ایجاد کنیم. در ابتدا برنامه Sublim Text3 دانلود و نصب کنید. کد های زیر را کپی کنید و در برنامه Sublim Text3 یا Note Pad ویندوز کپی کنید.

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1> Farkiantech </h1>
<p> Salam </p>

</body>
</html>

HTML Notepad
کپی کردن کد های HTML در برنامه Note Pad ویندوز

در نظر داشته باشید که پس از کپی کردن فایل های HTML در Note Pad ویندوز، در قسمت بالا بر روی File کلیک کنید. سپس گزینه Save as را انتخاب کنید. بعد از انتخاب این گزینه، پسوند فایل notepad را از txt به HTML تغییر دهید و یک اسم برای آن انتخاب کنید. همانند زیر:

 

notepad

 

سپس بر روی گزینه Save کلیک کنید. اکنون باید یک فایل برای شما ایجاد شود که با وارد شدن به آن، وارد مرورگر میشوید.

 

File HTML

 

سپس با چنین صفحه ای که در بالا نشان داده ایم. روبرو میشوید.

اکنون بیایید برنامه sublim text را باز کنیم و کدها را درون آن کپی کنیم. همانند زیر:

 

آشنايي با صفحه کدنويسي در HTML

 

میخواهیم از خط اول، کد ها را معرفی کنیم تا محیط کدنویسی HTML آشنا شویم.

خط ۱ <html> يک Document يا سندي ميباشد که ما در حال کدنويسي با HTML ميباشيم. اين برنامه با HTML شروع و با HTML پايان ميابد. در تمام صفحه هاي مربوط به کدنويسي با HTML، نوشتن عبارت HTML الزامي است.

خط ۲<head> عنصر اصلي صفحه کدنويسي HTML ميباشد.

خط ۳ <Title> عنواني را براي صفحه HTML مشخص ميکند.

خط ۵ <body> يک بدنه اي براي تعريف کد در آن ميباشد. بدنه body يک محفظه اي براي عنوان، متن، تصاوير و . . . ميباشد.

 

ايجاد بدنه body در HTML
همانطور که ميبنيد، من کد هايي را که ايجاد کردم، در بين دو بدنه body نوشتم. body همانند يک محفظه کد عمل ميکند. تنها قسمتي که در HTML قابل مشاهده است، کد هايي است که بين دو تگ BOdy

خط ۷ <h1> تگ h1 يک متن را با فونت بزرگ، به صورت يک عنوان، ايجاد ميکند.

 

استفاده از تگ H1 در HTML
همانطور که ميبنيد، کلمه Frakiantech در بين دو تگ h1 نوشته شده است.

 

File HTML
در اين تصوير، متن Farkiantech به صورت يک عنوان، با تگ H1 نوشته شده است.

 

خط ۸ <p> يک پاراگراف ايجاد ميکند. تصاوير و کد هاي بالا مشاهده ميکنيد که ما کلمه Salam را به عنوان يک پاراگراف در نظر گرفتيم و آن را بين دو تگ <P> قرار داديم تا به صورت پاراگراف در مرورگر ظاهر شود. با ما همراه باشيد. در جلسه بعد، بيشتر با اين محيط آشنا خواهيم شد.

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

مطالب مرتبط

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

نظر: