Ashish Awasthi's Blog: Html

Showing posts with label Html. Show all posts

Friday 14 December 2018

Top 20 Most Popular Technologies (Programming/Scripting Languages) in 2018

2018 came to an end and like every year StackOverflow performed a developer community survey asking developers about their favourite technologies, learning process, location, job type, experience etc.

This survey has an opinion of more than 100,000 developers across the world and as per their survey here goes a list of top 20 most popular programming languages across the world.

Here you can see that JavaScript is the winner with 69.8% developers using it and as per StackOverflow's previous year surveys, JavaScript is the most used programming/scripting languages since last 6 years. Java is the 5th most popular programming language with 45.3% developer base.

You can also see that HTML is widely used as it is the second most popular technology. There are more backend developers (57.9%) than front-end developers (37.8%) and you'll be surprised to know that 80% of user are coding as a hobby. There are only 1.7% developers with 30+ years of experience and approx 20% of developers are student. 87% of users taught themselves a new language and framework without taking any course. Python is the fastest growing programming language, for details go through this article - The Incredible Growth of Python

Read complete Stack Overflow Developer Survey 2018

Tuesday 10 July 2018

Styling HTML elements using CSS

In this post, we'll learn about styling HTML elements using CSS code, CSS stands for Cascading Style Sheet. It is used for changing the look of HTML components on the page and is very important for designing a beautiful user interface. After this tutorial, you'll be able to learn the basics about CSS and can use it in any type of web application or technology to beautify components.

CSS can be used in HTML pages in 3 ways, Here we'll see how to style HTML elements.

Inline CSS

Inline CSS is used to decorate a single HTML element and makes use of style attributes. See this example of styling HTML paragraph tag using inline CSS

<!DOCTYPE html>
<html>
<body>

<p style="color:red;font-size:20px;font-weight:bold;">This is a Red bold Paragraph</p>
<p style="color:darkgreen;font-size:15px;font-style:italic;">This is a green italic Paragraph</p>

</body>
</html>

Try this in our HTML Editor

Internal CSS

Internal CSS is used to decorate elements in a single HTML page. It is defined between <style> - </style> tag in <head> section. See this example of using internal CSS in an HTML page

<!DOCTYPE html>
<html>
<body>

<style>
p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
</style>

<p>This is a Red bold Paragraph with a border and background color</p>

</body>
</html>

Try this in our HTML Editor

External CSS

External CSS is used to decorate many HTML pages, Like for designing a website's template we use external CSS, In this, we create a file with .css extension and this file contains CSS code for all page elements.

A CSS file looks like this - style.css

p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
h1{
color:blue;
}

And this is how it is attached to the HTML page

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<p>This is a Red bold Paragraph with a border and background color</p>
<h1>This is the H1 heading</h1>
</body>
</html>

After this information, you'll be able to understand the basics of CSS and get an idea of using styles with any other framework.

Cheers :) Happy Learning

Friday 29 June 2018

HTML Tags and their usage

List of Basic HTML Tags

Here a list of HTML tags with their significant use is given. Read this and try in our online HTML editor. Learning Basic HTML helps in the development of Web Applications.

Tag Name	Tag Code		Purpose
Tag Name	Start Tag	Close Tag	Purpose
HTML	<html>	</html>	Starting & ending tag of page,
HEAD	<head>	</head>	Formatting information, and content is not visible
BODY	<body>	</body>	Contains the visible information
HEADING	<h1>,<h2>,<h3>,<h4>,<h5>,<h6>	</h1>,</h2>,</h3>,</h4>,</h5>,</h6>	Largest to smallest heading
Bold Text	<b>,<strong>	</b>,</strong>	For bold text
Paragraph	<p>	</p>	For writing text in paragraphs
Line Break	<br>	Not needed	Insert a line break
LIST	<ol>	</ol>	For Ordered List
LIST	<ul>	</ul>	For Unordered List
List Item	<li>	</li>	For component of list
IMAGE	<img src="source">	Not needed, </img>	For inserting image in webpage
LINK	<a href="url of page">	</a>	For Hyperlink
CENTER	<center>	<center>	For center alignment
TT	<tt>	</tt>	Typewriter like text
BLOCKQUOTE	<blockquote>	</blockquote>	Intends from both side
HR	<hr>	</hr>	Horizontal Rule
TABLE	<table>	</table>	Specifies the beginning and end of a table
TABLE ROW	<tr>	</tr>	Specifies the beginning and end of a table row
TABLE DATA	<td>	</td>	Specifies the beginning and end of a table cell
TABLE HEAD	<th>	</th>	A normal cell with text that is bold and centered
TABLE BORDER	<table border="1">	</table>	Specifies the border for table
ITALIC	<i>	</i>	For italic text
LESS THAN	<	Not needed	For < sign
GREATER THAN	>	Not needed	For > sign
SUBSCRIPT	<sub>	</sub>	For subscript
SUPERSCRIPT	<sup>	</sup>	For superscript
JAVASCRIPT	<script type="javascript">	</script>	For using javascript

Cheers :) Happy Learning

Thursday 28 June 2018

HTML Tutorial - A Quick Overview for beginners

After this HTML Tutorial, you'll learn about basics of HTML and it's tag. It'll help you in developing and customizing applications and Web sites that make use of HTML. With our online HTML editor, you can run HTML code directly from your browser.

What is HTML-

HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an .htm or .html file extension
An HTML file can be created using a simple text editor as Notepad

HTML Tags-

The HTML tags are used to markup HTML elements
The HTML tags are surrounded by the two characters
The surrounding characters are called angle brackets
HTML tags normally come in pairs
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive

Simply open Online HTML Editor in the new tab Tab and copy HTML code from this page and just paste in the editor, then click on "Run Button" at top of the editor and see your result in the right panel.

Headings in HTML

<html>
<body>
<h1>HTML Largest Heading</h1>
<h2>HTML Second Largest Heading</h2>
<h3>HTML Third Largest Heading</h3>
<h4>HTML Fourth Largest Heading</h4>
<h5>HTML Fifth Largest Heading</h5>
<h6>HTML Smallest Heading</h6>
</body>
</html>

Paragraphs in HTML

<html>
<body>
<p>This is example of paragraph, first paragraph</p>
<p>HTML tutorial, Second paragraph</p>
</body>
</html>

Links in HTML

<html>
<body>
<a href="http://www.awasthiashish.com">Ashish Awasthi's Blog</a>
<br />
<a href="http://www.facebook.com">Link to facebook</p>
</body>
</html>

Ordered List in HTML

<html>
<body>
<ol>
<li>Computers</li>
<li>Software</li>
<li>Laptop</li>
<li>Mobile</li>
</ol>
</body>
</html>

Unordered List in HTML

<html>
<body>
<ul>
<li>Computers</li>
<li>Software</li>
<li>Laptop</li>
<li>Mobile</li>
</ul>
</body>
</html>

Moving text using MARQUEE tag in HTML

<html>
<body>
<marquee>HTML Tutorial - This is moving text</marquee>
</body>
</html>

Images in HTML

<html>
<body>

<img src="http://www.awasthiashish.com/wp-content/uploads/2018/06/logo.png"
alt="Ashish Awasthi's Blog" width="200" height="200">

</body>
</html>

Text in HTML

<html>
<head>
<title>Title</title>
</head>
<body>

<b>Bold Text</b>
<br>
<i>Italic Text</i>
<br>
<u>Underline Text</i>

</body>
</html>

Test your HTML skills with W3School's Quiz

Cheers :) Happy Learning

Wednesday 23 August 2017

Add new row and copy existing row to HTML table using JavaScript

Hello All

This post is about adding new row in HTML table using form entry or copy existing row to table using javascript

So here I have created a HTML page, added a form, two buttons, and a table on page and it looks like this

Wednesday 19 April 2017

Get af:richTextEditor value without HTML formatting and tags using jsoup library

af:richTextEditor

is used to format text in rich text using HTML formatting and it is used to get the formatted text. Previously I have posted about it
Cool Component - Using af:richTextEditor as text editor, HTML editor with custom toolbox in Oracle ADF

Tuesday 25 August 2015

Facebook, Twitter, Google - Create large share buttons using JavaScript

This post is not like my other posts (ADF & Java), It is about creating custom large share buttons for Facebook, Twitter and Google+
Actually this share functionality of social networking sites (Facebook, Twitter, Google+ etc) works on a particular url pattern

Let's take example of Facebook , to share any url on Facebook just pass that url as a parameter in this url
http://www.facebook.com/share.php?u=url
See when i open this url on browser (I have passed www.awasthiashish.com in url parameter)
http://www.facebook.com/share.php?u=www.awasthiashish.com , it shows standard Facebook share page

You might also like:

Tuesday 27 May 2014

ADF Basics : How to use FacesMessage to show multiline message

FacesMessage component is used to show confirmation, warning or informational message in Oracle ADF .In this tutorial, you will see that how to use FacesMessage component to show Multiline Message. Sometimes we need to show multilines message then how we implement this ?

this is same as FacesMessage implementation, you should know that af:messages support HTML formatting, so we use HTML formatting to show multiline messages
see more about FacesMessage -

http://www.awasthiashish.com/2012/10/show-facesmessage-in-oracle-adf.html
about inline message
http://www.awasthiashish.com/2012/10/show-inline-message-in-oracle-adf.html

Managed bean code to show multiline message in ADF using FacesMessage-

    package multilineMessages.view.bean;
     
    import javax.faces.application.FacesMessage;
    import javax.faces.context.FacesContext;
    import javax.faces.event.ActionEvent;
     
    public class MultilineMessageBean {
        public MultilineMessageBean() {
        }
     
        public void showMessage(ActionEvent actionEvent) {
            StringBuilder message = new StringBuilder("<html><body>");
            message.append("<p><b>Hi This is Frist Line--Oracle ADF Message</b></p>");
            message.append("<p><i>Hi This is Second Line--Oracle ADF Message</i></p>");
            message.append("<p><b>Hi This is Third Line--Oracle ADF Message</b></p>");
            message.append("</body></html>");
            FacesMessage fm = new FacesMessage(message.toString());
            fm.setSeverity(FacesMessage.SEVERITY_INFO);
            FacesContext fctx = FacesContext.getCurrentInstance();
            fctx.addMessage(null, fm);
        }
    }

To use for Error and Warning just change FacesMessage.SEVERITY_INFO to SEVERITY_ERROR or SEVERITY_WARN.
It will look like this
You can change your Message accordingly

you can also use some html styles (CSS) to change color of text that appears in message body , see the changed code

    public void showMessage(ActionEvent actionEvent) {
        StringBuilder message = new StringBuilder("<html><body>");
        message.append("<p style='color:navy'><b>Hi This is Frist Line--Oracle ADF Message</b></p>");
        message.append("<p style='color:green'><i>Hi This is Second Line--Oracle ADF Message</i></p>");
        message.append("<p style='color:magenta'><b>Hi This is Third Line--Oracle ADF Message</b></p>");
        message.append("<p style='color:red'><b><i>This is Fourth line--Oracle ADF Message</i></b></p>");
        message.append("</body></html>");
        FacesMessage fm = new FacesMessage(message.toString());
        fm.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext fctx = FacesContext.getCurrentInstance();
        fctx.addMessage(null, fm);
    }

now see the FacesMessage look like this-

Happy Learning :-) Download Sample App

Friday 23 May 2014

Reading html source of a webpage (url) using Oracle ADF (af:richTextEditor) & Java

This post is about a common question asked in java-

How to read page source of a website ? or how to get html source of an url?

so for that there is a simple piece of code to read html source of a webpage using it's url, and i have added af:richTextEditor (ADF Faces component for ricj text formatting) to show html form of url source

I have a page with one input text to capture url entered by user, a button to fetch html source of that webpage and a af:richTextEditor to show source code in editing mode and in html mode

See how to get webpage source from an url using java and save it to a html file (download a webpage ), Bind inputText and richInputText to managed bean and craete a actionListener on button to get source

    // Input text Binding to get URL
    private RichInputText webPageUrlBind;
    // RickInput text Binding to set Source
    private RichTextEditor richTextBind;
    public void setWebPageUrlBind(RichInputText webPageUrlBind) {
        this.webPageUrlBind = webPageUrlBind;
    }

    public RichInputText getWebPageUrlBind() {
        return webPageUrlBind;
    }

    public void setRichTextBind(RichTextEditor richTextBind) {
        this.richTextBind = richTextBind;
    }

    public RichTextEditor getRichTextBind() {
        return richTextBind;
    }
    /**Method to get html source of url (webpage) and set this to rickTextEditor
     * @param actionEvent
     */
    public void getSourceCodeAction(ActionEvent actionEvent) {
        URL url = null;

        try {
            if (webPageUrlBind.getValue() != null) {
                // Define your URL- Get value from input text using binding
                url = new URL(webPageUrlBind.getValue().toString());
            }
            URLConnection conn = url.openConnection();

            // open the stream and put it into BufferedReader
            BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));

            String inputLine;
            String sourceCode = "";

            //Save html file (HTML Source Code of given URL)
            String fileName = "D:/web-content.html";
            File file = new File(fileName);

            if (!file.exists()) {
                file.createNewFile();
            }

            //use FileWriter to write file
            FileWriter fw = new FileWriter(file.getAbsoluteFile());
            BufferedWriter bw = new BufferedWriter(fw);
            System.out.println("Printing WebPage source on console, Please wait...\n");
            while ((inputLine = br.readLine()) != null) {
                System.out.println(inputLine);
                bw.write(inputLine);
                sourceCode = sourceCode.concat(inputLine);
            }

            bw.close();
            br.close();
            richTextBind.setValue(sourceCode);
            AdfFacesContext.getCurrentInstance().addPartialTarget(richTextBind);
            System.out.println("\n\nYour file is save in D drive! Congratulations ");

        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

now click on button and see , here i am getting source code of this blog http://oracleadf-java.blogspot.in/

now switch RichTextMode to see html preview of this source, it is exactly looking like live webpage, it shows one can practice in this ADF Faces's rickTextEditor to learn html tags

and see in D drive of your system a file named web-content created , it contains whole source of this webpage

Cheers - Happy Learning :)

Wednesday 28 August 2013

Cool Component - Using af:richTextEditor as text editor, HTML editor with custom toolbox in Oracle ADF

Hello all,
this post is about af:richTextEditor component in ADF,
This component is used for text formatting ,colors, it supports links,lables, messages etc and can be used as mail editor, blog editor

af:richTextEditor looks like this on page

User can use it for text formatting on page as-

It supports both Rich text and HTML,you can see by switching over editing modes (Rich text editing mode, Source code editing mode)

If you want to use this as simple text editor go to source editing mode and just write plain text

One very good thing is that you can use this HTML editor, go to Source Editing Mode and write HTML code, then switch to Rich Text Editing Mode to view result, so it can be used as basic html editor on web page

HTML code-

Result-

Other than this user can control its toolbox structure and layout, there is a property named ToolboxLayout, some built in value for this property are

all, font, history ,mode, color, formatAll, formatUncommon, justify, list, indent, link, newline
look in snaps-

Thursday 30 May 2013

Add Custom Flash Chat in Oracle ADF Application

In this tutorial i am going to show that how can you add a custom flash chat in your ADF application, and use it to chat with friends.
this is very much simple, as no code required to do this.

Go to http://www.everywherechat.com/ , this site provides free custom flash chat rooms, get html code of your custom chat from here
Create an html page using that code

<html>
<body>
<!-- Begin Everywherechat Room Code -->
    
      <br />
     <script src="http://www.everywherechat.com/e.php?defaultRoom=Lobby&roomList=true&fontSize=12&width=600&height=500&theme=night"></script> 

<!-- End Everywherechat Room Code --> 
</body>
</html>

Now create a Fusion Web Application and create a page in it, call this HTML page in an inlineFrame (af:inlineFrame)

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:panelGroupLayout id="pgl1">
    <af:inlineFrame id="if1" source="/chat.html" inlineStyle="height:700px;width:700px;"/>
  </af:panelGroupLayout>
</jsp:root>

Now Run your application and see your flash chat room is ready - Happy Coding

Download Sample Application-Sample ADF Application

Subscribe to: Posts ( Atom )

Search this blog

Friday 14 December 2018

Tuesday 10 July 2018

Inline CSS

Internal CSS

External CSS

Friday 29 June 2018

List of Basic HTML Tags

Thursday 28 June 2018

What is HTML-

HTML Tags-

Headings in HTML

Paragraphs in HTML

Links in HTML

Ordered List in HTML

Unordered List in HTML

Moving text using MARQUEE tag in HTML

Images in HTML

Text in HTML

Wednesday 23 August 2017

Wednesday 19 April 2017

Tuesday 25 August 2015

Tuesday 27 May 2014

Friday 23 May 2014

How to read page source of a website ? or how to get html source of an url?

Wednesday 28 August 2013

Thursday 30 May 2013