مشروع تصميم قالب أخبار متوافق مع السيو بلغة html css مع سورس كود مجاني
 

مشروع تصميم قالب أخبار متوافق مع السيو بلغة html css مع سورس كود مجاني

 محمد الضبعان   تاريخ النشر2022-07-20 06:19:24.638651 38730058
مشروع تصميم قالب أخبار متوافق مع السيو بلغة 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