آموزش HTML | ساخت اولین صفحه وب و چاپ Hello World
آموزش HTML | ساختار یک صفحه یا سند HTML
20 مهر 1400
آموزش HTML | مبانی و مفاهیم پایه HTML
22 آذر 1400
آموزش HTML ، ساخت صفحه وب با HTML (چاپ Hello World در HTML). در قسمت قبل، مواردی مانند ساختار یک صفحه HTML، تگ های HTML و غیره را یاد گرفتیم. در ادامه با استفاده از مطالبی که یاد گرفتیم اولین صفحه وب خود را ایجاد می کنیم. که متن ” Hello World! ” را روی صفحه نمایش چاپ می کند. و همچنین با تگ های هدینگ (Heading Tags) در HTML آشنا می شویم.
ساخت اولین صفحه وب و چاپ Hello World در HTML
ویرایشگر متن (text editor) خود را باز کرده و کد زیر را در آن تایپ کرده و با نام “index.html” ذخیره کنید.
توجه: فایل های HTML با پسوند فایل .html ذخیره می شوند.
کد: index.html
<!DOCTYPE html>
<html>
<head>
<title>
First Web Page
</title>
</head>
<body>
Hello World!
</body>
</html>
خروجی: هنگام باز کردن فایل در مرورگر، خروجی زیر را مشاهده خواهید کرد.
به همین آسانی که مشاهده کردید، می توان هر چیزی را در صفحه وب چاپ کرد. برای اجرای کد HTML در صفحه وب، نیازی به کامپایل کردن آن ندارید. از آنجا که HTML یک زبان نشانه گذاری است، می توانید کد خود را تغییر دهید سپس دکمه رفرش را فشار دهید و تغییرات بلافاصله در صفحه وب شما نشان داده می شود.
عبارت “Hello World!” در صفحه کوچک به نظر می رسد. اجازه دهید آن را با سایز بزرگتری چاپ کنیم. قبل از چاپ عبارت مذکور با سایز بزرگتر باید تگ های هدینگ را توضیح دهیم.
تگ های هدینگ (Heading Tags): تگ های هدینگ در 6 سطح عنوان یا تیتر (Heading) توسط HTML تعریف شده است. این شش تگ هدینگ عبارتند از: h1، h2 ، h3 ، h4 ، h5 و h6. تگ h1 دارای بالاترین اولویت و تگ h6 دارای کمترین اولویت است. در ادامه با این 6 تگ هدینگ عبارت “Hello World!” را چاپ می کنیم تا تفاوت ها را مشاهده کنید.
<!DOCTYPE html>
<html>
<head>
<title>
First Web Page
</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
</body>
</html>
خروجی: هنگام رفرش صفحه وب خود، خواهید دید که خروجی به صورت زیر تغییر خواهد کرد.
مرورگر پشتیبانی شده:
سرفصل های آموزش طراحی یک وب سایت ساده با HTML و CSS
- مقدمه: آموزش طراحی یک وب سایت ساده با HTML و CSS
- ساختار یک صفحه یا سند HTML
- ساخت اولین صفحه وب و چاپ Hello World
- مبانی و مفاهیم پایه HTML
کلمات کلیدی: آموزش HTML,ساخت اولین صفحه وب,چاپ Hello World در HTML,آموزش طراحی سایت,Heading Tags در HTML,تگ های هدینگ در HTML
