تهدف HTML 5 لإنشاء برنامج شامل وهي عباره عن لغة العلامات لتطوير الواجهة الأمامية ، وقادرة على توفير المعلومات النوعية على مختلف عناصر الصفحة ، قدمت عناصر جديده ووسائل الإعلام (وخصائصها) ، مثل و<video><audio>وعناصر semanthic (التي تعكس الاستخدام الحديث للموقع) ، مثل <header>، و<article><footer>.
نحن نركز اهتمامنا على العناصر الجديدة التي تجعل من الأسهل تكوين هيكل صفحة الويب. لنلقي نظره علي هذه العناصر
<section>– وهو تجمع من المحتوى الموضوعي الذي يحتوي على البند.ويكون للعنصر الذي ليس له حاوية عامة مثلdiv
<aside>– جانبا العنصر هو مقطع من الصفحة التي تتكون من المحتوى الذي يرتبط بشكل طفيف إلى محتوى حول العنصر جانبا
<article>– العنصر المادة هو لتكوين قائمة بذاتها
<footer>– العنصر الذي يمثل تذييل للصفحه أو الموقع.
<address>– يمثل عنصر العنوان لإضافة معلومات الإتصال والعنواين وهكذا.
<TIME>– يتم استخدامه لتمثيل التاريخ و / أو الوقت.
نظرة سريعة على CSS3
هناك بعض الخصائص التي هي قيد التجربه ، مثل دائرة نصف قطرها الحدود ومربع الظل وهناك العديد من التقنيات الجديده و الحديثه في css3 يمكنك التعرف عليها عن طريق الخصائص الجيده التي سوف أتحدث عنها في السطور القليله القادمه
RGBa — RGBA هو النموذج القياسي RGB (0،0،0 — 255255255) و a هذا للتعتيم
[html]
background: rgba(196,89,30,0.65);
[/html]
علبة الظلbox-shadow — خاصية CSS – مربع الظل يقبل تأثيرات الظل المختلفة على شكل قائمة مفصولة بفواصل.
[html]
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
[/html]
نصف قطر الإطارborder-radius– : دائرة نصف قطرها الحدود، الذي يسمح لنا بإضافة زوايا مدورة على مربع من البنود.
[html]
-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
[/html]
النص الظل text-shadow — خاصية ظل النص عبارة عن مجموعه تأثيرات ظل للنص .
[html]
text-shadow: 1px 1px 1px #2c0306;
[/html]
والتصميم الأنيق مع الويب HTML 5 و CSS3 للمعاينه اضغط هنا
الآن ، وبعد إلقاء نظرة سريعة على التقنيات التي سوف نقوم بإستخدامها، يمكننا البدء في تصميم موقعنا. لعمل تصميم الأنيق للويب HTML 5 و CSS3
كيف تستطيع أن تقوم بإنشاء موقع الكتروني لطيف
من الممكن أن تقوم بعمل الموقع كاملا دون الحاجه الي الفوتوشوب ولكن عليك أولا ان تقوم برسم أفكارك وترجمتها علي الورقه والقلم
- رسم الموقع بالورقة والقلم
تفاصيل الرسم
يمكنك أن تقوم بإستخدام الفوتوشوب إذا أردت لعمل رسومات جذابه
لوحة الألوان
والأن كود موقعك بإستخدام html5
الخطوة 1 — البنية الأساسية
أولا وقبل كل شيء تحديد البنية الأساسية لصفحة HTML ، بما في ذلك DOCTYPE، وصلات إلى صفحات الأنماط، وعنوان الصفحة وهكذا. الصورة التالية تشرح الهيكل ويسلط الضوء على العلامة التي يمكنني استخدامها لإنشاء بنية الأساسية.
والأن مع الكود :
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mr. hurley | personal blog</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<header id="site_head">
<div><!–useful to create the 960px limit–>
<!–header stuff–>
</div>
</header>
<div id="main_content"><!–useful to create the 960px limit–>
<section id="last_posts">
<!–last posts here–>
</section>
<div>
<section id="archive">
<!–list od posts here–>
</section>
<aside>
<!–blogroll–>
</aside>
</div>
<aside>
<section>
<!–personal info here–>
</section>
<nav>
<!–links for the portfolio–>
</nav>
<section>
<!–contact details here–>
</section>
</aside>
<footer>
<!–footer info here–>
</footer>
</footer>
</div><!–/main_container–>
</body>
</html>
[/html]
يمكنك تكويد الهيدر كما بالشكل التالي
[html]
<header id="site_head">
<div>
<h1><a href="#">mr. hurley</a></h1>
<nav>
<ul>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Follow Me</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
[/html]
وهذا هو ملف css الذي عليك ان تقوم بإضافته
[html]
@charset "utf-8";
/* CSS Document */
/* Reset for some default browser CSS – General */
body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
margin: 0; padding: 0; border: 0; list-style: none;
}
a {
text-decoration: none;
color: #961b25;
}
a:hover {
color: #6f92a7;
}
:focus {
outline: 0;
}
h1, h2, h3 {
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
font-weight: normal;
}
h2 {
font-size: 22px;
line-height: 28px;
}
.float {
float:left;
}
body {
background: #f6f6ee url(images/bck.jpg);
font-family : "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
/* Header */
header#site_head {
background: url(images/bck_head.jpg);
-moz-box-shadow: inset 0px -2px 3px #480508;
-khtml-box-shadow: inset 0px -2px 3px #480508;
-webkit-box-shadow: inset 0px -2px 3px #480508;
box-shadow: inset 0px -2px 3px #480508;
border-bottom: 1px solid #fffffb;
height: 70px;
width: 100%;
display: block;
}
.header_cont {
width: 960px;
margin: 0 auto;
padding-top: 15px;
}
.header_cont h1 {
text-indent:-9999px;
float: left;
}
.header_cont h1 a {
background: url(images/logo.png) no-repeat;
width: 143px;
height: 45px;
display: block;
}
.header_cont h1 a:hover {
background-position: 0px -45px;
}
nav.head_nav {
float: right;
margin-top: 13px;
}
nav.head_nav ul li {
display: inline;
margin: 0px 5px;
}
nav.head_nav ul li a {
color: #f6f6ee;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
padding: 5px 8px;
}
nav.head_nav ul li.home a {
background: #4f1d1e;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
nav.head_nav ul li a:hover {
text-shadow: 1px 1px 1px #2c0306;
background: #4f1d1e;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: inset 0px 0px 2px #2c0306;
-khtml-box-shadow: inset 0px 0px 2px #2c0306;
-webkit-box-shadow: inset 0px 0px 2px #2c0306;
box-shadow: inset 0px 0px 2px #2c0306;
color: #f6f6ee;
}
nav.head_nav ul li.rss, nav.head_nav ul li.twitter {
position: relative;
left: -355px;
margin: 0;
}
nav.head_nav ul li.rss a {
color: #b4676c;
border-right: 1px solid #903f43;
margin: 0;
padding-left: 20px;
background: url(images/rss.png) left no-repeat;
font-size:10px;
}
nav.head_nav ul li.twitter a {
color: #b4676c;
margin-left: 3px;
padding-left: 20px;
background: url(images/twitter.png) left no-repeat;
font-size:10px;
}
nav.head_nav ul li.rss a:hover, nav.head_nav ul li.twitter a:hover {
color: #f6f6ee;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-khtml-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
[/html]
وهذا هو التنفيذ
والأن لتقوم بإضافة المحتوي التالي:
[html]
<div id="main_content"><!–useful to create the 960px limit–>
<section id="last_posts"><!–section for recent posts–>
<header>
<h3>Last posts</h3>
</header>
<div><!–single post container–>
<article>
<div>
<figure>
<img src="images/test3.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <a href="#">Mr. Hurley</a></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>
<div>
<header>
<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
</header>
<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients. After all, they put their trust in me and gladly compensate me for my efforts. I guess I would be…</p>
<span><a href="#">Read more</a></span>
</div>
</article>
</div>
<div>
<article>
<div>
<figure>
<img src="images/test1.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <a href="#">Mr. Hurley</a></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>
<div>
<header>
<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
</header>
<p>For a long time purple has been the least used colour in web design. In recent months I noticed the number of websites…</p>
<span><a href="#">Read more</a></span>
</div>
</article>
</div>
<div>
<article>
<div>
<figure>
<img src="images/test4.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <a href="#">Mr. Hurley</a></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>
<div>
<header>
<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
</header>
<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog. </p>
<span><a href="#">Read more</a></span>
</div>
</article>
</div>
<div>
<article>
<div>
<figure>
<img src="images/test2.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <address><a href="#">Mr. Hurley</a></address></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>
<div>
<header>
<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
</header>
<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
<span><a href="#">Read more</a></span>
</div>
</article>
</div>
</section>
</div>
[/html]
وهذا هو ملف الستايل
[html]
/* Main container */
#main_content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
}
/* Last posts section */
.section_tit {
clear: both;
}
.section_tit h3 {
background: url(images/line.png) no-repeat center center;
text-align: center;
font-size: 34px;
margin: 10px 0 25px 0;
color: #c9c9c0;
text-shadow: 1px 1px 0px #fff;
}
div.single_post {
float: left;
width: 447px;
height: 345px;
margin: 0 16px 35px 16px;
}
img {
border: 5px solid rgba(255,255,255,0.75);
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-box-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #c6c6bf;
-khtml-box-shadow: 0px 0px 5px #c6c6bf;
-webkit-box-shadow: 0px 0px 5px #c6c6bf;
box-shadow: 0px 0px 5px #c6c6bf;
}
div.single_post footer {
color: #2b2b28;
text-align:right;
font-size: 10px;
}
div.single_post ul {
margin-top: 10px;
border-right: 3px solid #dbdbd4;
}
div.single_post ul li {
padding: 1px 13px 1px 0px;
}
div.single_post ul li a {
font-weight: bold;
}
div.art {
width: 250px;
display: block;
background: rgba(255,255,255,0.75);
border: 1px solid rgba(255,255,255,1);
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #c6c6bf;
-khtml-box-shadow: 0px 0px 5px #c6c6bf;
-webkit-box-shadow: 0px 0px 5px #c6c6bf;
box-shadow: 0px 0px 5px #c6c6bf;
margin-left: 15px;
overflow: auto;
float:left;
}
div.art:hover {
background: rgba(255,255,255,1);
}
div.single_post header h2 {
border-bottom: 1px solid #dbdbd4;
margin: 20px;
padding-bottom: 20px;
text-align: center;
}
div.single_post p {
padding: 0 20px;
font-size: 12px;
line-height: 20px;
}
span.more {
float: right;
margin: 30px 20px 30px 0px;
}
span.more a {
background: #8badc2;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 8px 12px;
color: #fff;
text-shadow: 1px 1px 1px #546d7c;
-moz-box-shadow: inset 0px 0px 2px #3f5867;
-khtml-box-shadow: inset 0px 0px 2px #3f5867;
-webkit-box-shadow: inset 0px 0px 2px #3f5867;
}
span.more a:hover {
background: #b8ccd7;
text-shadow: none;
-moz-box-shadow: none;
-khtml-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
[/html]
في النهايه يمكنك أن تضيف المحتوي الذي تريده تبعا لفكرتك الخاصه فلماذا لا تقوم بتجربه هذا المثال
