Articles Area Blogger: HTML

Showing posts with label HTML. Show all posts

Feb 20, 2023

How To upload multiple image files to the server at once using HTML & PHP Code

In the Following code we will try to upload multiple image files to the server at once to the "img" folder under the following conditions:

1-Use a random coding method to change the file name and prevent filename duplications.

2-If a filename already exists, change the name to avoid conflicts.

3-Show all images in separate DIVs after uploading, with their new names displayed underneath.

You can accomplish this using PHP and HTML. The HTML code will contain a form with an input field that accepts multiple image files. The PHP code will retrieve the uploaded images using the $_FILES superglobal and loop through each image, moving it to the specified "img" folder.

To prevent filename duplications, the code will generate a random name for each file using the uniqid() function. If a file with the same name already exists, the code will keep generating new names until it finds a unique one.

Finally, the code will display each uploaded image in a separate div with the new filename displayed underneath using the basename() function. Note that you'll need to ensure that the "img" folder exists and has the appropriate write permissions.

HTML Code:

<!DOCTYPE html>

<html>

<head>

<title>Upload Images</title>

</head>

<body>

<button type="submit" name="upload">Upload Images</button>

</form>

</body>

</html>

PHP file code:

/* upload.php */

<?php

if(isset($_POST['upload'])){

$images = $_FILES['images'];

$upload_dir = 'img/';

$uploaded = array();

foreach($images['name'] as $key=>$image){

$image_tmp = $images['tmp_name'][$key];

$image_name = $images['name'][$key];

$image_size = $images['size'][$key];

$image_ext = pathinfo($image_name, PATHINFO_EXTENSION);

$image_path = $upload_dir . uniqid() . '.' . $image_ext;

// Check if file already exists, change the name

while(file_exists($image_path)){

$image_path = $upload_dir . uniqid() . '.' . $image_ext;

}

// Upload the file

if(move_uploaded_file($image_tmp, $image_path)){

$uploaded[] = $image_path;

}

// Display uploaded images

foreach($uploaded as $image){

echo '<div><img src="'.$image.'"><br>New Name: '.basename($image).'</div>';

}

How To Create Your Own Article Editor with HTML & JavaScript Code

The basic HTML and JavaScript code required to create an article editor:

The following code creates a toolbar with dropdown menus to select font-name, font-size, font-color, and buttons to insert an image, URL, and save the article as an HTML file.

HTML Webpage Code:

<!DOCTYPE html>

<html>

<head>

<title>Article Editor</title>

</head>

<body>

<option value="Arial">Arial</option>

<option value="Verdana">Verdana</option>

<option value="Times New Roman">Times New Roman</option>

</select>

</select>

<button id="insert-image">Insert Image</button>

<button id="insert-url">Insert URL</button>

<button id="save-article">Save Article</button>

</div>

<p>Start typing here...</p>

</div>

</body>

</html>

JavaScript File Code:

/* article-editor.js file */

// Get DOM elements

const editor = document.getElementById('editor');

const fontSelector = document.getElementById('font-selector');

const sizeSelector = document.getElementById('size-selector');

const colorPicker = document.getElementById('color-picker');

const insertImageBtn = document.getElementById('insert-image');

const insertUrlBtn = document.getElementById('insert-url');

const saveArticleBtn = document.getElementById('save-article');

// Add event listeners

fontSelector.addEventListener('change', () => {

document.execCommand('fontName', false, fontSelector.value);

});

sizeSelector.addEventListener('change', () => {

document.execCommand('fontSize', false, sizeSelector.value);

});

colorPicker.addEventListener('change', () => {

document.execCommand('foreColor', false, colorPicker.value);

});

insertImageBtn.addEventListener('click', () => {

const url = prompt('Enter the image URL');

if (url) {

document.execCommand('insertImage', false, url);

}

});

insertUrlBtn.addEventListener('click', () => {

const url = prompt('Enter the URL');

if (url) {

document.execCommand('createLink', false, url);

}

});

saveArticleBtn.addEventListener('click', () => {

const html = editor.innerHTML;

const a = document.createElement('a');

const file = new Blob([html], {type: 'text/html'});

a.href = URL.createObjectURL(file);

a.download = 'article.html';

a.click();

});

Feb 15, 2023

How to Write Your First HTML Code of a Static Webpage

HTML is the foundation of the internet. It stands for HyperText Markup Language and is used to create web pages that can be accessed through a web browser. Whether you're interested in building a simple website or a complex application, HTML is the first thing you'll need to learn. In this article, we'll guide you through the steps you need to take to write your first HTML code for a static webpage.

Plan your webpage

The first step to creating a successful webpage is to plan your design. Take the time to think about the layout, colors, images, and text that you want to include on your page. You can sketch your design on paper or use digital tools to create a wireframe. This planning stage will help you stay organized and focused as you write your HTML code.

Choose a text editor

HTML code is just plain text. So, you'll need a text editor to write it. You can use any text editor to create HTML files, including Notepad, Sublime Text, or Atom. Choose one that you feel comfortable with and that has syntax highlighting for HTML. This will make it easier to read your code and identify errors.

Create a new HTML file

Once you've chosen your text editor, create a new file and save it with an .html extension. For example, you can name it "index.html". This file will be the foundation of your webpage. All of your HTML code will be written inside this file.

Add the basic HTML structure

The first thing you need to do is add the basic structure of an HTML document. This includes the document type declaration, the HTML element, the head element, and the body element.

Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

</body>

</html>

The <!DOCTYPE html> line tells the browser that this is an HTML document. The <html> element is the root element of your document. The <head> element contains information about your page, such as the title. The <body> element is where you'll add all of your content.

Add content to your page

Now that you have the basic structure in place, it's time to add some content to your page. You can add text, images, links, and other HTML elements to your page. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to my webpage!</h1>

<p>This is my first HTML webpage.</p>

<img src="image.jpg" alt="My image">

<a href="https://www.example.com">Visit Example.com</a>

</body>

</html>

In this example, we've added a heading (<h1>) and a paragraph (<p>) to the body of the page. We've also added an image (<img>) and a link (<a>) to external website.

Save and preview your webpage

Once you've added content to your page, save the file and open it in your web browser. You should be able to see the content you've added to your page. If you don't see what you expect, check your code for errors and try again.

Continue learning

This is just the beginning of your journey to learn HTML. There are many other HTML elements and attributes that you can use to create more complex web pages. Take the time to explore HTML tutorials and online courses to continue your learning.

Articles Area Blogger