تگ های معنی دار در html5
خوب همونطور که توی بخش مقدماتی گفتم تغییری که html5 نسبت به نسل قبلی خودش داشته این بوده که تگ های معنی دار رو اضافه کرده
اگر شما بخوایید که با نسخه قبلی html برنامه نویسی کنید چون این تگ های نبودن باید از تگ اصلی div استفاده میکردید و به اون ها ایدی `id` معنی دار میدادید که این کار توی این نسخه دیگه معنی نمیده چون اون تگ هارو ما داریم
تگ های معنی دار عبارت اند از:heade,nav,main,article,section,aside
برای درک بهتر این مطلب به عکس پایین نگاه کنید
header در زبان html
که قرار باهم دیگه اون هارو آموزش ببینیم
ساخت سربرگ با تگ معنی دار header
این تگ برای ساختن هدر یا سربرگ سایت استفاده میشه که تگ باز و بسته هست و تگ والد هم محسوب میشه
به طور کلی ما هرچیزی که داخل این تگ قرار بدیم توی هدر یا سربرگ سایت به نمایش در میادش
فرزند این تگ nav هستش که یک تگ باز و بسته محسوب میشه
شگل نوشتن این تگ رو توی مثال پایین میتونید نگه کنید:
<body>
<header>
<nav>
اینجا هر چیزی میتونید یاداشت کنید
<nav/>
<header/>
<body/>
ما با کمک css میتونیم که اندازه و جهت و هر چیز دیگه ای رو از این تگ تغیر بدیم
ساخت بخش اصلی سایت
ساخت بخش اصلی سایت با تگ معنی دار main
برای اینکه ما بخش اصلی سایت رو درست کنیم و هرچیزی که میخوایم رو به نمایش بزاریم باید از تگ main استفاده کنیم
این تگ هم تگ باز و بسه به حساب میادش
این تگ یک تگ والد هست که یک فرزند اصلی داره به اسم:article
این تگ فرزند برای تمامی محتوا هایی که در وسط صفحه قرار میگیرن استفاده میشه
ما میتونیم از چند تا تگ article درون تگ والد خودش یعنی تگ main استفاده کنیم
خود این تگ فرزند هم دوتا تگ فرزند دیگه داره که برای بخش های محتوایی استفاده میشه با یه طور کلی ما میتونم از این تگ های فرزند برای جدا کردن محتوا درون صفحه استفاده کنیم
فرزند های این تگ section و aside هستن که کاربرد های متفاوتی دارن
تگ section باری محتوایی که وسط صفحه قرار میگیرن استفاده میشه و تگ aside برای محتوایی که کنار محتوای اصلی میاد کاربرد داره
هر دوی این تگ های فرزند نگ های بازو بسته به حساب میان که ما هرچیزی که لازم هست رو میتونیم درون این تگ ها قرار بدیم
بعضی از افراد هستن که از تگ nav داخل این تگ های فرزند استفاده میکنن که تفاوتی ایجاد نمیکنه
ما با کمک css میتونیم به این تگ ها استایل های که لازم هست رو اعمال کنیم که قشنگتر و زیبا تر میشه
در پایین تر میتونید یک قطعه کد از این آموزش رو مشاهده کنید تا درک بهتری داشته باشید
<body>
<main>
<article>
<section></section>
<section></section>
<aside></aside>
<article/>
<main/>
<body/>
فوتر سایت
آخرین تگ معنی دار ما تگ footer هستش
این همانطور که از اسمش مشخصه برای ساختن فوتر یا قسمت پایین سایت استفاه میشه
این تگ یک تگ باز و بسته به حساب میاد
این تگ والد هست که فرزند اون تگ nav هستش
که ما هر چیزی که لازم هست در قسمت فوتر یا پایین سایت به نمایش بگذاریم رو در تگ فرزند یعنی nav استفاده میکنیم
این تگ هم به این صورت نوشته میشه:
<body>
<footer>
<nav>
اینجا هر چیزی میتونه باشه
<nav/>
<footer/>
<body/>
ساختن منوی گزینه ای بدون استفاده از css
برای اینکه ما بتونیم منوی گزینه ای یا یک لیست باز شو رو بدون کمک css و تنها با html5 درست کنیم باید از تگ select استفاده کنیم.
این تگ یک تگ باز و بسته یا تگ جفتی محسوب میشه که یک فرزند اصلی هم داره که بدون فرزندش ما هیچ استفاده ای نمیتونیم از این تگ کنیم
اسم فرزند این تگ option یا به فارسی گزینه هستش
ما از این تگ بیشر درون فرم ها استفاده میکنیم
تگ فرزند هم مثل والد خودش یک تگ باز و بسته به حساب میادش
طرز نوشتن این تگ به این صورت هستش که ما اول تگ والد یعنی select رو اول یاداشت میکنیم بعد تگ فرزند رو یاداشت میکنیم و یک مقدار یا value رو داخل تگ مینویسیم بعد بین تگ گزینه ای که لازم به نمایش هست رو یاداشت میکنیم
خود تگ والد یعنی select هم یک اسم داخل تگ باید داشته باشه
در پایین یک مثال کد نوشتاری رو میتونید مشاهده کنید
<body>
<form>
<“select name = “people>
<option value = “poriya”> poriya </option>
<option value = “behnaz”> behnaz </option>
<option value = “hamid”> hamid </option>
<option value = “reza”> reza </option>
<option value = “ali”> ali </option>
<select/>
<“input type = ”submit” value = “send>
<form/>
<body/>
بهنام این اسم هارو عوض کن حتما بعد منتشر کن
اسم های بالا رو بزار به ترتیب
اگر هم نشد کلا خروجی رو حدف کن
طرفدار کدوم تیمی استقلال پرسپولیس سپاهان تراکتور دیگر تیم ها :
روش های نوشتن css برای فایل html
ما به طور کلی از سه روش میتونیم که کد های css خودمون رو روی سند html اعمال کنیم
روش اول روش خطی یا inline یا درون تگی هست
روش دوم روش داخلی یا internal یا درون صفحه ای هست
و روش اخر یعنی روش سوم خارجی یا external یا دورن فایلی هست
روش اول مدل خطی یا inline
این روش یکی از روش های اضافه کردن css به html محسوب میشه که ما با کمک کلمه style درون هر تگ میتونیم دستورات css خود را یاداشت کنیم
به عنوان مثال:
<body>
<p style = “background-color:red; color:blue; font-size:20px >
وبسایت اوشن سئو
<p/>
<body/>
خروجی کد بالا رنگ پس زمینه قرمز و رنگ متن ابی و اندازه متن 20px میشه
اصلا نگران کد های css که نوشتم نباشید
در اموزش متنی css به طور کامل توضیح داده شده است
این روش نوشتم کد های css اصلا مناسب نیست
چون اول: باید برای هر تگ کد مجزا یاداشت کنید
دوم:حجم کد ها زیاد میشه و فایل مارو سنگین میکنه
سوم:در سئو سایت ما تاثیر مخرب میزاره
روش استایل داخلی یا internal درون html
خوب از اسم این روش مشخصه که ما میتونیم کد های css خود را داخل سند html یاداشت کنیم اما خارج تگ باشد
روش نوشتم این مدل هم به این صورت هست که ما داخل تگ head یک تگ باز و بسته style یاداشت میکنیم و دستورت لازم را اونجا یاداشت میکنیم
در پایین میتونید نمونه ای از این روش رو مشاهده کنید
<html>
<head>
<style>
;H1{background-color:red
;Color:blue
{Font-size:20px
;P{text-align:center
Font-size:50px
</style>
</head>
<body>
<h1>
اوشن سئو
<h1/>
<p>
اموزش متنی html5 از مقدماتی تا پیشرفته
<p/>
<body/>
<html/>
این روش نسبت به روش قبلی بهتره اما باز هم توصیه نمیشه چون سند مارو سنگین میکنه و در لود صفحه سایت و سئو تاثیر مخرب میزاره
روش استایل خارجی یا external
برای این که ما یتونیم از این روش استفاده کنیم درست مثل html یک سند درست میکنیم با این تفاوت که پسوند اون رو css قرار میدیم
برای اینکه ما یتونیم سند css خود را به سند html خود متصل کنیم باید کد زیر را یاداشت کنیم
<“link rel=”stylesheet” href=”style.css>
این قطعه کد باید داخل تگ head یاداشت شود
معنی href این است که ما ادرسی که فایل css خود را ذخیزه کرده ایم باید درونش یاداشت کنیم
کلمه rel با همه توضیح هاش و اموزش هاش داخل اموزش
متنی css از مقدماتی تا پیشرفته توضیح داده شده
خیلی خوشحالم که توی این آموزش شما کنار من بودین
امیدوارم که تونسته باشم با ادبیات روان خودم بهتون کمکی در راستای اموزش html5 کرده باشم
بعد از دیدن و تمام شدن این آموزش شما میتونید که اموزش مقدماتی تا پیشرفته css رو بگذرانید تا هر صفحه وب سایتی که دوست دارید رو ایجاد کنید و از ان لذت ببرد
بنده پوریا افشار ارشد برنامه نویس فرانت در وبسایت اوشن سئو هستم.
خدانگهدار
0 دیدگاه