why-social-media-is
|

آموزش زبان html به زبان ساده(پیشرفته)

تگ های معنی دار در html5

خوب همونطور که توی بخش مقدماتی گفتم تغییری که html5  نسبت به نسل قبلی خودش داشته این بوده که تگ های معنی دار رو اضافه کرده

اگر شما بخوایید که با نسخه قبلی html برنامه نویسی کنید چون این تگ های نبودن باید از تگ اصلی div استفاده میکردید و به اون ها ایدی `id` معنی دار میدادید که این کار توی این نسخه دیگه معنی نمیده چون اون تگ هارو ما داریم

تگ های معنی دار عبارت اند از:heade,nav,main,article,section,aside

برای درک بهتر این مطلب به عکس پایین نگاه کنید

آموزش زبان html به زبان ساده(پیشرفته)
آموزش زبان html به زبان ساده(پیشرفته)

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 رو بگذرانید تا هر صفحه وب سایتی که دوست دارید رو ایجاد کنید و از ان لذت ببرد

بنده پوریا افشار ارشد برنامه نویس فرانت در وبسایت اوشن سئو هستم.

خدانگهدار

سئو چیست؟

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

بهینه سازی سایت در موبایل

نوشته‌های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چهار × چهار =