در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی وب صفر تا صد قسمت 4 : ماهیت برچسب ها در HTML

آموزش طراحی وب صفر تا صد قسمت 4 : ماهیت برچسب ها در HTML

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

شما می توانید 3 دقیقه از این ویدیو را به صورت رایگان مشاهده کنید

در قسمت سوم از دوره آموزشی طراحی وب به سراغ لیست می رویم. ایجاد لیست ها در صفحات وب کاربردهای زیادی دارند، مانند ایجاد لیست در متن ها تا ایجاد منوها یا اصطلاحاً Navigation ها. البته ما در این قسمت با مقدمات کار با لیست ها آشنا می شویم و کاربرد اصلی لیست ها را پس از یادگیری مباحث CSS را یاد خواهیم گرفت. علاوه بر لیست به سرا
آموزش طراحی وب
غ موارد دیگری می رویم که در زیر به مطالب آموزش داده شده در این ویدیو اشاره شده است:

  1. یاد میگیریم که چگونه لیست ها در صفحات وب ایجاد کنیم، لیست انواع مختلفی دارند، مانند لیست های مرتب، لیست های نامرتب و همچنین لیست های توصیفی. همچنین با خصوصیت های type و start برای تغییر در عملکرد لیست های آشنا خواهیم شد.
  2. با تگ های del و ins آشنا می شویم، از این بر چسب ها برای نمایش تغییراتی که در یک متن اعمال شده اند استفاده می شود. برای مثال، فرض کنید قالب یک فروشگاه را طراحی می کنید و می خواهید برای محصولات تخفیف ایجاد کنید، در اینجا باید بر روی قیمت اصلی خط کشیده و قیمت تخفیف دار را نمایش دهید. بوسیله تگ های ins و del می توان این کارها را انجام داد.
  3. در ادامه با HTML Entities آشنا می شویم، در صفحات HTML برای استفاده از بعضی کاراکترها محدودیت وجود دارد. برای مثال، کاراکترهایی مثل > یا < که برای ایجاد برچسب ها استفاده می شوند را نمی توان به صورت عادی در صفحات نمایش داد و باید از قابلیتی با نام HTML Entities استفاده کرد که با این قابلیت آشنا خواهیم شد.
  4. همچنین با نحوه یادداشت گذاری در کد صفحات وب بوسیله Comment ها آشنا می شویم. درج یادداشت یا Comment در صفحات وب به شما یا افراد دیگری که از قالب طراحی شده توسط شما استفاده می کنند، مانند برنامه نویس ها این اجازه را می دهد تا درک بهتری از کدهای نوشته شده در صفحات وب داشته باشند.
  5. زمان که مرورگر در حال طراحی صفحات وب هستند، بر اساس ماهیت تگ ها آن ها را نمایش می دهند. ما در HTML دو نوع تگ داریم، تگ های block و تگ های inline که در این بخش با این دو مفهوم و شیوه نمایش آن ها در صفحات مرورگر آشنا خواهیم شد.
  6. با تگ های div و span که برای گروه بندی برچسب های block و inline استفاده می شوند آشنا می شویم.
  7. با XML Declaration که بعضی وقت ها در ابتدای صفحات وب دیده می شوند آشنا شده و متوجه می شویم که دلیل نوشتن XML Declaration در ابتدای صفحات چیست؟
  8. برای طراحی وب نسخه های متفاوتی از HTML وجود دارد، در نسخه هایی از HTML یک X در ابتدای HTML اضافه می شود، یعنی XHTML، کاراکتر X در اینجا به معنای eXtensible است و یکسری قواعد و قوانین را برای نوشتن کدها در صفحات وب به همراه دارد که در این بخش با این قواعد و قوانین آشنا می شویم.
  9. با خصوصیت id آشنا می شویم که به ما این امکان را می دهد بر روی تگ های موجود در صفحه شناسه ایجاد کنیم. ایجاد این شناسه به ما این امکان را می دهد تا در زمان بارگذاری صفحه بر روی یک قسمت از صفحه قرار بگیریم، یعنی بعد از بارگذاری صفحه، به صورت خودکار بر روی بخشی از صفحه Scroll انجام شود. همچنین متوجه می شویم که یکی از کاربردهای id اعمال استایل بوسیله CSS بر روی برچسب های موجود در صفحه است.
  10. در انتها با خصوصیت های dir و lang آشنا می شویم که برای طراحی صفحات در زبان های مختلف استفاده می شود. برای مثال بوسیله خصوصیت dir می توان راست به چپ یا چپ به راست بودن صفحه را مشخص کرد و همچنین بوسیله خصوصیت lang می توان زبانی که صفحه بر اساس آن طراحی شده را مشخص کرد.

تصاویری از محیط آموزش


آموزش طراحی وب


آموزش طراحی وب




تهیه کننده: حسین احمدی
منبع: ITPRO

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

#لیست_ها_در_html #html_entities_در_صفحات_وب #تگ_ul_و_ol_در_html #آموزش_طراحی_وب #تگ_dl_در_html #تفاوت_میان_تگ_های_inline_و_block_در_html #xhtml_چیست #تگ_های_ins_و_del_در_html #comment_ها_در_صفحات_وب #دوره_طراحی_وب
عنوان
1 آموزش طراحی وب صفر تا صد قسمت 1 : مقدمه ای بر دوره 23′:39″ رایگان
2 آموزش طراحی وب صفر تا صد قسمت 2 : ساختار HTML 32′:29″ 5,500
3 آموزش طراحی وب صفر تا صد قسمت 3 : قالب بندی متن ها 41′:38″ 5,500
4 آموزش طراحی وب صفر تا صد قسمت 4 : ماهیت برچسب ها در HTML 50′:55″ 6,600
5 آموزش طراحی وب صفر تا صد قسمت 5 : استفاده از Link ها 37′:28″ 4,400
6 آموزش طراحی وب صفر تا صد قسمت 6 : کار با تصاویر در HTML 27′:0″ رایگان
7 آموزش طراحی وب صفر تا صد قسمت 7 : کار با جداول در HTML 36′:56″ 4,400
8 آموزش طراحی وب صفر تا صد قسمت 8 : فرم ها و ورود اطلاعات 54′:58″ 8,250
9 آموزش طراحی وب صفر تا صد قسمت 9 : آشنایی اولیه با CSS 48′:21″ رایگان
10 آموزش طراحی وب صفر تا صد قسمت 10 : کار کردن با فونت و متن در CSS 32′:47″ 5,500
11 آموزش طراحی وب صفر تا صد قسمت 11 : بک گراند در CSS 21′:0″ 4,400
12 آموزش طراحی وب صفر تا صد قسمت 12 : Display و Visibility در CSS 11′:39″ رایگان
13 آموزش طراحی وب صفر تا صد قسمت 13 : مفهوم BoxModel 31′:15″ 7,700
14 آموزش طراحی وب صفر تا صد قسمت 14 : Position ها در HTML و CSS 27′:31″ 6,600
15 آموزش طراحی وب صفر تا صد قسمت 15 : استفاده از Pseudo Class ها 18′:36″ رایگان
16 آموزش طراحی وب صفر تا صد قسمت 16 : ایجاد Navigation ها 16′:3″ 5,500
17 آموزش طراحی وب صفر تا صد قسمت 17 : ایجاد منوهای کشویی با HTML 21′:48″ 5,500
18 آموزش طراحی وب صفر تا صد قسمت 18 : ایجاد Mega Menu ها 9′:13″ رایگان
19 آموزش طراحی وب صفر تا صد قسمت 19 : خاصیت Float و Layout 34′:23″ 7,150
20 آموزش طراحی وب صفر تا صد قسمت 20 : آشنایی با Pseudo Element ها 15′:52″ رایگان
21 آموزش طراحی وب صفر تا صد قسمت 21 : آشنایی با Grid System 1:5′:29″ 10,450
22 آموزش طراحی وب صفر تا صد قسمت 22 : آموزش CSS Reset 6′:32″ رایگان
23 آموزش طراحی وب صفر تا صد قسمت 23 : آشنایی اولیه با HTML5 34′:56″ 4,070
24 آموزش طراحی وب صفر تا صد قسمت 24 : طراحی وب سایت خبری : بخش 1 47′:39″ 5,500
25 آموزش طراحی وب صفر تا صد قسمت 25 : استفاده از Font-Face در CSS 15′:57″ رایگان
26 آموزش طراحی وب صفر تا صد قسمت 26 : طراحی وب سایت خبری : بخش 2 1:2′:1″ 7,700
27 آموزش طراحی وب صفر تا صد قسمت 27 : طراحی وب سایت خبری : بخش 3 37′:24″ 3,300
28 آموزش طراحی وب صفر تا صد قسمت 28 : مقدمه ای بر CSS3 21′:0″ رایگان
29 آموزش طراحی وب صفر تا صد قسمت 29 : Background و Color در CSS3 23′:45″ 4,400
30 آموزش طراحی وب صفر تا صد قسمت 30 : آشنایی با Gradient ها در CSS3 17′:9″ رایگان
31 آموزش طراحی وب صفر تا صد قسمت 31 : کار با سایه ها در CSS3 21′:25″ 6,050
32 آموزش طراحی وب صفر تا صد قسمت 32 : خصوصیت های کار با متن در CSS3 10′:48″ رایگان
33 آموزش طراحی وب صفر تا صد قسمت 33 : Transform ها در CSS3 18′:2″ 4,950
34 آموزش طراحی وب صفر تا صد قسمت 34 : آشنایی با محیط سه بعدی (3D) 17′:11″ 4,950
35 آموزش طراحی وب صفر تا صد قسمت 34 : Transition در CSS3 15′:51″ رایگان
36 آموزش طراحی وب صفر تا صد قسمت 36 : ایجاد مکعب سه بعدی (3D Cube) 20′:23″ 6,050
37 آموزش طراحی وب صفر تا صد قسمت 37 : ایجاد Animation در CSS3 23′:28″ 5,500
38 آموزش طراحی وب صفر تا صد قسمت 38 : Multiple Columns 16′:21″ رایگان
39 آموزش طراحی وب صفر تا صد قسمت 39 : آشنایی با Flexbox در CSS3 18′:27″ رایگان
40 آموزش طراحی وب صفر تا صد قسمت 40 : طراحی واکنشگرا یا Responsive 33′:35″ 9,790
41 آموزش طراحی وب صفر تا صد قسمت 41 : آشنایی با تکنیک Sprite Images 20′:5″ 4,950
42 آموزش طراحی وب صفر تا صد قسمت 42 : آشنایی با Font Awesome 19′:38″ رایگان
43 آموزش طراحی وب صفر تا صد قسمت 43 : آشنایی با تکنیک Flipcard 13′:26″ 4,290
44 آموزش طراحی وب صفر تا صد قسمت 44 : تکنیک Hover Effect 17′:23″ رایگان
45 آموزش طراحی وب صفر تا صد قسمت 44 : آموزش جاوااسکریپت (JavaScript) 15′:49″ رایگان
46 آموزش طراحی وب صفر تا صد قسمت 46 : مفاهیم اولیه در جاوا اسکریپت 20′:10″ رایگان
47 آموزش طراحی وب صفر تا صد قسمت 47 : نوع های داده و عملگرها 42′:24″ 8,250
48 آموزش طراحی وب صفر تا صد قسمت 48 : مباحث تکمیلی نوع های داده 30′:15″ رایگان
49 آموزش طراحی وب صفر تا صد قسمت 49 : آشنایی با حلقه ها (Loops) 21′:0″ 4,950
50 آموزش طراحی وب صفر تا صد قسمت 50 : دستورات کنترلی if و switch 19′:31″ رایگان
51 آموزش طراحی وب صفر تا صد قسمت 51 : آشنایی با توابع (Functions) 18′:34″ 5,500
52 آموزش طراحی وب صفر تا صد قسمت 52 : آموزش کار با DOM 40′:16″ 9,350
53 آموزش طراحی وب صفر تا صد قسمت 53 : آموزش کار با DOM 14′:15″ 4,950
54 آموزش طراحی وب صفر تا صد قسمت 54 : آموزش کار با DOM 5′:31″ رایگان
55 آموزش طراحی وب صفر تا صد قسمت 55 : آموزش کار با DOM 54′:9″ 8,800
56 آموزش طراحی وب صفر تا صد قسمت 56 : آشنایی با BOM 28′:25″ رایگان
57 آموزش طراحی وب صفر تا صد قسمت 57 : کار با فرم ها در JavaScript 34′:19″ 4,950
58 آموزش طراحی وب صفر تا صد قسمت 58 : آموزش Timing Events 12′:16″ رایگان
59 آموزش طراحی وب صفر تا صد قسمت 59 : چند مثال کاربردی JavaScript 32′:45″ 4,950
زمان و قیمت کل 26:21′:5″ 210,650
3 نظر
امیرحسین جعفری نژاد

از همین تریبون تشکر میکنم از King Of Programming...

hamideh smi

با سلام من کدی رو نوشتم که سمت راست لیستهای تودر تو ایجاد کردم ولی وقتی میخوام سمت چپ صفحه رو هم میخوام از همون لیستهای تو در تو استفاده کنم نمیشه لیست رو داخل div هم میگذارم و align رو چپ میذارم ولی بازم نادرست در صفحه ظاهر میشه . البته این رو هم بگم که dir در body رو راست چین گذاشتم.الان چطور میتونم سمت چپ هم از این لیستها درست کنم؟؟؟

hamideh smi

برای مثال این کد:

<!Doctypehtml>
	<html>
		<head>
			<title> فروشگاه دیجی کالا</title>
		</head>
		<body dir="rtl">
			<font face="tohama" size="3" color="red" >
				<h1 title="فرشگاه آنلاین دیجی کالا" align="center">Digicala</h2>
			</font>
			<p align="center">فروشــگاه آنـلاین دیـجی کـالا</p>
				<br/>
					<hr/>
				<div align="center">
					<a href="home.html" title="صفحه اصلی">Home</a>	
					&nbsp&nbsp&nbsp
					<a href="email.html" title="ایـمیل " target="_blanck">email</a>
					&nbsp&nbsp&nbsp
					<a href="contact.html" title="تـماس با ما">contact</a>
					&nbsp&nbsp&nbsp
					<a href="shopping.html" title="خریـد آنلایـن">online shopping</a>
					&nbsp&nbsp&nbsp
					<a href="register.html" title="ثبت نـام ">register</a>
					&nbsp&nbsp&nbsp
					<a href="logging.html" title="ورود به سایت">login</a>	
				</div>
					<br/>
						<hr/>
					
					<h1 title="لیست اقلام فروشی سایت" id="objectlist" >objectlist</h1>
						<ul>
							<li>کتابهای آموزشی
								<ul>
									<li>آموزش آشپزی</li>
									<li> آموزش بافتنی</li>
									<li>آموزش برنامه نویسی</li>
									<li>آموزش تایپ</li>
								</ul>
							</li>
							<li>لوازم جانبی موبایل
								<ul>
									<li>قاب موبایل</li>
									<li> کابل شارژر</li>
									<li>هنزفری</li>
									<li>هدفون</li>
								</ul>
							</li>
							<li>لوازم خانگی
								<ul>
									<li>اتو</li>
									<li> مایکرویو</li>
									<li>چرخ گوشت</li>
									<li>تلویزیون</li>
								</ul>
							</li>
							<li>فروش ویژه کامپیوتر
								<ul>
									<li>لپ تاپ</li>
									<li> نوت بوک</li>
									<li>آیپد</li>
									<li>تبلت </li>
								</ul>
							</li>
						</ul>
						
						<hr>
						<div align="center">
							<a href="#">gototop</a>
						</div>
		</body>
	</html>
نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

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