COMPILATION OF ACTIVITIES










hi! My name is Adrian and in this video I wiil teach you how to make a simple Html Code and Css.

this topic is called External CSS style of color values



bago natin simulan mag lalagay muna tayo ng <doctype> sa first line para basahin ito kung anong version

ng  html 

at susunadan ng head and ang nasa head ay kung ano ang nilalaan nito katulad ng title na 

makikita sa video.


ang susunod naman dito ay ang pag link ng CSS sa HTML mo katulad nito, para ma link ay kailangan

tugma o pareshas ang pangalan nito at kailangan may "<link href=" sa simula ng pangalan.


and susunod naman na line ay ang style , sa style dito mo i eedit kung paano ang magiging itsura ng iyong 

ginagawa pag tapos mo ito isave, katulad nalang ng nasa video , mero itong body, colum at row , 

dahil yan ang gagawin nating style sa gagawin natin.


ang susunod naman ay ang body kung saan mo ilalagay and mga ditalye ng mga gagawin mo

sa baba nito ay mayroong <h1> </h1> dito mo ilalagay ang gusto mong title o pamagat ng iyong ginagawa.


sa baba nito ay nag lagay tayo ng div class= row para ang kalalabasan nya ay sunod sunod pagilid 

katulad nito<show row>


 sa baba naman ng row at mag lalagay tayo ng colum pra naman mag sunod  sunod ang mga nasa babang pangalan

 katulad nito < show colum >


sa ibaba ng colum ay dito na lalabas ang magiging pangan at kulay ng gagawin natin ang gagawin nating mga 

kulay ay ibat ibang shades ng green. 


makikita natin dito sa highlight ito ang magiging link parang mag tugma ang html natin at css na kulay katulad nito.


sa baba naman ay <h1> ulit at mag sisilbing pangalan ng kulay na lalabas.


sa baba nito ay may </div> ito ang magsisilbing hangganan ng bawat isa.


at tatapusin natin ito sa </div> </body> </html> 


pumunta naman tayo sa gagawin nating css.


sa css ay hindi na kailangan pa mag lagay ng doctype dahil hindi naman natin ito bubuksan .


sa simula ay makikita agad and div.green1 mapapansin na magkaparehas ng pangalan nito at nito <show html .

ito ang nagsisilbing partner nilng dalawa , 


sa baba naman ay ang background:rgba  ito ang magiging kulay ng bawat isa 

mayroon itong ( 3, 252, 48 ,1 )  ito ang code para sa kulay green, 

mapapansin sa mga susunod na code ay bawat dulo nito ang mag kakaiba.

ang bawat dulo nito ay ang kanilang gradient upang mag ibaiba ang 

opacity nito o value. 


salamat sa panonoood sana may natutuhan kayo.

 


<!DOCTYPE html>


<html>


<head>

    ​<meta name="viewport" content="width=device-width, initial-scale=1">

<style>



fieldset 

   {

background: #9e4333;

  

   }

          

    body {background-color: #00A4E4;}

    }

    

    

iframe:focus {


  outline: none;


}


iframe[seamless] {


  display: block;


}


.navbar {


  overflow: hidden;


  background-color: #121211;


}




.navbar a {


  float: left;


  font-size: 16px;


  color: #9e4333;


  text-align: center;


  padding: 14px 16px;


  text-decoration: none;


}




.dropdown {


  float: left;


  overflow: hidden;


}




.dropdown .dropbtn {


  font-size: 16px;  


  border: none;


  outline: none;


  color:#9e4333;


  padding: 14px 16px;


  background-color: inherit;


  font-family: inherit;


  margin: 0;


}




.navbar a:hover, .dropdown:hover .dropbtn {


  background-color: orange;


}


.dropdown-content {


  display: none;


  position: absolute;


  background-color: #f9f9f9;


  min-width: 160px;


  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);


  z-index: 1;


}


.dropdown-content a {


  float: none;


  color: blue;


  padding: 12px 16px;


  text-decoration: none;


  display: block;


  text-align: left;


}


.dropdown-content a:hover {


  background-color:orange;


}


.dropdown:hover .dropdown-content {


  display: block;


}


footer{

    clear:both;

}


*{box-sizing:border-box}

html{background:;}

footer,header{background: #00b4de; color: #fbfbfb; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; padding: 2em 0;}




</style>


</head>


<body>

<fieldset>


<div class="navbar">


  <a href="#home">Home</a>


  

  

  <div class="dropdown">


    <button class="dropbtn">social accounts


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://www.facebook.com/adrian.guisihan.3" target="iframe1">Facebook</a>


      <a href="https://www.instagram.com/adywooooow/" target="iframe1">Instagram</a>


      <a href="https://twitter.com/adywooooow" target="iframe1">E twitter </a>


     


    </div>


  </div> 

  


  <div class="dropdown">


    <button class="dropbtn">MIDTERM WP 


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://webprogramming09.blogspot.com/2021/04/blog-post.html" target="iframe1">Exercise 6</a>


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-7-select-box-price-list.html" target="iframe1">Exercise 7</a>

      

      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-8-change-button-properties.html" target="iframe1">Exercise 8</a>


    </a>


    </div>


  </div> 


<div class="dropdown">


    <button class="dropbtn">MIDTERM  IMD


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-6-external-css-style-of-color.html" target="iframe1">Exercise 6</a>


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-7-css-layout-and-web-page.html" target="iframe1">Exercise 7</a>


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-8-css-side-bar-navigation.html" target="iframe1">Exercise 8 </a>


     


    </div>


  </div> 



<div class="dropdown">


    <button class="dropbtn">FINALS  WP


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://finalssss009.blogspot.com/2021/05/exercise-10-animated-web-page.html" target="iframe1">Exercise 10</a>


      <a href="https://finalssss009.blogspot.com/2021/05/exercise-11-youtube-video-link.html" target="iframe1">Exercise 11</a>


      <a href="https://finalssss009.blogspot.com/2021/06/exercise-12-responsive-web-page-design.html" target="iframe1">Exercise 12 </a>


     


    </div>


  </div> 




<div class="dropdown">


    <button class="dropbtn">FINALS IMD


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://finalssss009.blogspot.com/2021/05/exercise-10-drawing-in-canvass.html" target="iframe1">Exercise 10</a>


      <a href="https://finalssss009.blogspot.com/2021/05/exercise-11-counting-drill-game.html" target="iframe1">Exercise 11</a>


      <a href="https://finalssss009.blogspot.com/2021/06/exercise-012-chat-box.html" target="iframe1">Exercise 12 </a>

      <a href="https://finalssss009.blogspot.com/2021/06/exercise-13-login-signup-formsimd.html" target="iframe1">Exercise 13 </a>


     


    </div>


  </div> 

<div class="dropdown">


    <button class="dropbtn">PROJECT


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://finalssss009.blogspot.com/2021/06/html-and-css-tutorial-color-value.html" target="iframe1">Video tutorial </a>



     


    </div>


  </div> 


</div>



<div style="padding: 55px 32px;height:3500px; WIDTH="100%">


  <h2 id="home"> COMPILATION OF ACTIVITIES </h2>


 <iframe name ="iframe1" src="https://finalssss009.blogspot.com/" width="100%" height=600px> 


 </iframe>

 <br>

<br>



<iframe name ="iframe2" src="https://www.bing.com/" noframe width="100%" height=200px>  </iframe>


  <hr size=10 color=#000>  



<br>



  

  <p id="news">News</p>


  <img src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif" alt="foo" width= 100% height =550 valign="middle" ></img> 

  




  <hr size=10 color=#000> 

    <p id="contact">My Art Works</p>


  <a href="https://ibb.co/qFXZ2HR"><img src="https://i.ibb.co/4g9Q0bj/bg.png" alt="bg" border="0"></a>


  <hr size=10 color=#000> 


<img src="https://media.giphy.com/media/3o6Zt6KHxJTbXCnSvu/giphy.gif " alt="foo" width= 100% height =500 valign="middle" border="10" ></img> 


</div>


        <footer>

            &copy; 2021 | Adywooooow

          

        </footer>

<br>



</fieldset>


</body>




</html>

Comments

Post a Comment

Popular posts from this blog

Exercise 11 : Counting Drill Game (IMD)

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Game 0v0 </title> <style> html { font-family: Century Gothic; margin-left: 20%; background-color: #17b8d4;     }        body { max-width: 100px; min-width: 480px;     } fieldset { background-color:#ae94e0; } button { background-color:#c9c012; color: black; border-radius: 30px; width: 200px; height: 60px; } </style> </head> <body> <h1>Count Game!!!</h1> <p> Let's count the shapes on the screen!!!</p> <fieldset> <canvas id="myCanvas" width="995" height="500" style="border:20px;"> </canvas> <label> How many shapes do you see??? </label> <input type="number" id="answer"> </input> <!-- <button id="colors" onclick="colors()" > Colors </but...
Read more

Exercise 12 Responsive Web Page Design (WP)

Image
  HTML <!DOCTYPE html> <html> <head>     ​<meta name="viewport" content="width=device-width, initial-scale=1"> <style> fieldset     { background: #9e4333;       }                body {background-color: #00A4E4;}     }           iframe:focus {   outline: none; } iframe[seamless] {   display: block; } .navbar {   overflow: hidden;   background-color: #121211; } .navbar a {   float: left;   font-size: 16px;   color: #9e4333;   text-align: center;   padding: 14px 16px;   text-decoration: none; } .dropdown {   float: left;   overflow: hidden; } .dropdown .dropbtn {   font-size: 16px;     border: none;   outline: none;   color:#9e4333;   padding: 14px 16px;   background-color: inherit;   font-family: inherit;   margin: 0;...
Read more

Exercise 12 Chat box (IMD)

Image
  HTML___ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Message Box </title> <link rel="stylesheet" href="Exercise 012 Chat box css.css"> </head> <body> <section> <h1> HI! Welcome to Alexa 👩 click the button to assist you </h1> <button class="chat-btn"> <b> CHAT </b> </button> <div id="chat-container" onclick="changeColor()" class="chat-popup"> <div class="chat-area"> <div class="income-msg"> <img src="https://i.ibb.co/31dgnVS/rikkaasa.png" class="Alexa" alt="Alexa"> <span class="msg"> What can I help you?  </span> </div> </div> <div class="input-area"> <input id="name-input" t...
Read more