دورة تصميم المواقع

في هذه الدورة سوف نتعلم الكثير من التصميم والبرمجة، سوف أبدأ معكم من الصفر حتى النهاية.

قبل كل شيء يجب أن نعلم ما هي لغة HTML و لماذا يتم استخدامها لانشاء صفحات الويب

ما هي HTML؟

HTML هي اللغة الترميزية القياسية لإنشاء صفحات ويب.

HTML لتقف على لغة ترميز النصوص التشعبية
يصف HTML بنية صفحات ويب باستخدام الترميز
عناصر HTML هي لبنات بناء صفحات HTML
وتتمثل عناصر HTML بالسمات
قطع علامات HTML التسمية من المحتوى مثل “العنوان”، “الفقرة”، “الجدول”، وهلم جرا
المتصفحات لا تعرض علامات HTML، ولكن استخدامها لتقديم محتوى الصفحة

 

<!DOCTYPE html>
<html>
	<head>
		<!-- Basics HTML5 -->
		<meta charset="utf-8">
		<meta name="author" content="Nour Homsi">
		<meta name="description" content="Learn web design">
		<meta http-equiv="X-UA-Compatible" content="IE-edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" href="imgs/favicon.ico">
		<!-- My Code -->
		<title> NOUR HOMSI </title>
		<link rel="stylesheet" type="text/css" href="css/reset.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		
	</head>
	
	<body>
		<div id="container">
			<!-- Main Menu -->
			<nav id="menu">
				<h1 id="logo">NOUR HOMSI</h1>
				<ul class="menu-all">
					<li class="menu-item"><a href="#">Home</a></li>
					<li class="menu-item"><a href="#">About</a></li>
					<li class="menu-item"><a href="#">Tutorials</a></li>
					<li class="menu-item"><a href="#">Youtube</a></li>
					<li class="menu-item"><a href="#">Contact</a></li>
				</ul>
			</nav>
			
			<!-- Hero Img -->
			<div id="hero">
				
			</div>
			
			<!-- About -->
			<section id="about">
				<h1>ماذا تريد أن تتعلم</h1>
				<div>
					<p class="about-p">
						هذه الصفحة الرسميّة للمدرّس نور حمصي ستجد في هذه الصفحة دروساً في تصميم الويب وتصميم الجرافيك ما عليك إلا ان تتخذ قرارك في ما تريد تعلّمه هنا، واذا كنت لا تعلم ما تريد اضغط على الزر لتجد الخط التعليمي المناسب لك.
					</p>
				</div>
				<button class="cta">اضغط هنا</button>
			</section>
			
			<!-- Tutorials -->
			<section id="tuts">
				<h1>دروس في تصميم المواقع</h1>
				<div class="row">
					
				<!-- HTML COL -->
					<div class="col-3 col-left">
						<header class="tut-header"> HTML </header>
						<img src="imgs/html-img.jpg" alt="learn html">
						<footer class="tut-footer">
							<p>
								At Nour Homsi you will find complete references about tags, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, and more.
							</p>
						</footer>
					</div>
					
				<!-- CSS COL -->	
					<div class="col-3">
						<header class="tut-header"> CSS </header>
						<img src="imgs/css-img.jpg" alt="learn html">
						<footer class="tut-footer">
							<p>
								At Nour Homsi you will find complete references about tags, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, and more.
							</p>
						</footer>
					</div>
					
				<!-- JS COL -->	
					<div class="col-3">
						<header class="tut-header"> Javascript </header>
						<img src="imgs/js-img.jpg" alt="learn html">
						<footer class="tut-footer">
							<p>
								At Nour Homsi you will find complete references about tags, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, and more.
							</p>
						</footer>
					</div>

				</div>
				<button class="cta tuts">اضغط هنا</button>
			</section>
		
			<!-- Youtube -->
			<section id="youtube">
				<h1>من هنا نبدأ</h1>
				<div class="row">
					<div class="videoframe">
						<iframe class="video" src="https://www.youtube.com/embed/w3PWfFJiPRY" frameborder="0" allowfullscreen></iframe>
					</div>
				</div>
			</section>
			
			<!-- Contact -->
			<section id="contact">
				<h1>هل أنت مهتم بالتواصل؟</h1>
				<div class="row">
					<div class="col-2">
						<div id="gmap_canvas">
							<script type="text/javascript">function init_map()</script></div>
					</div>
					<div class="col-2">
						<form action="#" method="post">
							<input id="name" class="input" name="name" type="text" value="الاسم" size="30"><br>
							<input id="email" class="input" name="email" type="text" value="الايميل" size="30"><br>
							<input id="website" class="input" name="website" type="text" value="الموقع الالكتروني" size="30"><br>
							<textarea id="message" class="input" name="message" rows="6" cols="30"></textarea><br>
							<input id="submit" class="cta" type="submit" value="ارسال">
						</form>
					</div>
				</div>
			</section>
			
			<!-- Footer -->
			<section id="wsfooter">
				<p> جميع الحقوق محفوظة لصاحب الموقع</p>
				<p> Tel: 123456 | Fax: 123456 | <a href="mailto:nourhomsi@gmail.com">Email: nourhomsi@gmail.com</a></p>
			</section>
		</div>
		<!-- SCRIPTS -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp">3</script>
	<script src="js/script.js"></script>
	</body>
</html>

6 thoughts on “دورة تصميم المواقع

  1. ahmad Post authorReply

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit

    • ahmad Post authorReply

      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet

    • ahmad Post authorReply

      Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  2. ahmad Post authorReply

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  3. ahmad Post authorReply

    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  4. صحراوي منير Reply

    السلام عليكم حبيب قلبي
    مُحب صحراوي منير
    والله ادمنت على مثتابعتك وشاركتك كثيرا
    أحتاج قالب بلوجر الذي أرسلته هنا ككود ولكنه لم يتوافق مع بلوجر
    راح أطوره وبارك الله فيك حبيبي
    أو ترسل لي مجموعة قوالب بلوجر تحت تصميمك وأنا أضعها على مدوناتي
    وتبقى حقوقك محمية ♥
    الله يحفظك

Leave a Reply

Your email address will not be published. Required fields are marked *