how to mix php in html

When I use iframe in HTML file that linked to test.php .. the result is OK

Test.php :

<?php     
   $host = "localhost";
   $user = "user";
   $pass = "pass";
   $database = "db";
   $koneksi = mysql_connect ($host,$user,$pass);

   mysql_select_db($database,$koneksi) or die ("error");

   $result = mysql_query("SELECT * FROM pengumuman"); 
   $i = 0;

   while($row = mysql_fetch_array($result)) { 
        echo "<li><a href='#'>".$row['judul']."</a></li>";
        $i++;
   } 

   mysql_close($koneksi); 
?>

But I do want to separate this test.php, so I mixed it in my HTML file

<?php 
   $host = "localhost";
   $user = "user";
   $pass = "pass";
   $database = "db";
   $koneksi = mysql_connect ($host,$user,$pass);

   mysql_select_db($database,$koneksi) or die ("error");

   $result = mysql_query("SELECT * FROM pengumuman"); 
   $i = 0;

   while($row = mysql_fetch_array($result)) { 
?> 
   <li><a href='#'><?php $row['judul'] ?> </a></li>

<?php 
        $i++;
   }   
    mysql_close($koneksi); 
?>

Read More

cool html tricks anyone can apply on website

1. Parallax Effect

You have probably seen the Parallax Effect in fancy-magazine-style online articles. As you scroll down a feature article, the background image appears to scroll at a different pace. As you enter a different section of the article, the background image changes. It’s a cool effect that adds visual depth to the content.How to Create a Parallax Desktop Background With Rainmeter How to Create a Parallax Desktop Background With RainmeterIf you desire a live animated desktop wallpaper, look into Rainmeter! Here we'll show you how to create a unique parallax effect for your Windows desktop background.READ MORE

Since this is not a pure HTML effect, we can only offer animated GIFs to demonstrate the output.

Below you’ll see a basic version of the Parallax effect; a box of text moves across a static background image as you scroll.

You can play with the effect and copy the code for the above simple Parallax scrolling effect from W3Schools.

In its most sophisticated version, this effect is a combination of HTML, CSS, and JS.

Go ahead and fetch the codes for the above Header/Footer Parallax effect from CodePen.

2. Scrollable Text Box

This is a simple but helpful HTML element that lets you pack long snippets of text into a compact format. This way it doesn’t take up the entire space on the page.

HTML input:

<div style=”width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;”>Your text will show here. And you can scroll down to go through all of it. You just have to add a sufficient amount of text to make the scrollbars show. Obviously, this is not enough,o let’s assume we have a little more to say. Eventually, the scrollbars will come in handy. That’s it! :)</div>

Output demo:

Your text will show here. And you can scroll down to go through all of it. You just have to add a sufficient amount of text to make the scrollbars show. Obviously, this is not enough,o let’s assume we have a little more to say. Eventually, the scrollbars will come in handy. That’s it! :)

You can play with the colors and the size of the text box to make it fit your needs.

If you desire something a little fancier, you can also fetch code for a customizable comment box from Quackit. They offer several templates, but you can also use their editor to manually change and teset (run) your custom code.

3. Highlight Text

With a simple <span> HTML tag you can add a ton of effects to your text or images. Note that not all of them work across browsers. The ones mentioned here work in Google Chrome, Microsoft Edge, and Mozilla Firefox.

Input:

<span style=”background-color: #FFFF00″>Your highlighted text here.</span>

Output demo:

Your highlighted text here.

4. Add Background Image to Text

Likewise, you can change the color of your text or add a background image. This one only becomes really exciting if your text has a big enough size, which is why I also increased the font size.

Input:

<span style=”background-image: url(https://cdn.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt”>MakeUseOf presents…</span>

Note that you could also add the style and font elements to a <strong> tag for the same effect, plus bolded text.

Output demo:

MakeUseOf presents…

5. Add Title Tooltip

A title tooltip comes up when you scroll with the mouse over a piece of “manipulated” text or image. You know these from images or linked text. Here is how you can add this one to plain text.

Input:

<span title=”See, this is the tooltip. :)”>Move your mouse over me!</span>

Output demo:

Move your mouse over me!

6. Make Scrolling or Falling Text

When you search for “marquee html” on Google, you’ll discover a little Easter Egg. See the scrolling search result count? That’s an effect created by the now obsolete marquee tag. While this HTML feature has been deprecated, most browser still support it.

Input:

<marquee>Make it scroll, baby!</marquee>

Output demo:

Make it scroll, baby!

You can add further attributes to control the scrolling behavior, background color, direction, height, and more. These effects can become quite irritating if you overdo it.

For a cool falling text effect, head to Quackit again and copy their highly customized marquee code.

7. Add a Switchmenu

The most exciting HTML effects are dynamic HTML effects. However, they are often script based. Here is one effect for menus that I have come to adore. It’s a little more complicated than your avarage HTML tag because it works with a style sheet and scripts. The advantage is that you don’t have to upload a CSS or script file to make it work, you can plant all necessary information into the <head> section of your website.

Input:

Add the following code into the <head> section of your page:

<style type=”text/css”>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
</style><script type=”text/javascript”>/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu=”yes” //”yes” or “no”. Make sure each SPAN content contains an incrementing ID starting at 1 (id=”sub1″, id=”sub2″, etc)
var persisttype=”sitewide” //enter “sitewide” for menu to persist across site, “local” for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write(‘<style type=”text/css”>n’)
document.write(‘.submenu{display: none;}n’)
document.write(‘</style>n’)
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById(“masterdiv”).getElementsByTagName(“span”); //DynamicDrive.com change
if(el.style.display != “block”){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className==”submenu”) //DynamicDrive.com change
ar[i].style.display = “none”;
}
el.style.display = “block”;
}else{
el.style.display = “none”;
}
}
}function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu==”yes”){
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!=””)
document.getElementById(cookievalue).style.display=”block”
}
}function savemenustate(){
var inc=1, blockid=””
while (document.getElementById(“sub”+inc)){
if (document.getElementById(“sub”+inc).style.display==”block”){
blockid=”sub”+inc
break
}
inc++
}
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=(persisttype==”sitewide”)? blockid+”;path=/” : blockid
document.cookie=cookiename+”=”+cookievalue
}if (window.addEventListener)
window.addEventListener(“load”, onloadfunction, false)
else if (window.attachEvent)
window.attachEvent(“onload”, onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu==”yes” && document.getElementById)
window.onunload=savemenustate</script>

And this code goes wherever you want the dynamic menu to appear.

<!– Keep all menus within masterdiv–>
<div id=”masterdiv”><div onclick=”SwitchMenu(‘sub1’)”>Topics</div>
<span id=”sub1″>
– <a href=”//www.makeuseof.com/service/browser”>Browsers/Addons</a><br>
– <a href=”//www.makeuseof.com/service/web_based”>Web Apps</a><br>
– <a href=”//www.makeuseof.com/service/how-to”>How-To Tips</a><br>
– <a href=”//www.makeuseof.com/service/applications”>Cool Software</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub2’)”>Staff Writers</div>
<span id=”sub2″>
– <a href=”//www.makeuseof.com/tag/author/karl-l-gechlik/”>Karl Gechlik</a><br>
– <a href=”//www.makeuseof.com/tag/author/tinsie/”>Tina</a><br>
– <a href=”//www.makeuseof.com/tag/author/varunkashyap/”>Varun Kashyap</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub3’)”>Miscellaneous</div>
<span id=”sub3″>
– <a href=”//www.makeuseof.com/about/”>About</a><br>
– <a href=”//www.makeuseof.com/contact”>Contact</a><br>
– <a href=”//www.makeuseof.com/archives-2″>Archives</a><br>
– <a href=”//www.makeuseof.com/disclaimer”>Disclaimer</a><br>
</span></div>

Output demo:

Unfortunately, we cannot demonstrate this effect here. But the original source, Dynamic Drive, features a working copy of this dynamic HTML effect.

Bonus: Tableizer!

If you want to display a spreadsheet on your site, let Tableizer! transform your data into an HTML table. Just paste the raw data from Excel, Google Doc, or any other spreadsheet into the respective field, tweak the table options, and click Tableize It! to receive the HTML output.

Now you can copy the HTML code and add it to your website. Consider editing the background-colors to make it look a lot cooler.

While this is not really an HTML effect, it’s quite handy.

Read More

HTML ELEMENT

An HTML element usually consists of a start tag and end tag, with the content inserted in between:

<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

Nested HTML Elements
HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained
The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

The element content is another HTML element (the <body> element).

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

The element content is two other HTML elements (<h1> and <p>).

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

<h1>My First Heading</h1>
The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

<p>My first paragraph.</p>

Do Not Forget the End Tag
Some HTML elements will display correctly, even if you forget the end tag:

Example
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

The example above works in all browsers, because the closing tag is considered optional.

Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.

Empty HTML Elements
HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

Read More

HTML BASICS YOU SHOULD KNOW

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Exampl
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag:

Example
<a href="https://www.w3schools.com">This is a link</a>
Try it Yourself »
The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Read More

HTML EDITING PROGRAMS

Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the four steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)
Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Ignore rich text commands in HTML files".

Then open a new document to place the code.

Step 2: Write Some HTML
Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>

<h1>NAMES</h1>

<p>My YOUR LAST NAME.</p>

</body>
</html>


Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.


Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).



Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

NAMES

YOUR LAST NAME

Read More

TOP PHP PROJECTS FOR BEGINERS

Here is a list of project ideas for PHP beginners. Learning a programming language can sometimes be a little tricky, having a project helps you to structure your learning and get extra motivation.

To-do list.
Make a simple web app where you could add, mark as completed and delete to-do items.
CMS (content management system) for a blog or portfolio (a.k.a very very basic version of WordPress).
Create a simple login/registration system, ability to add and edit content once you are logged in which would be shown on the homepage.
Shopping cart.
Make a list of products with prices and availability and create ability for people to add products to a shopping basket and then send yourself a confirmation email once a person decides to buy things.
RSS news reader.
Build an app which would get you the latest headlines from RSS of your favourite blog.
Basic forum.
Login/Register, make a topic, leave replies, edit content, delete content. Create different permissions for different users – simple users should only be allowed to edit (not delete) the topics and replies that were created by them. Admins should be able to delete and edit anything.
Simple Youtube Player which would allow you to create custom playlists depending on your mood.
Make a list which would automatically play your favorite Youtube songs. Add a search functionality for new songs from Youtube and
Set aside few days to read through the PHP manual and get to know everything there is.
Pick element by element and try to understand what it does and how it’s used. Don’t worry if it doesn’t make much sense straight away. It is hard work, that’s why programmers get paid a lot.
Exercise generator.
Create a database of exercises and make an interface to suggest some exercises depending on the chosen difficulty level.
Simple image gallery.
Create a web app which would allow you to upload images from your computer and would make a nice image gallery with thumbnails of these pictures.
Simple reminder system.
Put a list of things you want to remember and make the system send you an email on a certain time.
App which would visualise how you 24 hours looks like.
Build an app which would allow you to add what you usually do over 24 hours and then it would visualise it with a diagram (or a few).
Simple unit converter.
Kilos to pounds, meters to yards, Celsius to Fahrenheit and then vice versa.
Simple game of Dice Roll.
Build a guessing game where you enter a number from 1 to 6 and then roll the dice to see if you were correct.
Simple game of Rock / Paper / Scissors with user interface and game statistics.
If you’re feeling creative, make it Rock / Paper / Scissors / Lizard / Spock
FamilyBook.
Build a very basic version of Facebook for your family to communicate. Build user profiles, permissions and news feed.
Quiz app.
Make a simple app where you could create quizzes with multiple options to answer and then send a link to another person to solve it and the app would tell how well they’ve performed.
Combine any of these projects. Incorporate Image gallery into FamilyBook or add your games to your portfolio.
Each of these projects might take you a good week or two to complete. Maybe even longer – don’t rush too much. Have fun – programming is all about having fun.

I described these ideas rather vaguely on purpose – I don’t want to bias your mind. These are just starting points. Each of these ideas can be built into something very very simple or very very complex.

If you still don’t know where to start with those ideas, try googling for a tutorial. “How to build simple [project idea] with PHP” should give you a good start.

It’s normal to now know where to start at first. Once you feel comfortable, try to make up challenges, convert them into simple problems and figure out how to solve those problems

Read More

website/blog responsiveness

What is Responsive Web Design?

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).

Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

Setting The Viewport

When making responsive web pages, add the following <meta> element in all your web pages:

Example

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

This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Without the viewport meta tag:

With the viewport meta tag:

Read More