رئيس التحرير
محمد الضبعان
الواقع المعزز ..عزز واقعك بتقنيات رقمية..تطبيق eyejack app
أهم 11 معيار في تحسين محركات البحث .. سيو .. لأرشفة الموضوعات بسرعة ودقة
حل مشكلة عدم قبولك من جوجل أدسنس .. محتوى غير ذي قيمة
مشروع تصميم قالب أخبار متوافق مع السيو بلغة html css مع سورس كود مجاني
عرض خاص لـ فحص موقعك الالكتروني وتحليل SEO الموقع
شركة New event Developments للتطوير العقاري تدشن مشروعها الثاني الجديد Trave في العاصمة الإدارية
بالفيديو والصور .. مظاهرات للعمال ضد وجيه هنتر بسادة وفشل الملياردير العجوز في سداد مستحقات العمال والموردين والبنوك
مشروع تصميم قالب أخبار متوافق مع السيو بلغة html css مع سورس كود مجاني
نقدم لكم خلال هذا الموضوع مشروع تصميم
قالب أخبار يصلح كموقع أخبار أو مدونة كما يصلح أن يكون مجلة.
مشروع تصميم قالب أخبار أو مدونة مقدم
من عالم واحد للإعلام والبرمجيات وهو من تصميم الصحفي والمبرمج محمد الضبعان رئيس
تحرير بوابة عالم واحد وايمانا منا بأهمية نشر العلم والاهتمام بتطوير مجال
البرمجيات في مصر وعالمنا العربي نسمح باقتباس كود المشروع مجانا وسنرفقه مع
الموضوع.
تم تصميم القالب بلغة html , css واعتمدنا خاصية flexbox في تصميم القالب والتي تعد الخاصية الاسهل والافضل للخروج بموقع ويب متجاوب وسهل برمجته.
كما أولينا اهتماما بالغا بتحسين محركات البحث seo اثناء التصميم من خلال استخدام العناصر الجديدة في لغة html5 semantics elements والتي تهتم بها محركات البحث لتحسين معيار accessibility والهام لذوي الاعاقات البصرية.
يقوم Flexbox
بالتحكم بهيكلة مجموعة من العناصر التي تعطي تنسيقا معينا عند
تصميم قالب ويب بسهول وباقل اسطر كود خلاف عناصر اخرى داخل لغة css
وهو ما سنراه داخل كود style.css المرفق.
أما فيما يتعلق بالعناصر المنطقية داخل لغة html وتعرف semantics elements فيقصد بها اختيار عناصر عند بناء القالب
معبرة عن المحتوى فمثلا عند بناء الهيدر فيجب اختيار عنصر header وعند اختيار سيكشن معين او حاوية فيجب اختيار
عنصر section وعند اختيار سايد بار او عمود جاني فيجب اختيار
عنصر aside وهكذا وهو ما سنراه داخل صفحة index.html
المرفقة مع الموضوع.
كود المشروع source code
صفحة القالب الرئيسية index.html
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="عالم واحد للاعلام والبرمجيات موقع
اخباري متميز يتناول تطوير المحتوى الرقمي ">
<meta name="keywords" content="تطوير محركات البحث , دورات في البرمجة">
<title>عالم واحد للاعلام والبرمجياتtitle>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
head>
<body>
<header>
<a href="" class="slogan">عالم واحد للاعلام والبرمجياتa>
<nav class="nav-header">
<a href="">رئيسيةa>
<a href="#programming">برمجياتa>
<a href="#arts">فنونa>
<a href="#seo">سيوa>
nav>
header>
<section class="ticker-wrap">
<div class="ticker-move">
<div class="ticker-item">يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
div>
div>
section>
<section class="first-section">
<div class="section-one">
<img src="images/3df.jpg" alt="">
<h1>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
h1>
<img src="images/3df.jpg" alt="">
<h1>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
h1>
div>
<div class="line-one">div>
<div class="section-two">
<img src="images/10hd_1.jpg" alt="">
<h1>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
h1>
<img src="images/10hd_1.jpg" alt="">
<h1>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
h1>
div>
section>
<section class="second-section">
<section class="articles" id="arts">
<h1 class="arts-title">فنونh1>
<div class="content-one">
<div class="article">
<img src="images/9sdf_1.jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
p>
div>
div>
<div class="article">
<img src="images/11dfg.jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
p>
div>
div>
<div class="article">
<img src="images/11hg.jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن
p>
div>
div>
<div class="article">
<img src="images/273558046_814328699524427_2125822099744168478_n.jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطن
p>
div>
div>
div>
section>
<section>
<h1 class="mostreading-title">الاكثر قراءةh1>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
<div class="mostreading">
<img src="images/10hd_1.jpg" alt="">
<p>يتلاعب بالواقع في منحوتات سريالية
تخرج من العقل الباطنp>
div>
section>
section>
<h1 class="programming-title">برمجياتh1>
<section class="programming" id="programming">
<div class="content-programming">
<div class="article-program">
<img src="images/274593794_327467195999709_2879867858172662783_n.jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن
p>
div>
div>
<div class="article-program">
<img src="images/274613780_376142600641704_7879597467917361098_n
(1).jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن
p>
div>
div>
<div class="article-program">
<img src="images/274613780_376142600641704_7879597467917361098_n.jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن
p>
div>
div>
<div class="article-program">
<img src="images/274676234_244466257901166_4295243487542292119_n.jpg" alt="">
<div class="info">
<p>يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن
p>
div>
div>
div>
section>
<section class="section-three">
<aside class="aside">
<h1 class="aside-title">احدث الموضوعاتh1>
<div class="recent-post">
<img src="images/10gfd.jpg" alt="">
<p > يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن p>
div>
<div class="recent-post">
<img src="images/10gfd.jpg" alt="">
<p > يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن p>
div>
<div class="recent-post">
<img src="images/10gfd.jpg" alt="">
<p > يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن p>
div>
<div class="recent-post">
<img src="images/10gfd.jpg" alt="">
<p > يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن p>
div>
<div class="recent-post">
<img src="images/10gfd.jpg" alt="">
<p > يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن p>
div>
<div class="recent-post">
<img src="images/10gfd.jpg" alt="">
<p > يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطن p>
div>
aside>
<div class="three-center" id="seo">
<h1 class="center-title">سيو SEOh1>
<img src="images/10hd_1.jpg" alt="">
<p> يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطنp>
<img src="images/10hd_1.jpg" alt="">
<p> يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطنp>
div>
<div class="three-right">
<h1 class="trend-title">ترندh1>
<img src="images/9sdf_1.jpg" alt="" >
<p> يتلاعب بالواقع في منحوتات سريالية تخرج من العقل الباطنp>
div>
section>
<footer>
<a href="https://www.awamp.com">عالم احد للاعلام والبرمجياتa>
<div>
<a href=""><i class="fa
fa-facebook">i>a>
<a href=""><i class="fa fa-twitter">i>a>
div>
footer>
body>
html>
أقرأ أيضا .. سورس كود مجاني سلة مشتريات
صفحة التنسيقات style.css
*{
box-sizing: border-box;
margin: 0 0;
}
body{
direction: rtl;
margin: 0 15px;
}
header{
width: 100%;
display:flex;
background-color: rgb(101, 5, 5);
justify-content: space-between;
padding: 10px 100px;
}
.slogan{
color:white;
text-decoration: none;
font-size: 20px;
font-weight: bolder;
}
.nav-header a{
color:white;
text-decoration: none;
font-size: 20px;
font-weight: bolder;
padding-left: 10px;
}
.ticker-wrap{
background-color: beige;
overflow: hidden;
}
@keyframes ticker {
100%{
transform: translate3d(-100%, 0, 0)
}
}
.ticker-move {
animation: ticker 10s infinite;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
margin-top: 5px;
margin-bottom: 5px;
}
.first-section{
display: flex;
width: 100%;
flex-direction:row-reverse;
justify-content: space-between;
box-sizing: border-box;
margin-top: 20px;
}
.section-one{
display: flex;
flex-direction: column;
box-shadow: 0 5px 25px rgb(216, 146, 146);
}
.section-one h1{
text-align: center;
}
.section-one img{
width: 100%;
border-radius: 20px;
}
.section-two{
box-shadow: 0 5px 25px rgb(216, 146, 146);
}
.section-two img{
width: 100%;
border-radius: 20px;
margin-bottom: 10px;
}
.section-two{
margin-left: 1%;
}
.section-two h1{
text-align: center;
margin-bottom: 10px;
}
.line-one{
background-color: rgb(205, 202, 202);
height: 600px;
margin-left: 0.5%;
text-align: center;
width: 2%;
border-radius: 10px;
}
.second-section{
display: flex;
margin-top: 50px;
flex-direction: row;
}
.articles{
width:70%;
}
.content-one{
display: flex;
flex-wrap: wrap;
}
.article{
width:45%;
margin-left: 20px;
}
.arts-title{
background-color: aquamarine;
width: 90%;
border-radius: 10px;
padding: 5px 10px;
}
.info{
margin-bottom: 10px;
text-align: center;
}
.article img{
width:100%;
margin-bottom: 10px;
height: 420px;
border-radius: 10px;
box-shadow: 0 5px 25px rgb(216, 146, 146);
}
.mostreading{
display: flex;
align-items: center;
}
.mostreading img{
display: flex;
width:150px;
margin-bottom: 10px;
margin-left: 5px;
box-shadow: 0 5px 25px rgb(216, 146, 146);
border-radius: 10px;
}
.mostreading p{
text-align: center;
box-shadow: 0 5px 25px rgb(216, 146, 146);
}
.mostreading-title{
background-color: aquamarine;
border-radius: 10px;
padding: 5px 10px;
}
.programming{
display: flex;
flex-direction: row;
/* margin-top: 50px; */
width: 100%;
/* padding: 2px 10px; */
}
.content-programming{
display: flex;
flex-direction: row;
justify-content:center;
margin-top: 40px;
}
.article-program{
margin-left: 5px;
}
.article-program img{
width: 100%;
border-radius: 10px;
}
.programming-title{
margin-top: 30px;
background-color: aquamarine;
border-radius: 10px;
width:20%;
}
.section-three{
display: flex;
flex-direction: row;
margin-top: 30px;
}
aside{
width: 25%;
}
.recent-post{
display: flex;
flex-direction: row;
margin-left: 2%;
margin-bottom: 10px;
}
.recent-post img{
display: flex;
width:50%;
}
.recent-post p{
display: flex;
width:50%;
}
.three-center{
display: flex;
width:40%;
flex-direction: column;
align-items: center;
margin-left:2%;
}
.three-center img{
width:100%;
border-radius: 10px
}
.three-right{
display: flex;
width: 35%;
flex-direction: column;
border-radius: 10px
}
.three-right img{
display: flex;
width:100%;
align-items: center;
}
.aside-title{
background-color: aquamarine;
border-radius: 10px;
padding:5px 10px;
}
.center-title{
background-color: aquamarine;
border-radius: 10px;
padding:5px 10px;
}
.trend-title{
background-color: aquamarine;
border-radius: 10px;
padding:5px 10px;
}
footer{
background-color: rgb(120, 74, 6);
display: flex;
justify-content: space-between;
padding: 10px 20px;
}
footer a{
text-decoration: none;
color: white;
}
للحصول على الكود كامل بالصور واية استفسارات
يرجي ارسال رسالة على صفحتنا على فيس بوك على الرابط التالي برسالة تطلب فيها
الكود مرفقة ببريدك الالكتروني على جيميل وذلك بعد الاشتراك في قناتنا على يوتيوب
.
https://www.facebook.com/alamwaheda3mal
موضوعات ذات صلة
-
مشروع تصميم قالب أخبار متوافق مع ....
-
ترمز HTML إلى Hyper Text Markup Language ....
-
تعني الوصف والمقصود بها وصف محتو....
-
تعلم البرمجة سلسلة دروس html الدرس....
-
منع الحقن و تقليل كمية البيانات ا....
-
نتناول في هذا الجزء من مشروع برمج....